:root{
  --disp:'Hiragino Maru Gothic ProN','Yu Gothic UI','Yu Gothic',system-ui,sans-serif;
  --body:'Hiragino Maru Gothic ProN','Yu Gothic UI','Yu Gothic',system-ui,sans-serif;
  --ink:#4a2c3a; --ink2:#7a4a5c; --cream:#fff7e8; --plum:#3a2440;
  --coral:#ff6b5e; --coral2:#e8556d; --sun:#ffd95e; --teal:#3ec6b0;
  --pink:#ff8fb3; --line:#5b3a4a;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;}
html,body{height:100%;}
body{
  font-family:var(--body); color:var(--ink);
  min-height:100dvh;
  background:
    radial-gradient(circle at 20% 15%, rgba(255,140,120,.10), transparent 40%),
    radial-gradient(circle at 80% 85%, rgba(120,90,200,.12), transparent 45%),
    radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0/22px 22px,
    #241a2e;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  user-select:none;
}
#stage{
  position:relative; width:min(100vw,160vh); max-width:100vw; max-height:100dvh; aspect-ratio:960/600;
  border-radius:16px; overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 0 4px #3a2b45, 0 0 0 8px rgba(255,217,94,.18);
  background:#1c1426;
}
canvas{display:block; width:100%; height:100%; touch-action:none;}
canvas:focus-visible{outline:4px solid var(--sun);outline-offset:-6px;}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;}
#orientationNotice{display:none;position:absolute;left:50%;bottom:4px;transform:translateX(-50%);z-index:19;background:rgba(36,20,46,.9);color:#fff7e8;border:2px solid rgba(255,217,94,.8);border-radius:18px;padding:4px 10px;font-size:11px;font-weight:700;pointer-events:none;white-space:nowrap;}

.ui{position:absolute; inset:0; pointer-events:none; font-family:var(--body);}
.panel{
  background:var(--cream); border:3px solid var(--line); border-radius:14px;
  box-shadow:0 4px 0 rgba(91,58,74,.85);
}
#hud{position:absolute; top:12px; left:12px; right:12px; display:flex; justify-content:space-between; align-items:flex-start; gap:8px;}
#scoreBox{padding:8px 16px 8px 14px; display:flex; align-items:center; gap:12px;}
#scoreBox .lbl{font-size:11px; letter-spacing:1px; color:var(--ink2); font-weight:700;}
#scoreBox .num{font-family:var(--disp); font-size:30px; line-height:1; color:var(--coral2); text-shadow:1px 1px 0 #fff, 2px 2px 0 rgba(91,58,74,.25);}
#comboChip{
  display:none; background:var(--pink); color:#fff; border:3px solid var(--line);
  border-radius:30px; padding:4px 12px; font-family:var(--disp); font-size:18px;
  box-shadow:0 3px 0 rgba(91,58,74,.8); transform-origin:left center; white-space:nowrap;
}
#comboChip.show{display:inline-block; animation:pop .35s cubic-bezier(.2,1.6,.4,1);}
@keyframes pop{0%{transform:scale(.3) rotate(-8deg);}60%{transform:scale(1.18) rotate(3deg);}100%{transform:scale(1) rotate(-2deg);}}
#rightHud{display:flex; gap:8px; align-items:center;}
.chip{padding:6px 12px; font-weight:700; font-size:13px; display:flex; align-items:center; gap:5px;}
#lvlChip{background:var(--sun);}
#timeChip{background:#fff;}
.iconbtn{
  width:42px; height:42px; border-radius:12px; border:3px solid var(--line);
  background:var(--cream); box-shadow:0 4px 0 rgba(91,58,74,.8);
  font-size:20px; cursor:pointer; pointer-events:auto; display:grid; place-items:center;
  transition:transform .08s, box-shadow .08s, background .15s;
}
.iconbtn:hover{background:#fff; transform:translateY(-1px);}
.iconbtn:active{transform:translateY(3px); box-shadow:0 1px 0 rgba(91,58,74,.8);}
button:focus-visible{outline:4px solid #fff;outline-offset:3px;box-shadow:0 0 0 7px var(--teal);}

#gasPanel{position:absolute; left:12px; bottom:12px; padding:9px 14px; width:300px;}
#gasPanel .top{display:flex; justify-content:space-between; align-items:center; margin-bottom:5px;}
#gasPanel .name{font-family:var(--disp); font-size:16px; color:var(--ink);}
#gasPanel .stat{font-size:12px; font-weight:700; color:var(--ink2);}
#gasTrack{position:relative; height:20px; border:3px solid var(--line); border-radius:12px; background:#f0e3d2; overflow:hidden;}
#gasFill{position:absolute; left:0; top:0; bottom:0; width:20%;
  background:linear-gradient(90deg,#7ac74f,#ffd95e 55%,#ff6b5e);
  background-size:200% 100%; transition:width .12s linear;}
#gasFill::after{content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(45deg, rgba(255,255,255,.25) 0 8px, transparent 8px 16px);
  animation:stripes 1s linear infinite;}
@keyframes stripes{to{background-position:32px 0;}}
#gasSkull{position:absolute; right:6px; top:50%; transform:translateY(-50%); font-size:14px; opacity:.5;}
#gasPanel.danger{animation:shake .35s infinite;}
#gasPanel.danger #gasFill{filter:saturate(1.4) brightness(1.05);}
#gasPanel.danger .stat{color:var(--coral2);}
#gasPanel.nogas{animation:shake .3s infinite;}
#gasPanel.nogas .stat{color:var(--coral2);}
@keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-2px) rotate(-.4deg);}75%{transform:translateX(2px) rotate(.4deg);}}

