/* =============================================================================
   Intercept — a code-and-interception game, one device per team.

   Same family as Code Words (site tokens, console-game skin, chunky buttons,
   blue circle vs gold diamond), dressed as a radio-intercept console: the
   numbers are the heroes — the code digits glow like a readout, the clue
   boards are four numbered channels, and tokens are lit slots on each
   team's plate.

   Prefix `ix-` for the game, `gk-` for parts made by game-kit.js.
   ========================================================================== */

.ix-page {
  --ix-ink: var(--text);
  --ix-soft: var(--text-soft);
  --ix-muted: var(--text-muted);
  --ix-dim: var(--text-dim);
  --ix-a: #2f8ff0;
  --ix-a-hi: #6cb6ff;
  --ix-a-deep: #0c4a8c;
  --ix-b: #fbbf24;
  --ix-b-hi: #fde68a;
  --ix-b-deep: #a86b06;
  --ix-red: #f43f5e;
  --ix-ok: var(--ok-400);
  --ix-go: var(--accent-400);
  --ix-go-deep: #0b7287;
  --ix-panel: linear-gradient(180deg, #0c1422 0%, #070c15 100%);
  --ix-steel: linear-gradient(180deg, #1f2b3d, #141d2b);
  --ix-well: #050910;
  --ix-cut: 14px;
  padding-block-start: calc(var(--header-h) + var(--space-8));
}

.gk-icon { display: inline-grid; place-items: center; flex: none; }
.gk-icon svg { inline-size: 1.2em; block-size: 1.2em; }

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

body.ix-is-playing .ix-hero,
body.ix-is-playing .ix-method { display: none; }
body.ix-is-playing .ix-page { padding-block-start: calc(var(--header-h) + var(--space-3)); }
.ix-game { display: grid; gap: var(--space-4); padding-block-end: var(--space-8); scroll-margin-block-start: calc(var(--header-h) + var(--space-2)); }
body.ix-is-playing .ix-game.shell { max-inline-size: min(100%, 110rem); padding-block-end: var(--space-4); }
.ix-stage { display: grid; gap: var(--space-5); min-inline-size: 0; }

/* --- Shapes ------------------------------------------------------------- */
.ix-mark { position: relative; display: inline-block; flex: none; inline-size: 0.8rem; block-size: 0.8rem; border-radius: 50%; background: var(--ix-a); box-shadow: 0 0 12px -2px var(--ix-a); }
.ix-mark[data-team='b'] { border-radius: 0.14rem; transform: rotate(45deg) scale(0.88); background: var(--ix-b); box-shadow: 0 0 12px -2px var(--ix-b); }
.ix-mark--lg { inline-size: 1rem; block-size: 1rem; }
.ix-mark--xl { inline-size: 1.6rem; block-size: 1.6rem; }
.ix-mark--giant { inline-size: 4.5rem; block-size: 4.5rem; }

/* --- Frames ---------------------------------------------------------------- */
.ix-frame {
  --bracket: var(--accent-400);
  position: relative;
  min-inline-size: 0;
  padding: clamp(1.125rem, 2.6vw, 2.25rem);
  background: var(--ix-panel);
  clip-path: polygon(var(--ix-cut) 0, calc(100% - var(--ix-cut)) 0, 100% var(--ix-cut), 100% calc(100% - var(--ix-cut)), calc(100% - var(--ix-cut)) 100%, var(--ix-cut) 100%, 0 calc(100% - var(--ix-cut)), 0 var(--ix-cut));
  box-shadow: inset 0 0 0 1px rgb(124 196 255 / 14%), inset 0 1px 0 rgb(255 255 255 / 6%);
}
.ix-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;
}

/* --- Buttons ---------------------------------------------------------------- */
.ix-btn {
  --face: var(--ix-steel);
  --lip: #070b12;
  --ink: var(--ix-ink);
  --glow: transparent;
  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;
  transition: transform 80ms ease-out, box-shadow 80ms ease-out, filter var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.ix-btn:hover { filter: brightness(1.12); }
.ix-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); }
.ix-btn:focus-visible { outline: 3px solid var(--brand-200); outline-offset: 4px; }
.ix-btn[disabled] { opacity: 0.4; cursor: not-allowed; filter: none; transform: none; }
.ix-btn--go { --face: linear-gradient(180deg, #5ee6fa, var(--ix-go) 55%, #13b3cf); --lip: var(--ix-go-deep); --ink: #03222a; --glow: var(--ix-go); }
.ix-btn--ghost { --face: transparent; --lip: transparent; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 16%); color: var(--ix-soft); }
.ix-btn--ghost:active { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 16%); }
.ix-btn--sm { min-block-size: 2.4rem; padding: 0.4rem 0.95rem; font-size: var(--text-sm); }
.ix-btn--lg { min-block-size: 3.3rem; padding-inline: 1.75rem; font-size: var(--text-lg); }
.ix-btn--xl { min-block-size: 4rem; padding-inline: 2.5rem; font-size: var(--text-xl); }

.ix-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.75rem; border: 0; border-radius: var(--r-full); background: rgb(255 255 255 / 6%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 10%); color: var(--ix-soft); font: inherit; font-size: var(--text-xs); font-weight: 800; cursor: pointer; }
.ix-chip:hover { color: var(--ix-ink); background: rgb(255 255 255 / 10%); }
.ix-chip:focus-visible { outline: 3px solid var(--brand-200); outline-offset: 2px; }

