/* Stopped Clock: a station wall of enamel clocks. Signage: flat blocks, one-pixel rules,
   one-word labels on a strict grid. Red (--ak-accent-2) is the one colour that means "look here". */

:root {
  --sl: env(safe-area-inset-left, 0px);
  --sr: env(safe-area-inset-right, 0px);
  --st: env(safe-area-inset-top, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
  --status: var(--ac-status-h, 64px);
  /* start.js's help button: 48px plus a 12px edge each side. */
  --help-clear: 72px;
  --edge: 8px;
  --rule: 1px solid var(--ak-ink);
  --look: var(--ak-accent-2);
  /* Upright: a small corner logo, the wall edge to edge, and one slot under it that holds the
     play row or the find. The slot keeps room for the find, so the wall never moves for it. */
  --title-h: 26px;
  /* Room for the find under a full-width wall; a short phone gives some of it back to the wall. */
  --slot: clamp(250px, calc(100vh - var(--status) - var(--title-h) - 100vw - 20px), 300px);
  --slot: clamp(250px, calc(100dvh - var(--status) - var(--title-h) - 100dvw - 20px), 300px);
  --board: min(
    calc(100vw - var(--sl) - var(--sr)),
    calc(100vh - var(--status) - var(--title-h) - var(--slot) - var(--sb) - 20px),
    640px
  );
  --board: min(
    calc(100dvw - var(--sl) - var(--sr)),
    calc(100dvh - var(--status) - var(--title-h) - var(--slot) - var(--sb) - 20px),
    640px
  );
  --side-w: var(--board);
  --key: 40px;
}

* { box-sizing: border-box; }

html,
body {
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background-color: var(--ak-bg);
  background-image: var(--ak-bg-art);
  background-size: var(--ak-bg-size);
  color: var(--ak-ink);
  font-family: var(--ak-font-body);
  -webkit-tap-highlight-color: transparent;
}

button {
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

button:focus-visible {
  outline: 3px solid var(--ak-focus);
  outline-offset: 2px;
}

[hidden] { display: none !important; }

/* ---------- Layout ---------- */

.play {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: min(100%, max(var(--board), 420px));
  grid-template-rows: var(--title-h) var(--board) minmax(0, 1fr);
  grid-template-areas:
    "head"
    "stage"
    "slot";
  justify-content: center;
  row-gap: 6px;
  padding:
    calc(var(--status) + 2px)
    var(--sr)
    calc(var(--edge) + var(--sb))
    var(--sl);
  background-image: var(--ak-backdrop-layer, none);
  background-size: cover;
  background-position: center;
  touch-action: manipulation;
}

/* The logo is a corner mark, not a header: the wall keeps the screen. */
.head {
  grid-area: head;
  display: flex;
  justify-content: flex-start;
  min-height: 0;
  padding: 0 var(--edge);
}

.logo {
  display: block;
  height: var(--title-h);
  width: auto;
}

.stage {
  grid-area: stage;
  justify-self: center;
  position: relative;
  overflow: hidden;
  width: var(--board);
  height: var(--board);
  container-type: size;
}

.panel,
.reveal {
  grid-area: slot;
  min-height: 0;
}

.panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  padding: 0 var(--edge);
}

/* The column scrolls on a short screen; its rows never squash into each other. */
.panel > * { flex: none; }

/* The find takes the play row's place; the wall above stays put, sharp and ticking. */
.play.is-revealing .panel { display: none; }

/* Sideways: the wall runs the full height on the right; the chips, the corner logo and the slot share the left. */
@media (orientation: landscape) {
  /* The side column keeps at least 320px, so its words read at full size; the wall gives way. */
  :root {
    --board: min(
      calc(100vh - var(--st) - var(--sb)),
      calc(100vw - var(--help-clear) - 340px - var(--sl) - var(--sr)),
      720px
    );
    --board: min(
      calc(100dvh - var(--st) - var(--sb)),
      calc(100dvw - var(--help-clear) - 340px - var(--sl) - var(--sr)),
      720px
    );
    --side-w: min(420px, calc(100dvw - var(--board) - var(--help-clear) - 20px - var(--sl) - var(--sr)));
    --title-h: 24px;
  }

  .play {
    grid-template-columns: var(--side-w) var(--board);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "head stage"
      "slot stage";
    justify-content: center;
    align-content: stretch;
    column-gap: 12px;
    row-gap: 6px;
    height: 100%;
    padding:
      var(--st)
      calc(var(--help-clear) + var(--sr))
      var(--sb)
      calc(var(--edge) + var(--sl));
  }

  .head {
    justify-content: flex-start;
    padding: max(0px, calc(var(--status) - var(--st) + 2px)) 0 0;
  }

  .panel { padding: 0 0 var(--edge); }

  .reveal { margin-bottom: var(--edge); }

  .stage {
    grid-area: stage;
    align-self: center;
  }

  /* Keep the chrome's chips, toast and ending card in the side column, clear of the clocks. */
  #activity-chrome-status.ac-chrome { right: auto; max-width: var(--side-w); }
  #activity-chrome-toast.ac-chrome[data-at] {
    left: max(12px, env(safe-area-inset-left));
    translate: none;
    max-width: var(--side-w);
  }
  #activity-chrome-ending.ac-chrome.site-expercepth .ac-card { max-width: var(--side-w); }
  #activity-chrome-ending.ac-chrome.site-expercepth .ac-card > * { max-width: 100%; }
}

