:root{
  --accent:#5ef2c0;
  --accent2:#ff5a5a;
  --bg:#0b0f14;
  --panel:#121924ee;
  --panel-border:#2a3a4a;
  --text:#e8f3f0;
  --muted:#8ea3ad;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent; user-select:none;}
html,body{margin:0;padding:0;width:100%;height:100%;background:var(--bg);overflow:hidden;
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif; color:var(--text);
  touch-action:none; overscroll-behavior:none;}
#app{position:fixed; inset:0; width:100%; height:100%;}
canvas#game{position:absolute; inset:0; width:100%; height:100%; display:block; background:#0e141b;}

/* HUD */
#hud{position:absolute; top:0; left:0; right:0; padding:calc(env(safe-area-inset-top,0px) + 10px) 14px 0; pointer-events:none; z-index:5;}
#hud-top{display:flex; align-items:center; gap:10px;}
#hp-wrap{position:relative; flex:1; max-width:220px; height:20px; background:#1c2733; border:2px solid var(--panel-border); border-radius:10px; overflow:hidden;}
#hp-bar{position:absolute; inset:0; width:100%; background:linear-gradient(90deg,#3ddc84,#5ef2c0); transition:width .15s ease;}
#hp-label{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; text-shadow:0 1px 2px #000;}
#wave-label{font-weight:800; letter-spacing:1px; font-size:13px; color:var(--accent); text-shadow:0 1px 3px #000; white-space:nowrap;}
#parts-label{margin-left:auto; font-weight:700; font-size:14px; background:var(--panel); border:1px solid var(--panel-border); padding:4px 10px; border-radius:20px;}
#audio-btn{width:34px; height:34px; flex:0 0 auto; border-radius:50%; border:1px solid var(--panel-border); background:var(--panel); color:var(--text); font-size:16px; pointer-events:auto; padding:0; line-height:1;}
#audio-btn.muted{opacity:.55;}
#xp-wrap{margin-top:8px; height:8px; background:#1c2733cc; border-radius:6px; overflow:hidden; max-width:520px;}
#xp-bar{height:100%; width:0%; background:linear-gradient(90deg,#ffb84d,#ff5a5a); transition:width .2s ease;}
#lvl-badge{position:absolute; top:calc(env(safe-area-inset-top,0px) + 32px); left:14px; background:#000a; border:1px solid var(--panel-border); font-size:10px; font-weight:800; padding:2px 8px; border-radius:10px; color:var(--accent);}

/* boss health bar — big, top-center, shown during boss fights */
#boss-bar{position:absolute; top:calc(env(safe-area-inset-top,0px) + 44px); left:50%; transform:translateX(-50%); width:min(78vw,540px); text-align:center; pointer-events:none;}
#boss-bar.hidden{display:none;}
#boss-name{font-weight:900; letter-spacing:2px; font-size:15px; color:#ff6b6b; text-shadow:0 2px 6px #000; margin-bottom:3px;}
#boss-hp-wrap{height:16px; background:#1c0f14; border:2px solid #5a2a2a; border-radius:9px; overflow:hidden; box-shadow:0 0 14px #ff000055;}
#boss-hp{height:100%; width:100%; background:linear-gradient(90deg,#ff2e2e,#ff8a3d); transition:width .12s ease;}

/* combo meter — escalating reward readout, warms up as the streak climbs */
#combo-meter{position:absolute; top:calc(env(safe-area-inset-top,0px) + 54px); left:50%; transform:translateX(-50%);
  font-weight:900; letter-spacing:1px; font-style:italic;
  font-size:calc(18px + var(--heat,0) * 16px);
  color:hsl(calc(48deg - var(--heat,0) * 48deg) 100% 60%);
  text-shadow:0 2px 8px #000, 0 0 calc(6px + var(--heat,0)*18px) hsla(calc(48deg - var(--heat,0)*48deg) 100% 55% / .8);
  pointer-events:none; animation:comboPop .18s ease-out;}
