*{box-sizing:border-box}:root{color-scheme:dark;--bg-image: url(/images/bg.png);--bg: #080a0f;--surface: rgba(13, 17, 25, .82);--surface-strong: rgba(8, 11, 17, .94);--line: rgba(255, 255, 255, .14);--line-strong: rgba(255, 255, 255, .22);--text: #f7fafc;--muted: #b8c2cc;--muted-strong: #d8dee6;--red: #ef4444;--orange: #f59e0b;--yellow: #facc15;--green: #22c55e;--blue: #3b82f6;--white: #f8fafc;--shadow: 0 24px 70px rgba(0, 0, 0, .38)}html,body,#app{min-height:100%;margin:0}body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:var(--text);background:linear-gradient(180deg,#080a0f85,#080a0fe6),var(--bg-image) center / cover fixed,var(--bg);overflow:hidden}button{font:inherit}#app{display:flex;min-height:100vh;flex-direction:column}.skip-link{position:absolute;left:16px;top:12px;z-index:100;transform:translateY(-160%);border-radius:6px;background:var(--white);color:#111827;padding:9px 12px;font-weight:700;text-decoration:none;transition:transform .16s ease}.skip-link:focus{transform:translateY(0)}.site-header{flex:0 0 auto;border-bottom:1px solid var(--line);background:#080a0fd1;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.container{width:min(100% - 28px,1320px);margin:0 auto}.header-row{display:flex;min-height:68px;align-items:center;justify-content:space-between}.brand{display:inline-flex;align-items:center;gap:12px;color:inherit;text-decoration:none}.brand-icon{width:38px;height:38px;border-radius:8px;box-shadow:0 10px 28px #00000052}.brand-copy{display:grid;gap:2px}.title{font-size:1.08rem;font-weight:800;line-height:1}.tagline{color:var(--muted);font-size:.82rem;line-height:1.2}#main-content{display:flex;min-height:0;flex:1}.game-root{width:100%;min-height:0}.game-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,348px);gap:18px;width:min(100% - 28px,1320px);min-height:calc(100vh - 68px);margin:0 auto;padding:18px 0}.canvas-wrap{position:relative;min-height:520px;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:radial-gradient(circle at 50% 42%,rgba(255,255,255,.08),transparent 34%),linear-gradient(180deg,#ffffff0a,#ffffff03);box-shadow:var(--shadow)}.canvas-wrap:before{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;content:"";background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:42px 42px;-webkit-mask-image:linear-gradient(to bottom,transparent,black 18%,black 82%,transparent);mask-image:linear-gradient(to bottom,transparent,black 18%,black 82%,transparent)}canvas{display:block;width:100%;height:100%}.scene-status{position:absolute;left:16px;top:16px;z-index:2;display:inline-flex;min-height:34px;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;background:#080a0fa3;padding:7px 11px;color:var(--muted-strong);font-size:.86rem;font-weight:700;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.scene-status:before{width:8px;height:8px;border-radius:999px;background:var(--muted);content:""}.scene-status.is-ready:before{background:var(--green);box-shadow:0 0 14px #22c55ecc}.scene-status.is-busy:before{background:var(--yellow);box-shadow:0 0 14px #facc15cc}.scene-status.is-win:before{background:var(--blue);box-shadow:0 0 14px #3b82f6cc}.control-panel{align-self:stretch;min-height:0;border:1px solid var(--line);border-radius:8px;background:var(--surface);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.panel-inner{display:flex;height:100%;min-height:0;flex-direction:column;gap:18px;padding:16px}.primary-actions{display:grid;grid-template-columns:1fr 44px;gap:10px}.btn{display:inline-flex;min-height:44px;align-items:center;justify-content:center;gap:9px;border:1px solid transparent;border-radius:8px;padding:0 14px;color:var(--text);cursor:pointer;font-weight:800;line-height:1;transition:transform .14s ease,border-color .14s ease,background .14s ease,opacity .14s ease}.btn svg{width:18px;height:18px;flex:0 0 auto;stroke-width:2.3}.btn:hover:not(:disabled){transform:translateY(-1px)}.btn:focus-visible{outline:3px solid rgba(250,204,21,.45);outline-offset:2px}.btn:disabled{cursor:not-allowed;opacity:.45}.btn.primary{background:linear-gradient(135deg,#f97316,#ef4444 48%,#8b5cf6);box-shadow:0 14px 28px #ef44443d}.btn.secondary,.btn.face-btn{border-color:var(--line);background:#ffffff14}.btn.secondary:hover:not(:disabled),.btn.face-btn:hover:not(:disabled){border-color:var(--line-strong);background:#ffffff1f}.btn.icon-only{width:44px;padding:0}.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.metric{min-width:0;border:1px solid var(--line);border-radius:8px;background:var(--surface-strong);padding:12px}.metric-label{display:block;color:var(--muted);font-size:.74rem;font-weight:800;text-transform:uppercase}.metric-value{display:block;margin-top:6px;font-size:1.38rem;font-variant-numeric:tabular-nums;font-weight:900;line-height:1}.metric.moves .metric-value{color:var(--green)}.metric.time .metric-value{color:var(--orange)}.panel-section{display:grid;gap:10px}.section-title{margin:0;color:var(--muted-strong);font-size:.78rem;font-weight:900;text-transform:uppercase}.face-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.face-wrap{display:grid;gap:8px;min-width:0;border:1px solid var(--line);border-radius:8px;background:#ffffff0f;padding:10px}.face-label{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted-strong);font-size:.78rem;font-weight:900}.face-token{display:inline-grid;width:24px;height:24px;place-items:center;border-radius:6px;color:#07090d;font-size:.78rem;font-weight:900}.face-token.u{background:var(--yellow)}.face-token.d{background:var(--white)}.face-token.f{background:var(--red);color:var(--white)}.face-token.b{background:var(--orange)}.face-token.l{background:var(--blue);color:var(--white)}.face-token.r{background:var(--green)}.face-buttons{display:grid;grid-template-columns:1fr 1fr;gap:7px}.btn.face-btn{min-width:0;min-height:38px;padding:0;font-size:1.05rem}.history-row{display:flex;min-height:36px;flex-wrap:wrap;gap:6px}.move-chip{display:inline-grid;min-width:34px;height:32px;place-items:center;border:1px solid var(--line);border-radius:7px;background:#ffffff14;color:var(--muted-strong);font-size:.86rem;font-weight:900}.empty-history{display:inline-flex;align-items:center;color:var(--muted);font-size:.88rem}@media (max-width: 980px){body{overflow:auto}.game-shell{grid-template-columns:1fr;min-height:auto}.canvas-wrap{order:1;min-height:56vh;min-height:56svh}.control-panel{order:2;align-self:auto}}@media (max-width: 620px){.container,.game-shell{width:min(100% - 20px,1320px)}.header-row{min-height:62px}.brand-icon{width:34px;height:34px}.tagline{display:none}.game-shell{gap:12px;padding:12px 0}.canvas-wrap{min-height:58vh;min-height:58svh}.scene-status{left:10px;top:10px;min-height:30px;padding:6px 9px;font-size:.78rem}.panel-inner{gap:12px;padding:10px}.face-section{order:1}.primary-actions{order:2}.stats-grid{order:3}.history-section{order:4}.btn{min-height:40px}.metric{padding:10px}.metric-value{font-size:1.18rem}.face-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.face-wrap{gap:6px;padding:8px}.face-label{font-size:.72rem}.face-token{width:22px;height:22px}.btn.face-btn{min-height:34px}.history-row{min-height:32px}.move-chip{min-width:31px;height:29px;font-size:.78rem}}