/* --- Setup menu ------------------------------------------------------------- */
.ix-menu { display: grid; gap: var(--space-6); }
.ix-menu__title { font-size: var(--text-3xl); font-weight: 900; }
.ix-menu__intro { margin-block-start: calc(var(--space-4) * -1); max-inline-size: 46rem; color: var(--ix-soft); }
.ix-menu__body { display: grid; gap: var(--space-6); }
.ix-menu__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--space-8); align-items: start; }
.ix-menu__col { display: grid; gap: var(--space-6); min-inline-size: 0; }
.ix-menu__go { justify-self: center; min-inline-size: min(100%, 22rem); }
.ix-block { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.ix-legend { display: block; margin-block-end: var(--space-3); padding: 0; color: var(--ix-go); font-size: var(--text-sm); font-weight: 800; }

.ix-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(--ix-go); background: rgb(34 211 238 / 7%); }
.ix-resume__title { font-weight: 800; }
.ix-resume__note { color: var(--ix-soft); font-size: var(--text-sm); }
.ix-resume__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Create / join */
.ix-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.ix-mode { position: relative; display: block; cursor: pointer; }
.ix-mode__input,
.ix-side__input,
.ix-tile__input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ix-mode__face {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: 'icon name' 'icon hint';
  align-items: center;
  column-gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--r-lg);
  background: var(--ix-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;
}
.ix-mode__face .gk-icon { grid-area: icon; inline-size: 2.75rem; block-size: 2.75rem; border-radius: 50%; background: rgb(255 255 255 / 6%); color: var(--ix-soft); }
.ix-mode__face .gk-icon svg { inline-size: 1.5rem; block-size: 1.5rem; }
.ix-mode__name { grid-area: name; font-size: var(--text-xl); font-weight: 900; }
.ix-mode__hint { grid-area: hint; color: var(--ix-dim); font-size: var(--text-xs); }
.ix-mode:hover .ix-mode__face { transform: translateY(-2px); }
.ix-mode__input:checked + .ix-mode__face { background: linear-gradient(180deg, #0f3346, #0a1d2b); box-shadow: inset 0 0 0 2px var(--ix-go), 0 4px 0 var(--ix-go-deep), 0 0 26px -8px var(--ix-go); }
.ix-mode__input:checked + .ix-mode__face .gk-icon { background: var(--ix-go); color: #03222a; }
.ix-mode__input:focus-visible + .ix-mode__face,
.ix-side__input:focus-visible + .ix-side__face,
.ix-tile__input:focus-visible + .ix-tile__face { outline: 3px solid var(--brand-200); outline-offset: 3px; }

/* Which team is this device */
.ix-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.ix-side { --team: var(--ix-a); --team-deep: var(--ix-a-deep); position: relative; display: block; cursor: pointer; }
.ix-side[data-team='b'] { --team: var(--ix-b); --team-deep: var(--ix-b-deep); }
.ix-side__face {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-3);
  background: linear-gradient(160deg, color-mix(in srgb, var(--team) 14%, #0a1220), #0a1220 70%);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--team) 35%, transparent);
  opacity: 0.6;
  transition: opacity 120ms, box-shadow 120ms;
}
.ix-side__name { font-size: var(--text-lg); font-weight: 900; }
.ix-side__hint { color: var(--ix-dim); font-size: var(--text-xs); }
.ix-side__input:checked + .ix-side__face { opacity: 1; box-shadow: inset 0 0 0 2px var(--team), inset 0 -4px 0 var(--team), 0 0 26px -8px var(--team); }

/* Language tiles */
.ix-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.ix-tile { position: relative; display: block; cursor: pointer; }
.ix-tile__face { display: grid; gap: 0.1rem; padding: var(--space-4); border-radius: var(--r-lg); background: var(--ix-steel); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 9%), 0 4px 0 #070b12; }
.ix-tile__name { font-size: var(--text-xl); font-weight: 900; }
.ix-tile__sub { color: var(--ix-dim); font-size: var(--text-xs); }
.ix-tile__input:checked + .ix-tile__face { background: linear-gradient(180deg, #0f3346, #0a1d2b); box-shadow: inset 0 0 0 2px var(--ix-go), 0 4px 0 var(--ix-go-deep), 0 0 26px -8px var(--ix-go); }

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

/* Join */
.ix-join { display: grid; gap: var(--space-6); }
.ix-codeinput {
  inline-size: min(100%, 22rem);
  min-block-size: 3.5rem;
  padding: 0.4rem 0.8rem;
  border: 0;
  border-radius: var(--r-md);
  background: var(--ix-well);
  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-2xl);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
}
.ix-codeinput::placeholder { color: rgb(124 196 255 / 28%); }
.ix-codeinput:focus { outline: none; box-shadow: inset 0 2px 6px rgb(0 0 0 / 70%), inset 0 0 0 2px var(--ix-go), 0 0 20px -6px var(--ix-go); }
.ix-codeinput[aria-invalid='true'] { box-shadow: inset 0 2px 6px rgb(0 0 0 / 70%), inset 0 0 0 2px var(--ix-red); }
.ix-codeinput.is-shake { animation: ix-shake 360ms ease-in-out; }
@keyframes ix-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.ix-error { margin-block-start: var(--space-2); color: var(--ix-red); font-size: var(--text-sm); font-weight: 700; }
.ix-error[hidden] { display: none; }

/* --- Overlays and splashes ---------------------------------------------------- */
/* Splashes take the whole screen, so they are seen even halfway down a long phone page. */
.ix-overlay { position: fixed; inset: 0; z-index: 60; display: grid; place-items: safe center; padding: var(--space-4); border-radius: 0; background: rgb(3 6 11 / 78%); backdrop-filter: blur(6px); animation: ix-fade 200ms var(--ease-out); cursor: pointer; }
.ix-overlay[hidden] { display: none; }
.ix-overlay--full { overflow-y: auto; background: rgb(3 6 11 / 92%); cursor: default; }
@keyframes ix-fade { from { opacity: 0; } }
.ix-splash {
  --st: var(--ix-go);
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  inline-size: min(100%, 36rem);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--ix-panel);
  clip-path: polygon(var(--ix-cut) 0, calc(100% - var(--ix-cut)) 0, 100% var(--ix-cut), 100% calc(100% - var(--ix-cut)), calc(100% - var(--ix-cut)) 100%, var(--ix-cut) 100%, 0 calc(100% - var(--ix-cut)), 0 var(--ix-cut));
  box-shadow: inset 0 0 0 1px rgb(124 196 255 / 20%), inset 0 3px 0 var(--st);
  text-align: center;
  animation: ix-rise 320ms var(--ease-out);
}
.ix-splash[data-team='a'] { --st: var(--ix-a); }
.ix-splash[data-team='b'] { --st: var(--ix-b); }
@keyframes ix-rise { from { opacity: 0; transform: translateY(1rem) scale(0.96); } }
.ix-splash__title { font-size: var(--text-2xl); font-weight: 900; outline: none; }
.ix-splash__sub { max-inline-size: 30rem; color: var(--ix-soft); }
.ix-splash__note { color: var(--ix-dim); font-size: var(--text-xs); }
.ix-splash__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.ix-bigcode__label { margin-block-start: var(--space-2); color: var(--ix-dim); font-size: var(--text-xs); }
.ix-bigcode {
  padding: 0.3rem 1.2rem;
  border-radius: var(--r-md);
  background: var(--ix-well);
  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(2.25rem, 1.5rem + 3.5vw, 3.75rem);
  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) .ix-bigcode { font-family: var(--font-sans); }
.ix-status { min-block-size: 1.2em; color: var(--ix-ok); font-size: var(--text-xs); }

.ix-flash { --st: var(--ix-go); display: grid; justify-items: center; gap: var(--space-2); text-align: center; animation: ix-slam 520ms var(--ease-out); }
.ix-flash[data-team='a'] { --st: var(--ix-a); }
.ix-flash[data-team='b'] { --st: var(--ix-b); }
.ix-flash .gk-icon svg { inline-size: 4rem; block-size: 4rem; color: var(--ix-go); filter: drop-shadow(0 0 12px var(--ix-go)); }
.ix-flash__big { font-size: clamp(2.25rem, 1.5rem + 3.5vw, 4rem); font-weight: 900; text-shadow: 0 0 30px var(--st); }
.ix-flash__sub { color: var(--ix-soft); font-weight: 700; }
.ix-flash[data-kind='miss'] .ix-flash__big { color: #fda4af; text-shadow: 0 0 30px var(--ix-red); }
.ix-flash__token { inline-size: 5rem; block-size: 5rem; }
@keyframes ix-slam { 0% { opacity: 0; transform: scale(1.8); } 60% { opacity: 1; transform: scale(0.97); } 100% { transform: none; } }

/* Tokens: interception = a lit star-cut disc in the team colour; miscommunication = a red cracked disc */
.ix-slot,
.ix-flash__token,
.ix-verdict__token { position: relative; display: inline-block; flex: none; border-radius: 50%; }
.ix-slot { inline-size: 1.15rem; block-size: 1.15rem; box-shadow: inset 0 0 0 2px rgb(255 255 255 / 14%); background: rgb(0 0 0 / 30%); }
.ix-slot--int.is-on,
.ix-flash__token--int,
.ix-verdict--int .ix-verdict__token { background: radial-gradient(circle at 35% 30%, #fff, #e2e8f0 40%, #94a3b8); box-shadow: 0 0 12px rgb(255 255 255 / 55%); }
.ix-slot--int.is-on::after,
.ix-flash__token--int::after,
.ix-verdict--int .ix-verdict__token::after { content: ''; position: absolute; inset: 22%; background: #0b1220; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.ix-slot--miss.is-on,
.ix-flash__token--miss,
.ix-verdict--miss .ix-verdict__token { background: radial-gradient(circle at 35% 30%, #fb7185, var(--ix-red) 55%, #7f1d2e); box-shadow: 0 0 12px rgb(244 63 94 / 60%); }
.ix-slot--miss.is-on::after,
.ix-flash__token--miss::after,
.ix-verdict--miss .ix-verdict__token::after { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 46%, #2a0a12 46% 54%, transparent 54%), linear-gradient(45deg, transparent 46%, #2a0a12 46% 54%, transparent 54%); border-radius: 50%; }
.ix-slot.is-on { animation: ix-pop 420ms var(--ease-out); }
@keyframes ix-pop { 0% { scale: 1.9; } 100% { scale: 1; } }
.ix-verdict--ok .ix-verdict__token { background: var(--ix-ok); box-shadow: 0 0 12px var(--ix-ok); }

/* --- The arena ---------------------------------------------------------------- */
.ix-arena {
  --team: var(--ix-a);
  --team-hi: var(--ix-a-hi);
  position: relative;
  display: grid;
  gap: var(--space-4);
  padding: var(--space-3);
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--team) 12%, transparent), transparent 60%),
    repeating-linear-gradient(0deg, rgb(255 255 255 / 1.2%) 0 1px, transparent 1px 3px),
    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);
}
.ix-arena[data-team='b'] { --team: var(--ix-b); --team-hi: var(--ix-b-hi); }

.ix-hud { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-4); }
.ix-plate {
  --pt: var(--ix-a);
  display: grid;
  gap: var(--space-2);
  min-inline-size: 0;
  padding: var(--space-3) var(--space-5);
  background: linear-gradient(135deg, color-mix(in srgb, var(--pt) 16%, #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) 40%, transparent);
  transition: box-shadow var(--dur-base);
}
.ix-plate[data-team='b'] { --pt: var(--ix-b); clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); }
.ix-plate.is-reading { box-shadow: inset 0 0 0 2px var(--pt), inset 0 -4px 0 var(--pt), 0 0 24px -8px var(--pt); }
.ix-plate__top { display: flex; align-items: center; gap: var(--space-3); min-inline-size: 0; }
.ix-plate__name { overflow: hidden; font-size: var(--text-lg); font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.ix-plate__you { padding: 0.05rem 0.55rem; border-radius: var(--r-full); background: var(--pt); color: #06101c; font-size: var(--text-2xs); font-weight: 900; }
.ix-plate__tokens { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.ix-slotgroup { display: inline-flex; align-items: center; gap: var(--space-2); }
.ix-slots { display: inline-flex; gap: 0.35rem; }
.ix-slots__label { color: var(--ix-dim); font-size: var(--text-2xs); font-weight: 700; }

.ix-dial { display: grid; justify-items: center; gap: 0.1rem; padding-inline: var(--space-2); }
.ix-dial__num { color: var(--accent-300); font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: 900; line-height: 1; text-shadow: 0 0 18px rgb(34 211 238 / 50%); font-variant-numeric: tabular-nums; }
.ix-dial__of { color: var(--ix-dim); font-size: var(--text-xs); font-weight: 700; }
.ix-dial__pips { display: flex; gap: 0.2rem; margin-block-start: 0.3rem; }
.ix-dial__pip { inline-size: 0.45rem; block-size: 0.9rem; border-radius: 2px; background: rgb(255 255 255 / 10%); }
.ix-dial__pip.is-done { background: rgb(34 211 238 / 45%); }
.ix-dial__pip.is-now { background: var(--ix-go); box-shadow: 0 0 10px var(--ix-go); }

.ix-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--space-4); align-items: start; }

/* --- The console (one step) ---------------------------------------------------- */
.ix-console { min-inline-size: 0; container-type: inline-size; }
.ix-step {
  --st: var(--ix-go);
  position: relative;
  display: grid;
  gap: var(--space-4);
  padding: clamp(1rem, 2.4vw, 1.75rem);
  overflow: hidden;
  background: var(--ix-panel);
  clip-path: polygon(var(--ix-cut) 0, calc(100% - var(--ix-cut)) 0, 100% var(--ix-cut), 100% calc(100% - var(--ix-cut)), calc(100% - var(--ix-cut)) 100%, var(--ix-cut) 100%, 0 calc(100% - var(--ix-cut)), 0 var(--ix-cut));
  box-shadow: inset 0 0 0 1px rgb(124 196 255 / 18%), inset 0 3px 0 var(--st);
  animation: ix-rise 260ms var(--ease-out);
}
.ix-step[data-team='a'] { --st: var(--ix-a); }
.ix-step[data-team='b'] { --st: var(--ix-b); }
.ix-step__head { display: grid; gap: 0.2rem; }
.ix-step__kicker { display: flex; align-items: center; gap: var(--space-2); color: var(--st); font-size: var(--text-sm); font-weight: 800; }
.ix-step__title { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); font-weight: 900; line-height: 1.35; outline: none; }
.ix-step__help { color: var(--ix-soft); font-size: var(--text-sm); line-height: 1.9; }
.ix-step__note { margin-block-start: calc(var(--space-3) * -1); color: var(--ix-dim); font-size: var(--text-xs); text-align: center; }
.ix-step__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Hold to see the code */
.ix-hold {
  display: grid;
  place-items: center;
  min-block-size: 7.5rem;
  padding: var(--space-4);
  border: 0;
  border-radius: var(--r-lg);
  background: repeating-linear-gradient(-45deg, rgb(255 255 255 / 3%) 0 10px, transparent 10px 20px), var(--ix-well);
  box-shadow: inset 0 2px 10px rgb(0 0 0 / 80%), inset 0 0 0 2px rgb(124 196 255 / 25%);
  color: var(--ix-soft);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.ix-hold:focus-visible { outline: 3px solid var(--brand-200); outline-offset: 3px; }
.ix-hold__face { display: grid; justify-items: center; gap: var(--space-2); font-weight: 800; }
.ix-hold__face[hidden] { display: none; }
.ix-hold__face .gk-icon svg { inline-size: 2rem; block-size: 2rem; }
.ix-hold.is-open { box-shadow: inset 0 2px 10px rgb(0 0 0 / 80%), inset 0 0 0 2px var(--ix-go), 0 0 30px -8px var(--ix-go); }
.ix-hold__secret { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); inline-size: 100%; }
.ix-hold__secret[hidden] { display: none; }
.ix-secret { display: grid; justify-items: center; gap: 0.2rem; }
.ix-secret__digit { color: var(--accent-300); font-size: clamp(2.5rem, 2rem + 3vw, 4rem); font-weight: 900; line-height: 1; text-shadow: 0 0 22px rgb(34 211 238 / 70%); }
.ix-secret__word { color: var(--ix-ink); font-size: var(--text-sm); font-weight: 800; text-align: center; }
.ix-secret__word:lang(en) { text-transform: uppercase; letter-spacing: 0.04em; }

/* Clue inputs */
.ix-clues { display: grid; gap: var(--space-3); }
.ix-clue { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-3); }
.ix-clue__num { display: grid; place-items: center; inline-size: 2.4rem; block-size: 2.4rem; border-radius: var(--r-sm); background: rgb(255 255 255 / 6%); color: var(--ix-soft); font-weight: 900; }
.ix-clue__input {
  inline-size: 100%;
  min-block-size: 3rem;
  padding: 0.4rem 0.9rem;
  border: 0;
  border-radius: var(--r-md);
  background: var(--ix-well);
  box-shadow: inset 0 2px 6px rgb(0 0 0 / 70%), inset 0 0 0 1px rgb(124 196 255 / 20%);
  color: var(--ix-ink);
  font: inherit;
  font-size: var(--text-lg);
  font-weight: 800;
}
.ix-clue__input::placeholder { color: var(--ix-dim); font-weight: 600; font-size: var(--text-sm); }
.ix-clue__input:focus { outline: none; box-shadow: inset 0 2px 6px rgb(0 0 0 / 70%), inset 0 0 0 2px var(--st), 0 0 18px -6px var(--st); }
.ix-clues > .ix-btn { justify-self: start; }

/* Sand timer */
.ix-sand { --frac: 1; display: grid; gap: var(--space-2); padding: var(--space-3) 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 / 7%); }
.ix-sand__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); }
.ix-sand__label { color: var(--ix-go); font-size: var(--text-sm); font-weight: 800; }
.ix-sand__hint { color: var(--ix-dim); font-size: var(--text-xs); }
.ix-sand__row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); }
.ix-sand__left { min-inline-size: 3.5ch; font-size: var(--text-xl); font-weight: 900; font-variant-numeric: tabular-nums; }
.ix-sand__bar { block-size: 0.55rem; border-radius: var(--r-full); background: rgb(255 255 255 / 8%); overflow: hidden; }
.ix-sand__fill { display: block; inline-size: calc(var(--frac) * 100%); block-size: 100%; border-radius: inherit; background: var(--ix-go); box-shadow: 0 0 10px var(--ix-go); transition: inline-size 100ms linear; }
.ix-sand.is-low .ix-sand__fill { background: var(--warn-400); }
.ix-sand.is-low .ix-sand__left { color: var(--warn-400); }
.ix-sand.is-over .ix-sand__left { color: var(--ix-red); font-size: var(--text-base); }

/* (removed: read-aloud list — the pick rows show the clues) */
.ix-readout { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; counter-reset: ix; }
.ix-readout__item { counter-increment: ix; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-radius: var(--r-md); background: var(--ix-well); font-size: var(--text-2xl); font-weight: 900; }
.ix-readout__item::before { content: counter(ix); color: var(--ix-dim); font-size: var(--text-sm); }
:lang(fa) .ix-readout__item::before { content: counter(ix, persian); }

/* Picking a keyword number for each clue */
.ix-picks { display: grid; gap: var(--space-3); }
.ix-pick { display: grid; grid-template-columns: minmax(6rem, 1fr) minmax(14rem, 1.6fr); align-items: center; gap: var(--space-3); }
.ix-pick__clue { display: flex; align-items: center; gap: var(--space-3); min-inline-size: 0; }
.ix-pick__n { display: grid; place-items: center; flex: none; inline-size: 2rem; block-size: 2rem; border-radius: 50%; background: rgb(255 255 255 / 7%); color: var(--ix-dim); font-size: var(--text-sm); font-weight: 900; }
.ix-pick__text { overflow-wrap: anywhere; font-size: var(--text-lg); font-weight: 900; }
.ix-pick__text.is-empty { color: var(--ix-dim); font-size: var(--text-sm); font-weight: 600; }
.ix-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; padding: 3px; border-radius: var(--r-md); background: var(--ix-well); box-shadow: inset 0 2px 6px rgb(0 0 0 / 70%), inset 0 0 0 1px rgb(124 196 255 / 18%); }
.ix-seg__btn { display: grid; place-items: center; align-content: center; gap: 0.1rem; min-inline-size: 0; min-block-size: 3rem; padding: 0.2rem; 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(--ix-soft); font: inherit; cursor: pointer; transition: background 120ms, color 120ms, transform 80ms; }
.ix-seg__btn:hover { color: var(--ix-ink); }
.ix-seg__btn:active { transform: scale(0.95); }
.ix-seg__btn:focus-visible { outline: 3px solid var(--brand-200); outline-offset: 1px; position: relative; z-index: 1; }
.ix-seg__digit { font-size: var(--text-xl); font-weight: 900; line-height: 1; }
.ix-seg__word { max-inline-size: 100%; overflow: hidden; color: var(--ix-dim); font-size: var(--text-2xs); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.ix-seg__btn.is-taken { opacity: 0.4; }
.ix-seg__btn.is-on { background: linear-gradient(180deg, var(--ix-go), #0ea5c4); box-shadow: inset 0 1px 0 rgb(255 255 255 / 45%), 0 0 16px -2px var(--ix-go); color: #03222a; opacity: 1; }
.ix-seg__btn.is-on .ix-seg__word { color: #03222a; }

/* Reveal */
.ix-reveal__go { justify-self: center; min-inline-size: min(100%, 18rem); }
.ix-reveal { display: grid; gap: var(--space-2); }
.ix-reveal__row { display: grid; grid-template-columns: minmax(0, 1.5fr) 4rem minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--r-md); background: rgb(255 255 255 / 3%); animation: ix-rise 360ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 140ms); }
.ix-reveal__row--head { padding-block: 0; background: none; animation: none; color: var(--ix-dim); font-size: var(--text-xs); font-weight: 800; }
.ix-reveal__row--head .ix-reveal__cell:nth-child(n + 2) { text-align: center; }
.ix-reveal__clue { overflow-wrap: anywhere; font-weight: 900; }
.ix-reveal__digit { display: grid; place-items: center; block-size: 3rem; border-radius: var(--r-sm); background: var(--ix-well); color: var(--accent-300); font-size: var(--text-2xl); font-weight: 900; text-shadow: 0 0 16px rgb(34 211 238 / 60%); }
.ix-reveal__guess { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; font-size: var(--text-lg); font-weight: 900; }
.ix-reveal__guess.is-right { color: var(--ix-ok); }
.ix-reveal__guess.is-wrong { color: #fda4af; }
.ix-reveal__guess.is-none { color: var(--ix-dim); }
.ix-verdicts { display: grid; gap: var(--space-2); }
.ix-verdict { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--r-md); background: rgb(255 255 255 / 4%); font-weight: 800; animation: ix-rise 400ms var(--ease-out) 450ms both; }
.ix-verdict__token { inline-size: 1.6rem; block-size: 1.6rem; }
.ix-verdict--int { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 30%); }
.ix-verdict--miss { box-shadow: inset 0 0 0 1px rgb(244 63 94 / 45%); color: #fecdd3; }
.ix-verdict--ok { color: var(--ix-ok); }

/* The end */
.ix-step--over { justify-items: center; text-align: center; }
.ix-step--over > * { position: relative; }
.ix-burst { position: absolute !important; inset-block-start: 3.5rem; inset-inline-start: 50%; inline-size: 0; block-size: 0; pointer-events: none; animation: ix-turn 18s linear infinite; }
.ix-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 ix-turn { to { rotate: 360deg; } }
.ix-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ix-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%); color: var(--ix-soft); font-size: var(--text-sm); }
.ix-tie { display: grid; gap: var(--space-2); inline-size: 100%; text-align: start; }
.ix-tie > .ix-btn { justify-self: center; margin-block-start: var(--space-2); }
.ix-finalwords { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); inline-size: 100%; }
.ix-finalwords__team { padding: var(--space-3) var(--space-4); border-radius: var(--r-md); background: rgb(255 255 255 / 3%); text-align: start; }
.ix-finalwords__title { display: flex; align-items: center; gap: var(--space-2); margin-block-end: var(--space-2); color: var(--ix-soft); font-size: var(--text-sm); font-weight: 800; }
.ix-finalwords__list { display: grid; gap: 0.2rem; margin: 0; padding-inline-start: 1.3rem; font-weight: 900; list-style: decimal; }
.ix-finalwords__list:lang(en) { text-transform: uppercase; }

