/* Shared look with santiago-mj.com: warm brown, amber, system type and soft panels. */
:root{--bg:#1a0a00;--panel:#28190a;--edge:rgba(232,192,96,.22);--muted:#a09080;--cream:#f0e6d0;--ivory:#f4f1ea;--ember:#b9bbc4;--green:#e8c060;--piece-outline:#4b2a0e}
html,body{background:var(--bg);color:var(--cream);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif}body{background:var(--bg)}
header{background:#1a0a00;border-color:var(--edge);height:72px}.brand{font-size:15px;letter-spacing:.5px}.brand-mark{border-color:rgba(232,192,96,.4);color:var(--green);background:rgba(200,164,92,.12)}
h1,h2,.player-heading h2,.pick-box strong,.arena-clock strong{font-family:inherit;color:var(--green);font-weight:800;letter-spacing:-.4px}h1{font-size:27px}.player-heading h2{font-size:21px}.brand small{letter-spacing:1.5px}
button{background:rgba(255,255,255,.12);color:var(--cream);border:1px solid rgba(255,255,255,.12);border-radius:8px;font-weight:600;min-height:40px}@media(hover:hover){button:hover:not(:disabled),button.quiet:hover{background:rgba(255,255,255,.2)}}button:active:not(:disabled){transform:scale(.97)}button.quiet{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12)}.primary{background:var(--green);color:#1a0a00;border-radius:12px}.primary:hover:not(:disabled){background:#f4cf77}
.player-panel,.centre-panel{background:rgba(255,255,255,.045);border-color:var(--edge);border-radius:12px}.roster-card{border-color:rgba(232,192,96,.2);background:rgba(255,255,255,.025)}.roster-card.active{border-color:rgba(255,204,0,.6);background:rgba(255,204,0,.1);box-shadow:0 0 10px rgba(255,204,0,.1)}.turn-badge{background:rgba(255,204,0,.12);border-color:rgba(255,204,0,.3);color:#ffcc00}.vitality-track,.hp-track{background:#140800}.keys kbd,kbd{background:rgba(255,255,255,.06);border-color:rgba(232,192,96,.28)}
.square{background:linear-gradient(135deg,#f3efe6,#e2dccf)}.square.dark{background:linear-gradient(135deg,#a9a49b,#8f8a82)}@media(hover:hover){.square:hover:not(:disabled){background:#f8f3e6}}@media(hover:hover){.square.dark:hover:not(:disabled){background:#b8b2a7}}.square.selected{background:#e9d48f;box-shadow:inset 0 0 0 3px #c9a240}.square.last{background:#efe2b8}.square.last.dark{background:#b4a372}.square.legal:after{background:#3a352d70}.square.legal.capture:after{border-color:#9f442b}.square.check{box-shadow:inset 0 0 0 4px #cf6249}#board{border-color:#c49a52}
.chess-vector{display:block;width:83%;height:83%;max-width:64px;max-height:64px;overflow:visible;pointer-events:none;filter:drop-shadow(0 2px 1px #1a0a0080);color:var(--ivory)}.chess-vector.b{color:#232327;--piece-outline:#d8d4cb}.chess-vector.piece-p{width:77%;height:77%}.square .chess-vector{margin:auto}#promotionOptions .chess-vector{width:50px;height:50px;margin:auto}
.stage-overlay{background:rgba(40,25,10,.98)}.pause-overlay{background:#1a0a00e8}.pick-box{background:rgba(255,255,255,.045);border-color:rgba(255,204,0,.25)}dialog{background:rgba(40,25,10,.98);border-color:rgba(255,204,0,.3);border-radius:20px}dialog::backdrop{background:rgba(0,0,0,.85)}select{background:#1a0a00;color:var(--cream);border-color:var(--edge)}.canvas-wrap{border-color:#c49a52}.battle-note{font-size:10px;color:var(--muted);margin:10px 0 0;line-height:1.5}#autoBtn[aria-pressed=true],#hintsBtn[aria-pressed=true]{background:rgba(232,192,96,.2);border-color:rgba(232,192,96,.4);color:var(--green)}
.touch-choices{display:flex;gap:10px;justify-content:center;margin:24px auto}.touch-choices button{flex:1;max-width:140px;padding:16px 8px;border:1px solid rgba(232,192,96,.3);background:rgba(232,192,96,.08)}.touch-choices button>span{display:block;font-size:32px;color:var(--green);margin-bottom:10px}.touch-choices button strong{display:block;font-size:13px}.touch-choices button small{display:block;color:var(--muted);font-size:9px;margin-top:6px}.auto-battles .control-card{display:none}.save-note{color:var(--muted)}.top-tools{flex-wrap:wrap;justify-content:flex-end}
@media(max-width:760px){header{height:auto;min-height:66px;padding:12px}.topline{gap:10px}h1{font-size:23px;max-width:220px}.top-tools{flex-direction:column;flex-shrink:0;gap:6px}.top-tools button{font-size:10px;padding:6px 8px}.brand{font-size:12px}.header-actions{gap:4px}.header-actions button{font-size:10px;padding:5px 7px}.battle-note{font-size:9px;max-width:230px}.auto-battles .player-panel{padding:12px 8px}.auto-battles .support-card{font-size:10px}.stage-content h2{font-size:24px}.touch-choices{gap:8px;margin:20px auto}.touch-choices button{padding:14px 6px}.stage-content>p{font-size:11px}.stage-overlay{padding:20px 12px}.player-heading h2{font-size:19px}.arena-clock strong{font-size:24px}.board-bar{height:48px}.local-tag{display:none}}
/* Arena presentation and readable support benches. */
#arena{aspect-ratio:800/736}.bench-heading{display:flex;align-items:baseline;justify-content:space-between;gap:6px;margin-bottom:10px}.bench-heading strong{font-size:12px;color:var(--ivory);margin:0}.ember .bench-heading strong{color:var(--ember)}.bench-heading>span{font-size:9px;color:var(--muted)}.bench-seats{display:grid;gap:6px}.bench-seat{display:flex;align-items:center;gap:8px;padding:7px 6px;background:linear-gradient(120deg,#aa784b17,#ffffff03);border:1px solid #e8c06022;border-radius:8px;min-width:0}.bench-seat b{font-size:10px;font-weight:650;color:var(--cream)}.bench-seat small{display:block;font-size:9px;line-height:1.4;color:var(--muted)}.empty-bench{font-size:10px;margin:0;line-height:1.6}.art-link{text-align:center;margin:24px 0 0}.art-link a{color:var(--green);font-size:11px;text-underline-offset:4px}@media(max-width:760px){.bench-heading{flex-wrap:wrap;gap:0}.bench-heading strong{font-size:11px}.bench-seat{gap:5px;padding:6px 4px}.bench-seat small{font-size:8px}.bench-seat b{font-size:9px}}
.arena-open .player-panel{display:flex;flex-direction:column}.arena-open .player-heading{order:0}.arena-open .support-card{order:1;margin:0 0 18px;padding-top:0;border-top:0}.arena-open .roster{order:2}.arena-open .control-card{order:3}

/* Painted supporting figurines and carved-wood bench cards. */
.aid-figurine{display:block;flex-shrink:0;width:46px;height:50px;background-image:url('./assets/aids.webp?v=4');background-size:600% 200%;background-repeat:no-repeat;filter:drop-shadow(0 3px 2px #10060080)}.aid-figurine.w{background-position-y:0%}.aid-figurine.b{background-position-y:100%}.aid-p{background-position-x:0%}.aid-n{background-position-x:20%}.aid-b{background-position-x:40%}.aid-r{background-position-x:60%}.aid-q{background-position-x:80%}.aid-k{background-position-x:100%}
.arena-open .support-card,.demo-benches .support-card{padding:14px;border:1px solid #b5864a70;border-radius:12px;background:linear-gradient(145deg,#604027a6,#2b1c12ee);box-shadow:inset 0 1px 0 #e5bc7638,inset 0 -3px 0 #10070070,0 5px 16px #10060030}.arena-open .support-card.ember,.demo-benches .ember{border-color:#bd7e5670}.bench-heading{padding:0 2px 10px;border-bottom:1px solid #b58b5635}.bench-seats{padding-top:4px}.bench-seat{padding:2px 7px;background:linear-gradient(110deg,#d7a56412,#1c110a4a),repeating-linear-gradient(0deg,#9770460d 0px,#9770460d 1px,transparent 1px,transparent 8px);border-color:#a778483b;box-shadow:inset 0 1px 0 #efc99013,inset 0 -2px 0 #0e06063d}.bench-seat b{color:#f1dcba}.bench-seat small{color:#c0a98a}.demo-benches .bench-seats{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}@media(max-width:760px){.arena-open .support-card,.demo-benches .support-card{padding:10px}.aid-figurine{width:38px;height:42px}.bench-seat{gap:4px;padding:2px}.demo-benches .bench-seats{grid-template-columns:1fr}}

.games-link{display:inline-flex;white-space:nowrap;align-items:center;min-height:40px;padding:8px 11px;font-size:12px;font-weight:600;color:var(--cream);text-decoration:none;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:8px}.games-link:hover{background:rgba(255,255,255,.2)}@media(max-width:760px){.games-link{font-size:10px;padding:5px 7px;min-height:40px}}

.canvas-wrap{position:relative}.result-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(60%,430px);max-height:92%;overflow:auto;padding:18px 16px;text-align:center;background:rgba(26,12,4,.9);border:1px solid rgba(232,192,96,.45);border-radius:12px;box-shadow:0 10px 40px #0007;z-index:3}.result-card h2{font-size:26px;margin:8px 0 10px}.result-card>p{color:var(--muted);font-size:12px;line-height:1.6;margin:0 0 4px}.result-card .stage-actions{margin-top:14px}@media(max-width:760px){.result-card{width:70%;padding:12px 10px}.result-card h2{font-size:18px;margin:4px 0 6px}.result-card>p{font-size:10px;line-height:1.45}.result-card .result-pill{margin:2px 0 6px}.result-card .stage-actions{margin-top:8px}.result-card .primary{padding:9px 14px}}
.pips{display:flex;gap:4px;flex:1}.pips i{width:10px;height:10px;border-radius:50%;border:1px solid var(--ivory);opacity:.45}.pips i.on{background:var(--ivory);opacity:1}.ember .pips i{border-color:var(--ember)}.ember .pips i.on{background:var(--ember)}
.champ-icon{display:inline-block;background-image:url(assets/champions-white.webp?v=4);background-repeat:no-repeat;vertical-align:middle}.champ-icon.b{background-image:url(assets/champions-black.webp?v=4)}.champ-icon.flip{transform:scaleX(-1)}.monster-icon{overflow:visible}
.bench-seat.at-stake{border-color:var(--green);background:rgba(232,192,96,.12)}

/* Board pieces are the painted figurines (White marble, Black stone with silver) on a marble board. */
.board-fig{position:absolute;left:2.5%;bottom:1%;width:95%;aspect-ratio:1;background-image:url('./assets/aids.webp?v=4');background-size:600% 200%;background-repeat:no-repeat;pointer-events:none;filter:drop-shadow(0 2px 2px #0007)}.board-fig.w{background-position-y:0%}.board-fig.b{background-position-y:100%}
.square .chess-vector{display:none}.no-figurines .square .chess-vector{display:block}.no-figurines .board-fig{display:none}

/* Key bindings: each player's keys, double-click to change. */
.seat-note{margin:6px 0 10px!important}.key-list{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 10px;max-width:190px;margin:0 auto;text-align:left;font-size:11px;color:var(--muted)}
.keycap{min-width:34px;min-height:26px;padding:2px 8px;font:600 12px/1 ui-monospace,monospace;color:var(--cream);background:rgba(255,255,255,.06);border:1px solid rgba(232,192,96,.28);border-bottom-width:3px;border-radius:6px;cursor:pointer;user-select:none}
.keycap.listening{background:#e8c060;color:#2a1a08;border-color:#e8c060;font-size:10px}
.link-button{margin-top:10px;padding:2px 6px;min-height:0;background:none!important;border:0;color:var(--muted);font-size:10px;text-decoration:underline;cursor:pointer}