/* Painel do jogo. Uma cor de acento (âmbar), texto quase branco, fundo sempre a cena. */
.gs-root { position: relative; width: 100%; height: 100%; overflow: hidden; background: #05070b; touch-action: none; user-select: none; -webkit-user-select: none; }
.gs-view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.gs-hud { position: absolute; inset: 0; pointer-events: none; color: #eef1f5; font: 500 13px/1.3 "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --accent: #ffb14a; --pad: clamp(12px, 2.4vw, 28px); }

/* faixas de cinema: fechadas na abertura e no fim, recolhidas durante o jogo */
.gs-bar { position: absolute; left: 0; right: 0; height: 12%; background: #000; transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.gs-bar-top { top: 0; transform: translateY(-100%); }
.gs-bar-bottom { bottom: 0; transform: translateY(100%); }
.gs-hud[data-mode="title"] .gs-bar, .gs-hud[data-mode="over"] .gs-bar, .gs-hud[data-mode="error"] .gs-bar { transform: none; }

.gs-head, .gs-score, .gs-gauges, .gs-perf { position: absolute; opacity: 0; transition: opacity .6s ease; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }
.gs-hud[data-mode="play"] :is(.gs-head, .gs-score, .gs-gauges, .gs-perf), .gs-hud[data-mode="paused"] :is(.gs-head, .gs-score, .gs-gauges, .gs-perf) { opacity: 1; }
.gs-head { left: var(--pad); top: var(--pad); max-width: 46%; }
.gs-name { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--accent); }
.gs-goal { margin-top: 4px; font-size: 13px; opacity: .78; }

.gs-score { right: var(--pad); top: calc(var(--pad) - 6px); text-align: right; }
.gs-score-value { font-size: clamp(30px, 5.2vw, 54px); font-weight: 200; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.gs-score-label { margin-top: 2px; font-size: 10px; letter-spacing: .28em; text-transform: uppercase; opacity: .7; }
.gs-pop { animation: gs-pop .28s ease-out; }
@keyframes gs-pop { from { transform: scale(1.12); color: var(--accent); } to { transform: none; } }

.gs-gauges { left: var(--pad); bottom: var(--pad); width: min(220px, 44%); display: grid; gap: 9px; }
.gs-gauge-label { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; opacity: .75; margin-bottom: 4px; }
.gs-gauge-track { height: 3px; background: rgba(255, 255, 255, .16); border-radius: 2px; overflow: hidden; }
.gs-gauge-fill { height: 100%; background: #eef1f5; transform-origin: left; transition: transform .18s ease-out, background-color .3s; }
.gs-low .gs-gauge-fill { background: #ff5a3c; }
.gs-low .gs-gauge-label { color: #ff8a70; opacity: 1; }

.gs-perf { right: var(--pad); bottom: var(--pad); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; opacity: 0; font-variant-numeric: tabular-nums; }
.gs-hud[data-mode="play"] .gs-perf, .gs-hud[data-mode="paused"] .gs-perf { opacity: .5; }

.gs-say { position: absolute; left: 50%; bottom: 20%; transform: translate(-50%, 8px); font-size: clamp(14px, 2.2vw, 20px); font-weight: 300; letter-spacing: .14em; text-transform: uppercase; text-align: center; max-width: 86%; opacity: 0; transition: opacity .35s, transform .35s; text-shadow: 0 2px 14px rgba(0, 0, 0, .8); }
.gs-say.gs-on { opacity: 1; transform: translate(-50%, 0); }

.gs-card { position: absolute; left: 50%; top: 50%; width: min(86%, 620px); transform: translate(-50%, -46%); text-align: center; opacity: 0; transition: opacity .7s ease, transform .9s cubic-bezier(.2, .7, .2, 1); text-shadow: 0 2px 22px rgba(0, 0, 0, .75); }
.gs-card.gs-on { opacity: 1; transform: translate(-50%, -50%); }
/* a assinatura "Game Studio" do cartão de título vai no azul da Integralis; o resto do HUD segue o acento do jogo */
.gs-card-kicker { font-size: 11px; letter-spacing: .42em; text-transform: uppercase; color: #7fd6f0; }
.gs-card-title { margin: 10px 0 12px; font-size: clamp(34px, 8vw, 84px); font-weight: 200; line-height: 1; letter-spacing: .06em; text-transform: uppercase; overflow-wrap: anywhere; }
.gs-card-text { font-size: clamp(13px, 1.9vw, 16px); opacity: .82; overflow-wrap: anywhere; }
.gs-card-hint { margin-top: 26px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; animation: gs-breathe 2.4s ease-in-out infinite; }
.gs-card.gs-error .gs-card-kicker { color: #ff7a5c; }
.gs-card.gs-error .gs-card-title { font-size: clamp(22px, 4vw, 34px); }
@keyframes gs-breathe { 50% { opacity: .35; } }

.gs-stick { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; transition: opacity .15s; }
.gs-stick.gs-on { opacity: 1; }
.gs-stick::before { content: ""; position: absolute; left: -56px; top: -56px; width: 112px; height: 112px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 50%; }
.gs-knob { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .28); }

@media (prefers-reduced-motion: reduce) { .gs-bar, .gs-card, .gs-say { transition: none; } .gs-card-hint, .gs-pop { animation: none; } }