#combo-meter.hot{animation:comboPulse .4s ease-in-out infinite;}
#combo-meter.hidden{display:none;}
@keyframes comboPop{ from{transform:translateX(-50%) scale(1.4);} to{transform:translateX(-50%) scale(1);} }
@keyframes comboPulse{ 0%,100%{transform:translateX(-50%) scale(1);} 50%{transform:translateX(-50%) scale(1.12);} }

/* Controls */
#controls{position:absolute; inset:0; z-index:4;}
#joy-zone{position:absolute; left:0; bottom:0; width:45%; height:55%;}
#joy-base{position:absolute; width:110px; height:110px; border-radius:50%; background:#1c2733a0; border:2px solid #3a4d5f; display:none; align-items:center; justify-content:center;}
#joy-stick{width:48px; height:48px; border-radius:50%; background:var(--accent); opacity:.85; box-shadow:0 0 14px #5ef2c088;}

#action-zone{position:absolute; right:16px; bottom:calc(env(safe-area-inset-bottom,0px) + 22px); display:flex; flex-direction:column; align-items:center; gap:14px;}
#special-btn{position:relative; width:74px; height:74px; border-radius:50%; border:none; background:radial-gradient(circle at 35% 30%,#2a3a4a,#101820); color:var(--accent); font-size:28px; display:flex; align-items:center; justify-content:center; pointer-events:auto;}
#special-btn:disabled{opacity:.4;}
#special-ring{position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg);}
#special-ring circle{fill:none; stroke:#3a4d5f; stroke-width:3; stroke-dasharray:100.5; stroke-dashoffset:0; transition:stroke-dashoffset .1s linear;}
#shop-btn{width:48px; height:48px; border-radius:50%; border:2px solid var(--panel-border); background:#121924cc; color:var(--text); font-size:20px; pointer-events:auto;}

/* Overlays */
.overlay{position:absolute; inset:0; background:#070a0dee; z-index:10; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; text-align:center; pointer-events:auto;}
.overlay.hidden{display:none;}
/* Title splash: the art already contains the logo and "TAP TO START", so it is
   shown whole (contain, never cropped) and the entire screen acts as the button. */
#start-screen{background:#05060a; padding:0; justify-content:flex-end;}
#start-btn{position:absolute; inset:0; width:100%; height:100%; border:none; padding:0;
  background:url('assets/title-screen.png') center/contain no-repeat, #05060a;
  cursor:pointer; pointer-events:auto;}
#start-btn:active{filter:brightness(1.12);}
#start-screen #wardrobe-btn{position:relative; z-index:2; margin-bottom:6vh; opacity:.92;}
/* The portrait art has the logo and "TAP TO START" painted in. The wide art
   does not, so landscape gets them as real text instead. Hidden by default so
   nothing double-prints over the portrait art. pointer-events stay off — the
   splash underneath is the start button and must keep every tap. */
