:root {
--ink: #10131a;
--muted: #596171;
--paper: #f8fbff;
--panel: #ffffff;
--line: #10131a;
--blue: #0096ff;
--red: #ff3b30;
--amber: #ffb000;
--green: #22c55e;
--violet: #7c3aed;
--game-vh: 100svh;
--game-vw: 100vw;
}

* {
box-sizing: border-box;
}

html,
body {
margin: 0;
min-height: 100%;
}

body {
font-family: Arial, Helvetica, sans-serif;
background: #eef5ff;
color: var(--ink);
overflow: hidden;
}

body.leaderboard-body {
overflow: auto;
}

button,
input,
textarea {
font: inherit;
}

a {
color: inherit;
}

.game-shell {
height: var(--game-vh);
overflow: hidden;
background: #eef5ff;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
}

.game-screen {
display: none;
height: var(--game-vh);
overflow-y: auto;
}

.game-screen.active {
display: block;
}

.game-shell.level-active .game-screen {
height: 100%;
min-height: 0;
grid-row: 2;
}

.podium-panel,
.score-strip,
.level-panel,
.entry-panel {
width: min(1120px, calc(100% - 32px));
margin: 0 auto;
}

.game-hero {
position: relative;
min-height: var(--game-vh);
padding: clamp(12px, 2svh, 20px) 0 clamp(24px, 5svh, 48px);
overflow-x: hidden;
overflow-y: auto;
background:
linear-gradient(180deg, rgba(6, 10, 19, 0.1) 0%, rgba(6, 10, 19, 0.18) 44%, rgba(238, 245, 255, 0.98) 100%),
radial-gradient(circle at 22% 24%, rgba(255, 176, 0, 0.42) 0 10%, transparent 27%),
radial-gradient(circle at 78% 18%, rgba(0, 150, 255, 0.34) 0 12%, transparent 32%),
linear-gradient(116deg, transparent 0 19%, #10131a 19.2% 47%, transparent 47.2%),
linear-gradient(64deg, transparent 0 51%, #10131a 51.2% 78%, transparent 78.2%),
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.9) 0 36px, transparent 36px 76px),
linear-gradient(135deg, #f7fbff 0%, #dbeafe 42%, #fff3d0 100%);
}

.game-nav {
position: relative;
z-index: 2;
width: min(1120px, calc(100% - 32px));
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: clamp(8px, 1.8svh, 12px) 0 clamp(14px, 3svh, 24px);
}

.brand-link,
.nav-links {
display: flex;
align-items: center;
gap: 10px;
}

.brand-link,
.nav-links a,
.secondary-action,
.primary-action {
text-decoration: none;
font-weight: 800;
}

.brand-link img {
width: 44px;
height: 44px;
object-fit: contain;
}

.nav-links {
flex-wrap: wrap;
justify-content: flex-end;
font-size: 0.92rem;
color: var(--muted);
}

.nav-links a {
padding: 8px 10px;
border: 2px solid transparent;
border-radius: 4px;
}

.nav-links a:hover,
.nav-links a:focus-visible {
border-color: var(--line);
color: var(--ink);
outline: none;
}

.hero-grid {
position: relative;
z-index: 1;
width: min(1120px, calc(100% - 32px));
min-height: calc(var(--game-vh) - clamp(88px, 14svh, 116px));
display: flex;
align-items: center;
margin: 0 auto;
}

.hero-copy {
max-width: min(760px, 68vw);
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(16px, 4svh, 48px) 0;
color: #f8fbff;
text-shadow: 0 3px 0 #05070a, 0 14px 34px rgba(5, 7, 10, 0.52);
}

.eyebrow {
margin: 0 0 10px;
font-size: 0.78rem;
font-weight: 900;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--red);
text-shadow: 0 2px 0 #fff, 0 6px 18px rgba(5, 7, 10, 0.36);
}

h1,
h2 {
margin: 0;
line-height: 1;
}

