/* RISK — landing (/risk), phone controller (/risk/play) and big screen
   (/risk/screen). Polaris tokens (tokens.css) on a darker "war room" stage:
   deep navy sea, brass accents, Cinzel for the epic headings. */

:root {
  --rk-sea: #0b1626;
  --rk-sea-2: #142a44;
  --rk-brass: #e0b455;
  --rk-brass-2: #f3d27a;
  --rk-ink: #05090f;
  --rk-font-epic: 'Cinzel', 'Georgia', serif;
}

body.rk-landing, body.rk-play, body.rk-screen { background: radial-gradient(120% 90% at 50% -10%, var(--rk-sea-2), var(--rk-sea) 55%, #070d17 100%); min-height: 100dvh; }

/* ---------- shared bits ---------- */
.rk-h2 { font-family: var(--rk-font-epic); font-weight: 800; letter-spacing: .04em; font-size: var(--p-font-size-heading-lg); color: var(--rk-brass-2); margin: var(--p-space-400) 0 var(--p-space-300); }
.rk-small { font-size: var(--p-font-size-body-sm); }
.rk-center { text-align: center; }
.rk-wide { width: 100%; }
.rk-input { font-size: var(--p-font-size-body-lg); }
.rk-input--code { letter-spacing: .35em; text-transform: uppercase; font-family: var(--p-font-family-display); font-size: 1.5rem; text-align: center; max-width: 11rem; }
.rk-field { display: flex; flex-direction: column; gap: var(--p-space-150); }
.rk-field > span { font-size: var(--p-font-size-body-sm); color: var(--p-color-text-secondary); font-weight: var(--p-font-weight-semibold); }
.rk-feedback { color: var(--p-color-text-critical); font-size: var(--p-font-size-body-sm); min-height: 1.2em; }
.rk-divider { display: flex; align-items: center; gap: var(--p-space-300); color: var(--p-color-text-disabled); }
.rk-divider::before, .rk-divider::after { content: ''; flex: 1; border-top: 1px solid var(--p-color-border); }
.rk-icon { display: inline-block; vertical-align: -0.2em; }
.rk-brand { display: inline-flex; align-items: center; gap: var(--p-space-200); color: var(--rk-brass-2); text-decoration: none; font-size: 1.1rem; }

.rk-chip { display: inline-flex; align-items: center; gap: var(--p-space-200); padding: 2px var(--p-space-300) 2px 4px; border-radius: var(--p-border-radius-full); background: color-mix(in srgb, var(--rk-c, #888) 28%, var(--p-color-bg-surface)); border: 1px solid color-mix(in srgb, var(--rk-c, #888) 70%, transparent); font-weight: var(--p-font-weight-bold); }
.rk-chip--neutral { --rk-c: #8d95a8; }
.rk-chip__name { max-width: 9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-dot { display: inline-block; width: .8em; height: .8em; border-radius: 50%; background: var(--c, #888); margin-right: .35em; vertical-align: -0.05em; box-shadow: 0 0 0 2px rgba(255,255,255,.15); }

.rk-roomlist { display: flex; flex-direction: column; gap: var(--p-space-200); }
.rk-room { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: 'code meta go' 'code settings go'; gap: 2px var(--p-space-400); align-items: center; text-align: left; width: 100%; padding: var(--p-space-300) var(--p-space-400); background: var(--p-color-bg-surface); border: 1px solid var(--p-color-border); border-radius: var(--p-border-radius-300); color: var(--p-color-text); min-height: 64px; }
.rk-room:hover { background: var(--p-color-bg-surface-hover); }
.rk-room__code { grid-area: code; font-family: var(--p-font-family-display); font-size: 1.4rem; color: var(--rk-brass-2); letter-spacing: .1em; }
.rk-room__meta { grid-area: meta; font-weight: var(--p-font-weight-semibold); }
.rk-room__settings { grid-area: settings; font-size: var(--p-font-size-body-xs); }
.rk-room__go { grid-area: go; color: var(--rk-brass-2); font-weight: var(--p-font-weight-bold); }
.rk-room__btns { grid-area: go; display: flex; gap: var(--p-space-200); }
.rk-room--static { cursor: default; }

.rk-toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 120; max-width: 92vw; padding: var(--p-space-300) var(--p-space-500); border-radius: var(--p-border-radius-full); background: var(--p-color-bg-surface); border: 1px solid var(--p-color-border); box-shadow: var(--p-shadow-300); font-weight: var(--p-font-weight-semibold); text-align: center; animation: rk-toast-in .25s var(--p-motion-ease-bounce); }
.rk-toast--critical { border-color: var(--p-color-border-critical); color: var(--p-color-text-critical); }
.rk-toast--warning { border-color: rgba(255,202,58,.6); color: var(--p-color-text-warning); }
.rk-toast--success { border-color: rgba(34,197,94,.6); color: var(--p-color-text-success); }
@keyframes rk-toast-in { from { transform: translate(-50%, 12px); opacity: 0; } }

/* ---------- map ---------- */
.rk-map { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.rk-t { stroke: rgba(4, 8, 16, .62); stroke-width: 2.4; stroke-linejoin: round; transition: fill .35s var(--p-motion-ease), opacity .3s; cursor: pointer; outline: none !important; }
.rk-t:focus, .rk-t:focus-visible { outline: none !important; }   /* the focus ring is drawn as a shape outline in .rk-highlights */
.rk-t.is-neutral { fill-opacity: .55; }
.rk-t.is-fog { cursor: default; }
.rk-t.is-blocked { cursor: default; }
.rk-t.is-dim { opacity: .38; }
.rk-t.is-selected { filter: brightness(1.18); }
.rk-map--fantasy .rk-label, .rk-map--fantasy .rk-clabel { font-family: var(--rk-font-epic); font-weight: 700; }
.rk-map--fantasy .rk-border { stroke: rgba(20, 30, 28, .9); }
.rk-map--fantasy .rk-route { stroke: rgba(255, 236, 190, .55); }
.rk-preview { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--p-border-radius-200); overflow: hidden; border: 1px solid var(--p-color-border); background: var(--rk-sea); }
.rk-preview .rk-map { pointer-events: none; }
.rk-preview .rk-label, .rk-preview .rk-badge, .rk-preview .rk-clabel { display: none; }
/* highlights: outline copies of the territory path, drawn above every fill */
.rk-hl { fill: none; pointer-events: none; stroke-linejoin: round; stroke-linecap: round; }
.rk-hl--selected { stroke: #fff; stroke-width: 7; filter: drop-shadow(0 0 7px rgba(255,255,255,.95)) drop-shadow(0 0 18px rgba(255,255,255,.55)); animation: rk-hl-breathe 1.5s ease-in-out infinite alternate; }
.rk-hl--focus { stroke: var(--p-color-border-focus); stroke-width: 5; opacity: .9; }
.rk-hl--source { stroke: #fff; stroke-width: 4; opacity: .8; }
.rk-hl--target { stroke: #ffca3a; stroke-width: 7; stroke-dasharray: 20 12; filter: drop-shadow(0 0 6px rgba(255,202,58,.85)); animation: rk-dash 1.1s linear infinite; }
.rk-hl--path { stroke: #7dd3fc; stroke-width: 5; opacity: .85; }
.rk-hl--flash { stroke-width: 10; animation: rk-flash 1.6s ease-out forwards; filter: drop-shadow(0 0 10px currentColor); }
.rk-mark { pointer-events: none; mix-blend-mode: screen; }
.rk-cont { pointer-events: none; animation: rk-cont-in 1.2s ease-out; opacity: .95; }
.rk-t.rk-pulse { animation: rk-pulse .9s ease-out; }
@keyframes rk-pulse { 0% { filter: brightness(2.2); } 100% { filter: brightness(1); } }
@keyframes rk-dash { to { stroke-dashoffset: -32; } }
@keyframes rk-hl-breathe { from { stroke-width: 6; opacity: .85; } to { stroke-width: 9; opacity: 1; } }
@keyframes rk-flash { 0% { opacity: 1; stroke-width: 14; } 100% { opacity: 0; stroke-width: 4; } }
@keyframes rk-cont-in { 0% { opacity: 0; } 40% { opacity: 1; } 70% { opacity: .6; } 100% { opacity: .95; } }
.rk-odds { display: flex; align-items: baseline; gap: var(--p-space-200); padding: var(--p-space-200) var(--p-space-300); border-radius: var(--p-border-radius-200); background: var(--p-color-bg-surface-secondary); }
.rk-odds__big { font-family: var(--p-font-family-display); font-size: 1.6rem; color: var(--rk-brass-2); }
.rk-odds--good .rk-odds__big { color: var(--p-color-text-success); }
.rk-odds--bad .rk-odds__big { color: var(--p-color-text-critical); }
.rk-dicebtn small { display: block; font-size: var(--p-font-size-body-xs); color: var(--p-color-text-secondary); font-weight: 500; }
.rk-dicebtn { flex-direction: column; gap: 2px; min-height: 52px; }
.rk-target__odds { color: var(--p-color-text-secondary); font-weight: 500; margin-left: 4px; }
.rk-border { fill: none; stroke: rgba(6, 10, 18, .85); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
.rk-route { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 3.5; stroke-dasharray: 16 14; stroke-linecap: round; pointer-events: none; }
.rk-route--weak { stroke: rgba(255,255,255,.35); stroke-dasharray: 8 12; }
.rk-label { fill: #fff; font: 600 calc(27px * var(--rk-tall, 1)) var(--p-font-family-body); text-anchor: middle; paint-order: stroke; stroke: rgba(3, 6, 12, .75); stroke-width: 7px; stroke-linejoin: round; pointer-events: none; letter-spacing: .01em; }
.rk-label.is-fog { opacity: .35; }
.rk-clabel { font: 800 calc(34px * var(--rk-tall, 1)) var(--rk-font-epic); text-anchor: middle; letter-spacing: .16em; fill: #f8ecd0; opacity: .86; pointer-events: none; paint-order: stroke; stroke: rgba(4, 8, 14, .62); stroke-width: 7px; stroke-linejoin: round; }
.rk-clabel.is-owned { fill: var(--c, #f8ecd0); opacity: 1; stroke: rgba(4, 8, 14, .85); }
.rk-badge { pointer-events: auto; cursor: pointer; }
.rk-badge__bg { fill: color-mix(in srgb, var(--c, #888) 78%, #05080e); stroke: #fff; stroke-width: 4; filter: drop-shadow(0 3px 4px rgba(0,0,0,.6)); }
.rk-badge__n { fill: #fff; font: 800 calc(32px * var(--rk-tall, 1)) var(--p-font-family-body); paint-order: stroke; stroke: rgba(0,0,0,.55); stroke-width: 5px; pointer-events: none; }
.rk-badge--big .rk-badge__n { font-size: calc(28px * var(--rk-tall, 1)); }
.rk-badge--huge .rk-badge__n { font-size: calc(22px * var(--rk-tall, 1)); }
.rk-badge__cap { fill: #ffd700; font-size: calc(34px * var(--rk-tall, 1)); paint-order: stroke; stroke: rgba(0,0,0,.7); stroke-width: 4px; pointer-events: none; }
.rk-arrow { pointer-events: none; }
.rk-arrow__case { fill: none; stroke: rgba(4, 8, 14, .7); stroke-width: 19; stroke-linecap: round; }
.rk-arrow__line { fill: none; stroke: var(--c, #fff); stroke-width: 11; stroke-linecap: round; }
.rk-arrow__head { fill: var(--c, #fff); stroke: rgba(4, 8, 14, .7); stroke-width: 4; stroke-linejoin: round; paint-order: stroke; transition: opacity .15s; }
.rk-ripple { fill: none; stroke-width: 9; pointer-events: none; transform-box: fill-box; transform-origin: center; animation: rk-ripple 1.1s ease-out forwards; }
@keyframes rk-ripple { 0% { transform: scale(.3); opacity: .95; } 100% { transform: scale(2.6); opacity: 0; } }
.rk-badge__ring { fill: none; stroke: rgba(255, 255, 255, .28); stroke-width: 1.5; pointer-events: none; }
.rk-badge__body { transform-box: fill-box; transform-origin: center; }
.rk-badge__body--pop { animation: rk-badge-pop .42s var(--p-motion-ease-bounce); }
@keyframes rk-badge-pop { 0% { transform: scale(1); } 35% { transform: scale(1.38); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .rk-badge__body--pop, .rk-ripple { animation: none; } .rk-ripple { opacity: 0; } }

/* ---------- map scenery ----------
   The board is drawn as a place: sea texture and other land under the
   territories, terrain (relief, rivers, roads, woods, landmarks) over their
   colours. Kinds come from the generated art (SCENERY) — tools/risk-maps/scenery.js.
   Everything is plain alpha, no filters or blend modes: phones re-raster the
   whole map on every pinch. */
.rk-map { --rk-ctx: #2b394a; --rk-ctx-edge: rgba(0, 0, 0, .4); --rk-ink: 14, 18, 26; --rk-paper: #f6eeda; overflow: visible; }
.rk-ocean-swell, .rk-shelf, .rk-relief, .rk-rim, .rk-scenery, .rk-veil { pointer-events: none; }
.rk-swell { fill: none; stroke: rgba(205, 236, 255, .085); stroke-width: 2.5; stroke-linecap: round; }
.rk-shelf { fill: none; stroke-linejoin: bevel; stroke: rgba(150, 216, 255, .1); stroke-width: 70; }
.rk-shelf--near { stroke: rgba(170, 226, 255, .2); stroke-width: 22; }
.rk-relief { opacity: .34; }
.rk-rim { fill: none; stroke: rgba(4, 8, 16, .15); stroke-width: 20; stroke-linejoin: bevel; stroke-linecap: butt; }
.rk-veil__cell--fog { opacity: .94; }
.rk-veil__cell--ice { opacity: .82; }
.rk-map.has-highlight .rk-scenery--over, .rk-map.has-highlight .rk-relief { opacity: .4; }
.rk-map--continents .rk-scenery--over { opacity: .55; }
.rk-sc { fill: none; stroke: none; stroke-linejoin: round; stroke-linecap: round; }
.rk-map--hyrule { --rk-ctx: #3c4638; }
.rk-map--los-santos { --rk-ctx: #4a4b3c; }
.rk-map--barcelona { --rk-ctx: #3a4650; }
.rk-map--fantasy { --rk-ctx: #2f3a36; }
/* under the territories */
.rk-sc--shelf { stroke: rgba(150, 216, 255, .1); stroke-width: 70; stroke-linejoin: bevel; }
.rk-sc--ctx { fill: var(--rk-ctx); stroke: var(--rk-ctx-edge); stroke-width: 2.5; }
.rk-sc--pier { stroke: color-mix(in srgb, var(--rk-ctx) 80%, #fff); stroke-width: 5; stroke-linecap: butt; }
.rk-sc--lake { fill: var(--rk-water-deep); stroke: rgba(0, 0, 0, .3); stroke-width: 1.5; }
.rk-sc--ctx-river { stroke: var(--rk-water); stroke-width: 11; }
.rk-sc--ctx-shade { fill: rgba(0, 0, 0, .22); }
.rk-sc--ctx-lite { fill: rgba(255, 255, 255, .07); }
.rk-sc--ctx-wood { fill: rgba(8, 26, 16, .32); }
.rk-sc--ctx-line { stroke: rgba(255, 255, 255, .13); stroke-width: 2; }
.rk-sc--ctx-road { stroke: rgba(255, 255, 255, .1); stroke-width: 3; }
.rk-sc--grid { stroke: rgba(210, 235, 255, .075); stroke-width: 1.6; }
.rk-sc--depth { stroke: rgba(160, 220, 255, .1); stroke-width: 2; }
.rk-sc--wave { stroke: rgba(205, 236, 255, .22); stroke-width: 2.4; }
.rk-sc--ship { fill: rgba(235, 244, 255, .5); stroke: rgba(6, 12, 22, .5); stroke-width: 1.6; }
.rk-sc--rose-ring { stroke: rgba(224, 180, 85, .3); stroke-width: 2; }
.rk-sc--rose-dark { fill: rgba(10, 16, 26, .55); stroke: rgba(224, 180, 85, .45); stroke-width: 1.4; }
.rk-sc--rose-lite { fill: rgba(243, 210, 122, .6); stroke: rgba(224, 180, 85, .45); stroke-width: 1.4; }
text.rk-sc--rose { fill: rgba(243, 210, 122, .65); font: 800 40px var(--rk-font-epic); }
text.rk-sc--sea { fill: rgba(196, 228, 255, .42); font: italic 600 46px var(--rk-font-epic); letter-spacing: .32em; }
text.rk-sc--ctx-name { fill: rgba(232, 240, 250, .3); font: 700 30px var(--p-font-family-body); letter-spacing: .2em; }
text.rk-sc--credit { fill: rgba(232, 240, 250, .34); font: 500 17px var(--p-font-family-body); text-anchor: end; }
text.rk-sc--title { fill: rgba(243, 210, 122, .5); font: 800 64px var(--rk-font-epic); letter-spacing: .22em; }
/* over the armies' colours */
.rk-sc--tint-snow { fill: rgba(255, 255, 255, .1); }
.rk-sc--tint-sand { fill: rgba(255, 226, 150, .09); }
.rk-sc--tint-wood { fill: rgba(6, 44, 22, .1); }
.rk-sc--tint-rock { fill: rgba(40, 30, 24, .08); }
.rk-sc--tint-lava { fill: rgba(120, 22, 6, .12); }
.rk-sc--tint-park { fill: rgba(20, 70, 32, .26); }
.rk-sc--tint-urban { fill: rgba(16, 18, 26, .1); }
.rk-sc--tint-dark { fill: rgba(4, 8, 16, .16); }
.rk-sc--tint-lite { fill: rgba(255, 255, 255, .1); }
.rk-sc--street { stroke: rgba(255, 255, 255, .27); stroke-width: 1.6; stroke-linecap: butt; }
.rk-sc--water { fill: color-mix(in srgb, var(--rk-water) 62%, #a8e4ff); stroke: rgba(4, 14, 26, .6); stroke-width: 2.6; }
.rk-sc--river-bank { stroke: rgba(4, 14, 26, .45); stroke-width: 10; }
.rk-sc--river { stroke: color-mix(in srgb, var(--rk-water) 55%, #b4e9ff); stroke-width: 6; }
.rk-sc--rail { stroke: rgba(var(--rk-ink), .4); stroke-width: 2; stroke-dasharray: 9 6; stroke-linecap: butt; }
.rk-sc--road-case { stroke: rgba(var(--rk-ink), .5); stroke-width: 10; }
.rk-sc--road { stroke: rgba(255, 244, 214, .86); stroke-width: 5.4; }
.rk-sc--avenue { stroke: rgba(255, 246, 220, .5); stroke-width: 2.4; }
.rk-sc--beach { fill: #ecdca6; stroke: rgba(var(--rk-ink), .4); stroke-width: 1.4; }
.rk-sc--bridge { stroke: rgba(255, 246, 220, .85); stroke-width: 5; stroke-linecap: butt; }
.rk-sc--sand { stroke: rgba(255, 238, 180, .5); stroke-width: 2.4; }
.rk-sc--hatch { stroke: rgba(var(--rk-ink), .3); stroke-width: 1.5; }
.rk-sc--lite { fill: rgba(255, 255, 255, .24); }
.rk-sc--shade { fill: rgba(6, 10, 18, .32); }
.rk-sc--snow { fill: rgba(255, 255, 255, .92); }
.rk-sc--lava { fill: #ff9a3d; }
.rk-sc--wood { fill: rgba(10, 46, 26, .5); stroke: rgba(6, 26, 14, .35); stroke-width: 1; }
.rk-sc--wood-line { stroke: rgba(8, 40, 22, .72); stroke-width: 2.6; }
.rk-sc--ink { stroke: rgba(var(--rk-ink), .62); stroke-width: 2.2; }
.rk-sc--ink-thin { stroke: rgba(var(--rk-ink), .5); stroke-width: 1.5; }
.rk-sc--icon { fill: var(--rk-paper); stroke: #17120d; stroke-width: 2.2; }
.rk-sc--icon-dark { fill: #17120d; }
.rk-sc--icon-red { fill: #c9463d; stroke: #17120d; stroke-width: 2; }
.rk-sc--icon-gold { fill: #e8b94a; stroke: #17120d; stroke-width: 2; }
.rk-sc--icon-blue { fill: #5aa7d6; stroke: #17120d; stroke-width: 2; }
.rk-sc--icon-green { fill: #5d9a54; stroke: #17120d; stroke-width: 2; }
.rk-sc--icon-glass { fill: #bfe3f2; stroke: #17120d; stroke-width: 2; }
text.rk-sc--sign { fill: #fffaf0; font: 900 34px var(--p-font-family-body); letter-spacing: .12em; paint-order: stroke; stroke: #17120d; stroke-width: 6px; stroke-linejoin: round; }
text.rk-sc--place { fill: rgba(255, 255, 255, .7); font: italic 600 21px var(--p-font-family-body); paint-order: stroke; stroke: rgba(3, 6, 12, .55); stroke-width: 4px; }

/* ---------- landing ---------- */
.rk-landing__main { max-width: 980px; margin: 0 auto; padding: var(--p-space-600) var(--p-space-500) var(--p-space-1200); display: flex; flex-direction: column; gap: var(--p-space-800); }
.rk-hero { text-align: center; position: relative; padding-top: var(--p-space-800); }
.rk-hero__globe { width: 180px; height: 180px; margin: 0 auto var(--p-space-400); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #4fb87d 0 18%, transparent 19%), radial-gradient(circle at 62% 55%, #e0a83f 0 14%, transparent 15%), radial-gradient(circle at 45% 70%, #cf7a3c 0 12%, transparent 13%), radial-gradient(circle at 30% 30%, #2b6fb5, #0d2544 70%); box-shadow: 0 0 60px rgba(91,140,240,.35), inset -20px -20px 40px rgba(0,0,0,.5); animation: rk-spin 24s linear infinite; }
@keyframes rk-spin { to { filter: hue-rotate(360deg); } }
.rk-hero__kicker { color: var(--p-color-text-secondary); letter-spacing: .3em; text-transform: uppercase; font-size: var(--p-font-size-body-sm); margin: 0; }
.rk-hero__title { font-family: var(--rk-font-epic); font-weight: 800; font-size: clamp(4rem, 14vw, 8rem); letter-spacing: .12em; line-height: 1; margin: var(--p-space-200) 0; background: linear-gradient(180deg, #fff3c4, var(--rk-brass) 60%, #9a6f1f); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 24px rgba(224,180,85,.35)); }
.rk-hero__sub { max-width: 560px; margin: 0 auto; color: var(--p-color-text-secondary); font-size: var(--p-font-size-body-lg); }
.rk-landing__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--p-space-400); }
.rk-tile { display: flex; flex-direction: column; gap: var(--p-space-300); padding: var(--p-space-500); background: var(--p-color-bg-surface); border: 1px solid var(--p-color-border); border-radius: var(--p-border-radius-400); color: var(--p-color-text); text-decoration: none; transition: transform var(--p-motion-duration-150) var(--p-motion-ease), border-color var(--p-motion-duration-150); }
.rk-tile:hover { transform: translateY(-2px); border-color: var(--rk-brass); }
.rk-tile--primary { background: linear-gradient(160deg, rgba(224,180,85,.18), rgba(224,180,85,.04)), var(--p-color-bg-surface); border-color: rgba(224,180,85,.5); }
.rk-tile__icon { font-size: 2.2rem; }
.rk-tile strong { font-size: var(--p-font-size-heading-md); }
.rk-tile span:not(.rk-tile__icon) { color: var(--p-color-text-secondary); font-size: var(--p-font-size-body-sm); }
.rk-rules__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--p-space-400); }
.rk-rules p { margin: 0; color: var(--p-color-text-secondary); font-size: var(--p-font-size-body-sm); line-height: 1.5; }
.rk-landing__footer a { color: var(--p-color-text-secondary); }

/* ---------- phone ---------- */
body.rk-play { height: 100dvh; overflow: hidden; overscroll-behavior: none; }
.rk-play .rk-header { display: flex; align-items: center; gap: var(--p-space-300); padding: var(--p-space-200) var(--p-space-300); padding-top: max(var(--p-space-200), env(safe-area-inset-top)); border-bottom: 1px solid var(--p-color-border-secondary); min-height: 56px; background: rgba(5, 9, 15, .6); backdrop-filter: blur(6px); }
.rk-play .rk-header .rk-brand { margin-right: auto; }
.rk-stage { height: calc(100dvh - 56px - env(safe-area-inset-top)); display: flex; flex-direction: column; overflow: hidden; position: relative; }
.rk-join, .rk-lobby { padding: var(--p-space-500); display: flex; flex-direction: column; gap: var(--p-space-400); overflow-y: auto; max-width: 560px; width: 100%; margin: 0 auto; padding-bottom: calc(var(--p-space-800) + env(safe-area-inset-bottom)); }
.rk-join__title { font-family: var(--rk-font-epic); color: var(--rk-brass-2); font-size: var(--p-font-size-heading-2xl); letter-spacing: .06em; }
.rk-join__row { display: flex; gap: var(--p-space-300); align-items: flex-end; }
.rk-join__row .rk-input--code { max-width: none; width: 100%; }
.rk-card-code { text-align: center; }
.rk-code { font-family: var(--p-font-family-display); font-size: 3rem; letter-spacing: .25em; color: var(--rk-brass-2); margin-left: .25em; text-shadow: 0 4px 24px rgba(224,180,85,.35); }
.rk-qr { width: 200px; max-width: 100%; margin: var(--p-space-300) auto 0; display: block; background: #fff; border-radius: var(--p-border-radius-200); padding: 6px; }
.rk-swatches { display: flex; flex-wrap: wrap; gap: var(--p-space-200); }
.rk-swatch { width: 44px; height: 44px; border-radius: 50%; background: var(--c); border: 3px solid transparent; color: #fff; font-weight: 900; font-size: 1.2rem; text-shadow: 0 1px 2px rgba(0,0,0,.6); box-shadow: inset 0 -4px 8px rgba(0,0,0,.25); }
.rk-swatch[aria-checked="true"] { border-color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 60%, transparent); }
.rk-swatch:disabled { opacity: .25; cursor: not-allowed; }
.rk-crests { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--p-space-200); }
.rk-crest { min-height: 52px; border-radius: var(--p-border-radius-200); background: var(--p-color-bg-surface-secondary); border: 2px solid transparent; display: flex; align-items: center; justify-content: center; }
.rk-crest[aria-checked="true"] { border-color: var(--rk-brass); background: rgba(224,180,85,.15); }
.rk-crest:disabled { opacity: .25; }
.rk-lobby-players { display: flex; flex-direction: column; gap: var(--p-space-200); margin-bottom: var(--p-space-300); }
.rk-lobby-player { display: flex; align-items: center; gap: var(--p-space-300); padding: var(--p-space-200) var(--p-space-300); border-radius: var(--p-border-radius-200); background: color-mix(in srgb, var(--c) 14%, var(--p-color-bg-surface-secondary)); border-left: 5px solid var(--c); }
.rk-lobby-player__name { font-weight: var(--p-font-weight-bold); display: flex; gap: var(--p-space-200); align-items: center; flex-wrap: wrap; }
.rk-settings { display: flex; flex-direction: column; gap: var(--p-space-300); }
.rk-setting { display: grid; grid-template-columns: 1fr; gap: 4px; }
.rk-setting > span { font-size: var(--p-font-size-body-sm); color: var(--p-color-text-secondary); font-weight: var(--p-font-weight-semibold); }
.rk-select { min-height: 44px; }
.rk-toggle { display: flex; align-items: center; gap: var(--p-space-300); min-height: 44px; }
.rk-toggle input { width: 22px; height: 22px; accent-color: var(--rk-brass); }

.rk-pausebar { background: rgba(255,202,58,.15); color: var(--p-color-text-warning); text-align: center; padding: var(--p-space-200); font-weight: var(--p-font-weight-bold); }
.rk-tabs { display: flex; border-bottom: 1px solid var(--p-color-border-secondary); background: rgba(5,9,15,.5); }
.rk-tab { flex: 1; min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: var(--p-font-weight-semibold); color: var(--p-color-text-secondary); border-bottom: 3px solid transparent; }
.rk-tab[aria-selected="true"] { color: var(--rk-brass-2); border-bottom-color: var(--rk-brass); }
.rk-tab__badge { background: var(--rk-brass); color: var(--rk-ink); border-radius: var(--p-border-radius-full); font-size: var(--p-font-size-body-xs); min-width: 1.4em; padding: 0 5px; line-height: 1.4em; text-align: center; font-weight: 800; }
.rk-pane { flex: 1; min-height: 0; overflow-y: auto; padding: var(--p-space-400); padding-bottom: calc(var(--p-space-800) + env(safe-area-inset-bottom)); }
.rk-pane--map { padding: 0; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.rk-mapwrap { flex: 1; min-height: 0; position: relative; overflow: hidden; background: var(--rk-sea); }
.rk-pane--map .rk-label { font-size: calc(30px * var(--rk-tall, 1)); }
.rk-sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; background: rgba(9, 13, 22, .93); backdrop-filter: blur(8px); border-top: 1px solid var(--p-color-border); border-radius: var(--p-border-radius-400) var(--p-border-radius-400) 0 0; padding: var(--p-space-400); padding-bottom: calc(var(--p-space-400) + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: var(--p-space-300); max-height: 58%; overflow-y: auto; box-shadow: 0 -8px 30px rgba(0,0,0,.5); }
.rk-sheet > div { display: flex; flex-direction: column; gap: var(--p-space-300); }
.rk-sheet__title { font-weight: var(--p-font-weight-bold); font-size: var(--p-font-size-heading-md); display: flex; align-items: center; gap: var(--p-space-200); flex-wrap: wrap; }
.rk-sheet__wait { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.rk-sheet__info .row { flex-wrap: wrap; }
.rk-sheet p { margin: 0; }
.rk-contag { font-size: var(--p-font-size-body-xs); padding: 1px 8px; border-radius: var(--p-border-radius-full); background: color-mix(in srgb, var(--c) 30%, transparent); border: 1px solid var(--c); font-weight: 600; }
.rk-step { display: grid; grid-template-columns: 1fr auto auto auto; gap: var(--p-space-200); align-items: center; }
.rk-step__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-step__n { min-width: 2.5em; text-align: center; color: var(--rk-brass-2); font-size: 1.1rem; }
.rk-slider { display: grid; grid-template-columns: 1fr auto; gap: var(--p-space-300); align-items: center; }
.rk-slider input { width: 100%; accent-color: var(--rk-brass); height: 44px; }
.rk-slider output { font-family: var(--p-font-family-display); font-size: 1.6rem; color: var(--rk-brass-2); min-width: 2em; text-align: center; }
.rk-dicebtns { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--p-space-200); }
.rk-dicebtn { gap: 6px; }
.rk-targets { display: flex; flex-wrap: wrap; gap: var(--p-space-200); }
.rk-battle { background: var(--p-color-bg-surface-secondary); border-radius: var(--p-border-radius-200); padding: var(--p-space-300); gap: var(--p-space-200) !important; }
.rk-battle__dice { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rk-vs { margin: 0 6px; color: var(--p-color-text-secondary); font-weight: 800; }
.rk-loss { color: var(--p-color-text-critical); font-weight: 700; }
.rk-gain { color: var(--p-color-text-success); font-weight: 700; }
.rk-die { display: inline-grid; grid-template-columns: repeat(3, 1fr); width: 34px; height: 34px; padding: 4px; gap: 2px; border-radius: 7px; background: #fff; box-shadow: inset 0 -3px 0 rgba(0,0,0,.2), 0 2px 4px rgba(0,0,0,.4); }
.rk-die i { border-radius: 50%; background: transparent; }
.rk-die i.on { background: #1b1d28; }
.rk-die--attack { background: #e5484d; }
.rk-die--attack i.on { background: #fff; }
.rk-die--defend { background: #e8eefc; }
.rk-die--lg { width: 64px; height: 64px; padding: 8px; gap: 4px; border-radius: 12px; }

.rk-turnpill { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; font-size: var(--p-font-size-body-sm); margin-left: auto; text-align: right; }
.rk-turnpill.is-mine strong { color: var(--rk-brass-2); animation: rk-blink 1.2s ease-in-out infinite alternate; }
@keyframes rk-blink { from { opacity: 1; } to { opacity: .55; } }
.rk-timer { font-variant-numeric: tabular-nums; color: var(--p-color-text-secondary); }
.rk-timer.is-hot { color: var(--p-color-text-critical); font-weight: 800; }
.rk-chip--me .rk-small { color: var(--p-color-text-secondary); font-weight: 500; }

.rk-hand { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--p-space-300); }
.rk-card { position: relative; aspect-ratio: 2 / 3; border-radius: 10px; padding: 0; background: linear-gradient(170deg, #f6efd9, #d9c99a); color: #2b2416; box-shadow: 0 4px 12px rgba(0,0,0,.45), inset 0 0 0 3px rgba(255,255,255,.4); border: 3px solid transparent; transition: transform .15s var(--p-motion-ease), border-color .15s; text-align: left; }
.rk-card:disabled { cursor: default; }
.rk-card.is-selected { border-color: var(--rk-brass); transform: translateY(-6px) scale(1.02); box-shadow: 0 10px 22px rgba(0,0,0,.5), 0 0 0 3px rgba(224,180,85,.35); }
.rk-card.is-owned::after { content: 'tuyo'; position: absolute; top: 6px; right: 6px; background: #2a9d8f; color: #fff; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 6px; }
.rk-card__face { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 8px; gap: 4px; }
.rk-card__top { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #5a4620; }
.rk-card__map { flex: 1; width: 100%; min-height: 0; }
.rk-card__map path { fill: #7b5b2b; stroke: #3e2c11; stroke-width: 6; stroke-linejoin: round; }
.rk-card__wild { flex: 1; display: flex; align-items: center; justify-content: center; color: #7b2b5b; }
.rk-card__name { font-family: var(--rk-font-epic); font-weight: 800; font-size: 12px; line-height: 1.1; text-align: center; color: #2b2416; }
.rk-card--sm { width: 64px; }
.rk-tradebar { display: flex; align-items: center; justify-content: space-between; gap: var(--p-space-300); margin-top: var(--p-space-400); position: sticky; bottom: 0; background: var(--rk-sea); padding: var(--p-space-300) 0; }
.rk-pane__head { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--p-space-300); }

.rk-player { border-radius: var(--p-border-radius-300); padding: var(--p-space-300); margin-bottom: var(--p-space-300); background: color-mix(in srgb, var(--c) 12%, var(--p-color-bg-surface)); border-left: 5px solid var(--c); }
.rk-player.is-current { box-shadow: 0 0 0 2px var(--rk-brass); }
.rk-player.is-dead { opacity: .5; }
.rk-player__head { display: flex; align-items: center; gap: var(--p-space-300); }
.rk-player__name { font-weight: var(--p-font-weight-bold); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.rk-player__actions { display: flex; flex-wrap: wrap; gap: var(--p-space-200); margin-top: var(--p-space-300); align-items: center; }
.rk-req summary { list-style: none; }
.rk-req__list { display: flex; flex-wrap: wrap; gap: var(--p-space-200); padding-top: var(--p-space-200); }
.rk-msg { padding: var(--p-space-200) var(--p-space-300); border-radius: var(--p-border-radius-200); background: var(--p-color-bg-surface-secondary); margin-bottom: var(--p-space-200); font-size: var(--p-font-size-body-sm); }
.rk-log { margin: 0; padding-left: 1.4em; font-size: var(--p-font-size-body-sm); line-height: 1.5; color: var(--p-color-text-secondary); }
.rk-log li { margin-bottom: 4px; }

.rk-overlay { position: absolute; inset: 0; z-index: 30; background: rgba(5, 9, 15, .92); display: flex; align-items: center; justify-content: center; padding: var(--p-space-500); overflow-y: auto; }
.rk-final { display: flex; flex-direction: column; gap: var(--p-space-400); width: 100%; max-width: 420px; text-align: center; }
.rk-final__title { font-size: var(--p-font-size-heading-xl); color: var(--rk-brass-2); }
.rk-final__rank { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--p-space-200); text-align: left; }
.rk-final__rank li { display: flex; align-items: center; gap: var(--p-space-300); padding: var(--p-space-200) var(--p-space-300); border-radius: var(--p-border-radius-200); background: color-mix(in srgb, var(--c) 18%, var(--p-color-bg-surface)); border-left: 5px solid var(--c); }
.rk-final__pos { font-family: var(--p-font-family-display); color: var(--rk-brass-2); min-width: 2em; }

body.is-paused .rk-sheet { opacity: .6; }

/* ---------- big screen ---------- */
body.rk-screen { height: 100%; overflow: hidden; }
.rks-stage { position: fixed; inset: 0; display: flex; flex-direction: column; }
.rks-splash { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--p-space-500); background: var(--rk-sea); text-align: center; padding: var(--p-space-600); }
.rks-splash h1 { font-family: var(--rk-font-epic); font-weight: 800; font-size: clamp(3rem, 9vw, 7rem); letter-spacing: .14em; background: linear-gradient(180deg, #fff3c4, var(--rk-brass) 60%, #9a6f1f); -webkit-background-clip: text; background-clip: text; color: transparent; }
#splashBody { display: flex; flex-direction: column; align-items: center; gap: var(--p-space-300); }
#splashBody p { margin: 0; }
.rks-codeform { display: flex; flex-direction: column; gap: var(--p-space-400); align-items: center; }
.rks-codeform .rk-input--code { font-size: 2.6rem; max-width: 14rem; }
.rks-codeform .rk-roomlist { width: min(520px, 90vw); }
.rks-lobby { flex: 1; display: grid; grid-template-columns: 1fr 1.1fr; gap: 4vw; padding: 5vh 5vw; align-items: center; }
.rks-lobby__left { display: flex; flex-direction: column; gap: 2.5vh; }
.rks-lobby__title { font-family: var(--rk-font-epic); font-weight: 800; font-size: clamp(3rem, 8vw, 7rem); letter-spacing: .12em; line-height: 1; background: linear-gradient(180deg, #fff3c4, var(--rk-brass) 60%, #9a6f1f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rks-lobby__code { font-family: var(--p-font-family-display); font-size: clamp(2.5rem, 7vw, 6rem); letter-spacing: .2em; color: #fff; }
.rks-lobby__qr { display: flex; align-items: center; gap: 2vw; background: var(--p-color-bg-surface); border: 1px solid var(--p-color-border); border-radius: var(--p-border-radius-400); padding: 2.5vh 2vw; }
.rks-lobby__qr img { width: clamp(160px, 20vw, 320px); border-radius: var(--p-border-radius-200); background: #fff; padding: 8px; }
.rks-lobby__url { color: var(--rk-brass-2); font-size: clamp(1rem, 1.8vw, 1.6rem); overflow-wrap: anywhere; }
.rks-lobby__right { display: flex; flex-direction: column; gap: 2vh; min-width: 0; }
.rks-lobby__players { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6vh 1vw; align-content: center; }
.rks-lobby__mapname { font-size: clamp(1rem, 1.6vw, 1.5rem); }
.rks-lobby__map { max-height: 44vh; aspect-ratio: auto; height: 40vh; }
.rks-lobby__map .rk-map { height: 100%; }
.rks-lobby__map .rk-clabel { display: block; font-size: 48px; opacity: .95; }
.rks-seat { display: flex; align-items: center; gap: 1vw; padding: 1.2vh 1.2vw; min-height: 8.5vh; border-radius: var(--p-border-radius-300); background: color-mix(in srgb, var(--c) 20%, var(--p-color-bg-surface)); border-left: 8px solid var(--c); font-size: clamp(1rem, 1.8vw, 1.6rem); font-weight: 700; animation: pop-in .35s var(--p-motion-ease-bounce); }
.rks-seat--empty { border-left-color: var(--p-color-border); color: var(--p-color-text-disabled); font-weight: 500; }
.rks-seat .rk-small { display: block; font-weight: 500; color: var(--p-color-text-secondary); }
.rks-lobby__rules { color: var(--p-color-text-secondary); font-size: clamp(.9rem, 1.4vw, 1.3rem); }

.rks-game { flex: 1; display: grid; grid-template-rows: auto 1fr; grid-template-columns: 1fr clamp(240px, 19vw, 360px); grid-template-areas: 'top side' 'board side'; min-height: 0; }
.rks-top { grid-area: top; display: flex; align-items: center; gap: 1.4vw; padding: 1.2vh 1.6vw; background: rgba(5, 9, 15, .55); border-bottom: 1px solid var(--p-color-border-secondary); min-height: 8vh; }
.rks-top__logo { font-family: var(--rk-font-epic); font-weight: 800; font-size: clamp(1.4rem, 2.4vw, 2.2rem); letter-spacing: .14em; color: var(--rk-brass-2); }
.rks-top__round { color: var(--p-color-text-secondary); font-size: clamp(.9rem, 1.4vw, 1.3rem); }
.rks-top__current { display: flex; align-items: center; gap: .8vw; margin-left: auto; font-size: clamp(1.1rem, 2vw, 1.9rem); font-weight: 800; padding: .6vh 1.2vw .6vh .6vw; border-radius: var(--p-border-radius-full); background: color-mix(in srgb, var(--c) 30%, var(--p-color-bg-surface)); border: 2px solid var(--c); }
.rks-top__phase { font-size: clamp(.8rem, 1.3vw, 1.2rem); color: var(--p-color-text-secondary); font-weight: 600; }
.rks-top__timer { font-family: var(--p-font-family-display); font-size: clamp(1.2rem, 2.2vw, 2rem); color: var(--p-color-text-secondary); min-width: 3em; text-align: right; }
.rks-top__timer.is-hot { color: var(--p-color-text-critical); }
.rks-board { grid-area: board; position: relative; min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.rks-mapwrap { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.rks-mapwrap .rk-map { position: absolute; inset: 0; }
.rks-troops { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rks-ticker { height: 6.5vh; display: flex; align-items: center; gap: 2vw; padding: 0 1.6vw; background: rgba(5, 9, 15, .55); border-top: 1px solid var(--p-color-border-secondary); overflow: hidden; font-size: clamp(.9rem, 1.5vw, 1.35rem); }
.rks-ticker__item { white-space: nowrap; color: var(--p-color-text-secondary); }
.rks-ticker__item:first-child { animation: rk-ticker-in .4s var(--p-motion-ease); }
.rks-ticker__item:first-child { color: var(--p-color-text); font-weight: 600; }
@keyframes rk-ticker-in { from { opacity: 0; transform: translateX(20px); } }
.rks-side { grid-area: side; display: flex; flex-direction: column; gap: 1.2vh; padding: 1.4vh 1vw; background: rgba(5, 9, 15, .55); border-left: 1px solid var(--p-color-border-secondary); overflow: hidden; }
.rks-side__title { font-family: var(--rk-font-epic); font-weight: 800; color: var(--rk-brass-2); letter-spacing: .08em; font-size: clamp(.9rem, 1.4vw, 1.3rem); }
.rks-pl { display: grid; grid-template-columns: auto 1fr; gap: .2vh .8vw; align-items: center; padding: 1vh .9vw; border-radius: var(--p-border-radius-300); background: color-mix(in srgb, var(--c) 14%, var(--p-color-bg-surface)); border-left: 6px solid var(--c); transition: transform .3s var(--p-motion-ease), box-shadow .3s; }
.rks-pl.is-current { box-shadow: 0 0 0 2px var(--rk-brass), 0 0 24px rgba(224,180,85,.3); transform: translateX(4px); }
.rks-pl.is-dead { opacity: .4; filter: grayscale(.8); }
.rks-pl__name { font-weight: 800; font-size: clamp(.95rem, 1.5vw, 1.4rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rks-pl__stats { grid-column: 2; display: flex; gap: 1vw; font-size: clamp(.75rem, 1.15vw, 1.05rem); color: var(--p-color-text-secondary); font-variant-numeric: tabular-nums; }
.rks-pl__stats b { color: var(--p-color-text); }
.rks-pl__stats { flex-wrap: wrap; row-gap: 0; }
.rks-pl__stats span { white-space: nowrap; }
.rks-side__foot { margin-top: auto; display: flex; align-items: center; gap: .8vw; font-size: clamp(.7rem, 1.1vw, 1rem); color: var(--p-color-text-secondary); }
.rks-side__foot img { width: clamp(56px, 5vw, 90px); background: #fff; border-radius: 6px; padding: 3px; }
.rks-side__code { font-family: var(--p-font-family-display); color: var(--rk-brass-2); font-size: clamp(1rem, 1.8vw, 1.7rem); letter-spacing: .15em; }

/* The dice tray: compact, and docked on the half of the board where the fight is not. */
.rks-battle { position: absolute; left: 50%; bottom: 8vh; transform: translateX(-50%); z-index: 20; width: min(36vw, 600px); border-radius: var(--p-border-radius-400); background: rgba(8, 12, 21, .97); border: 2px solid rgba(224,180,85,.45); box-shadow: var(--p-shadow-300), 0 0 40px rgba(224,180,85,.15); display: grid; grid-template-rows: auto 14vh auto; animation: rk-battle-in .3s var(--p-motion-ease-bounce); overflow: hidden; }
.rks-battle--top { bottom: auto; top: 1.4vh; }
.rks-battle[hidden] { display: none; }
@keyframes rk-battle-in { from { transform: translate(-50%, 30px) scale(.9); opacity: 0; } }
.rks-battle__head { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1vw; padding: .9vh 1.2vw .4vh; font-size: clamp(.95rem, 1.5vw, 1.4rem); font-weight: 800; }
.rks-battle__head .rk-chip { font-size: clamp(.8rem, 1.25vw, 1.2rem); }
.rks-battle__side { min-width: 0; }
.rks-battle__side--def { text-align: right; }
.rks-battle__mid { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.rks-battle__vs { font-family: var(--rk-font-epic); color: var(--rk-brass-2); letter-spacing: .1em; }
.rks-battle__tag { font-family: var(--rk-font-epic); letter-spacing: .14em; color: #ff8b8b; font-size: clamp(.6rem, .85vw, .85rem); white-space: nowrap; }
.rks-battle__dice { position: relative; }
.rks-battle__dice canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.rks-battle__result { display: flex; justify-content: center; gap: 1.6vw; padding: .4vh 1.2vw 1.1vh; font-size: clamp(.95rem, 1.5vw, 1.45rem); font-weight: 800; min-height: 4.4vh; align-items: center; }
.rks-battle__result .rk-loss { color: #ff7b7b; }
.rks-battle__result .rk-gain { color: #8ef0a8; }
.rks-battle__result .rk-conq { color: var(--rk-brass-2); animation: rk-blink .5s ease-in-out 3 alternate; }
.rks-battle__odds { font-size: clamp(.8rem, 1.2vw, 1.15rem); font-weight: 600; color: var(--p-color-text-secondary); white-space: nowrap; }
.rks-battle__odds b { color: var(--rk-brass-2); font-family: var(--p-font-family-display); font-size: 1.25em; }

/* Everyday news is a ribbon at the top edge; only the big moments take the middle of the board. */
.rks-banner { position: absolute; left: 50%; top: 1.4vh; transform: translateX(-50%); z-index: 25; pointer-events: none; text-align: center; padding: .9vh 2.2vw; border-radius: var(--p-border-radius-full); background: rgba(6, 10, 18, .88); border: 2px solid var(--c, var(--rk-brass)); box-shadow: 0 0 28px color-mix(in srgb, var(--c, var(--rk-brass)) 40%, transparent); font-family: var(--rk-font-epic); font-weight: 800; font-size: clamp(1.05rem, 1.9vw, 1.9rem); letter-spacing: .05em; color: #fff; animation: rk-banner 2.6s var(--p-motion-ease) forwards; max-width: 80%; white-space: nowrap; }
.rks-banner small { display: inline; font-family: var(--p-font-family-body); font-weight: 600; font-size: .68em; color: var(--p-color-text-secondary); letter-spacing: 0; margin-left: 1.1em; }
.rks-banner--big { border-radius: var(--p-border-radius-400); padding: 1.8vh 3vw; white-space: normal; }
.rks-banner--big small { display: block; margin: .4vh 0 0; font-size: clamp(.9rem, 1.5vw, 1.4rem); }
@keyframes rk-banner { 0% { opacity: 0; transform: translate(-50%, -20px) scale(.9); } 12% { opacity: 1; transform: translate(-50%, 0) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -10px); } }
.rks-banner--big { font-size: clamp(2rem, 4.5vw, 4.5rem); top: 30%; animation-duration: 4s; }

.rks-final { position: absolute; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vh; padding: 3vh 4vw; overflow: hidden; background: radial-gradient(circle at 50% 30%, rgba(224,180,85,.25), rgba(5,9,15,.94) 60%); text-align: center; animation: rk-final-in 1s var(--p-motion-ease); }
@keyframes rk-final-in { from { opacity: 0; } }
.rks-final__title { font-family: var(--rk-font-epic); font-weight: 800; font-size: clamp(1.4rem, 3.2vw, 3.4rem); letter-spacing: .16em; text-transform: uppercase; background: linear-gradient(180deg, #fff3c4, var(--rk-brass) 60%, #9a6f1f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rks-final__winner { display: flex; flex-direction: column; align-items: center; gap: .6vh; font-size: clamp(1.4rem, 3vw, 3rem); font-weight: 800; }
.rks-final__rank { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .8vh; width: min(560px, 70vw); text-align: left; }
.rks-final__rank li { display: flex; align-items: center; gap: 1vw; padding: .7vh 1.4vw; border-radius: var(--p-border-radius-300); background: color-mix(in srgb, var(--c) 20%, var(--p-color-bg-surface)); border-left: 8px solid var(--c); font-size: clamp(.9rem, 1.5vw, 1.4rem); font-weight: 700; animation: pop-in .4s var(--p-motion-ease-bounce) backwards; }
.rks-final > p { margin: 0; font-size: clamp(.8rem, 1.2vw, 1.1rem); }
.rks-final__rank .rk-final__pos { font-family: var(--p-font-family-display); color: var(--rk-brass-2); min-width: 2em; }
.rks-final canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rks-pause { position: absolute; top: 10vh; right: 1.5vw; z-index: 40; padding: 1vh 1.5vw; border-radius: var(--p-border-radius-full); background: rgba(12,14,24,.86); border: 2px solid var(--p-color-bg-fill-warning); color: var(--p-color-text-warning); font-family: var(--p-font-family-display); font-size: clamp(1rem, 1.9vw, 1.7rem); }
.rks-fog { position: absolute; left: 1vw; bottom: 8vh; z-index: 10; padding: .6vh 1vw; border-radius: var(--p-border-radius-full); background: rgba(12,14,24,.7); border: 1px solid var(--p-color-border); color: var(--p-color-text-secondary); font-size: clamp(.75rem, 1.2vw, 1.1rem); }
.rks-mapwrap .rk-label { font-size: calc(30px * var(--rk-tall, 1)); }
.rks-mapwrap .rk-badge { transform-box: fill-box; }

@media (max-aspect-ratio: 5/4) {
  .rks-game { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: 'top' 'board' 'side'; }
  .rks-side { flex-direction: row; flex-wrap: wrap; border-left: 0; border-top: 1px solid var(--p-color-border-secondary); }
  .rks-lobby { grid-template-columns: 1fr; }
}