/* A wrong-tap message is read mid-search, so it is set at reading size, not chip size. */
#activity-chrome-toast.ac-chrome.site-expercepth {
  width: max-content;
  max-width: min(480px, calc(100vw - 24px));
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-transform: none;
}

/* ---------- The wall ---------- */

.wall {
  display: grid;
  grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
  grid-template-rows: repeat(var(--n, 3), minmax(0, 1fr));
  gap: 1px;
  width: 100%;
  height: 100%;
  border: var(--rule);
  background: var(--ak-outline);
}

.clock {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--ak-surface);
}

.clock:focus-visible { outline-offset: -4px; }

.plate {
  position: absolute;
  inset: 2.5%;
  display: block;
  background: url("art/clock-plate.png") center / 100% 100% no-repeat;
}

.plate svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.face-ticks line { stroke: var(--ak-ink); stroke-linecap: butt; }

.hand {
  transform-origin: 50px 50px;
}

.hand line { stroke: var(--ak-ink); }
.hand-m line { stroke-linecap: butt; }
.hand-h line { stroke-linecap: round; }
.cap { fill: var(--ak-ink); }

/* A wrong tap: the 7:15 hands laid over the clock, landing exactly on its own. */
.ghost { opacity: 0; pointer-events: none; }
.ghost line { stroke: var(--look); stroke-linecap: round; }
.clock.is-ghost .ghost { opacity: 0.4; }
.wall.is-solved .clock .ghost { opacity: 0; }

/* The ring that means "look here": the guide's pulse, and the found clock. */
.clock::after {
  content: "";
  position: absolute;
  inset: 2px;
  border: 3px solid transparent;
  pointer-events: none;
}

.clock.is-guide::after,
.clock.is-found::after { border-color: var(--look); }

.clock.is-found { z-index: 1; }

/* A row hint: a red band round the row that holds the odd clock. */
.row-mark {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--r, 0) * 100% / var(--n, 3));
  height: calc(100% / var(--n, 3));
  z-index: 1;
  border: 3px solid var(--look);
  pointer-events: none;
}

/* ---------- The reveal: the found hand under a lens, beside a true twin ---------- */

.result {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  border: var(--rule);
  background: var(--ak-surface);
}

/* The find: a slim band, the odd clock under the lens beside a true twin, one line, the way on. */
.reveal {
  display: flex;
  flex-direction: column;
  border: var(--rule);
  background: var(--ak-surface);
  container-type: size;
  /* Only a very short phone ever scrolls here, and the way on stays reachable. */
  overflow-y: auto;
}

