/* =============================================================================
   Code Words — a two-team word-and-clue game, dressed as a game.

   The site's own tokens (navy surfaces, logotype blue, telemetry cyan,
   Vazirmatn) in a console-game skin: HUD frames with corner brackets, option
   rows you step through with arrows, chunky buttons that press in, a clock
   ring, and splash screens over the board.

   Colour has one job each:
     cyan   — "do this": the main action and the live clock;
     blue   — team A (circle);  gold — team B (diamond);
     stone  — a bystander (bar); black + red cross — the assassin;
     red    — danger: the spymaster view, time running out.
   Shape always rides along with team colour.

   One prefix, `cw-`, that no shared sheet defines.
   ========================================================================== */

.cw-page {
  --cw-ink: var(--text);
  --cw-soft: var(--text-soft);
  --cw-muted: var(--text-muted);
  --cw-dim: var(--text-dim);

  --cw-a: #2f8ff0;
  --cw-a-hi: #6cb6ff;
  --cw-a-deep: #0c4a8c;
  --cw-b: #fbbf24;
  --cw-b-hi: #fde68a;
  --cw-b-deep: #a86b06;
  --cw-n: #d9cfb8;
  --cw-n-deep: #9a8d70;
  --cw-x: #08090d;
  --cw-red: #f43f5e;
  --cw-go: var(--accent-400);
  --cw-go-deep: #0b7287;

  --cw-panel: linear-gradient(180deg, #0c1422 0%, #070c15 100%);
  --cw-steel: linear-gradient(180deg, #1f2b3d, #141d2b);
  --cw-cut: 14px;

  padding-block-start: calc(var(--header-h) + var(--space-8));
}

/* --- Hero (setup only) ---------------------------------------------------- */
.cw-hero { padding-block: var(--space-4) var(--space-6); }
.cw-hero .h1 { font-size: var(--text-5xl); font-weight: 900; letter-spacing: -0.02em; }
.cw-hero .lede { margin-block-start: var(--space-4); color: var(--cw-soft); }
.cw-back { display: flex; inline-size: fit-content; align-items: center; gap: var(--space-2); margin-block-end: var(--space-5); color: var(--cw-muted); font-size: var(--text-sm); }
.cw-back:hover { color: var(--cw-ink); }
ul.cw-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-start: var(--space-5); }
.cw-noscript { margin-block-start: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--cw-red); border-radius: var(--r-md); color: var(--cw-red); }

/* While a game is on, the page steps aside for the arena. */
body.cw-is-playing .cw-hero,
body.cw-is-playing .cw-method { display: none; }
body.cw-is-playing .cw-page { padding-block-start: calc(var(--header-h) + var(--space-3)); }
body.cw-is-key .cw-hero { display: none; }
body.cw-is-key .cw-page { padding-block-start: calc(var(--header-h) + var(--space-3)); }

.cw-game { display: grid; gap: var(--space-4); padding-block-end: var(--space-8); scroll-margin-block-start: calc(var(--header-h) + var(--space-2)); }
.cw-stage { display: grid; gap: var(--space-5); min-inline-size: 0; }
body.cw-is-playing .cw-game { padding-block-end: var(--space-3); }
/* On a wide screen the arena may outgrow the page column: it is a game, not an article. */
body.cw-is-playing .cw-game.shell { max-inline-size: min(100%, 120rem); }

/* --- Shapes ------------------------------------------------------------- */
.cw-mark { position: relative; display: inline-block; flex: none; inline-size: 0.8rem; block-size: 0.8rem; border-radius: 50%; background: var(--cw-a); box-shadow: 0 0 12px -2px var(--cw-a); }
.cw-mark[data-kind='b'] { border-radius: 0.14rem; transform: rotate(45deg) scale(0.88); background: var(--cw-b); box-shadow: 0 0 12px -2px var(--cw-b); }
.cw-mark[data-kind='n'] { block-size: 0.3rem; border-radius: var(--r-full); background: var(--cw-n); box-shadow: none; }
.cw-mark[data-kind='x'] { border-radius: 0; background: none; box-shadow: none; }
.cw-mark[data-kind='x']::before,
.cw-mark[data-kind='x']::after { content: ''; position: absolute; inset-block-start: 50%; inset-inline-start: -10%; inline-size: 120%; block-size: 22%; border-radius: var(--r-full); background: var(--cw-red); transform: translateY(-50%) rotate(45deg); }
.cw-mark[data-kind='x']::after { transform: translateY(-50%) rotate(-45deg); }
.cw-mark--lg { inline-size: 1rem; block-size: 1rem; }
.cw-mark--xl { inline-size: 1.5rem; block-size: 1.5rem; }
.cw-mark--giant { inline-size: 4.5rem; block-size: 4.5rem; }

.cw-icon { display: inline-grid; place-items: center; flex: none; }
.cw-icon svg { inline-size: 1.25em; block-size: 1.25em; }
:dir(rtl) .cw-icon svg { transform: none; }

/* --- Frames: HUD panels with corner brackets ------------------------------------------ */
.cw-frame {
  --bracket: var(--accent-400);
  position: relative;
  min-inline-size: 0;
  padding: clamp(1.125rem, 2.6vw, 2.25rem);
  background: var(--cw-panel);
  clip-path: polygon(var(--cw-cut) 0, calc(100% - var(--cw-cut)) 0, 100% var(--cw-cut), 100% calc(100% - var(--cw-cut)), calc(100% - var(--cw-cut)) 100%, var(--cw-cut) 100%, 0 calc(100% - var(--cw-cut)), 0 var(--cw-cut));
  box-shadow: inset 0 0 0 1px rgb(124 196 255 / 14%), inset 0 1px 0 rgb(255 255 255 / 6%);
}
.cw-frame::before {
  content: '';
  position: absolute;
  inset: 6px;
  pointer-events: none;
  --l: 22px;
  --w: 2px;
  background:
    linear-gradient(var(--bracket), var(--bracket)) left top / var(--l) var(--w),
    linear-gradient(var(--bracket), var(--bracket)) left top / var(--w) var(--l),
    linear-gradient(var(--bracket), var(--bracket)) right top / var(--l) var(--w),
    linear-gradient(var(--bracket), var(--bracket)) right top / var(--w) var(--l),
    linear-gradient(var(--bracket), var(--bracket)) left bottom / var(--l) var(--w),
    linear-gradient(var(--bracket), var(--bracket)) left bottom / var(--w) var(--l),
    linear-gradient(var(--bracket), var(--bracket)) right bottom / var(--l) var(--w),
    linear-gradient(var(--bracket), var(--bracket)) right bottom / var(--w) var(--l);
  background-repeat: no-repeat;
  opacity: 0.55;
}
.cw-frame--quiet { --bracket: rgb(124 196 255 / 50%); background: rgb(8 13 22 / 70%); }

/* --- Buttons: chunky, and they press in ------------------------------------------------- */
.cw-btn {
  --face: var(--cw-steel);
  --lip: #0a111c;
  --ink: var(--cw-ink);
  --glow: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: 2.9rem;
  padding: 0.55rem 1.25rem;
  border: 0;
  border-radius: var(--r-md);
  background: var(--face);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 22%), inset 0 0 0 1px rgb(255 255 255 / 8%), 0 4px 0 var(--lip), 0 10px 22px -10px var(--glow);
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transform: translateY(0);
  transition: transform 80ms ease-out, box-shadow 80ms ease-out, filter var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.cw-btn:hover { filter: brightness(1.12); }
