.grokodyssey-body .cz-status { background: linear-gradient(135deg, rgba(30,110,80,.55), rgba(4,16,28,.6)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; font-family: Inter, system-ui, sans-serif; font-weight: 500; color: #e8eeff; transition: background .3s; }
.grokodyssey-body .gs-k.ac { background: linear-gradient(180deg, #ffd166, #b07a1a); color: #0c0618; }
.grokodyssey-body .cz-app.game-wrap { max-height: 100dvh; overflow: hidden; box-sizing: border-box; }
.grokodyssey-body .cz-main { min-height: 0; overflow: hidden; }
.grokodyssey-body .cz-left.panel, .grokodyssey-body .cz-right.panel { max-height: 100%; overflow: auto; }
.grokodyssey-body #cv { background: transparent; border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08), 0 0 40px rgba(74,224,216,.12); }
.gt-nav { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:4px 0 4px; }
.gt-acts { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:3px; margin:0 0 4px; }
.gt-b { font:600 .72rem Inter,system-ui,sans-serif; letter-spacing:.01em; padding:6px 2px; border-radius:10px; border:1px solid rgba(255,255,255,.14); background:linear-gradient(180deg,rgba(52,60,92,.75),rgba(20,24,40,.8)); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); box-shadow:0 2px 8px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.08); color:#e8eeff; transition:background .15s, transform .08s, box-shadow .15s; cursor:pointer; touch-action:none; user-select:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gt-b b { color:#ffd166; font-weight:800; }
.gt-b:hover { box-shadow:0 2px 12px rgba(255,209,102,.18), inset 0 1px 0 rgba(255,255,255,.12); }
.gt-b:active, .gt-b.on { background:linear-gradient(180deg,#7affc0,#2aa878); color:#140f04; transform:translateY(1px); }
.gt-b.dim { opacity:.4; }
.gt-hint { margin:0 0 6px; font:500 .72rem Inter,system-ui,sans-serif; color:#b8c4e4; min-height:2.2em; line-height:1.25; }
@media (max-height: 700px) { .gt-b { padding:4px 2px; font-size:.66rem; } .gt-hint { font-size:.64rem; margin:0 0 3px; } }
@media (max-height: 640px) { .gt-hint { display:none; } }
@media (max-height: 700px) { .grokodyssey-body .cz-status { max-height: 3.9em; overflow: hidden; } }

/* modern glass look for the page around the board */
.grokodyssey-body { font-family: Inter, system-ui, sans-serif; }
.grokodyssey-body .cz-left.panel, .grokodyssey-body .cz-right.panel { background: linear-gradient(180deg, rgba(14,40,54,.55), rgba(4,12,20,.6)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; }
.grokodyssey-body .gt-nav .gt-b, .grokodyssey-body .gs-k { border-radius: 12px; }
.grokodyssey-body .cz-hud, .grokodyssey-body .hud { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.grokodyssey-body .gs-k { background: linear-gradient(180deg, rgba(58,68,104,.85), rgba(22,26,44,.9)) !important; border: 1px solid rgba(255,255,255,.14) !important; box-shadow: 0 4px 14px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.10) !important; color: #eef2fb !important; font-family: Inter, system-ui, sans-serif !important; transition: transform .08s, background .15s; }
.grokodyssey-body .gs-k.ac { background: linear-gradient(180deg, #ffd166, #c08a2a) !important; color: #140f04 !important; }
.grokodyssey-body .gs-k:active, .grokodyssey-body .gs-k.on { transform: translateY(1px) scale(.98); background: linear-gradient(180deg, #ffd166, #c08a2a) !important; color: #140f04 !important; }

/* three.js layer sits exactly under the transparent HUD canvas */
.grokodyssey-body .gs-wrap { position: relative; }
.grokodyssey-body #gl { position: absolute; z-index: 0; border-radius: 16px; display: block; background: #07060a; pointer-events: none; }
.grokodyssey-body #cv { position: relative; z-index: 1; }
.grokodyssey-body .gs-over { z-index: 2; }
.grokodyssey-body { background: radial-gradient(ellipse at 30% 0%, #0e4a3a 0%, #062030 55%, #020a10 100%) fixed; }
.grokodyssey-body #gl { background: #02101a; }
.grokodyssey-body #cv { cursor: crosshair; }

/* never let the three columns overflow the window: centre safely and keep panel content inside its panel */
.grokodyssey-body .cz-main { justify-content: safe center; max-width: 100%; }
.grokodyssey-body .cz-left.panel, .grokodyssey-body .cz-right.panel { overflow-x: hidden; min-width: 0; }
.grokodyssey-body .cz-left.panel > *, .grokodyssey-body .cz-right.panel > * { min-width: 0; max-width: 100%; }

/* narrower windows: high scores go under the board and stretch across */
.grokodyssey-body .cz-main.mid { grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "left center" "left right"; }
.grokodyssey-body .cz-main.mid .cz-right.panel { min-height: 0; overflow-y: auto; }
.grokodyssey-body .cz-main.mid { width: 100%; justify-content: stretch; }
.grokodyssey-body .cz-main.mid #center { justify-self: center; }