h1 {
font-size: clamp(3.4rem, min(10vw, 14svh), 7.2rem);
max-width: 12.5ch;
letter-spacing: 0;
color: #f8fbff;
-webkit-text-stroke: clamp(1px, 0.16vw, 2px) #05070a;
paint-order: stroke fill;
text-shadow: 4px 4px 0 #05070a, 0 18px 40px rgba(5, 7, 10, 0.56);
}

h2 {
font-size: clamp(1.7rem, 4vw, 3rem);
}

.hero-text {
max-width: 620px;
margin: clamp(12px, 2.2svh, 22px) 0 0;
font-size: clamp(1rem, min(2.2vw, 2.6svh), 1.45rem);
line-height: 1.45;
color: #ffffff;
font-weight: 800;
}

.username-prompt label,
.username-prompt p {
color: #ffffff;
text-shadow: 0 2px 0 #05070a, 0 8px 18px rgba(5, 7, 10, 0.45);
}

.hero-actions,
.level-controls,
.screen-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
margin-top: clamp(14px, 2.8svh, 24px);
}

.username-prompt {
display: grid;
gap: 8px;
max-width: 360px;
margin-top: clamp(14px, 2.8svh, 24px);
}

.username-prompt label {
font-weight: 900;
}

.username-prompt input {
width: 100%;
border: 3px solid var(--line);
border-radius: 6px;
padding: 12px;
background: #fff;
font-weight: 800;
}

.username-prompt p {
margin: 0;
color: #ffffff;
font-size: 0.9rem;
font-weight: 800;
text-shadow: 0 2px 0 #05070a, 0 8px 18px rgba(5, 7, 10, 0.45);
}

.username-prompt p:empty {
display: none;
}

.primary-action,
.secondary-action {
min-height: 48px;
border: 3px solid var(--line);
border-radius: 6px;
padding: 12px 18px;
cursor: pointer;
box-shadow: 4px 4px 0 var(--line);
text-shadow: none;
transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.primary-action {
background: var(--red);
color: #fff;
}

.hero-launch-action {
min-height: clamp(54px, 7svh, 64px);
padding: clamp(13px, 2svh, 16px) clamp(22px, 3vw, 28px);
font-size: clamp(1.08rem, min(2vw, 2.4svh), 1.22rem);
}

.hero-leaderboard-action {
min-height: clamp(50px, 6svh, 58px);
background: #ffffff;
}

.secondary-action {
background: #fff;
color: var(--ink);
display: inline-flex;
align-items: center;
justify-content: center;
}

.primary-action:hover,
.secondary-action:hover,
.primary-action:focus-visible,
.secondary-action:focus-visible {
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0 var(--line);
outline: none;
}

.primary-action:disabled,
.secondary-action:disabled,
.level-tab:disabled {
opacity: 0.55;
cursor: not-allowed;
transform: none;
box-shadow: 4px 4px 0 var(--line);
}

.podium-panel,
.entry-panel,
.level-panel {
border: 3px solid var(--line);
background: var(--panel);
box-shadow: 6px 6px 0 var(--line);
}

.game-shell.launching .game-hero,
.game-shell.launching .podium-panel {
filter: blur(2px);
}

.launch-reveal {
position: fixed;
inset: 0;
z-index: 50;
display: grid;
place-items: center;
overflow: hidden;
background:
linear-gradient(180deg, rgba(6, 10, 19, 0.88), rgba(6, 10, 19, 0.7)),
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.95) 0 44px, transparent 44px 86px),
linear-gradient(110deg, #10131a 0 28%, #eef5ff 28.3% 33%, #10131a 33.3% 66%, #eef5ff 66.3% 71%, #10131a 71.3%);
animation: revealFade 1.55s ease forwards;
}

.launch-reveal[hidden] {
display: none;
}

.launch-track {
position: absolute;
inset: 0;
}

.launch-car {
position: absolute;
left: -180px;
width: 138px;
height: 44px;
border: 4px solid #05070a;
border-radius: 999px 34px 24px 999px;
background: var(--red);
box-shadow: 0 12px 0 rgba(0, 0, 0, 0.24);
animation: carZip 1.15s cubic-bezier(0.17, 0.72, 0.12, 1) forwards;
}

