/* ======================================================================================================================
   UGLY GAMES look for UGLY RUN on GrowBlocks (22 Oct 2026). The copy joins the UGLY toy family of UGLY MAZE
   (assets/maze-ui, src/maze-ui.js): Scenario art in assets/ui/ (key art, logo, icons, game-over backdrop), the maze's
   palette (bruise-purple ink, slime green, pumpkin, bone) with RUN's own green neon as the accent, chunky Lilita One
   lettering with a thick ink outline, rounded sticker panels and a ticket-shaped PLAY. Loaded after style.css; every
   rule is under body.gb (the GrowBlocks copy), so style.css stays the standalone site's pixel look. The voxel game world
   is unchanged.
   ====================================================================================================================== */
@font-face { font-family: 'UR Display'; src: url('../assets/ui-fonts/LilitaOne.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'UR Body'; src: url('../assets/ui-fonts/Nunito.ttf') format('truetype'); font-weight: 200 1000; font-display: swap; }
body.gb {
  --u-ink: #2a1240; --u-slime: #7cff4f; --u-slime2: #36d61b; --u-pumpkin: #ff8a1f; --u-bone: #fff4e0;
  --u-blush: #ff5a7a; --u-gold: #ffd23a; --u-dim: #c9a9e6; --u-soft: #eadcff;
  --u-glass: rgba(30, 13, 52, 0.88); --u-glass2: rgba(46, 21, 78, 0.92); --u-rim: rgba(124, 255, 79, 0.42);
  --u-display: 'UR Display', 'Lilita One', 'Arial Rounded MT Bold', sans-serif; --u-body: 'UR Body', Nunito, system-ui, sans-serif;
  background: #0b0616; font: 700 15px/1.35 var(--u-body); color: var(--u-bone);
}
body.gb * { font-family: inherit; }
body.gb .screen.center { background: radial-gradient(ellipse at 50% 30%, rgba(124, 255, 79, 0.1), rgba(11, 6, 22, 0.82) 62%); }
body.gb #loading { background: linear-gradient(90deg, rgba(11, 6, 22, 0.9), rgba(11, 6, 22, 0.35)), url('assets/ui/key-sm.webp') 70% 50%/cover no-repeat, #0b0616; }

/* --- sticker panels --- */
body.gb .card { clip-path: none; border: 3px solid var(--u-ink); border-radius: 22px; background: var(--u-glass); box-shadow: 0 8px 0 var(--u-ink), 0 18px 40px rgba(0, 0, 0, 0.45), inset 0 0 0 2px var(--u-rim); padding: 20px 22px; color: var(--u-bone); }
body.gb .card::after { display: none; }
body.gb h2 { font: 400 34px/1 var(--u-display); letter-spacing: 0.01em; color: var(--u-slime); -webkit-text-stroke: 7px var(--u-ink); paint-order: stroke fill; text-shadow: 0 5px 0 var(--u-ink), 0 0 26px rgba(124, 255, 79, 0.35); margin: 2px 0 14px; }
body.gb h2.gold-text { color: var(--u-gold); text-shadow: 0 5px 0 var(--u-ink); }
body.gb .lbl { font: 900 11px/1.2 var(--u-body); letter-spacing: 0.1em; color: var(--u-dim); }
body.gb .muted { font: 700 14px/1.4 var(--u-body); color: #d9c8ef; }
body.gb .muted.small { font-size: 12.5px; }

/* --- buttons: chunky toy keys; PLAY and RUN AGAIN are admission tickets with a torn-off stub --- */
body.gb button { font: 400 17px/1 var(--u-display); letter-spacing: 0.03em; padding: 12px 18px; border: 3px solid var(--u-ink); border-radius: 13px; background: linear-gradient(180deg, #4b2477, #34175a); color: var(--u-bone); box-shadow: 0 5px 0 var(--u-ink), inset 0 2px 0 rgba(255, 255, 255, 0.16); text-shadow: 0 2px 0 var(--u-ink); transition: transform 0.08s, filter 0.12s; }
body.gb button:hover { background: linear-gradient(180deg, #5a2c8e, #3d1b68); filter: none; transform: translateY(-1px); }
body.gb button:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--u-ink), inset 0 2px 0 rgba(255, 255, 255, 0.16); }
body.gb button.primary { background: linear-gradient(180deg, #b6ff8f, var(--u-slime) 45%, var(--u-slime2)); color: var(--u-ink); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45); box-shadow: 0 5px 0 #1f6b0c, 0 5px 0 1px var(--u-ink), inset 0 2px 0 rgba(255, 255, 255, 0.5); }
body.gb button.primary:hover { background: linear-gradient(180deg, #c8ffa8, #8dff63 45%, #44e126); }
body.gb button.gold { background: linear-gradient(180deg, #ffe58a, var(--u-gold) 50%, #f2b311); color: var(--u-ink); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); box-shadow: 0 5px 0 #7a5200, 0 5px 0 1px var(--u-ink), inset 0 2px 0 rgba(255, 255, 255, 0.5); }
body.gb button.gold:hover { background: linear-gradient(180deg, #fff0b0, #ffdc5c 50%, #ffc21f); }
body.gb button.x { background: linear-gradient(180deg, #2b2440, #120d1f); color: #fff; }
body.gb button.on { outline: 3px solid var(--u-slime); outline-offset: 1px; }
body.gb #btnPlay, body.gb #btnAgain { display: inline-flex; align-items: center; justify-content: space-between; gap: 0; padding: 14px 0 14px 28px; overflow: hidden; font-size: 34px; line-height: 1; border-radius: 14px; transform: rotate(-2deg); box-shadow: 0 7px 0 #1f6b0c, 0 7px 0 2px var(--u-ink), 0 0 30px rgba(124, 255, 79, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.5); animation: urTicket 2.4s 1s ease-in-out infinite; }
body.gb #btnPlay { order: -1; flex: 1 1 100%; }
body.gb #btnPlay::after, body.gb #btnAgain::after { content: ''; align-self: stretch; flex: none; width: 58px; margin: -14px 0 -14px 24px; border-left: 3px dashed rgba(42, 18, 64, 0.55); background: rgba(255, 244, 224, 0.38) url('assets/ui/icon-bolt.webp') center/38px no-repeat; }
body.gb #btnAgain { font-size: 26px; padding: 12px 0 12px 24px; }
body.gb #btnAgain::after { margin: -12px 0 -12px 20px; }
body.gb #btnPlay:active, body.gb #btnAgain:active { animation: none; transform: rotate(-2deg) translateY(4px); box-shadow: 0 3px 0 #1f6b0c, 0 3px 0 2px var(--u-ink); }
@keyframes urTicket { 0%, 100% { transform: rotate(-2deg) scale(1); } 50% { transform: rotate(-2deg) scale(1.03); } }
body.gb input, body.gb textarea { font: 800 16px var(--u-body); border: 3px solid var(--u-ink); border-radius: 12px; background: #140a24; color: var(--u-bone); box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(124, 255, 79, 0.25); }
body.gb input:focus, body.gb textarea:focus { box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.35), 0 0 0 3px var(--u-slime); }
body.gb input::placeholder { color: #7c6b98; }
body.gb .quality input[type=checkbox] { accent-color: var(--u-slime); }

/* --- MENU: the key art behind, the sticker card on the calm left --- */
body.gb #menu { justify-content: flex-start; padding: 16px clamp(16px, 5vw, 72px); background: linear-gradient(90deg, rgba(11, 6, 22, 0.88) 0, rgba(11, 6, 22, 0.62) 34%, rgba(11, 6, 22, 0.08) 62%, rgba(11, 6, 22, 0) 80%), url('assets/ui/key.webp') 72% 50%/cover no-repeat, #0b0616; }
body.gb .menu-card { width: min(470px, 100%); margin: auto 0; padding: 12px 20px 12px; text-align: center; }
body.gb .ur-kicker { font: 400 13px/1 var(--u-display); letter-spacing: 0.22em; color: var(--u-pumpkin); text-shadow: 0 2px 0 var(--u-ink); margin: 2px 0 0; }
body.gb .ur-logo { display: block; width: min(290px, 80%); height: auto; margin: 2px auto 0; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.5)); animation: urLogo 0.7s 0.05s cubic-bezier(0.2, 1.5, 0.3, 1) both; }
body.gb .ur-logo.small { width: 220px; animation: none; }
@keyframes urLogo { 0% { transform: scale(0.6) rotate(-6deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
body.gb .pitch { margin: 2px 0 8px; font: 800 13px/1.35 var(--u-body); letter-spacing: 0.04em; color: var(--u-soft); }
body.gb .ur-facts { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0 0 6px; padding: 0; }
body.gb .ur-facts li { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 2px; border-radius: 11px; background: var(--u-glass2); border: 2px solid var(--u-rim); box-shadow: 0 3px 0 var(--u-ink); font: 900 10.5px/1 var(--u-body); letter-spacing: 0.04em; color: var(--u-bone); transform: rotate(-1.5deg); }
body.gb .ur-facts li:nth-child(2) { transform: rotate(1.5deg); }
body.gb .ur-facts li img { width: 26px; height: 26px; }
body.gb .ur-facts li b { color: var(--u-slime); font-weight: 900; }
body.gb .menu-card .btns { gap: 10px; margin: 10px 0 6px; }
body.gb .menu-card .btns button:not(#btnPlay) { font-size: 15px; padding: 10px 14px; }
body.gb .gb-account { margin: 6px 0 2px; font: 800 12.5px/1.5 var(--u-body); letter-spacing: 0.03em; color: var(--u-soft); }
body.gb .gb-account b, body.gb .gb-xp b { color: var(--u-slime); }
body.gb .gb-signin { font: 400 14px/1 var(--u-display); letter-spacing: 0.03em; padding: 7px 12px; margin: 2px 4px; border: 3px solid var(--u-ink); border-radius: 11px; background: linear-gradient(180deg, #fff, #e8e2f4); color: var(--u-ink); text-shadow: none; box-shadow: 0 4px 0 var(--u-ink); }
body.gb .gb-signin:hover { background: #fff; }
body.gb .controls { gap: 4px 10px; font: 800 11px/1.3 var(--u-body); color: var(--u-dim); margin: 6px 0 2px; }
body.gb .controls b { font: 400 10px/1 var(--u-display); letter-spacing: 0.04em; color: var(--u-bone); background: var(--u-ink); border: 2px solid rgba(124, 255, 79, 0.5); border-radius: 6px; padding: 2px 5px 3px; margin-right: 2px; }
body.gb .quality { font: 900 11px/1 var(--u-body); letter-spacing: 0.08em; color: var(--u-dim); margin: 6px 0 2px; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
body.gb .quality input[type=range] { accent-color: var(--u-slime); }
body.gb .foot { font: 800 10px/1.6 var(--u-body); letter-spacing: 0.05em; color: #a996c4; margin-top: 6px; }
body.gb .foot a, body.gb .agree a { color: var(--u-gold); }

/* --- HUD: icon stickers in the corners, readable over the street --- */
body.gb #hud { padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 12px max(14px, env(safe-area-inset-left)); }
body.gb .hud-left { gap: 6px; align-items: flex-start; }
body.gb .stat { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 7px; row-gap: 1px; align-items: center; justify-items: start; padding: 4px 12px 5px 5px; border-radius: 14px; background: rgba(26, 12, 44, 0.72); border: 2.5px solid var(--u-ink); box-shadow: 0 3px 0 var(--u-ink), inset 0 0 0 1.5px var(--u-rim); }
body.gb .stat .ur-ico { grid-row: 1 / 3; width: 34px; height: 34px; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.35)); }
body.gb .stat .lbl { font-size: 9.5px; line-height: 1; color: var(--u-dim); }
body.gb .stat .val { font: 400 30px/0.95 var(--u-display); color: var(--u-bone); letter-spacing: 0.02em; -webkit-text-stroke: 5px var(--u-ink); paint-order: stroke fill; text-shadow: 0 3px 0 var(--u-ink); }
body.gb .stat:first-child { padding-right: 16px; }
body.gb .stat:first-child .ur-ico { width: 44px; height: 44px; }
body.gb .stat:first-child .val { font-size: 38px; color: var(--u-slime); text-shadow: 0 3px 0 var(--u-ink), 0 0 18px rgba(124, 255, 79, 0.35); }
body.gb .stat.small .ur-ico { width: 28px; height: 28px; }
body.gb .stat.small .val { font-size: 20px; color: var(--u-bone); text-shadow: 0 2px 0 var(--u-ink); -webkit-text-stroke: 4px var(--u-ink); }
body.gb .stat.small.gold .val { color: var(--u-gold); }
body.gb #hearts { gap: 2px; }
body.gb #hearts .h { width: 36px; height: 36px; image-rendering: auto; background: url('assets/ui/icon-heart.webp') center/contain no-repeat; filter: drop-shadow(0 3px 0 rgba(42, 18, 64, 0.8)); }
body.gb #hearts .h.off { background: url('assets/ui/icon-heart.webp') center/contain no-repeat; filter: grayscale(1) brightness(0.45); opacity: 0.55; }
body.gb .bark { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 6px; row-gap: 3px; align-items: center; justify-items: end; padding: 4px 10px 6px 5px; border-radius: 14px; background: rgba(26, 12, 44, 0.72); border: 2.5px solid var(--u-ink); box-shadow: 0 3px 0 var(--u-ink); }
body.gb .bark .bark-ico { grid-row: 1 / 3; width: 36px; height: 36px; }
body.gb #barkLbl { font: 400 13px/1 var(--u-display); letter-spacing: 0.06em; color: var(--u-bone); text-shadow: 0 2px 0 var(--u-ink); }
body.gb .barkbar { width: 130px; height: 14px; border: 2.5px solid var(--u-ink); border-radius: 8px; background: #140a24; box-shadow: none; overflow: hidden; }
body.gb .barkbar::after { background: repeating-linear-gradient(90deg, transparent 0 12px, rgba(20, 10, 36, 0.7) 12px 14px); }
body.gb #barkfill { background: linear-gradient(180deg, #c3ff9e, var(--u-slime) 50%, var(--u-slime2)); box-shadow: none; border-radius: 5px; }
body.gb .barkbar.ready { border-color: var(--u-ink); animation: urReady 0.8s ease-in-out infinite; }
body.gb .barkbar.ready #barkfill { background: linear-gradient(180deg, #ffe58a, var(--u-gold) 50%, var(--u-pumpkin)); }
@keyframes urReady { 0%, 100% { box-shadow: 0 0 0 rgba(255, 210, 58, 0); } 50% { box-shadow: 0 0 16px rgba(255, 210, 58, 0.9); } }
body.gb #clock { font: 400 12px/1 var(--u-display); letter-spacing: 0.08em; color: var(--u-soft); text-shadow: 0 2px 0 var(--u-ink); padding: 3px 9px 3px 5px; border-radius: 10px; background: rgba(26, 12, 44, 0.6); }
body.gb .pop { font: 400 28px/1.1 var(--u-display); color: var(--u-slime); -webkit-text-stroke: 6px var(--u-ink); paint-order: stroke fill; text-shadow: 0 4px 0 var(--u-ink), 0 0 18px rgba(124, 255, 79, 0.45); animation: pop 0.95s cubic-bezier(0.2, 1.4, 0.4, 1) forwards; }
body.gb .pop.bad { color: var(--u-blush); text-shadow: 0 4px 0 var(--u-ink); }
body.gb .pop.gold { color: var(--u-gold); text-shadow: 0 4px 0 var(--u-ink), 0 0 18px rgba(255, 210, 58, 0.4); }
body.gb .combo { display: flex; align-items: center; gap: 4px; font: 400 44px/1 var(--u-display); color: var(--u-pumpkin); -webkit-text-stroke: 8px var(--u-ink); paint-order: stroke fill; text-shadow: 0 5px 0 var(--u-ink); }
body.gb .combo[hidden] { display: none !important; }
body.gb .combo::before { content: ''; width: 54px; height: 54px; background: url('assets/ui/icon-flame.webp') center/contain no-repeat; }
body.gb .combo.hit { animation: comboHit 0.3s cubic-bezier(0.2, 1.6, 0.4, 1); }
body.gb .tag { display: inline-flex; align-items: center; gap: 6px; font: 400 15px/1 var(--u-display); letter-spacing: 0.05em; padding: 5px 12px; border: 2.5px solid var(--u-ink); border-radius: 12px; background: rgba(26, 12, 44, 0.85); box-shadow: 0 3px 0 var(--u-ink); text-shadow: 0 2px 0 var(--u-ink); }
body.gb .tag[hidden] { display: none !important; }
body.gb .tag.daily, body.gb .tag.power, body.gb .tag.ghost { border-color: var(--u-ink); }
body.gb .tag.daily { color: var(--u-gold); }
body.gb .tag.power { color: #9ff2ff; }
body.gb .tag.power::before { content: ''; width: 24px; height: 24px; background: url('assets/ui/icon-bolt.webp') center/contain no-repeat; }
body.gb .tag.ghost { color: #c8ffb3; font-size: 13px; }
body.gb .hoodcard .hc-name { font: 400 clamp(30px, 6vw, 60px)/1 var(--u-display); -webkit-text-stroke: 9px var(--u-ink); paint-order: stroke fill; text-shadow: 0 6px 0 var(--u-ink), 0 0 30px var(--hc); }
body.gb .hoodcard .hc-taunt { font: 900 clamp(14px, 2.2vw, 20px)/1.3 var(--u-body); color: var(--u-bone); text-shadow: 0 2px 0 var(--u-ink), 0 0 8px rgba(0, 0, 0, 0.6); letter-spacing: 0.05em; }
body.gb .hoodcard { animation: hoodcard 2.4s ease-out forwards; }
body.gb .toro span { font: 400 13px/26px var(--u-display); border-radius: 9px; border-width: 2.5px; }
body.gb #toast { font: 400 15px/1.1 var(--u-display); letter-spacing: 0.04em; color: var(--u-ink); background: linear-gradient(180deg, #b6ff8f, var(--u-slime)); border: 3px solid var(--u-ink); border-radius: 14px; box-shadow: 0 5px 0 var(--u-ink); padding: 11px 18px; }
body.gb #toast.hood { font-size: 13px; padding: 7px 12px; }
body.gb #btnBark { width: 96px; height: 96px; border-radius: 50%; padding: 0 0 12px; align-items: flex-end; font-size: 15px; color: var(--u-ink); background: url('assets/ui/icon-bark.webp') 50% 32%/54px no-repeat, linear-gradient(180deg, #b6ff8f, var(--u-slime) 50%, var(--u-slime2)); box-shadow: 0 6px 0 #1f6b0c, 0 6px 0 2px var(--u-ink); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
@media (pointer: fine) and (min-width: 760px) {
  body.gb #hud .bark { bottom: 9vh; justify-items: center; }
  body.gb #hud .bark .barkbar { width: 200px; height: 16px; }
  body.gb #hud .tag.power { bottom: calc(9vh + 66px); }
}

/* --- GAME OVER: UGLY flat on the asphalt behind a two-column results sticker --- */
body.gb #over { background: linear-gradient(180deg, rgba(11, 6, 22, 0.55), rgba(11, 6, 22, 0.3) 45%, rgba(11, 6, 22, 0.75)), url('assets/ui/over.webp') center 70%/cover no-repeat, #0b0616; }
body.gb .over-card { width: min(980px, 100%); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 4px 24px; align-items: start; padding: 18px 22px; }
body.gb #ovTitle { font-size: clamp(46px, 6vw, 72px); line-height: 0.9; -webkit-text-stroke: 11px var(--u-ink); text-shadow: 0 8px 0 var(--u-ink), 0 0 46px rgba(124, 255, 79, 0.4); transform: rotate(-3deg); margin: 6px 0 16px; animation: urSlam 0.6s 0.1s cubic-bezier(0.2, 1.5, 0.3, 1) both; }
@keyframes urSlam { 0% { transform: rotate(-3deg) scale(1.8); opacity: 0; } 100% { transform: rotate(-3deg) scale(1); opacity: 1; } }
body.gb .ov-stats { gap: 10px; margin: 26px 0 12px; }
body.gb .ov-stats > div { position: relative; padding: 26px 4px 10px; border: 2.5px solid var(--u-ink); border-radius: 14px; background: var(--u-glass2); box-shadow: 0 4px 0 var(--u-ink), inset 0 0 0 1.5px rgba(201, 169, 230, 0.25); gap: 3px; font: 400 22px/1 var(--u-display); color: var(--u-bone); text-shadow: 0 2px 0 var(--u-ink); }
body.gb .ov-stats > div.hot { box-shadow: 0 4px 0 var(--u-ink), inset 0 0 0 2px var(--u-slime); }
body.gb .ov-stats .ur-ico { position: absolute; left: 50%; top: -24px; width: 46px; height: 46px; transform: translateX(-50%); filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.5)); }
body.gb .ov-stats .big { font-size: 30px; color: var(--u-slime); }
body.gb .saved-line { font: 900 12px/1.4 var(--u-body); letter-spacing: 0.06em; color: var(--u-slime); margin: 4px 0; }
body.gb .gb-xp { font: 400 26px/1.1 var(--u-display); letter-spacing: 0.02em; color: var(--u-bone); text-shadow: 0 3px 0 var(--u-ink); }
body.gb .gb-xp b { color: var(--u-slime); -webkit-text-stroke: 5px var(--u-ink); paint-order: stroke fill; }
body.gb .gb-xpbox { margin: 6px 0 2px; }
body.gb .gb-xpbox .gb-signin { font-size: 16px; padding: 9px 14px; margin-bottom: 4px; }
body.gb .ov-main { margin: 14px 0 4px; gap: 10px; }
body.gb .ov-main #btnAgain { flex: 1 1 100%; }
body.gb .ov-main button:not(#btnAgain) { font-size: 15px; padding: 10px 14px; }
body.gb .card-wrap { margin: 2px 0 6px; }
body.gb .ovcard { width: 100%; max-width: 440px; border: 3px solid var(--u-ink); border-radius: 14px; box-shadow: 0 5px 0 var(--u-ink); transform: rotate(1.2deg); }
body.gb .btns.small { margin: 8px 0 4px; }
body.gb .btns.small button { font-size: 13px; padding: 8px 12px; }
body.gb #overListLbl { font: 400 13px/1.2 var(--u-display); letter-spacing: 0.08em; color: var(--u-pumpkin); text-shadow: 0 2px 0 var(--u-ink); }
body.gb .board { border: 2.5px solid var(--u-ink); border-radius: 14px; background: rgba(20, 10, 36, 0.86); box-shadow: inset 0 0 0 1.5px rgba(201, 169, 230, 0.2); max-height: 190px; }
body.gb .board li { font: 800 14px/1.3 var(--u-body); color: var(--u-bone); padding: 6px 12px; }
body.gb .board li:nth-child(odd) { background: rgba(255, 255, 255, 0.045); }
body.gb .board li .rank { font: 400 15px/1 var(--u-display); color: var(--u-dim); width: 28px; }
body.gb .board li:nth-child(1) .rank { color: var(--u-gold); }
body.gb .board li:nth-child(2) .rank { color: #e6e9f2; }
body.gb .board li:nth-child(3) .rank { color: #e8a56a; }
body.gb .board li .sc { font: 400 17px/1 var(--u-display); color: var(--u-gold); text-shadow: 0 2px 0 var(--u-ink); }
body.gb .board li .muted { font-size: 12px; }
body.gb .board li.me { box-shadow: inset 0 0 0 2.5px var(--u-slime); border-radius: 10px; }
body.gb .board li.empty { font-weight: 800; color: var(--u-dim); }
body.gb .board.full { max-height: none; }
body.gb .see-all { font: 400 13px/1.6 var(--u-display); letter-spacing: 0.05em; color: var(--u-slime); }
body.gb .board-count { font: 800 12px/1.6 var(--u-body); color: var(--u-dim); }

/* --- TOP RUNS, PAUSE, NAME, DISCLAIMER, YOUR SPOT: the same stickers --- */
body.gb #board .card { padding-top: 12px; }
body.gb .ur-board-ico { display: block; width: 72px; height: 72px; margin: -2px auto 2px; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.5)); }
body.gb #pause h2 { font-size: 52px; color: var(--u-pumpkin); }
body.gb .disc-text { font: 700 14px/1.45 var(--u-body); color: var(--u-soft); }
body.gb .disc-text b { font: 400 14px var(--u-display); color: var(--u-gold); letter-spacing: 0.03em; }
body.gb .build-title { font: 400 18px/1.1 var(--u-display); color: var(--u-slime); text-shadow: 0 2px 0 var(--u-ink); }
body.gb .build-title .muted { font: 800 12px var(--u-body); }
body.gb .hint { font: 700 12.5px/1.4 var(--u-body); color: var(--u-dim); }
body.gb #spotNote { color: var(--u-gold); }
body.gb .poster-row img { border: 3px solid var(--u-ink); border-radius: 12px; image-rendering: auto; }
body.gb #palette button { border-radius: 10px; box-shadow: 0 4px 0 var(--u-ink); }
body.gb .reg-status, body.gb .badge { font: 800 12px/1.5 var(--u-body); }

/* --- narrow screens (portrait phones) --- */
@media (max-width: 760px) {
  body.gb .over-card { grid-template-columns: 1fr; }
  body.gb #menu { justify-content: center; background: linear-gradient(180deg, rgba(11, 6, 22, 0.55), rgba(11, 6, 22, 0.88)), url('assets/ui/key-sm.webp') 70% 50%/cover no-repeat, #0b0616; }
  body.gb .menu-card { margin: auto; }
}
@media (max-width: 480px) {
  body.gb .stat .val { font-size: 24px; }
  body.gb .stat:first-child .val { font-size: 30px; }
  body.gb .ov-stats { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
  body.gb button { font-size: 14px; padding: 10px 12px; }
}
/* --- short screens (phones held sideways, 390 px tall): two columns, smaller stickers, nothing clipped --- */
@media (max-height: 520px) {
  body.gb #menu { padding: 10px max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left)); }
  body.gb .menu-card { width: min(640px, 100%); display: flex; gap: 16px; align-items: center; padding: 10px 14px; }
  body.gb .ur-col-a { flex: 0 0 42%; min-width: 0; }
  body.gb .ur-col-b { flex: 1 1 auto; min-width: 0; }
  body.gb .ur-logo { width: 100%; }
  body.gb .pitch { font-size: 11px; margin: 2px 0 6px; }
  body.gb .ur-facts { gap: 5px; }
  body.gb .ur-facts li { font-size: 10px; padding-right: 8px; }
  body.gb .ur-facts li img { width: 22px; height: 22px; }
  body.gb .menu-card .btns { margin: 2px 0 4px; gap: 8px; }
  body.gb #btnPlay { font-size: 28px; padding-top: 9px; padding-bottom: 9px; }
  body.gb #btnPlay::after { margin-top: -9px; margin-bottom: -9px; }
  body.gb .menu-card .btns button:not(#btnPlay) { font-size: 13px; padding: 8px 10px; }
  body.gb .gb-account { font-size: 11.5px; line-height: 1.5; margin: 4px 0 0; }
  body.gb .controls { display: none; }
  body.gb .quality { margin: 6px 0 0; font-size: 10px; gap: 6px 10px; }
  body.gb .foot { font-size: 9.5px; line-height: 1.5; margin-top: 4px; }
  body.gb .over-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 10px 14px; gap: 2px 16px; }
  body.gb #ovTitle { font-size: 40px; -webkit-text-stroke: 8px var(--u-ink); text-shadow: 0 5px 0 var(--u-ink); margin: 2px 0 6px; }
  body.gb .ov-stats { margin: 22px 0 6px; gap: 7px; grid-template-columns: repeat(4, 1fr); }
  body.gb .ov-stats > div { padding: 18px 2px 6px; font-size: 16px; }
  body.gb .ov-stats .big { font-size: 20px; }
  body.gb .ov-stats .ur-ico { width: 34px; height: 34px; top: -18px; }
  body.gb .gb-xp { font-size: 20px; }
  body.gb .ov-main { margin: 8px 0 2px; gap: 7px; }
  body.gb #btnAgain { font-size: 22px; padding-top: 8px; padding-bottom: 8px; }
  body.gb #btnAgain::after { width: 44px; background-size: 28px; margin-top: -8px; margin-bottom: -8px; }
  body.gb .ov-main button:not(#btnAgain) { font-size: 12.5px; padding: 7px 9px; }
  body.gb .ovcard { max-width: 300px; }
  body.gb .card-wrap .muted.small { display: none; }
  body.gb .board { max-height: 104px; }
  body.gb .board li { font-size: 12px; padding: 4px 10px; }
  body.gb #hud { padding-top: max(8px, env(safe-area-inset-top)); }
  body.gb .stat { padding: 2px 9px 3px 3px; border-radius: 11px; column-gap: 5px; }
  body.gb .stat .ur-ico { width: 24px; height: 24px; }
  body.gb .stat:first-child .ur-ico { width: 32px; height: 32px; }
  body.gb .stat .lbl { font-size: 8px; }
  body.gb .stat:first-child .val { font-size: 26px; }
  body.gb .stat.small .val { font-size: 15px; -webkit-text-stroke: 3px var(--u-ink); }
  body.gb .hud-left { gap: 4px; }
  body.gb #hearts .h { width: 28px; height: 28px; }
  body.gb .bark { padding: 3px 8px 4px 3px; }
  body.gb .bark .bark-ico { width: 28px; height: 28px; }
  body.gb #barkLbl { font-size: 11px; }
  body.gb .barkbar { width: 100px; height: 11px; }
  body.gb #btnBark { width: 80px; height: 80px; font-size: 13px; background-size: 44px, auto; padding-bottom: 9px; }
  body.gb .combo { font-size: 32px; }
  body.gb .combo::before { width: 40px; height: 40px; }
  body.gb .pop { font-size: 20px; -webkit-text-stroke: 5px var(--u-ink); }
  body.gb .tag { font-size: 12px; padding: 4px 9px; }
  body.gb .card { padding: 12px 14px; }
  body.gb h2 { font-size: 26px; margin-bottom: 8px; }
}
body.gb .pitch, body.gb .gb-account, body.gb .gb-xpbox .muted { text-wrap: balance; }
/* tall enough: the results sticker sits high, so UGLY flat on the asphalt shows under it */
@media (min-height: 640px) and (min-width: 761px) {
  body.gb #over { align-items: flex-start; padding-top: max(20px, 4vh); }
  body.gb .over-card { margin: 0 auto auto; }
}
@media (max-height: 520px) {
  body.gb #ovTitle { font-size: 36px; margin: 0 0 4px; }
  body.gb .ov-stats { margin: 20px 0 4px; }
  body.gb .ov-stats > div { padding: 16px 2px 5px; }
  body.gb .saved-line { font-size: 10.5px; margin: 2px 0; }
  body.gb .gb-xpbox { margin: 2px 0 0; }
  body.gb .gb-xpbox .muted.small { font-size: 10.5px; }
  body.gb .ovcard { max-width: 270px; }
  body.gb .btns.small { margin: 4px 0 2px; }
  body.gb .btns.small button { font-size: 11.5px; padding: 6px 10px; }
  body.gb #overListLbl { font-size: 11px; margin-top: 2px !important; }
  body.gb .board { max-height: 96px; margin: 4px 0; }
}
body.gb #board, body.gb #name, body.gb #disc { background: linear-gradient(180deg, rgba(11, 6, 22, 0.7), rgba(11, 6, 22, 0.88)), url('assets/ui/key-sm.webp') 70% 50%/cover no-repeat, #0b0616; }
body.gb #pause { background: radial-gradient(ellipse at 50% 45%, rgba(42, 18, 64, 0.55), rgba(11, 6, 22, 0.85) 70%); }
@media (min-height: 640px) and (min-width: 761px) {
  body.gb #over { background: linear-gradient(180deg, rgba(11, 6, 22, 0.55), rgba(11, 6, 22, 0.25) 55%, rgba(11, 6, 22, 0.35)), url('assets/ui/over.webp') 0 0/auto 116% no-repeat, #0b0616; }
}