/* Charades: a playing card with the icon's mask on a stick, a sticker, is the character. The cover (magenta, the mask, "Hold to peek") is the
   peek button, printed like a sticker too: an ink line, white paper and a thin cut line, literals in both modes; the front (the picture, the word, the sound rule) shows over it while the actor peeks. A ring around
   the card drains in a speed round, and the last 5 seconds and "Time!" take over the whole cover, so a deaf actor
   sees the end. Magenta --act: purple-leaning, clearly apart from Freeze Dance pink and Silly Spud purple; dark mode
   gets dark text on the bright fill, like every other game. */
:root {
  --accent: var(--act);
  --cover: var(--act);
  --on-cover: #fff;
  --front: #fff;
  --on-sun: #1d2333;
  --ch-print: #fff; /* a sticker's paper never swaps with the theme */
  --pill-line: var(--act);
  --pill-on: var(--act);
  --pill-on-fg: #fff;
  --pill-focus: var(--act);
  --card-r: 18px;
}
@media (prefers-color-scheme: dark) {
  :root { --on-cover: #121a2c; --front: var(--card); --on-sun: #121a2c; --pill-on-fg: #121a2c; }
}
.back:focus-visible { outline-color: var(--act); }
.status { min-height: 1.1em; }
.sub { margin-top: -12px; }
.rules {
  margin: -6px 0 0; padding: 0; list-style: none; color: var(--muted); font-weight: 600; font-size: .95rem;
  display: flex; flex-direction: column; gap: 2px; text-wrap: balance;
}
/* Every control on this screen is at least 44×44 px (SME panel, 2026-10-19): small fingers on a rug. The settings
   segments get theirs from game.css (.track span). */

/* While playing, everything above the card shrinks so status, card and buttons fit on a 667px-tall phone. */
.playing { gap: 8px; padding-block: 6px 20px; }
.playing h1 { font-size: 1.3rem; }
.playing .back { padding-block: 2px; }
.playing .status { min-height: 0; font-size: 1.4rem; }
.playing .sub { margin-top: -2px; font-size: .95rem; min-height: 0; }

/* Team scores: name and shape, never color alone. Star is sun yellow, Moon the accent. */
.scores { display: flex; gap: 16px; justify-content: center; align-items: center; margin: -4px 0 0; font-weight: 800; }
.team { display: inline-flex; align-items: center; gap: 6px; }
.team b {
  display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 9px; border-radius: 999px;
  font-family: var(--display); font-weight: 400; font-size: 1.15rem; line-height: 1;
}
.team.star b { background: var(--sun); color: var(--on-sun); }
.team.moon b { background: var(--act); color: var(--on-cover); }

/* The seconds, big enough to read from across the rug. Not live: the status says "10 seconds left!" and "Time's up!". */
.clock { font-family: var(--display); font-size: 3.2rem; line-height: 1; margin: -4px 0 -2px; font-variant-numeric: tabular-nums; }
.clock.low { color: var(--act); }

/* ----- The card ----- */
/* Layers, bottom up: the ring (::before) and the gap that sets it off from the cover (::after), the cover, the front
   (the word) and the end face (Time! and the reveal). */
.card { position: relative; isolation: isolate; width: min(100%, 300px); cursor: pointer; }
.playing .card { cursor: default; }
/* The ring: drains clockwise in a speed round (--left is 1 to 0, set by game.js), with a page-colored gap inside it. */
.card.timed::before, .card.timed::after { content: ""; position: absolute; z-index: 0; }
.card.timed::before { inset: -11px; border-radius: calc(var(--card-r) + 11px); background: conic-gradient(var(--act) calc(var(--left, 1) * 360deg), var(--line) 0); }
.card.timed::after { inset: -4px; border-radius: calc(var(--card-r) + 4px); background: var(--bg); }
/* While timed the ring is the one thing that reads: the gap inside it is the sticker's paper, and the cut line is gone, so
   inside the ring there is the paper and the ink line, no more. */
.card.timed::after { background: var(--ch-print); }
.card.timed.over::after { background: var(--bg); } /* the end face brings its own paper */
.card.timed .cover { box-shadow: none; }
.cover {
  position: relative; z-index: 1; width: 100%; min-height: 180px; border: 5px solid var(--ch-print); border-radius: var(--card-r); padding: 9px;
  background: var(--cover) padding-box; color: var(--on-cover); box-shadow: 0 0 0 1.5px var(--line); cursor: pointer; /* the border is the paper, the ring the cut line */
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--display); font-size: 1.35rem; letter-spacing: .5px;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; /* a drifting finger never starts a scroll (pointercancel would cover the word) */
}
.cover:disabled { pointer-events: none; } /* idle, the stop and the end: the card around it takes the tap for Start */
.cover:focus-visible { outline: 4px solid var(--fg); outline-offset: 3px; }
.face { width: 108px; height: 108px; }
/* The sticker's ink line, against the paper: the cover's padding box less half its stroke, so it never stretches. */
.frame { position: absolute; inset: 1.75px; z-index: 1; width: calc(100% - 3.5px); height: calc(100% - 3.5px); overflow: visible; pointer-events: none; }
/* The last 5 seconds at full-card size. */
.count {
  position: absolute; inset: 0; border-radius: calc(var(--card-r) - 5px); display: grid; place-items: center; padding: 12px;
  background: var(--cover); color: var(--on-cover); font-size: 6rem; line-height: 1; visibility: hidden;
}
.counting .count { visibility: visible; }
.counting .cover { animation: pulse 1s ease-in-out infinite; }
/* The end face: a solid "Time!" (or "Got it!" / "Skipped" in a one-word turn) and the word that was being acted. */
.end {
  position: absolute; inset: 0; z-index: 3; border-radius: var(--card-r); padding: 7px 11px; visibility: hidden; /* the cover's print: paper, cut line, ink line */
  border: 5px solid var(--ch-print); box-shadow: 0 0 0 1.5px var(--line);
  background: var(--sun) padding-box; color: var(--on-sun); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.end::after { content: ""; position: absolute; inset: 1.75px; border: 3.5px solid #1d2333; border-radius: 12.75px; pointer-events: none; }
.over .end { visibility: visible; }
.over .cover { visibility: hidden; }
.end-title { font-family: var(--display); font-size: 3rem; line-height: 1; }
.reveal { margin: 0; font-family: var(--display); font-size: 1.5rem; line-height: 1.15; text-wrap: balance; overflow-wrap: anywhere; }
.reveal:empty { display: none; }
@keyframes pulse { 50% { transform: scale(1.03); } }
/* The front: the picture very big, the word under it, the sound rule small. Taps go through it to the cover. */
.front {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: var(--card-r); padding: 12px 14px;
  background: var(--front); color: var(--fg); border: 4px solid var(--act);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.front .pic { font-size: 4.6rem; line-height: 1.1; }
.front .pic:empty { display: none; }
.front .text { font-family: var(--display); font-size: 1.9rem; line-height: 1.1; text-wrap: balance; overflow-wrap: anywhere; }
.front .rule { font-weight: 800; font-size: .9rem; line-height: 1.25; color: var(--muted); text-wrap: balance; }
.front.flip { animation: flip .2s ease-out 1; }
@keyframes flip { from { transform: rotateY(90deg); opacity: .5; } }
.card.hop { animation: hop .35s ease-out 1; }
@keyframes hop { 30% { transform: translateY(-10px); } }

/* ----- Time's up: this turn's words ----- */
.turn { width: 100%; background: var(--card); border: 2px solid var(--line); border-radius: 16px; padding: 8px 14px; }
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-weight: 800; line-height: 1.3; }
.list li.skip { color: var(--muted); }

/* ----- The pass screen's level pills ----- */
.level { display: flex; flex-direction: column; gap: 10px; width: 100%; text-align: left; } /* a settings row, left-aligned like .opts */
/* On the iPhone SE (375×548) the track must end above the pinned dock (PR #63 review, finding 1; viewports.spec.js
   checks it at every phone): the legend sits tighter over its track here than in .opts, which takes back the 8px the
   legend's own line cost. */
.level .set { gap: 4px; }
.level .set > legend { line-height: 1.1; }
.tip { margin: -4px 0 0; color: var(--muted); font-weight: 600; font-size: .95rem; text-wrap: balance; }

/* ----- Buttons (in the dock, game.css) ----- */
.dock-main.pair { gap: 16px; } /* Got it! and Skip sit side by side: room between them for a mis-tap */
.alt-btn {
  font-family: var(--display); font-size: 1.25rem; line-height: 1.1; border-radius: 999px; padding: 4px 10px; cursor: pointer;
  border: 3px solid var(--act); background: var(--card); color: var(--fg); min-height: 44px;
}
.alt-btn:focus-visible, .small-btn:focus-visible, .undo-btn:focus-visible { outline: 3px solid var(--act); outline-offset: 3px; }
/* The small row: Done or Pause in the middle, Undo to its left, each in its own column, so nothing moves. */
.dock-small { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(0, 1fr); align-items: center; } /* Undo always has room, even at 200% text */
.undo-btn { grid-area: 1 / 1; justify-self: end; margin-right: 12px; }
.small-btn { grid-area: 1 / 2; }
.small-btn, .undo-btn {
  font-family: var(--body); font-weight: 800; font-size: 1rem; border: 0; background: none; color: var(--fg); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; min-height: var(--eu-pause-h); min-width: 44px; padding: 0 18px; border-radius: 8px;
}
.undo-btn { color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .card, .card *, .front { animation: none !important; }
}

/* Eyes Up (site-wide, kit.js): a plain text card. No face, magenta, pictures or animation; the ring and the count
   are grey. Never goes dark: the actor needs the word, and a grown-up may read it with a little one. */
[data-eyes-up] .cover, [data-eyes-up] .count, [data-eyes-up] .end { background: var(--card); color: var(--fg); box-shadow: none; }
[data-eyes-up] .cover { border: 2px solid var(--line); }
[data-eyes-up] .frame .ink { stroke: var(--line); }
[data-eyes-up] .face, [data-eyes-up] .front .pic, [data-eyes-up] .list .pic, [data-eyes-up] .reveal .pic { display: none; }
[data-eyes-up] .front { border-color: var(--line); }
[data-eyes-up] .end { border: 2px solid var(--line); }
[data-eyes-up] .end::after { display: none; }
[data-eyes-up] .card.timed::before { background: conic-gradient(var(--fg) calc(var(--left, 1) * 360deg), var(--line) 0); }
[data-eyes-up] .clock.low { color: var(--fg); }
[data-eyes-up] .team b { background: none; color: var(--fg); border: 2px solid var(--muted); }
[data-eyes-up] .alt-btn { border-color: var(--muted); }
[data-eyes-up] .playing .main-btn { background: var(--muted); color: var(--bg); box-shadow: none; }
[data-eyes-up] .card, [data-eyes-up] .card *, [data-eyes-up] .front { animation: none !important; }