.cw-btn:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 22%), inset 0 0 0 1px rgb(255 255 255 / 8%), 0 1px 0 var(--lip); }
.cw-btn:focus-visible { outline: 3px solid var(--brand-200); outline-offset: 4px; }
.cw-btn[disabled] { opacity: 0.4; cursor: not-allowed; filter: none; transform: none; }
.cw-btn[hidden] { display: none; }
.cw-btn--go { --face: linear-gradient(180deg, #5ee6fa, var(--cw-go) 55%, #13b3cf); --lip: var(--cw-go-deep); --ink: #03222a; --glow: var(--cw-go); }
.cw-btn--danger { --face: linear-gradient(180deg, #fb7185, var(--cw-red)); --lip: #8c1530; --ink: #fff; --glow: var(--cw-red); }
.cw-btn--steel { --face: var(--cw-steel); --lip: #070b12; }
.cw-btn--ghost { --face: transparent; --lip: transparent; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 16%); color: var(--cw-soft); }
.cw-btn--ghost:active { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 16%); }
.cw-btn--sm { min-block-size: 2.4rem; padding: 0.4rem 0.95rem; font-size: var(--text-sm); }
.cw-btn--lg { min-block-size: 3.4rem; padding-inline: 1.75rem; font-size: var(--text-lg); }
.cw-btn--xl { min-block-size: 4rem; padding-inline: 2.5rem; font-size: var(--text-xl); letter-spacing: 0.01em; }
.cw-btn .cw-icon svg { inline-size: 1.15em; block-size: 1.15em; }

/* --- Setup: the game menu ------------------------------------------------------------- */
.cw-menu { display: grid; gap: var(--space-6); }
.cw-menu__title { font-size: var(--text-3xl); font-weight: 900; letter-spacing: -0.01em; }
.cw-menu__intro { margin-block-start: var(--space-2); max-inline-size: 44rem; color: var(--cw-soft); }
.cw-menu__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.cw-menu__col { display: grid; gap: var(--space-6); min-inline-size: 0; }
.cw-menu__block { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.cw-menu__legend { margin-block-end: var(--space-3); padding: 0; color: var(--cw-go); font-size: var(--text-sm); font-weight: 800; }
.cw-menu__help { margin-block: calc(var(--space-2) * -1) var(--space-3); color: var(--cw-dim); font-size: var(--text-xs); line-height: 1.8; }
.cw-menu__start { justify-self: center; min-inline-size: min(100%, 22rem); }

.cw-resume { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-inline-start: 4px solid var(--cw-go); background: rgb(34 211 238 / 7%); }
.cw-resume__title { color: var(--cw-ink); font-weight: 800; }
.cw-resume__note { color: var(--cw-soft); font-size: var(--text-sm); }
.cw-resume__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Teams: two nameplates and a "vs" */
.cw-versus__row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-3); }
.cw-versus__vs { color: var(--cw-dim); font-size: var(--text-sm); font-weight: 900; font-style: italic; }
.cw-nameplate {
  --team: var(--cw-a);
  --team-deep: var(--cw-a-deep);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-inline-size: 0;
  padding: var(--space-3) var(--space-4);
  background: linear-gradient(135deg, color-mix(in srgb, var(--team) 26%, #0a1220), #0a1220 70%);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--team) 55%, transparent), inset 0 -3px 0 var(--team);
  cursor: text;
}
.cw-nameplate[data-team='b'] { --team: var(--cw-b); --team-deep: var(--cw-b-deep); }
.cw-nameplate__input {
  inline-size: 100%;
  min-inline-size: 0;
  padding: 0.35rem 0;
  border: 0;
  background: none;
  color: var(--cw-ink);
  font: inherit;
  font-size: var(--text-lg);
  font-weight: 800;
}
.cw-nameplate__input::placeholder { color: color-mix(in srgb, var(--team) 60%, var(--cw-soft)); opacity: 0.85; }
.cw-nameplate__input:focus { outline: none; }
.cw-nameplate:focus-within { box-shadow: inset 0 0 0 2px var(--team), inset 0 -3px 0 var(--team), 0 0 24px -6px var(--team); }

/* Word language: tiles */
.cw-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.cw-tile { position: relative; display: block; min-inline-size: 0; cursor: pointer; }
.cw-tile__input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cw-tile__face {
  display: grid;
  gap: 0.15rem;
  block-size: 100%;
  padding: var(--space-4);
  border-radius: var(--r-lg);
  background: var(--cw-steel);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 9%), 0 4px 0 #070b12;
  transition: transform 120ms var(--ease-out), box-shadow 120ms var(--ease-out);
}
.cw-tile:hover .cw-tile__face { transform: translateY(-2px); }
.cw-tile__name { color: var(--cw-ink); font-size: var(--text-xl); font-weight: 900; line-height: 1.3; }
.cw-tile__sub { color: var(--cw-dim); font-size: var(--text-xs); }
.cw-tile__sample { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-block-start: var(--space-3); }
.cw-tile__word { padding: 0.1rem 0.45rem; border-radius: 0.3rem; background: rgb(255 255 255 / 7%); color: var(--cw-soft); font-size: var(--text-2xs); font-weight: 700; }
.cw-tile__sample:lang(en) .cw-tile__word { text-transform: uppercase; letter-spacing: 0.04em; }
.cw-tile__input:checked + .cw-tile__face { background: linear-gradient(180deg, #0f3346, #0a1d2b); box-shadow: inset 0 0 0 2px var(--cw-go), 0 4px 0 var(--cw-go-deep), 0 0 26px -8px var(--cw-go); }
.cw-tile__input:checked + .cw-tile__face .cw-tile__word { background: rgb(34 211 238 / 16%); color: var(--accent-300); }
.cw-tile__input:focus-visible + .cw-tile__face { outline: 3px solid var(--brand-200); outline-offset: 3px; }

/* Option rows: label, then ◀ value ▶ */
.cw-options { display: grid; gap: var(--space-2); }
.cw-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12.5rem, 15rem);
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border-radius: var(--r-md);
  background: rgb(255 255 255 / 3%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 6%);
}
:dir(rtl) .cw-option { padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2); }
.cw-option:focus-within { box-shadow: inset 0 0 0 1px rgb(34 211 238 / 45%); background: rgb(34 211 238 / 5%); }
.cw-option__text { display: grid; min-inline-size: 0; }
.cw-option__label { color: var(--cw-ink); font-weight: 800; }
.cw-option__hint { color: var(--cw-dim); font-size: var(--text-xs); }
.cw-option__control { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); }
.cw-option__middle { display: grid; justify-items: center; gap: 0.3rem; min-inline-size: 0; }
.cw-option__value { overflow: hidden; max-inline-size: 100%; color: var(--accent-300); font-size: var(--text-base); font-weight: 900; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.cw-option__value.is-bump { animation: cw-bump 220ms var(--ease-out); }
@keyframes cw-bump { 0% { transform: scale(0.82); opacity: 0.4; } 100% { transform: none; opacity: 1; } }
.cw-option__pips { display: flex; gap: 0.25rem; }
.cw-option__pip { inline-size: 0.6rem; block-size: 0.22rem; border-radius: var(--r-full); background: rgb(255 255 255 / 12%); transition: background-color var(--dur-fast) var(--ease-out); }
.cw-option__pip.is-on { background: var(--cw-go); box-shadow: 0 0 8px var(--cw-go); }
.cw-option__arrow {
  display: grid;
  place-items: center;
  inline-size: 2.6rem;
  block-size: 2.6rem;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--cw-steel);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%), 0 3px 0 #070b12;
  color: var(--cw-ink);
  cursor: pointer;
  transition: transform 80ms ease-out, box-shadow 80ms ease-out;
}
.cw-option__arrow:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%), 0 1px 0 #070b12; }
.cw-option__arrow:focus-visible { outline: 3px solid var(--brand-200); outline-offset: 2px; }
.cw-option__arrow[disabled] { opacity: 0.25; cursor: default; transform: none; }

