:root {
  --ink: #fff;
  --gold: #ffd21e;
  --hot: #ff4b2b;
  --panel: rgba(12, 12, 16, 0.72);
  --font: "Impact", "Haettenschweiler", "Arial Narrow Bold", "Arial Black", sans-serif;
  --body: "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0b0b0d; overflow: hidden; color: var(--ink); font-family: var(--body); }
#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
.hidden { display: none !important; }

/* ---------------- HUD ---------------- */
#hud { position: fixed; inset: 0; pointer-events: none; font-family: var(--font); text-shadow: 3px 3px 0 #000, -1px -1px 0 #000; }
#hud-tl { position: absolute; top: 2.2vh; left: 2.4vw; }
#score { font-size: 5.2vh; letter-spacing: 0.02em; font-style: italic; }
#special { position: relative; width: 26vh; height: 2.2vh; margin-top: 0.6vh; border: 2px solid #fff; background: rgba(0,0,0,.5); transform: skewX(-18deg); overflow: hidden; }
#special-fill { position: absolute; inset: 0; width: 0%; background: linear-gradient(90deg, #ffb000, #ffe45c); }
#special span { position: absolute; left: 8px; top: 50%; transform: translateY(-50%) skewX(18deg); font-size: 1.6vh; color: #000; text-shadow: none; opacity: 0; }
#special.full { border-color: var(--gold); box-shadow: 0 0 16px var(--gold); animation: pulse .5s infinite alternate; }
#special.full span { opacity: 1; }
@keyframes pulse { from { filter: brightness(1); } to { filter: brightness(1.6); } }
#hud-tc { position: absolute; top: 2vh; left: 50%; transform: translateX(-50%); }
#timer { font-size: 5vh; font-style: italic; }
#timer.low { color: var(--hot); animation: pulse .5s infinite alternate; }
#hud-tr { position: absolute; top: 2.2vh; right: 2.4vw; text-align: right; }
#letters { font-size: 4.4vh; letter-spacing: 0.3em; }
#letters b { color: rgba(255,255,255,.22); font-weight: normal; }
#letters b.got { color: var(--gold); }
#goals { list-style: none; margin: 0.8vh 0 0; padding: 0; font-family: var(--body); font-weight: 700; font-size: 1.7vh; text-shadow: 1px 1px 0 #000; }
#goals li { margin: 0.35vh 0; opacity: .9; }
#goals li.done { color: #7dff6a; }
#goals li.done::before { content: "✔ "; }
#combo { position: absolute; bottom: 13vh; left: 0; right: 0; text-align: center; }
#combo-tricks { font-size: 3.1vh; max-width: 80vw; margin: 0 auto; line-height: 1.15; color: #fff; }
#combo-score { font-size: 4.8vh; color: var(--gold); font-style: italic; margin-top: .4vh; }
#combo.landed #combo-score { color: #7dff6a; animation: pop .45s ease-out; }
#combo.bailed #combo-tricks, #combo.bailed #combo-score { color: var(--hot); text-decoration: line-through; }
@keyframes pop { 0% { transform: scale(1.5); } 100% { transform: scale(1); } }
#balance { position: absolute; left: 50%; bottom: 30vh; width: 34vh; height: 1.6vh; transform: translateX(-50%);
  background: linear-gradient(90deg, #f33 0%, #fc3 22%, #5f5 40%, #5f5 60%, #fc3 78%, #f33 100%); border: 2px solid #000; border-radius: 1vh; }
#balance-needle { position: absolute; top: -0.9vh; width: 0.6vh; height: 3.4vh; left: 50%; background: #fff; border: 2px solid #000; transform: translateX(-50%); }
#mbalance { position: absolute; left: 62%; top: 38vh; width: 1.6vh; height: 26vh;
  background: linear-gradient(180deg, #f33 0%, #fc3 22%, #5f5 40%, #5f5 60%, #fc3 78%, #f33 100%); border: 2px solid #000; border-radius: 1vh; }
#mbalance-needle { position: absolute; left: -0.9vh; height: 0.6vh; width: 3.4vh; top: 50%; background: #fff; border: 2px solid #000; transform: translateY(-50%); }
#popups { position: absolute; top: 24vh; left: 0; right: 0; text-align: center; }
.popup { font-size: 4.2vh; color: var(--gold); font-style: italic; animation: rise 2.2s ease-out forwards; }
.popup.goal { color: #7dff6a; font-size: 5vh; }
.popup.bad { color: var(--hot); }
@keyframes rise { 0% { opacity: 0; transform: translateY(2vh) scale(1.3); } 12% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-4vh); } }
#fps { position: absolute; bottom: 1vh; right: 1vw; font-family: var(--body); font-size: 1.3vh; opacity: .6; text-shadow: none; }

/* ---------------- screens ---------------- */
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: safe center; overflow-y: auto; padding: 2vh 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(40,26,18,.55), rgba(0,0,0,.88)); z-index: 5; }
#loading { background: #0b0b0d; }
.logo { font-family: var(--font); text-align: center; line-height: .9; transform: skewX(-10deg); text-shadow: 5px 5px 0 #000; }
.logo span { display: block; font-size: 12vh; color: #e0562b; letter-spacing: .04em; }
.logo em { display: block; font-size: 6vh; color: #fff; font-style: normal; letter-spacing: .25em; }
.logo small { display: block; font-size: 3.2vh; color: var(--gold); letter-spacing: .5em; margin-top: 1vh; }
#load-bar { width: min(260px, 60vw); height: 6px; margin: 4vh auto 0; background: #222; border: 1px solid #555; overflow: hidden; flex: none; }
#load-fill { height: 100%; width: 0; background: linear-gradient(90deg, #e0562b, #ffd21e); transition: width .2s; }
#load-text { margin-top: 1.5vh; opacity: .8; font-size: 1.8vh; }
.menu-cols { display: flex; gap: 2.5vw; margin-top: 4vh; align-items: stretch; }
.panel { background: var(--panel); border: 2px solid rgba(255,255,255,.15); padding: 2vh 1.6vw; border-radius: 6px; max-width: 46vw; }
.panel h3 { font-family: var(--font); font-weight: normal; letter-spacing: .08em; color: var(--gold); margin: 0 0 1vh; font-size: 2.6vh; }
.controls { border-collapse: collapse; font-size: 1.65vh; }
.controls th { text-align: left; color: #aaa; font-weight: 600; padding: .4vh .8vw; }
.controls td { padding: .45vh .8vw; border-top: 1px solid rgba(255,255,255,.08); }
.controls td:first-child { color: #ddd; }
.controls td:not(:first-child) { font-weight: 700; }
.hint { font-size: 1.5vh; opacity: .75; line-height: 1.6; }
#menu-goals, #end-goals { list-style: none; padding: 0; margin: 0 0 2vh; font-size: 1.8vh; line-height: 1.8; }
#end-goals li.done { color: #7dff6a; }
#end-goals li.done::before { content: "✔ "; }
#end-goals li:not(.done)::before { content: "✘ "; color: var(--hot); }
button { font-family: var(--font); letter-spacing: .06em; cursor: pointer; }
button.big { display: block; margin: 1.2vh auto; padding: 1.2vh 3vw; font-size: 3vh; color: #000; background: var(--gold); border: 0; transform: skewX(-12deg); box-shadow: 4px 4px 0 #000; }
button.big:hover { background: #fff; }
.toggle { display: flex; gap: .6vw; margin-bottom: 1vh; }
.toggle button { background: #222; color: #ddd; border: 1px solid #555; padding: .6vh 1vw; font-size: 1.9vh; }
.toggle button.on { background: #e0562b; color: #fff; border-color: #e0562b; }
.focus { outline: 3px solid #7fd8ff; outline-offset: 4px; }
#modes button.mode { width: 100%; margin: 1vh 0 .2vh; background: #3a3a3a; color: #ddd; }
#modes button.mode.on { background: var(--gold); color: #000; }
#modes .hint { margin: 0 0 1vh; }
#stance { margin-top: .6vh; font-size: 2.2vh; color: #7fd8ff; letter-spacing: .12em; font-style: italic; min-height: 2.4vh; }
#freelog { margin-top: 1vh; font-family: var(--body); font-weight: 700; text-shadow: 1px 1px 0 #000; }
#free-best { font-size: 1.8vh; color: var(--gold); }
#recent { margin: .6vh 0 0; padding: 0; list-style: none; font-size: 1.6vh; max-width: 36vw; }
#recent li { margin: .3vh 0; opacity: .92; }
#recent li b { color: #7dff6a; }
#recent li:not(:first-child) { opacity: .6; }
#pause h1, #end h1 { font-family: var(--font); font-size: 9vh; margin: 0 0 2vh; letter-spacing: .08em; font-weight: normal; transform: skewX(-10deg); text-shadow: 5px 5px 0 #000; }
#end-score { font-family: var(--font); font-size: 7vh; color: var(--gold); }
#end-best { font-size: 2vh; margin: 1vh 0 2vh; opacity: .85; }
@media (max-width: 800px) { .menu-cols { flex-direction: column; } .panel { max-width: 92vw; } }

#pause .pause-label { margin: 2vh 0 .6vh; color: #bbb; font-size: 1.9vh; letter-spacing: .1em; text-transform: uppercase; }
#pause .toggle { justify-content: center; }
.popup.gap { color: #6ad8ff; font-size: 3.6vh; }
#gap-list { list-style: none; padding: 0; margin: 0 auto; width: min(560px, 92vw); columns: 2; column-gap: 2vw; font-size: 1.7vh; text-align: left; }
#gap-list li { display: flex; justify-content: space-between; color: #777; padding: .15vh 0; break-inside: avoid; }
#gap-list li.got { color: #eee; }
#gap-list li.got b { color: #6ad8ff; }
#gap-list b { font-weight: normal; margin-left: 1vw; }