/* HydraCro Board Arcade — responsive dark terminal table, 2D/3D. */
.board-arcade{max-width:1400px!important;width:100%;padding-top:25px}
.board-arcade *, .board-arcade *:before,.board-arcade *:after{box-sizing:border-box}
.board-arcade button,.board-arcade input,.board-arcade select{font:inherit}
.board-hero{padding:8px 0 22px}.board-hero h1{font:900 clamp(27px,3.7vw,53px)/1.12 system-ui,sans-serif;letter-spacing:-.055em;margin:11px 0}.board-hero p{color:#aec6bd;font:14px/1.6 system-ui,sans-serif}
.bg-panel{background:#0e1c20;border:1px solid #2c5048;border-radius:10px;padding:16px;min-width:0}
.bg-panel h2,.bg-panel h3{font:800 14px system-ui,sans-serif;letter-spacing:.05em;margin:0 0 12px;color:#a7f5d1}
.bg-panel p,.bg-small,.bg-panel small{color:#9ebcb0;font:12px/1.55 system-ui,sans-serif}
.bg-btn{min-height:37px;background:#152b2c;border:1px solid #38645b;color:#d6eee5;border-radius:7px;padding:7px 12px;cursor:pointer;font:700 11px/1.3 system-ui,sans-serif!important;transition:background .15s,border-color .15s}
.bg-btn:hover,.bg-btn:focus-visible{background:#20423a;border-color:#77e6ae}.bg-btn:disabled{opacity:.4;cursor:default}
.bg-primary{background:#55dfa0;border-color:#55dfa0;color:#052116}
.bg-primary:hover{background:#91fac8;color:#071d13}
.bg-btn.selected{border-color:#6cf6ad;color:#75ffc0;background:#173e32}
.bg-btn-row{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.bg-label{font:700 10px monospace;color:#9ebdb0;letter-spacing:.1em}.bg-status{color:#80e9b3;font:700 11px monospace;margin-left:12px}
.bg-alert{padding:11px 14px;border:1px solid #bb776d;border-radius:8px;background:#3a1e23;color:#ffd1c7;margin-bottom:15px;font:12px/1.4 system-ui,sans-serif}.bg-alert[hidden]{display:none}
.bg-entry{display:grid;grid-template-columns:1fr minmax(275px,440px);gap:17px;align-items:stretch}.bg-entry-form{display:flex;flex-direction:column;gap:11px}
.bg-entry-form label,.bg-form-grid label{font:700 11px system-ui,sans-serif;color:#a9d4c0}
.bg-entry-form input,.bg-chat-form input,.bg-form-grid select,.bg-toolbar select,.bg-vote-select{background:#09161c;color:#f4fff8;border:1px solid #2f6151;border-radius:6px;outline:0;padding:11px;width:100%;min-width:0}
.bg-entry-form input:focus,.bg-chat-form input:focus{border-color:#7df3b2}
.bg-or{display:flex;align-items:center;color:#7d9d90;gap:10px;font-size:10px}.bg-or:before,.bg-or:after{content:"";height:1px;background:#335b4e;flex:1}
.bg-showcase{background:radial-gradient(ellipse at 50% 15%,#224438,#0a181e 68%);border:1px solid #24483a;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:25px;min-height:350px}
.bg-showcase-icon{font-size:120px;color:#84e6ac;text-shadow:0 0 40px #39ec8f44;line-height:1}
.bg-showcase h2{font:900 clamp(26px,3vw,38px) system-ui,sans-serif;margin:10px 0}.bg-showcase p{letter-spacing:.2em;color:#96baa8;font-size:10px}.bg-features{margin-top:25px;color:#7fefb9;font-size:12px}
.bg-room-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid #2c5e50;border-radius:10px;background:#112521;padding:10px 13px;margin-bottom:15px}
#bg-room-code{font:900 23px monospace;letter-spacing:.1em;color:#9af8bc}
.bg-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,300px);gap:14px;align-items:start}
.bg-main-col,.bg-aside{min-width:0}.bg-aside{display:grid;gap:13px}.bg-roster{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:9px;margin:16px 0}
.bg-roster-item,.bg-player-item{padding:10px;border:1px solid #2a4b43;border-radius:8px;background:#102a29;display:flex;justify-content:space-between;gap:8px;align-items:center;font:12px system-ui,sans-serif}
.bg-roster-item strong,.bg-player-item strong{font-size:12px;color:#e4f8e8}
.bg-player-item{margin-bottom:7px}.bg-player-item.active{border-color:#6ef6ad;background:#194332}
.bg-player-item.out{opacity:.5}.bg-player-item small{display:block;font-size:10px;color:#9dc4ae;margin-top:3px}
.bg-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:15px 0}.bg-form-grid label{display:grid;gap:6px}
.bg-toolbar{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:8px 10px;background:#0e2024;border:1px solid #2a544b;border-radius:8px 8px 0 0}
.bg-toolbar select{max-width:140px;padding:7px;font-size:11px}
.bg-board-shell{width:100%;min-height:400px;overflow:auto;background:radial-gradient(#19342b,#0a1319 72%);border:1px solid #376858;border-top:0;border-radius:0 0 9px 9px;padding:16px;display:grid;place-items:center}
.bg-board-2d{display:grid;position:relative;aspect-ratio:1;min-width:0;max-width:100%;width:min(100%,690px);border:9px solid #553f2f;box-shadow:0 12px 30px #0008,0 0 0 2px #987c48;overflow:hidden;background:#eddfc6;touch-action:manipulation}
.bg-board-2d.bg-xiangqi{aspect-ratio:9/10;background:#e2c69b;border-color:#7c482d}
.bg-board-2d.bg-horse{background:#e8dfcf;border-color:#51453a}
.bg-square{display:grid;place-items:center;position:relative;border:0;border-radius:0;padding:0;cursor:pointer;min-width:0;aspect-ratio:1;color:#162322;font-size:clamp(16px,3vw,40px);font-family:"Segoe UI Symbol","Noto Sans Symbols 2",serif}
.bg-square.light{background:#e7dabd}.bg-square.dark{background:#779285}.bg-square.last:before{content:"";position:absolute;inset:0;background:#d6d65766;pointer-events:none}
.bg-square.selected:after{content:"";position:absolute;inset:1px;border:3px solid #1cd56b;pointer-events:none}
.bg-square.legal:before{content:"";width:24%;aspect-ratio:1;border-radius:50%;position:absolute;background:#198b55aa;z-index:1;pointer-events:none}
.bg-square.legal.occupied:before{width:88%;height:88%;border:4px solid #1ba768;background:transparent}
.bg-chess-piece{font-family:"Segoe UI Symbol","DejaVu Sans",serif;font-size:clamp(22px,4.7vw,58px);line-height:1;filter:drop-shadow(1px 2px 1px #2229);position:relative;z-index:2}
.bg-chess-piece.white{color:#fffdf2;-webkit-text-stroke:1px #2f3636;text-shadow:0 1px 0 #202c24}
.bg-chess-piece.black{color:#141e23;-webkit-text-stroke:.35px #fff7dc}
.bg-square .bg-coordinate{position:absolute;bottom:1px;right:2px;font:700 clamp(7px,1vw,10px) monospace;color:#355e52;opacity:.8;pointer-events:none}
.bg-xiangqi .bg-square{background:transparent;border:1px solid #7f5b34;aspect-ratio:1;font-size:clamp(13px,2.3vw,31px)}
.bg-xiangqi .bg-square.river-top{border-bottom:3px double #906438}
.bg-xiangqi .bg-square.river-bottom{border-top:3px double #906438}
.bg-xiangqi-piece{display:grid;place-items:center;position:relative;z-index:2;width:82%;height:82%;border-radius:50%;border:2px solid #77552b;background:radial-gradient(circle at 35% 25%,#fff2cd,#d3ad70);box-shadow:1px 3px 2px #49352380;font:900 clamp(14px,2.6vw,30px) serif}
.bg-xiangqi-piece.red{color:#b02b1c}.bg-xiangqi-piece.black{color:#24302b}
.bg-xiangqi .bg-square.legal:before{background:#3aae5d55;width:70%;height:70%}
.bg-xiangqi .bg-square.legal.occupied:before{width:94%;height:94%;border-color:#1abb68}
.bg-board-2d.bg-horse{grid-template-columns:repeat(15,1fr);grid-template-rows:repeat(15,1fr)}
.bg-horse-cell{position:relative;background:#efeae0;border:1px solid #a6a39a55;min-width:0;min-height:0}
.bg-horse-cell.track{background:#f9f7e9;border-color:#c8bda5}
.bg-horse-cell.base0{background:#f7dc7b}.bg-horse-cell.base1{background:#b1e2a4}.bg-horse-cell.base2{background:#8bbce4}.bg-horse-cell.base3{background:#e89c95}
.bg-horse-cell.lane0{background:#ffeb7b}.bg-horse-cell.lane1{background:#a4e987}.bg-horse-cell.lane2{background:#89bdf5}.bg-horse-cell.lane3{background:#ef9993}
.bg-horse-cell.center{background:#4d6859}.bg-horse-cell.start{box-shadow:inset 0 0 0 3px #2d4b3f}
.bg-horse-token{position:absolute;inset:8%;z-index:2;padding:0;border:2px solid #fff8;border-radius:50%;display:grid;place-items:center;cursor:pointer;box-shadow:0 1px 4px #0008;font:800 clamp(10px,1.8vw,24px) system-ui,sans-serif;transition:transform .25s;line-height:1}
.bg-horse-token.c0{background:#f0d240;color:#342c14}.bg-horse-token.c1{background:#5cbb4e;color:#132b18}.bg-horse-token.c2{background:#418ecb;color:#fff}.bg-horse-token.c3{background:#d85d56;color:#fff}
.bg-horse-token.canmove{outline:3px solid #fff;animation:bg-pulse 1s ease-in-out infinite}
.bg-horse-token:focus-visible{outline:3px solid #000}
@keyframes bg-pulse{50%{transform:scale(1.19)}}
.bg-horse-cell.center:after{content:"HYDRA";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-35deg);font:bold clamp(6px,1.2vw,16px) monospace;color:#ddedcf77}
.bg-board-3d{width:100%;height:min(73vw,680px);min-height:380px;position:relative;overflow:hidden;touch-action:none}
.bg-board-3d canvas{display:block;width:100%;height:100%;touch-action:none}.bg-3d-help{position:absolute;left:9px;bottom:8px;z-index:2;pointer-events:none;color:#d0dfd8;background:#101b1bbc;border-radius:4px;padding:5px 9px;font:10px monospace}
.bg-board-shell.bg-expanded{position:fixed;z-index:80;inset:12px;background:#0b1b1d;padding:15px;overflow:auto}.bg-board-shell.bg-expanded .bg-board-2d{max-width:none;width:min(95vh,1100px)}
.bg-board-shell.bg-expanded .bg-board-3d{height:calc(100vh - 60px)}
.bg-game-controls{margin-top:12px;display:flex;justify-content:space-between;gap:10px;align-items:center}
.bg-game-controls p{margin:7px 0 0}.bg-dice{font:900 24px system-ui,sans-serif;color:#f8d36e}
.bg-moves,.bg-log{max-height:170px;overflow-y:auto;display:flex;flex-wrap:wrap;gap:5px}.bg-moves span,.bg-log div{padding:6px 8px;background:#142f2d;border-radius:5px;color:#d2ebdb;font:11px monospace}.bg-log{display:block}.bg-log div{margin-bottom:4px;line-height:1.5}
.bg-chat-list{height:220px;overflow:auto;background:#0a171b;border:1px solid #244a3f;border-radius:7px;padding:9px;margin-bottom:9px}
.bg-chat-msg{color:#cbe8d6;font:12px/1.55 system-ui,sans-serif;margin-bottom:6px;overflow-wrap:anywhere}.bg-chat-msg strong{color:#8af5b4}
.bg-chat-form{display:flex;gap:5px}.bg-chat-form input{font-size:12px;padding:9px;flex:1}
.bg-rules-dialog{width:min(95vw,610px);max-height:85vh;overflow:auto;border:1px solid #6bcb9c;color:#d6f6df;background:#112421;border-radius:12px;padding:23px;box-shadow:0 0 0 100vmax #0009;font:14px/1.7 system-ui,sans-serif}
.bg-rules-dialog::backdrop{background:#000a}.bg-rules-dialog h2{color:#8cefb4;font:900 21px system-ui,sans-serif}.bg-rules-dialog li{margin-bottom:8px}
.bg-hub-title{font:900 clamp(30px,4.5vw,61px) system-ui,sans-serif;margin:20px 0}
.bg-hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:25px}
.bg-hub-card{border:1px solid #2c5748;border-radius:12px;background:linear-gradient(135deg,#172f29,#0a181c);padding:30px;color:#e0faea;text-decoration:none;transition:transform .15s,border-color .15s}
.bg-hub-card:hover{border-color:#8bf1b7;transform:translateY(-4px)}
.bg-hub-card span{font-size:78px;color:#9cf3bd}.bg-hub-card h2{font:900 24px system-ui,sans-serif}.bg-hub-card p{font:12px/1.6 system-ui,sans-serif;color:#9bbdaa}
@media(max-width:1050px){.bg-layout{grid-template-columns:1fr}.bg-aside{grid-template-columns:repeat(2,minmax(0,1fr))}.bg-entry{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.bg-entry{grid-template-columns:1fr}.bg-showcase{min-height:170px;padding:15px}.bg-showcase-icon{font-size:66px}.bg-aside,.bg-hub-grid,.bg-form-grid{grid-template-columns:1fr}.bg-board-shell{padding:3px;min-height:270px}.bg-board-2d{border-width:4px}.bg-toolbar{padding:5px}.bg-toolbar .bg-btn{padding:5px}.bg-3d-help{font-size:8px}.bg-board-3d{min-height:300px}.bg-game-controls{display:block}.bg-game-controls>.bg-btn-row{margin-top:10px}.bg-roster{grid-template-columns:1fr 1fr}.bg-xiangqi-piece{border-width:1px}.bg-horse-cell.start{box-shadow:inset 0 0 0 1px #2d4b3f}}
@media(prefers-reduced-motion:reduce){.bg-horse-token.canmove{animation:none}.bg-horse-token{transition:none}}

/* Hidden sections must override grid/flex display declarations. */
.board-arcade [hidden]{display:none!important}