:root {
  color-scheme: dark;
  --bg: #0d1117;
  --card: #161b22;
  --card-rgb: 22, 27, 34;
  --panel: #21262d;
  --line: #30363d;
  --text: #e6edf3;
  --muted: #8b949e;
  --accent: #ff7b72;
  --accent2: #79c0ff;
  --ok: #7ee787;
  --bg-glow: #1f2937;
  --user-bubble: #1f6feb;
  --gold: #ffa657;
  --gold2: #d29922;
  --on-accent: #160b0b;
}
html[data-theme='cherry'] { --accent:#ff6b8a; --accent2:#ff9fb2; --bg-glow:#3a2330; --panel:#2a2130; --user-bubble:#c2406b; --gold:#ff8aa8; --gold2:#c75d83; }
html[data-theme='sea'] { --accent:#4dd0e1; --accent2:#8fd8e6; --bg-glow:#14323a; --panel:#1f2b30; --user-bubble:#1f7f8f; --gold:#6bd8c8; --gold2:#3fa39a; }
html[data-theme='mint'] { --accent:#34d399; --accent2:#a7e8cd; --bg-glow:#0f2e24; --panel:#1e2a26; --user-bubble:#1f8f6b; --gold:#6fe6a8; --gold2:#3fa876; }
html[data-theme='violet'] { --accent:#a78bfa; --accent2:#c4b5fd; --bg-glow:#241f3a; --panel:#252130; --user-bubble:#6d5bd0; --gold:#b49ae8; --gold2:#7d6bb8; }
html[data-theme='amber'] { --accent:#ffb74d; --accent2:#ffd88a; --bg-glow:#33280f; --panel:#2a251a; --user-bubble:#d98a2b; --gold:#ffc46b; --gold2:#c98f2f; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background:radial-gradient(circle at top,var(--bg-glow) 0,var(--bg) 45%) fixed; color:var(--text); transition:background .35s ease,color .25s ease; }
.app { width:min(780px,100%); margin:0 auto; padding:24px 16px max(24px,env(safe-area-inset-bottom)); }
.hero { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin:12px 0 20px; flex-wrap:wrap; }
.hero-side { display:flex; flex-direction:column; align-items:flex-end; gap:10px; }
.theme-switch { display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.theme-switch-label { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.theme-swatches { display:flex; gap:8px; align-items:center; background:rgba(var(--card-rgb),.7); border:1px solid var(--line); padding:7px 10px; border-radius:999px; backdrop-filter:blur(6px); }
.theme-dot { width:22px; height:22px; min-height:0; padding:0; border-radius:999px; border:2px solid transparent; background:var(--swatch); transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease; }
.theme-dot:hover { transform:scale(1.15); }
.theme-dot.active { border-color:#fff; box-shadow:0 0 0 2px var(--swatch),0 0 12px color-mix(in srgb,var(--swatch) 60%,transparent); }
.eyebrow { color:var(--accent2); text-transform:uppercase; letter-spacing:.12em; font-size:12px; margin:0 0 8px; }
h1 { font-size:34px; line-height:1.05; margin:0 0 10px; }
.sub { margin:0; color:var(--muted); line-height:1.55; }
.card { background:rgba(var(--card-rgb),.86); border:1px solid var(--line); border-radius:22px; box-shadow:0 18px 60px rgba(0,0,0,.28); }
.login-card, .home-card { padding:22px; }
.login-card h2, .home-card h2 { margin:0 0 8px; }
.login-card p { color:var(--muted); }
.tabs { display:flex; gap:8px; margin:14px 0 18px; background:var(--bg); border:1px solid var(--line); border-radius:16px; padding:4px; }
.tab { flex:1; min-height:38px; border-radius:12px; background:transparent; color:var(--muted); font-weight:600; padding:0 8px; transition:background .18s ease,color .18s ease; }
.tab:hover:not(.active) { color:var(--text); background:rgba(var(--card-rgb),.6); }
.tab.active { background:var(--accent); color:var(--on-accent); }
.pane { animation:fade .18s ease; }
@keyframes fade { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:none; } }
button.primary { width:100%; }
.field-label { display:block; color:var(--muted); font-size:13px; margin:14px 0 7px; }
.row { display:flex; gap:10px; }
input, textarea { width:100%; border:1px solid var(--line); border-radius:14px; background:var(--bg); color:var(--text); padding:13px 14px; font:inherit; outline:none; transition:border-color .18s ease,box-shadow .18s ease,background .18s ease; }
textarea { resize:none; max-height:130px; }
input:focus, textarea:focus { border-color:var(--accent2); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent2) 22%,transparent); }
button { border:0; border-radius:14px; background:var(--accent); color:var(--on-accent); font-weight:700; padding:0 18px; min-height:46px; cursor:pointer; transition:background .18s ease,border-color .18s ease,color .18s ease,transform .12s ease,box-shadow .18s ease,filter .18s ease; }
button:hover:not(:disabled) { filter:brightness(1.08); }
button:active:not(:disabled) { transform:translateY(1px) scale(.995); }
button:disabled { opacity:.55; cursor:not-allowed; }
.ghost { background:transparent; color:var(--muted); border:1px solid var(--line); }
.ghost:hover:not(:disabled) { color:var(--text); border-color:var(--muted); filter:none; }
.ghost:active:not(:disabled) { transform:translateY(1px) scale(.995); }
.small { min-height:36px; padding:0 12px; }
.hidden { display:none !important; }
.hp-field { position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; padding:0; border:0; overflow:hidden; }
.msg { min-height:20px; color:var(--accent); }
.muted { color:var(--muted); }
.home-top { display:flex; justify-content:space-between; gap:14px; align-items:flex-start; margin-bottom:16px; }
.home-top-right { display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.changelog-btn { min-height:32px; padding:0 12px; font-size:12px; font-weight:600; background:transparent; color:var(--accent2); border:1px solid color-mix(in srgb,var(--accent2) 45%,transparent); border-radius:999px; }
.changelog-btn:hover:not(:disabled) { color:var(--text); border-color:var(--accent2); box-shadow:0 0 10px color-mix(in srgb,var(--accent2) 30%,transparent); }
.changelog-panel { margin-top:14px; border:1px solid var(--line); border-radius:16px; background:var(--bg); padding:12px 14px; animation:fade .18s ease; }
.changelog-head { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:10px; }
.changelog-head strong { color:var(--accent2); font-size:15px; }
.changelog-list { display:flex; flex-direction:column; gap:8px; }
.changelog-item { display:flex; gap:10px; align-items:baseline; padding:8px 10px; background:var(--panel); border:1px solid var(--line); border-radius:10px; }
.changelog-date { flex:0 0 auto; color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.changelog-text { color:var(--text); line-height:1.5; font-size:14px; }
.badge { font-size:12px; color:var(--gold); border:1px solid color-mix(in srgb,var(--gold) 45%,transparent); padding:4px 8px; border-radius:999px; letter-spacing:.03em; }
.tiles { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.tile { min-height:132px; text-align:left; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:14px; background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,0) 45%),var(--bg); color:var(--text); border:1px solid var(--line); padding:16px; transition:border-color .18s ease,transform .15s ease,box-shadow .18s ease,background .2s ease; }
.tile strong { font-size:18px; transition:color .18s ease; }
.tile span { color:var(--muted); line-height:1.45; font-weight:500; }
.tile:hover { border-color:var(--accent2); box-shadow:0 10px 28px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.05); }
.tile:hover strong { color:var(--accent2); }
.tile:active { transform:translateY(1px); }
.chat-card { overflow:hidden; height:calc(100vh - 150px); min-height:520px; display:flex; flex-direction:column; }
.chat-top { padding:12px 14px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; color:var(--muted); gap:10px; }
.chat-meta { display:flex; flex-direction:column; align-items:center; gap:2px; }
.messages { flex:1; overflow:auto; padding:18px 14px; display:flex; flex-direction:column; gap:12px; }
.bubble { max-width:86%; padding:12px 14px; border-radius:18px; line-height:1.55; white-space:pre-wrap; }
.bubble.user { align-self:flex-end; background:var(--user-bubble); color:white; border-bottom-right-radius:6px; }
.bubble.assistant { align-self:flex-start; background:var(--panel); border:1px solid var(--line); border-bottom-left-radius:6px; }
.composer { padding:12px; border-top:1px solid var(--line); display:flex; gap:10px; align-items:flex-end; }
.composer button { flex:0 0 auto; }
.admin-card { overflow:hidden; display:flex; flex-direction:column; }
.admin-card .chat-top strong { color:var(--text); }
.admin-body { padding:16px 14px; }
.admin-body h3 { margin:20px 0 10px; font-size:15px; color:var(--accent2); }
.admin-body h3:first-child { margin-top:0; }
.admin-row { display:flex; gap:8px; margin-bottom:8px; }
.admin-row select { width:auto; min-width:96px; }
select { border:1px solid var(--line); border-radius:14px; background:var(--bg); color:var(--text); padding:12px 10px; font:inherit; outline:none; transition:border-color .18s ease,box-shadow .18s ease,background .18s ease; }
select:focus { border-color:var(--accent2); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent2) 22%,transparent); }
.chk { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:14px; white-space:nowrap; }
.chk input { width:auto; accent-color:var(--accent); }
.full { width:100%; margin-bottom:6px; }
.admin-list { display:flex; flex-direction:column; gap:8px; }
.empty { color:var(--muted); font-size:13px; margin:4px 0; }
.row-item { display:flex; justify-content:space-between; align-items:center; gap:10px; background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:10px 12px; transition:border-color .18s ease,background .18s ease; }
.row-item:hover { border-color:color-mix(in srgb,var(--accent2) 45%,var(--line)); }
.row-item-main { display:flex; flex-direction:column; gap:3px; min-width:0; overflow:hidden; }
.row-item-actions { display:flex; gap:6px; flex:0 0 auto; }
.row-item-actions button { min-height:34px; padding:0 10px; }
.code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--ok); font-size:13px; }
.pill { font-size:11px; color:var(--muted); border:1px solid var(--line); padding:1px 7px; border-radius:999px; margin-left:6px; }
.pill-admin { color:var(--gold); border-color:color-mix(in srgb,var(--gold) 45%,transparent); }
.small-text { font-size:12px; }
.plaza-list { padding-top:14px; }
.plaza-post { background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:10px 14px; }
.plaza-meta { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:4px; }
.plaza-meta strong { font-size:13px; color:var(--accent2); }
.plaza-text { line-height:1.55; white-space:pre-wrap; word-break:break-word; }
.plaza-del { display:block; margin:6px 0 0 auto; min-height:28px; padding:0 10px; font-size:12px; }
.anon-chk { font-size:13px; padding-bottom:12px; white-space:nowrap; }
.anon-chk input { width:auto; accent-color:var(--accent); }
.plaza-real { margin-top:4px; font-size:12px; color:var(--muted); }
.draw-body { padding:16px 14px; display:flex; flex-direction:column; gap:14px; }
.draw-actions { display:flex; }
.draw-actions button { flex:1; }
.draw-list { gap:8px; }
.draw-item { align-items:stretch; padding:0; overflow:hidden; }
.draw-item.row-item-active { border-color:var(--accent2); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent2) 40%,transparent),0 8px 22px rgba(0,0,0,.2); }
.draw-select { flex:1; text-align:left; background:transparent; color:var(--text); border:0; border-radius:0; min-height:0; display:flex; flex-direction:column; gap:4px; padding:10px 12px; }
.draw-select strong { color:var(--text); }
.draw-del { align-self:center; margin-right:8px; min-height:34px; }
.draw-stage { border:1px solid var(--line); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; }
.draw-stage-top { padding:10px 12px; }
.draw-stage-top strong { color:var(--text); }
.draw-word { display:flex; flex-wrap:wrap; gap:8px; padding:12px; }
.draw-word p { flex-basis:100%; margin:0 0 4px; }
.draw-word-btn { min-height:44px; flex:1 1 auto; min-width:86px; }
.draw-canvas-wrap { padding:0 12px 12px; display:flex; flex-direction:column; gap:10px; }
.draw-canvas-wrap canvas { width:100%; height:auto; background:#fff; border:1px solid var(--line); border-radius:12px; touch-action:none; box-shadow:0 10px 26px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.03); }
.draw-canvas-wrap .row { justify-content:flex-end; }
.draw-canvas-wrap .row button { flex:0 0 auto; }
.draw-guess { padding:12px; }
.draw-guess button { flex:0 0 auto; }
.draw-image { padding:12px; }
.draw-image img { max-width:100%; border:1px solid var(--line); border-radius:12px; display:block; }
.draw-result { padding:12px; display:flex; flex-direction:column; gap:6px; }
.draw-result p { margin:0; line-height:1.5; }
.draw-target { color:var(--accent); }
.draw-good { color:var(--ok); }
.draw-waiting { padding:12px; margin:0; color:var(--muted); }
.draw-bar { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.lb-list { gap:8px; }
.lb-item { align-items:center; }
.lb-rank { flex:0 0 auto; min-width:30px; height:30px; display:flex; align-items:center; justify-content:center; border-radius:9px; font-weight:700; font-size:14px; background:var(--panel); border:1px solid var(--line); color:var(--muted); }
.lb-main { flex:1; min-width:0; }
.lb-score { flex:0 0 auto; font-weight:700; color:var(--accent2); font-variant-numeric:tabular-nums; }
.lb-first .lb-rank { color:var(--on-accent); background:var(--accent); border-color:var(--accent); }
.lb-second .lb-rank { color:var(--on-accent); background:var(--gold); border-color:var(--gold); }
.lb-third .lb-rank { color:var(--on-accent); background:var(--gold2); border-color:var(--gold2); }
.lb-head { margin:8px 0 2px; font-weight:700; font-size:13px; color:var(--accent2); }
.stage-lb { gap:6px; }
.stage-lb .lb-item { padding:8px 10px; }
.lb-group { display:flex; flex-direction:column; gap:10px; background:var(--bg); border:1px solid var(--line); border-radius:14px; padding:12px 14px; }
.lb-group:hover { border-color:color-mix(in srgb,var(--accent2) 45%,var(--line)); }
.lb-group-head { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.lb-group-head strong { color:var(--text); }
.lb-group-head .pill { margin-left:0; }
.lb-answer { color:var(--muted); font-size:13px; }
.lb-answer strong { color:var(--accent); }
.lb-group-body { display:flex; flex-direction:column; gap:6px; }
.lb-empty { margin:0; color:var(--muted); font-size:13px; padding:2px 0; }
.draw-reveal { align-self:flex-start; min-height:36px; }
.announce-block { margin-top:18px; border:1px solid var(--line); border-radius:16px; background:var(--bg); padding:12px 14px; }
.announce-head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:10px; }
.announce-head strong { color:var(--accent2); font-size:15px; }
.announce-list { display:flex; flex-direction:column; gap:8px; }
.announce-post { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px 12px; }
.announce-meta { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:4px; }
.announce-meta strong { font-size:13px; color:var(--accent2); }
.announce-text { line-height:1.55; white-space:pre-wrap; word-break:break-word; }
.announce-form { display:flex; gap:8px; margin-top:12px; align-items:stretch; }
.announce-form input { flex:1; }
.announce-form button { flex:0 0 auto; }
.snake-card { overflow:hidden; }
.snake-body { padding:16px 14px; display:flex; flex-direction:column; gap:14px; align-items:center; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.snake-stats { display:flex; gap:18px; width:100%; justify-content:center; }
.snake-stat { color:var(--muted); font-size:13px; letter-spacing:.05em; }
.snake-stat strong { color:var(--accent2); font-variant-numeric:tabular-nums; margin-left:6px; }
.snake-screen { width:min(320px,100%); background:#05070c; border:2px solid color-mix(in srgb,var(--accent) 70%,transparent); border-radius:10px; box-shadow:0 0 18px color-mix(in srgb,var(--accent) 35%,transparent),inset 0 0 22px rgba(0,0,0,.65); padding:6px; }
.snake-screen canvas { display:block; width:100%; height:auto; image-rendering:pixelated; background:#05070c; }
.snake-controls { display:flex; gap:10px; justify-content:center; }
.snake-controls button { font-family:inherit; }
.snake-dpad { display:flex; flex-direction:column; align-items:center; gap:6px; }
.snake-dpad-row { display:flex; gap:6px; }
.snake-dir { width:56px; height:56px; min-height:0; padding:0; font-size:18px; line-height:1; background:var(--bg); color:var(--accent2); border:1px solid var(--line); border-radius:12px; }
.snake-dir:hover:not(:disabled) { border-color:var(--accent2); box-shadow:0 0 10px color-mix(in srgb,var(--accent2) 35%,transparent); }
.snake-dir:active:not(:disabled) { transform:translateY(1px); }
#snakeMsg { text-align:center; }
.snake-screen.game-over { border-color:color-mix(in srgb,#ff5470 72%,transparent); box-shadow:0 0 22px rgba(255,84,112,.35),inset 0 0 22px rgba(0,0,0,.65); }
.snake-screen.paused { filter:saturate(.55) brightness(.82); }
.snake-screen.paused canvas { animation:snake-dim .2s ease; }
@keyframes snake-dim { from { opacity:.5; } to { opacity:1; } }
@media (max-width:560px) { .app{padding:16px 12px max(16px,env(safe-area-inset-bottom));} h1{font-size:30px;} .row,.tiles{grid-template-columns:1fr; flex-direction:column;} .hero{flex-direction:column; align-items:stretch; gap:14px;} .hero-side{flex-direction:row; justify-content:space-between; align-items:center;} .chat-card{height:calc(100vh - 138px); min-height:460px;} .bubble{max-width:92%;} .admin-row{flex-wrap:wrap;} .admin-row select{flex:1;} .announce-form{flex-direction:column;} .announce-form button{width:100%;} }