:root{color-scheme:dark;--bg:#111b17;--panel:#19251f;--edge:#314137;--muted:#98a89c;--cream:#e9e4cd;--ivory:#f4f1ea;--ember:#b9bbc4;--green:#b9ce97}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 10%,#23342a 0,var(--bg) 65%);color:var(--cream);font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;font-size:14px;min-height:100vh}button,a,input,select{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--green);outline-offset:4px}button:disabled{opacity:.4;cursor:not-allowed}button{border:1px solid var(--edge);border-radius:7px;background:#26372b;color:var(--cream);padding:10px 14px}@media(hover:hover){button:hover:not(:disabled){background:#334734}}button.quiet{background:transparent;padding:8px 11px;font-size:12px}@media(hover:hover){button.quiet:hover{background:#26372b}}.primary{background:var(--green);color:#152019;border:0;font-weight:750;padding:12px 20px}.primary:hover:not(:disabled){background:#d1e3b4}button.secondary{background:transparent}header{height:82px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--edge);background:#111b17c9}.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--cream);font-size:17px;letter-spacing:1.4px;font-weight:800}.brand small{display:block;font-size:9px;letter-spacing:3px;color:var(--muted);margin-top:5px}.brand-mark{font-size:35px;color:var(--green);border:1px solid #40553e;width:49px;height:49px;display:grid;place-items:center;border-radius:9px}.header-actions{display:flex;align-items:center;gap:14px}.local-tag{font-size:10px;letter-spacing:1.5px;color:var(--muted)}.local-tag i{display:inline-block;width:6px;height:6px;background:var(--green);border-radius:50%;margin-right:7px}main{max-width:1320px;margin:auto;padding:28px 30px 20px}.topline{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.eyebrow{font-size:9px;letter-spacing:1.7px;font-weight:650;color:var(--muted)}h1{font-family:Georgia,serif;font-weight:normal;letter-spacing:-.6px;margin:8px 0 0;font-size:29px}.top-tools{display:flex;gap:8px}.game-layout{display:grid;grid-template-columns:minmax(185px,1fr) minmax(360px,580px) minmax(185px,1fr);gap:22px;align-items:start}.player-panel{background:linear-gradient(160deg,#24312860,#19251f);border:1px solid var(--edge);border-radius:12px;padding:18px 15px}.player-heading{display:flex;align-items:center;gap:9px;margin-bottom:21px;flex-wrap:wrap}.team-dot{width:10px;height:10px;border-radius:50%;background:var(--ivory)}.ember .team-dot{background:var(--ember)}h2{font-family:Georgia,serif;font-size:23px;font-weight:normal;margin:0}.player-heading p{font-size:8px;letter-spacing:1.6px;color:var(--muted);margin:4px 0 0}.turn-badge{margin-left:auto;font-size:8px;letter-spacing:1px;border:1px solid #61714b;color:var(--green);border-radius:4px;padding:5px}.roster-card{position:relative;border:1px solid #3a483b;border-radius:8px;padding:12px 9px;margin-bottom:9px;display:grid;grid-template-columns:36px 1fr;gap:8px;transition:border-color .2s}.roster-card.active{border-color:var(--green);background:#34453050}.roster-card.exhausted{opacity:.4}.monster-icon{display:grid;place-items:center;font-size:24px;color:var(--ivory)}.ember .monster-icon{color:var(--ember)}.roster-card strong{font-size:13px;font-weight:650}.roster-card small{display:block;color:var(--muted);font-size:10px;margin-top:3px}.vitality-row{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:9px;color:var(--muted)}.vitality-track{height:4px;flex:1;background:#0d1711;border-radius:3px;overflow:hidden}.vitality-track i{display:block;height:100%;background:var(--ivory)}.ember .vitality-track i{background:var(--ember)}.control-card{margin-top:21px;border-top:1px solid var(--edge);padding-top:17px;text-align:center}.control-card .eyebrow{font-size:8px}.keys{margin:12px 0 10px;line-height:30px}kbd{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:25px;background:#101b15;border:1px solid #465448;border-bottom-width:3px;border-radius:4px;font-family:inherit;font-size:11px;font-weight:600;margin:2px}.control-line{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:3px;text-align:left;max-width:120px;margin:auto;font-size:11px;color:var(--muted)}.control-card p{font-size:9px;line-height:1.6;color:#829486;margin:14px 0 0}.support-card{font-size:11px;color:var(--muted);line-height:1.7;margin-top:17px}.support-card:not(:empty){border-top:1px solid var(--edge);padding-top:13px}.support-card strong{color:var(--cream);font-size:10px;display:block;margin-bottom:5px}.centre-panel{position:relative;border:1px solid var(--edge);border-radius:12px;background:#152219;overflow:hidden}.board-bar{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;font-size:11px;border-bottom:1px solid var(--edge);gap:8px}.board-bar>div{display:flex;align-items:center;gap:8px}.status-dot{height:6px;width:6px;background:var(--green);border-radius:50%}#boardMode{font-size:8px;letter-spacing:1.2px;color:var(--muted)}.board-frame{padding:16px 16px 24px 30px;position:relative}#board{display:grid;grid-template-columns:repeat(8,1fr);aspect-ratio:1;border:1px solid #627360}.square{aspect-ratio:1;border:0;border-radius:0;padding:0;position:relative;display:flex;align-items:center;justify-content:center;background:#b6bea3;min-width:0}.square.dark{background:#506659}@media(hover:hover){.square:hover:not(:disabled){background:#c5cbaa}}@media(hover:hover){.square.dark:hover:not(:disabled){background:#607a66}}.square.selected{box-shadow:inset 0 0 0 4px #e2bc62;background:#94a76b}.square.last{background:#a6b58a}.square.last.dark{background:#637c54}.piece{font-family:Georgia,'DejaVu Sans',serif;font-size:clamp(28px,3.8vw,49px);line-height:1;color:#f5ebcc;filter:drop-shadow(0 2px 1px #16291acc);-webkit-text-stroke:1px #534f3d}.piece.b{color:#e69b80;-webkit-text-stroke:1px #512f27}.square.legal:after{content:'';position:absolute;width:14px;height:14px;border-radius:50%;background:#223e2670}.square.legal.capture:after{width:85%;height:85%;border:3px solid #b16b42;background:transparent}.square.check{box-shadow:inset 0 0 0 4px #d8745d}.rank-labels{position:absolute;left:11px;top:16px;bottom:24px;display:flex;flex-direction:column;justify-content:space-around;line-height:0;font-size:9px;color:var(--muted);white-space:pre-line}.file-labels{position:absolute;bottom:7px;left:30px;right:16px;display:flex;justify-content:space-around;font-size:9px;color:var(--muted)}.board-caption{padding:12px 10px;text-align:center;border-top:1px solid var(--edge);font-size:10px;color:var(--muted);line-height:1.5}.bottom-row{display:flex;justify-content:space-between;gap:30px;align-items:start;margin-top:24px}.match-note p{font-size:11px;color:var(--muted);line-height:1.6}.match-note b{color:var(--cream);font-weight:550}.match-note p span{margin:0 9px}.history{width:260px;position:relative;font-size:11px;color:var(--muted)}summary{cursor:pointer;padding:9px 0;border-bottom:1px solid var(--edge)}summary span{float:right;font-size:10px}.history ol{max-height:160px;overflow:auto;padding-left:20px;font-size:10px;line-height:1.8}.save-note{text-align:center;color:#75877a;font-size:9px;margin:22px 0 0}.arena-hud{display:grid;grid-template-columns:1fr 74px 1fr;align-items:center;gap:14px;padding:14px 16px}.arena-hud>div:last-child{text-align:right}.hud-name{font-size:11px;margin-bottom:6px;font-weight:650}.hp-track{height:8px;background:#0b140e;border-radius:3px;overflow:hidden}.hp-track i{display:block;height:100%;background:var(--ivory)}#hud-b .hp-track i{background:var(--ember)}.hud-sub{font-size:8px;color:var(--muted);margin-top:5px}.arena-clock{text-align:center!important}.arena-clock strong{font-family:Georgia,serif;font-size:28px;font-weight:normal}.arena-clock span{display:block;font-size:7px;letter-spacing:1px;color:var(--muted);margin-top:3px}.canvas-wrap{position:relative;margin:0 12px 12px;border:1px solid #536248;border-radius:6px;overflow:hidden}canvas{display:block;width:100%;aspect-ratio:1;background:#273b2b}.stage-overlay{position:absolute;inset:48px 0 0;background:#142018f5;z-index:4;padding:30px 24px;display:flex;align-items:center;justify-content:center;text-align:center;overflow:auto}.stage-content{width:100%}.stage-content h2{font-size:32px;margin:10px 0 13px}.stage-content>p{color:var(--muted);font-size:12px;line-height:1.7;max-width:370px;margin:0 auto 15px}.pick-columns{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:25px}.pick-box{padding:20px 10px;border:1px solid var(--edge);border-radius:8px}.pick-box strong{font-family:Georgia,serif;font-size:22px;font-weight:normal}.pick-box .choice-line{font-size:11px;color:var(--muted);line-height:2;margin-top:13px}.ready-state{margin-top:15px!important;font-size:10px!important;color:var(--green)!important;letter-spacing:1px}.stage-actions{display:flex;justify-content:center;gap:10px;margin-top:22px;flex-wrap:wrap}.support-preview{margin-top:25px;padding:15px;border-top:1px solid var(--edge);font-size:10px;color:var(--muted);line-height:1.7}.result-pill{display:inline-block;padding:6px 12px;border:1px solid var(--edge);border-radius:5px;font-size:10px;letter-spacing:1px;margin:5px 0 14px;color:var(--green)}.pause-overlay{position:absolute;inset:0;background:#101b16df;display:grid;align-content:center;justify-items:center;gap:16px;z-index:3}.pause-overlay p{margin:0;color:var(--muted)}dialog{background:#19271e;color:var(--cream);border:1px solid #536448;border-radius:13px;padding:32px;max-width:740px;width:calc(100% - 32px);max-height:90vh}dialog::backdrop{background:#070f0acc;backdrop-filter:blur(5px)}dialog h2{font-size:32px;margin:10px 0 20px}.dialog-close{position:absolute;right:16px;top:14px;border:0;background:transparent;font-size:24px;padding:0 6px;color:var(--muted)}.rules-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 26px}.rules-grid h3{font-size:12px;color:var(--green)}.rules-grid p,dialog>p{font-size:12px;line-height:1.7;color:var(--muted)}.rules-grid b{color:var(--cream);font-weight:600}.small-note{font-size:10px!important;margin:20px 0}#newDialog{max-width:410px}label{display:block;font-size:11px;color:var(--muted);margin:18px 0}select{width:100%;font:inherit;background:#101b15;border:1px solid var(--edge);color:var(--cream);padding:11px;border-radius:6px;margin-top:7px}#promotionDialog{max-width:440px}#promotionOptions{display:flex;gap:8px}#promotionOptions button{font-size:28px;flex:1}#promotionOptions small{display:block;font-size:9px}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:12px 18px;background:#d5e1bd;color:#132015;border-radius:7px;font-size:12px;z-index:20;max-width:90vw;box-shadow:0 8px 40px #0004}[hidden]{display:none!important}@media(max-width:1050px){main{padding:22px 18px}.game-layout{gap:12px;grid-template-columns:minmax(150px,1fr) minmax(330px,520px) minmax(150px,1fr)}.player-panel{padding:14px 10px}.turn-badge{margin-left:19px}.roster-card{grid-template-columns:27px 1fr;padding:10px 6px}.control-card .eyebrow{letter-spacing:.6px}.piece{font-size:clamp(25px,4.4vw,45px)}}@media(max-width:760px){header{height:68px;padding:0 16px}.brand{font-size:13px;gap:9px}.brand-mark{width:37px;height:37px;font-size:27px}.header-actions{gap:5px}.local-tag{display:none}.topline{align-items:start;gap:15px}.top-tools{flex-direction:column}h1{font-size:24px;max-width:240px}.game-layout{grid-template-columns:1fr 1fr;gap:12px}.centre-panel{grid-column:1/-1;grid-row:1}.player-panel{grid-row:2}.player-heading{margin-bottom:12px}.control-card{margin-top:14px}.piece{font-size:clamp(28px,8vw,49px)}main{padding:20px 12px}.bottom-row{flex-direction:column;gap:8px}.history{width:100%}.match-note p span{margin:0 4px}.roster-card{grid-template-columns:25px 1fr}.stage-overlay{padding:22px 14px}.stage-content h2{font-size:28px}.pick-columns{gap:10px;margin-top:15px}.pick-box{padding:14px 5px}.rules-grid{grid-template-columns:1fr}dialog{padding:25px}.board-caption{font-size:9px}.save-note{font-size:9px}.header-actions button{font-size:10px;padding:7px}.arena-hud{padding:12px;gap:8px}}
