:root{
  --ground:#F6BA3B; --ground-2:#EFA71F;
  --cab:#D93A2F; --cab-dark:#A5241B; --cab-light:#F0584C;
  --card:#FFFCF3; --cream:#FFF3D6;
  --ink:#1D1633; --ink-soft:#4A4260;
  --pink:#FF3D8C; --pink-dark:#CF1F6B;
  --navy:#1F2C7A; --navy-dark:#141C55;
  --bulb:#FFD98A; --bulb-on:#FFF7C2;
  --sky:#2FA8E6;
  --shadow: 0 18px 40px rgba(90,40,0,.25);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{color-scheme:light}
body{
  margin:0; min-height:100vh; background:var(--ground); color:var(--ink);
  font-family:'Nunito',system-ui,sans-serif; font-weight:600; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; user-select:none;
}
.rays{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none}
.app{position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:18px 22px 22px;
  display:flex; flex-direction:column; justify-content:center; gap:18px; min-height:100vh}

/* ---------- top bar ---------- */
.top{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap}
.brand h1{font-family:'Bungee',Impact,sans-serif; font-weight:400; font-size:clamp(26px,3.4vw,40px); margin:0; line-height:1;
  color:var(--cab); text-shadow:0 3px 0 var(--cab-dark), 0 6px 0 rgba(0,0,0,.12); letter-spacing:.5px}
.brand p{margin:4px 0 0; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); font-weight:800}
.levels{display:flex; gap:8px; flex-wrap:wrap}
.lvl{appearance:none; border:0; cursor:pointer; background:var(--navy); color:#fff; border-radius:16px; padding:8px 12px 8px 8px;
  display:flex; align-items:center; gap:9px; font-family:inherit; font-weight:800; box-shadow:0 4px 0 var(--navy-dark);
  transition:transform .12s, box-shadow .12s, background .2s}
