:root{--bg:#080a0c;--panel:rgba(18,20,22,.88);--line:rgba(216,177,103,.2);--gold:#d7b167;--ivory:#eee4d2;--muted:#8e918f;--danger:#c7554d;--cyan:#64d9d2}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:radial-gradient(circle at 50% -20%,#293035 0,#101418 38%,#07090b 100%);color:var(--ivory);font-family:Inter,"Segoe UI",Arial,sans-serif;overflow-x:hidden}
body{min-height:100vh;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.ambient{position:fixed;width:45vw;height:45vw;border-radius:50%;filter:blur(100px);opacity:.12;pointer-events:none}.ambient-one{background:#b98636;left:-20vw;top:10vh}.ambient-two{background:#2f777b;right:-20vw;bottom:-10vh}
.app-shell{width:min(1400px,100%);margin:auto;padding:18px 22px 26px;position:relative;z-index:1}
.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);margin-bottom:18px}.brand-wrap{display:flex;gap:13px;align-items:center}.brand-mark{width:42px;height:42px;border:1px solid var(--gold);display:grid;place-items:center;color:var(--gold);font-size:25px;transform:rotate(45deg)}.brand-mark::first-line{transform:rotate(-45deg)}.brand{font-size:21px;letter-spacing:2px;font-weight:800}.brand span{color:var(--gold)}.subtitle,.eyebrow{font-size:10px;letter-spacing:1.7px;color:var(--muted);margin-top:4px}.icon-button{width:42px;height:42px;border:1px solid var(--line);background:#14171a;color:var(--ivory);font-size:20px;border-radius:5px}
.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;grid-template-areas:"opponent controls" "arena controls" "self controls";gap:12px 18px;align-items:start}.opponent-card{grid-area:opponent}.arena-card{grid-area:arena}.self-card{grid-area:self}.control-panel{grid-area:controls}
.player-card,.control-panel,.arena-card{border:1px solid rgba(255,255,255,.07);background:linear-gradient(145deg,rgba(26,29,31,.94),rgba(12,14,16,.92));box-shadow:0 24px 70px rgba(0,0,0,.35)}
.player-card{display:flex;align-items:center;gap:12px;padding:11px 14px;min-height:66px}.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:25px;border:1px solid var(--line)}.dark-avatar{background:#08090a;color:#c9a55f}.light-avatar{background:#e9deca;color:#3a3027}.player-name{font-weight:700;margin-top:2px}.rating{color:var(--gold);font-size:11px;margin-top:3px}.status-dot{width:8px;height:8px;border-radius:50%;background:#53d790;box-shadow:0 0 14px #53d790;margin-left:auto}.gold-badge{margin-left:auto;color:#17130d;background:var(--gold);font-weight:900;font-size:9px;padding:5px 8px;letter-spacing:1px}
.arena-card{padding:15px}.arena-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.arena-title{font-family:Georgia,serif;font-size:23px;margin-top:3px}.clock{font:700 18px monospace;border:1px solid var(--line);padding:8px 12px;background:#0a0c0e;color:var(--gold)}
.board-frame{position:relative;width:min(78vh,820px);max-width:100%;aspect-ratio:1;margin:auto;padding:10px;background:linear-gradient(135deg,#84623c,#1d1814 14%,#bb8a4e 15%,#211a15 17%,#5f432c 100%);border:1px solid #c09355;box-shadow:0 30px 70px rgba(0,0,0,.6),inset 0 0 0 2px #17120e,inset 0 0 24px #000}.board{position:absolute;inset:10px;overflow:hidden;background:#2b211b}.board svg{display:block;width:100%;height:100%;filter:drop-shadow(0 8px 7px rgba(0,0,0,.38)) saturate(.92) contrast(1.04)}.square-layer{position:absolute;inset:10px;display:grid;grid-template:repeat(8,1fr)/repeat(8,1fr)}.square{border:0;background:transparent;position:relative;cursor:pointer}.square.selected::after{content:"";position:absolute;inset:5%;border:3px solid var(--gold);box-shadow:inset 0 0 18px rgba(215,177,103,.5)}.square.legal::before{content:"";position:absolute;width:22%;height:22%;border-radius:50%;background:rgba(100,217,210,.8);left:39%;top:39%;box-shadow:0 0 18px rgba(100,217,210,.65)}.square.legal.capture::before{width:auto;height:auto;inset:6%;border:3px solid rgba(199,85,77,.85);background:transparent}
.hint{text-align:center;color:var(--muted);font-size:12px;letter-spacing:.5px;padding-top:13px}.control-panel{padding:18px;position:sticky;top:14px}.panel-title{font-size:10px;letter-spacing:1.8px;color:var(--gold);font-weight:800}.difficulty{display:grid;grid-template-columns:1fr;margin:12px 0;gap:7px}.difficulty button{padding:11px;border:1px solid rgba(255,255,255,.08);background:#101315;color:#aeb1af;text-align:left}.difficulty button.active{border-color:var(--gold);color:var(--ivory);background:linear-gradient(90deg,rgba(215,177,103,.18),transparent)}.primary-button{width:100%;padding:13px;border:0;background:linear-gradient(135deg,#e0bd74,#a87835);color:#171109;font-weight:900;letter-spacing:.5px;box-shadow:0 8px 25px rgba(215,177,103,.18)}.divider{height:1px;background:var(--line);margin:23px 0}.chat-preview{margin-top:13px}.message{padding:10px;background:#0c0f11;border-left:2px solid var(--gold);font-size:12px}.message span{color:var(--gold);font-weight:900;margin-right:6px}.chat-lock{color:#666b69;font-size:11px;line-height:1.4;padding-top:12px}.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,140%);background:#181c1f;border:1px solid var(--line);padding:11px 17px;z-index:20;transition:.25s;color:var(--ivory);box-shadow:0 10px 35px #000}.toast.show{transform:translate(-50%,0)}
@media(max-width:900px){.app-shell{padding:8px 9px 18px}.topbar{height:58px;margin-bottom:8px}.subtitle{display:none}.brand{font-size:16px}.brand-mark{width:34px;height:34px}.game-layout{display:flex;flex-direction:column}.opponent-card{order:1;width:100%}.arena-card{order:2;width:100%;padding:8px}.self-card{order:3;width:100%}.control-panel{order:4;width:100%;position:static}.board-frame{width:100%;padding:7px}.board,.square-layer{inset:7px}.arena-title{font-size:19px}.hint{font-size:11px}.difficulty{grid-template-columns:repeat(3,1fr)}.difficulty button{text-align:center;padding:10px 3px}.control-panel{padding:14px}.chat-preview{display:none}}
@media(max-height:650px) and (orientation:landscape){.topbar{display:none}.app-shell{padding:5px}.game-layout{grid-template-columns:minmax(0,1fr) 230px;grid-template-areas:"arena controls"}.opponent-card,.self-card{display:none}.arena-card{padding:7px}.arena-head{margin-bottom:5px}.board-frame{width:min(85vh,750px)}.hint{display:none}}