#missionBox{position:absolute; top:74px; left:12px; width:212px; padding:8px 12px; font-size:12px; transition:transform .15s;}
#missionBox .mlbl{font-family:var(--disp); font-size:13px; color:var(--coral2); display:flex; justify-content:space-between; align-items:center;}
#missionBox .mlbl .pt{font-family:var(--body); font-weight:700; color:var(--ink2); font-size:11px;}
#missionDesc{font-weight:700; margin:4px 0 5px; line-height:1.3; min-height:30px;}
#missionProg{height:9px; background:#f0e3d2; border:2px solid var(--line); border-radius:6px; overflow:hidden;}
#missionFill{height:100%; background:linear-gradient(90deg,var(--teal),#7ac74f); width:0%; transition:width .25s;}
#missionReward{font-size:11px; color:var(--ink2); font-weight:700; margin-top:4px; text-align:right;}
#missionBox.done{animation:mpop .45s cubic-bezier(.2,1.6,.4,1);}
@keyframes mpop{0%{transform:scale(1);}40%{transform:scale(1.08) rotate(-1deg); background:#d8f5e8;}100%{transform:scale(1);}}

#fartWrap{position:absolute; right:14px; bottom:14px; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:auto;}
#fartBtn{
  position:relative; width:116px; height:116px; border-radius:50%;
  border:4px solid var(--line); cursor:pointer; touch-action:none;
  background:radial-gradient(circle at 35% 30%, #ff9d8a, var(--coral) 55%, var(--coral2));
  box-shadow:0 7px 0 #a8334a, inset 0 -8px 14px rgba(120,20,40,.35), inset 0 6px 10px rgba(255,255,255,.35);
  display:grid; place-items:center; color:#fff; font-family:var(--disp);
  transition:transform .06s, box-shadow .12s, filter .15s;
}
#fartBtn:hover{filter:brightness(1.06);}
#fartBtn:active, #fartBtn.down{transform:translateY(5px); box-shadow:0 2px 0 #a8334a, inset 0 -8px 14px rgba(120,20,40,.35);}
#fartBtn.safe{box-shadow:0 7px 0 #a8334a, inset 0 -8px 14px rgba(120,20,40,.35), 0 0 0 5px rgba(122,199,79,.45), 0 0 26px rgba(122,199,79,.7);}
#fartBtn.danger{box-shadow:0 7px 0 #a8334a, inset 0 -8px 14px rgba(120,20,40,.35), 0 0 0 5px rgba(255,77,77,.45), 0 0 26px rgba(255,77,77,.65); filter:saturate(.75);}
#fartBtn.fever{box-shadow:0 7px 0 #a8334a, inset 0 -8px 14px rgba(120,20,40,.35), 0 0 0 5px rgba(255,217,94,.6), 0 0 30px rgba(255,217,94,.85); animation:feverPulse .6s infinite alternate;}
@keyframes feverPulse{to{filter:brightness(1.15);}}
#fartBtn.nogas{filter:grayscale(.85) brightness(.78);}
#fartBtn .ft{font-size:24px; line-height:1; text-shadow:1px 2px 0 rgba(120,20,40,.5);}
#fartBtn .fs{font-size:10px; font-family:var(--body); font-weight:700; opacity:.9; margin-top:2px;}
#fartBtn svg{position:absolute; inset:-7px; transform:rotate(-90deg); pointer-events:none;}
#fartBtn svg circle{fill:none; stroke-width:7; stroke-linecap:round;}
#ringBg{stroke:rgba(91,58,74,.25);}
#ringZone{stroke:#ffd95e; stroke-dasharray:0 377; filter:drop-shadow(0 0 5px rgba(255,217,94,.95)); opacity:.95;}
#ringFg{stroke:#fff; stroke-dasharray:377; stroke-dashoffset:377; filter:drop-shadow(0 0 4px rgba(255,255,255,.7));}
#gamanBtn{
  background:var(--cream); border:3px solid var(--line); border-radius:24px;
  padding:5px 14px; font-weight:700; font-size:12px; cursor:pointer;
  box-shadow:0 3px 0 rgba(91,58,74,.8); transition:transform .06s, background .15s;
}
#gamanBtn:hover{background:#fff;}
#gamanBtn:active{transform:translateY(2px);}
#gamanBtn kbd{background:var(--plum); color:#fff; border-radius:5px; padding:0 5px; font-size:10px; margin-left:3px; font-family:var(--body);}

#banner{position:absolute; top:64px; left:50%; transform:translateX(-50%) scale(.4); opacity:0;
  padding:8px 22px; font-family:var(--disp); font-size:22px; white-space:nowrap; z-index:5;
  background:var(--sun); color:var(--ink); border:3px solid var(--line); border-radius:30px;
  box-shadow:0 4px 0 rgba(91,58,74,.8);}
