@import"https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap";*{box-sizing:border-box}:root{--ink: #14150f;--field: #1a1c14;--panel: #1d1f16;--panel-2: #24261b;--line: #3b3d2b;--paper: #e9e6d8;--paper-dim: #98957e;--brass: #c9a227;--brass-dim: #8a701f;--steel: #4f7f96;--p1: #cc6a35;--p1-stroke: #7a3d18;--p2: #4f7f96;--p2-stroke: #24414d;--move: #6f8f4a;--capture: #a83b32;--swap: #4f7f96;--merge: #c9a227;--life: #6f8f4a;--danger: #a83b32;--bg: var(--ink);--bg-glow: var(--field);--border: var(--line);--text: var(--paper);--text-dim: var(--paper-dim);--accent: var(--brass);--accent-2: var(--steel)}html,body,#root{height:100%}body{margin:0;font-family:IBM Plex Sans,Segoe UI,sans-serif;background:linear-gradient(180deg,rgba(201,162,39,.05) 0%,transparent 220px),var(--ink);background-attachment:fixed;color:var(--paper)}button{font-family:inherit;cursor:pointer}input{font-family:inherit}.app-shell{min-height:100%;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;background:var(--panel);border-bottom:2px solid var(--line);position:sticky;top:0;z-index:50}.topbar:after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:linear-gradient(90deg,var(--brass) 0%,transparent 40%)}.topbar-left{display:flex;align-items:center;gap:16px}.brand{font-family:Oswald,sans-serif;font-weight:700;font-size:19px;letter-spacing:1.5px;text-transform:uppercase;color:var(--paper)}.brand:before{content:"";display:inline-block;width:9px;height:9px;margin-right:9px;background:var(--brass);transform:rotate(45deg);vertical-align:middle}.online-pill{display:flex;align-items:center;gap:7px;background:var(--panel-2);border:1px solid var(--line);padding:4px 10px 4px 8px;border-radius:2px;font-family:IBM Plex Mono,monospace;font-size:12px;letter-spacing:.3px;color:var(--paper-dim)}.online-dot{width:7px;height:7px;border-radius:50%;background:var(--move);box-shadow:0 0 5px var(--move)}.topbar-right{display:flex;align-items:center;gap:8px}.icon-btn{background:var(--panel-2);border:1px solid var(--line);color:var(--paper-dim);border-radius:2px;min-width:36px;height:34px;padding:0 10px;display:flex;align-items:center;justify-content:center;font-family:IBM Plex Mono,monospace;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;transition:border-color .15s ease,color .15s ease}.icon-btn:hover{border-color:var(--brass);color:var(--paper)}.icon-btn:active{transform:translateY(1px)}.player-badge{font-family:IBM Plex Mono,monospace;font-size:12px;color:var(--paper);padding:5px 10px;border-radius:2px;background:var(--panel-2);border:1px solid var(--line);border-left:2px solid var(--brass)}.main-area{flex:1;display:flex;justify-content:center;padding:32px 16px 60px}.center-col{width:100%;max-width:480px;display:flex;flex-direction:column;gap:16px}.wide-col{width:100%;max-width:1100px;display:flex;flex-direction:column;gap:16px}.card{position:relative;background:var(--panel);border:1px solid var(--line);border-top:none;border-radius:0 0 3px 3px;padding:22px;clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%)}.card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--brass)}.title{font-family:Oswald,sans-serif;font-size:22px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;margin:0 0 6px}.subtitle{color:var(--paper-dim);font-size:14px;margin:0 0 18px;line-height:1.5}.field-label{font-family:IBM Plex Mono,monospace;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--brass-dim);margin-bottom:7px;display:block}.text-input{width:100%;padding:12px 14px;border-radius:2px;border:1px solid var(--line);background:var(--panel-2);color:var(--paper);font-size:15px;outline:none}.text-input:focus{border-color:var(--brass)}.btn{border:1px solid var(--brass);border-radius:2px;padding:12px 18px;font-family:IBM Plex Mono,monospace;font-size:13px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;color:var(--ink);background:var(--brass);transition:filter .15s ease,transform .06s ease}.btn:hover{filter:brightness(1.12)}.btn:active{transform:translateY(1px)}.btn.secondary{background:transparent;color:var(--paper);border:1px solid var(--line)}.btn.secondary:hover{border-color:var(--brass);color:var(--brass)}.btn.danger{background:var(--danger);color:#f4ece9;border-color:var(--danger)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-row{display:flex;gap:10px;flex-wrap:wrap}.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media (max-width: 520px){.menu-grid{grid-template-columns:1fr}}.menu-btn{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:5px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--line);border-radius:0 2px 2px 0;padding:16px 18px;text-align:left;color:var(--paper);transition:border-color .15s ease,background .15s ease}.menu-btn:hover{border-left-color:var(--brass);background:#21231a}.menu-btn:active{transform:translateY(1px)}.menu-btn-icon{font-family:IBM Plex Mono,monospace;font-size:10px;font-weight:700;letter-spacing:1px;color:var(--brass);text-transform:uppercase;border:1px solid var(--brass-dim);padding:2px 6px;border-radius:2px}.menu-btn-title{font-family:Oswald,sans-serif;font-weight:600;font-size:16px;letter-spacing:.2px;text-transform:uppercase;margin-top:2px}.menu-btn-desc{font-size:12.5px;color:var(--paper-dim)}.format-list{display:flex;flex-direction:column;gap:8px}.format-row{display:flex;align-items:center;justify-content:space-between;padding:13px 14px;border:1px solid var(--line);border-radius:2px;background:var(--panel-2);transition:border-color .15s ease}.format-row.selected{border-color:var(--brass)}.format-row-left{display:flex;flex-direction:column;gap:2px}.format-name{font-weight:600;font-family:Oswald,sans-serif;letter-spacing:.3px;text-transform:uppercase;font-size:14px}.format-stats{font-family:IBM Plex Mono,monospace;font-size:11px;color:var(--paper-dim)}.format-select-btn{background:var(--panel);border:1px solid var(--line);color:var(--paper);padding:8px 14px;border-radius:2px;font-family:IBM Plex Mono,monospace;font-size:12px;text-transform:uppercase;letter-spacing:.4px}.format-select-btn.active{background:var(--brass);color:var(--ink);border-color:var(--brass)}.queue-status{margin-top:14px;display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px;border:1px dashed var(--line);border-radius:2px;color:var(--paper-dim);font-family:IBM Plex Mono,monospace;font-size:12.5px;text-align:center}.spinner{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--brass);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.code-display{font-family:IBM Plex Mono,monospace;font-size:30px;font-weight:600;letter-spacing:8px;text-align:center;padding:18px;background:var(--panel-2);border:1px solid var(--line);border-radius:2px;margin:10px 0;color:var(--brass)}.link-box{display:flex;gap:8px;align-items:center}.link-box input{flex:1;font-family:IBM Plex Mono,monospace;font-size:12px}.side-picker{display:flex;gap:10px}.side-option{flex:1;padding:16px;border-radius:2px;border:1px solid var(--line);background:var(--panel-2);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--paper);font-family:IBM Plex Mono,monospace;font-size:12px;text-transform:uppercase;letter-spacing:.4px}.side-option.selected{border-color:var(--brass);background:#262819}.side-swatch{width:26px;height:26px;border-radius:3px;transform:rotate(45deg)}.side-swatch.p1{background:var(--p1);border:2px solid var(--p1-stroke)}.side-swatch.p2{background:var(--p2);border:2px solid var(--p2-stroke)}.rules-section h3{margin:20px 0 6px;font-family:Oswald,sans-serif;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--brass)}.rules-section p{margin:4px 0;color:var(--paper-dim);font-size:14px;line-height:1.55}.piece-legend{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:10px;margin-top:10px}.piece-legend-item{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--panel-2);border:1px solid var(--line);border-radius:2px;padding:10px 6px}.piece-legend-icon{width:40px;height:40px}.piece-legend-label{font-family:IBM Plex Mono,monospace;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--paper-dim)}.game-layout{display:grid;grid-template-columns:minmax(0,560px) minmax(260px,340px);gap:18px;align-items:start;justify-content:center}@media (max-width: 900px){.game-layout{grid-template-columns:1fr}}.board-wrap{display:flex;flex-direction:column;gap:10px}.player-strip{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--line);border-radius:0 2px 2px 0}.player-strip.active{border-left-color:var(--brass)}.player-strip-name{display:flex;align-items:center;gap:8px;font-family:Oswald,sans-serif;font-weight:600;letter-spacing:.3px;text-transform:uppercase;font-size:14px}.player-clock{font-family:IBM Plex Mono,monospace;font-variant-numeric:tabular-nums;font-size:19px;font-weight:600;padding:3px 10px;border-radius:2px;background:var(--panel-2);border:1px solid var(--line)}.player-clock.low{color:var(--capture);border-color:var(--capture)}.lives-row{display:flex;gap:4px}.life-dot{width:8px;height:8px;background:var(--life);transform:rotate(45deg)}.board-square-area{position:relative;width:100%;aspect-ratio:1 / 1;border-radius:2px;overflow:hidden;border:2px solid var(--line);box-shadow:0 0 0 4px var(--panel)}.board-grid{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr)}.square{position:relative;display:flex;align-items:center;justify-content:center;transition:box-shadow .15s ease}.square.light{background:#2b2c1f}.square.dark{background:#202117}.square.promo:after{content:"";width:30%;height:30%;border:2px solid rgba(201,162,39,.55);transform:rotate(45deg)}.square.selected{box-shadow:inset 0 0 0 3px var(--brass)}.square.hl-move{box-shadow:inset 0 0 0 3px var(--move)}.square.hl-capture{box-shadow:inset 0 0 0 3px var(--capture)}.square.hl-swap{box-shadow:inset 0 0 0 3px var(--swap)}.square.hl-merge{box-shadow:inset 0 0 0 3px var(--merge)}.empty-dot{width:4px;height:4px;background:#e9e6d824}.pieces-layer{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.piece-token{position:absolute;width:12.5%;height:12.5%;display:flex;align-items:center;justify-content:center;transition:left .3s cubic-bezier(.4,0,.2,1),top .3s cubic-bezier(.4,0,.2,1)}.piece-shape{width:78%;height:78%;display:flex;align-items:center;justify-content:center;font-family:IBM Plex Mono,monospace;font-weight:600;font-size:13px;letter-spacing:.2px;border-width:2px;border-style:solid;-webkit-user-select:none;user-select:none}.piece-shape.circle{border-radius:50%}.piece-shape.hex{clip-path:polygon(25% 4%,75% 4%,100% 50%,75% 96%,25% 96%,0% 50%);font-size:10.5px}.piece-shape.owner-p1{background:var(--p1);border-color:var(--p1-stroke);color:#241205}.piece-shape.owner-p2{background:var(--p2);border-color:var(--p2-stroke);color:#eef6f8}.piece-shape.small{width:100%;height:100%}.board-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:16px;background:#0a0a06b8}.overlay-card{width:100%;max-width:280px;background:var(--panel);border:1px solid var(--brass);border-radius:2px;padding:18px}.status-log{font-family:IBM Plex Mono,monospace;font-size:11.5px;color:var(--paper-dim);max-height:90px;overflow-y:auto;padding:9px 11px;background:var(--panel-2);border-radius:2px;border:1px solid var(--line)}.status-log div{padding:2px 0}.status-log div:before{content:"› ";color:var(--brass-dim)}.side-panel{display:flex;flex-direction:column;gap:14px}.panel-title{font-family:IBM Plex Mono,monospace;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--brass-dim);margin:0 0 10px}.action-modal-list{display:flex;flex-direction:column;gap:8px}.spectator-tag{font-family:IBM Plex Mono,monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--paper-dim);background:var(--panel-2);border:1px solid var(--line);padding:3px 9px;border-radius:2px}.winner-banner{text-align:center;padding:16px;border-radius:2px;background:var(--panel);border:1px solid var(--brass);border-top:3px solid var(--brass);font-family:Oswald,sans-serif;font-weight:600;font-size:16px;text-transform:uppercase;letter-spacing:.5px}.chat-box{display:flex;flex-direction:column;height:320px;background:var(--panel-2);border:1px solid var(--line);border-radius:2px;overflow:hidden}.chat-messages{flex:1;overflow-y:auto;padding:10px 12px;display:flex;flex-direction:column;gap:6px}.chat-msg{font-size:13px;line-height:1.4}.chat-msg .chat-name{font-family:IBM Plex Mono,monospace;font-weight:600;color:var(--brass);margin-right:6px}.chat-input-row{display:flex;border-top:1px solid var(--line)}.chat-input-row input{flex:1;border:none;background:transparent;padding:10px 12px;color:var(--paper);outline:none}.chat-input-row button{border:none;background:var(--brass);color:var(--ink);padding:0 16px;font-family:IBM Plex Mono,monospace;font-weight:700;text-transform:uppercase;font-size:12px;letter-spacing:.4px}.error-text{color:var(--capture);font-size:13px;margin-top:8px;font-family:IBM Plex Mono,monospace}.hint-text{color:var(--paper-dim);font-size:12px;margin-top:8px}.back-link{background:none;border:none;color:var(--paper-dim);font-family:IBM Plex Mono,monospace;font-size:12px;text-transform:uppercase;letter-spacing:.5px;padding:0;margin-bottom:4px;text-align:left}.back-link:hover{color:var(--brass)}.home-banner{text-align:center;font-size:12.5px;color:var(--paper-dim);background:var(--panel-2);border:1px solid var(--line);border-radius:2px;padding:10px 16px;line-height:1.4}.icon-btn.small{min-width:28px;width:auto;height:26px;font-size:10px;padding:0 8px;border-radius:2px}.tutorial-board-area{position:relative}.tutorial-board-frame{max-width:340px;margin:0 auto}.tutorial-bubble-wrap{position:relative;margin-top:16px;padding:14px 16px;background:var(--panel-2);border:1px solid var(--brass-dim);border-radius:2px;cursor:pointer;transition:border-color .15s ease}.tutorial-bubble-wrap:hover{border-color:var(--brass)}.tutorial-bubble-wrap:active{transform:translateY(1px)}.tutorial-bubble-text{margin:0 0 6px;font-size:14px;line-height:1.5;color:var(--paper)}.tutorial-bubble-hint{margin:0;font-family:IBM Plex Mono,monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--brass);font-weight:700}.tutorial-progress-dots{display:flex;justify-content:center;gap:6px;margin-top:14px}.tutorial-progress-dot{width:6px;height:6px;background:var(--line);transition:background .2s ease,transform .2s ease}.tutorial-progress-dot.active{background:var(--brass);transform:scale(1.3)}.tutorial-list-grid{display:flex;flex-direction:column;gap:8px}.tutorial-row{display:flex;align-items:center;justify-content:space-between;padding:13px 14px;border:1px solid var(--line);border-radius:2px;background:var(--panel-2);color:var(--paper);text-align:left;transition:border-color .15s ease}.tutorial-row:hover{border-color:var(--brass)}.tutorial-row-left{display:flex;align-items:center;gap:10px}.tutorial-icon{font-family:IBM Plex Mono,monospace;font-size:12px;font-weight:700;color:var(--brass);border:1px solid var(--brass-dim);padding:2px 6px;border-radius:2px}.tutorial-check{font-family:IBM Plex Mono,monospace;font-size:11px;text-transform:uppercase;letter-spacing:.3px;color:var(--move);font-weight:600}.chat-bubble-inline{margin-left:8px;font-size:12px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--paper-dim);background:var(--panel-2);border:1px solid var(--line);border-radius:2px;padding:2px 10px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}.chat-header-row{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--line)}.draw-offer-card{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px;background:#080805bf}.modal-card{width:100%;max-width:340px}.square.flash-capture{animation:flashCapture .6s ease-out}.square.flash-merge{animation:flashMerge .6s ease-out}.square.flash-swap{animation:flashSwap .6s ease-out}@keyframes flashCapture{0%{box-shadow:inset 0 0 0 3px var(--capture);background-color:#a83b3280}to{box-shadow:inset 0 0 0 0 var(--capture);background-color:transparent}}@keyframes flashMerge{0%{box-shadow:inset 0 0 0 3px var(--merge);background-color:#c9a22773}to{box-shadow:inset 0 0 0 0 var(--merge);background-color:transparent}}@keyframes flashSwap{0%,to{box-shadow:inset 0 0 0 3px var(--swap)}50%{box-shadow:inset 0 0 0 0 var(--swap)}}.spectate-card{position:relative;display:flex;flex-direction:column;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:0 0 2px 2px;padding:14px 16px;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)}.spectate-card:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--capture)}.spectate-card-header{display:flex;align-items:center;gap:8px;font-family:IBM Plex Mono,monospace;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--paper-dim)}.spectate-live-dot{width:7px;height:7px;border-radius:50%;background:var(--capture);box-shadow:0 0 5px var(--capture);animation:spectateLivePulse 1.4s ease-in-out infinite}@keyframes spectateLivePulse{0%,to{opacity:1}50%{opacity:.35}}.spectate-format{background:var(--panel-2);border:1px solid var(--line);border-radius:2px;padding:2px 8px;font-size:10.5px;text-transform:none;letter-spacing:0}.spectate-eye{margin-left:auto;display:flex;align-items:center;gap:4px;color:var(--paper);font-size:11.5px}.spectate-vs{display:flex;align-items:center;justify-content:center;gap:12px;padding:6px 0}.spectate-name{font-family:Oswald,sans-serif;font-weight:600;font-size:15px;text-transform:uppercase;letter-spacing:.3px;color:var(--paper)}.spectate-vs-label{font-family:IBM Plex Mono,monospace;font-size:11px;color:var(--paper-dim);text-transform:uppercase}.theme-picker-label{font-family:IBM Plex Mono,monospace;font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--paper-dim)}.theme-swatch-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.theme-swatch{width:34px;height:34px;border-radius:2px;border:2px solid var(--line);padding:3px;background:var(--panel-2);transition:border-color .15s ease}.theme-swatch:hover{border-color:var(--paper-dim)}.theme-swatch.active{border-color:var(--brass)}.theme-swatch-colors{display:flex;width:100%;height:100%;overflow:hidden}.theme-swatch-colors span{flex:1}[data-theme=blue-orange]{--ink: #0e1720;--field: #122030;--panel: #14232f;--panel-2: #1a2c3a;--line: #2c4d63;--paper: #eaf1f6;--paper-dim: #8fa9ba;--brass: #d98d3f;--brass-dim: #9c631f}[data-theme=green-white]{--ink: #f2f0e6;--field: #ece8da;--panel: #fbfaf3;--panel-2: #eeece0;--line: #cdc7ac;--paper: #23271c;--paper-dim: #63614d;--brass: #6f7d34;--brass-dim: #545e28}[data-theme=skyblue-white]{--ink: #eef3f5;--field: #e5edf1;--panel: #fbfdfe;--panel-2: #e9f0f3;--line: #c1d3da;--paper: #1c2b32;--paper-dim: #57727c;--brass: #35748f;--brass-dim: #285a70}[data-theme=purple-cyberpunk]{--ink: #140a1a;--field: #1c0f26;--panel: #1f1128;--panel-2: #291733;--line: #4a2a5c;--paper: #f1e7fa;--paper-dim: #b195c4;--brass: #d24fd9;--brass-dim: #9636a0}[data-theme=babypink-white]{--ink: #faf1f4;--field: #f7ebef;--panel: #fffbfc;--panel-2: #f8ecf0;--line: #e6bece;--paper: #3a2430;--paper-dim: #8a6b78;--brass: #c94c85;--brass-dim: #a13a69}[data-theme=green-white] .btn,[data-theme=skyblue-white] .btn,[data-theme=babypink-white] .btn{color:#fbfaf3}[data-theme=green-white] .piece-shape.owner-p1,[data-theme=skyblue-white] .piece-shape.owner-p1,[data-theme=babypink-white] .piece-shape.owner-p1{color:#241205}[data-theme=green-white] .piece-shape.owner-p2,[data-theme=skyblue-white] .piece-shape.owner-p2,[data-theme=babypink-white] .piece-shape.owner-p2{color:#eef6f8}.theme-menu{position:relative}.theme-menu-dropdown{position:absolute;top:44px;right:0;z-index:60;background:var(--panel);border:1px solid var(--line);border-top:2px solid var(--brass);border-radius:2px;padding:14px;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:190px}.square.corner-control-p1{box-shadow:inset 0 0 0 3px var(--p1)}.square.corner-control-p2{box-shadow:inset 0 0 0 3px var(--p2)}