:root{
  --ink:#0b101d; --ink2:#131c30; --paper:#f3e9d2; --paper-dim:#cbbfa3;
  --verm:#e23b2e; --verm-d:#9c211a; --gold:#d9a441; --gold-l:#f2cd7e;
  --sakura:#ff8fab; --sakura-l:#ffc2d1; --teal:#3ec6bb;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:#05070d radial-gradient(1200px 600px at 50% -10%, #1a2542 0%, #05070d 60%);
  color:var(--paper);
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",sans-serif;
  display:flex;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;overflow:hidden;
  touch-action:none;overscroll-behavior:none;
}
canvas{touch-action:none}
#frame{
  position:relative;width:min(100vw,177.78vh);aspect-ratio:16/9;max-height:100vh;
  background:#000;overflow:hidden;
  box-shadow:0 0 0 1px #2a3757,0 30px 80px rgba(0,0,0,.8),0 0 120px rgba(226,59,46,.08);
}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hidden{display:none!important}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;pointer-events:none;z-index:5;
  display:flex;justify-content:space-between;align-items:flex-start;padding:14px 16px;gap:12px}
.plate{
  background:linear-gradient(180deg,rgba(16,23,42,.92),rgba(9,13,24,.92));
  border:1px solid rgba(217,164,65,.55);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  padding:8px 12px;box-shadow:0 6px 18px rgba(0,0,0,.5);
}
.name-plate{display:flex;align-items:baseline;gap:10px;margin-bottom:8px;border-left:4px solid var(--verm)}
.name-jp{font-family:"Shippori Mincho B1",serif;font-weight:800;font-size:18px;letter-spacing:.12em}
.name-en{font-family:Cinzel,serif;font-size:10px;letter-spacing:.34em;color:var(--gold-l)}
.bar-label{font-size:11px;font-weight:900;letter-spacing:.2em;color:var(--paper-dim);display:flex;justify-content:space-between}
.bar-label span{color:var(--paper)}
.bar{position:relative;height:14px;background:#05070d;border:1px solid rgba(243,233,210,.25);margin:3px 0 7px;overflow:hidden}
.bar>div:first-child{height:100%;transition:width .18s ease-out}
#hp-fill{width:100%;background:repeating-linear-gradient(-55deg,#f05548 0 10px,#d8342a 10px 20px)}
.gauge-bar{height:11px}
#gauge-fill{width:0%;background:repeating-linear-gradient(-55deg,#ffb3c2 0 10px,#ff7d9c 10px 20px)}
.bar-shine{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.22),transparent 55%);pointer-events:none}
.gauge-label{color:var(--sakura-l)}
#gauge-ready{font-size:11px;font-weight:900;color:#0b101d;background:var(--sakura);padding:2px 6px;letter-spacing:.06em;animation:readyBlink .7s steps(2) infinite}
@keyframes readyBlink{50%{background:var(--gold-l)}}
.hud-center{text-align:center}
#wave-plate{min-width:250px;line-height:1.1}
.stage-name{font-family:"Shippori Mincho B1",serif;font-weight:800;font-size:16px;letter-spacing:.14em;color:#fff}
.stage-name #stage-num{font-family:Cinzel,serif;font-size:9px;letter-spacing:.3em;color:var(--gold-l);margin-left:4px}
.progress-track{position:relative;height:10px;background:#05070d;border:1px solid rgba(217,164,65,.55);margin:19px 2px 5px}
#progress-fill{height:100%;width:0%;background:repeating-linear-gradient(-55deg,#ffb3c2 0 8px,#ff7d9c 8px 16px);transition:width .25s linear}
.progress-track span{position:absolute;top:-15px;font-size:8.5px;font-weight:900;letter-spacing:.06em;color:var(--paper-dim)}
.progress-start{left:0}
.progress-goal{right:0;color:var(--gold-l)}
#progress-player{top:-17px;left:0;color:#fff;background:var(--verm);border:1px solid var(--gold-l);width:15px;height:15px;line-height:14px;text-align:center;border-radius:50%;font-size:9px;transform:translateX(-50%);transition:left .25s linear}
#enemies-left{font-size:11px;font-weight:700;color:var(--sakura-l);letter-spacing:.18em}
.hud-right{text-align:right}
.score-plate{min-width:210px}
.score-row{display:flex;justify-content:space-between;gap:18px;font-family:Cinzel,serif;letter-spacing:.18em;font-size:11px;color:var(--paper-dim)}
.score-row b{font-size:20px;color:var(--paper);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.score-row.small b{font-size:13px;color:var(--gold-l)}
#combo-box{margin-top:6px;border-top:1px dashed rgba(217,164,65,.4);padding-top:6px;animation:comboPop .12s ease-out}
#combo-box b{font-family:"Shippori Mincho B1",serif;font-size:34px;color:#fff;text-shadow:0 0 14px rgba(255,141,171,.9),0 3px 0 var(--verm-d)}
.combo-unit{font-weight:900;letter-spacing:.2em;font-size:12px;margin:0 8px 0 2px}
#rank{font-family:Cinzel,serif;font-weight:900;font-size:22px;color:var(--gold-l);border:1px solid var(--gold);padding:0 7px}
@keyframes comboPop{from{transform:scale(1.18)}to{transform:scale(1)}}
.combo-bar{height:5px;background:#05070d;margin-top:5px}
#combo-fill{height:100%;background:var(--sakura);width:100%}
.hud-btns{margin-top:8px;display:flex;gap:6px;justify-content:flex-end;pointer-events:auto}
.mini-btn{cursor:pointer;background:rgba(11,16,29,.9);color:var(--paper);border:1px solid rgba(217,164,65,.5);
  font-family:inherit;font-weight:700;font-size:11px;letter-spacing:.08em;padding:5px 10px}
.mini-btn:hover{background:var(--verm-d);border-color:var(--verm)}
.mini-btn.off{opacity:.45;text-decoration:line-through}

/* ---------- banners ---------- */
#banner{position:absolute;left:0;right:0;top:34%;text-align:center;z-index:6;pointer-events:none;animation:bannerIn 2.4s ease both}
#banner-main{font-family:"Shippori Mincho B1",serif;font-weight:800;font-size:64px;letter-spacing:.3em;color:#fff;
  text-shadow:0 0 24px rgba(255,141,171,.75),0 4px 0 var(--verm-d),0 10px 34px rgba(0,0,0,.7)}
#banner-sub{font-family:Cinzel,serif;letter-spacing:.5em;font-size:13px;color:var(--gold-l);margin-top:6px}
@keyframes bannerIn{0%{opacity:0;transform:scale(1.25)}12%{opacity:1;transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:scale(.98)}}
#boss-warning{position:absolute;left:0;right:0;top:38%;z-index:7;text-align:center;pointer-events:none;animation:warnIn 3s ease both}
.warn-stripes{height:14px;background:repeating-linear-gradient(-45deg,var(--verm) 0 18px,#0b101d 18px 36px);animation:stripeMove .5s linear infinite}
@keyframes stripeMove{to{background-position:50px 0}}
.warn-text{font-family:"Shippori Mincho B1",serif;font-weight:800;font-size:72px;letter-spacing:.5em;color:var(--verm);
  background:rgba(5,7,13,.82);text-shadow:0 0 30px rgba(226,59,46,.8);padding:6px 0 0}
.warn-sub{background:rgba(5,7,13,.82);color:var(--paper);font-weight:900;letter-spacing:.22em;font-size:14px;padding:2px 0 10px}
@keyframes warnIn{0%,100%{opacity:0}8%,88%{opacity:1}}
#damage-vignette{position:absolute;inset:0;pointer-events:none;z-index:4;opacity:0;
  box-shadow:inset 0 0 120px 40px rgba(200,20,10,.55)}
#flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:8}

/* ---------- screens ---------- */
.screen{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center}
#keyart{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.title-shade{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(5,7,13,.86) 0%,rgba(5,7,13,.45) 46%,rgba(5,7,13,.05) 75%),
  linear-gradient(0deg,rgba(5,7,13,.75),transparent 45%)}
.title-inner{position:relative;width:min(620px,92%);margin-right:auto;margin-left:4.5%;animation:titleRise .9s cubic-bezier(.2,.9,.25,1) both}
@keyframes titleRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.title-kicker{display:inline-block;background:var(--verm);color:#fff;font-weight:900;letter-spacing:.28em;font-size:12px;padding:5px 12px 5px 14px;box-shadow:4px 4px 0 rgba(0,0,0,.45)}
.logo{margin:14px 0 6px;line-height:.95}
.logo-kanji{display:block;font-family:"Shippori Mincho B1",serif;font-weight:800;font-size:min(104px,13vw);letter-spacing:.06em;color:#fff;
  text-shadow:0 3px 0 var(--verm-d),0 0 34px rgba(255,141,171,.5),0 14px 44px rgba(0,0,0,.8)}
.logo-en{display:block;font-family:Cinzel,serif;font-weight:900;font-size:17px;letter-spacing:.68em;color:var(--gold-l);margin-top:10px}
.title-desc{font-size:14px;line-height:1.9;color:var(--paper);font-weight:500;text-shadow:0 2px 8px #000;margin:14px 0 20px}
.big-btn{cursor:pointer;pointer-events:auto;border:1px solid var(--gold-l);color:#fff;
  background:linear-gradient(180deg,#e8483c,#b02318);padding:13px 46px 11px;text-align:center;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
  box-shadow:0 10px 30px rgba(226,59,46,.4),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .12s ease,filter .12s ease;animation:btnPulse 2.2s ease-in-out infinite}
.big-btn:hover{transform:translateY(-2px) scale(1.02);filter:brightness(1.12)}
.big-btn:active{transform:scale(.97)}
@keyframes btnPulse{0%,100%{box-shadow:0 10px 30px rgba(226,59,46,.35)}50%{box-shadow:0 10px 44px rgba(226,59,46,.65)}}
.btn-main{display:block;font-family:"Shippori Mincho B1",serif;font-weight:800;font-size:30px;letter-spacing:.4em}
.btn-sub{display:block;font-family:Cinzel,serif;font-size:10px;letter-spacing:.4em;color:#ffd9d4;margin-top:3px}
.controls-card{margin-top:22px;background:rgba(7,10,19,.82);border:1px solid rgba(217,164,65,.45);border-left:4px solid var(--gold);
  padding:12px 16px;display:grid;grid-template-columns:1fr 1fr;gap:7px 18px;max-width:560px}
.ctl{font-size:11.5px;color:var(--paper-dim);display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.ctl span{color:var(--paper);font-weight:700;margin-left:3px}
kbd{background:#1c2740;border:1px solid #46588a;border-bottom-width:3px;border-radius:4px;color:#fff;
  font-family:inherit;font-size:10.5px;font-weight:900;padding:1px 6px;min-width:22px;text-align:center}
.title-best{margin-top:12px;font-family:Cinzel,serif;letter-spacing:.24em;font-size:12px;color:var(--gold-l)}
.title-petals-note{position:absolute;right:18px;bottom:14px;font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--paper);
  background:rgba(7,10,19,.7);padding:5px 10px;border:1px solid rgba(243,233,210,.25)}

#pause-screen,#over-screen{background:rgba(4,6,11,.72);backdrop-filter:blur(3px)}
.panel{background:linear-gradient(180deg,#141e36,#0a0f1f);border:1px solid rgba(217,164,65,.6);
  clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);
  padding:34px 44px;text-align:center;box-shadow:0 30px 70px rgba(0,0,0,.7);animation:titleRise .5s ease both;min-width:min(480px,92vw)}
.panel h2{font-family:"Shippori Mincho B1",serif;font-size:38px;letter-spacing:.3em}
.panel-sub{font-family:Cinzel,serif;letter-spacing:.5em;font-size:11px;color:var(--gold-l);margin:6px 0 22px}
.panel .big-btn{width:100%;margin-bottom:12px}
.ghost-btn{cursor:pointer;display:block;width:100%;background:transparent;border:1px solid rgba(243,233,210,.35);color:var(--paper);
  font-family:inherit;font-weight:700;letter-spacing:.2em;padding:10px;margin-top:8px}
.ghost-btn:hover{border-color:var(--sakura);color:var(--sakura-l)}
.over-kicker{color:var(--sakura-l);font-weight:900;letter-spacing:.16em;font-size:12px}
.over-title{font-size:52px!important;color:#fff;text-shadow:0 4px 0 var(--verm-d)}
.result-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:18px 0}
.result-grid>div{background:rgba(5,7,13,.6);border:1px solid rgba(217,164,65,.35);padding:10px 6px}
.result-grid span{display:block;font-size:10.5px;letter-spacing:.14em;color:var(--paper-dim);font-weight:700}
.result-grid b{font-family:"Shippori Mincho B1",serif;font-size:26px;color:#fff}
.result-score{grid-column:1/-1}
.result-score b{font-size:38px;color:var(--gold-l)}
#new-record{font-weight:900;color:#0b101d;background:var(--gold-l);letter-spacing:.3em;padding:6px;margin-bottom:14px;animation:readyBlink .6s steps(2) infinite}

.clear-kicker{color:#9fe8b1}
.clear-title{text-shadow:0 4px 0 #1d5c33,0 0 30px rgba(120,230,150,.35)}
#clear-record{font-weight:900;color:#0b101d;background:var(--gold-l);letter-spacing:.3em;padding:6px;margin-bottom:14px;animation:readyBlink .6s steps(2) infinite}
#rotate-hint{position:absolute;top:calc(8px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:11;
  background:rgba(7,10,19,.88);border:1px solid rgba(217,164,65,.6);color:var(--paper);
  font-size:11px;font-weight:900;letter-spacing:.12em;padding:6px 14px;white-space:nowrap}
@media (orientation:landscape){#rotate-hint{display:none!important}}

/* ---------- touch ---------- */
#touch{position:absolute;left:0;right:0;bottom:0;z-index:9;display:flex;justify-content:space-between;align-items:flex-end;
  padding:0 calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left));pointer-events:none}
#touch button{pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;width:60px;height:60px;border-radius:50%;
  border:1.5px solid rgba(217,164,65,.8);background:rgba(11,16,29,.68);color:#fff;font-family:inherit;font-weight:900;font-size:16px;
  box-shadow:0 4px 14px rgba(0,0,0,.5)}
#touch button:active{background:rgba(226,59,46,.75);transform:scale(.93)}
#touch .t-attack{background:rgba(156,33,26,.82);width:74px;height:74px;font-size:24px}
#touch .t-special{background:rgba(255,141,171,.78);color:#0b101d;font-size:12px}
#touch .t-aim{width:46px;height:46px;font-size:11px;background:rgba(20,34,58,.78)}
.touch-left,.touch-right{display:flex;gap:10px;align-items:flex-end}
.touch-right{align-items:flex-end}
@media (pointer:fine) and (hover:hover){#touch{display:none!important}}

#loading{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:#070a13;
  font-family:"Shippori Mincho B1",serif;letter-spacing:.3em;font-size:18px;color:var(--sakura-l)}
@media (orientation:portrait) and (max-width:640px){
  #touch button{width:40px;height:40px;font-size:11px}
  #touch .t-aim{width:36px;height:36px;font-size:9px}
  #touch .t-attack{width:50px;height:50px;font-size:17px}
  #touch .t-special{font-size:10px}
  .touch-left,.touch-right{gap:6px}
  #rotate-hint{top:auto;bottom:70px;font-size:10px;padding:5px 10px}
  .score-row.small{display:none}
  #wave-plate{min-width:128px}
  .hud-btns{display:none}
}
@media (max-width:860px){
  .controls-card{grid-template-columns:1fr}
  .logo-kanji{font-size:54px}
  #banner-main{font-size:38px}
  #hud{padding:8px;gap:6px}
  .plate{padding:5px 8px}
  .name-en{display:none}
  .name-jp{font-size:13px}
  .hp-plate{width:132px}
  .bar{height:10px;margin:2px 0 4px}
  .bar-label{font-size:9px}
  #wave-plate{min-width:158px}
  .stage-name{font-size:12px}
  #enemies-left{font-size:9px}
  .score-plate{min-width:118px}
  .score-row b{font-size:14px}
  #combo-box b{font-size:22px}
  .mini-btn{font-size:9px;padding:4px 6px}
  #gauge-ready{font-size:8.5px}
  .panel{padding:22px 18px}
  .title-desc{font-size:12px}
  .title-inner{margin-left:3%}
}