#banner.show{animation:bannerIn .5s cubic-bezier(.2,1.6,.4,1) forwards;}
#banner.warn{background:var(--pink); color:#fff;}
#banner.bad{background:var(--coral); color:#fff;}
#banner.good{background:var(--teal); color:#fff;}
@keyframes bannerIn{0%{opacity:0; transform:translateX(-50%) scale(.4) rotate(-6deg);}55%{opacity:1; transform:translateX(-50%) scale(1.12) rotate(2deg);}100%{opacity:1; transform:translateX(-50%) scale(1) rotate(-1.5deg);}}

#hint{position:absolute; left:50%; bottom:18px; transform:translateX(-50%);
  background:rgba(58,36,64,.78); color:#ffe; padding:6px 14px; border-radius:20px; font-size:12px;
  font-weight:500; transition:opacity .6s; backdrop-filter:blur(2px); white-space:nowrap;}
#hint.hide{opacity:0;}

.overlay{position:absolute; inset:0; display:flex; pointer-events:auto; z-index:20;}
.overlay.hidden{display:none;}

#title{flex-direction:row; background:linear-gradient(100deg, rgba(36,20,46,.96) 0%, rgba(36,20,46,.85) 38%, rgba(36,20,46,.15) 70%, rgba(36,20,46,0) 100%);}
#titleArt{position:absolute; inset:0; background-size:cover; background-position:center; z-index:0; animation:slowzoom 18s ease-in-out infinite alternate;}
@keyframes slowzoom{from{transform:scale(1);}to{transform:scale(1.08);}}
#titleLeft{flex:0 0 50%; padding:5% 4% 5% 5%; display:flex; flex-direction:column; justify-content:center; gap:13px; position:relative; z-index:2; overflow-y:auto;}
.kicker{display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  background:var(--teal); color:#063; font-weight:700; font-size:13px; padding:5px 13px; border-radius:20px;
  border:2px solid #063; transform:rotate(-2deg);}
.kicker .dot{width:8px;height:8px;border-radius:50%;background:#063;animation:blink 1.4s infinite;}
@keyframes blink{50%{opacity:.2;}}
#title h1{font-family:var(--disp); font-size:clamp(38px,6vw,72px); line-height:.95; color:var(--sun);
  transform:rotate(-2.5deg);
  text-shadow:3px 3px 0 var(--coral2), 6px 6px 0 var(--line), 0 0 22px rgba(255,217,94,.35);}
#title h1 .sub{display:block; font-size:clamp(17px,2.4vw,28px); color:#fff; margin-top:6px;
  text-shadow:2px 2px 0 var(--line);}
