*{box-sizing:border-box}
html{background:#140d25;color:#fff3e1;font:16px system-ui,-apple-system,"Segoe UI",sans-serif}
body{margin:0;min-height:100vh;background:radial-gradient(ellipse at 50% 0%,#56345b 0%,#271534 36%,#160e26 80%);transition:background .25s}
button,input{font:inherit}
button{cursor:pointer;border:1px solid #956a98;border-radius:12px;background:#382349;color:#fff1df;padding:11px 16px;font-weight:800;transition:filter .12s,transform .12s}
button:hover:not(:disabled){filter:brightness(1.13)}
button:active:not(:disabled){transform:scale(.96)}
button:disabled{opacity:.42;cursor:not-allowed}
.primary{background:linear-gradient(135deg,#ffda69 0%,#ff9a3f 58%,#ed5f37 100%);color:#341a1f;border:1px solid #ffdb8b;box-shadow:0 5px 20px #ff81404a}
.wrap{max-width:1300px;margin:auto;padding:16px 20px 34px}
header,.heading,.stats,.controls,.result-actions,.fire-controls{display:flex;align-items:center;justify-content:space-between;gap:12px}
header{color:#f8cdad;font-weight:750;font-size:.74rem;letter-spacing:.12em}
header a{color:#ffd48f;text-decoration:none}
.heading{margin:7px 0 11px}
.heading h1{margin:8px 0 3px;font-size:clamp(1.6rem,3.1vw,2.7rem);letter-spacing:-.045em;text-shadow:0 4px 26px #e45b5555}
.heading em{font-style:normal;font-size:.65em;color:#ffcd75}
.heading p{margin:0;color:#e0b9d3;font-weight:500}
#sound{white-space:nowrap;font-size:.8rem}
.stats{gap:8px;margin-bottom:12px}
.stats>div{flex:1;min-width:0;border:1px solid #ba82a44b;background:linear-gradient(125deg,#422a55dd,#2b1c3fdf);border-radius:13px;padding:10px 14px;display:grid;gap:4px;box-shadow:inset 0 1px #ffffff13}
.stats small{color:#e6b6d7;font-size:.67rem;letter-spacing:.18em;font-weight:800}
.stats strong{font-variant-numeric:tabular-nums;font-size:clamp(1rem,1.85vw,1.6rem);color:#ffe8c5}
.stats>div:nth-child(2) strong{color:#ffd17c}
.stats>div:nth-child(5) strong{color:#f9acff}
#hits{color:#ffc1f4}
#fever-timer{font-variant-numeric:tabular-nums}
.playfield{height:clamp(390px,49vw,610px);position:relative;background:#2e1a44;border:2px solid #b86b86;border-radius:18px;overflow:hidden;box-shadow:0 25px 65px #0a03168c,0 0 40px #f36c3726}
.playfield:before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;z-index:1;box-shadow:inset 0 0 45px #190d27a0}
.playfield canvas{width:100%;height:100%;display:block;touch-action:none}
.notice{position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:3;pointer-events:none;white-space:nowrap;background:#21132bdc;border:1px solid #d6a8bd69;padding:9px 17px;border-radius:30px;box-shadow:0 5px 20px #100817aa;font-size:.85rem;font-weight:800;text-align:center}
.target-hint{position:absolute;right:16px;bottom:16px;z-index:2;pointer-events:none;border:1px solid #aa85b36e;background:#25142de6;border-radius:30px;padding:9px 17px;color:#f8cbdf;font-size:.84rem;font-weight:850;backdrop-filter:blur(10px)}
.target-hint.locked{color:#1b1b32;background:linear-gradient(90deg,#fff5aa,#ffc074);border-color:#fff5a2;box-shadow:0 0 24px #ffcc7160;animation:lockPulse 1s ease-in-out infinite}
.fever-banner{position:absolute;z-index:3;left:16px;bottom:16px;padding:10px 15px;border-radius:40px;font-weight:1000;letter-spacing:.07em;color:#2d1020;background:linear-gradient(100deg,#ffe675,#ff9b48,#ff66ad);box-shadow:0 0 30px #ff9b4caa;animation:feverGlow .6s ease-in-out infinite alternate}
.fever-banner[hidden]{display:none}
.fever-banner span{margin-left:8px;background:#2d1020;color:#ffdf98;padding:4px 8px;border-radius:14px}
.impact-flash{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 55%,#fff6c570 0%,#ff914e24 33%,transparent 64%)}
.impact-flash.active{animation:impactFlash .35s ease-out}
.score-pop{position:absolute;top:36%;left:50%;transform:translate(-50%,-50%);font-size:clamp(2.3rem,7vw,4.4rem);font-weight:1000;color:#fff1aa;-webkit-text-stroke:1px #6a2d37;text-shadow:0 5px 0 #a33b43,0 0 26px #ffbe49aa;z-index:4;pointer-events:none;opacity:0}
.score-pop.visible{animation:scoreFly .85s cubic-bezier(.2,.8,.2,1) forwards}
 .overlay{position:absolute;inset:0;display:grid;place-items:center;overflow-y:auto;overscroll-behavior:contain;background:linear-gradient(180deg,#10071ec9,#1f0c29d6);z-index:5;padding:17px}
.overlay[hidden]{display:none}
.prompt{max-width:475px;padding:28px 27px;border:1px solid #ffc48f;border-radius:22px;text-align:center;background:linear-gradient(150deg,#352044f5,#251332f5);box-shadow:0 22px 85px #120820ee,0 0 24px #f0835340}
.prompt b{letter-spacing:.18em;font-size:.82rem;color:#ffc47e}
.prompt h2{font-size:1.8rem;margin:12px 0}
.prompt p{line-height:1.7;color:#ead4e1}
.prompt .primary{font-size:1.17rem;padding:13px 32px}
.controls{margin-top:12px;border:1px solid #956f8a;border-radius:16px;padding:14px 15px;background:linear-gradient(120deg,#372043,#2d1c39);box-shadow:0 7px 25px #10081b55;align-items:stretch}
.dials{flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.dials label{display:grid;grid-template-columns:1fr auto;gap:7px;font-size:.83rem;color:#f3c9cf;font-weight:850}
.dials output{color:#ffd082;white-space:nowrap;font-variant-numeric:tabular-nums}
.dials input{width:100%;grid-column:1/-1;margin:0;accent-color:#ff9e50;cursor:pointer;height:20px;touch-action:pan-x}
.fire-controls{min-width:310px;justify-content:flex-end}
.fire-controls #left,.fire-controls #right{font-size:1.1rem;min-width:43px;padding:11px}
.fire-button{position:relative;isolation:isolate;min-width:158px;overflow:hidden;font-size:1.13rem;letter-spacing:.01em}
.fire-button:before{content:"";position:absolute;inset:auto 0 0 0;height:5px;background:linear-gradient(90deg,#fff8aa,#ffe08a);width:var(--reload,100%);transition:width .1s}
.fire-button small{display:block;font-size:.63rem;font-weight:700;margin-top:2px;opacity:.8}
.fire-button.fired{animation:firePop .23s ease-out}
.help{color:#d7b6d3;font-size:.79rem;line-height:1.6}
dialog{border:1px solid #f5b571;border-radius:22px;padding:0;background:linear-gradient(155deg,#392246,#20142e);color:#fff0db;max-width:min(540px,94vw);width:100%;box-shadow:0 20px 110px #000a}
dialog::backdrop{background:#0d0614d0;backdrop-filter:blur(4px)}
.result-inner{text-align:center;padding:31px 24px}
.result-inner>span{color:#ffb36b;font-size:.75rem;letter-spacing:.17em}
.result-inner h2{font-size:1.65rem}
.score-final{font-size:clamp(2.5rem,8vw,4.5rem);color:#ffc16b;font-weight:1000}
.result-actions{justify-content:center;flex-wrap:wrap}
footer{text-align:center;padding:22px 0;color:#a995b3;font-size:.75rem}
#view-result{display:block;margin:20px auto}
#view-result[hidden]{display:none}
body.fever .playfield{border-color:#ffd06d;box-shadow:0 25px 65px #0a03168c,0 0 48px #ffb0497c}
@keyframes impactFlash{0%{opacity:0}20%{opacity:1}100%{opacity:0}}
@keyframes scoreFly{0%{opacity:0;transform:translate(-50%,20%) scale(.7)}15%{opacity:1;transform:translate(-50%,-30%) scale(1.18)}67%{opacity:1}100%{opacity:0;transform:translate(-50%,-105%) scale(.94)}}
@keyframes firePop{0%{transform:scale(1)}45%{transform:scale(.92)}100%{transform:scale(1)}}
@keyframes lockPulse{50%{box-shadow:0 0 34px #ffe68cad}}
@keyframes feverGlow{to{filter:brightness(1.18)}}
@media(max-width:780px){
 .wrap{padding:10px 9px 24px}
 header{font-size:.59rem}
 .heading{gap:5px}
 .heading h1{font-size:clamp(1.3rem,5vw,1.8rem)}
 .heading p{font-size:.76rem}
 #sound{font-size:.67rem;padding:9px 10px}
 .stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
 .stats>div{min-width:0;padding:7px 9px}
 .stats small{font-size:.55rem}
 .stats strong{font-size:1.04rem}
 .playfield{height:min(61vh,490px);min-height:335px;border-radius:13px}
 .controls{display:grid;padding:12px;gap:10px}
 .dials{gap:7px}
 .dials label{font-size:.67rem}
 .fire-controls{min-width:0;justify-content:center}
 .fire-controls #fire{min-width:48%;padding:13px}
 .fire-controls>button:not(#fire){min-width:52px}
 .notice{font-size:.71rem;padding:6px 10px;top:10px}
 .target-hint{font-size:.69rem;padding:8px 10px;bottom:10px;right:9px}
 .fever-banner{font-size:.68rem;padding:9px;left:8px;bottom:56px}
 .help{font-size:.73rem}
 .prompt{padding:17px}
 .prompt h2{font-size:1.37rem}
}
@media(max-width:380px){
 .heading h1{font-size:1.22rem}
 .heading p{font-size:.7rem}
 .stats small{letter-spacing:.05em}
 .target-hint{max-width:59%;text-align:center}
 .dials label{font-size:.61rem}
}
@media(prefers-reduced-motion:reduce){
 *,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}


/* Two selectable playstyles, visible on the introductory screen. */
.mode-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 14px;
 margin:0 1px 9px;color:#f6c9e6;font-size:.72rem;font-weight:750}
.mode-strip b{color:#ffd37d;padding:3px 9px;border:1px solid #ffbb7470;border-radius:9px;margin-left:5px}
.mode-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:20px 0}
.mode-option{min-width:0;display:grid;gap:6px;justify-items:start;text-align:left;
 background:#261a39;border:2px solid #786381;border-radius:15px;padding:13px 14px;color:#fff0e8;
 box-shadow:none;transition:background .15s,transform .15s,border-color .15s}
.mode-option strong{font-size:1.02rem;white-space:nowrap}
.mode-option small{font-size:.71rem;color:#d3bed5;line-height:1.5;font-weight:600}
.mode-option.selected{border-color:#ffd487;background:linear-gradient(120deg,#80415a,#40214a);
 box-shadow:inset 0 0 17px #ffbd4d25,0 0 15px #ff9c4945}
.mode-option[data-mode="dopagaki"].selected{border-color:#fc79ff;background:linear-gradient(120deg,#7531a0,#3f2d73);
 box-shadow:inset 0 0 20px #d64bff47,0 0 19px #c557f871}
.dopagaki .playfield{border-color:#ed85ff;box-shadow:0 20px 72px #13062d99,0 0 42px #eb4cfc76}
.dopagaki .mode-strip b{border-color:#f2a0ff;color:#facaff}
.dopagaki .primary{background:linear-gradient(120deg,#ffe279,#ff7bd9 58%,#bc6aff);color:#27122e;border-color:#ffd8f4}
.dopagaki .stats>div:nth-child(2) strong{color:#ffb2fa}
.dopagaki .prompt{border-color:#f4a2fa;box-shadow:0 20px 80px #11051b,0 0 35px #a738ea55}
.dopagaki .target-hint.locked{background:linear-gradient(120deg,#fff6bd,#faaaff)}
@media(max-width:780px){
 .mode-strip{font-size:.65rem}
 .mode-picker{gap:7px;margin:14px 0}
 .mode-option{padding:10px 9px}
 .mode-option strong{font-size:.85rem}
 .mode-option small{font-size:.59rem}
}
@media(max-width:380px){
 .mode-strip{font-size:.59rem}
 .mode-picker{gap:6px}
 .mode-option strong{font-size:.74rem}
 .mode-option small{font-size:.53rem}
}


/* Portrait RESULT preview shows exactly what the save button downloads. */
#result{max-height:calc(100dvh - 32px);overflow-y:auto}
.result-preview-figure{margin:18px auto 21px;display:grid;justify-items:center;gap:10px}
.result-preview-figure figcaption{font-size:.76rem;color:#f5d2ab;letter-spacing:.03em}
.result-preview{display:grid;place-items:center;min-height:140px;color:#f4cfde}
.result-preview canvas{display:block;width:min(214px,57vw);height:auto;max-width:100%;
 border:2px solid #ffcd8c;border-radius:13px;background:#231332;
 box-shadow:0 12px 38px #0804139c}