/* --- The boards: four numbered channels ------------------------------------------ */
.ix-boards { display: grid; gap: var(--space-4); min-inline-size: 0; }
.ix-board { --bt: var(--ix-a); position: relative; display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--r-lg); background: rgb(255 255 255 / 2.5%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bt) 28%, transparent); }
.ix-board[data-team='b'] { --bt: var(--ix-b); }
.ix-board__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.ix-board__title { display: flex; align-items: center; gap: var(--space-2); color: var(--bt); font-size: var(--text-base); font-weight: 900; }
.ix-board__hint { color: var(--ix-dim); font-size: var(--text-2xs); }
.ix-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.ix-col { display: grid; grid-template-rows: auto 1fr; gap: var(--space-2); min-inline-size: 0; }
.ix-col__head {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  padding: var(--space-2) var(--space-1) var(--space-3);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bt) 22%, #0d1726), #0a1220);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bt) 45%, transparent), 0 3px 0 #05080d;
}
.ix-col__num { display: grid; place-items: center; inline-size: 1.7rem; block-size: 1.7rem; border-radius: 50%; background: var(--bt); color: #06101c; font-size: var(--text-sm); font-weight: 900; }
.ix-col__word { max-inline-size: 100%; overflow-wrap: anywhere; font-size: clamp(0.85rem, 0.7rem + 0.6vw, 1.2rem); font-weight: 900; text-align: center; line-height: 1.35; transition: filter 200ms; }
.ix-col__word:lang(en) { text-transform: uppercase; letter-spacing: 0.03em; }
.ix-col__word.is-unknown { color: var(--ix-dim); font-size: var(--text-2xl); }
.ix-board.is-covered .ix-col__word { filter: blur(9px); user-select: none; }
.ix-col__list { display: grid; align-content: start; gap: 0.3rem; min-block-size: 3rem; margin: 0; padding: 0.3rem; border-radius: var(--r-sm); background: rgb(0 0 0 / 25%); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 5%); list-style: none; }
.ix-col__clue { display: flex; align-items: baseline; gap: 0.35rem; min-inline-size: 0; padding: 0.3rem 0.45rem; border-radius: 0.35rem; background: linear-gradient(180deg, #1a2536, #131c2a); box-shadow: inset 0 1px 0 rgb(255 255 255 / 7%); font-size: var(--text-sm); font-weight: 800; }
.ix-col__round { flex: none; color: var(--ix-dim); font-size: var(--text-2xs); }
.ix-col__text { min-inline-size: 0; overflow-wrap: anywhere; }
.ix-col__empty { padding: 0.2rem; color: rgb(255 255 255 / 15%); text-align: center; }

/* --- Method ---------------------------------------------------------------------- */
.ix-method { display: grid; gap: var(--space-5); padding-block: var(--space-8) var(--space-12); }
.ix-method__title { font-size: var(--text-2xl); font-weight: 900; }
.ix-method__intro { max-inline-size: 46rem; color: var(--ix-muted); }
ol.ix-method__steps { display: grid; gap: var(--space-3); max-inline-size: 52rem; padding-inline-start: 1.4rem; color: var(--ix-soft); line-height: var(--leading-normal); list-style: decimal; }
.ix-method__steps li::marker { color: var(--ix-go); font-weight: 800; }
.ix-method__line { max-inline-size: 52rem; color: var(--ix-soft); line-height: var(--leading-normal); }
.ix-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(--ix-soft); font-size: var(--text-sm); line-height: var(--leading-normal); }

@media (prefers-reduced-motion: reduce) {
  .ix-step, .ix-reveal__row, .ix-verdict, .ix-flash, .ix-slot.is-on, .ix-burst, .ix-splash { animation: none; }
}

/* --- Narrower screens ------------------------------------------------------------------ */
@media (max-width: 64rem) {
  .ix-main { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 56rem) {
  .ix-menu__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}
@media (max-width: 40rem) {
  .ix-hero .h1 { font-size: var(--text-4xl); }
  .ix-modes, .ix-tiles { grid-template-columns: minmax(0, 1fr); }
  .ix-mode__face { padding: var(--space-3) var(--space-4); }
  .ix-option { grid-template-columns: minmax(0, 1fr); padding: var(--space-3); }
  .ix-menu__go { inline-size: 100%; }
  .ix-arena { padding: var(--space-2); gap: var(--space-3); }
  .ix-hud { gap: var(--space-2); }
  .ix-plate { padding: var(--space-2) var(--space-3); }
  .ix-plate__top { flex-wrap: wrap; gap: 0.3rem 0.5rem; }
  .ix-plate__name { font-size: var(--text-sm); white-space: normal; }
  .ix-plate__tokens { gap: 0.3rem; }
  .ix-slots__label { display: none; }
  .ix-slot { inline-size: 0.95rem; block-size: 0.95rem; }
  .ix-dial__num { font-size: var(--text-2xl); }
  .ix-pick { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .ix-reveal__row { grid-template-columns: minmax(0, 1.2fr) 3rem minmax(0, 1fr) minmax(0, 1fr); padding-inline: var(--space-2); }
  .ix-cols { gap: 0.3rem; }
  .ix-board { padding: var(--space-3) var(--space-2); }
  .ix-col__clue { font-size: var(--text-xs); flex-direction: column; gap: 0; }
  .ix-finalwords { grid-template-columns: minmax(0, 1fr); }
  .ix-step__actions > .ix-btn { flex: 1; }
}

/* =============================================================================
   Spy layer (effects in fun-spy.css; placement here) and full screen
   ========================================================================== */

.ix-menu { position: relative; overflow: hidden; }
.ix-menu__print { inset-block-start: -1.5rem; inset-inline-end: -1.5rem; inline-size: 13rem; transform: rotate(18deg); }
.ix-menu > .spy-file { margin-block-end: calc(var(--space-2) * -1); }
.ix-overlay--full { z-index: 200; padding-block-start: calc(var(--header-h) + var(--space-3)); }
.ix-splash { position: relative; }
.ix-splash__stamp { position: absolute; inset-block-start: 1rem; inset-inline-end: 1.1rem; }

/* Toolbar: the channel and the tools */
.ix-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); padding-inline: var(--space-2); }
.ix-toolbar__channel { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3); min-inline-size: 0; }
.ix-toolbar__op { color: var(--ix-soft); font-size: var(--text-sm); font-weight: 900; }
.ix-toolbar__op:lang(en) { text-transform: uppercase; letter-spacing: 0.08em; }
.ix-toolbar__tools { display: flex; gap: var(--space-2); }
.ix-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-inline-size: 2.6rem;
  block-size: 2.6rem;
  padding-inline: 0.6rem;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--ix-steel);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 16%), 0 3px 0 #05080d;
  color: var(--ix-soft);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: 800;
  cursor: pointer;
  transition: transform 80ms ease-out, box-shadow 80ms ease-out, color 120ms;
}
.ix-tool:hover { color: var(--ix-ink); }
.ix-tool:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 16%), 0 1px 0 #05080d; }
.ix-tool:focus-visible { outline: 3px solid var(--brand-200); outline-offset: 2px; }
.ix-tool[aria-pressed='false'] { color: var(--ix-dim); }
.ix-tool--wide { padding-inline: 0.9rem; }

