@font-face { font-family: Oswald; src: url(../vendor/fonts/oswald.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: Nunito; src: url(../vendor/fonts/nunito.woff2) format('woff2'); font-weight: 200 1000; font-display: swap; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b0707; color: #f3e9dc;
  font-family: Nunito, system-ui, sans-serif; user-select: none; -webkit-user-select: none; touch-action: none;
  overscroll-behavior: none; }
canvas#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; }

.screen { position: fixed; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; text-align: center; padding: 24px; background: radial-gradient(ellipse at center, rgba(20,8,8,.35), rgba(5,2,2,.82)); z-index: 20; }
.screen.show { display: flex; }
.screen.nobg { background: none; pointer-events: none; }
#title { background: radial-gradient(ellipse at 50% 55%, rgba(0,0,0,0) 0%, rgba(8,3,3,.55) 70%, rgba(3,1,1,.9) 100%); }

.logo { font-family: Oswald, Impact, sans-serif; color: #f1e7dc; text-shadow: 0 2px 30px rgba(255,190,170,.35), 0 0 2px rgba(0,0,0,.6);
  line-height: .95; letter-spacing: .02em; }
.logo .l1 { font-size: clamp(44px, 11vw, 120px); }
.logo .stars { font-size: clamp(16px, 3.4vw, 34px); letter-spacing: .5em; color: #d8b3a6; margin: 8px 0 4px; padding-left: .5em; }
.logo .l2 { font-family: Nunito, sans-serif; font-weight: 800; font-size: clamp(20px, 4.6vw, 44px); letter-spacing: .28em;
  text-transform: uppercase; color: #e9c7bd; }

.btn { font: 800 20px Nunito, sans-serif; color: #2a1512; background: #f1e3d3; border: 0; border-radius: 999px;
  padding: 14px 40px; cursor: pointer; box-shadow: 0 6px 30px rgba(255,170,150,.25), inset 0 -3px 0 rgba(0,0,0,.12);
  letter-spacing: .04em; pointer-events: auto; }
.btn:hover { background: #fff3e6; }
.btn:active { transform: scale(.97); }
.btn.big { font-size: 26px; padding: 16px 64px; }
.btn.ghost { background: rgba(255,255,255,.08); color: #f3e9dc; box-shadow: none; border: 1px solid rgba(255,255,255,.25); font-size: 16px; padding: 10px 26px; }
.btn:disabled { opacity: .4; }
.hint { max-width: 520px; opacity: .78; font-size: 15px; line-height: 1.5; margin: 0; }
.loading { opacity: .6; font-size: 13px; margin: 0; }

#bars i { position: fixed; left: 0; right: 0; height: 0; background: #000; z-index: 5; transition: height .8s ease; }
#bars i:first-child { top: 0; } #bars i:last-child { bottom: 0; }
@media (min-aspect-ratio: 3/2) { body.letterbox #bars i { height: max(0px, calc((100vh - 100vw / 2.4) / 2)); height: max(0px, calc((100dvh - 100vw / 2.4) / 2)); } }
#flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 6; transition: opacity .5s; }

.hud { position: fixed; inset: 0; pointer-events: none; display: none; z-index: 10;
  padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
.hud.show { display: block; }
.toast { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); font: 700 clamp(22px, 5vw, 40px) Oswald, sans-serif;
  letter-spacing: .04em; text-shadow: 0 2px 16px rgba(0,0,0,.6); opacity: 0; transition: opacity .3s; white-space: nowrap; }
.toast.show { opacity: 1; }

.pos { position: absolute; left: max(16px, env(safe-area-inset-left)); top: max(12px, env(safe-area-inset-top)); font-family: Oswald, sans-serif;
  text-shadow: 0 2px 12px rgba(0,0,0,.6); }
.pos b { font-size: clamp(40px, 8vw, 64px); }
.pos sup { font-size: clamp(18px, 3.4vw, 26px); margin-left: 2px; }
.pos span { font-size: clamp(16px, 3vw, 22px); opacity: .7; margin-left: 8px; }
.track { position: absolute; left: 50%; transform: translateX(-50%); top: max(18px, env(safe-area-inset-top)); width: min(44vw, 380px); height: 8px;
  border-radius: 8px; background: rgba(255,255,255,.14); }
.track-fill { height: 100%; width: 0; border-radius: 8px; background: linear-gradient(90deg, #e7b3a3, #fbe9de); }
.track-egg { position: absolute; right: -10px; top: -6px; width: 20px; height: 20px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #d8eee6, #6aa6b2 70%, #2b5868); box-shadow: 0 0 12px #7cc4d0; }
.boostbar { position: absolute; right: max(16px, env(safe-area-inset-right)); top: max(16px, env(safe-area-inset-top)); width: min(30vw, 180px); height: 12px;
  border-radius: 12px; background: rgba(255,255,255,.14); overflow: hidden; }
.boostbar div { height: 100%; width: 100%; background: linear-gradient(90deg, #f6c66e, #fff0c2); }
.boostbar span { position: absolute; right: 0; top: 14px; font: 700 11px Oswald; letter-spacing: .2em; opacity: .7; }
.shield { position: absolute; right: max(16px, env(safe-area-inset-right)); top: 52px; font-size: 26px; opacity: 0; transition: opacity .3s;
  filter: drop-shadow(0 0 8px #ff9fc0); }
.shield.on { opacity: 1; }

.burrow-title { position: absolute; left: 50%; top: max(12px, env(safe-area-inset-top)); transform: translateX(-50%); font: 700 clamp(22px,4.5vw,34px) Oswald; letter-spacing: .06em;
  text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.bars { position: absolute; left: max(16px, env(safe-area-inset-left)); top: 64px; width: min(56vw, 300px); display: flex; flex-direction: column; gap: 6px; }
.bars .row { display: flex; align-items: center; gap: 8px; font: 700 13px Nunito; }
.bars .row span { width: 54px; text-align: right; opacity: .85; }
.bars .row .bar { flex: 1; height: 10px; background: rgba(255,255,255,.14); border-radius: 10px; overflow: hidden; }
.bars .row .bar div { height: 100%; width: 0; background: #9fd3d6; border-radius: 10px; }
.bars .row.me .bar div { background: linear-gradient(90deg, #f0b8a8, #fff1e6); }
.bars .row.me span { color: #ffe3d8; }
.wiggle-hint { position: absolute; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translateX(-50%); font: 800 16px Nunito; opacity: .85;
  text-shadow: 0 1px 8px #000; white-space: nowrap; }

.score { position: absolute; left: 50%; top: max(10px, env(safe-area-inset-top)); transform: translateX(-50%); display: flex; align-items: center; gap: 14px;
  background: rgba(10,14,12,.55); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 6px 16px; font-family: Oswald, sans-serif; }
.score .side { display: flex; align-items: center; gap: 10px; }
.score b { font-size: clamp(28px, 6vw, 42px); min-width: 1.2em; text-align: center; }
.score .nm { font-size: 13px; letter-spacing: .18em; opacity: .7; }
.score i { font-style: normal; font-size: 12px; color: #f2c14e; opacity: 0; }
.score i.on { opacity: 1; }
.score .dash { opacity: .5; font-size: 26px; }
.call { position: absolute; left: 50%; top: 26%; transform: translate(-50%, -50%); font: 700 clamp(26px, 6vw, 48px) Oswald; letter-spacing: .05em;
  text-shadow: 0 2px 18px rgba(0,0,0,.7); opacity: 0; transition: opacity .25s; white-space: nowrap; }
.call.show { opacity: 1; }
.pong-hint { position: absolute; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); font: 800 15px Nunito; opacity: .8;
  text-shadow: 0 1px 8px #000; white-space: nowrap; }

#joy { position: fixed; left: max(22px, env(safe-area-inset-left)); bottom: max(22px, env(safe-area-inset-bottom)); width: 140px; height: 140px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.06), rgba(255,255,255,.14)); border: 2px solid rgba(255,255,255,.22); z-index: 12; display: none; pointer-events: none; }
#joy-knob { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%; background: rgba(250,236,225,.55);
  box-shadow: 0 2px 12px rgba(0,0,0,.35); }
#boost-btn { position: fixed; right: max(22px, env(safe-area-inset-right)); bottom: max(28px, env(safe-area-inset-bottom)); width: 104px; height: 104px; border-radius: 50%;
  border: 2px solid rgba(255,230,180,.6); background: radial-gradient(circle at 40% 35%, rgba(255,226,160,.55), rgba(220,140,70,.35)); color: #fff6e0;
  font: 700 17px Oswald; letter-spacing: .1em; z-index: 12; display: none; touch-action: none; }
#boost-btn.down { transform: scale(.94); background: radial-gradient(circle at 40% 35%, rgba(255,236,190,.85), rgba(240,160,80,.6)); }
body.touch.ctl-race #joy, body.touch.ctl-race #boost-btn, body.touch.ctl-burrow #joy { display: block; }
#pause-btn { position: fixed; right: max(12px, env(safe-area-inset-right)); top: max(52px, calc(env(safe-area-inset-top) + 40px)); width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25); background: rgba(0,0,0,.3); color: #fff; font: 700 13px Oswald; z-index: 15; display: none; }
body.playing #pause-btn { display: block; }
body.ctl-pong #pause-btn { top: max(12px, env(safe-area-inset-top)); }
#skip-btn { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 15; display: none;
  background: rgba(0,0,0,.35); color: #eee; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 8px 18px; font: 700 15px Nunito; }
body.cine #skip-btn { display: block; }

#count-n { font: 700 clamp(80px, 22vw, 180px) Oswald; color: #fff3ea; text-shadow: 0 4px 40px rgba(255,170,150,.6); }
#msg h1 { font: 700 clamp(44px, 10vw, 96px) Oswald; margin: 0; letter-spacing: .03em; text-shadow: 0 4px 40px rgba(255,200,160,.35); }
#msg p { margin: 0; font-size: 18px; opacity: .85; max-width: 560px; }
#msg-btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
#pause h2 { font: 700 44px Oswald; margin: 0 0 8px; }

#fps { position: fixed; left: 6px; bottom: 4px; font: 11px monospace; color: #9f9; opacity: .6; z-index: 30; display: none; pointer-events: none; }
body.debug #fps { display: block; }