@import"https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap";:root{font-family:Inter,system-ui,Arial,sans-serif;color:#f4eee0;background:#101217;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:330px}button,input,select{font:inherit}button{cursor:pointer;transition:background .15s,border-color .15s}button:disabled{opacity:.45;cursor:default}.shell{max-width:1460px;margin:0 auto;padding:18px 24px 26px}.topbar,.brand,.arena-title,.arena-bottom,.player,.stats,.panel-title,.invite{display:flex;align-items:center;justify-content:space-between}.topbar{border-bottom:1px solid #34363a;padding:2px 0 20px;margin-bottom:22px}.brand{justify-content:flex-start;gap:12px}.brand-symbol{font-size:36px;color:#e4b866}.brand strong{font-family:Cinzel,Georgia,serif;letter-spacing:2px;font-size:18px}.brand small{display:block;color:#aa9b85;letter-spacing:2px;font-size:10px;margin-top:2px}.status{border:1px solid #4d5449;background:#202b24;border-radius:20px;padding:7px 11px;font-size:12px;color:#a3d4b0}.status.offline{color:#eaa5a5;background:#382528;border-color:#714f50}.layout{display:grid;grid-template-columns:minmax(0,1fr) 345px;gap:22px}.arena,.panel{background:linear-gradient(130deg,#1d222a,#17191e);border:1px solid #323843;border-radius:15px}.arena{overflow:hidden}.arena-title{padding:20px 24px 10px}.eyebrow{color:#c6a66a;font-size:10px;font-weight:700;letter-spacing:2.1px}.arena-title h1{font:600 25px Cinzel,serif;margin:7px 0;color:#f4ead4}.round{border:1px solid #5a5142;color:#d0ba91;font-size:10px;letter-spacing:1px;padding:10px 12px;border-radius:5px;white-space:nowrap}#viewport{height:min(68vh,680px);min-height:390px;width:100%;position:relative;background:radial-gradient(ellipse at 50% 35%,#354044,#151a22 70%);touch-action:none}#viewport canvas{width:100%;height:100%;display:block}.arena-bottom{padding:15px 21px;gap:14px;border-top:1px solid #30343d;font-size:11px;color:#b7b6b1}.arena-bottom button{white-space:nowrap}.sidebar{display:flex;flex-direction:column;gap:14px}.panel{padding:20px}.panel-title{display:block;margin-bottom:17px}.panel-title h2{font:600 20px Cinzel,serif;margin:5px 0;color:#f1e4ca}.panel label{display:block;font-size:12px;color:#c7c8c4;margin-bottom:12px}.panel input,.panel select{display:block;width:100%;border:1px solid #444a54;color:#f1eee7;background:#15191f;padding:12px;border-radius:7px;margin-top:6px;outline:none}.panel input:focus,.panel select:focus{border-color:#cea968}.panel button{min-height:39px;border-radius:6px;padding:9px 12px;font-size:12px;font-weight:700}.primary{background:#bd9456;color:#151515;border:1px solid #d8ae67}.primary:hover{background:#e3b77a}.secondary{background:#2c333d;color:#ede6da;border:1px solid #505765}.secondary:hover,.ghost:hover{background:#3e4650}.ghost{background:transparent;border:1px solid #585761;color:#ddd7ca;border-radius:6px;padding:8px 12px;font-size:11px}.lobby button{width:100%;margin-bottom:10px}.divider-text{text-align:center;margin:11px 0 16px;color:#7b8289;font-size:11px}.hidden{display:none!important}.invite{gap:8px;align-items:stretch;flex-wrap:wrap;margin-bottom:17px}.invite code{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:#131820;border:1px solid #39414c;border-radius:6px;flex:1;min-width:0;padding:12px}.invite button{flex:none}.player{padding:12px 2px;border-top:1px solid #363d43;border-bottom:1px solid #363d43}.player strong{font-size:13px}.player small{display:block;font-size:11px;color:#919ba4;margin-top:4px}.player time{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.5px}.player time.urgent{color:#ea8888}.match-status{font-size:11px;text-align:center;padding:13px 0;color:#dabd7c;min-height:40px}.stats{font-size:11px;color:#afb8c0;margin:13px 0;gap:8px}.history{margin:15px 0}.history strong{font-size:11px;color:#c6a66a}.history #moves{margin-top:10px;max-height:70px;overflow-y:auto;font-size:11px;line-height:1.8;color:#bec6c9}.panel#matchPanel>button{width:100%;margin-top:9px}.muted{color:#9299a4;font-size:11px;line-height:1.6;margin:4px 0 0}footer{text-align:center;color:#777e87;padding:25px 10px 0;font-size:10px;letter-spacing:.5px}.modal{position:fixed;inset:0;background:#090a0dcc;display:flex;align-items:center;justify-content:center;z-index:8;padding:15px}.dialog{background:#1c222a;border:1px solid #94784d;padding:24px;border-radius:12px;max-width:360px;width:100%;text-align:center}.dialog h2{font-family:Cinzel,serif;margin:0}.dialog p{font-size:12px;color:#adb2bb}.promotion-buttons{display:flex;gap:7px;justify-content:center;margin:18px 0}.promotion-buttons button{font-size:22px;background:#3b4550;border:1px solid #85827b;border-radius:7px;color:#fff;width:58px;height:58px}#toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%);background:#3c292b;color:#ffe3dc;border:1px solid #8c6361;border-radius:8px;padding:11px 17px;display:none;z-index:9;font-size:12px;max-width:90vw;box-shadow:0 10px 30px #0006}#toast.show{display:block}@media(max-width:950px){.layout{grid-template-columns:1fr}.sidebar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.panel{min-width:0}#viewport{height:60vh}}@media(max-width:600px){.shell{padding:12px}.topbar{margin-bottom:13px;padding-bottom:12px}.brand strong{font-size:14px}.brand-symbol{font-size:27px}.status{font-size:10px}.arena-title{padding:14px}.arena-title h1{font-size:17px}.round{font-size:9px;padding:7px}.sidebar{display:flex}#viewport{height:420px;min-height:340px}.arena-bottom{padding:12px}.panel{padding:16px}}.turn-banner{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 15px 8px;padding:11px 16px;border:1px solid #56606b;border-radius:10px;background:#222934;transition:background .2s,border-color .2s,box-shadow .2s}.turn-message{display:flex;align-items:center;gap:13px;min-width:0}.turn-message strong{display:block;font-size:13px;letter-spacing:.75px;color:#f5e9d2}.turn-message small{display:block;margin-top:4px;font-size:11px;color:#bac6ca;line-height:1.4}.turn-orb{flex:none;width:13px;height:13px;border-radius:50%;background:#8f96a0;box-shadow:0 0 0 5px #a4aab019}.turn-banner.your-turn{background:linear-gradient(100deg,#173e33,#1c2f32);border-color:#60d6a0;box-shadow:inset 4px 0 #60d6a0,0 0 22px #3edb8d1a}.turn-banner.your-turn .turn-orb{background:#61ecae;box-shadow:0 0 0 5px #61ecae26,0 0 13px #61ecae9c}.turn-banner.your-turn strong{color:#b3ffd9}.turn-banner.opponent-turn{background:linear-gradient(100deg,#473221,#2b2d36);border-color:#c39662;box-shadow:inset 4px 0 #c39662}.turn-banner.opponent-turn .turn-orb{background:#e5b079;box-shadow:0 0 0 5px #e5b07926}.turn-banner.finished{border-color:#776d84;background:#292631}.board-clocks{display:flex;gap:8px;flex:none}.board-clock{padding:6px 10px;border:1px solid #555d68;border-radius:7px;background:#161b23;min-width:83px;text-align:center}.board-clock span{display:block;font-size:9px;color:#99a4ae;letter-spacing:1px}.board-clock time{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.5px}.board-clock.active-turn{border-color:#d4bb80;box-shadow:0 0 0 1px #d4bb8080;background:#363029}.player{transition:background .2s,border-color .2s;gap:8px}.player.active-turn{background:linear-gradient(90deg,#314235,#252e32);border-color:#68c996;padding-left:10px;padding-right:10px;border-radius:8px}.player.active-turn time{color:#b6ffcd}.turn-marker{display:inline-block;margin-left:5px;color:#8fe2b1;font-weight:700;font-size:10px;letter-spacing:.1px}.urgent{color:#ff8585!important}.arena-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}#toggleFullscreen{border-color:#bd955c;color:#f4d5a5}#toggleFullscreen:hover{background:#59442c}.arena:fullscreen{box-sizing:border-box;display:flex;flex-direction:column;width:100%;height:100%;max-width:none;max-height:none;border:0;border-radius:0;padding:12px;background:#141a21;overflow:hidden}.arena:fullscreen #viewport{height:auto;flex:1 1 auto;min-height:0}.arena:fullscreen .arena-title{padding:8px 12px}.arena:fullscreen .arena-bottom{padding:10px 12px}.arena.fullscreen-fallback{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;z-index:30;display:flex;flex-direction:column;border:0;border-radius:0;padding:12px;background:#141a21;overflow:hidden}.arena.fullscreen-fallback #viewport{height:auto;flex:1 1 auto;min-height:0}.arena.fullscreen-fallback .arena-title{padding:8px 12px}.arena.fullscreen-fallback .arena-bottom{padding:10px 12px}body.fullscreen-open{overflow:hidden}@media(max-width:600px){.turn-banner{margin:0 9px 8px;padding:10px;gap:8px;flex-wrap:wrap}.turn-message strong{font-size:12px}.turn-message small{font-size:10px}.board-clocks{width:100%;justify-content:space-between}.board-clock{flex:1;padding:5px 8px}.arena-bottom{align-items:flex-start;flex-direction:column;gap:10px}.arena-actions{width:100%;justify-content:flex-end}.arena:fullscreen,.arena.fullscreen-fallback{padding:4px}.arena:fullscreen .arena-title,.arena.fullscreen-fallback .arena-title{padding:6px 9px}.arena:fullscreen .arena-title h1,.arena.fullscreen-fallback .arena-title h1{font-size:15px}.arena:fullscreen .turn-banner,.arena.fullscreen-fallback .turn-banner{flex-wrap:nowrap;margin:2px 6px 5px}.arena:fullscreen .board-clocks,.arena.fullscreen-fallback .board-clocks{width:auto}.arena:fullscreen .board-clock,.arena.fullscreen-fallback .board-clock{min-width:60px}.arena:fullscreen .turn-message small,.arena.fullscreen-fallback .turn-message small{display:none}.arena:fullscreen .arena-bottom,.arena.fullscreen-fallback .arena-bottom{gap:5px;padding:6px 9px}.arena:fullscreen #hint,.arena.fullscreen-fallback #hint{display:none}}@media(max-height:480px){.arena:fullscreen .arena-title,.arena.fullscreen-fallback .arena-title{padding:3px 12px}.arena:fullscreen .arena-title h1,.arena.fullscreen-fallback .arena-title h1{margin:2px 0;font-size:14px}.arena:fullscreen .turn-banner,.arena.fullscreen-fallback .turn-banner{margin:3px 6px;padding:5px 9px}.arena:fullscreen .arena-bottom,.arena.fullscreen-fallback .arena-bottom{padding:5px 8px}}@media(max-width:950px){.layout{grid-template-columns:minmax(0,1fr)}.sidebar{display:contents}.layout>.arena{order:1;min-width:0}.sidebar>#lobby,.sidebar>#matchPanel{order:0;min-width:0}.sidebar>.panel:not(#lobby):not(#matchPanel){order:2;min-width:0}}