/* The round dial is a radar screen */
.ix-dial__face { position: relative; display: grid; place-items: center; align-content: center; inline-size: clamp(5rem, 8vw, 6.5rem); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #0b1a26 55%, #060a12); box-shadow: 0 0 0 1px rgb(34 211 238 / 25%), 0 0 26px -10px var(--ix-go); }
.ix-dial__face .spy-radar { inset: 6%; }
.ix-dial__num,
.ix-dial__of { position: relative; z-index: 1; }

/* Splashes */
.ix-flash { position: relative; }
.ix-flash .spy-stamp { margin-block: var(--space-2); }
.ix-flash[data-kind='round'] .spy-rec { justify-self: center; }
.ix-flash__big { min-block-size: 1.2em; }
.ix-overlay .spy-static { position: fixed; }
.ix-step__verdict { position: relative; z-index: 2; margin-block: calc(var(--space-2) * -1) var(--space-2); }
.ix-hold.is-open .ix-secret__digit { font-family: var(--font-mono); }
:lang(fa) .ix-hold.is-open .ix-secret__digit { font-family: var(--font-sans); }

/* --- The game screen: wide windows and full screen -----------------------------------
   One screen tall, no page scroll. A slim bar on top (channel + tools), the HUD,
   then three columns that run to the bottom: our board on our team's side, the
   step in the middle, their board on theirs. Each column scrolls on its own if
   it ever has to; the boards stretch their clue lists to the full height. */

.ix-game:fullscreen { display: block; overflow: hidden; padding: clamp(0.5rem, 1.2vw, 1.25rem); background: var(--bg); }
.ix-game:fullscreen .ix-stage { inline-size: 100%; block-size: 100%; }
.ix-game:fullscreen .ix-overlay { position: fixed; }

@media (min-height: 34rem) {
  /* Phone first: bar, HUD, the step, and one board under it (tabs pick which). */
  body.ix-is-playing .ix-arena,
  .ix-game:fullscreen .ix-arena {
    --zone-gap: clamp(0.5rem, 1.2vw, 1.25rem);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: 'bar' 'hud' 'step' 'boards';
    gap: var(--zone-gap);
    block-size: calc(100dvh - var(--header-h) - var(--space-4));
    padding: var(--zone-gap);
  }
  .ix-game:fullscreen .ix-arena { block-size: calc(100dvh - 2 * clamp(0.5rem, 1.2vw, 1.25rem)); }
  body.ix-is-playing .ix-main,
  .ix-game:fullscreen .ix-main { display: contents; }
  body.ix-is-playing .ix-boards,
  .ix-game:fullscreen .ix-boards { grid-area: boards; position: relative; display: block; min-block-size: 0; }
  /* Closed: only the tabs. Open: the chosen board slides up over the step as a sheet. */
  body.ix-is-playing .ix-boards .ix-board,
  .ix-game:fullscreen .ix-boards .ix-board { display: none; }
  body.ix-is-playing .ix-boards[data-open='ours'] .ix-board:not(.ix-board--theirs),
  body.ix-is-playing .ix-boards[data-open='theirs'] .ix-board--theirs,
  .ix-game:fullscreen .ix-boards[data-open='ours'] .ix-board:not(.ix-board--theirs),
  .ix-game:fullscreen .ix-boards[data-open='theirs'] .ix-board--theirs {
    position: absolute;
    inset-inline: 0;
    inset-block-end: calc(100% + 0.4rem);
    z-index: 6;
    display: grid;
    block-size: min(58dvh, 28rem);
    background: linear-gradient(180deg, #0d1828, #080e18);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bt) 45%, transparent), 0 -18px 40px -10px rgb(0 0 0 / 85%);
    animation: ix-sheet 220ms var(--ease-out);
  }
  @keyframes ix-sheet { from { opacity: 0; transform: translateY(1.5rem); } }

  /* Tablet: the step full width, both boards side by side below it. */
  @media (min-width: 48rem) and (min-height: 50rem), (min-width: 75rem) {
    body.ix-is-playing .ix-arena,
    .ix-game:fullscreen .ix-arena {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      grid-template-rows: auto auto minmax(0, 1fr) minmax(11rem, 36%);
      grid-template-areas: 'bar bar' 'hud hud' 'step step' 'ours theirs';
      block-size: calc(100dvh - var(--header-h) - var(--space-6));
    }
    body.ix-is-playing .ix-arena[data-team='b'],
    .ix-game:fullscreen .ix-arena[data-team='b'] { grid-template-areas: 'bar bar' 'hud hud' 'step step' 'theirs ours'; }
    body.ix-is-playing .ix-boards,
    .ix-game:fullscreen .ix-boards { display: contents; }
    body.ix-is-playing .ix-boardtabs,
    .ix-game:fullscreen .ix-boardtabs { display: none; }
    body.ix-is-playing .ix-boards[data-show] .ix-board,
    .ix-game:fullscreen .ix-boards[data-show] .ix-board { display: grid; }
  }

  /* Wide: three columns, our board on our team's side. */
  @media (min-width: 75rem) {
    body.ix-is-playing .ix-arena,
    .ix-game:fullscreen .ix-arena {
      grid-template-columns: minmax(0, 1fr) minmax(26rem, 1.1fr) minmax(0, 1fr);
      grid-template-rows: auto auto minmax(0, 1fr);
      grid-template-areas: 'bar bar bar' 'hud hud hud' 'ours step theirs';
    }
    /* Gold sits on the far side of the HUD, so Gold's own board does too. */
    body.ix-is-playing .ix-arena[data-team='b'],
    .ix-game:fullscreen .ix-arena[data-team='b'] { grid-template-areas: 'bar bar bar' 'hud hud hud' 'theirs step ours'; }
  }

  .ix-arena > .ix-toolbar { grid-area: bar; padding: 0; }
  .ix-arena > .ix-hud { grid-area: hud; }
  body.ix-is-playing .ix-console,
  .ix-game:fullscreen .ix-console { grid-area: step; display: grid; min-block-size: 0; overflow-y: auto; scrollbar-width: thin; }
  @media (min-width: 48rem) and (min-height: 50rem), (min-width: 75rem) {
    body.ix-is-playing .ix-board:not(.ix-board--theirs),
    .ix-game:fullscreen .ix-board:not(.ix-board--theirs) { grid-area: ours; }
    body.ix-is-playing .ix-board--theirs,
    .ix-game:fullscreen .ix-board--theirs { grid-area: theirs; }
  }

  /* Boards run the full height */
  body.ix-is-playing .ix-board,
  .ix-game:fullscreen .ix-board { grid-template-rows: auto minmax(0, 1fr) auto; min-block-size: 0; overflow: hidden; }
  body.ix-is-playing .ix-cols,
  .ix-game:fullscreen .ix-cols { min-block-size: 0; }
  body.ix-is-playing .ix-col,
  .ix-game:fullscreen .ix-col { min-block-size: 0; }
  body.ix-is-playing .ix-col__list,
  .ix-game:fullscreen .ix-col__list { min-block-size: 0; overflow-y: auto; scrollbar-width: thin; }
  body.ix-is-playing .ix-col__head,
  .ix-game:fullscreen .ix-col__head { padding-block: var(--space-3); }
  body.ix-is-playing .ix-col__word,
  .ix-game:fullscreen .ix-col__word { font-size: clamp(0.95rem, 0.6rem + 0.7vw, 1.5rem); }
  body.ix-is-playing .ix-col__clue,
  .ix-game:fullscreen .ix-col__clue { flex-direction: column; gap: 0; font-size: clamp(0.85rem, 0.6rem + 0.45vw, 1.15rem); }
  body.ix-is-playing .ix-col__round,
  .ix-game:fullscreen .ix-col__round { font-size: var(--text-2xs); }

  /* The step fills its column; its actions sit at the bottom */
  body.ix-is-playing .ix-step,
  .ix-game:fullscreen .ix-step { display: flex; flex-direction: column; min-block-size: 100%; }
  body.ix-is-playing .ix-picks,
  .ix-game:fullscreen .ix-picks { flex: 1; align-content: center; }
  body.ix-is-playing .ix-clues,
  .ix-game:fullscreen .ix-clues { flex: 1; display: flex; flex-direction: column; }
  body.ix-is-playing .ix-clues > .ix-btn,
  .ix-game:fullscreen .ix-clues > .ix-btn { align-self: flex-start; }
  body.ix-is-playing .ix-pick__text,
  .ix-game:fullscreen .ix-pick__text { font-size: clamp(1.05rem, 0.4rem + 2.2dvh, 1.9rem); }
  body.ix-is-playing .ix-seg__digit,
  .ix-game:fullscreen .ix-seg__digit { font-size: clamp(1.15rem, 0.5rem + 2.2dvh, 2rem); }
  body.ix-is-playing .ix-step--over,
  .ix-game:fullscreen .ix-step--over { align-items: center; }
  body.ix-is-playing .ix-finalwords__list,
  .ix-game:fullscreen .ix-finalwords__list { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0; list-style: none; }
  body.ix-is-playing .ix-finalwords__list li,
  .ix-game:fullscreen .ix-finalwords__list li { padding: 0.2rem 0.6rem; border-radius: var(--r-sm); background: rgb(255 255 255 / 6%); }
  body.ix-is-playing .ix-step--over .ix-step__actions,
  .ix-game:fullscreen .ix-step--over .ix-step__actions { margin-block-start: auto; }
  body.ix-is-playing .ix-step > .ix-step__actions:last-child,
  .ix-game:fullscreen .ix-step > .ix-step__actions:last-child,
  body.ix-is-playing .ix-clues > .ix-btn:last-child,
  .ix-game:fullscreen .ix-clues > .ix-btn:last-child { margin-block-start: auto; }
  body.ix-is-playing .ix-seg__btn,
  .ix-game:fullscreen .ix-seg__btn { min-block-size: clamp(2.6rem, 5.8dvh, 5rem); }
  body.ix-is-playing .ix-hold,
  .ix-game:fullscreen .ix-hold { min-block-size: clamp(4.5rem, 12dvh, 9rem); }
  /* Tighter rhythm so a whole step fits one column on a 768px-tall screen */
  body.ix-is-playing .ix-step,
  .ix-game:fullscreen .ix-step { gap: clamp(0.6rem, 1.8dvh, 1.25rem); padding: clamp(0.9rem, 2.2dvh, 1.6rem); }
  body.ix-is-playing .ix-step__title,
  .ix-game:fullscreen .ix-step__title { font-size: clamp(1.3rem, 0.6rem + 2.4dvh, 2.4rem); }
  body.ix-is-playing .ix-step__help,
  .ix-game:fullscreen .ix-step__help { font-size: var(--text-xs); line-height: 1.8; }
  body.ix-is-playing .ix-clues,
  .ix-game:fullscreen .ix-clues { gap: clamp(0.5rem, 1.4dvh, 0.9rem); }
  body.ix-is-playing .ix-clue__input,
  .ix-game:fullscreen .ix-clue__input { min-block-size: clamp(2.5rem, 5.2dvh, 3.25rem); }
  body.ix-is-playing .ix-sand,
  .ix-game:fullscreen .ix-sand { padding: var(--space-2) var(--space-3); gap: var(--space-1); }
  body.ix-is-playing .ix-picks,
  .ix-game:fullscreen .ix-picks { gap: clamp(0.5rem, 1.6dvh, 1rem); }
  /* The sand timer becomes one line: its hint is the only thing that goes */
  body.ix-is-playing .ix-sand,
  .ix-game:fullscreen .ix-sand { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--space-3); }
  body.ix-is-playing .ix-sand__hint,
  .ix-game:fullscreen .ix-sand__hint { display: none; }
  body.ix-is-playing .ix-sand__left,
  .ix-game:fullscreen .ix-sand__left { font-size: var(--text-lg); }
  body.ix-is-playing .ix-hold,
  .ix-game:fullscreen .ix-hold { min-block-size: clamp(4rem, 10dvh, 8rem); padding-block: var(--space-2); }
  body.ix-is-playing .ix-step__note,
  .ix-game:fullscreen .ix-step__note { margin-block-start: calc(var(--space-2) * -1); }
  body.ix-is-playing .ix-toolbar,
  .ix-game:fullscreen .ix-toolbar { margin-block-end: calc(var(--zone-gap) * -0.5); }
  /* On short screens the clue-writing tip gives its line back to the button */
  @media (max-height: 56rem) {
    body.ix-is-playing .ix-clues > .ix-step__help,
    .ix-game:fullscreen .ix-clues > .ix-step__help { display: none; }
    body.ix-is-playing .ix-clue__input,
    .ix-game:fullscreen .ix-clue__input { font-size: var(--text-base); }
  }

  @media (min-width: 48rem) {
    /* A compact HUD: no wasted plate space */
    body.ix-is-playing .ix-hud,
    .ix-game:fullscreen .ix-hud { gap: var(--zone-gap); }
    body.ix-is-playing .ix-plate,
    .ix-game:fullscreen .ix-plate { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: var(--space-3) var(--space-5); }
    body.ix-is-playing .ix-plate__tokens,
    .ix-game:fullscreen .ix-plate__tokens { flex-wrap: nowrap; }
    body.ix-is-playing .ix-slot,
    .ix-game:fullscreen .ix-slot { inline-size: clamp(1.15rem, 2.2dvh, 1.6rem); block-size: clamp(1.15rem, 2.2dvh, 1.6rem); }
    body.ix-is-playing .ix-dial,
    .ix-game:fullscreen .ix-dial { grid-template-columns: auto auto; align-items: center; column-gap: var(--space-3); }
    body.ix-is-playing .ix-dial__face,
    .ix-game:fullscreen .ix-dial__face { inline-size: clamp(4rem, 8dvh, 5.5rem); }
    body.ix-is-playing .ix-dial__num,
    .ix-game:fullscreen .ix-dial__num { font-size: clamp(1.6rem, 3.6dvh, 2.4rem); }
    body.ix-is-playing .ix-dial__pips,
    .ix-game:fullscreen .ix-dial__pips { flex-direction: column; margin: 0; }
    body.ix-is-playing .ix-dial__pip,
    .ix-game:fullscreen .ix-dial__pip { inline-size: 0.9rem; block-size: 0.32rem; }
    body.ix-is-playing .ix-tool,
    .ix-game:fullscreen .ix-tool { block-size: 2.25rem; min-inline-size: 2.25rem; }
  }
}

/* Phone game screen (and short tablets): the board header gives way to the tabs */
@media (min-height: 34rem) and (max-width: 47.99rem), (min-height: 34rem) and (max-height: 49.99rem) and (max-width: 74.99rem) {
  body.ix-is-playing .ix-board,
  .ix-game:fullscreen .ix-board { padding: var(--space-2); gap: var(--space-2); }
  body.ix-is-playing .ix-board__hint,
  .ix-game:fullscreen .ix-board__hint { display: none; }
  body.ix-is-playing .ix-board,
  .ix-game:fullscreen .ix-board { grid-template-rows: auto minmax(0, 1fr); padding: var(--space-3); }
  body.ix-is-playing .ix-col__head,
  .ix-game:fullscreen .ix-col__head { padding-block: var(--space-1) var(--space-2); }
  body.ix-is-playing .ix-col__word,
  .ix-game:fullscreen .ix-col__word { font-size: var(--text-sm); }
  body.ix-is-playing .ix-col__num,
  .ix-game:fullscreen .ix-col__num { inline-size: 1.35rem; block-size: 1.35rem; font-size: var(--text-xs); }
  body.ix-is-playing .ix-hud,
  .ix-game:fullscreen .ix-hud { gap: var(--space-2); }
  body.ix-is-playing .ix-step__help,
  .ix-game:fullscreen .ix-step__help { display: none; }
}

/* Board tabs: only shown in the phone layout of the game screen */
.ix-boardtabs { display: none; }
@media (min-height: 34rem) and (max-width: 47.99rem), (min-height: 34rem) and (max-height: 49.99rem) and (max-width: 74.99rem) {
  body.ix-is-playing .ix-boardtabs,
  .ix-game:fullscreen .ix-boardtabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; padding: 3px; border-radius: var(--r-md); background: var(--ix-well); box-shadow: inset 0 0 0 1px rgb(124 196 255 / 15%); }
}
.ix-boardtab { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-inline-size: 0; overflow: hidden; white-space: nowrap; min-block-size: 2.4rem; padding: 0.3rem 0.6rem; border: 0; border-radius: calc(var(--r-md) - 3px); background: transparent; color: var(--ix-dim); font: inherit; font-size: var(--text-xs); font-weight: 800; cursor: pointer; }
.ix-boardtab[aria-selected='true'] { background: var(--ix-steel); box-shadow: inset 0 1px 0 rgb(255 255 255 / 14%); color: var(--ix-ink); }
.ix-boardtab:focus-visible { outline: 3px solid var(--brand-200); outline-offset: 1px; }
.ix-boardtab .ix-mark { inline-size: 0.6rem; block-size: 0.6rem; }
.ix-boardtab .gk-text { overflow: hidden; text-overflow: ellipsis; }
.ix-boardtab::after { content: ''; inline-size: 0.45rem; block-size: 0.45rem; margin-inline-start: 0.2rem; border-block-start: 2px solid currentcolor; border-inline-start: 2px solid currentcolor; transform: translateY(0.12rem) rotate(45deg); transition: transform 160ms var(--ease-out); }
:dir(rtl) .ix-boardtab::after { transform: translateY(0.12rem) rotate(-45deg); }
.ix-boardtab[aria-expanded='true']::after { transform: translateY(-0.12rem) rotate(225deg); }
:dir(rtl) .ix-boardtab[aria-expanded='true']::after { transform: translateY(-0.12rem) rotate(135deg); }
.ix-boardtab[aria-expanded='true'] { box-shadow: inset 0 0 0 1px var(--ix-go), 0 0 14px -4px var(--ix-go); }

