:root { --bg:#090b16; --card:#14182b; --text:#f4f5ff; --muted:#959bb8; --cyan:#31e6ff; --purple:#9272ff; --danger:#ff5c7c; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--text); background:radial-gradient(circle at 50% 0,#202753 0,var(--bg) 48%); font-family:Inter,Segoe UI,sans-serif; }
a { color:var(--cyan); text-decoration:none; }
.nav { height:72px; display:flex; align-items:center; justify-content:space-between; max-width:1100px; margin:auto; padding:0 24px; }
.brand { font-size:1.45rem; font-weight:900; letter-spacing:.22em; color:white; text-shadow:0 0 18px var(--cyan); }
.nav-links { display:flex; gap:22px; align-items:center; }
.nav-links a,.link-button { color:#d7daf0; font:inherit; }
.nav-links form { margin:0; }
.link-button { background:transparent; border:0; cursor:pointer; padding:0; }
.nav-action { border:1px solid #565f8e; padding:9px 14px; border-radius:8px; }
.container { max-width:1100px; margin:0 auto; padding:40px 24px; }
.hero { padding:12vh 0; max-width:760px; }
.eyebrow { color:var(--cyan)!important; text-transform:uppercase; letter-spacing:.18em; font-weight:700; }
.hero h1 { font-size:clamp(3.5rem,8vw,7rem); line-height:.94; margin:18px 0 28px; letter-spacing:-.055em; }
.hero h1 span { color:transparent; -webkit-text-stroke:2px var(--purple); }
.hero p { color:var(--muted); font-size:1.15rem; max-width:560px; line-height:1.6; }
.button { display:inline-block; border:0; border-radius:8px; padding:13px 21px; margin-top:15px; color:#071016; background:linear-gradient(135deg,var(--cyan),#75ffbb); font-weight:800; font-size:1rem; cursor:pointer; box-shadow:0 0 24px #31e6ff33; }
.continue-button { align-self:flex-start; padding-left:14px; padding-right:14px; font-size:.92rem; }
.home-page .container { padding-top:0; padding-bottom:0; }
.home-page .hero { min-height:calc(100vh - 72px); padding:clamp(24px,7vh,70px) 0; display:flex; flex-direction:column; justify-content:center; }
.home-page .hero h1 { font-size:clamp(2.8rem,min(8vw,11vh),7rem); margin:clamp(10px,2vh,18px) 0 clamp(14px,3vh,28px); }
.home-page .hero p { margin-top:0; margin-bottom:clamp(8px,2vh,16px); }
.auth-card,.table-card { width:min(100%,460px); margin:5vh auto; background:#14182be8; border:1px solid #303758; border-radius:16px; padding:32px; box-shadow:0 20px 60px #0008; }
.auth-card label { display:block; margin:18px 0; color:#c9cce1; }
.auth-card input { width:100%; margin-top:8px; padding:13px; border:1px solid #3a4268; border-radius:8px; background:#0b0e1b; color:white; font-size:1rem; outline:none; }
.auth-card input:focus { border-color:var(--cyan); }
.flash { max-width:600px; margin:0 auto 18px; padding:12px 16px; border-radius:8px; background:#21385a; }
.flash.error { background:#552237; }.flash.success { background:#164b3b; }
.game-layout { display:grid; grid-template-columns:230px 330px 230px; justify-content:center; gap:32px; align-items:start; }
.game-board-wrap { position:relative; line-height:0; border:3px solid #6fe9ff; border-radius:5px; background:#080b14; box-shadow:0 0 0 6px #151b35,0 0 32px #31e6ff73,0 0 80px #765cff3d,inset 0 0 22px #000; }
.game-board-wrap::before { content:""; position:absolute; z-index:-1; inset:-18px; border-radius:16px; background:linear-gradient(145deg,#20284a99,#11152c99); border:1px solid #3b456f; }
#board { display:block; width:min(330px,78vw); height:auto; background:#060810; }
.overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:28px; background:#080b14e6; line-height:normal; text-align:center; overflow:hidden; }
.overlay.hidden { display:none; }.overlay h2 { max-width:100%; margin:0 0 12px; font-size:clamp(1.35rem,6vw,2rem); line-height:1.25; overflow-wrap:anywhere; }
.score-panel { width:100%; }
.score-panel .panel-card { text-align:center; padding:20px 14px; }
.score-panel .panel-card strong { font-size:2rem; color:var(--cyan); }
.game-panel { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.panel-card,.controls { background:var(--card); border:1px solid #303758; border-radius:10px; padding:14px; }
.panel-card span { display:block; color:var(--muted); font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; }
.panel-card strong { display:block; margin-top:8px; font-size:1.45rem; }
.next,.controls { grid-column:span 2; }.next canvas { display:block; margin:auto; }
.controls p { color:var(--muted); margin:9px 0; }.controls h3 { margin-top:0; }
kbd { display:inline-block; min-width:25px; margin-right:5px; padding:3px 6px; color:white; text-align:center; background:#272d49; border:1px solid #4a5279; border-radius:4px; }
.table-card { width:min(100%,850px); overflow-x:auto; }
table { width:100%; border-collapse:collapse; } th,td { padding:14px; border-bottom:1px solid #303758; text-align:left; } th { color:var(--muted); font-size:.78rem; text-transform:uppercase; }
.game-page .container { padding-top:14px; padding-bottom:14px; }
.game-page .game-layout { grid-template-columns:230px min(330px,calc((100vh - 112px)/2)) 230px; }
.game-page #board { width:min(330px,78vw,calc((100vh - 112px)/2)); }
@media (max-width:900px) { .nav-links { gap:12px; }.nav-links a:first-child { display:none; }.game-layout { grid-template-columns:min(330px,90vw); justify-items:center; }.score-panel,.game-panel { width:min(330px,90vw); }.game-board-wrap { grid-row:1; }.score-panel { grid-row:2; }.game-panel { grid-row:3; grid-template-columns:1fr 1fr; } }
@media (max-width:900px) { .game-page .game-layout { grid-template-columns:min(330px,78vw,calc((100vh - 112px)/2)); } }
@media (max-height:620px) { .home-page .eyebrow { margin:0; }.home-page .hero p { font-size:1rem; line-height:1.4; }.home-page .button { margin-top:5px; padding:11px 18px; } }