.band {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  margin: 0;
  height: 32px;
  flex: none;
  background: var(--ak-btn-fill);
  color: var(--ak-btn-ink);
  font-family: var(--ak-font-display);
  font-weight: var(--ak-title-weight);
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.result .band {
  height: clamp(32px, 10cqh, 44px);
  font-size: clamp(14px, 4.4cqh, 20px);
}

.band-word {
  display: flex;
  align-items: center;
  padding: 0 12px;
}

.band-deg {
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: var(--look);
  color: var(--ak-btn-ink);
}

.pair {
  /* The lens takes what the band, captions, line and button leave, and the twin sits at two thirds of it. */
  --lens: clamp(64px, min(46cqw, calc(100cqh - 32px - 46px - 64px - 50px - 16px)), 220px);
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  align-items: center;
  gap: 5cqw;
  min-height: 0;
  padding: 6px 8px 0;
}

.big {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 0;
}

/* The odd clock, enlarged under the lens: the gap between the two long hands made plain. */
.lens {
  position: relative;
  display: block;
  width: var(--lens);
  aspect-ratio: 1;
  background: url("art/lens-button.png") center / 100% 100% no-repeat;
}

.lens-glass {
  position: absolute;
  inset: 11.3%;
  overflow: hidden;
  border-radius: 50%;
  background: var(--ak-surface);
}

.lens-glass svg {
  display: block;
  width: 100%;
  height: 100%;
}

.lens-rim { fill: none; stroke: var(--ak-ink); stroke-width: 2; }
.lens-ticks line { stroke: var(--ak-ink); stroke-width: 3; }
.lens-true { stroke: var(--look); stroke-width: 2.5; stroke-dasharray: 7 5; }
.lens-odd { stroke: var(--ak-ink); stroke-width: 4; }
.lens-hour { stroke: var(--ak-ink); stroke-width: 7; stroke-linecap: round; }
.lens-cap { fill: var(--ak-ink); }

.big .plate {
  position: relative;
  inset: auto;
  width: calc(var(--lens) * 0.72);
  height: calc(var(--lens) * 0.72);
}

/* The reading and how far off it is, under each clock, in the same words as the line below. */
.big figcaption {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 7.5em;
  padding: 3px 8px;
  border: var(--rule);
  background: var(--ak-bg);
  color: var(--ak-ink);
  font-size: 13px;
  line-height: 1.2;
  text-align: center;
}

.big figcaption b {
  font-family: var(--ak-font-display);
  font-weight: var(--ak-title-weight);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.big.is-odd figcaption { box-shadow: 0 0 0 2px var(--look); }

.wedge { fill: var(--look); fill-opacity: 0.8; }

.gap {
  flex: none;
  margin: 0;
  padding: 6px 12px;
  color: var(--ak-ink);
  font-size: 16px;
  line-height: 1.3;
}

/* The way on sits in the find itself, under what you found. */
.reveal .next {
  flex: none;
  margin: 0 8px 8px;
}

@media (orientation: landscape) {
  .play.is-revealing .logo { display: none; }
  .gap { font-size: 15px; }
}

/* ---------- The ending: twelve flaps, 90° down to 4° ---------- */

.board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 6px;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 8px;
  list-style: none;
  background: var(--ak-btn-fill);
}

.flap {
  position: relative;
  display: grid;
  grid-template-rows: 1fr 1fr;
  min-width: 0;
  min-height: 0;
  background: var(--ak-surface);
  color: var(--ak-ink);
}

/* The hinge runs between the two halves, so it never crosses a wedge or a number. */
.flap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--ak-ink);
}

.flap > svg {
  display: block;
  width: 100%;
  height: 100%;
}

.flap-low {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 0;
}