/* Pick rows: clue and numbers side by side whenever the step column is wide enough */
@container (max-width: 25rem) {
  .ix-pick { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
}

/* Full screen on a narrower window (a tablet): still one screen, stacked, page scrolls inside */
.ix-game:fullscreen { overflow-y: auto; }

@media (max-width: 40rem) {
  .ix-splash__stamp { position: static; justify-self: end; }
  .ix-menu__print { inline-size: 8rem; }
  .ix-toolbar__op { font-size: var(--text-xs); }
  .ix-tool--wide .gk-text { display: none; }
  .ix-dial__face { inline-size: 4.5rem; }
}

/* Tap-to-show code: a small "hide" control, and each clue box names its target keyword */
.ix-hold { position: relative; }
.ix-hold__hide { position: absolute; inset-block-start: 0.5rem; inset-inline-end: 0.6rem; display: inline-flex; align-items: center; gap: 0.3rem; color: var(--ix-dim); font-size: var(--text-2xs); font-weight: 800; }
.ix-hold__hide[hidden] { display: none; }
.ix-hold__hide .gk-icon svg { inline-size: 1rem; block-size: 1rem; }
.ix-clue__num { display: grid; place-items: center; min-inline-size: 2.4rem; block-size: auto; min-block-size: 2.4rem; padding: 0.2rem 0.4rem; transition: background-color 160ms, color 160ms; }
.ix-clue__target { display: none; }
.is-code-open .ix-clue__index { display: none; }
.is-code-open .ix-clue__num { min-inline-size: 4.5rem; background: rgb(34 211 238 / 12%); box-shadow: inset 0 0 0 1px rgb(34 211 238 / 45%); color: var(--accent-300); }
.is-code-open .ix-clue__target { display: grid; justify-items: center; line-height: 1.15; }
.ix-clue__target b { font-size: var(--text-lg); font-weight: 900; }
.ix-clue__target span { max-inline-size: 6.5rem; overflow: hidden; color: var(--ix-ink); font-size: var(--text-2xs); font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.ix-clue__target span:lang(en) { text-transform: uppercase; }

/* Middle column fit: once open, the code is a compact strip (the clue boxes name their
   targets anyway), and the step's main button stays pinned in view. */
.ix-hold.is-open { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); min-block-size: 0; padding: var(--space-3) var(--space-4); }
.ix-hold.is-open .ix-hold__secret { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); inline-size: auto; min-inline-size: 0; }
.ix-hold.is-open .ix-secret { display: inline-flex; align-items: baseline; gap: var(--space-2); }
.ix-hold.is-open .ix-secret__digit { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); }
.ix-hold.is-open .ix-secret__word { max-inline-size: 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ix-hold__hide { position: static; flex: none; padding: 0.25rem 0.6rem; border-radius: var(--r-full); background: rgb(255 255 255 / 6%); }
.is-code-open > .ix-step__note { display: none; }

.ix-clues > .ix-step__actions:last-child,
.ix-step > .ix-step__actions:last-child {
  position: sticky;
  inset-block-end: 0;
  z-index: 3;
  margin-block-start: auto;
  padding-block: var(--space-3) var(--space-1);
  background: linear-gradient(180deg, rgb(7 12 21 / 0%), #070c15 40%);
}
/* Short screens: the "who encrypts" line and the clue tip give their room to the inputs */
@media (max-height: 56rem) {
  body.ix-is-playing .ix-step[data-kind='encrypt'] > .ix-step__help,
  .ix-game:fullscreen .ix-step[data-kind='encrypt'] > .ix-step__help { display: none; }
}
@media (max-height: 50rem) {
  body.ix-is-playing .ix-hold.is-open,
  .ix-game:fullscreen .ix-hold.is-open { padding-block: var(--space-2); }
  body.ix-is-playing .ix-hold.is-open .ix-secret__digit,
  .ix-game:fullscreen .ix-hold.is-open .ix-secret__digit { font-size: 1.6rem; }
  body.ix-is-playing .ix-clue__input,
  .ix-game:fullscreen .ix-clue__input { min-block-size: 2.4rem; }
  body.ix-is-playing .ix-clue__num,
  .ix-game:fullscreen .ix-clue__num { min-block-size: 2.4rem; padding-block: 0.1rem; }
  body.ix-is-playing .ix-sand,
  .ix-game:fullscreen .ix-sand { padding-block: 0.35rem; }
  body.ix-is-playing .ix-sand .ix-btn,
  .ix-game:fullscreen .ix-sand .ix-btn { min-block-size: 2.1rem; }
  body.ix-is-playing .ix-step,
  .ix-game:fullscreen .ix-step { gap: 0.6rem; }
}