body { font-family: 'Quicksand', sans-serif; }
[hidden] { display: none !important; }

body.gust-page { background: radial-gradient(120% 80% at 50% 0%, #1e3a5f 0%, #0b1220 70%); min-height: 100vh; margin: 0; color: #e2e8f0; }
.g-app { max-width: 560px; margin: 0 auto; padding: 10px 12px 18px; box-sizing: border-box; }
.g-card { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.g-top { width: 100%; display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.g-spacer { flex: 1 1 auto; }
.g-chip { background: rgba(15,23,42,.65); border: 1px solid rgba(148,163,184,.25); border-radius: 999px; padding: 5px 11px; font-weight: 700; font-size: 13px; white-space: nowrap; color: #e0f2fe; }
.g-chip b { color: #fde047; }
.g-btn { font-family: inherit; font-weight: 700; font-size: 14px; color: #e0f2fe; background: rgba(30,41,59,.9); border: 1px solid rgba(125,211,252,.35); border-radius: 12px; padding: 9px 16px; cursor: pointer; transition: transform .08s, background .15s; -webkit-tap-highlight-color: transparent; white-space: nowrap; }
.g-btn:hover { background: rgba(51,65,85,.95); }
.g-btn:active { transform: scale(.96); }
.g-btn:focus-visible, .g-mode:focus-visible { outline: 3px solid #fde047; outline-offset: 2px; }
.g-btn-icon { padding: 6px 10px; font-size: 12px; border-radius: 10px; }
.g-btn-sm { padding: 6px 14px; font-size: 13px; min-width: 76px; }
.g-btn-play { background: linear-gradient(180deg, #38bdf8, #0284c7); border-color: #bae6fd; color: #04263d; font-size: 18px; padding: 12px 40px; letter-spacing: .08em; box-shadow: 0 6px 18px rgba(14,165,233,.4); }
.g-btn-play:hover { background: linear-gradient(180deg, #7dd3fc, #0ea5e9); }

.g-stage { position: relative; border-radius: 18px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(148,163,184,.25); background: #0b1220; touch-action: none; margin: 0 auto; }
#gCanvas { display: block; touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; }

.g-ov { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; background: rgba(8,15,32,.78); backdrop-filter: blur(3px); overflow-y: auto; z-index: 5; }
.g-ov > :first-child { margin-top: auto; }
.g-ov > :last-child { margin-bottom: auto; }
.g-ov-inner { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 16px; text-align: center; }
.g-ov-start { background: linear-gradient(180deg, rgba(56,189,248,.28), rgba(8,15,32,.9) 60%); }
.g-logo { font-size: 44px; line-height: 1; filter: drop-shadow(0 6px 10px rgba(0,0,0,.4)); }
.g-title { margin: 0; font-size: 46px; font-weight: 700; letter-spacing: .22em; color: #fff; text-shadow: 0 4px 18px rgba(56,189,248,.6); padding-left: .22em; }
.g-h2 { margin: 0 0 4px; font-size: 22px; letter-spacing: .14em; color: #fff; text-align: center; }
.g-tag { margin: 0; color: #bae6fd; font-weight: 600; font-size: 15px; }
.g-modes { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; width: 100%; }
.g-mode { font-family: inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 88px; padding: 10px 14px; border-radius: 14px; border: 2px solid rgba(125,211,252,.3); background: rgba(15,23,42,.7); color: #cbd5e1; font-weight: 700; cursor: pointer; transition: transform .08s, border-color .15s, background .15s; -webkit-tap-highlight-color: transparent; }
.g-mode:active { transform: scale(.96); }
.g-mode.on { border-color: #38bdf8; background: rgba(14,116,144,.55); color: #fff; box-shadow: 0 0 0 3px rgba(56,189,248,.2); }
.g-mode-n { font-size: 16px; }
.g-mode-s { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #fde047; }
.g-mode-desc { margin: 0; min-height: 2.6em; color: #cbd5e1; font-size: 14px; font-weight: 600; max-width: 300px; }
.g-mode-best { margin: 0; color: #fde047; font-weight: 700; font-size: 13px; }

.g-ready { position: absolute; left: 0; right: 0; top: 36%; text-align: center; pointer-events: none; z-index: 3; animation: gPulse 1.6s ease-in-out infinite; }
.g-ready-txt { font-size: 22px; font-weight: 700; letter-spacing: .1em; color: #fff; text-shadow: 0 3px 12px rgba(15,23,42,.7); }
.g-ready-sub { margin-top: 4px; font-size: 14px; font-weight: 600; color: #e0f2fe; text-shadow: 0 2px 8px rgba(15,23,42,.7); }
@keyframes gPulse { 0%,100% { opacity: .75; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }
.g-count { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 96px; font-weight: 700; color: #fff; text-shadow: 0 6px 24px rgba(15,23,42,.7); pointer-events: none; z-index: 4; }

/* Options: opaque, top-aligned, scrolls */
.g-ov-opts { background: #0b1220; backdrop-filter: none; }
.g-opts-scroll { display: flex; flex-direction: column; gap: 10px; padding: 16px 16px 18px; }
.g-opts-scroll > :first-child { margin-top: 0; }
.g-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.g-lab { font-weight: 700; color: #e2e8f0; font-size: 15px; }
#trophy-list { max-height: 240px; overflow-y: auto; text-align: left; padding: 8px; border-radius: 12px; background: rgba(30,41,59,.6); font-size: 13px; }
.g-foot { margin: 2px 0 0; font-size: 13px; color: #94a3b8; text-align: center; font-weight: 600; }

.g-toast { position: absolute; left: 50%; bottom: 46px; transform: translate(-50%, 8px); background: rgba(15,23,42,.92); color: #e0f2fe; padding: 8px 14px; border-radius: 12px; font-size: 13px; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 8; max-width: 90%; text-align: center; }
.g-toast.on { opacity: 1; transform: translate(-50%, 0); }
#beta-report-trigger { display: none !important; }

/* narrow */
.g-app.tight .g-title { font-size: 36px; }
.g-app.tight .g-mode { min-width: 0; flex: 1 1 0; padding: 8px 4px; }
.g-app.tight .g-modes { flex-wrap: nowrap; gap: 6px; }
.g-app.tight .g-mode-n { font-size: 14px; }
.g-app.tight .g-btn-icon { padding: 6px 8px; font-size: 11px; }
.g-app.tight .g-chip { padding: 4px 8px; font-size: 12px; }
.g-app.compact .g-logo { display: none; }
.g-app.compact .g-ov-inner { gap: 6px; padding: 10px; }
.g-app.compact .g-title { font-size: 32px; }
.g-app.compact .g-tag { display: none; }
.g-app.compact .g-mode-desc { min-height: 0; }

/* short landscape: board left, controls in a right column */
.g-app.land { max-width: none; padding: 6px 10px; }
.g-app.land .g-card { flex-direction: row; align-items: flex-start; justify-content: center; gap: 12px; }
.g-app.land .g-top { order: 2; width: 150px; flex-direction: column; align-items: stretch; flex-wrap: wrap; }
.g-app.land .g-top .g-spacer { display: none; }
.g-app.land .g-btn-icon { padding: 9px 10px; }
.g-app.land .g-stage { order: 1; margin: 0; }
.g-app.land .g-foot { display: none; }
@media (prefers-reduced-motion: reduce) { .g-ready { animation: none; } }