/* Frontline: Six-Minute War: the challenge shell (challenge/index.html only; production never loads this file).
   House style: red, black and white field journal (css/field-ui.css), etched art behind controls, stamped edges. */

body.challenge #home, body.challenge #promo-dock { display: none !important; }
/* One clear score (ground gained, the strip below) and only the controls a six-minute guest war needs. */
body.challenge #h-board, body.challenge #h-rec, body.challenge #h-voice, body.challenge #h-mic { display: none !important; } /* the Arsenal, tactics and Hold the Line stay (Gage 10-27) */
/* the clock is the headline; your share of the map gives way to the ground-gained standings */
body.challenge #h-land { display: none !important; }
body.challenge .hud-time { font-size: 34px; line-height: 1; color: #fff; letter-spacing: .04em; text-shadow: 2px 2px 0 #000; }
body.challenge .hud-time.low { color: var(--red-b); }

.cx-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cx-svg { width: 22px; height: 22px; flex: none; }

/* ---------- the screen root: over the live map, under sheets (#modal 30) and toasts (50) ---------- */
#cx { position: fixed; inset: 0; z-index: 20; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  display: flex; flex-direction: column; align-items: center; /* no justify-content: .cx-panel centres itself (margin: auto 0), and a taller panel then scrolls from its top */
  padding: calc(var(--safe-t) + 16px) max(16px, env(safe-area-inset-right)) calc(var(--safe-b) + 16px) max(16px, env(safe-area-inset-left));
  background: linear-gradient(180deg, #0b0c0bd9, #0d0c0b8c 38%, #0b0b0bf0 78%), url('../assets/ui/command-etch.svg') center 38% / min(980px, 180vw) auto no-repeat; }
#cx[hidden] { display: none; }
#cx.cx-on-end { background: linear-gradient(180deg, #0b0c0bcc, #0b0b0bf2 55%); }
#cx .btn { margin: 0; }
#cx .btn.small { min-height: 42px; font-size: 19px; padding: 0 12px; }
#cx .btn .wi { width: 22px; height: 22px; }
.cx-panel { position: relative; width: 100%; max-width: 440px; margin: auto 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cx-kicker { display: block; font: 400 17px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: #f27661; }
.cx-note { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.35; }

/* ---------- landing ---------- */
.cx-brand { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; margin-bottom: 4px; }
.cx-logo { width: min(300px, 74vw); aspect-ratio: 520 / 186; overflow: hidden; filter: drop-shadow(0 4px 0 #000a); }
.cx-logo img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.cx-title { margin: -4px 0 0; line-height: 1; }
.cx-title b { display: inline-block; font: 400 34px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: #0b0b0b; padding: 7px 14px 5px;
  box-shadow: 0 -3px 0 var(--red), 0 3px 0 var(--red), -3px 0 0 var(--red), 3px 0 0 var(--red), 0 7px 0 #000; transform: rotate(-1.2deg); }
.cx-pitch { margin: 6px 0 0; max-width: 34ch; color: #ece3d6; font-size: 16px; line-height: 1.4; text-wrap: balance; }
.cx-field { display: flex; flex-direction: column; gap: 5px; }
.cx-field > span { font: 400 16px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cx-field small { color: #8f8a84; font-size: 12px; }
.cx input[type=text] { width: 100%; height: 50px; border: 0; border-radius: 0; background: #0b0b0b; color: var(--fg); padding: 0 14px; font: 500 18px var(--body);
  box-shadow: inset 0 0 0 2px #51463c; -webkit-user-select: text; user-select: text; min-width: 0; }
.cx input[type=text]:focus { outline: none; box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--red); }
.cx-play { min-height: 70px !important; gap: 12px !important; font-size: 34px !important; letter-spacing: .06em; }
.cx-play .wi { width: 30px !important; height: 30px !important; }
.cx-play > span { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.cx-play small { font: 500 12px/1 var(--body); letter-spacing: .02em; text-transform: none; color: #ffe1d6; opacity: .9; }
.cx-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cx-row .btn { min-width: 0; padding: 0 8px; font-size: 20px; }
.cx-quiet .btn { min-height: 44px; font-size: 19px; }
.cx-join { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.cx-join[hidden] { display: none; }
.cx-join input { font: 400 30px/1 var(--display) !important; letter-spacing: .35em; text-transform: uppercase; text-align: center; }
.cx-join input::placeholder { color: #514a44; }
.cx-join .btn { min-width: 92px; }
.cx-err { margin: -2px 0 0; min-height: 18px; color: #ff8a76; font-size: 14px; text-align: center; }
.cx-err:empty { min-height: 0; margin: -6px 0 0; }
.cx-foot { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--muted); font: 400 15px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; text-align: center; }
.cx-ver { font: 400 12px/1 var(--display); letter-spacing: .1em; color: #8a8174; } /* the build (tools/build-challenge.py VERSION) */
.cx-icon-btn { flex: none; width: 44px; height: 44px; display: inline-grid; place-items: center; background: #151513; color: #d8cfc2; border: 1px solid #51463c; }
.cx-icon-btn:focus-visible, .cx-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cx-rejoin { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; padding: 10px 8px 10px 12px; background: linear-gradient(115deg, #3a1714, #1a1716 70%); border-left: 4px solid var(--red); box-shadow: 0 3px #050505; }
.cx-rejoin b { display: block; font: 400 21px/1 var(--display); text-transform: uppercase; color: #fff; letter-spacing: .03em; }
.cx-rejoin small { color: var(--muted); font-size: 12px; }
.cx-x { width: 42px; height: 42px; display: grid; place-items: center; background: transparent; border: 0; }
.cx-x .wi { width: 18px; height: 18px; opacity: .8; }

/* narrow phones (320): everything stays on one line */
@media (max-width: 360px) {
  .cx-row .btn { font-size: 17px; gap: 6px; padding: 0 6px; }
  .cx-row .btn .wi { width: 18px !important; height: 18px !important; }
  .cx-quiet .btn { font-size: 16px; }
  .cx-play { font-size: 30px !important; }
  .cx-pitch { font-size: 15px; }
  .cx-foot-more { display: none; }
  .cx-title b { font-size: 30px; }
}
/* wide screens: the live war shows on the right, the orders sit on the left */
@media (min-width: 900px) {
  #cx.cx-on-landing { align-items: flex-start; padding-left: max(6vw, 40px);
    background: linear-gradient(90deg, #0b0b0bf2 0, #0b0b0bd6 32%, #0b0b0b40 62%, transparent), linear-gradient(0deg, #0b0b0bc0, transparent 40%), url('../assets/ui/command-etch.svg') right -4vw center / min(1100px, 70vw) auto no-repeat; }
  #cx.cx-on-landing .cx-brand { align-items: flex-start; text-align: left; }
  .cx-logo { width: 340px; }
  .cx-title b { font-size: 40px; }
}
/* landscape phones: brand left, controls right */
@media (orientation: landscape) and (max-height: 520px) {
  #cx { justify-content: flex-start; padding-top: calc(var(--safe-t) + 10px); padding-bottom: calc(var(--safe-b) + 10px); }
  .cx-land { max-width: 820px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: 22px; row-gap: 9px; align-items: start; }
  .cx-land > * { grid-column: 2; }
  .cx-land > .cx-brand { grid-column: 1; grid-row: 1 / span 8; align-self: center; }
  .cx-land .cx-field small { display: none; }
  .cx-play { min-height: 58px !important; font-size: 28px !important; }
  .cx-logo { width: min(260px, 36vw); }
  .cx-title b { font-size: 28px; }
  .cx-pitch { font-size: 14px; }
}

/* ---------- waiting states ---------- */
.cx-wait { align-items: center; text-align: center; gap: 14px; }
.cx-wait h2, .cx-quick h2 { margin: 0; font: 400 34px/1 var(--display); text-transform: uppercase; color: #fff; text-wrap: balance; }
.cx-spin { width: 44px; height: 44px; box-shadow: inset 0 0 0 4px #3a1714; position: relative; }
.cx-spin::after { content: ''; position: absolute; inset: 0; box-shadow: inset 4px 4px 0 0 var(--red-b); animation: cx-spin .8s steps(4) infinite; }
@keyframes cx-spin { to { transform: rotate(1turn); } }
.cx-quick { padding: 18px 16px; background: linear-gradient(130deg, #30291f, #181b17 65%); border: 1px solid #b59a7366; box-shadow: 0 10px 45px #0009, inset 0 1px #efd3a72b; }
.cx-quick .mm-head small { display: block; margin-top: 4px; }

/* ---------- room lobby ---------- */
.cx-room { gap: 14px; }
.cx-room-head { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.cx-code { display: flex; gap: 8px; }
.cx-code b { display: grid; place-items: center; width: clamp(52px, 16vw, 66px); height: clamp(60px, 19vw, 76px); background: #0b0b0b; color: #fff; font: 400 clamp(46px, 14vw, 60px)/1 var(--display);
  box-shadow: inset 0 0 0 2px #51463c, inset 0 -5px 0 var(--red), 0 4px 0 #000; padding-top: 4px; }
.cx-share { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.cx-banner { margin: 0; padding: 10px 12px; background: #1d1a17; border-left: 4px solid #d8ad55; color: #efe6d8; font-size: 14px; }
.cx-banner.warn { border-color: var(--red); }
.cx-last { display: flex; align-items: center; gap: 8px; margin: 0; color: #d9cfbf; font-size: 14px; }
.cx-last .wi { width: 20px; height: 20px; }
.cx-last b { color: #fff; }
.cx-members { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cx-m { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 46px; padding: 0 12px; background: #171614; border: 1px solid #3a342d; }
.cx-m.me { background: linear-gradient(90deg, #3a1714, #1c1816 80%); border-color: #8a3a2f; }
.cx-m.off { opacity: .55; }
.cx-m-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 22px/1 var(--display); color: #fff; letter-spacing: .02em; }
.cx-m-name em { margin-left: 8px; font: 500 11px/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: #f27661; font-style: normal; }
.cx-host, .cx-state { display: inline-flex; align-items: center; gap: 5px; flex: none; font: 400 16px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cx-host { color: #f2c14e; }
.cx-host .wi, .cx-state .wi { width: 18px; height: 18px; }
.cx-state.on { color: #b9e27a; }
.cx-settings { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: #141311d9; border: 1px solid #3a342d; }
.cx-set { display: flex; flex-direction: column; gap: 6px; }
.cx-set > span { font: 400 15px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cx-seg { display: grid; grid-auto-columns: 1fr; grid-auto-flow: column; gap: 4px; }
.cx-seg button { min-height: 44px; padding: 0 6px; background: #0b0b0b; color: #d9cfbf; border: 1px solid #51463c; font: 400 19px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; }
.cx-seg button[aria-checked="true"] { background: #b93135; border-color: #ed987f; color: #fff; }
.cx-seg button:disabled { cursor: default; }
.cx-seg button:disabled:not([aria-checked="true"]) { opacity: .5; }
.cx-seg button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.cx-room-foot { position: sticky; bottom: calc(-1 * var(--safe-b) - 16px); display: flex; flex-direction: column; gap: 8px; padding: 12px 0 calc(var(--safe-b) + 16px); margin-bottom: calc(-1 * var(--safe-b) - 16px);
  background: linear-gradient(180deg, transparent, #0b0b0bf2 22%); }
.cx-start, .cx-ready { min-height: 60px !important; font-size: 28px !important; }
.cx-start[disabled] { opacity: .5; }
.cx-reason { margin: 0; min-height: 18px; text-align: center; color: #d9cfbf; font-size: 14px; }
.cx-qrbox { align-self: center; width: min(240px, 66vw); padding: 0; background: #fff; box-shadow: 0 0 0 4px #fff; }
.cx-qrbox svg { display: block; width: 100%; height: auto; }
.cx-qrlink { text-align: center; word-break: break-all; font-size: 13px !important; }
@media (min-width: 900px) { .cx-room { max-width: 500px; } }
@media (orientation: landscape) and (max-height: 520px) {
  .cx-room { max-width: 820px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: 18px; align-items: start; }
  .cx-room > * { grid-column: 2; }
  .cx-room-head { grid-column: 1; grid-row: 1; }
  .cx-room-foot { grid-column: 1; grid-row: 2 / span 6; align-self: start; position: static; padding: 4px 0 0; margin-bottom: 0; background: none; }
}

/* ---------- loading panel (inline in the page, hidden by js/challenge-settings.js) ---------- */
.cx-load { position: fixed; inset: 0; z-index: 19; display: flex; flex-direction: column; align-items: center; gap: 14px; overflow-y: auto; text-align: center;
  padding: calc(var(--safe-t) + 16px) 16px calc(var(--safe-b) + 16px);
  background: linear-gradient(180deg, #0b0c0b, #0d0c0b 55%, #0b0b0b), url('../assets/ui/command-etch.svg') center 38% / min(980px, 180vw) auto no-repeat; }
.cx-load[hidden] { display: none; }
.cx-load::before, .cx-load::after { content: ''; margin: auto; } /* centres the content, and a short screen scrolls from the top */
.cx-load .cx-logo { flex: none; }
.cx-load-t { margin: 0; max-width: 24ch; font: 400 30px/1.05 var(--display); letter-spacing: .06em; text-transform: uppercase; color: #fff; text-wrap: balance; }
.cx-load-slow { margin: 0; max-width: 32ch; color: var(--muted); font-size: 15px; line-height: 1.4; visibility: hidden; }
.cx-load.slow .cx-load-slow { visibility: visible; }
.cx-load-btn { display: inline-block; padding: 14px 6px; margin: -14px -6px; background: none; border: 0; color: #fff; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cx-load-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.cx-load-ns { margin: 0; max-width: 32ch; color: #efe6d8; font-size: 16px; line-height: 1.4; }

/* ---------- sheets over the shell ---------- */
#modal .cx-sheet { gap: 12px; }
#modal .cx-sheet h2 { font-size: 36px; }
#modal .cx-sheet p { line-height: 1.45; }
#modal .cx-snd .cx-priv { margin: 2px 0 0; font-size: 13px; line-height: 1.4; text-align: center; }
#modal .cx-snd .vol-row input.vol { height: 44px; }
#modal .cx-snd .seg button, #modal .cx-snd .btn.small { height: 44px; min-height: 44px; }
#modal .cx-snd .cx-priv a { display: inline-block; padding: 14px 6px; margin: -14px -6px; color: #efe6d8; text-underline-offset: 3px; }
#modal .cx-snd .cx-priv a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cx-sheet-acts { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 4px; }
.cx-sheet-acts .btn { margin: 0; min-height: 48px; }
.cx-how { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cx-how li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; }
.cx-how .wi { width: 30px; height: 30px; }
.cx-how b { display: block; font: 400 22px/1.05 var(--display); text-transform: uppercase; color: #fff; letter-spacing: .02em; }
.cx-how small { display: block; margin-top: 3px; color: var(--muted); font-size: 14px; line-height: 1.4; }

/* ---------- in match: live standings (ground gained), where the production leaderboard sits ---------- */
body.cx-ended #hud { visibility: hidden; }
body.cx-ended .transmission, body.challenge:not(.in-match) .transmission { display: none !important; }
#hud > .cx-strip { position: absolute; right: 8px; top: calc(var(--safe-t) + 66px); z-index: 2; pointer-events: none;
  display: flex; flex-direction: column; gap: 2px; width: max-content; min-width: 138px; max-width: 46vw; padding: 5px 8px 6px; background: rgba(11, 11, 11, .8);
  font: 400 17px/1.05 var(--display); text-transform: uppercase; letter-spacing: .02em; color: #efe6d8; }
#hud > .cx-strip[hidden] { display: none; }
body.pc-wide #hud > .cx-strip { right: 20px; min-width: 200px; }
.cx-s-h { font-size: 12px; letter-spacing: .16em; color: var(--muted); }
.cx-s-me { display: flex; align-items: baseline; gap: 6px; margin: 1px -4px 2px; padding: 3px 5px 2px; background: #b93135; color: #fff; }
.cx-s-me small { font-size: 13px; opacity: .85; }
.cx-s-me b { font-size: 21px; font-weight: 400; }
.cx-s-me em { margin-left: auto; padding-left: 8px; font-style: normal; }
.cx-s-top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.cx-s-top li { display: flex; align-items: center; gap: 5px; min-width: 0; }
.cx-s-top li small { width: 9px; font-size: 13px; color: var(--muted); }
.cx-s-top li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-s-top li.me span { color: var(--red-b); }
.cx-s-top em { margin-left: 4px; font-style: normal; color: #f2c14e; flex: none; }
.cx-fl { display: inline-block; flex: none; width: 15px; height: 10px; image-rendering: pixelated; box-shadow: 0 0 0 1px #000; background: #333; }

/* the reveal: which country you are, for two seconds, without blocking the map */
.cx-reveal { position: fixed; inset: 0; z-index: 44; display: grid; place-items: center; pointer-events: none; }
.cx-rv-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 26px 16px; background: #0b0b0bec; text-align: center; max-width: calc(100vw - 32px);
  box-shadow: 0 -3px 0 #fff, 0 3px 0 #fff, -3px 0 0 #fff, 3px 0 0 #fff, 0 12px 40px #000c; animation: cx-rv .32s steps(5) both; }
.cx-rv-card small { font: 400 18px/1 var(--display); letter-spacing: .2em; text-transform: uppercase; color: #f27661; }
.cx-rv-card b { font: 400 clamp(36px, 11vw, 56px)/1 var(--display); text-transform: uppercase; color: #fff; letter-spacing: .03em; text-wrap: balance; }
.cx-rv-card p { margin: 0; color: #d9cfbf; font-size: 15px; }
.cx-rv-flag { width: 96px; height: 64px; image-rendering: pixelated; box-shadow: 0 0 0 3px #000, 0 0 0 5px #fff; }
.cx-reveal.out .cx-rv-card { animation: cx-rv-out .3s steps(4) forwards; }
/* Narrow phones (Gage 10-27: three tactics and the Arsenal share the dock): every tool keeps its own width instead of sliding
   under the next one, Hold the Line shows only its shield under 380 px, and under 360 px the Strike tool steps aside (tap a
   target, then the sword, still attacks). */
@media (max-width: 400px) {
  body.challenge .dock-row { gap: 0; }
  body.challenge .dock-row .tactics-row { flex: none; }
  body.challenge .dock-row .tbtn { flex: none; width: 42px; min-width: 42px; margin: 3px 1px; }
}
@media (max-width: 379px) {
  body.challenge .dock-row .hold-btn { flex: none; min-width: 44px; width: 44px; padding: 0; justify-content: center; margin: 3px 4px 3px 2px; }
  body.challenge .dock-row .hold-btn .hold-txt { display: none; }
  body.challenge .dock-row .hold-btn .hold-ic { display: block !important; width: 24px; height: 24px; } /* kit.css hides it when two tactics share the row */
}
@media (max-width: 359px) { body.challenge #h-strike { display: none !important; } }
/* the intermission: pick your country before the drop (ChallengeMatch.startPick) */
body.cx-picking #h-banner, body.cx-picking #hud > .cx-strip { display: none !important; }
.cx-pick { position: fixed; left: 50%; top: calc(var(--safe-t) + 58px); z-index: 44; width: min(360px, calc(100vw - 32px)); transform: translateX(-50%); pointer-events: none; }
.cx-pk-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 12px; background: #0b0b0bec; pointer-events: auto;
  box-shadow: 0 -3px 0 #fff, 0 3px 0 #fff, -3px 0 0 #fff, 3px 0 0 #fff, 0 12px 40px #000c; }
.cx-pick.pop .cx-pk-card { animation: cx-rv .28s steps(4) both; }
.cx-pk-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cx-pk-top small { font: 400 18px/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: #f27661; }
.cx-pk-t { min-width: 2ch; font: 400 34px/1 var(--display); color: #fff; text-align: right; font-variant-numeric: tabular-nums; }
.cx-pick.hot .cx-pk-t { color: var(--red-b); }
.cx-pk-me { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cx-pk-me .cx-fl { width: 42px; height: 28px; box-shadow: 0 0 0 2px #000, 0 0 0 3px #fff; }
.cx-pk-me span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 28px/1 var(--display); text-transform: uppercase; color: #fff; letter-spacing: .03em; }
.cx-pk-hint { margin: 0; color: #d9cfbf; font-size: 13px; line-height: 1.35; }
.cx-pk-card .btn { align-self: flex-start; min-height: 40px; }
@media (orientation: landscape) and (max-height: 520px) { .cx-pick { left: auto; right: 12px; transform: none; width: 300px; } .cx-pk-hint { display: none; } }
@keyframes cx-rv { from { transform: scale(1.35); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes cx-rv-out { to { transform: translateY(-30px); opacity: 0; } }

/* the first-play tutorial */
.cx-tut { position: fixed; left: 50%; bottom: calc(var(--safe-b) + 200px); z-index: 45; transform: translateX(-50%); width: min(380px, calc(100vw - 24px)); pointer-events: none; } /* the card lets taps through; only Skip / Got it take them */
.cx-tut-card { pointer-events: none; display: grid; grid-template-columns: 1fr auto; column-gap: 10px; row-gap: 3px; align-items: center; padding: 11px 12px 11px 14px;
  background: linear-gradient(115deg, #2f2720f2, #161614f2 70%); border-left: 4px solid var(--red); box-shadow: 0 0 0 1px #b59a7355, 0 8px 28px #000b; }
.cx-tut.pop .cx-tut-card { animation: cx-pop .22s steps(4); }
.cx-tut.wait { visibility: hidden; }
.cx-tut-n { grid-column: 1 / -1; font: 400 13px/1 var(--display); letter-spacing: .16em; color: #f27661; }
.cx-tut-t { grid-column: 1 / -1; font: 400 25px/1.02 var(--display); text-transform: uppercase; color: #fff; letter-spacing: .02em; }
.cx-tut-s { grid-column: 1; margin: 0; color: #d9cfbf; font-size: 14px; line-height: 1.35; }
.cx-tut-acts { grid-column: 2; grid-row: 3; display: flex; gap: 6px; align-self: end; }
.cx-tut-acts .btn { pointer-events: auto; margin: 0 !important; min-height: 40px !important; font-size: 17px !important; padding: 0 10px !important; white-space: nowrap; }
.cx-tut-acts .btn[hidden] { display: none; }
@keyframes cx-pop { from { transform: translateY(-8px); opacity: .2; } }
.cx-glow { outline: 3px solid #fff !important; outline-offset: 3px; animation: cx-glow .9s steps(2) infinite; }
@keyframes cx-glow { 50% { outline-color: var(--red-b); } }

/* ---------- the end screen ---------- */
.cx-end { align-items: stretch; text-align: center; gap: 10px; max-width: 480px; }
.cx-end-title { margin: 0; overflow-wrap: anywhere; font: 400 clamp(34px, 11vw, 58px)/.95 var(--display); text-transform: uppercase; color: #fff; letter-spacing: .02em; text-wrap: balance; text-shadow: 3px 4px 0 #000; }
.cx-end-sub { margin: 0; color: #d9cfbf; font-size: 15px; }
.cx-podium { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 6px; }
.cx-pod { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.cx-pod.empty { visibility: hidden; }
.cx-pod .cx-fl { width: 48px; height: 32px; box-shadow: 0 0 0 2px #000, 0 0 0 3px #fff6; }
.cx-pod.p1 .cx-fl { width: 66px; height: 44px; box-shadow: 0 0 0 2px #000, 0 0 0 4px #f2c14e; }
/* long names (UNITED KINGDOM, BOSNIA AND HERZ.) wrap onto two lines and shrink on phones instead of being clipped */
.cx-pod b { max-width: 100%; overflow-wrap: anywhere; text-wrap: balance; text-align: center; font: 400 clamp(15px, 4.8vw, 21px)/1 var(--display); text-transform: uppercase; color: #fff; }
.cx-pod small { max-width: 100%; min-height: 14px; overflow-wrap: anywhere; text-align: center; line-height: 1.15; color: var(--muted); font-size: 12px; }
.cx-pod.me b { color: #ff9b86; }
.cx-step { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 100%; margin-top: 4px; background: linear-gradient(180deg, #3b3530, #1d1b19); box-shadow: inset 0 2px #fff2, 0 3px #000; }
.cx-step strong { font: 400 36px/.9 var(--display); color: #fff; font-weight: 400; }
.cx-step em { font: 400 20px/1 var(--display); font-style: normal; color: #f2c14e; }
.cx-pod.p1 .cx-step { height: 104px; background: linear-gradient(180deg, #c3393c, #7c1418); }
.cx-pod.p1 .cx-step em { color: #fff1c4; }
.cx-pod.p2 .cx-step { height: 82px; }
.cx-pod.p3 .cx-step { height: 66px; }
.cx-win-tag { font: 400 14px/1 var(--display); letter-spacing: .18em; text-transform: uppercase; color: #0b0b0b; background: #f2c14e; padding: 4px 8px 3px; }
.cx-you { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cx-you > div { padding: 10px; background: #151412e6; border: 1px solid #3a342d; }
.cx-you small { display: block; font: 400 14px/1 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cx-you b { display: block; margin-top: 4px; font: 400 34px/1 var(--display); color: #fff; font-weight: 400; }
.cx-you b span { font-size: 18px; color: var(--muted); }
.cx-end-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.cx-end-acts .btn { min-width: 0; padding: 0 8px; font-size: 20px; }
.cx-end-acts .btn.primary { grid-column: 1 / -1; min-height: 58px; font-size: 28px; }
.cx-end-acts .btn.cx-span { grid-column: 1 / -1; }
@media (orientation: landscape) and (max-height: 520px) {
  .cx-end { max-width: 820px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px; row-gap: 6px; align-items: start; }
  .cx-end > * { grid-column: 1; }
  .cx-end > .cx-podium { grid-column: 2; grid-row: 1 / span 5; margin-top: 0; align-self: center; }
  .cx-pod.p1 .cx-step { height: 84px; } .cx-pod.p2 .cx-step { height: 66px; } .cx-pod.p3 .cx-step { height: 54px; }
  .cx-end-title { font-size: 38px; }
  .cx-end-acts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .cx-end-acts .btn.cx-span { grid-column: auto; }
  .cx-end-acts .btn.primary { min-height: 50px; font-size: 24px; }
  .cx-end-acts .btn { font-size: 17px; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .cx-spin::after, .cx-rv-card, .cx-pick.pop .cx-pk-card, .cx-reveal.out .cx-rv-card, .cx-tut.pop .cx-tut-card, .cx-glow { animation: none !important; }
  .cx-reveal.out { display: none; }
}