:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f5f0db;
  background: #161b13;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html, body, #game { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { touch-action: none; user-select: none; -webkit-user-select: none; }
#game { position:fixed; inset:0; z-index:0; }
canvas { display: block; width: 100%; height: 100%; }

#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.brand {
  position: absolute; left: max(18px, env(safe-area-inset-left)); top: max(16px, env(safe-area-inset-top));
  font-weight: 1000; letter-spacing: .18em; font-size: 17px; text-shadow: 0 2px 12px #0008;
}
.brand span { opacity: .55; font-size: 9px; letter-spacing: .11em; font-weight: 700; }
#score {
  position: absolute; top: max(14px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  display: grid; grid-template-columns: 34px 28px 20px 38px 34px; align-items: center; gap: 5px;
  padding: 7px 12px; background: #10150ccf; border: 1px solid #f3e9bd2b; border-radius: 999px;
  backdrop-filter: blur(10px); box-shadow: 0 8px 30px #0003;
}
#score b { font-size: 21px; text-align: center; }
#score small { font-size: 8px; opacity: .64; letter-spacing: .08em; text-align: center; }
#score i { opacity: .32; text-align: center; font-style: normal; }
#ballReadout {
  position: absolute; right: max(18px, env(safe-area-inset-right)); top: max(18px, env(safe-area-inset-top));
  font-size: 10px; letter-spacing: .12em; opacity: .8; text-shadow: 0 2px 12px #000;
}
#ballReadout b { color: #f7cf60; }
#message {
  position: absolute; top: 23%; left: 50%; transform: translate(-50%, -50%);
  font-size: clamp(26px, 6vw, 64px); font-weight: 1000; letter-spacing: .08em;
  text-shadow: 0 6px 30px #000b; opacity: 0; transition: opacity .18s ease, transform .18s ease;
  white-space: nowrap;
}
#message.show { opacity: 1; transform: translate(-50%, -57%); }
#chargeWrap {
  position: absolute; left: 50%; bottom: max(36px, calc(env(safe-area-inset-bottom) + 20px)); transform: translateX(-50%);
  width: min(260px, 52vw); height: 7px; border-radius: 999px; overflow: hidden; background: #05070499; border: 1px solid #ffffff20;
  opacity: 0; transition: opacity .15s;
}
#chargeWrap.active { opacity: 1; }
#chargeBar { width: 0%; height: 100%; background: linear-gradient(90deg, #ead879, #f4a44a, #f25a48); }
#momentum{position:absolute;left:50%;bottom:max(53px,calc(env(safe-area-inset-bottom) + 38px));transform:translateX(-50%);display:flex;align-items:center;gap:7px;padding:7px 10px;background:#10150ccf;border:1px solid #ffffff28;border-radius:999px;font-size:8px;font-weight:900;letter-spacing:.12em;opacity:.82}#momentum>div{width:96px;height:5px;background:#050704;border-radius:99px;overflow:hidden}#momentum i{display:block;width:0;height:100%;background:linear-gradient(90deg,#73b7ff,#e7d066,#ff9b51);transition:width .15s}#momentum.ready{border-color:#f4d66d;box-shadow:0 0 18px #e7c75266}#momentum b{font-size:8px;padding:2px 4px;border:1px solid #ffffff30;border-radius:3px}#momentumHint{position:absolute;left:50%;bottom:max(39px,calc(env(safe-area-inset-bottom) + 25px));transform:translateX(-50%);font-size:7px;letter-spacing:.13em;color:#f0d76db8;white-space:nowrap;text-shadow:0 2px 8px #000}#desktopControls{position:absolute;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);white-space:nowrap;font-size:9px;color:#e8e5d4bb;text-shadow:0 2px 8px #000}#desktopControls b{font-size:8px;color:#f4d66d;margin-left:5px}
#momentum{position:absolute;left:50%;bottom:max(53px,calc(env(safe-area-inset-bottom) + 38px));transform:translateX(-50%);display:flex;align-items:center;gap:7px;padding:7px 10px;background:#10150ccf;border:1px solid #ffffff28;border-radius:999px;font-size:8px;font-weight:900;letter-spacing:.12em;opacity:.82}#momentum>div{width:96px;height:5px;background:#050704;border-radius:99px;overflow:hidden}#momentum i{display:block;width:0;height:100%;background:linear-gradient(90deg,#73b7ff,#e7d066,#ff9b51);transition:width .15s}#momentum.ready{border-color:#f4d66d;box-shadow:0 0 18px #e7c75266}#momentum b{font-size:8px;padding:2px 4px;border:1px solid #ffffff30;border-radius:3px}#momentumHint{position:absolute;left:50%;bottom:max(39px,calc(env(safe-area-inset-bottom) + 25px));transform:translateX(-50%);font-size:7px;letter-spacing:.13em;color:#f0d76db8;white-space:nowrap;text-shadow:0 2px 8px #000}#runReadout{position:absolute;left:50%;top:max(53px,calc(env(safe-area-inset-top) + 39px));transform:translateX(-50%);font-size:8px;letter-spacing:.14em;color:#f0d76dbb;white-space:nowrap;text-shadow:0 2px 8px #000}#pauseButton{pointer-events:auto;position:absolute;right:max(17px,env(safe-area-inset-right));bottom:max(17px,env(safe-area-inset-bottom));border:1px solid #ffffff35;border-radius:50%;width:30px;height:30px;background:#10150cbf;color:#f5f0db;font-weight:900}.ghost{margin-left:9px!important;background:transparent!important;color:#f1e5b3!important;border-color:#f6e59b66!important}.screen .upgradeGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.screen .upgradeGrid button{padding:16px 10px;background:#162014;color:#f6f0db;border-color:#ffffff28;border-radius:14px}.upgradeGrid b,.upgradeGrid span{display:block}.upgradeGrid b{font-size:11px;letter-spacing:.09em}.upgradeGrid span{margin-top:7px;font-size:10px;opacity:.65;letter-spacing:0}.screen #exitButton{margin-top:10px}.screen #dailyReadout{margin:-2px 0 17px;color:#e4d672;font-size:9px;letter-spacing:.12em}
#crosshair { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; transform: translate(-50%, -50%); opacity: .72; }
#crosshair span { position: absolute; background: #fff; box-shadow: 0 1px 4px #0008; }
#crosshair span:first-child { width: 18px; height: 1px; top: 8px; left: 0; }
#crosshair span:last-child { height: 18px; width: 1px; left: 8px; top: 0; }

