@import url('/assets/site.css');
:root{color-scheme:dark;--bg:#101b21;--panel:#17262c;--line:#304047;--muted:#9bafb5;--accent:#e7b66b}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#eef2ed;font-family:system-ui,sans-serif}header{height:100px;padding:20px 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}a{color:inherit;text-decoration:none}.back{font-size:13px;color:var(--muted)}.wordmark{font-family:Georgia,serif;letter-spacing:.18em;font-weight:bold;font-size:36px}.wordmark span{display:block;font:9px system-ui;letter-spacing:.24em;color:var(--muted);margin-top:3px}#connection{font-size:12px;color:var(--muted)}main{max-width:1700px;padding:50px 5%;margin:auto}h1,h2,p{margin-top:0}h1{font-family:Georgia,serif;font-weight:normal;letter-spacing:-.035em}h2{font-size:23px;font-weight:500}.eyebrow{font-size:10px;letter-spacing:.2em;font-weight:600;color:var(--accent);margin-bottom:20px}.entrance{display:grid;grid-template-columns:1.2fr 1fr;gap:60px}.intro{padding-top:30px}.intro h1{font-size:clamp(48px,6vw,88px);line-height:1.06;margin-bottom:25px}.intro>p:not(.eyebrow){color:var(--muted);max-width:430px;font-size:17px;line-height:1.7}.intro-stats{display:flex;gap:36px;margin:36px 0;color:var(--muted);font-size:12px}.intro-stats b{display:block;font:28px Georgia;color:#f1e5ce;margin-bottom:8px}.intro .board-note{font-size:12px}.panel{background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:26px}.entry-panel{max-width:470px;padding:35px}.panel h2{margin-bottom:22px}label{display:block;font-size:12px;color:var(--muted);margin:18px 0 8px}input,select,button{font:inherit;border-radius:3px}input,select{width:100%;border:1px solid #43565e;color:#f4f4ed;background:#102027;padding:12px}input:focus,select:focus,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button{padding:11px 16px;border:1px solid #45565b;color:#e8eee9;background:#26383f;cursor:pointer;font-size:13px}button:hover{background:#354a53}button:disabled{opacity:.45;cursor:not-allowed}.primary{background:var(--accent);color:#1e292c;border-color:var(--accent);font-weight:600}.primary:hover{background:#f5c681}.entry-panel>.primary{width:100%;display:flex;justify-content:space-between;margin-top:20px}.subtle{background:transparent;border-color:transparent;color:var(--muted)}.divider{font-size:11px;text-align:center;color:var(--muted);margin:26px 0 10px}.input-row{display:flex;gap:8px}.input-row input{min-width:0}#code{text-transform:uppercase;letter-spacing:.2em}.public-rooms{grid-column:1/-1}.section-title,.session-bar{display:flex;align-items:center;justify-content:space-between;gap:20px}.section-title h2{margin:0}.room{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid var(--line);gap:15px}.room p{margin:0}.room small{color:var(--muted)}#rooms>p,.muted{color:var(--muted);font-size:13px;line-height:1.6}.session-bar{margin-bottom:30px}.session-bar h1{font-size:40px;margin-bottom:0}.session-bar .eyebrow{margin-bottom:8px}.session-tools{display:flex;gap:10px}.lobby-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.check-label{display:flex;align-items:center;gap:9px;font-size:12px}.check-label input{width:auto}.lobby-grid .primary{display:block;margin:25px 0 10px;width:100%}.player{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding:12px 0;font-size:13px}.player small{margin-left:auto;color:var(--muted)}.army-dot{width:10px;height:10px;border-radius:50%;background:var(--army);box-shadow:0 0 0 2px #ffffff18;flex-shrink:0}.player.eliminated{opacity:.45}.player.active{font-weight:700}.game-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px}.board-area{border:1px solid var(--line);border-radius:5px;align-self:start;background:#11212a;overflow:hidden;position:sticky;top:12px}.board-toolbar{display:flex;align-items:center;justify-content:space-between;padding:10px 18px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line);gap:10px}.board-toolbar>div{display:flex;align-items:center;gap:8px}.board-toolbar label{margin:0}#board{height:580px;max-height:70vh;touch-action:none;position:relative}#board canvas{display:block;width:100%;height:100%}.board-caption{padding:10px 18px;color:var(--muted);font-size:11px;border-top:1px solid var(--line)}#continent-legend{display:flex;flex-wrap:wrap;gap:14px;padding:12px 18px;color:var(--muted);font-size:10px}#continent-legend span{border-left:3px solid var(--continent);padding-left:7px}.game-sidebar{display:flex;flex-direction:column;gap:16px}.game-sidebar .panel{padding:20px}.game-sidebar h2{font:24px Georgia;margin-bottom:10px}.game-sidebar p{font-size:13px;line-height:1.6;color:#bfced0}.game-sidebar .eyebrow{font-size:10px;color:var(--accent);margin-bottom:10px}.game-sidebar .player{font-size:12px}.game-sidebar .player small{font-size:10px}#actions button{margin-top:12px}#actions .primary{width:100%}#actions h3{font:20px Georgia;margin:0 0 12px}#actions p{font-size:12px;color:var(--muted)}.card-option{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);color:#e5ece8;line-height:1.5}.card-option input{width:auto}.card-option small{display:block;color:var(--muted)}summary{cursor:pointer;font-size:13px;color:#d5e0df}.activity{margin-top:24px}#log{list-style:none;padding:0;max-height:260px;overflow:auto;margin-bottom:0}#log li{font-size:12px;padding:8px 0;border-bottom:1px solid var(--line);color:var(--muted)}.rules{margin-top:45px;background:transparent}.rules p{max-width:900px;font-size:13px;line-height:1.8;color:var(--muted);margin:20px 0 0}.results{margin-top:24px;border-color:var(--accent)}.results h2{font:36px Georgia}.results button{margin:0 10px 0 0}.dice{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;border-radius:4px;margin:4px 3px;font-weight:bold}.dice.red{background:#b2534b}.dice.blue{background:#3774b2}#notice{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#e7b66b;color:#19272d;padding:15px 24px;border-radius:4px;z-index:30;max-width:90%;box-shadow:0 5px 20px #0007;font-size:13px}#mine button{display:block;margin-top:12px;width:100%}[hidden]{display:none!important}@media(min-width:1500px){#board{height:700px}}@media(max-width:1000px){.game-grid{grid-template-columns:1fr}.board-area{position:static}.game-sidebar{display:grid;grid-template-columns:1fr 1fr}#board{height:520px;max-height:65vh}.entrance{gap:28px}.entry-panel{padding:25px}}@media(max-width:650px){header{height:85px;padding:15px 5%}.wordmark{font-size:26px}.wordmark span{font-size:7px}#connection{max-width:80px;text-align:right;font-size:10px}main{padding-top:25px}.entrance,.lobby-grid{grid-template-columns:1fr;gap:24px}.intro{padding-top:5px}.intro h1{font-size:48px}.intro-stats{margin:24px 0}.entry-panel{max-width:none}.session-bar{align-items:start;flex-direction:column}.session-tools{width:100%}.game-sidebar{display:flex}#board{height:400px}.board-toolbar{padding:8px;gap:3px;font-size:10px}.board-toolbar .subtle{padding:7px}.board-caption{font-size:10px}.panel{padding:20px}.room{padding:15px 0}.session-bar h1{font-size:32px}}

/* The game fills the viewport; the lobby retains its page layout. */
.player.ai-controls { flex-wrap: wrap; }
.player.ai-controls small { display: none; }
.player.ai-controls > span:nth-child(2) { flex: 1; min-width: 60px; }
.player.ai-controls select { width: 130px; padding: 7px; font-size: 12px; }
.player.ai-controls button { padding: 7px; }
.keyboard-placement { margin-top: 12px; }
body.in-game { overflow: hidden; }
.in-game main { padding: 0; max-width: none; height: 100dvh; background: none; }
.in-game > header { position: fixed; top: 14px; right: 16px; height: 44px; padding: 0; gap: 18px; border: 0; z-index: 6; background: transparent; }
.in-game header .wordmark { display: none; }
.in-game .session-bar { position: fixed; left: 16px; top: 14px; right: 250px; margin: 0; z-index: 5; justify-content: flex-start; gap: 24px; }
.in-game .session-bar h1 { font: 23px Georgia,serif; }
.in-game .session-bar .eyebrow { margin: 0 0 3px; font-size: 9px; }
.in-game .session-tools { gap: 6px; }
.in-game .session-tools button { font-size: 11px; padding: 8px 10px; }
.in-game #game { position: fixed; inset: 0; display: block; }
.in-game .board-area { position: absolute; inset: 0; border: 0; border-radius: 0; overflow: hidden; }
.in-game #board { width: 100%; height: 100%; max-height: none; }
.in-game .board-toolbar { position: fixed; bottom: 16px; right: 16px; z-index: 4; border: 1px solid var(--line); background: #17262cea; border-radius: 5px; padding: 6px; }
.in-game #board-name, .in-game .board-caption { display: none; }
.in-game #continent-legend { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 610px); justify-content: center; gap: 8px 14px; padding: 8px; z-index: 3; background: #101b21ba; border-radius: 4px; }
.in-game .turn-panel { position: fixed; left: 16px; top: 86px; width: 220px; z-index: 4; padding: 18px; background: #17262cea; max-height: calc(100dvh - 270px); overflow-y: auto; }
.in-game .turn-panel h2 { font: 23px Georgia,serif; margin: 0 0 10px; }
.in-game .turn-panel > p { font-size: 12px; margin-bottom: 10px; }
.in-game .turn-panel .eyebrow { font-size: 9px; }
.in-game .turn-panel .player { flex-wrap: wrap; font-size: 12px; gap: 6px; padding: 9px 0; }
.in-game .turn-panel .player small { flex-basis: 100%; margin-left: 16px; font-size: 10px; }
.in-game .game-sidebar { position: fixed; top: 86px; right: 16px; width: 280px; max-height: calc(100dvh - 180px); overflow-y: auto; display: flex; gap: 10px; z-index: 4; pointer-events: none; padding-bottom: 8px; }
.in-game .game-sidebar .panel { background: #17262cf0; padding: 16px; pointer-events: auto; }
.in-game .game-sidebar p { font-size: 12px; }
.in-game .game-sidebar h3 { font-size: 21px; }
.in-game .activity { position: fixed; right: 16px; bottom: 76px; width: 280px; max-height: calc(100dvh - 180px); overflow-y: auto; margin: 0; padding: 12px 16px; background: #17262cf5; z-index: 5; }
.in-game .rules { position: fixed; bottom: 120px; left: 16px; max-width: 300px; max-height: calc(100dvh - 220px); overflow-y: auto; padding: 12px 16px; margin: 0; background: #17262cf5; z-index: 5; }
.in-game .results { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); width: min(480px,90vw); background: #17262c; z-index: 10; box-shadow: 0 10px 80px #000a; margin: 0; }
#troop-reserve { position: fixed; left: 16px; bottom: 16px; padding: 12px 16px; z-index: 5; background: #17262cf2; max-width: 240px; }
#troop-reserve .eyebrow { font-size: 9px; margin-bottom: 8px; }
#troop-reserve > p:last-child { font-size: 10px; color: var(--muted); margin: 8px 0 0; }
#reserve-count { font-size: 12px; margin-left: 12px; }
.army-token { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 2px solid #fff8; border-radius: 50%; background: var(--army); font: bold 24px system-ui; cursor: grab; touch-action: none; user-select: none; padding: 0; }
.army-token:hover { background: var(--army); }
.army-token:active { cursor: grabbing; }
#troop-ghost { position: fixed; transform: translate(-50%,-50%); pointer-events: none; z-index: 100; box-shadow: 0 5px 18px #0009; }
.in-game #notice { bottom: 126px; z-index: 20; }
@media(max-width:979px) {
 .in-game > header { top: 8px; right: 10px; gap: 12px; }
 .in-game .session-bar { left: 12px; top: 12px; right: 170px; gap: 10px; align-items: flex-start; }
 .in-game .session-bar h1 { font-size: 18px; }
 .in-game .session-tools { display: none; }
 .in-game .turn-panel { top: 66px; left: 12px; width: calc(100% - 24px); max-height: 40dvh; padding: 10px 14px; }
 .in-game .turn-panel h2 { font-size: 18px; margin-bottom: 3px; }
 .in-game .turn-panel > p { margin-bottom: 4px; }
 .in-game #player-roster { position: absolute; right: 14px; top: 12px; }
 .in-game #player-roster[open] { position: static; }
 .in-game #game-players { display: flex; flex-wrap: wrap; gap: 0 18px; }
 .in-game #game-players .player { flex: 1 1 150px; }
 .in-game .game-sidebar { top: auto; bottom: 82px; left: 12px; right: 12px; width: auto; max-height: 29dvh; padding: 0; gap: 8px; }
 .in-game .game-sidebar .panel { padding: 12px 14px; }
 .in-game .activity { bottom: 66px; right: 12px; width: 130px; padding: 8px 12px; }
 .in-game .activity[open] { width: calc(100% - 24px); max-height: 45dvh; bottom: 82px; }
 .in-game .rules { bottom: 66px; left: 12px; padding: 8px 12px; }
 .in-game .rules[open] { bottom: 82px; max-width: calc(100% - 24px); max-height: 45dvh; }
 .in-game .board-toolbar { bottom: 8px; right: 12px; padding: 3px; }
 .in-game .board-toolbar button { padding: 7px; font-size: 11px; }
 .in-game #continent-legend { display: none; }
 #troop-reserve { bottom: 8px; left: 12px; padding: 6px; max-width: 160px; }
 #troop-reserve .eyebrow, #troop-reserve > p:last-child { display: none; }
 #reserve-count { margin-left: 6px; font-size: 10px; display: inline-block; max-width: 60px; }
 .army-token { width: 40px; height: 40px; font-size: 22px; }
 .in-game #notice { bottom: 40dvh; }
}

.in-game .board-area { width:100%; height:100%; align-self:stretch; }
.in-game #board { position:absolute; inset:0; }
.troop-stepper { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 10px 0; }
.troop-stepper button { width: 44px; height: 44px; padding: 0; font-size: 24px; }
.troop-stepper output { min-width: 44px; text-align: center; font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
#dice-dock { position: fixed; right: 24px; bottom: 130px; width: 240px; height: 130px; pointer-events: none; z-index: 3; }
#dice-result { position: absolute; bottom: 0; width: 100%; text-align: center; color: #d7e7ec; font-size: 11px; text-shadow: 0 1px 4px #000,0 1px 8px #000; }
@media(max-width:979px) { #dice-dock { right: 14px; width: 170px; height: 110px; } .in-game .board-toolbar>div { gap: 3px; } }
body:not(.in-game) header { height: 64px; padding: 12px 5%; }
body:not(.in-game) .wordmark { font-size: 27px; }
.entrance { display: flex; flex-direction: column; align-items: center; gap: 32px; }
.entry-panel { width: min(470px,100%); }
.public-rooms { width: min(640px,100%); }
.in-game .board-area { background: #164a69; }
#rejoin-dialog { width: min(460px,calc(100vw - 32px)); border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: #eef2ed; padding: 26px; }
#rejoin-dialog::backdrop { background: #051b2bcc; }
#rejoin-dialog h2 { font: 25px Georgia,serif; }
#rejoin-dialog p { font-size: 13px; line-height: 1.6; }
#rejoin-dialog > div { display: flex; gap: 12px; flex-wrap: wrap; }
@media(max-width:979px) {
 .in-game .session-tools { display: flex; position: fixed; right: 12px; top: 36px; width: auto; }
 .in-game .session-tools #copy { display: none; }
 .in-game .session-tools #leave { padding: 4px 8px; font-size: 10px; background: #173e50; }
}