/* Spymaster join */
.cw-join { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem); align-items: center; gap: var(--space-6); }
.cw-join__title { font-size: var(--text-xl); font-weight: 900; }
.cw-join__intro { margin-block-start: var(--space-1); color: var(--cw-soft); font-size: var(--text-sm); }
.cw-join__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); }
.cw-join__error { grid-column: 1 / -1; color: var(--cw-red); font-size: var(--text-sm); }
.cw-join__error[hidden] { display: none; }
.cw-codeinput {
  inline-size: 100%;
  min-block-size: 2.9rem;
  padding: 0.4rem 0.8rem;
  border: 0;
  border-radius: var(--r-md);
  background: #050910;
  box-shadow: inset 0 2px 6px rgb(0 0 0 / 70%), inset 0 0 0 1px rgb(124 196 255 / 22%);
  color: var(--accent-300);
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
}
.cw-codeinput::placeholder { color: rgb(124 196 255 / 28%); }
.cw-codeinput:focus { outline: none; box-shadow: inset 0 2px 6px rgb(0 0 0 / 70%), inset 0 0 0 2px var(--cw-go), 0 0 20px -6px var(--cw-go); }
.cw-codeinput[aria-invalid='true'] { box-shadow: inset 0 2px 6px rgb(0 0 0 / 70%), inset 0 0 0 2px var(--cw-red); }
.cw-codeinput.is-shake { animation: cw-shake 360ms ease-in-out; }
@keyframes cw-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* =============================================================================
   The arena
   ========================================================================== */

.cw-arena {
  --team: var(--cw-a);
  --team-hi: var(--cw-a-hi);
  --team-deep: var(--cw-a-deep);
  position: relative;
  display: grid;
  /* Named rows, so the board keeps the stretchy row while the clue strip is hidden. */
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas: 'hud' 'strip' 'field' 'dock';
  gap: var(--space-3);
  min-block-size: calc(100dvh - var(--header-h) - var(--space-6));
  padding: var(--space-3);
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--team) 16%, transparent), transparent 60%),
    linear-gradient(180deg, #08101c, #05080e);
  box-shadow: inset 0 0 0 1px rgb(124 196 255 / 12%), inset 0 2px 0 color-mix(in srgb, var(--team) 70%, transparent);
  transition: box-shadow var(--dur-slow) var(--ease-out);
}
[data-turn='b'] .cw-arena { --team: var(--cw-b); --team-hi: var(--cw-b-hi); --team-deep: var(--cw-b-deep); }

/* HUD: plate · clock · plate */
.cw-hud { grid-area: hud; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-4); }
.cw-plate {
  --pt: var(--cw-a);
  display: grid;
  gap: var(--space-2);
  min-inline-size: 0;
  padding: var(--space-2) var(--space-5);
  background: linear-gradient(135deg, color-mix(in srgb, var(--pt) 14%, #0a1220), #0a1220 75%);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pt) 35%, transparent);
  opacity: 0.62;
  transition: opacity var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.cw-plate[data-team='b'] { --pt: var(--cw-b); clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); }
.cw-plate.is-turn,
.cw-plate.is-winner { opacity: 1; background: linear-gradient(135deg, color-mix(in srgb, var(--pt) 30%, #0a1220), #0a1220 80%); box-shadow: inset 0 0 0 2px var(--pt), inset 0 -4px 0 var(--pt); }
.cw-plate__top { display: flex; align-items: center; gap: var(--space-3); min-inline-size: 0; }
.cw-plate__name { overflow: hidden; color: var(--cw-ink); font-size: var(--text-lg); font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.cw-plate__pips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.cw-plate__pip { inline-size: 0.95rem; block-size: 0.95rem; border-radius: 50%; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--pt) 55%, transparent); transition: background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.cw-plate[data-team='b'] .cw-plate__pip { border-radius: 0.15rem; transform: rotate(45deg) scale(0.82); }
.cw-plate__pip.is-found { background: var(--pt); box-shadow: 0 0 10px -1px var(--pt); animation: cw-pop 380ms var(--ease-out); }
@keyframes cw-pop { 0% { scale: 1.8; } 100% { scale: 1; } }
.cw-plate__score { color: var(--cw-soft); font-size: var(--text-sm); font-weight: 700; font-variant-numeric: tabular-nums; }

.cw-hud__center { display: grid; justify-items: center; gap: var(--space-1); }
.cw-clock {
  --frac: 1;
  --ring: var(--cw-go);
  position: relative;
  display: grid;
  place-items: center;
  inline-size: clamp(5rem, min(9vw, 13dvh), 7.5rem);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle, #0c1726 55%, #060a12 100%);
  box-shadow: 0 0 0 1px rgb(124 196 255 / 18%), 0 0 30px -10px var(--ring);
  color: var(--cw-ink);
  font: inherit;
  cursor: pointer;
}
.cw-clock:focus-visible { outline: 3px solid var(--brand-200); outline-offset: 4px; }
.cw-clock__ring { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; transform: rotate(-90deg); }
:dir(rtl) .cw-clock__ring { transform: rotate(-90deg) scaleY(-1); }
.cw-clock__track { fill: none; stroke: rgb(255 255 255 / 8%); stroke-width: 7; }
.cw-clock__fill { fill: none; stroke: var(--ring); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--frac) * 100); transition: stroke-dashoffset 120ms linear, stroke var(--dur-base); filter: drop-shadow(0 0 4px var(--ring)); }
.cw-clock__face { position: relative; display: grid; justify-items: center; line-height: 1.1; }
.cw-clock__digits { font-size: clamp(1.35rem, 2.4vw, 2rem); font-weight: 900; font-variant-numeric: tabular-nums; }
.cw-clock__state { color: var(--cw-dim); font-size: var(--text-2xs); font-weight: 700; }
.cw-clock__phase { color: var(--team-hi); font-size: var(--text-xs); font-weight: 800; text-align: center; }
.cw-clock.is-low { --ring: var(--warn-400); }
.cw-clock.is-low .cw-clock__digits { color: var(--warn-400); animation: cw-throb 1s ease-in-out infinite; }
.cw-clock.is-over { --ring: var(--cw-red); --frac: 1; }
.cw-clock.is-over .cw-clock__digits { color: var(--cw-red); font-size: var(--text-sm); }
.cw-clock.is-over { animation: cw-alarm 0.6s ease-in-out 3; }
.cw-clock.is-paused .cw-clock__fill { stroke: var(--cw-dim); filter: none; }
.cw-clock.is-off { cursor: default; }
.cw-clock.is-off .cw-clock__fill { stroke: transparent; }
.cw-clock.is-off .cw-clock__digits { color: var(--cw-dim); }
@keyframes cw-throb { 50% { transform: scale(1.12); } }
@keyframes cw-alarm { 50% { box-shadow: 0 0 0 6px rgb(244 63 94 / 35%), 0 0 40px 0 var(--cw-red); } }

/* The clue, once given */
.cw-strip {
  grid-area: strip;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-1) var(--space-4);
  padding: 0.15rem var(--space-5);
  border-radius: var(--r-full);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--team) 14%, transparent), transparent);
}
.cw-strip[hidden] { display: none; }
.cw-strip__label { color: var(--cw-dim); font-size: var(--text-sm); font-weight: 700; }
.cw-strip__word { color: var(--cw-ink); font-size: var(--text-2xl); font-weight: 900; overflow-wrap: anywhere; }
.cw-strip__word:lang(en) { text-transform: uppercase; letter-spacing: 0.05em; }
.cw-strip__word.is-empty { color: var(--cw-dim); font-size: var(--text-base); font-weight: 600; text-transform: none; letter-spacing: 0; }
.cw-strip__count { display: grid; place-items: center; min-inline-size: 2.2rem; block-size: 2.2rem; padding-inline: 0.4rem; border-radius: 50%; background: var(--team); color: #06101c; font-size: var(--text-lg); font-weight: 900; }
.cw-strip__count[hidden] { display: none; }
.cw-strip__guesses { color: var(--team-hi); font-size: var(--text-sm); font-weight: 700; }

/* Field: the board and everything that floats over it */
.cw-field { grid-area: field; position: relative; display: grid; min-block-size: 0; container-type: size; }
.cw-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(3.1rem, 1fr));
  gap: clamp(0.3rem, 1cqi, 0.75rem);
  min-block-size: 0;
}
.cw-field { min-block-size: 16rem; }
/* On a laptop or a TV the arena is exactly one screen tall and the board takes what is left. */
@media (min-width: 56.01rem) and (min-height: 34rem) {
  body.cw-is-playing .cw-arena { block-size: calc(100dvh - var(--header-h) - var(--space-6)); min-block-size: 0; }
  .cw-board { grid-template-rows: repeat(5, minmax(2.4rem, 1fr)); }
}