.launch-car::before,
.launch-car::after {
content: "";
position: absolute;
bottom: -13px;
width: 28px;
height: 28px;
border: 5px solid #05070a;
border-radius: 50%;
background: #eef5ff;
}

.launch-car::before {
left: 18px;
}

.launch-car::after {
right: 18px;
}

.car-red {
top: 30%;
background: #ff3b30;
}

.car-blue {
top: 48%;
background: #0096ff;
animation-delay: 0.16s;
transform: scale(0.92);
}

.car-gold {
top: 64%;
background: #ffb000;
animation-delay: 0.28s;
transform: scale(1.08);
}

@keyframes carZip {
0% {
left: -190px;
}

72% {
left: calc(100vw + 80px);
}

100% {
left: calc(100vw + 220px);
}
}

@keyframes revealFade {
0%,
72% {
opacity: 1;
}

100% {
opacity: 0;
}
}

.podium-panel {
display: grid;
grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
gap: 22px;
align-items: center;
padding: 24px;
align-content: center;
}

.game-screen:not(.active) {
display: none;
}

.podium-panel.game-screen.active {
display: grid;
}

.prize-list {
display: grid;
grid-template-columns: repeat(4, minmax(150px, 1fr));
gap: 10px;
padding: 0;
margin: 0;
list-style-position: inside;
}

.prize-list li {
min-height: 110px;
padding: 14px;
border: 2px solid var(--line);
border-radius: 6px;
background: #fff8df;
font-weight: 900;
}

.prize-list span {
display: block;
margin-top: 8px;
font-weight: 700;
color: var(--muted);
}

.fine-print {
grid-column: 1 / -1;
margin: 0;
color: var(--muted);
line-height: 1.45;
}

.rules-list {
grid-column: 1 / -1;
display: grid;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}

.rules-list li {
padding: 12px 14px;
border: 2px solid var(--line);
border-radius: 6px;
background: #f8fbff;
font-weight: 800;
line-height: 1.35;
}

.rules-tip {
grid-column: 1 / -1;
margin: 0;
padding: 12px 14px;
border-left: 5px solid var(--accent);
background: #fff9db;
color: var(--ink);
font-weight: 800;
line-height: 1.4;
}

.score-strip {
position: relative;
z-index: 5;
display: grid;
grid-template-columns: repeat(4, minmax(140px, 1fr));
gap: 10px;
width: min(1120px, calc(100% - 32px));
margin: 12px auto 8px;
pointer-events: auto;
}

.score-strip[hidden] {
display: none;
}

.score-strip div {
padding: 12px;
border: 3px solid var(--line);
background: #10131a;
color: #fff;
}

.score-strip span {
display: block;
font-size: 0.75rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #a7f3d0;
}

.score-strip strong {
display: block;
margin-top: 6px;
font-size: 1.25rem;
}

.level-panel,
.entry-panel {
display: none;
padding: 24px;
align-content: center;
}

.level-panel.active,
.entry-panel.active {
display: block;
}

.level-heading {
display: flex;
justify-content: space-between;
gap: 22px;
align-items: start;
}

.level-heading p:last-child {
max-width: 470px;
margin: 0;
line-height: 1.45;
color: var(--muted);
font-weight: 700;
}

.lights-grid {
display: grid;
grid-template-columns: repeat(5, minmax(46px, 78px));
gap: 14px;
justify-content: center;
margin: 34px auto 12px;
padding: 22px;
width: fit-content;
max-width: 100%;
border: 3px solid var(--line);
border-radius: 8px;
background: #151922;
}

.lights-grid span {
display: block;
aspect-ratio: 1;
border-radius: 999px;
border: 3px solid #05070a;
background: #3a4050;
box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.55);
}

.lights-grid span.red {
background: var(--red);
box-shadow: 0 0 24px rgba(255, 59, 48, 0.85);
}

.lights-grid span.green {
background: var(--green);
box-shadow: 0 0 24px rgba(34, 197, 94, 0.85);
}

.level-message {
min-height: 28px;
margin: 18px 0 0;
font-weight: 800;
color: var(--muted);
}