.lvl:hover{transform:translateY(-2px); box-shadow:0 6px 0 var(--navy-dark)}
.lvl:active{transform:translateY(2px); box-shadow:0 2px 0 var(--navy-dark)}
.lvl .num{font-family:'Bungee',Impact,sans-serif; font-size:22px; line-height:1; background:rgba(255,255,255,.14); border-radius:10px; width:38px; height:38px; display:grid; place-items:center}
.lvl .txt{display:flex; flex-direction:column; align-items:flex-start; line-height:1.15}
.lvl .txt b{font-size:12px; letter-spacing:.1em; text-transform:uppercase; opacity:.8}
.lvl .txt span{font-size:13px; white-space:nowrap}
.lvl.on{background:var(--pink); box-shadow:0 4px 0 var(--pink-dark)}
.lvl.on:hover{box-shadow:0 6px 0 var(--pink-dark)}
.lvl:focus-visible, .btn:focus-visible, .chip:focus-visible, .icon:focus-visible{outline:3px solid #fff; outline-offset:2px}
.icon{appearance:none; border:0; cursor:pointer; background:rgba(29,22,51,.12); color:var(--ink); width:42px; height:42px; border-radius:12px; font-size:20px; display:grid; place-items:center}
.icon:hover{background:rgba(29,22,51,.2)}

/* ---------- machine ---------- */
.machine{display:flex; flex-direction:column; align-items:center; gap:22px; cursor:pointer}
.cabinet{position:relative; width:100%; max-width:1080px; background:linear-gradient(180deg,var(--cab-light),var(--cab) 30%,var(--cab-dark));
  border-radius:34px; padding:34px 34px 26px; box-shadow:var(--shadow), inset 0 2px 0 rgba(255,255,255,.35), inset 0 -6px 0 rgba(0,0,0,.25)}
.cabinet.jolt{animation:jolt .28s cubic-bezier(.3,1.6,.5,1)}
@keyframes jolt{30%{transform:translateY(5px) scale(.995)} 100%{transform:none}}
.bulb{position:absolute; width:13px; height:13px; border-radius:50%; background:radial-gradient(circle at 40% 35%, #fff 0 20%, var(--bulb) 60%, #C88A2A);
  box-shadow:0 0 6px rgba(255,220,120,.35)}
.bulb::after{content:''; position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 40% 35%, #fff 0 30%, var(--bulb-on) 60%, #E9B84A);
  box-shadow:0 0 12px 3px rgba(255,235,150,.9); opacity:0; transition:opacity .15s; will-change:opacity}
.bulb.lit::after{opacity:1}
.spinning .bulb::after{animation:chase .5s steps(1) infinite; animation-delay:calc(var(--i) * -.0625s)}
@keyframes chase{0%,25%{opacity:1} 26%,100%{opacity:0}}
.window{position:relative; background:var(--card); border-radius:20px; aspect-ratio:560/218; overflow:hidden;
  box-shadow:inset 0 0 0 5px #F7E1B5, inset 0 10px 30px rgba(120,60,0,.15), 0 4px 0 rgba(0,0,0,.25)}
.stage, .stage svg{position:absolute; inset:0; width:100%; height:100%}
.stage svg{display:block; color:var(--ink)}
.stage .beat{fill:rgba(29,22,51,.045); transition:fill .12s}
.stage .beat.on{fill:rgba(255,61,140,.16)}
.stage .snd{transition:fill .08s; transform-box:fill-box; transform-origin:center 80%}
.stage .snd.on{fill:var(--pink); color:var(--pink); animation:pop .22s cubic-bezier(.2,1.5,.5,1)}
@keyframes pop{40%{transform:scale(1.13)} 100%{transform:none}}
.stage .names{opacity:0; transition:opacity .35s}
.stage.names-on .names{opacity:1}
.stage .names text{font-family:'Nunito',system-ui,sans-serif; font-weight:900; font-size:21px; fill:var(--ink-soft)}
.stage .counts{opacity:0; transition:opacity .35s}
.stage.names-on .counts{opacity:1}
.cnt{font-family:'Nunito',system-ui,sans-serif; font-weight:900; font-size:22px; fill:var(--navy); transition:font-size .08s}
.cnt.mute{opacity:.32}
.stage .cnt.on{fill:var(--pink); opacity:1; font-size:28px}
.stage.no-ball #ball, .stage.no-ball #ballShadow{display:none}
.reels{position:absolute; inset:0; display:grid; grid-template-columns:repeat(4,1fr); pointer-events:none}
.reels:empty{display:none}
.reel{position:relative; overflow:hidden; background:var(--card)}
.reel + .reel{border-left:2px dashed rgba(29,22,51,.12)}
.reel.done{visibility:hidden}
.strip{position:absolute; left:0; top:0; width:100%; will-change:transform}
.item{height:var(--ih,200px)}
.item svg{display:block; width:100%; height:100%; color:var(--ink)}
.countin{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none}
.countin span{font-family:'Bungee',Impact,sans-serif; font-size:clamp(70px,14vw,150px); color:var(--pink);
  text-shadow:0 5px 0 var(--pink-dark), 0 10px 24px rgba(0,0,0,.2); animation:countpop .5s cubic-bezier(.2,1.6,.4,1) both}
@keyframes countpop{0%{transform:scale(.3); opacity:0} 60%{opacity:1} 100%{transform:scale(1); opacity:1}}
.stamp{position:absolute; left:50%; top:-16px; transform:translateX(-50%) rotate(-5deg) scale(0); z-index:3;
  font-family:'Bungee',Impact,sans-serif; font-size:clamp(22px,3vw,34px); color:#fff; background:var(--pink); padding:6px 18px; border-radius:14px;
  box-shadow:0 5px 0 var(--pink-dark), 0 12px 24px rgba(0,0,0,.25); pointer-events:none; opacity:0; white-space:nowrap}
.stamp.bad{background:var(--cab); box-shadow:0 5px 0 var(--cab-dark), 0 12px 24px rgba(0,0,0,.25)}
.stamp.show{animation:stamp 2.2s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes stamp{0%{transform:translateX(-50%) rotate(-5deg) scale(0); opacity:0} 15%{transform:translateX(-50%) rotate(-5deg) scale(1.15); opacity:1} 25%{transform:translateX(-50%) rotate(-5deg) scale(1)} 80%{opacity:1; transform:translateX(-50%) rotate(-5deg) scale(1)} 100%{opacity:0; transform:translateX(-50%) rotate(-5deg) scale(.6)}}
.pulse{display:flex; justify-content:center; gap:18px; margin-top:18px}
.pulse i{width:18px; height:18px; border-radius:50%; background:rgba(0,0,0,.28); box-shadow:inset 0 2px 3px rgba(0,0,0,.4); transition:transform .1s, background .1s}
.pulse i.on{background:var(--bulb-on); box-shadow:0 0 14px 4px rgba(255,240,170,.9); transform:scale(1.35)}

/* ---------- action buttons ---------- */
.actions{display:flex; gap:18px; flex-wrap:wrap; justify-content:center}
.btn{appearance:none; border:0; cursor:pointer; font-family:'Bungee',Impact,sans-serif; font-size:clamp(22px,2.6vw,30px); color:#fff;
  padding:16px 30px 14px; border-radius:22px; display:flex; align-items:center; gap:14px; letter-spacing:.5px;
  transition:transform .08s, filter .2s}
.btn[disabled]{opacity:.45; pointer-events:none}
.btn.small{font-size:16px; padding:10px 16px 8px; border-radius:14px}
.btn kbd{font-family:'Nunito',system-ui,sans-serif; font-weight:900; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  background:rgba(0,0,0,.22); padding:4px 8px; border-radius:8px}
.btn.spin{background:linear-gradient(180deg,#FF6AA6,var(--pink)); box-shadow:0 7px 0 var(--pink-dark), 0 14px 24px rgba(207,31,107,.35)}
.btn.play{background:linear-gradient(180deg,#3A4BB0,var(--navy)); box-shadow:0 7px 0 var(--navy-dark), 0 14px 24px rgba(31,44,122,.35)}
.btn:hover{transform:translateY(-2px)}
.btn:active, .btn.pressed{transform:translateY(5px)}
.btn.spin:active, .btn.spin.pressed{box-shadow:0 2px 0 var(--pink-dark)}
.btn.play:active, .btn.play.pressed{box-shadow:0 2px 0 var(--navy-dark)}
.btn.spin.busy{filter:saturate(.6) brightness(.9); pointer-events:none}
.btn.play.stop{background:linear-gradient(180deg,#F0584C,var(--cab)); box-shadow:0 7px 0 var(--cab-dark), 0 14px 24px rgba(165,36,27,.35)}

/* ---------- settings strip ---------- */
.controls{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 14px;
  background:rgba(255,252,243,.75); border-radius:20px; padding:12px 16px; max-width:1080px; margin:0 auto; width:100%;
  box-shadow:0 6px 18px rgba(90,40,0,.12)}
.tempo{display:flex; align-items:center; gap:10px; font-weight:900; font-size:14px}
.tempo input{width:150px; accent-color:var(--pink)}
.tempo output{font-variant-numeric:tabular-nums; min-width:76px; text-align:left}
.tempo output b{font-size:18px}
.chip{appearance:none; cursor:pointer; border:2px solid rgba(29,22,51,.18); background:transparent; color:var(--ink); font:inherit; font-weight:900; font-size:13px;
  border-radius:999px; padding:6px 12px; display:flex; align-items:center; gap:7px; transition:background .15s, border-color .15s}
.chip::before{content:''; width:10px; height:10px; border-radius:50%; background:rgba(29,22,51,.18); transition:background .15s}
.chip[aria-pressed="true"]{background:var(--navy); color:#fff; border-color:var(--navy)}
.chip[aria-pressed="true"]::before{background:var(--bulb-on); box-shadow:0 0 6px var(--bulb-on)}
.sep{width:2px; height:26px; background:rgba(29,22,51,.12); border-radius:2px}
.hint{text-align:center; font-size:13px; color:var(--ink-soft); font-weight:800; letter-spacing:.02em}
.hint kbd{background:rgba(29,22,51,.1); padding:2px 7px; border-radius:6px; font-family:inherit; font-size:12px}

footer{margin-top:6px; text-align:center; font-size:12px; color:var(--ink-soft); line-height:1.6; max-width:70ch; margin-left:auto; margin-right:auto}
footer a{color:var(--navy); font-weight:900}
canvas#confetti{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:50; display:none}

/* ---------- mode switch ---------- */
.modes{display:flex; background:rgba(29,22,51,.12); border-radius:14px; padding:4px; gap:4px}
.mode{appearance:none; border:0; cursor:pointer; background:transparent; color:var(--ink); font:inherit; font-weight:900; font-size:13px; letter-spacing:.06em; text-transform:uppercase; padding:8px 14px; border-radius:10px; transition:background .15s; text-decoration:none; display:inline-block}
.mode.on{background:var(--cab); color:#fff; box-shadow:0 3px 0 var(--cab-dark)}
.mode:focus-visible{outline:3px solid #fff; outline-offset:2px}

/* ---------- Rhythm Jump ---------- */
.jump{display:grid; grid-template-columns:160px minmax(0,600px) 180px; gap:22px; justify-content:center; align-items:start}
.jump[hidden]{display:none}
.jhud{display:flex; flex-direction:column; gap:12px; align-items:stretch; text-align:center}
.stat{background:rgba(255,252,243,.78); border-radius:16px; padding:10px 12px; box-shadow:0 6px 18px rgba(90,40,0,.12)}
.stat b{display:block; font-family:'Bungee',Impact,sans-serif; font-weight:400; font-size:28px; color:var(--navy); line-height:1; font-variant-numeric:tabular-nums}
.stat span{display:block; margin-top:4px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); font-weight:800}
.metro{background:rgba(255,252,243,.78); border-radius:18px; padding:10px 8px 6px; box-shadow:0 6px 18px rgba(90,40,0,.12)}
.metro svg{width:100%; display:block}
.beatnum{font-family:'Bungee',Impact,sans-serif; font-size:46px; color:var(--pink); text-shadow:0 3px 0 var(--pink-dark); line-height:1; margin-top:-4px}
.beatnum.pop{animation:countpop .28s cubic-bezier(.2,1.6,.4,1)}
.hearts{font-size:26px; letter-spacing:3px; color:var(--cab); line-height:1}
.hearts .off{opacity:.18}
.meter{width:100%; height:10px; background:rgba(29,22,51,.12); border-radius:5px; overflow:hidden; margin-top:8px}
.meter i{display:block; height:100%; width:100%; background:linear-gradient(90deg,#3FB86E,#F6BA3B 60%,#E63B2E); transform-origin:left; transform:scaleX(0)}
.micstate{font-size:12px; font-weight:800; color:var(--ink-soft); margin-top:6px; transition:color .1s}
.micstate.hit{color:var(--pink); transform:scale(1.05)}
.sens{display:flex; flex-direction:column; gap:4px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:800; color:var(--ink-soft)}
.sens input{width:100%; accent-color:var(--pink)}
.jhud .chip{justify-content:center}
.tower-wrap{display:flex; flex-direction:column; align-items:center; gap:14px; cursor:pointer}
.seg{display:flex; background:rgba(29,22,51,.12); border-radius:12px; padding:3px; gap:3px}
.seg button{flex:1; appearance:none; border:0; cursor:pointer; background:transparent; color:var(--ink); font:inherit; font-weight:900; font-size:12px; letter-spacing:.06em; text-transform:uppercase; padding:7px 6px; border-radius:9px}
.seg button.on{background:var(--navy); color:#fff}
.chip[disabled]{opacity:.4; cursor:not-allowed}
.jfx{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:3}
.jflash{position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:4}
.jflash.go{animation:jflash .5s ease-out}
@keyframes jflash{0%{opacity:.85} 100%{opacity:0}}
.jfloat{position:absolute; transform:translate(-50%,-50%); z-index:4; font-family:'Bungee',Impact,sans-serif; font-size:22px; color:var(--pink); text-shadow:0 2px 0 var(--pink-dark), 0 4px 10px rgba(0,0,0,.2); pointer-events:none; z-index:4; animation:jfloat .75s ease-out forwards; white-space:nowrap}
.jfloat.good{color:#3FB86E; text-shadow:0 2px 0 #1F8A49, 0 4px 10px rgba(0,0,0,.2)}
.jfloat.bad{color:var(--cab); text-shadow:0 2px 0 var(--cab-dark), 0 4px 10px rgba(0,0,0,.2)}
.jfloat.pts{font-size:16px; color:var(--navy); text-shadow:0 2px 0 var(--navy-dark)}
@keyframes jfloat{0%{opacity:0; transform:translate(-50%,-30%) scale(.6)} 20%{opacity:1; transform:translate(-50%,-60%) scale(1.15)} 100%{opacity:0; transform:translate(-50%,-160%) scale(1)}}
.jcombo{position:absolute; left:16px; top:14px; z-index:4; font-family:'Bungee',Impact,sans-serif; color:#fff; background:var(--navy); padding:6px 12px; border-radius:12px; box-shadow:0 4px 0 var(--navy-dark); pointer-events:none; opacity:0; transition:opacity .2s; line-height:1}
.jcombo b{font-size:26px; display:block}
.jcombo span{font-size:11px; letter-spacing:.14em}
.jcombo.show{opacity:1}
.jcombo.pop{animation:pop .25s cubic-bezier(.2,1.6,.4,1)}
.jcombo.hot{background:var(--pink); box-shadow:0 4px 0 var(--pink-dark)}
.jbanner{position:absolute; left:50%; top:42%; transform:translate(-50%,-50%) scale(0); z-index:4; pointer-events:none; text-align:center; opacity:0}
.jbanner.go{animation:jbanner 1.6s cubic-bezier(.2,1.5,.4,1) forwards}
.jbanner h3{margin:0; font-family:'Bungee',Impact,sans-serif; font-weight:400; font-size:clamp(34px,6vw,60px); color:#fff; -webkit-text-stroke:2px var(--navy); text-shadow:0 5px 0 var(--navy), 0 12px 30px rgba(0,0,0,.3); line-height:1}
.jbanner p{margin:4px 0 0; font-family:'Bungee',Impact,sans-serif; color:var(--pink); text-shadow:0 3px 0 var(--pink-dark); font-size:clamp(16px,2.6vw,24px)}
@keyframes jbanner{0%{opacity:0; transform:translate(-50%,-50%) scale(0) rotate(-8deg)} 15%{opacity:1; transform:translate(-50%,-50%) scale(1.1) rotate(2deg)} 25%{transform:translate(-50%,-50%) scale(1) rotate(0)} 80%{opacity:1; transform:translate(-50%,-50%) scale(1)} 100%{opacity:0; transform:translate(-50%,-80%) scale(1.3)}}
.tower{transition:border-color .15s, transform .25s cubic-bezier(.2,1.5,.4,1)}
.tower.zoom{transform:scale(1.025)}
.stat b.pop{animation:countpop .35s cubic-bezier(.2,1.6,.4,1)}
.tower.good{border-color:#3FB86E}
.tower.bad{border-color:#8E1A12}
.jverdict{position:absolute; left:50%; top:46%; transform:translate(-50%,-50%) scale(0); z-index:4; pointer-events:none; opacity:0; white-space:nowrap;
  font-family:'Bungee',Impact,sans-serif; font-size:clamp(40px,8vw,84px); color:#3FB86E; -webkit-text-stroke:2px #fff; text-shadow:0 6px 0 #1F8A49, 0 14px 30px rgba(0,0,0,.3)}
.jverdict.bad{color:var(--cab); text-shadow:0 6px 0 var(--cab-dark), 0 14px 30px rgba(0,0,0,.3)}
.jverdict.go{animation:jverdict .9s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes jverdict{0%{opacity:0; transform:translate(-50%,-50%) scale(0)} 18%{opacity:1; transform:translate(-50%,-50%) scale(1.25)} 30%{transform:translate(-50%,-50%) scale(1)} 75%{opacity:1; transform:translate(-50%,-50%) scale(1)} 100%{opacity:0; transform:translate(-50%,-70%) scale(1.1)}}
.jcard .ext.on, .stage .ext.on{fill:var(--pink); color:var(--pink)}
.lbtitle{margin:14px 0 4px!important; font-size:11px!important; letter-spacing:.14em; text-transform:uppercase}
.lb{list-style:none; margin:4px auto 0; padding:0; max-width:380px; text-align:left}
.lb li{display:grid; grid-template-columns:26px 1fr auto auto; gap:10px; align-items:center; padding:5px 10px; border-radius:10px; font-weight:800; font-size:14px}
.lb li:nth-child(odd){background:rgba(29,22,51,.05)}
.lb li.me{background:var(--pink); color:#fff}
.lb .rank{font-family:'Bungee',Impact,sans-serif; color:var(--navy)}
.lb li.me .rank{color:#fff}
.lb .name{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.lb .pts{font-family:'Bungee',Impact,sans-serif; font-variant-numeric:tabular-nums}
.lb .cl{font-size:11px; opacity:.7}
.lbempty{font-size:13px!important}
.lbform{display:flex; gap:8px; justify-content:center; margin:10px 0 4px; flex-wrap:wrap}
.lbform input{font:inherit; font-weight:800; padding:10px 14px; border-radius:12px; border:2px solid rgba(29,22,51,.2); width:190px; background:#fff; color:var(--ink)}
.lbform input:focus{outline:3px solid var(--pink); outline-offset:1px}
.lvl.all .num{font-size:18px}
.tower.beatpulse{box-shadow:var(--shadow), 0 0 0 5px rgba(255,61,140,.45), inset 0 0 0 5px #F7E1B5, inset 0 10px 30px rgba(120,60,0,.15)}
.tower.shakex{animation:shake .4s}
.metro.beat circle:last-child{fill:var(--pink)}
.jlevelup .jcard{filter:none}
.tower{position:relative; width:100%; height:min(70vh,640px); background:var(--card); border-radius:26px; overflow:hidden;
  border:12px solid var(--cab); box-shadow:var(--shadow), inset 0 0 0 5px #F7E1B5, inset 0 10px 30px rgba(120,60,0,.15)}
.climb{position:absolute; left:0; top:0; width:100%; will-change:transform}
.jcard{position:absolute; left:20px; width:calc(100% - 40px); background:rgba(255,255,255,.45); border-radius:18px; opacity:.72; transition:opacity .4s, box-shadow .3s, background .3s}
.jcard.cur{opacity:1; background:#fff; box-shadow:0 0 0 3px var(--pink), 0 10px 34px rgba(255,61,140,.35)}
.jcard.enter{animation:jenter .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes jenter{0%{opacity:0; transform:translateY(-30px) scale(.9)} 100%{transform:none}}
.jcard svg{display:block; width:100%; height:auto; color:var(--ink)}
.jcard .beat{fill:rgba(29,22,51,.05); transition:fill .12s}
.jcard .beat.on{fill:rgba(255,61,140,.16)}
.jcard .snd.on{fill:var(--pink); color:var(--pink)}
.jcard.pass .beat{fill:rgba(60,180,110,.2)}
.jcard.pass{opacity:.35; transform:scale(.94) translateY(14px); transition:transform .5s cubic-bezier(.2,1.4,.4,1), opacity .5s, box-shadow .3s}
.jcard.fail{animation:shake .45s}
.jcard.fail .beat{fill:rgba(230,59,46,.16)}
.xmark{position:absolute; top:4px; transform:translateX(-50%); color:var(--cab); font-weight:900; font-size:20px; line-height:1; pointer-events:none}
@keyframes shake{20%{transform:translateX(-7px)} 40%{transform:translateX(7px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)}}
.jball{position:absolute; left:0; top:0; width:32px; height:32px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #FF8FBF, #FF3D8C 55%, #B8145A);
  box-shadow:0 6px 10px rgba(0,0,0,.22); will-change:transform; pointer-events:none; z-index:2}
.jball::after{content:''; position:absolute; left:8px; top:6px; width:8px; height:8px; border-radius:50%; background:#fff; opacity:.85}
.jstamp{position:absolute; left:50%; top:18px; transform:translateX(-50%) rotate(-5deg) scale(0); z-index:3; opacity:0; white-space:nowrap;
  font-family:'Bungee',Impact,sans-serif; font-size:clamp(22px,3vw,34px); color:#fff; background:var(--pink); padding:6px 18px; border-radius:14px;
  box-shadow:0 5px 0 var(--pink-dark), 0 12px 24px rgba(0,0,0,.25); pointer-events:none}
.jstamp.bad{background:var(--cab); box-shadow:0 5px 0 var(--cab-dark), 0 12px 24px rgba(0,0,0,.25)}
.jstamp.show{animation:stamp 1.4s cubic-bezier(.2,1.6,.4,1) forwards}
.jover{position:absolute; inset:0; display:grid; place-items:safe center; overflow-y:auto; background:rgba(255,252,243,.94); text-align:center; padding:24px; z-index:5}
.jover[hidden]{display:none}
.jover h2{font-family:'Bungee',Impact,sans-serif; font-weight:400; font-size:clamp(28px,4vw,46px); color:var(--cab); text-shadow:0 3px 0 var(--cab-dark); margin:0 0 12px; line-height:1.05}
.jover p{margin:6px auto; font-weight:800; color:var(--ink-soft); max-width:38ch; line-height:1.4}
.jover .big{font-family:'Bungee',Impact,sans-serif; font-size:clamp(40px,7vw,80px); color:var(--navy); margin:4px 0}
.jover kbd{background:rgba(29,22,51,.1); padding:2px 8px; border-radius:6px; font-family:inherit}
.jover .btn{margin:16px auto 0}
@media (max-width:900px){
  .jump{grid-template-columns:1fr}
  .jhud{flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:flex-start}
  .jhud > *{flex:1 1 130px}
  .metro{max-width:180px}
  .tower{height:min(60vh,560px)}
}
@media (max-width:720px){
  .app{padding:12px 12px 20px; gap:14px}
  .cabinet{padding:22px 18px 16px; border-radius:24px}
  .lvl .txt span{display:none}
  .btn{padding:12px 20px 10px}
  .btn kbd{display:none}
  .hint{display:none}
}
@media (prefers-reduced-motion:reduce){
  .spinning .bulb{animation:none}
}
/* ---------- Rhythm Jump game-over stack ---------- */
.jover .over{width:min(420px,100%); display:flex; flex-direction:column; align-items:stretch; gap:14px; text-align:center}
.jover .over h2{margin:0}
.jover .over .big{margin:0; line-height:1}
.jover .over .sum{margin:0; display:flex; justify-content:center; gap:14px; flex-wrap:wrap; font-size:14px}
.jover .over .sum span + span::before{content:'·'; margin-right:14px; opacity:.5}
.jover .over .lbform{display:grid; grid-template-columns:1fr auto; gap:10px; margin:0}
.jover .over .lbform input{width:100%; height:48px; padding:0 14px; margin:0}
.jover .over .lbform .btn{height:48px; padding:0 18px; font-size:15px; border-radius:12px; box-shadow:0 4px 0 var(--pink-dark); margin:0}
.jover .over .lb{margin:0; max-width:none}
.jover .over .lb li{grid-template-columns:28px 1fr 72px 86px; height:38px; padding:0 12px; text-align:left}
.jover .over .lb .pts{text-align:right}
.jover .over .lb .cl{text-align:right}
.jover .over .lbempty{margin:0; padding:10px; background:rgba(29,22,51,.05); border-radius:10px}
.jover .over .btnrow{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:4px}
.jover .over .btn{justify-content:center; height:58px; padding:0 14px; font-size:22px; margin:0; border-radius:16px}
.jover .over .btn.play{box-shadow:0 5px 0 var(--navy-dark)}
.jover .over .btn.spin{box-shadow:0 5px 0 var(--pink-dark)}

.jfloat.mult{font-size:30px; color:#fff; -webkit-text-stroke:1.5px var(--navy); text-shadow:0 4px 0 var(--navy), 0 10px 24px rgba(0,0,0,.3); animation-duration:1.1s}

/* ---------- Rhythm Jump start screen ---------- */
.jstart{max-width:760px; margin:0 auto; width:100%; background:rgba(255,252,243,.9); border-radius:26px; padding:26px 28px 28px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:18px}
.jstart h2{font-family:'Bungee',Impact,sans-serif; font-weight:400; font-size:clamp(30px,4.5vw,50px); color:var(--cab); text-shadow:0 3px 0 var(--cab-dark); margin:0; line-height:1.05; text-align:center}
.jstart .lead{margin:0 auto; text-align:center; color:var(--ink-soft); font-weight:800; max-width:52ch; line-height:1.45}
.opt{display:flex; flex-direction:column; gap:8px}
.opt > b{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); font-weight:900}
.opt .row{display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.opt .seg{max-width:320px; width:100%}
.opt .sens{flex-direction:row; align-items:center; gap:10px; text-transform:none; letter-spacing:0; font-size:13px}
.opt .sens input{width:180px}
.opt .note{font-size:12px; color:var(--ink-soft); font-weight:700}
.jstart .lb{max-width:100%}
.jstart .startrow{display:flex; justify-content:center; padding-top:4px}
.jgame[hidden]{display:none}
@media (max-width:720px){ .jstart{padding:18px 16px 20px} }

/* ---------- Spin test mode ---------- */
.tstatus{position:absolute; left:50%; bottom:10px; transform:translateX(-50%); z-index:3; pointer-events:none; white-space:nowrap; max-width:calc(100% - 40px); overflow:hidden; text-overflow:ellipsis;
  font-weight:900; font-size:clamp(12px,1.6vw,16px); color:#fff; background:var(--navy); padding:6px 14px; border-radius:999px; box-shadow:0 3px 0 var(--navy-dark)}
.tstatus.good{background:#3FB86E; box-shadow:0 3px 0 #1F8A49}
.tstatus.bad{background:var(--cab); box-shadow:0 3px 0 var(--cab-dark)}
.testsens input{width:110px}