/* =========================
   ANALOG CLOCK (separate)
   ========================= */

#clockArea{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}

.a-clock{
  --size: min(340px, 78vw);
  width:var(--size);
  height:var(--size);
  position:relative;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.95), rgba(235,238,247,.9) 55%, rgba(210,214,230,.95) 100%);
  border:1px solid rgba(15,23,42,0.10);
  box-shadow: 0 20px 60px rgba(13,17,51,.14);
  user-select:none;
  touch-action:none;
}

/* ring */
.a-clock::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.9), rgba(240,242,250,.9) 55%, rgba(220,224,238,.95) 100%);
  box-shadow: inset 0 10px 25px rgba(13,17,51,.10);
  border:1px solid rgba(15,23,42,0.08);
}

.a-clock__ticks,
.a-clock__numbers{
  position:absolute;
  inset:0;
  border-radius:50%;
  pointer-events:none;
}

.a-clock__tick{
  position:absolute;
  left:50%;
  top:50%;
  transform: rotate(var(--r)) translateY(calc(var(--size) * -0.46));
  transform-origin:center;
  width:2px;
  height:10px;
  border-radius:999px;
  background: rgba(15,23,42,0.30);
  margin-left:-1px;
}
.a-clock__tick--major{
  width:3px;
  height:16px;
  margin-left:-1.5px;
  background: rgba(15,23,42,0.55);
}

.a-clock__number{
  position:absolute;
  left:50%;
  top:50%;
  transform: rotate(var(--r)) translateY(calc(var(--size) * -0.36)) rotate(calc(-1 * var(--r)));
  transform-origin:center;
  width:32px;
  height:32px;
  margin:-16px 0 0 -16px;
  display:grid;
  place-items:center;
  font-weight:800;
  color: rgba(15,23,42,0.86);
}

/* hands */
.a-clock__hand{
  position:absolute;
  left:50%;
  top:50%;
  transform-origin: 50% 100%;
  transform: translate(-50%, -100%) rotate(0deg);
  border-radius:999px;
  cursor: grab;
  z-index:5;
  touch-action:none;
}

/* bigger hit area + visible inner bar */
.a-clock__hand::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:var(--w);
  height:100%;
  background: var(--c);
  border-radius:999px;
  box-shadow: 0 6px 18px rgba(13,17,51,.18);
}

.a-clock__hand--hour{
  width:22px;                 /* hit area */
  height: calc(var(--size) * 0.28);
  --w: 9px;                   /* visible thickness (трошки жирніше) */
  --c: #232425;
}

.a-clock__hand--minute{
  width:18px;                 /* hit area */
  height: calc(var(--size) * 0.40);
  --w: 7px;                   /* visible thickness */
  --c: #343536;
}

.a-clock__hand:active{ cursor: grabbing; }

.a-clock__pivot{
  position:absolute;
  left:50%;
  top:50%;
  width:18px;
  height:18px;
  margin:-9px 0 0 -9px;
  border-radius:50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, #b8bfd6);
  border:1px solid rgba(15,23,42,0.18);
  box-shadow: 0 10px 24px rgba(13,17,51,.18);
  z-index:10;
}

.a-clock--locked .a-clock__hand{
  pointer-events:none;
  cursor: default;
  opacity: .98;
}

.clock-meta{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}

.clock-readout{
  min-width: 120px;
  text-align:center;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.85);
  font-weight:900;
  letter-spacing: .06em;
}

.clock-hint{
  font-size: 13px;
  color: rgba(15,23,42,0.60);
  text-align:center;
}

/* controls for "set time" mode */
.clock-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 6px;
}
.clock-feedback{
  margin-top:10px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(15,23,42,0.10);
  background: rgba(255,255,255,0.85);
  font-weight:700;
}
.clock-feedback.ok{
  border-color: rgba(34,197,94,0.35);
  background: rgba(34,197,94,0.10);
}
.clock-feedback.bad{
  border-color: rgba(245,158,11,0.40);
  background: rgba(245,158,11,0.10);
}

/* option highlights (read-time mode) */
.option.is-correct{
  border-color: rgba(34,197,94,0.35);
  background: rgba(34,197,94,0.10);
}
.option.is-wrong{
  border-color: rgba(245,158,11,0.45);
  background: rgba(245,158,11,0.10);
}
.option.is-picked{
  outline: 2px solid rgba(29,25,180,0.14);
}


/* =========================================================
   HERO (start screen) responsive fix for Clock game
   Goals:
   - Phones: hero card centered on screen, width <= 80%
   - Tablets: hero card centered, comfortable max width
   This file loads after task.css, so we override here.
   ========================================================= */

#heroScreen.hero{ position: relative; }

@media (max-width: 900px){
  /* Keep the hero vertically centered on mobile/tablet */
  #heroScreen.hero{
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 18px 12px;
  }
  @supports (height: 100dvh){
    #heroScreen.hero{ min-height: 100dvh; }
  }

  /* Center content and avoid "full-bleed" card */
  #heroScreen .hero__wrap{
    width: min(520px, 90vw) !important;
    margin-inline: auto !important;
    justify-items: center;
  }

  #heroScreen .hero__card{
    width: 100% !important;
    margin: 0 auto !important;
  }

  /* Buttons: full width on narrow screens */
  #heroScreen .hero__actions{
    width: 100%;
    max-width: 420px;
  }
  #heroScreen .hero__actions .btn{
    width: 100%;
  }

  /* Note: keep readable and compact */
  #heroScreen .hero__note{
    width: 100%;
    max-width: 64ch;
    font-size: 13px;
    line-height: 1.35;
  }
}

/* Phones: <=80% width requirement */
@media (max-width: 520px){
  #heroScreen .hero__wrap{
    width: min(80vw, 420px) !important;
  }
}