.canvas-wrap {
position: relative;
margin-top: 24px;
border: 3px solid var(--line);
background: #10131a;
overflow: hidden;
}

canvas {
display: block;
width: 100%;
height: auto;
touch-action: none;
}

.pause-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(16, 19, 26, 0.78);
color: #fff;
font-size: clamp(1.4rem, 4vw, 3rem);
font-weight: 900;
text-align: center;
padding: 24px;
}

.pause-overlay[hidden] {
display: none;
}

.attention-flash {
position: fixed;
inset: 0;
z-index: 1200;
display: grid;
place-items: center;
padding: 24px;
background:
radial-gradient(circle at center, rgba(255, 255, 255, 0.95) 0 18%, rgba(255, 214, 10, 0.92) 32%, rgba(255, 59, 48, 0.9) 100%);
color: #05070a;
text-align: center;
pointer-events: none;
opacity: 0;
}

.attention-flash.active {
animation: attentionFlash 3s ease-out both;
}

.attention-flash div {
max-width: 760px;
border: 5px solid #05070a;
border-radius: 8px;
background: #ffffff;
padding: clamp(20px, 5vw, 42px);
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
}

.attention-flash strong {
display: block;
font-size: clamp(2.2rem, 8vw, 5.8rem);
line-height: 0.92;
text-transform: uppercase;
}

.attention-flash span {
display: block;
margin-top: 14px;
font-size: clamp(1.1rem, 3vw, 2rem);
font-weight: 900;
}

.attention-flash[hidden] {
display: none;
}

@keyframes attentionFlash {
0% {
opacity: 0;
filter: brightness(1);
}
8%, 22%, 38% {
opacity: 1;
filter: brightness(1.35);
}
15%, 30% {
opacity: 0.35;
filter: brightness(0.9);
}
50%, 72% {
opacity: 1;
filter: brightness(1.12);
}
100% {
opacity: 0;
filter: brightness(1);
}
}

.strategy-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
margin-top: 24px;
}

.strategy-card {
border: 3px solid var(--line);
border-radius: 6px;
padding: 16px;
background: #f8fbff;
}

.strategy-card h3 {
margin: 0 0 10px;
font-size: 1.1rem;
}

.strategy-card p {
margin: 0 0 12px;
color: var(--muted);
line-height: 1.4;
font-weight: 700;
}

.choice-list {
display: grid;
gap: 8px;
}

.choice-list button {
border: 2px solid var(--line);
border-radius: 4px;
background: #fff;
padding: 10px;
font-weight: 800;
cursor: pointer;
}

.choice-list button.correct {
background: var(--green);
color: #08200f;
}

.choice-list button.incorrect {
background: #ffd4d1;
}

.code-box {
margin-top: 24px;
padding: 18px;
border: 3px dashed var(--line);
}

.code-box label,
form label {
display: grid;
gap: 8px;
font-weight: 900;
}

form input,
form textarea {
width: 100%;
border: 3px solid var(--line);
border-radius: 6px;
padding: 12px;
background: #fff;
}

.form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}

form {
display: grid;
gap: 16px;
}

form textarea {
min-height: 110px;
resize: vertical;
}

.check-row {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: 12px;
line-height: 1.4;
}

.check-row input {
width: 20px;
height: 20px;
margin-top: 2px;
}

.final-score-card {
display: inline-grid;
gap: 8px;
margin: 22px 0;
padding: 18px 22px;
border: 3px solid var(--line);
background: #10131a;
color: #fff;
box-shadow: 6px 6px 0 var(--line);
}

.final-score-card span {
font-size: 0.78rem;
font-weight: 900;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #a7f3d0;
}

.final-score-card strong {
font-size: 2.2rem;
line-height: 1;
}

.leaderboard-page {
min-height: 100svh;
padding: 18px 0 40px;
background:
linear-gradient(180deg, rgba(248, 251, 255, 0.92), rgba(238, 245, 255, 0.98)),
linear-gradient(116deg, transparent 0 20%, rgba(16, 19, 26, 0.16) 20.2% 46%, transparent 46.2%),
linear-gradient(64deg, transparent 0 54%, rgba(0, 150, 255, 0.16) 54.2% 78%, transparent 78.2%),
repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.86) 0 36px, transparent 36px 76px);
}