/* Cards: physical cards with a printed frame */
.cw-card {
  --face: linear-gradient(170deg, #e9e2d0 0%, #d6ccb3 100%);
  --ink: #1d1a14;
  --line: rgb(29 26 20 / 18%);
  --solid: transparent;
  position: relative;
  min-inline-size: 0;
  min-block-size: 0;
  padding: 0;
  border: 0;
  border-radius: clamp(0.35rem, 1cqi, 0.8rem);
  background: var(--face);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 70%), 0 3px 0 #7f735a, 0 8px 16px -8px rgb(0 0 0 / 80%);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: transform 120ms var(--ease-out), box-shadow 120ms var(--ease-out), filter 120ms;
  -webkit-tap-highlight-color: transparent;
}
.cw-card__inner {
  position: absolute;
  inset: clamp(0.2rem, 0.7cqi, 0.45rem);
  display: grid;
  place-items: center;
  padding: 0.15rem;
  border: 1px solid var(--line);
  border-radius: clamp(0.25rem, 0.7cqi, 0.55rem);
}
.cw-card__word {
  max-inline-size: 100%;
  font-size: clamp(0.62rem, min(2.5cqi, 5cqb), 2.6rem);
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.cw-card:lang(en) .cw-card__word { font-size: clamp(0.55rem, min(2.15cqi, 4.4cqb), 2.25rem); letter-spacing: 0.04em; text-transform: uppercase; }
.cw-card__mark { position: absolute; inset-block-start: 0.3rem; inset-inline-start: 0.3rem; display: none; inline-size: clamp(0.45rem, 1.3cqi, 0.9rem); block-size: clamp(0.45rem, 1.3cqi, 0.9rem); border-radius: 50%; background: currentcolor; }
.cw-card:hover:not([aria-disabled='true']) { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 70%), 0 6px 0 #7f735a, 0 14px 22px -10px rgb(0 0 0 / 85%), 0 0 0 2px var(--team); }
.cw-card:active:not([aria-disabled='true']) { transform: translateY(2px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 70%), 0 1px 0 #7f735a; }
.cw-card:focus-visible { outline: 3px solid var(--accent-300); outline-offset: 3px; z-index: 1; }
.cw-card[aria-disabled='true'] { cursor: default; }

/* Kinds */
.cw-card[data-kind='a'] { --solid: var(--cw-a); --solid-face: linear-gradient(160deg, #4aa3ff, #1667c4 70%, #0c4a8c); --solid-lip: #072f5b; --solid-ink: #fff; }
.cw-card[data-kind='b'] { --solid: var(--cw-b); --solid-face: linear-gradient(160deg, #fde68a, #f5b40f 60%, #c98a06); --solid-lip: #7a4d02; --solid-ink: #2a1b00; }
.cw-card[data-kind='n'] { --solid: var(--cw-n); --solid-face: linear-gradient(160deg, #8f8672, #6a6250); --solid-lip: #3c372c; --solid-ink: #f1ebdc; }
.cw-card[data-kind='x'] { --solid: var(--cw-red); --solid-face: radial-gradient(circle at 50% 40%, #2a0b12, #07070a 70%); --solid-lip: #000; --solid-ink: #fda4af; }
.cw-card[data-kind] .cw-card__mark { display: block; color: var(--solid); }
.cw-card[data-kind='b'] .cw-card__mark { border-radius: 0.1rem; transform: rotate(45deg) scale(0.86); }
.cw-card[data-kind='n'] .cw-card__mark { block-size: 0.24rem; margin-block-start: 0.25rem; }
.cw-card[data-kind='x'] .cw-card__mark { border-radius: 0; background: none; }
.cw-card[data-kind='x'] .cw-card__mark::before,
.cw-card[data-kind='x'] .cw-card__mark::after { content: ''; position: absolute; inset-block-start: 50%; inset-inline-start: -15%; inline-size: 130%; block-size: 0.2rem; border-radius: var(--r-full); background: currentcolor; transform: translateY(-50%) rotate(45deg); }
.cw-card[data-kind='x'] .cw-card__mark::after { transform: translateY(-50%) rotate(-45deg); }

.cw-card.is-revealed { --face: var(--solid-face); --ink: var(--solid-ink); --line: rgb(255 255 255 / 22%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 30%), 0 2px 0 var(--solid-lip), 0 0 22px -10px var(--solid); }
.cw-card.is-revealed .cw-card__mark { color: var(--solid-ink); opacity: 0.75; }
.cw-card.is-revealed[data-kind='x'] { box-shadow: inset 0 0 0 2px var(--cw-red), 0 0 30px -6px var(--cw-red); }
.cw-card.is-revealed[data-kind='x'] .cw-card__mark { color: var(--cw-red); opacity: 1; }

/* Known but face down: spymaster view, or after the game */
.cw-card.is-peek { box-shadow: inset 0 0 0 4px var(--solid), 0 3px 0 #7f735a; }
.cw-card.is-peek[data-kind='x'] { --face: linear-gradient(170deg, #3a2a2e, #1b1316); --ink: #fecdd3; --line: rgb(244 63 94 / 40%); }
.cw-card.is-peek[data-kind='n'] { box-shadow: inset 0 0 0 4px #a99c80, 0 3px 0 #7f735a; }
.is-over .cw-card.is-peek { filter: saturate(0.8) brightness(0.82); }

.cw-card.is-flipping { animation: cw-flip 520ms var(--ease-out); }
@keyframes cw-flip {
  0% { transform: perspective(36rem) rotateY(0) scale(1); }
  45% { transform: perspective(36rem) rotateY(90deg) scale(1.06); filter: brightness(1.6); }
  100% { transform: perspective(36rem) rotateY(0) scale(1); }
}
.is-dealing .cw-card { animation: cw-deal 520ms var(--ease-out) both; animation-delay: calc(var(--d) * 45ms); }
@keyframes cw-deal { from { opacity: 0; transform: translateY(-1.25rem) rotate(-4deg) scale(0.9); } }
.is-boom .cw-field { animation: cw-quake 520ms ease-in-out; }
.is-boom .cw-arena { box-shadow: inset 0 0 0 2px var(--cw-red), inset 0 0 120px -20px var(--cw-red); }
@keyframes cw-quake { 10%, 50%, 90% { transform: translate(-6px, 2px); } 30%, 70% { transform: translate(6px, -2px); } }

/* Spymaster view banner and toasts */
.cw-peekbanner {
  position: absolute;
  inset-block-start: -0.6rem;
  inset-inline: 0;
  z-index: 3;
  justify-self: center;
  inline-size: fit-content;
  max-inline-size: calc(100% - 1rem);
  margin-inline: auto;
  padding: 0.3rem 1rem;
  border-radius: var(--r-full);
  background: var(--cw-red);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 800;
  text-align: center;
  box-shadow: 0 6px 18px -6px var(--cw-red);
}
.cw-peekbanner[hidden] { display: none; }
.is-peeking .cw-board { outline: 2px dashed rgb(244 63 94 / 60%); outline-offset: 6px; border-radius: var(--r-md); }

.cw-toast {
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 0;
  z-index: 4;
  inline-size: fit-content;
  max-inline-size: min(90%, 30rem);
  margin-inline: auto;
  padding: 0.7rem 1.4rem;
  border-radius: var(--r-lg);
  background: rgb(5 9 16 / 92%);
  box-shadow: inset 0 0 0 2px var(--tone, var(--cw-go)), 0 18px 40px -12px rgb(0 0 0 / 90%);
  color: var(--cw-ink);
  font-size: var(--text-lg);
  font-weight: 900;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(0.9);
}
.cw-toast[data-tone='good'] { --tone: var(--ok-400); }
.cw-toast[data-tone='bad'] { --tone: var(--cw-red); }
.cw-toast[data-tone='warn'] { --tone: var(--warn-400); }
.cw-toast.is-shown { animation: cw-toast 2.8s var(--ease-out) forwards; }
@keyframes cw-toast {
  0% { opacity: 0; transform: translateY(-50%) scale(0.85); }
  8% { opacity: 1; transform: translateY(-50%) scale(1.04); }
  14%, 82% { opacity: 1; transform: translateY(-50%) scale(1); }
  100% { opacity: 0; transform: translateY(-50%) scale(0.96); }
}

/* --- Splash screens over the board --------------------------------------------------------- */
.cw-overlay {
  position: absolute;
  inset: -0.25rem;
  z-index: 5;
  display: grid;
  place-items: safe center;
  overflow-y: auto;
  padding: var(--space-3);
  border-radius: var(--r-lg);
  background: rgb(3 6 11 / 78%);
  backdrop-filter: blur(6px);
  animation: cw-fade 200ms var(--ease-out);
}
.cw-overlay[hidden] { display: none; }
/* The briefing and the key-for-phones carry more than the board can hold: they take the screen. */
.cw-overlay[data-kind='lobby'],
.cw-overlay[data-kind='phones'] { position: fixed; inset: 0; z-index: 200; padding-block-start: calc(var(--header-h) + var(--space-3)); padding: var(--space-4); border-radius: 0; background: rgb(3 6 11 / 86%); }
.cw-splash--lobby { inline-size: min(100%, 52rem); }
.cw-splash--lobby .cw-joinblock { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: 'title title' 'code steps' 'code actions' 'status status' 'note note'; justify-items: start; column-gap: var(--space-6); text-align: start; }
.cw-splash--lobby .cw-joinblock__title { grid-area: title; justify-self: center; }
.cw-splash--lobby .cw-joinblock__code { grid-area: code; align-self: center; }
.cw-splash--lobby .cw-joinblock__steps { grid-area: steps; }
.cw-splash--lobby .cw-joinblock__actions { grid-area: actions; }
.cw-splash--lobby .cw-joinblock__status { grid-area: status; justify-self: center; }
.cw-splash--lobby .cw-joinblock__note { grid-area: note; justify-self: center; }
@keyframes cw-fade { from { opacity: 0; } }
.cw-splash {
  --st: var(--cw-go);
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  inline-size: min(100%, 38rem);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  background: var(--cw-panel);
  clip-path: polygon(var(--cw-cut) 0, calc(100% - var(--cw-cut)) 0, 100% var(--cw-cut), 100% calc(100% - var(--cw-cut)), calc(100% - var(--cw-cut)) 100%, var(--cw-cut) 100%, 0 calc(100% - var(--cw-cut)), 0 var(--cw-cut));
  box-shadow: inset 0 0 0 1px rgb(124 196 255 / 20%), inset 0 3px 0 var(--st);
  text-align: center;
  animation: cw-rise 320ms var(--ease-out);
}
.cw-splash[data-team='a'] { --st: var(--cw-a); }
.cw-splash[data-team='b'] { --st: var(--cw-b); }
@keyframes cw-rise { from { opacity: 0; transform: translateY(1rem) scale(0.96); } }
.cw-splash__head { display: flex; align-items: center; gap: var(--space-3); }
.cw-splash__title { font-size: var(--text-2xl); font-weight: 900; line-height: 1.35; outline: none; }
.cw-splash__big { color: var(--cw-ink); font-size: clamp(2rem, 1.3rem + 3.5vw, 3.75rem); font-weight: 900; line-height: 1.2; outline: none; }
.cw-splash__sub { max-inline-size: 30rem; color: var(--cw-soft); }
.cw-splash__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-block-start: var(--space-2); }

.cw-splash--handoff { inline-size: 100%; max-inline-size: none; background: none; clip-path: none; box-shadow: none; }
.cw-overlay[data-kind='handoff'] {
  background:
    repeating-linear-gradient(-45deg, color-mix(in srgb, var(--hand, var(--cw-a)) 10%, transparent) 0 18px, transparent 18px 36px),
    radial-gradient(circle, color-mix(in srgb, var(--hand, var(--cw-a)) 30%, rgb(3 6 11 / 85%)), rgb(3 6 11 / 92%) 70%);
  cursor: pointer;
}
[data-turn='b'] .cw-overlay[data-kind='handoff'] { --hand: var(--cw-b); }
.cw-splash--handoff .cw-mark--giant { animation: cw-spin-in 600ms var(--ease-out); }
.cw-splash--handoff .cw-splash__big { animation: cw-slam 520ms var(--ease-out); text-shadow: 0 0 30px var(--st); }
@keyframes cw-spin-in { from { transform: scale(0) rotate(-180deg); } }
.cw-splash--handoff[data-team='b'] .cw-mark--giant { animation-name: cw-spin-in-b; }
@keyframes cw-spin-in-b { from { transform: scale(0) rotate(-135deg); } to { transform: rotate(45deg) scale(0.88); } }
@keyframes cw-slam { 0% { opacity: 0; transform: scale(2.2); letter-spacing: 0.3em; } 60% { opacity: 1; transform: scale(0.96); } 100% { transform: none; } }

.cw-splash--over { overflow: hidden; }
.cw-splash--over .cw-splash__big { text-shadow: 0 0 34px var(--st); }
.cw-burst { position: absolute; inset-block-start: 3.5rem; inset-inline-start: 50%; inline-size: 0; block-size: 0; pointer-events: none; animation: cw-turn 18s linear infinite; }
.cw-burst__ray { position: absolute; inset-inline-start: -0.5rem; inset-block-start: 0; inline-size: 1rem; block-size: 22rem; background: linear-gradient(180deg, color-mix(in srgb, var(--st) 30%, transparent), transparent 70%); transform-origin: 50% 0; transform: rotate(calc(var(--i) * 25.7deg)); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
@keyframes cw-turn { to { rotate: 360deg; } }
.cw-splash--over > *:not(.cw-burst) { position: relative; }
.cw-splash--over[data-reason='assassin'] .cw-splash__sub { color: #fda4af; font-weight: 700; }
.cw-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; color: var(--cw-soft); font-size: var(--text-sm); list-style: none; }
.cw-stats__item { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.3rem 0.8rem; border-radius: var(--r-full); background: rgb(255 255 255 / 5%); }

/* The briefing / key-on-phone block */
.cw-joinblock { display: grid; justify-items: center; gap: var(--space-3); inline-size: 100%; margin-block: var(--space-2); padding: var(--space-4); border-radius: var(--r-lg); background: rgb(255 255 255 / 3%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 7%); }
.cw-joinblock__title { color: var(--cw-ink); font-weight: 800; }
.cw-joinblock__code { display: grid; justify-items: center; gap: 0.1rem; }
.cw-joinblock__codelabel { color: var(--cw-dim); font-size: var(--text-xs); }
.cw-joinblock__digits {
  padding: 0.3rem 1.2rem;
  border-radius: var(--r-md);
  background: #050910;
  box-shadow: inset 0 2px 8px rgb(0 0 0 / 70%), inset 0 0 0 1px rgb(34 211 238 / 30%);
  color: var(--accent-300);
  font-family: var(--font-mono);
  font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem);
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.25;
  text-shadow: 0 0 18px rgb(34 211 238 / 55%);
  unicode-bidi: isolate;
}
:lang(fa) .cw-joinblock__digits,
:lang(fa) .cw-key__codevalue { font-family: var(--font-sans); }
.cw-joinblock__steps { display: grid; gap: 0.2rem; margin: 0; padding-inline-start: 1.2rem; color: var(--cw-soft); font-size: var(--text-sm); line-height: 1.8; text-align: start; list-style: decimal; }
.cw-joinblock__steps li::marker { color: var(--cw-go); font-weight: 800; }
.cw-joinblock__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.cw-joinblock__status { min-block-size: 1.2em; color: var(--ok-400); font-size: var(--text-xs); }
.cw-joinblock__note { color: var(--cw-red); font-size: var(--text-xs); font-weight: 700; }

/* --- Dock --------------------------------------------------------------------------------- */
.cw-dock { --dock-h: 3rem; grid-area: dock; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); padding: var(--space-3); border-radius: var(--r-lg); background: rgb(255 255 255 / 3%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 6%); }
.cw-dock__main { min-inline-size: 0; }
.cw-dock__main > [hidden] { display: none !important; }

.cw-cluepad { display: grid; grid-template-columns: minmax(9rem, 1fr) minmax(16rem, 30rem) auto; align-items: end; gap: var(--space-4); }
.cw-cluepad__go { min-inline-size: clamp(10rem, 14vw, 16rem); }
.cw-cluepad__word {
  inline-size: 100%;
  min-block-size: var(--dock-h);
  padding: 0.4rem 0.9rem;
  border: 0;
  border-radius: var(--r-md);
  background: #050910;
  box-shadow: inset 0 2px 6px rgb(0 0 0 / 70%), inset 0 0 0 1px rgb(124 196 255 / 20%);
  color: var(--cw-ink);
  font: inherit;
  font-size: var(--text-lg);
  font-weight: 800;
}
.cw-cluepad__word:lang(en) { text-transform: uppercase; letter-spacing: 0.04em; }
.cw-cluepad__word::placeholder { color: var(--cw-dim); font-weight: 600; text-transform: none; letter-spacing: 0; }
.cw-cluepad__word:focus { outline: none; box-shadow: inset 0 2px 6px rgb(0 0 0 / 70%), inset 0 0 0 2px var(--team), 0 0 18px -6px var(--team); }
.cw-cluepad__go { min-block-size: var(--dock-h); }

/* How many words: one connected bar, 1–9 */
.cw-countbar { display: grid; gap: 0.3rem; min-inline-size: 0; }
.cw-countbar__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.cw-countbar__label { color: var(--cw-soft); font-size: var(--text-xs); font-weight: 800; }
.cw-countbar__hint { color: var(--team-hi); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
.cw-countbar__track {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-md);
  background: #050910;
  box-shadow: inset 0 2px 6px rgb(0 0 0 / 70%), inset 0 0 0 1px rgb(124 196 255 / 18%);
}
.cw-countbar__seg {
  display: grid;
  place-items: center;
  min-inline-size: 0;
  block-size: calc(var(--dock-h) - 6px);
  padding: 0;
  border: 0;
  border-radius: calc(var(--r-md) - 3px);
  background: linear-gradient(180deg, #1c2738, #121a27);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%);
  color: var(--cw-soft);
  font: inherit;
  cursor: pointer;
  transition: background 120ms, color 120ms, transform 80ms;
}
.cw-countbar__num { display: block; font-size: var(--text-lg); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.cw-countbar__seg:hover { color: var(--cw-ink); background: linear-gradient(180deg, #243247, #172132); }
.cw-countbar__seg:active { transform: scale(0.94); }
.cw-countbar__seg:focus-visible { outline: 3px solid var(--brand-200); outline-offset: 1px; position: relative; z-index: 1; }
.cw-countbar__seg.is-under { background: linear-gradient(180deg, var(--team), var(--team-deep)); opacity: 0.55; box-shadow: inset 0 1px 0 rgb(255 255 255 / 18%); color: #fff; }
.cw-countbar__seg.is-on { background: linear-gradient(180deg, var(--team-hi), var(--team)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 45%), 0 0 16px -2px var(--team); color: #06101c; }

.cw-tokens { display: flex; gap: 0.35rem; overflow-x: auto; padding-block: 0.3rem 0.5rem; scrollbar-width: none; }
.cw-tokens::-webkit-scrollbar { display: none; }
.cw-token {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: 2.6rem;
  block-size: 2.6rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2c3a50, #121a27 70%);
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / 10%), 0 3px 0 #05080d;
  color: var(--cw-soft);
  font: inherit;
  font-size: var(--text-base);
  font-weight: 900;
  cursor: pointer;
  transition: transform 80ms ease-out, box-shadow 80ms ease-out, background 120ms;
}
.cw-token:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px rgb(255 255 255 / 10%), 0 1px 0 #05080d; }
.cw-token:focus-visible { outline: 3px solid var(--brand-200); outline-offset: 2px; }
.cw-token.is-on { background: radial-gradient(circle at 35% 30%, var(--team-hi), var(--team) 65%); box-shadow: inset 0 0 0 2px rgb(255 255 255 / 35%), 0 3px 0 var(--team-deep), 0 0 16px -2px var(--team); color: #06101c; transform: translateY(-2px); }
.cw-token--wide { inline-size: auto; padding-inline: 0.9rem; border-radius: var(--r-full); font-variant-numeric: tabular-nums; }

.cw-guessrow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.cw-guessrow__end { min-inline-size: 12rem; }

.cw-dock__tools { display: flex; gap: var(--space-2); }
.cw-tool {
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  min-inline-size: 3.6rem;
  padding: 0.45rem 0.5rem 0.4rem;
  border: 0;
  border-radius: var(--r-md);
  background: var(--cw-steel);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 16%), 0 3px 0 #05080d;
  color: var(--cw-soft);
  font: inherit;
  cursor: pointer;
  transition: transform 80ms ease-out, box-shadow 80ms ease-out, color 120ms;
}
.cw-tool:hover { color: var(--cw-ink); }
.cw-tool:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 16%), 0 1px 0 #05080d; }
.cw-tool:focus-visible { outline: 3px solid var(--brand-200); outline-offset: 2px; }
.cw-tool[disabled] { opacity: 0.35; cursor: default; transform: none; }
.cw-tool[hidden] { display: none; }
.cw-tool.is-on { background: linear-gradient(180deg, #fb7185, var(--cw-red)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 30%), 0 3px 0 #8c1530; color: #fff; }
.cw-tool__label { font-size: var(--text-2xs); font-weight: 800; white-space: nowrap; }
.cw-tool .cw-icon svg { inline-size: 1.35rem; block-size: 1.35rem; }

.cw-dock__more { position: relative; display: grid; }
.cw-menu-pop {
  position: absolute;
  inset-block-end: calc(100% + 0.6rem);
  inset-inline-end: 0;
  z-index: 8;
  display: grid;
  gap: 0.2rem;
  min-inline-size: 13rem;
  padding: 0.4rem;
  border-radius: var(--r-md);
  background: #0c1422;
  box-shadow: inset 0 0 0 1px rgb(124 196 255 / 20%), 0 20px 40px -12px rgb(0 0 0 / 90%);
  animation: cw-rise 180ms var(--ease-out);
}
.cw-menu-pop[hidden] { display: none; }
.cw-menu-pop__item { display: flex; align-items: center; gap: var(--space-3); padding: 0.6rem 0.8rem; border: 0; border-radius: var(--r-sm); background: none; color: var(--cw-soft); font: inherit; font-size: var(--text-sm); font-weight: 700; text-align: start; cursor: pointer; }
.cw-menu-pop__item:hover,
.cw-menu-pop__item:focus-visible { background: rgb(34 211 238 / 10%); color: var(--cw-ink); outline: none; }

/* --- The spymaster's key ------------------------------------------------------------------- */
.cw-key { display: grid; gap: var(--space-4); }
.cw-key__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.cw-key__title { font-size: var(--text-2xl); font-weight: 900; outline: none; }
.cw-key__code { display: flex; align-items: baseline; gap: var(--space-3); }
.cw-key__codevalue { color: var(--accent-300); font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 800; letter-spacing: 0.08em; unicode-bidi: isolate; }
.cw-key__lang { color: var(--cw-dim); font-size: var(--text-sm); }
.cw-key__warn { margin-block-start: calc(var(--space-3) * -1); color: var(--cw-red); font-size: var(--text-xs); font-weight: 800; }
.cw-key__starts { display: flex; align-items: center; gap: var(--space-3); color: var(--cw-ink); font-size: var(--text-lg); font-weight: 900; }
.cw-key__legend { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.cw-key__legenditem { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.25rem 0.7rem; border-radius: var(--r-full); background: rgb(255 255 255 / 5%); color: var(--cw-soft); font-size: var(--text-xs); }
.cw-key__legendcount { color: var(--cw-ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.cw-key__gridwrap { position: relative; container-type: inline-size; }
.cw-board--key { grid-template-rows: none; grid-auto-rows: auto; }
.cw-card--key { --face: var(--solid-face); --ink: var(--solid-ink); --line: rgb(255 255 255 / 22%); aspect-ratio: 1.15; box-shadow: inset 0 1px 0 rgb(255 255 255 / 30%), 0 3px 0 var(--solid-lip); }
.cw-card--key .cw-card__word { font-size: clamp(0.6rem, 3.1cqi, 1.3rem); }
.cw-card--key:lang(en) .cw-card__word { font-size: clamp(0.52rem, 2.6cqi, 1.1rem); }
.cw-card--key .cw-card__mark { color: var(--solid-ink); opacity: 0.75; }
.cw-card--key[data-kind='x'] { box-shadow: inset 0 0 0 2px var(--cw-red), 0 3px 0 #000; }
.cw-card--key[data-kind='x'] .cw-card__mark { color: var(--cw-red); opacity: 1; }
.cw-card--key:hover:not([aria-disabled='true']) { transform: none; box-shadow: inset 0 1px 0 rgb(255 255 255 / 30%), 0 3px 0 var(--solid-lip); }
.cw-card--key.is-done { opacity: 0.28; filter: grayscale(0.6); }
.cw-card--key.is-done .cw-card__word { text-decoration: line-through 2px; }
.cw-key__tap { color: var(--cw-dim); font-size: var(--text-xs); line-height: 1.8; }
.cw-key__covered { position: absolute; inset: 0; display: grid; place-items: center; color: var(--cw-ink); font-weight: 900; }
.cw-key__covered[hidden] { display: none; }
.cw-key.is-covered .cw-board--key { filter: blur(14px) saturate(0.2); pointer-events: none; user-select: none; }
.cw-key__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.cw-pocket { --frac: 0; display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--r-lg); background: rgb(255 255 255 / 3%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 7%); }
.cw-pocket__title { color: var(--cw-go); font-size: var(--text-sm); font-weight: 800; }
.cw-pocket__help { color: var(--cw-dim); font-size: var(--text-xs); }
.cw-pocket__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); }
.cw-pocket__left { min-inline-size: 3.5ch; color: var(--cw-ink); font-size: var(--text-2xl); font-weight: 900; font-variant-numeric: tabular-nums; }
.cw-pocket__bar { block-size: 0.5rem; border-radius: var(--r-full); background: rgb(255 255 255 / 8%); overflow: hidden; }
.cw-pocket__fill { display: block; inline-size: calc(var(--frac) * 100%); block-size: 100%; border-radius: inherit; background: var(--cw-go); box-shadow: 0 0 10px var(--cw-go); transition: inline-size 200ms linear; }
.cw-pocket.is-low .cw-pocket__fill { background: var(--warn-400); }
.cw-pocket.is-low .cw-pocket__left { color: var(--warn-400); }
.cw-pocket.is-over .cw-pocket__left { color: var(--cw-red); }
.cw-pocket .cw-btn[hidden] { display: none; }
.cw-tokens--pocket { flex-wrap: wrap; overflow: visible; }

/* --- Method ------------------------------------------------------------------------------- */
.cw-method { display: grid; gap: var(--space-5); padding-block: var(--space-8) var(--space-12); }
.cw-method__title { font-size: var(--text-2xl); font-weight: 900; }
.cw-method__intro { max-inline-size: 46rem; color: var(--cw-muted); }
ol.cw-method__steps { display: grid; gap: var(--space-3); max-inline-size: 52rem; padding-inline-start: 1.4rem; color: var(--cw-soft); line-height: var(--leading-normal); list-style: decimal; }
.cw-method__steps li::marker { color: var(--cw-go); font-weight: 800; }
.cw-method__line { max-inline-size: 52rem; color: var(--cw-soft); line-height: var(--leading-normal); }
.cw-method__basis { max-inline-size: 52rem; padding: var(--space-4) var(--space-5); border-inline-start: 3px solid var(--warn-400); background: rgb(251 191 36 / 6%); color: var(--cw-soft); font-size: var(--text-sm); line-height: var(--leading-normal); }

/* --- Tall screens: buttons, clock and plates grow into the room ------------------------- */
@media (min-width: 56.01rem) and (min-height: 50rem) {
  .cw-dock { --dock-h: clamp(3rem, 5.6dvh, 4.5rem); padding: var(--space-4); }
  .cw-dock .cw-btn { min-block-size: var(--dock-h); padding-inline: clamp(1.25rem, 2vw, 2.25rem); font-size: clamp(1rem, 1.9dvh, 1.35rem); }
  .cw-cluepad__word { font-size: clamp(1.1rem, 2.1dvh, 1.5rem); }
  .cw-countbar__num { font-size: clamp(1.1rem, 2.2dvh, 1.6rem); }
  .cw-countbar__label,
  .cw-countbar__hint { font-size: var(--text-sm); }
  .cw-tool { min-inline-size: clamp(3.6rem, 5dvw, 5.25rem); min-block-size: var(--dock-h); padding-block: 0.6rem; }
  .cw-tool .cw-icon svg { inline-size: clamp(1.35rem, 2.6dvh, 1.9rem); block-size: clamp(1.35rem, 2.6dvh, 1.9rem); }
  .cw-tool__label { font-size: var(--text-xs); }
  .cw-plate { padding-block: var(--space-3); }
  .cw-plate__name { font-size: clamp(1.1rem, 2.2dvh, 1.6rem); }
  .cw-plate__pip { inline-size: clamp(0.95rem, 1.7dvh, 1.35rem); block-size: clamp(0.95rem, 1.7dvh, 1.35rem); }
  .cw-strip__word { font-size: clamp(1.5rem, 3.4dvh, 2.6rem); }
  .cw-strip__count { min-inline-size: clamp(2.2rem, 4.4dvh, 3.2rem); block-size: clamp(2.2rem, 4.4dvh, 3.2rem); font-size: clamp(1.1rem, 2.4dvh, 1.7rem); }
  .cw-guessrow__end { min-inline-size: clamp(12rem, 18vw, 20rem); }
}

/* --- Full screen: a TV across the room ---------------------------------------------------- */
.cw-game:fullscreen { display: block; overflow-y: auto; padding: clamp(0.5rem, 1.5vw, 1.5rem); background: var(--bg); }
.cw-game:fullscreen .cw-stage { inline-size: min(100%, 110rem); margin-inline: auto; }
.cw-game:fullscreen .cw-arena { min-block-size: calc(100dvh - 2 * clamp(0.5rem, 1.5vw, 1.5rem)); }
.cw-game:fullscreen .cw-field { min-block-size: 0; }

/* --- Reduced motion ----------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cw-card.is-flipping,
  .is-dealing .cw-card,
  .is-boom .cw-field,
  .cw-burst,
  .cw-clock.is-over,
  .cw-clock.is-low .cw-clock__digits,
  .cw-splash--handoff .cw-mark--giant,
  .cw-splash--handoff .cw-splash__big { animation: none; }
}

/* --- Narrow screens ------------------------------------------------------------------------- */
@media (max-width: 56rem) {
  .cw-menu__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .cw-join { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .cw-cluepad { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .cw-cluepad .cw-countbar { grid-column: 1 / -1; grid-row: 2; }
  .cw-dock { grid-template-columns: minmax(0, 1fr); }
  .cw-dock__tools { justify-content: space-between; }
  .cw-tool, .cw-dock__more { flex: 1; }
  .cw-cluepad { justify-content: stretch; }
}
@media (max-width: 40rem) {
  .cw-hero .h1 { font-size: var(--text-4xl); }
  .cw-tiles { grid-template-columns: minmax(0, 1fr); }
  .cw-tile__face { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--space-3); }
  .cw-tile__sub { grid-column: 2; grid-row: 1; justify-self: end; }
  .cw-tile__sample { grid-column: 1 / -1; margin-block-start: var(--space-2); }
  .cw-versus__row { grid-template-columns: minmax(0, 1fr); }
  .cw-versus__vs { justify-self: center; }
  .cw-option { grid-template-columns: minmax(0, 1fr); padding: var(--space-3); }
  :dir(rtl) .cw-option { padding: var(--space-3); }
  .cw-menu__start { inline-size: 100%; }

  .cw-arena { padding: var(--space-2); gap: var(--space-2); border-radius: var(--r-lg); min-block-size: calc(100dvh - var(--header-h) - var(--space-4)); }
  .cw-hud { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--space-2); }
  .cw-plate { padding: var(--space-2) var(--space-3); gap: 0.3rem; }
  .cw-plate__name { font-size: var(--text-sm); }
  .cw-plate__pip { inline-size: 0.55rem; block-size: 0.55rem; }
  .cw-plate__pips { gap: 0.2rem; }
  .cw-plate__score { font-size: var(--text-2xs); }
  .cw-plate .cw-mark--lg { inline-size: 0.7rem; block-size: 0.7rem; }
  .cw-clock { inline-size: 4.6rem; }
  .cw-clock__digits { font-size: var(--text-lg); }
  .cw-clock__phase { font-size: var(--text-2xs); max-inline-size: 6rem; }
  .cw-strip { padding: 0.2rem var(--space-3); }
  .cw-strip__word { font-size: var(--text-xl); }
  .cw-field { min-block-size: 22rem; }
  .cw-board { grid-template-rows: repeat(5, minmax(3.6rem, 1fr)); gap: 0.3rem; }
  .cw-card__inner { inset: 0.15rem; border: 0; }
  .cw-card__word { font-size: clamp(0.62rem, 3.3cqi, 1rem); }
  .cw-card:lang(en) .cw-card__word { font-size: clamp(0.5rem, 2.75cqi, 0.85rem); letter-spacing: 0; }
  .cw-card__mark { inset-block-start: 0.2rem; inset-inline-start: 0.2rem; }
  .cw-dock { position: sticky; inset-block-end: 0.4rem; z-index: 6; padding: var(--space-2); background: rgb(6 10 17 / 94%); backdrop-filter: blur(8px); }
  .cw-tool { min-inline-size: 0; padding-inline: 0.3rem; }
  .cw-guessrow > .cw-btn { flex: 1; }
  .cw-guessrow__end { min-inline-size: 0; }
  .cw-mark--giant { inline-size: 3.25rem; block-size: 3.25rem; }
  .cw-dock { --dock-h: 2.75rem; }
  .cw-countbar__num { font-size: var(--text-base); }
  .cw-overlay[data-kind='over'] { position: fixed; inset: 0; z-index: 60; border-radius: 0; }
  .cw-splash--lobby .cw-joinblock { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'title' 'code' 'steps' 'actions' 'status' 'note'; justify-items: center; }
  .cw-splash--lobby .cw-joinblock__code { justify-self: center; }
  .cw-splash__title { font-size: var(--text-xl); }
}

/* =============================================================================
   Spy layer (shapes and effects live in fun-spy.css; placement lives here)
   ========================================================================== */

.cw-menu { position: relative; overflow: hidden; }
.cw-menu__print { inset-block-start: -1.5rem; inset-inline-end: -1.5rem; inline-size: 13rem; transform: rotate(18deg); }
.cw-menu > .spy-file { margin-block-end: calc(var(--space-2) * -1); }

/* Scanlines on the arena, like a surveillance monitor */
.cw-arena {
  background:
    radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--team) 16%, transparent), transparent 60%),
    repeating-linear-gradient(0deg, rgb(255 255 255 / 1.3%) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #08101c, #05080e);
}

/* The clock's radar sits behind the digits */
.cw-clock .spy-radar { inset: 10%; }
.cw-clock__face { z-index: 1; }

/* Splash stamps */
.cw-splash { overflow: visible; }
.cw-splash__stamp { position: absolute; inset-block-start: 0.9rem; inset-inline-end: 1rem; }
.cw-splash--lobby .spy-op { margin-block-end: var(--space-1); }
.cw-splash--ask .spy-stamp { margin-block-end: var(--space-1); }
.cw-splash__verdict { position: relative; margin-block: calc(var(--space-6) * -1) var(--space-1); z-index: 2; }
.cw-splash--handoff .spy-rec { margin-block-end: var(--space-2); }
.cw-splash--handoff .cw-splash__big { min-block-size: 1.2em; }

/* Revealed cards show who was behind the word: agent, civilian or the assassin */
.cw-card__figure { position: absolute; inset: 0; display: none; overflow: hidden; border-radius: inherit; color: var(--solid-ink); opacity: 0.22; }
.cw-card.is-revealed .cw-card__figure,
.cw-card--key .cw-card__figure { display: block; }
.cw-card__figure .spy-cross { display: none; color: var(--cw-red); opacity: 0; }
.cw-card[data-kind='x'] .cw-card__figure { opacity: 0.55; color: #3a0d16; }
.cw-card[data-kind='x'] .cw-card__figure .spy-cross { display: block; opacity: 1; color: var(--cw-red); inset: 10% 22%; }
.cw-card.is-revealed[data-kind='a'] .cw-card__figure,
.cw-card.is-revealed[data-kind='b'] .cw-card__figure { opacity: 0.28; }
.cw-card__word { position: relative; z-index: 1; text-shadow: 0 1px 0 rgb(0 0 0 / 18%); }
.cw-card.is-revealed .cw-card__word { text-shadow: 0 1px 8px rgb(0 0 0 / 35%); }
.cw-card--key .cw-card__figure { opacity: 0.2; }

/* The spymaster key: a dossier page */
.cw-key__head { position: relative; }
.cw-key__head .spy-stamp { order: 3; }
.cw-key { background: repeating-linear-gradient(0deg, rgb(255 255 255 / 1.1%) 0 1px, transparent 1px 3px), var(--cw-panel); }

@media (max-width: 40rem) {
  .cw-splash__stamp { position: static; justify-self: end; }
  .cw-menu__print { inline-size: 8rem; }
}