@font-face { font-family: "Orbitron"; src: url("fonts/orbitron.woff2") format("woff2"); font-weight: 400 900; font-display: block; }
@font-face { font-family: "PS2P"; src: url("fonts/press2p.woff2") format("woff2"); font-display: block; }
:root { --teal: #2ee6d0; --tealDim: rgba(46,230,208,0.15); --red: #e0344a; --amber: #ffb23f; --navy: #0f1a3a; --ink: #070b18; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #070b18; color: #e8eef7; font-family: "Orbitron", sans-serif; user-select: none; -webkit-user-select: none; touch-action: none; }
canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#gl { z-index: 0; }
#fx { z-index: 4; pointer-events: none; }
body.play, body.play * { cursor: none; }
.hidden { display: none !important; }
#hud.off { opacity: 0; }
#hud { will-change: opacity; }

/* the bed: footboard + blanket, always at the bottom like the bible */
#bed { position: fixed; left: 0; right: 0; bottom: 0; height: min(30vh, 34vw); z-index: 2; pointer-events: none; transform: translateY(var(--bedY, 0px)); }
#footboard { position: absolute; left: -4%; right: -4%; top: 0; bottom: 0; background: url("img/footboard2.webp") center top / 100% auto no-repeat; }
#blanket { position: absolute; left: -3%; width: 106%; bottom: -14%; height: 62%; object-fit: fill; }
#blaster { will-change: transform, opacity; position: fixed; z-index: 3; right: -3vmin; bottom: -8vmin; width: min(40vmin, 34vw); pointer-events: none; transform-origin: 80% 90%; transition: transform .12s ease-out; }
#blaster.kick { transition: none; transform: rotate(-6deg) translate(2vmin, 2vmin); }

#vignette { position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: 0; box-shadow: inset 0 0 18vmin 6vmin var(--red); }
#wake { position: fixed; inset: 0; z-index: 8; pointer-events: none; opacity: 0; --wr: 8vmax;
  background: radial-gradient(circle at 50% 48%, #fff 0, #fff calc(var(--wr) * 0.45), rgba(255,250,232,0.96) calc(var(--wr) * 0.7), rgba(255,244,214,0) var(--wr)); }
#flash { position: fixed; inset: 0; z-index: 9; pointer-events: none; background: #fff; opacity: 0; }

/* HUD */
#hud { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
.panel { position: absolute; padding: 1.2vmin 1.8vmin; background: var(--tealDim); border: 1px solid var(--teal); color: var(--teal);
  clip-path: polygon(1.6vmin 0, 100% 0, 100% calc(100% - 1.6vmin), calc(100% - 1.6vmin) 100%, 0 100%, 0 1.6vmin);
  text-shadow: 0 0 6px rgba(46,230,208,.6); font-family: "Orbitron", sans-serif; text-align: left; }
button.panel { pointer-events: auto; cursor: pointer; font: inherit; }
.lbl { letter-spacing: .3em; font-weight: 700; font-size: clamp(10px, 2.1vmin, 18px); }
.small { font-size: clamp(9px, 1.6vmin, 14px); letter-spacing: .25em; }
.tiny { font-size: clamp(7px, 1.15vmin, 11px); letter-spacing: .15em; opacity: .8; margin-top: .5vmin; }
.row { display: flex; align-items: center; gap: 1.2vmin; }
.tl { left: calc(env(safe-area-inset-left) + 2vmin); top: calc(env(safe-area-inset-top) + 2vmin); }
.tr { right: calc(env(safe-area-inset-right) + 2vmin); top: calc(env(safe-area-inset-top) + 2vmin); text-align: right; opacity: .75; }
.bl { left: calc(env(safe-area-inset-left) + 2vmin); bottom: calc(env(safe-area-inset-bottom) + 2vmin); width: min(30vmin, 40vw); }
.br { right: calc(env(safe-area-inset-right) + 2vmin); bottom: calc(env(safe-area-inset-bottom) + 2vmin); width: min(36vmin, 44vw); }
.bl img { width: 70%; display: block; margin: 0 auto .6vmin; filter: brightness(1.8) drop-shadow(0 0 4px rgba(46,230,208,.8)); }
#score { font-size: clamp(20px, 5.2vmin, 48px); font-weight: 900; letter-spacing: .08em; color: #e8fffb; text-shadow: 0 0 8px var(--teal), 0 0 2px var(--teal); }
#combo { min-height: 1.2em; color: var(--amber); text-shadow: none; }
#hearts { display: flex; gap: .6vmin; }
#hearts svg { width: clamp(12px, 2.6vmin, 22px); height: clamp(12px, 2.6vmin, 22px); fill: var(--red); filter: drop-shadow(0 0 3px rgba(224,52,74,.8)); }
#hearts svg.off { fill: rgba(46,230,208,.22); filter: none; }
.bar { height: clamp(8px, 1.6vmin, 14px); border: 1px solid var(--teal); margin-top: .6vmin; position: relative; overflow: hidden; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: var(--teal); box-shadow: 0 0 8px var(--teal); }
#dreamPanel.ready { animation: pulse .5s steps(2) infinite; }
#dreamPanel.surge .bar i { background: #ffc861; box-shadow: 0 0 10px #ffc861; }
@keyframes pulse { 50% { background: rgba(46,230,208,.45); } }
#ammo { display: flex; gap: .5vmin; margin-top: .8vmin; height: clamp(14px, 3vmin, 26px); }
#ammo i { flex: 1; background: var(--teal); box-shadow: 0 0 6px var(--teal); transform: skewX(-18deg); }
#ammo i.off { background: rgba(46,230,208,.12); box-shadow: none; }
#ammo.surge i { background: #ffc861; box-shadow: 0 0 8px #ffc861; }
#reload { position: absolute; right: calc(env(safe-area-inset-right) + 2vmin); bottom: calc(env(safe-area-inset-bottom) + 2vmin + min(15vmin, 24vw)); color: #fff; background: var(--red);
  font-weight: 900; letter-spacing: .25em; padding: .8vmin 2vmin; font-size: clamp(14px, 3.4vmin, 30px); display: none; clip-path: polygon(1.2vmin 0,100% 0,100% calc(100% - 1.2vmin),calc(100% - 1.2vmin) 100%,0 100%,0 1.2vmin); }
#reload.on { display: block; animation: hard .36s steps(1) infinite; }
@keyframes hard { 50% { opacity: 0; } }
#bossbar { position: absolute; left: 50%; top: calc(env(safe-area-inset-top) + 2vmin); transform: translateX(-50%); width: min(60vmin, 46vw); color: var(--red); text-align: center; }
#bossbar .bar { border-color: var(--red); }
#bossbar .bar i { background: var(--red); box-shadow: 0 0 8px var(--red); }
#typer { position: absolute; left: calc(env(safe-area-inset-left) + 3vmin); top: 24vmin; color: var(--teal); font-weight: 700; letter-spacing: .35em; font-size: clamp(11px, 2.4vmin, 22px); text-shadow: 0 0 8px var(--teal); }

/* callouts and stage card */
#callouts { position: fixed; inset: 0; z-index: 7; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1vmin; padding-bottom: 18vh; }
.callout { font-weight: 900; letter-spacing: .12em; font-size: clamp(22px, 7vmin, 72px); color: #fff; text-align: center;
  -webkit-text-stroke: 1px var(--teal); text-shadow: 0 0 14px var(--teal), 0 .5vmin 0 #071a22; animation: pop .7s cubic-bezier(.2,1.8,.4,1) both; }
.callout.red { -webkit-text-stroke-color: var(--red); text-shadow: 0 0 14px var(--red), 0 .5vmin 0 #2a0710; }
.callout.gold { -webkit-text-stroke-color: #ffc861; text-shadow: 0 0 14px #ffb23f, 0 .5vmin 0 #2a1a07; }
.callout.sm { font-size: clamp(14px, 3.6vmin, 36px); }
@keyframes pop { 0% { transform: scale(2.4); opacity: 0; } 30% { transform: scale(.9); opacity: 1; } 45% { transform: scale(1.05); } 55% { transform: scale(1); } 100% { transform: scale(1); opacity: 1; } }
#stagecard { position: fixed; left: 0; right: 0; top: 30%; z-index: 7; pointer-events: none; display: flex; justify-content: center; }
.sc-in { background: rgba(7,11,24,.82); border-top: 2px solid var(--teal); border-bottom: 2px solid var(--teal); padding: 2.5vmin 10vmin; text-align: center;
  clip-path: polygon(4vmin 0, 100% 0, calc(100% - 4vmin) 100%, 0 100%); animation: slide .35s cubic-bezier(.2,1.4,.4,1) both; }
#stagecard.out .sc-in { animation: snap .18s ease-in both; }
@keyframes slide { from { transform: translateX(-120vw) skewX(-12deg); } to { transform: none; } }
@keyframes snap { to { transform: translateX(120vw) skewX(12deg); } }
#scTitle { font-weight: 900; font-size: clamp(34px, 11vmin, 110px); letter-spacing: .25em; color: #fff; -webkit-text-stroke: 1px var(--teal); text-shadow: 0 0 18px var(--teal); }
#scSub { font-weight: 700; letter-spacing: .45em; color: var(--teal); font-size: clamp(11px, 2.8vmin, 26px); margin-top: 1vmin; }

/* attract */
#attract { position: fixed; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: max(4vh, env(safe-area-inset-top)); gap: 2.2vh; cursor: pointer; }
#title { width: min(78vw, 92vh); filter: drop-shadow(0 0 1.6vmin rgba(46,230,208,.55)) drop-shadow(0 .6vmin 0 rgba(0,0,0,.5)); animation: hover 4s ease-in-out infinite; }
@keyframes hover { 50% { transform: translateY(-.8vmin); } }
#insert { font-family: "Orbitron"; font-weight: 900; letter-spacing: .4em; font-size: clamp(13px, 3.4vmin, 32px); color: #fff; text-shadow: 0 0 10px var(--teal), 0 2px 0 #000; text-align: center; padding: 0 2vw; }
.blink { animation: hard 1s steps(1) infinite; }
.holo { background: rgba(7,20,32,.72); border: 1px solid var(--teal); color: var(--teal); padding: 1.8vmin 3vmin;
  clip-path: polygon(2.4vmin 0, 100% 0, 100% calc(100% - 2.4vmin), calc(100% - 2.4vmin) 100%, 0 100%, 0 2.4vmin); box-shadow: inset 0 0 30px rgba(46,230,208,.15); }
#attractPanel { width: min(64vmin, 88vw); font-size: clamp(10px, 2vmin, 17px); }
.hp-h { font-weight: 900; letter-spacing: .4em; text-align: center; margin-bottom: 1.2vmin; color: #e8fffb; text-shadow: 0 0 8px var(--teal); }
#hiList { list-style: none; margin: 0; padding: 0; font-family: "PS2P", monospace; font-size: clamp(9px, 1.9vmin, 16px); line-height: 2.1; }
#hiList li { display: flex; justify-content: space-between; gap: 2vmin; }
#hiList li.me { color: #ffc861; }
#hiList a { color: inherit; text-decoration: none; }
#attractPanel p, #help p { margin: .7vmin 0; line-height: 1.5; letter-spacing: .05em; color: #cffaf3; font-family: system-ui, sans-serif; }
.red { color: var(--red); font-weight: 700; }
#credit { position: fixed; bottom: calc(min(30vh, 34vw) + 1vh); left: 0; right: 0; text-align: center; font-family: "PS2P"; font-size: clamp(9px, 1.8vmin, 15px); color: #fff; text-shadow: 0 2px 0 #000; }
body.portrait #attract { gap: 3vh; padding-top: max(6vh, env(safe-area-inset-top)); }
body.portrait #title { width: 92vw; }

#tally { position: fixed; z-index: 8; left: 50%; top: 46%; transform: translate(-50%, -50%); width: min(70vmin, 90vw); font-size: clamp(11px, 2.4vmin, 20px); }
#tally .t-row { display: flex; justify-content: space-between; margin: .8vmin 0; letter-spacing: .15em; }
#tally .t-big { color: #fff; font-weight: 900; font-size: 1.4em; text-shadow: 0 0 10px var(--teal); }
#tally img { width: 40%; display: block; margin: 0 auto 1vmin; animation: bank 1.6s ease-in-out infinite; }
@keyframes bank { 50% { transform: rotate(-6deg) translateX(1vmin); } }
#cont { position: fixed; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vmin; background: rgba(7,11,24,.55); cursor: pointer; }
.c-t { font-weight: 900; letter-spacing: .3em; font-size: clamp(26px, 8vmin, 80px); color: #fff; text-shadow: 0 0 14px var(--red); }
#contN { font-family: "PS2P"; font-size: clamp(40px, 16vmin, 160px); color: var(--red); text-shadow: 0 .8vmin 0 #2a0710; }
#help { position: fixed; z-index: 10; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(80vmin, 92vw); font-size: clamp(12px, 2.3vmin, 18px); cursor: auto; }
#help * { cursor: auto; }
.btn { display: block; margin: 2vmin auto 0; background: var(--teal); color: #071a22; border: 0; font: 900 clamp(11px, 2vmin, 16px) "Orbitron"; letter-spacing: .25em; padding: 1.4vmin 3vmin; cursor: pointer; clip-path: polygon(1vmin 0,100% 0,100% calc(100% - 1vmin),calc(100% - 1vmin) 100%,0 100%,0 1vmin); }
#corner { position: fixed; z-index: 11; top: calc(env(safe-area-inset-top) + 2vmin); right: calc(env(safe-area-inset-right) + 2vmin); display: flex; gap: 1vmin; }
body.play #corner { top: calc(env(safe-area-inset-top) + 2vmin + clamp(48px, 10vmin, 90px)); }
.cbtn { width: clamp(30px, 5.4vmin, 44px); height: clamp(30px, 5.4vmin, 44px); border: 1px solid var(--teal); background: rgba(7,20,32,.7); color: var(--teal); font: 700 clamp(9px, 1.6vmin, 13px) "Orbitron"; cursor: pointer !important; padding: 0; }
.cbtn.off { color: rgba(46,230,208,.4); text-decoration: line-through; }
#loading { position: fixed; inset: 0; z-index: 20; background: #070b18; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vmin; color: var(--teal); font: 700 clamp(12px, 2.6vmin, 22px) "Orbitron"; letter-spacing: .4em; }
#loadPct { font-family: "PS2P"; }

#stageSel { display: flex; gap: 2vmin; }
#stageSel .ss { position: relative; display: flex; flex-direction: column; align-items: center; gap: .5vmin; min-width: min(30vmin, 40vw); padding: 1.2vmin 2.4vmin; background: rgba(6,20,32,.72); border: 2px solid rgba(46,230,208,.35); color: #cffaf3; cursor: pointer;
  font-family: "Orbitron"; clip-path: polygon(1.2vmin 0,100% 0,100% calc(100% - 1.2vmin),calc(100% - 1.2vmin) 100%,0 100%,0 1.2vmin); }
#stageSel .ss b { font-weight: 900; letter-spacing: .25em; font-size: clamp(11px, 2.2vmin, 18px); }
#stageSel .ss small { letter-spacing: .12em; font-size: clamp(9px, 1.6vmin, 13px); opacity: .8; }
#stageSel .ss i { position: absolute; top: -.2vmin; right: 1.2vmin; font: normal clamp(8px, 1.3vmin, 11px) "PS2P"; color: #ffc861; }
#stageSel .ss.on { border-color: var(--teal); background: rgba(46,230,208,.22); color: #fff; box-shadow: inset 0 0 2vmin rgba(46,230,208,.35); }
#credit { top: max(16px, env(safe-area-inset-top)); bottom: auto; left: 16px; right: auto; }

/* high-score screen */
#attract { transition: opacity 1.2s ease; }
#attract.faded { opacity: 0; pointer-events: none; }
#hiscreen { position: fixed; inset: 0; z-index: 9; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity 1.4s ease; cursor: pointer; background: #070b18; }
#hiscreen.on { opacity: 1; pointer-events: auto; }
#hsBg { position: absolute; left: 50%; top: 50%; width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; background: url(img/hiscore_bg.webp) center / cover no-repeat; animation: hsSpin 120s linear infinite; will-change: transform; }
@keyframes hsSpin { from { transform: rotate(0deg) scale(1.05); } 50% { transform: rotate(180deg) scale(1.15); } to { transform: rotate(360deg) scale(1.05); } }
#hsShade { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(7,11,24,.25), rgba(7,11,24,.75)); }
#hsIn { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.4vh; padding: env(safe-area-inset-top) 4vw env(safe-area-inset-bottom); }
#hsLogo { width: min(46vmin, 60vw); max-height: 24vh; object-fit: contain; filter: drop-shadow(0 0 2vmin rgba(0,0,0,.8)); }
#hsPanel { width: min(70vmin, 88vw); font-size: clamp(12px, 2.6vmin, 22px); background: rgba(7,20,32,.8); }
#hsList { list-style: none; margin: 0; padding: 0; font-family: "PS2P", monospace; font-size: clamp(11px, 2.6vmin, 22px); line-height: 2.2; }
#hsList li { display: flex; justify-content: space-between; gap: 2vmin; }
#hsList li:nth-child(1) { color: #ffe27a; }
#hsList li.me { color: #ffc861; }
#hsList a { color: inherit; text-decoration: none; }
.hs-tip { color: #e8fffb; text-shadow: 0 0 8px #000; font-family: "PS2P", monospace; font-size: clamp(9px, 1.8vmin, 14px); letter-spacing: .1em; }