#start-wide-title{display:none;}
@media (orientation:landscape){
  #start-btn{background-image:url('assets/title-wide.png');}
  /* Title sits high, prompt sits low above the wardrobe button — the same
     reading order the portrait art paints in. The prompt is positioned rather
     than pushed with margin:auto: this overlay is an abspos child of a flex
     container with align-items:center, which shrink-wraps it instead of
     stretching, so there would be no free space for auto margins to consume. */
  #start-wide-title{display:block; position:absolute; inset:0; z-index:2;
    pointer-events:none; text-align:center; padding:3.5vh 16px 0;
    text-shadow:0 2px 18px #05060a, 0 0 34px #05060acc;}
  #start-wide-title p{margin:0;}
  .swt-name{font-size:clamp(30px,6.2vw,64px); font-weight:800; letter-spacing:4px;
    line-height:1; color:#ffd76a;}
  .swt-name strong{color:#ff7ad1;}
  .swt-sub{margin-top:6px; font-size:clamp(12px,1.9vw,20px); letter-spacing:3px; color:var(--accent2);}
  .swt-cta{position:absolute; left:0; right:0; bottom:16vh;
    font-size:clamp(16px,2.5vw,30px); font-weight:800; letter-spacing:5px;
    color:#ff9ede; animation:swtPulse 1.5s ease-in-out infinite;}
}
@keyframes swtPulse{0%,100%{opacity:.62;} 50%{opacity:1;}}
@media (prefers-reduced-motion:reduce){
  .swt-cta{animation:none; opacity:1;}
}
.overlay h1{font-size:clamp(28px,8vw,46px); line-height:1.05; letter-spacing:2px; margin:0 0 10px; color:var(--accent); text-shadow:0 0 24px #5ef2c055; text-transform:uppercase;}
.overlay h1 .wow{display:inline-block; background:linear-gradient(90deg,#ff5a5a,#ffb84d,#5ef2c0,#7ad7ff,#c07bff); -webkit-background-clip:text; background-clip:text; color:transparent; font-style:italic; animation:wowPop 1.1s ease-in-out infinite;}
@keyframes wowPop{ 0%,100%{transform:scale(1) rotate(-3deg);} 50%{transform:scale(1.18) rotate(3deg);} }
.overlay h2{font-size:clamp(24px,7vw,34px); letter-spacing:1px; margin:0 0 4px; color:var(--accent2);}
.tagline{color:var(--muted); margin:0 0 22px; font-size:14px; max-width:360px;}
.hint{margin-top:22px; color:var(--muted); font-size:12px; line-height:1.6;}
.big-btn{background:linear-gradient(180deg,#5ef2c0,#33c795); border:none; color:#04140d; font-weight:800; font-size:16px; letter-spacing:1px; padding:16px 36px; border-radius:14px; box-shadow:0 6px 0 #1f7a58; pointer-events:auto;}
.big-btn:active{transform:translateY(4px); box-shadow:0 2px 0 #1f7a58;}
.big-btn.small{margin-top:18px; padding:10px 26px; font-size:13px;}

.choice-grid{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; max-width:520px; max-height:56vh; overflow-y:auto; padding:4px;}
.choice-card{width:150px; background:var(--panel); border:1px solid var(--panel-border); border-radius:14px; padding:14px 12px; display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:auto;}
.choice-card .icon{font-size:26px;}
.choice-card .name{font-weight:800; font-size:13px;}
.choice-card .desc{font-size:11px; color:var(--muted); min-height:30px;}
.choice-card .cost{font-size:11px; font-weight:700; color:var(--accent); margin-top:2px;}
.choice-card.locked{opacity:.35; filter:grayscale(1);}
.choice-card button{margin-top:6px; background:#2a3a4a; border:1px solid #3a4d5f; color:var(--text); padding:6px 14px; border-radius:8px; font-size:12px; font-weight:700;}
.choice-card button:disabled{opacity:.4;}

#stats{color:var(--muted); font-size:14px; line-height:2; margin-bottom:18px;}
#stats b{color:var(--text);}

/* Wardrobe skin cards */
.skin-card{width:132px; background:var(--panel); border:2px solid var(--panel-border); border-radius:14px; padding:12px 10px; display:flex; flex-direction:column; align-items:center; gap:6px; pointer-events:auto;}
.skin-card.equipped{border-color:var(--accent); box-shadow:0 0 16px #5ef2c055;}
.skin-card.locked{opacity:.5; filter:grayscale(.8);}
.skin-card canvas{width:84px; height:84px; image-rendering:pixelated; background:#0d141b88; border-radius:10px;}
.skin-card .name{font-weight:800; font-size:13px;}
.skin-card .status{font-size:11px; color:var(--muted); min-height:16px;}
.skin-card button{margin-top:2px; background:#2a3a4a; border:1px solid #3a4d5f; color:var(--text); padding:6px 16px; border-radius:8px; font-size:12px; font-weight:700;}
.skin-card button:disabled{opacity:.4;}
.skin-card.equipped button{background:var(--accent); color:#04140d;}

@media (min-width:700px){
  #joy-zone{width:32%;}
}