:root{color-scheme:dark;--pink:#ff45b5;--aqua:#44e8ff;--purple:#6c23ca;--navy:#0c1358;--yellow:#fff365;font-family:'Arial Rounded MT Bold','Hiragino Kaku Gothic ProN','Yu Gothic',system-ui,sans-serif;font-weight:800}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#090d3d;color:#fff}body{background:radial-gradient(circle at 50% 8%,#5225a9 0,#11145c 35%,#080b32 92%) fixed;font-size:15px}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #fff35b;outline-offset:3px}.app{width:min(100%,680px);min-height:100dvh;margin:0 auto;background:linear-gradient(150deg,#12187899,#5b1db35e 55%,#151354);box-shadow:0 0 80px #070929}.screen{display:none;padding:0 0 max(20px,env(safe-area-inset-bottom));min-height:100dvh}.screen.on{display:block}.art{position:relative;width:100%;overflow:hidden;background:#180c69;line-height:0}.art>img{display:block;width:100%;height:auto;pointer-events:none;user-select:none}.hit{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);border:0;background:transparent;color:transparent;padding:0;z-index:2;line-height:1;opacity:1}.hit:active{background:#ffffff24;border-radius:14px;box-shadow:0 0 18px #fff6b0}.home-stats,.aux,.control-under{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;padding:12px}.home-stats span{border:2px solid #4be5ff;border-radius:18px;background:linear-gradient(#164599,#251268);padding:8px 12px;font-weight:900;white-space:nowrap;box-shadow:0 0 10px #48ddff88}.home-stats .version{font-size:11px;border-color:#ecc45c;color:#fff9a0}.aux{gap:9px}.aux button,.small-cta{background:linear-gradient(#23bcfa,#1265be 58%,#15328d);border:2px solid #c6f8ff;border-radius:17px;padding:11px 13px;color:white;box-shadow:0 4px 0 #150943,0 0 9px #00ccff77;font-weight:900}.primary{color:#fff;border:4px solid #ffffc8;border-radius:22px;background:linear-gradient(180deg,#ffe77d,#ff5fa8 52%,#be19b0);text-shadow:0 2px 2px #66197d;box-shadow:0 5px 0 #592078,0 0 12px #ff58c9;font-weight:1000;padding:11px 20px;font-size:19px}.secondary{background:linear-gradient(90deg,#fa378f,#903bda);display:block;margin:12px auto;width:calc(100% - 30px)}[hidden]{display:none!important}.mode-level{position:absolute;top:24.8%;left:31%;width:38%;height:6.5%;z-index:1;border-radius:25px;background:linear-gradient(100deg,#092472,#370e85,#082473);border:2px solid #f856e7;box-shadow:0 0 12px #df19eaaa;display:grid;place-items:center;line-height:1;color:#ffeb4c;text-shadow:2px 2px #e12faf;font-size:clamp(22px,6vw,40px)}.mode-facts{position:absolute;top:37%;left:10%;width:80%;height:3.6%;z-index:1;line-height:1.1;font-size:clamp(11px,2.9vw,19px);color:white;background:#062a84e8;border-radius:8px;text-align:center;display:grid;place-items:center;white-space:nowrap;border:1px solid #0feeff}.feel-hit.chosen{outline:3px solid #fff04e;outline-offset:-6px;border-radius:22px;box-shadow:inset 0 0 14px #ffed4b55}.control-under{background:#11155e;padding:10px 8px}.control-under span{border:1px solid #68dffc;border-radius:17px;padding:7px 10px;background:#20267c}.control-under .small-cta{padding:7px 14px}.manual-box{margin:10px;border:3px solid var(--aqua);border-radius:17px;background:linear-gradient(#10266e,#1e1160);padding:12px;box-shadow:0 0 16px #13c9ff6c}.manual-title{font-size:23px;color:#fff46e;text-align:center}.manual-bpm{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;padding:10px 0}.manual-bpm button{border:1px solid #8eeaff;background:#193a8b;color:white;border-radius:9px;padding:7px}.manual-bpm input{width:75px;font-size:20px;border:2px solid #88efff;background:#fff;color:#152269;border-radius:8px;padding:5px}.manual-box p{text-align:center;font-size:12px;margin:5px 0}#manual-grid{display:grid;gap:11px;margin:10px 0}.manual-bar{background:#f0faff;border-radius:11px;padding:5px;color:#122e78}.manual-label{font-size:12px;padding-bottom:3px}.manual-cells{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:2px}.manual-cell{background:#e2e6f2;border:1px solid #a4c6df;color:#36517d;border-radius:3px;padding:0;min-height:31px;font-size:12px;line-height:1}.manual-cell.on{background:#fd4ab3;color:white}.manual-cell.beat{border-left:2px solid #134899}.manual-box .primary{width:100%}.play-art .live-level,.play-art .live-bpm,.play-art .live-combo{position:absolute;display:grid;place-items:center;z-index:1;font-weight:1000}.live-level{left:31%;top:1.2%;width:41%;height:10.2%;background:linear-gradient(#022b76,#201271);border-radius:23px;border:2px solid #00e9ff;color:#ffdd5b;font-size:clamp(18px,5.8vw,34px);text-shadow:2px 2px #e521a8}.live-bpm{left:39%;top:15.5%;width:21%;height:8%;border-radius:8px;background:#9f0a9d;color:white;font-size:clamp(16px,4.4vw,26px)}.live-combo{left:81%;top:57%;width:15%;height:7%;background:#301074;box-shadow:0 0 6px #fe6dff;color:#fff;font-size:clamp(17px,5vw,28px)}.live-chart{position:absolute;left:12.7%;top:25.8%;width:84%;height:23%;border-radius:4px;background:#f9ffff;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:3px 2px;color:#10275e;z-index:1;line-height:1}.score-bar{border-right:2px solid #598acb;position:relative;min-width:0;text-align:center;padding:2px 1px}.score-bar:last-child{border-right:0}.bar-label{font-size:clamp(8px,1.8vw,13px);font-weight:900;white-space:nowrap}.score-marks{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));align-items:end;height:60%;margin-top:5px;position:relative;border-bottom:1px solid #91b3d1}.score-cell{min-width:0;height:100%;display:flex;align-items:end;justify-content:center;font-size:clamp(7px,1.8vw,13px);color:transparent;font-weight:1000;border-left:1px dotted #d3e1ed;line-height:1}.score-cell.beat{border-left:1px dashed #96bed5}.score-cell.note{color:#f42ca4}.score-cell.current{background:#fff2a9}.score-cell.hit{color:#0cb9a3}.score-cell.miss{background:#ffd6e0}.status-panel{margin:0 10px 16px;background:linear-gradient(165deg,#111e79,#260b70);border:3px solid #21dbff;border-radius:0 0 22px 22px;padding:9px 10px 17px;box-shadow:0 0 13px #3cd7ff88}.status-main{text-align:center;color:#fffa70;font-size:clamp(23px,7vw,39px);font-weight:1000;min-height:40px;text-shadow:2px 3px #e31fa6,0 0 12px #f82cc1}.progress-line{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;text-align:center;margin:6px 0 10px}.progress-line span{padding:7px 2px;font-size:12px;background:#091b5c;border:1px solid #5beeff;border-radius:10px;color:#e5faff}.count-lamps{background:#351197;border:1px solid #ffef66;border-radius:11px;padding:8px 4px;text-align:center;margin-bottom:6px}.count-lamps span{display:inline-block;font-size:17px;opacity:.35;margin:0 2px;color:#ffd940}.count-lamps span.lit{opacity:1;text-shadow:0 0 14px #ffff5c}.count-lamps small{display:block;font-size:11px}.play-acts{display:flex;gap:7px;justify-content:center;align-items:center;margin:7px 0}.play-acts .primary{flex:1;min-width:0;font-size:17px;padding:8px 3px}.play-acts .small-cta{font-size:12px;padding:11px 7px}.tap-instruction{text-align:center;color:#fff1a4;font-size:12px;margin:8px 0}.pads{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.pad{width:100%;aspect-ratio:1/1;border-radius:50%;border:4px solid #fff;color:#fff;font-size:32px;box-shadow:0 5px #151c7c,0 0 18px #52ddffb3;touch-action:manipulation}.pad.pink{background:radial-gradient(circle at 30% 20%,#ffadf4,#fa0e96)}.pad.blue{background:radial-gradient(circle at 30% 20%,#8ef9ff,#00a5e7)}.pad.green{background:radial-gradient(circle at 30% 20%,#9affdb,#00c8a2)}.pad.orange{background:radial-gradient(circle at 30% 20%,#ffe7ae,#fba31e)}.pad:active,.pad.pressed{filter:brightness(1.3);transform:scale(.93)}.results{padding:13px;text-align:center;background:#15145e}.result-words{margin:0 0 12px;border-radius:16px;padding:14px 7px;border:2px solid #65efff;background:linear-gradient(110deg,#27187e,#7923a7);font-size:18px}.result-art .hit:active{border-radius:12px}.modal{position:fixed;inset:0;background:#000b;z-index:20;display:flex;align-items:center;justify-content:center;padding:15px}.modal-box{background:linear-gradient(#2734a0,#180c67);border:3px solid #7befff;border-radius:22px;width:min(100%,430px);padding:18px;max-height:88dvh;overflow:auto;box-shadow:0 0 27px #07dbfdaa}.modal-box h2{margin:0 0 12px;text-align:center;font-size:21px;color:#ffeb72}.modal-box p{font-size:14px;line-height:1.6}.modal-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.modal-buttons button{background:linear-gradient(#f6df5a,#ed2ea4);border:2px solid #fff;border-radius:12px;padding:10px 13px;color:white;font-weight:1000}.toast{position:fixed;bottom:13px;left:50%;transform:translateX(-50%);background:#191c70ee;border:2px solid #76e9ff;color:white;border-radius:12px;padding:11px;z-index:21;opacity:0;pointer-events:none;transition:opacity .2s;text-align:center;width:min(90%,420px)}.toast.visible{opacity:1}@media(min-width:540px){.app{padding-top:0}.home-stats{padding-top:24px}.art>img{max-width:100%}}@media(max-width:350px){.small-cta{font-size:11px!important}.progress-line span{font-size:10px}.mode-facts{font-size:10px}.bar-label{font-size:7px}}

/* Five-art positioning refinements: match each existing information tile. */
.mode-facts{top:36.0%;left:8.7%;width:82.6%;height:5.4%;display:flex;align-items:stretch;gap:1%;background:transparent;border:0;overflow:visible;padding:0}.mode-facts span{flex:1;min-width:0;display:grid;place-items:center;border:2px solid #25eaff;border-radius:14px;background:linear-gradient(145deg,#0644b1,#111c7d);font-weight:1000;color:#fff;font-size:clamp(11px,3vw,18px);text-shadow:1px 2px #240667;white-space:nowrap;box-shadow:0 0 7px #4bf9ff85}

/* Dynamic total on the existing clear reward banner; original image remains unchanged. */
.clear-medal-overlay{position:absolute;left:42%;top:58.8%;height:13.9%;width:51%;display:flex;align-items:center;justify-content:center;border:2px solid #61e7ff;border-radius:34px;background:linear-gradient(90deg,#b6faff,#f4e7ff,#fff9fb);color:#082d85;text-shadow:1px 1px #fff;font-size:clamp(14px,4.8vw,29px);font-weight:1000;box-shadow:inset 0 1px 5px #fff,0 0 8px #ff6dce;z-index:1;white-space:nowrap;}


/* v7.1 horizontal/original-art layout: do not distort, do not append UI below */
html,body{height:100%;overflow:hidden}
body{font-size:15px;background:radial-gradient(circle at 50% 8%,#5225a9 0,#11145c 35%,#080b32 92%) fixed}
.app{width:100%;max-width:none;min-height:100dvh;margin:0;background:transparent;box-shadow:none}
.screen{display:none;min-height:100dvh;width:100%;padding:0;position:relative;justify-content:center;align-items:center;overflow:hidden}
.screen.on{display:flex}
#home,#mode,#play,#clear,#failed{background:radial-gradient(circle at 50% 12%,rgba(105,48,208,.42) 0,rgba(11,17,83,.18) 36%,rgba(7,8,39,.05) 72%),linear-gradient(180deg,#0a0c3f,#0b0d35)}
.home-art{--ratio:1.3494623665}
.mode-art{--ratio:0.6666666667}
.play-art{--ratio:1.3458781362}
#clear .result-art{--ratio:1.6513157895}
#failed .result-art{--ratio:1.6469298246}
.art{position:relative;width:min(100vw,calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * var(--ratio)));max-width:100vw;max-height:100dvh;aspect-ratio:var(--ratio);height:auto;overflow:visible;background:transparent;line-height:0;box-shadow:0 0 28px rgba(0,0,0,.28)}
.art>img{width:100%;height:100%;object-fit:contain;display:block}
/* screens are now art-first; remove the extra area under images */
.home-stats,.aux,.control-under,.play-acts,.tap-instruction,.pads{display:none!important}
/* optional resume button floats over the title art only when present */
#resume{position:absolute;left:50%;bottom:max(1.2dvh,10px);transform:translateX(-50%);z-index:6;width:min(82vw,480px)}
/* mode screen remains portrait art, with manual editor overlaid instead of below */
#mode .manual-box{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(94vw,620px);max-height:88dvh;overflow:auto;z-index:10;margin:0;background:linear-gradient(#10266ef2,#1e1160f1);backdrop-filter:blur(3px)}
#mode .manual-box[hidden]{display:none!important}
/* play screen: move only the essential dynamic labels onto the artwork */
.status-panel{position:absolute;inset:0;margin:0;padding:0;background:none;border:0;box-shadow:none;pointer-events:none;display:block!important}
.status-main{position:absolute;left:32%;top:50.7%;width:39%;min-height:0;margin:0;background:none;border:0;font-size:clamp(18px,4vw,31px);line-height:1.05;color:#ffe86a;text-shadow:2px 2px #e31fa6,0 0 12px #f82cc1}
.progress-line{position:absolute;left:2.8%;top:92.1%;width:57%;margin:0;display:block;text-align:left}
.progress-line span{display:none}
#progress-text{display:flex!important;align-items:center;height:100%;padding:0 10px;background:none;border:0;color:#fff9ae;font-size:clamp(12px,2.6vw,18px);text-shadow:1px 1px #081c65}
.count-lamps{position:absolute;left:33%;top:60.2%;width:37%;padding:4px 6px 3px;border-radius:13px;background:rgba(40,22,129,.92);box-shadow:0 0 12px rgba(255,102,206,.34)}
.count-lamps b{display:block;font-size:clamp(10px,2.1vw,14px);margin-bottom:2px}.count-lamps span{font-size:clamp(12px,2.8vw,18px)}.count-lamps small{font-size:clamp(8px,1.8vw,11px);line-height:1.05}
.live-combo{font-size:clamp(15px,4.5vw,26px)}
/* result screens: keep the approved images intact and overlay only tiny dynamic text */
.results{position:absolute;inset:0;padding:0;background:none;pointer-events:none}
.result-words{position:absolute;left:15%;top:88%;width:70%;margin:0;padding:0;border:0;background:none;color:#fff7aa;font-size:clamp(11px,2.2vw,16px);text-shadow:1px 2px #081a60}
#clear .result-words{display:none}
#failed .result-words{display:none}
/* home screen tiny floating utility buttons so art stays untouched */
#open-help,#export-save,#bgm-status{position:fixed;z-index:12;bottom:max(10px,env(safe-area-inset-bottom));padding:8px 10px;border-radius:14px;font-size:12px;opacity:.92}
#open-help{left:10px}#export-save{left:102px}#bgm-status{right:10px}
/* Keep modal usable above art-first layout */
.modal{z-index:30}.toast{z-index:31}
@media (orientation:landscape){
  .art{max-height:100dvh}
  #open-help,#export-save,#bgm-status{bottom:10px}
}
@media (max-width:430px){
  #open-help,#export-save,#bgm-status{font-size:11px;padding:7px 9px}
  #export-save{left:94px}
}

/* v7.2: clickable result-screen title buttons are contained inside image. */
#clear .result-return, #failed .result-return {
 position:absolute!important; top:2.5%!important; left:1.8%!important;
 min-width:26%!important; height:clamp(35px,8vw,44px)!important;
 z-index:12!important; display:flex!important; align-items:center!important; justify-content:center!important;
 padding:4px 10px!important; margin:0!important;
 border:2px solid #c6f8ff!important; border-radius:13px!important;
 background:linear-gradient(#23bcfa,#1265be 58%,#15328d)!important;
 box-shadow:0 3px 0 #150943,0 0 8px #00ccff77!important;
 color:#fff!important; font:900 clamp(12px,2.8vw,17px)/1 'Hiragino Kaku Gothic ProN','Yu Gothic',system-ui,sans-serif!important;
 white-space:nowrap!important;pointer-events:auto!important;touch-action:manipulation!important;cursor:pointer!important;
}
#clear .result-return:active,#failed .result-return:active{filter:brightness(1.16)!important;transform:translateY(1px)!important;}

/* v8: all five original portrait images, aspect-ratio preserved */
.home-art,.mode-art,.play-art,#clear .result-art,#failed .result-art{--ratio:941 / 1672}
.art{width:min(100vw,calc(100dvh * 941 / 1672));aspect-ratio:941 / 1672;overflow:hidden}
.screen{min-height:100dvh;align-items:center;justify-content:center}
.home-stats,.aux,.control-under{display:none!important}
.mode-level{top:35%;left:31%;width:38%;height:6%;font-size:clamp(15px,4.5vw,27px)}
.mode-facts{top:44%;left:11%;width:78%;height:3%;font-size:clamp(9px,2.5vw,14px)}
.live-level{top:8%;left:31%;height:5%;font-size:clamp(16px,5vw,27px)}
.live-bpm{top:15%;left:40%;height:5%;font-size:clamp(15px,4vw,23px)}
.live-combo{top:62%;left:80%;height:6%}
.live-chart{top:25%;left:7%;width:86%;height:18%}
.status-main{top:51%;left:30%;width:40%}
.progress-line{top:94%}
.result-return{z-index:10!important;pointer-events:auto!important}


/* v8.2 PORTRAIT coordinates matched to the approved 941 x 1672 images.
   Only overlays & hit areas are adjusted; the five artwork files are unchanged. */
.art{container-type:inline-size;isolation:isolate;}
#mode .hit,#play .hit{z-index:10!important;}
/* Level replaces only lettering baked in the central blue panel. */
#mode .mode-level{
 position:absolute!important;left:32.0%!important;top:25.2%!important;
 width:35.7%!important;height:5.25%!important;
 border:0!important;border-radius:15px!important;box-shadow:none!important;
 background:linear-gradient(180deg,#071c64 0%,#071657 60%,#131450 100%)!important;
 color:#fff4a1!important;text-shadow:0 2px #d83abb,0 0 6px #f543d2!important;
 font-size:clamp(16px,6.5cqw,58px)!important;line-height:1!important;
 z-index:3!important;pointer-events:none!important;letter-spacing:-.03em!important;
}
/* Three small dark information tiles — no second row floating over the rhythm choices. */
#mode .mode-facts{
 position:absolute!important;top:35.6%!important;left:8.65%!important;
 width:82.7%!important;height:4.18%!important;margin:0!important;padding:0!important;
 display:flex!important;align-items:stretch!important;gap:0.8%!important;
 border:0!important;background:none!important;box-shadow:none!important;
 z-index:3!important;pointer-events:none!important;
}
#mode .mode-facts span{
 display:grid!important;place-items:center!important;flex:1 1 0!important;
 min-width:0!important;padding:0 1%!important;line-height:1.05!important;
 font-size:clamp(9px,3.4cqw,32px)!important;font-weight:900!important;
 border:0!important;border-radius:14px!important;
 color:white!important;background:linear-gradient(180deg,#073c9e,#071858)!important;
 box-shadow:none!important;text-shadow:1px 2px 2px #0c0d4a!important;
}
/* Existing image contains visual selection frames; do not add bulky secondary outlines. */
#mode .feel-hit.chosen{outline:2px solid rgba(255,240,84,.55)!important;outline-offset:-7px!important;box-shadow:none!important;border-radius:20px!important;}
/* Prevent static LEVEL 14 / BPM 100 from bleeding through the dynamic fields. */
#play .live-level{
 position:absolute!important;left:29.0%!important;top:6.63%!important;width:42.0%!important;height:5.5%!important;
 border:0!important;border-radius:16px!important;box-shadow:none!important;
 background:linear-gradient(180deg,#061a5c,#0c1658)!important;
 font-size:clamp(16px,6.9cqw,61px)!important;color:#ffde67!important;
 text-shadow:2px 2px #e521a8!important;white-space:nowrap!important;
 pointer-events:none!important;z-index:4!important;
}
#play .live-bpm{
 position:absolute!important;left:42.1%!important;top:15.57%!important;
 width:15.9%!important;height:3.6%!important;
 border:0!important;border-radius:5px!important;box-shadow:none!important;
 font-size:clamp(15px,7.4cqw,64px)!important;line-height:1!important;
 color:#fff!important;text-shadow:1px 2px 2px #3e0a76!important;
 background:linear-gradient(180deg,#ad0fa7,#aa0c9f)!important;
 pointer-events:none!important;z-index:4!important;
}
#play .live-combo{
 position:absolute!important;left:80.4%!important;top:66.93%!important;
 width:14.3%!important;height:3.7%!important;
 border:0!important;border-radius:5px!important;box-shadow:none!important;
 background:linear-gradient(180deg,#321278,#2a0b70)!important;
 font-size:clamp(16px,7.1cqw,62px)!important;color:white!important;
 text-shadow:0 2px 3px #230254!important;
 pointer-events:none!important;z-index:4!important;
}
/* Use the white inset INSIDE the original score rectangle; never paint over the mascot. */
#play .live-chart{
 position:absolute!important;top:24.09%!important;left:5.0%!important;
 width:89.85%!important;height:11.75%!important;
 display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;
 padding:0!important;gap:0!important;overflow:hidden!important;
 background:#fcffff!important;border:0!important;border-radius:0!important;
 color:#0b276b!important;line-height:1!important;
 z-index:3!important;pointer-events:none!important;
}
#play .score-bar{min-width:0!important;height:100%!important;overflow:hidden!important;padding:2% 0.5%!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;}
#play .bar-label{flex:0 0 23%!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:clamp(7px,3.0cqw,27px)!important;line-height:1!important;white-space:nowrap!important;}
#play .score-marks{margin:0!important;flex:1!important;height:0!important;min-height:0!important;display:grid!important;grid-template-columns:repeat(16,minmax(0,1fr))!important;align-items:stretch!important;border-bottom:1px solid #96b6d0!important;}
#play .score-cell{height:100%!important;overflow:hidden!important;align-items:center!important;font-size:clamp(9px,4.0cqw,36px)!important;}
/* The original progress indicator already displays 4小節 1/4. No duplicate text beneath it. */
#play #progress-text{display:none!important;}
/* Dynamic feedback appears only in the space above the mascot after playback begins. */
#play .status-panel{position:absolute!important;inset:0!important;pointer-events:none!important;z-index:5!important;}
#play .status-main{left:32%!important;top:44.5%!important;width:36%!important;min-height:0!important;font-size:clamp(13px,4.1cqw,38px)!important;line-height:1.05!important;}
#play .status-main[data-phase="ready"]{display:none!important;}
#play .count-lamps{top:58.3%!important;left:36%!important;width:31%!important;z-index:8!important;}

/* === v8.4: score / combo skin. All five source PNGs are unchanged. === */
:root{--neon-cyan:#37eafd;--neon-pink:#fd39b7;--neon-gold:#ffed6a;--arcade-navy:#08185e;}
.score-overlay{position:absolute;z-index:8;box-sizing:border-box;display:flex;align-items:center;justify-content:center;pointer-events:none;font-family:'Arial Rounded MT Bold','Hiragino Kaku Gothic ProN','Yu Gothic',system-ui,sans-serif;font-weight:1000;letter-spacing:-.025em;color:#fff;text-shadow:0 2px 2px #090b59;}
#home .home-best{left:4.8%;top:91.05%;width:17.4%;height:6.15%;border:2px solid #ff57d6;border-radius:22%;background:linear-gradient(145deg,#16379e,#250a69);display:flex;flex-direction:column;gap:1px;font-size:clamp(9px,3.5cqw,26px);line-height:1.05;box-shadow:inset 0 0 10px #d928bd,0 0 7px #da44f0;}
#home .home-best b{font-size:clamp(10px,4.0cqw,31px);color:#fff16a;text-shadow:0 1px 3px #b90b97;}
#mode .mode-best{left:70.5%;top:8.7%;height:5.15%;width:23.9%;border:2px solid var(--neon-cyan);border-radius:100px;background:linear-gradient(180deg,#07246f,#120960);flex-direction:column;font-size:clamp(10px,3.3cqw,30px);line-height:1.08;box-shadow:0 0 8px #00eafa80;}
#mode .mode-best b{color:#ffec6d;font-size:clamp(12px,4.5cqw,39px);}
#mode .mode-reward-cover{left:64.0%;top:16.0%;width:29%;height:5.8%;border-radius:21px;border:2px solid #fff5ac;background:linear-gradient(135deg,#ff4eb2,#a60cce);font-size:clamp(10px,3.25cqw,28px);box-shadow:0 0 8px #ff57d7;}
#mode .mode-facts span:last-child{font-size:clamp(9px,2.7cqw,28px)!important;color:#ffef9b!important;}
#play .play-score{left:69.5%;top:13.8%;width:27.8%;height:6.0%;display:flex;flex-direction:column;gap:1px;background:linear-gradient(180deg,#06388f,#0c135d);border:2px solid #39eafc;border-radius:70px;box-shadow:0 0 11px #39eafc75;line-height:1.08;}
#play .play-score small{font-size:clamp(10px,3.5cqw,29px);color:#fff7b5;}
#play .play-score b{font-size:clamp(13px,5.0cqw,42px);font-variant-numeric:tabular-nums;letter-spacing:-.04em;text-shadow:1px 2px #ed319e;}
#play #life-live{position:absolute;z-index:5;left:3%;top:13.9%;height:5.8%;width:29%;display:grid;place-items:center;font-size:clamp(20px,7.0cqw,65px);letter-spacing:.04em;line-height:1;color:#ff55ab;background:linear-gradient(180deg,#071760,#041253);border-radius:100px;border:2px solid #2befff;pointer-events:none;text-shadow:0 0 5px #fd54b8;}
#play #combo-pop{position:absolute;z-index:9;top:62.5%;left:73.5%;width:24%;height:4.35%;border-radius:50% 50% 43% 43%;border:2px solid #fff6a1;background:linear-gradient(#ffeb70,#ff5db6);color:#211072;text-shadow:0 1px 1px #fff;font-size:clamp(10px,4.0cqw,35px);font-weight:1000;display:grid;place-items:center;line-height:1;pointer-events:none;opacity:0;transform:translateY(20%) scale(.65);box-shadow:0 0 16px #ff69db;}
#play #combo-pop.show{animation:comboBubble .52s ease-out both;}
#play #combo-mult{position:absolute;z-index:8;left:79.9%;top:71.3%;width:14.8%;height:2.7%;color:#ffe86b;background:linear-gradient(100deg,#251069,#450890);border:1px solid #eaa6fe;border-radius:13px;font-size:clamp(11px,3.8cqw,33px);font-weight:1000;display:grid;place-items:center;pointer-events:none;text-shadow:0 1px 2px #190948;}
#play .live-combo.combo-pulse{animation:comboJelly .4s cubic-bezier(.26,.8,.32,1.25) both!important;transform-origin:50% 50%;}
@keyframes comboJelly{0%{transform:scale(1)}22%{transform:scale(1.29,.83)}42%{transform:scale(.86,1.17)}64%{transform:scale(1.13,.93)}83%{transform:scale(.97,1.04)}100%{transform:scale(1)}}
@keyframes comboBubble{0%{opacity:0;transform:translateY(25%) scale(.55) rotate(-9deg)}18%{opacity:1;transform:translateY(-8%) scale(1.1) rotate(4deg)}70%{opacity:1;transform:translateY(-28%) scale(1) rotate(-4deg)}100%{opacity:0;transform:translateY(-40%) scale(.92) rotate(0)}}
#clear .clear-medal-overlay{display:none!important;}
#clear .clear-scoreboard{position:absolute;left:7%;top:71%;width:86%;height:13%;z-index:7;box-sizing:border-box;border:3px solid #59eaff;border-radius:26px;background:linear-gradient(105deg,#b3faff,#fff5cd 58%,#ffd5f6);box-shadow:0 0 12px #1adffb;}
#failed .failed-scoreboard{position:absolute;left:15%;top:63%;width:70%;height:7%;z-index:7;box-sizing:border-box;border:2px solid #43dafe;border-radius:17px;background:linear-gradient(135deg,#071f70,#3f107a);box-shadow:0 0 12px #23b9e9;}
.result-scoreboard{display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;padding:2px 3px;pointer-events:none;font-weight:1000;font-family:'Arial Rounded MT Bold','Hiragino Kaku Gothic ProN','Yu Gothic',system-ui,sans-serif;line-height:1.05;}
.result-scoreboard>div:first-child{font-size:clamp(12px,5.0cqw,46px);font-variant-numeric:tabular-nums;}
.result-scoreboard>div:nth-child(2){font-size:clamp(9px,3.5cqw,32px);}
.result-scoreboard .record-label{font-size:clamp(8px,2.4cqw,19px);letter-spacing:.05em;}
#clear .result-scoreboard{color:#081e68;text-shadow:0 1px #fff;}
#clear .result-scoreboard .record-label{color:#b414a4;}
#failed .result-scoreboard{color:#fff;text-shadow:0 2px #200c62;}
#failed .result-scoreboard .record-label{color:#fff1a2;}
/* Existing background has BGM ON baked in. Cover it only in OFF state. */
body.bgm-is-off #home-art:after{content:'♫ BGM OFF';display:grid;place-items:center;position:absolute;z-index:9;pointer-events:none;left:77.1%;top:90.3%;width:19%;height:6.15%;box-sizing:border-box;border:2px solid #3ee4fa;border-radius:18px;color:#d6e0f8;background:linear-gradient(#20336f,#180b5b);font-size:clamp(9px,3.0cqw,25px);line-height:1;font-weight:900;text-shadow:0 1px #0a1850;}
@media(prefers-reduced-motion:reduce){#play .live-combo.combo-pulse,#play #combo-pop.show{animation:none!important}#play #combo-pop.show{opacity:1;transform:none}}