.grokskyline-body .cz-status { background: linear-gradient(135deg, rgba(60,70,110,.55), rgba(20,24,40,.55)); 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; }
.grokskyline-body .gs-k.ac { background: linear-gradient(180deg, #ffd166, #b07a1a); color: #0c0618; }
.grokskyline-body .cz-app.game-wrap { max-height: 100dvh; overflow: hidden; box-sizing: border-box; }
.grokskyline-body .cz-main { min-height: 0; overflow: hidden; }
.grokskyline-body .cz-left.panel, .grokskyline-body .cz-right.panel { max-height: 100%; overflow: auto; }
.grokskyline-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(122,170,255,.10); }
.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,#5ff3ff,#2a9fc8); 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) { .grokskyline-body .cz-status { max-height: 3.9em; overflow: hidden; } }

/* modern glass look for the page around the board */
.grokskyline-body { font-family: Inter, system-ui, sans-serif; }
.grokskyline-body .cz-left.panel, .grokskyline-body .cz-right.panel { background: linear-gradient(180deg, rgba(30,36,58,.55), rgba(12,15,26,.55)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; }
.grokskyline-body .gt-nav .gt-b, .grokskyline-body .gs-k { border-radius: 12px; }
.grokskyline-body .cz-hud, .grokskyline-body .hud { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.grokskyline-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; }
.grokskyline-body .gs-k.ac { background: linear-gradient(180deg, #ffd166, #c08a2a) !important; color: #140f04 !important; }
.grokskyline-body .gs-k:active, .grokskyline-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 */
.grokskyline-body .gs-wrap { position: relative; }
.grokskyline-body #gl { position: absolute; z-index: 0; border-radius: 16px; display: block; background: #07060a; pointer-events: none; }
.grokskyline-body #cv { position: relative; z-index: 1; }
.grokskyline-body .gs-over { z-index: 2; }
.grokskyline-body { background: radial-gradient(ellipse at 30% 0%, #10243a 0%, #0a0f1c 55%, #06070e 100%) fixed; }
.grokskyline-body #gl { background: #0a1424; }
.grokskyline-body #cv { cursor: crosshair; }