.screen {
  position: fixed; inset: 0; display: none; place-items: center; z-index: 20; padding: 24px;
  background: radial-gradient(circle at 50% 40%, #35452a80, #0a0d08e8 65%);
  backdrop-filter: blur(5px);
}
.screen.active { display: grid; }
.panel { width: min(620px, 94vw); text-align: center; }
.eyebrow { font-size: 10px; font-weight: 900; letter-spacing: .28em; opacity: .55; margin-bottom: 10px; }
h1 { margin: 0; font-size: clamp(72px, 18vw, 150px); line-height: .82; letter-spacing: -.06em; font-weight: 1000; }
h2 { margin: 6px 0 10px; font-size: clamp(52px, 14vw, 110px); line-height: .9; letter-spacing: -.045em; }
.lede, #endText { margin: 20px auto 26px; max-width: 520px; font-size: 16px; line-height: 1.55; opacity: .8; }
.screen button {
  appearance: none; border: 1px solid #f6e59b55; color: #15170f; background: #f0d76d;
  border-radius: 999px; padding: 14px 24px; font-weight: 1000; letter-spacing: .08em; cursor: pointer;
  box-shadow: 0 10px 35px #0005;
}
.desktopHelp { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px; margin: 28px auto 0; max-width: 540px; font-size: 11px; opacity: .63; }
kbd { padding: 3px 6px; border: 1px solid #ffffff26; background: #0f130d99; border-radius: 5px; font-family: inherit; font-size: 9px; }
.mobileHelp { display: none; margin-top: 24px; font-size: 12px; opacity: .62; line-height: 1.5; }

#touchControls { display: none; position: fixed; inset: 0; z-index: 10; pointer-events: none; }
#lookZone { position: absolute; right: 0; top: 0; width: 56%; height: 100%; pointer-events: auto; }
.joystick {
  position: absolute; left: max(24px, env(safe-area-inset-left)); bottom: max(28px, calc(env(safe-area-inset-bottom) + 15px));
  width: 118px; height: 118px; border-radius: 50%; border: 1px solid #ffffff2e; background: #0a0d0860; backdrop-filter: blur(5px); pointer-events: auto;
}
#stick { position: absolute; width: 52px; height: 52px; border-radius: 50%; background: #f1e8c930; border: 1px solid #ffffff40; left: 32px; top: 32px; transform: translate(0px,0px); }
.actions { position: absolute; right: max(18px, env(safe-area-inset-right)); bottom: max(24px, calc(env(safe-area-inset-bottom) + 12px)); display: grid; grid-template-columns: 68px 68px; gap: 9px; align-items: end; pointer-events: auto; }
.actions button {
  appearance: none; width: 68px; height: 48px; border: 1px solid #ffffff2d; border-radius: 16px; background: #10150cbf; color: #f5f0db; font-size: 9px; font-weight: 1000; letter-spacing: .07em; backdrop-filter: blur(8px);
}
.actions .shoot { grid-column: 2; grid-row: 1 / span 2; height: 105px; border-radius: 22px; background: #e1c45dc7; color: #18160d; border-color: #ffe99566; }
.actions button:active { transform: scale(.96); }

@media (hover: none), (pointer: coarse) {
  #touchControls { display: block; }
  .desktopHelp { display: none; }
  .mobileHelp { display: block; }
  #crosshair { opacity: .48; }
  #chargeWrap { bottom: max(155px, calc(env(safe-area-inset-bottom) + 140px)); }
  #momentum{bottom:max(222px,calc(env(safe-area-inset-bottom) + 207px))}#momentumHint{bottom:max(205px,calc(env(safe-area-inset-bottom) + 190px))}#desktopControls{display:none}
  #pauseButton{right:max(16px,env(safe-area-inset-right));bottom:max(193px,calc(env(safe-area-inset-bottom) + 178px))}.screen .upgradeGrid{grid-template-columns:1fr}.ghost{margin-top:8px;margin-left:0!important}
  .brand span { display: none; }
}

@media (max-width: 620px) {
  #ballReadout { top: max(50px, calc(env(safe-area-inset-top) + 42px)); }
  #score { grid-template-columns: 28px 24px 16px 31px 28px; padding-inline: 9px; }
  #score b { font-size: 18px; }
}
#terrainReadout{position:absolute;right:max(18px,env(safe-area-inset-right));top:max(39px,calc(env(safe-area-inset-top) + 26px));font-size:9px;letter-spacing:.13em;opacity:.75;text-shadow:0 2px 12px #000}#terrainReadout b{color:#d9e797}#classReadout{position:absolute;left:max(18px,env(safe-area-inset-left));top:max(41px,calc(env(safe-area-inset-top) + 28px));font-size:9px;font-weight:900;letter-spacing:.16em;color:#e4d672;text-shadow:0 2px 12px #000}.panel.wide{width:min(820px,96vw)}.classGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:22px auto 18px}.classGrid .classCard{appearance:none;text-align:left;color:#eee9d3;background:#11160ecf;border:1px solid #ffffff20;border-radius:15px;padding:13px 12px;box-shadow:none;letter-spacing:0}.classCard b{display:block;font-size:12px;letter-spacing:.11em;margin-bottom:7px}.classCard span{display:block;font-size:10px;line-height:1.35;opacity:.63;min-height:40px}.classCard em{display:block;margin-top:8px;font-size:8px;text-transform:uppercase;font-style:normal;letter-spacing:.16em;color:#e4d672}.classGrid .classCard.selected{border-color:#f0d76da0;background:#282814e8;transform:translateY(-2px)}.screen button.enter{margin-top:0}@media(max-width:700px){.classGrid{grid-template-columns:repeat(2,1fr);gap:7px;margin:15px auto}.classGrid .classCard{padding:10px}.classCard span{min-height:28px}.panel.wide .lede{margin:12px auto 14px}.panel.wide h1{font-size:clamp(65px,21vw,120px)}#terrainReadout{top:max(72px,calc(env(safe-area-inset-top) + 62px))}#classReadout{top:max(61px,calc(env(safe-area-inset-top) + 50px))}}
.actions .jump{grid-column:1;grid-row:3;background:#54714dbf;border-color:#b8d49b55;height:48px}.actions .shoot{grid-column:2;grid-row:1 / span 3;height:162px}