.leaderboard-nav,
.leaderboard-hero,
.leaderboard-board {
width: min(1120px, calc(100% - 32px));
margin: 0 auto;
}

.leaderboard-nav {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 10px 0 28px;
}

.leaderboard-hero {
padding: clamp(28px, 7svh, 72px) 0 clamp(18px, 4svh, 34px);
}

.leaderboard-hero h1 {
max-width: 13ch;
color: var(--ink);
-webkit-text-stroke: 0;
text-shadow: 3px 3px 0 #fff, 0 18px 38px rgba(16, 19, 26, 0.18);
}

.leaderboard-hero > p:last-of-type {
max-width: 720px;
margin: 18px 0 0;
font-weight: 800;
line-height: 1.45;
color: var(--muted);
}

.leaderboard-switch {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 22px;
}

.leaderboard-switch .secondary-action.active {
background: var(--red);
color: #fff;
}

.leaderboard-board {
padding: 22px;
border: 3px solid var(--line);
border-radius: 8px;
background: #fff;
box-shadow: 8px 8px 0 var(--line);
}

.leaderboard-board-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
}

.leaderboard-board-head h2 {
font-size: clamp(1.55rem, 3.4vw, 2.5rem);
}

.leaderboard-status {
margin: 0 0 14px;
font-weight: 800;
color: var(--muted);
}

.leaderboard-list {
display: grid;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}

.leaderboard-entry {
display: grid;
grid-template-columns: 70px minmax(0, 1fr) minmax(180px, auto);
gap: 14px;
align-items: center;
padding: 14px;
border: 2px solid var(--line);
border-radius: 6px;
background: #f8fbff;
}

.leaderboard-rank {
font-size: 1.3rem;
font-weight: 900;
color: var(--red);
}

.leaderboard-driver,
.leaderboard-score {
display: grid;
gap: 4px;
}

.leaderboard-driver strong,
.leaderboard-score strong {
font-size: 1.1rem;
}

.leaderboard-driver span,
.leaderboard-score span {
font-size: 0.86rem;
font-weight: 800;
color: var(--muted);
}

.leaderboard-score {
text-align: right;
}

.leaderboard-score .leaderboard-prize {
color: #7c3aed;
}

@media (max-width: 820px) {
.podium-panel,
.form-grid {
grid-template-columns: 1fr;
}

.game-hero {
min-height: var(--game-vh);
}

.prize-list,
.score-strip,
.strategy-grid {
grid-template-columns: 1fr;
}

.level-heading {
display: block;
}

.level-heading p:last-child {
margin-top: 12px;
}

}

@media (max-width: 820px) {
.leaderboard-board-head,
.leaderboard-nav {
align-items: flex-start;
flex-direction: column;
}

.leaderboard-entry {
grid-template-columns: 54px minmax(0, 1fr);
}

.leaderboard-score {
grid-column: 2;
text-align: left;
}
}

@media (max-height: 900px) and (min-width: 821px) {
.game-hero {
padding: 8px 0 16px;
}

.game-nav {
padding-top: 6px;
padding-bottom: 8px;
font-size: 0.9rem;
}

.brand-link img {
width: 36px;
height: 36px;
}

.hero-grid {
min-height: calc(var(--game-vh) - 62px);
align-items: flex-start;
}

.hero-copy {
padding: 8px 0 16px;
max-width: min(920px, 76vw);
}

.eyebrow {
margin-bottom: 6px;
}

h1 {
font-size: clamp(2.85rem, min(6vw, 7vh), 4.1rem);
max-width: 100%;
text-shadow: 3px 3px 0 #05070a, 0 14px 30px rgba(5, 7, 10, 0.5);
}

.hero-text {
font-size: clamp(0.95rem, 1.7svh, 1.12rem);
line-height: 1.35;
margin-top: 8px;
max-width: 540px;
}

.username-prompt,
.hero-actions {
margin-top: 10px;
}

.username-prompt {
gap: 6px;
}

.username-prompt input {
padding: 10px 12px;
}

.hero-launch-action {
min-height: 46px;
padding: 10px 18px;
font-size: 1rem;
}

.hero-leaderboard-action {
min-height: 44px;
padding: 10px 16px;
font-size: 1rem;
}
}