.flap-deg {
  font-family: var(--ak-font-display);
  font-weight: var(--ak-title-weight);
  font-size: clamp(14px, 6cqh, 28px);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.flap-mark {
  width: clamp(16px, 5.4cqh, 26px);
  height: clamp(16px, 5.4cqh, 26px);
  flex: none;
}

.flap-mark rect { fill: var(--ak-ink); }
.flap-mark path { fill: none; stroke: var(--ak-surface); stroke-width: 3; stroke-linecap: square; }

.fan { fill: var(--look); }
.fan-ref { stroke: var(--ak-ink); stroke-width: 1.5; }

/* ---------- Panel: one slim row under the wall. The wall keeps the screen. ---------- */

.tab {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  align-self: stretch;
  background: var(--look);
}

.tab svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--ak-btn-ink);
  stroke-width: 3;
  stroke-linecap: square;
}

/* The row: one true 7:15 to hold every clock against, the instruction (or the guide and hint words), Hint. */
.legend {
  display: flex;
  align-items: stretch;
  min-height: 52px;
  border: var(--rule);
  background: var(--ak-surface);
  color: var(--ak-ink);
}

.legend-text {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
  padding: 4px 10px;
}

.sign {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sign-word {
  margin: 0;
  font-family: var(--ak-font-display);
  font-weight: var(--ak-title-weight);
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sign-sub {
  margin: 0;
  font-size: 15px;
  line-height: 1.3;
}

/* ---------- The round: a slim flip-board, one cell per wall ---------- */

.round {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: none;
}

.round-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 8px;
  margin: 0;
  font-family: var(--ak-font-display);
  font-weight: var(--ak-title-weight);
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.round-best { text-align: right; }

.round-flaps {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 3px;
  margin: 0;
  padding: 3px;
  list-style: none;
  background: var(--ak-btn-fill);
}

.round-flaps li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 26px;
  background: var(--ak-surface);
  color: var(--ak-ink-muted);
  font-family: var(--ak-font-display);
  font-weight: var(--ak-title-weight);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* A found wall flips to the cobalt side; the open one is ringed in the red that means "look here". */
.round-flaps li.is-done {
  background: var(--ak-btn-active);
  color: var(--ak-btn-ink);
}

.round-flaps li.is-now {
  color: var(--ak-ink);
  box-shadow: inset 0 0 0 2px var(--look);
}

.caption-text {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 500;
}

.sign-key {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex: none;
  padding: 4px 8px;
  border-right: var(--rule);
}

.sign-key .plate {
  position: relative;
  inset: auto;
  flex: none;
  width: var(--key);
  height: var(--key);
}

.key-time {
  font-family: var(--ak-font-display);
  font-weight: var(--ak-title-weight);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.next {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  min-height: 56px;
  padding: 0;
  border: 0;
  border-radius: var(--ak-radius);
  background: var(--ak-btn-fill);
  color: var(--ak-btn-ink);
  text-align: left;
}

.next .tab { width: 44px; }
.next .tab svg { width: 22px; height: 22px; }

.next:active { background: var(--ak-btn-active); }

@media (hover: hover) {
  .next:hover { background: var(--ak-btn-hover); }
  .hint:hover { background: var(--ak-bg); }
}

.next-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 6px 14px;
}

.next-sub {
  font-family: var(--ak-font-body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.next-word {
  display: flex;
  align-items: center;
  font-family: var(--ak-font-display);
  font-weight: var(--ak-title-weight);
  font-size: 19px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mark-note {
  margin: 0;
  padding: 0 2px;
  color: var(--ak-ink);
  font-size: 15px;
  line-height: 1.3;
}

.hint {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  min-width: 48px;
  min-height: 48px;
  padding: 0 12px 0 6px;
  border: 0;
  border-left: var(--rule);
  border-radius: 0;
  background: var(--ak-surface);
  color: var(--ak-ink);
  font-family: var(--ak-font-display);
  font-weight: var(--ak-title-weight);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hint img {
  width: 28px;
  height: 28px;
}

.play.is-done .panel { display: none; }

/* Sideways the column is narrow, so the words get its whole width and the 7:15 key and Hint
   share a row under them, rather than squeezing the words between the two. */
@media (orientation: landscape) {
  .legend {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "text text"
      "key hint";
  }

  .legend-text {
    grid-area: text;
    padding: 8px 12px;
  }

  .sign-key {
    grid-area: key;
    flex-direction: row;
    gap: 8px;
    padding: 4px 12px;
    border-top: var(--rule);
  }

  .key-time { font-size: 15px; }

  .hint {
    grid-area: hint;
    justify-content: center;
    border-top: var(--rule);
    font-size: 16px;
  }

  .sign-word { font-size: 17px; }
  .sign-sub { font-size: 17px; }
  .caption-text { font-size: 19px; }
  .mark-note { font-size: 16px; }
  .round-head { font-size: 14px; }
}

/* ---------- The ending's flip-board sign: twelve cells, one gap each ---------- */

.result-sign {
  position: relative;
  flex: none;
  aspect-ratio: 384 / 80;
  background: var(--ak-btn-fill);
}

.result-sign img {
  display: block;
  width: 100%;
  height: 100%;
}

.flaps {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.flaps li {
  position: absolute;
  top: 20%;
  height: 61.25%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flaps li svg {
  width: 100%;
  height: 100%;
}

/* ---------- Motion: flip-board and slide, never bounce ---------- */

@media (prefers-reduced-motion: no-preference) {
  :root:not(.ac-still) .hand {
    transition: transform 140ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  :root:not(.ac-still) .wall.is-dealing .clock {
    animation: flip-in 260ms ease-out both;
    animation-delay: calc(var(--row, 0) * 45ms);
  }

  :root:not(.ac-still) .ghost { transition: opacity 180ms ease-out; }

  :root:not(.ac-still) .clock.is-guide::after {
    animation: ring 1.3s ease-out infinite;
  }

  /* A focus pull: the find sharpens out of a blur in the slot beside the wall. */
  :root:not(.ac-still) .reveal.is-in {
    animation: focus-pull 520ms ease-out both;
  }

  /* The twin slides out from behind the found clock to sit beside it. */
  :root:not(.ac-still) .reveal.is-in .big:not(.is-odd) {
    animation: slide-out 420ms 180ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  :root:not(.ac-still) .reveal.is-in .gap {
    animation: slide-up 320ms 260ms ease-out both;
  }

  :root:not(.ac-still) .legend-text.is-fresh,
  :root:not(.ac-still) .next.is-fresh {
    animation: flip-in 260ms ease-out both;
  }

  :root:not(.ac-still) .row-mark {
    animation: flip-in 240ms ease-out both;
  }

  :root:not(.ac-still) .flaps li {
    animation: flip-in 280ms ease-out both;
    animation-delay: calc(var(--i, 0) * 60ms + 120ms);
  }

  :root:not(.ac-still) .stage.is-end {
    animation: focus-pull 900ms ease-out both;
  }

  :root:not(.ac-still) .flap {
    animation: flap-turn 320ms ease-in-out both;
    animation-delay: calc(var(--i, 0) * 60ms + 120ms);
  }

  :root:not(.ac-still) .flap > * {
    animation: flap-face 320ms step-end both;
    animation-delay: calc(var(--i, 0) * 60ms + 120ms);
  }

  @keyframes flip-in {
    0% { transform: scaleY(0); }
    100% { transform: scaleY(1); }
  }

  @keyframes ring {
    0% { box-shadow: 0 0 0 0 var(--look); }
    100% { box-shadow: 0 0 0 9px transparent; }
  }

  @keyframes slide-out {
    from { transform: translateX(calc(-100% - 4cqw)); }
    to { transform: none; }
  }

  @keyframes slide-up {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: none; opacity: 1; }
  }

  @keyframes focus-pull {
    from { filter: blur(8px); }
    to { filter: blur(0); }
  }

  /* A split flap: it closes to the hinge as the blank cobalt, and opens on its result. */
  @keyframes flap-turn {
    0% { transform: scaleY(1); background: var(--ak-btn-active); }
    50% { transform: scaleY(0); background: var(--ak-btn-active); }
    51% { transform: scaleY(0); background: var(--ak-surface); }
    100% { transform: scaleY(1); background: var(--ak-surface); }
  }

  @keyframes flap-face {
    0% { visibility: hidden; }
    50% { visibility: visible; }
  }
}