#title p.desc{color:#f3e6ff; font-size:clamp(12.5px,1.45vw,15px); max-width:31em; line-height:1.55; font-weight:500;}
#title p.desc b{color:var(--sun);}
.bestline{color:#ffd95e; font-weight:700; font-size:15px;}
.btnrow{display:flex; gap:12px; flex-wrap:wrap; margin-top:4px;}
.btn{font-family:var(--disp); font-size:22px; padding:12px 30px; border-radius:30px; border:3px solid var(--line);
  cursor:pointer; box-shadow:0 6px 0 rgba(91,58,74,.85); transition:transform .08s, box-shadow .08s, filter .15s; color:#fff;}
.btn:hover{filter:brightness(1.07); transform:translateY(-1px); box-shadow:0 7px 0 rgba(91,58,74,.85);}
.btn:active{transform:translateY(4px); box-shadow:0 2px 0 rgba(91,58,74,.85);}
.btn.primary{background:linear-gradient(180deg,#ff8a75,var(--coral2));}
.btn.alt{background:var(--cream); color:var(--ink); font-size:17px; padding:11px 22px;}
.btn.teal{background:linear-gradient(180deg,#6fe0cd,var(--teal));}
.float-emoji{position:absolute; font-size:30px; opacity:.5; animation:rise linear infinite; z-index:1; pointer-events:none;}
@keyframes rise{0%{transform:translateY(40px) rotate(0); opacity:0;}15%{opacity:.55;}85%{opacity:.5;}100%{transform:translateY(-120vh) rotate(40deg); opacity:0;}}

#howtoOverlay{align-items:center; justify-content:center; background:rgba(18,24,18,.86); backdrop-filter:blur(4px); z-index:25;}
#howtoPanel{position:relative; width:min(800px,94%); max-height:92%; overflow-y:auto;
  background:linear-gradient(180deg,#33503c,#2b4433); border:6px solid #7a5230; border-radius:16px;
  padding:24px 28px 22px; box-shadow:0 24px 60px rgba(0,0,0,.55), inset 0 0 0 2px rgba(255,255,255,.07), inset 0 0 60px rgba(0,0,0,.25);
  color:#eef3e6; font-family:var(--body); animation:howIn .4s cubic-bezier(.2,1.4,.3,1);}
@keyframes howIn{from{opacity:0; transform:scale(.92) translateY(14px);}to{opacity:1; transform:none;}}
#howtoPanel h2{font-family:var(--disp); color:#fff; font-size:30px; margin-bottom:2px; text-shadow:2px 2px 0 rgba(0,0,0,.35); transform:rotate(-1deg);}
#howtoPanel .hsub{color:#cfe0c4; font-size:13px; margin-bottom:6px;}
#howClose{position:absolute; z-index:3; top:12px; right:12px; width:38px; height:38px; border-radius:50%;
  border:2px solid #eef3e6; background:rgba(255,255,255,.08); color:#eef3e6; font-size:18px; cursor:pointer; transition:background .15s, transform .15s;}
#howClose:hover{background:rgba(255,255,255,.22); transform:rotate(90deg);}
.howTop{display:flex; gap:16px; align-items:stretch; margin-top:8px;}
.howArt{flex:0 0 210px; border-radius:12px; overflow:hidden; border:4px solid #fff7e8; box-shadow:0 6px 16px rgba(0,0,0,.4); background:#fff;}
.howArt img{width:100%; height:100%; object-fit:cover; display:block;}
.timingDemo{flex:1; background:#fff7e8; color:var(--ink); border-radius:12px; padding:13px 15px; box-shadow:3px 4px 0 rgba(0,0,0,.3); transform:rotate(.5deg); display:flex; flex-direction:column; gap:9px;}
.timingDemo h3{font-family:var(--disp); font-size:16px; color:var(--coral2);}
.tdRow{display:flex; align-items:center; gap:10px;}
.tl{display:flex; flex-direction:column; gap:4px; background:#3a3f52; padding:6px 5px; border-radius:9px;}
.lamp{width:14px; height:14px; border-radius:50%; background:#4a4f62;}
.lamp.g{background:#7ac74f; box-shadow:0 0 9px #7ac74f; animation:lampPulse 1.1s infinite alternate;}
@keyframes lampPulse{to{box-shadow:0 0 16px #7ac74f;}}
.chanceDemo{flex:1; height:18px; background:#e3d6bf; border:2px solid var(--line); border-radius:9px; overflow:hidden; position:relative;}
.chanceFill{height:100%; background:linear-gradient(90deg,#7ac74f,#ffd95e 70%,#ff6b5e); border-radius:7px; animation:chanceDrain 2.6s linear infinite;}
@keyframes chanceDrain{0%{width:100%;}92%{width:6%;}100%{width:0%;}}
.cap{font-size:12px; font-weight:700; color:var(--ink2); line-height:1.4;}
.cap b{color:var(--coral2);}
.howGrid{display:grid; grid-template-columns:1fr 1fr; gap:13px; margin-top:14px;}
.howCard{background:#fff7e8; color:var(--ink); border-radius:11px; padding:13px 15px; box-shadow:3px 4px 0 rgba(0,0,0,.3);}
.howCard:nth-child(1){transform:rotate(-.7deg);}
.howCard:nth-child(2){transform:rotate(.6deg);}
.howCard:nth-child(3){transform:rotate(.5deg);}
.howCard:nth-child(4){transform:rotate(-.5deg);}
.howCard h3{font-family:var(--disp); font-size:15px; color:var(--coral2); margin-bottom:7px; display:flex; align-items:center; gap:6px;}
.howCard ul{margin-left:16px; font-size:12.5px; line-height:1.55;}
.howCard li{margin-bottom:3px;}
.howCard b{color:var(--coral2);}
.howCard .ok{color:#2a9c88;} .howCard .warn{color:#c22;}
.howStartRow{margin-top:16px; text-align:center;}

#over{flex-direction:row-reverse; background:linear-gradient(260deg, rgba(36,20,46,.97) 0%, rgba(36,20,46,.9) 40%, rgba(36,20,46,.2) 72%, rgba(36,20,46,0) 100%);}
#overArt{position:absolute; inset:0; background-size:cover; background-position:center; z-index:0; filter:saturate(1.05);}
#overLeft{flex:0 0 52%; padding:4% 5% 4% 4%; display:flex; flex-direction:column; justify-content:center; gap:12px; position:relative; z-index:2; overflow-y:auto;}
#over h2{font-family:var(--disp); font-size:clamp(34px,5vw,58px); color:var(--coral); line-height:1; transform:rotate(-2deg);
  text-shadow:3px 3px 0 #fff, 5px 5px 0 var(--line);}
#ovReason{font-weight:700; font-size:16px; color:#ffd95e; background:rgba(58,36,64,.6); padding:6px 12px; border-radius:10px; align-self:flex-start;}
#ovScore{font-family:var(--disp); font-size:clamp(40px,6vw,68px); color:var(--sun); line-height:1; text-shadow:2px 2px 0 var(--line);}
#ovScore small{font-size:14px; color:#f3e6ff; font-family:var(--body); display:block; font-weight:700;}
#newRec{display:none; background:var(--coral); color:#fff; font-family:var(--disp); font-size:18px; padding:3px 14px; border-radius:20px; border:2px solid #fff; align-self:flex-start; animation:pop .5s infinite alternate;}
.stats{display:grid; grid-template-columns:repeat(3,auto); gap:7px 14px; font-size:12.5px; color:#f3e6ff; justify-content:start;}
.stats div{background:rgba(255,255,255,.1); padding:5px 10px; border-radius:8px; border:1px solid rgba(255,255,255,.18);}
.stats b{font-family:var(--disp); font-size:18px; color:var(--sun); display:block;}
.stamp{position:absolute; top:14%; left:50%; transform:translate(-50%,-50%) rotate(-14deg) scale(3);
  font-family:var(--disp); font-size:clamp(48px,9vw,110px); color:#e23; opacity:0;
  border:7px double #e23; padding:6px 26px; border-radius:14px; background:rgba(255,247,232,.82);
  box-shadow:0 0 0 4px rgba(226,51,51,.25); z-index:30; pointer-events:none; letter-spacing:4px;}
.stamp.go{animation:stampIn .5s cubic-bezier(.2,1.4,.3,1) forwards;}
@keyframes stampIn{0%{opacity:0; transform:translate(-50%,-50%) rotate(-14deg) scale(3.4);}60%{opacity:1; transform:translate(-50%,-50%) rotate(-14deg) scale(.92);}100%{opacity:1; transform:translate(-50%,-50%) rotate(-14deg) scale(1);}}

#pause{align-items:center; justify-content:center; background:rgba(36,20,46,.78); backdrop-filter:blur(3px); flex-direction:column; gap:18px;}
#pause .pt{font-family:var(--disp); font-size:54px; color:var(--sun); text-shadow:3px 3px 0 var(--line);}
#pause .ps{color:#f3e6ff; font-size:14px;}

@media (max-aspect-ratio:1/1){
  #title,#over{flex-direction:column; background:linear-gradient(180deg, rgba(36,20,46,.1) 0%, rgba(36,20,46,.55) 38%, rgba(36,20,46,.97) 60%);}
  #titleLeft,#overLeft{flex:1; justify-content:flex-end; padding:5%;}
  .howTop{flex-direction:column;}
  .howArt{flex:0 0 auto; height:170px;}
  .howGrid{grid-template-columns:1fr;}
  #gasPanel{width:230px;}
  #missionBox{width:170px; top:70px;}
  #fartBtn{width:96px;height:96px;}
  #fartBtn .ft{font-size:20px;}
  #hint{font-size:10px; white-space:normal; text-align:center; max-width:60%;}
}

@media (max-aspect-ratio: 1/1) and (max-width: 700px){
  #orientationNotice{display:block;}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;}
  #titleArt{animation:none!important;}
  .float-emoji{display:none!important;}
}