@media (max-height: 740px) and (min-width: 821px) {
.game-nav {
padding-top: 4px;
padding-bottom: 4px;
}

.brand-link img {
width: 32px;
height: 32px;
}

.hero-grid {
min-height: calc(var(--game-vh) - 48px);
}

.hero-copy {
padding: 4px 0 12px;
max-width: min(720px, 66vw);
}

h1 {
font-size: clamp(2.65rem, min(6.2vw, 7svh), 3.8rem);
max-width: 16ch;
}

.hero-text {
font-size: clamp(0.9rem, 1.55svh, 1rem);
max-width: 500px;
}

.username-prompt,
.hero-actions {
margin-top: 8px;
}
}

html.compact-game-hero .game-hero {
padding: 8px 0 16px;
}

html.compact-game-hero .game-nav {
padding-top: 6px;
padding-bottom: 8px;
font-size: 0.9rem;
}

html.compact-game-hero .brand-link img {
width: 36px;
height: 36px;
}

html.compact-game-hero .hero-grid {
min-height: calc(var(--game-vh) - 62px);
align-items: flex-start;
}

html.compact-game-hero .hero-copy {
padding: 8px 0 16px;
max-width: min(920px, 76vw);
}

html.compact-game-hero .eyebrow {
margin-bottom: 6px;
}

html.compact-game-hero h1 {
font-size: clamp(2.85rem, min(6vw, 7vh), 4.1rem);
max-width: 100%;
text-shadow: 3px 3px 0 #05070a, 0 14px 30px rgba(5, 7, 10, 0.5);
}

html.compact-game-hero .hero-text {
font-size: clamp(0.95rem, 1.7vh, 1.12rem);
line-height: 1.35;
margin-top: 8px;
max-width: 540px;
}

html.compact-game-hero .username-prompt,
html.compact-game-hero .hero-actions {
margin-top: 10px;
}

html.compact-game-hero .username-prompt {
gap: 6px;
}

html.compact-game-hero .username-prompt input {
padding: 10px 12px;
}

html.compact-game-hero .hero-launch-action {
min-height: 46px;
padding: 10px 18px;
font-size: 1rem;
}

html.compact-game-hero .hero-leaderboard-action {
min-height: 44px;
padding: 10px 16px;
font-size: 1rem;
}

html.ultra-compact-game-hero .game-nav {
padding-top: 4px;
padding-bottom: 4px;
}

html.ultra-compact-game-hero .brand-link img {
width: 32px;
height: 32px;
}

html.ultra-compact-game-hero .hero-grid {
min-height: calc(var(--game-vh) - 48px);
}

html.ultra-compact-game-hero .hero-copy {
padding: 4px 0 12px;
max-width: min(720px, 66vw);
}

html.ultra-compact-game-hero h1 {
font-size: clamp(2.65rem, min(6.2vw, 7vh), 3.8rem);
max-width: 16ch;
}

html.ultra-compact-game-hero .hero-text {
font-size: clamp(0.9rem, 1.55vh, 1rem);
max-width: 500px;
}

html.ultra-compact-game-hero .username-prompt,
html.ultra-compact-game-hero .hero-actions {
margin-top: 8px;
}

@media (max-width: 520px) {
.game-hero,
.podium-panel,
.score-strip,
.level-panel,
.entry-panel {
width: min(100% - 20px, 1120px);
}

.game-hero {
width: 100%;
}

.game-nav {
align-items: flex-start;
flex-direction: column;
}

.lights-grid {
grid-template-columns: repeat(5, minmax(36px, 1fr));
gap: 8px;
padding: 14px;
}

.hero-copy,
.level-panel,
.entry-panel,
.podium-panel {
padding: 18px;
}
}