:host{font-family:system-ui,sans-serif;color:#f4f8ff}
.party{max-width:900px;margin:auto}
header{text-align:center;padding:25px 5px}
.eyebrow{font-size:11px;letter-spacing:3px;color:#ffc75a}
h1{font-size:clamp(32px,7vw,66px);line-height:1.05;margin:15px 0;letter-spacing:-2px}
em{font-style:normal;color:#ff753e}
p,li{color:#b9cce7;line-height:1.6}
.arena{border:1px solid #355b87;border-radius:26px;background:radial-gradient(ellipse at 50% 40%,#214d7b,#112b4c 70%);padding:24px;text-align:center}
.topline{display:flex;justify-content:space-between;font-size:12px;letter-spacing:2px;color:#ffd575}
.bomb{font-size:110px;margin:24px auto;filter:drop-shadow(0 15px 25px #0006)}
h2{font-size:clamp(25px,5vw,43px);margin:8px 0}
.actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
button{border:1px solid #486d98;background:#1c3d64;color:#f4f8ff;border-radius:12px;padding:16px 22px;font:700 16px system-ui;cursor:pointer;min-height:52px}
button.primary{background:#ff793f;color:#102039;border-color:#ffad52;box-shadow:0 4px 0 #a74322}
button:disabled{opacity:.4;cursor:default}
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ffcb57;outline-offset:3px}
details{background:#17375d;border:1px solid #355b87;border-radius:16px;padding:18px;margin-top:18px}
summary{cursor:pointer;font-weight:700}
fieldset{border:0;padding:20px 0 0;min-width:0}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:18px}
label{display:flex;flex-direction:column;gap:9px;font-size:14px;color:#dbe9fa}
input,select{box-sizing:border-box;width:100%;min-width:0;background:#0d2442;color:#fff;border:1px solid #486d98;border-radius:8px;padding:11px;font-size:16px}
input[type=range]{accent-color:#ff863f}
input[type=checkbox]{width:auto}
.check{flex-direction:row;align-items:center}
footer{text-align:center;font-size:12px;color:#b9cce7;padding:25px}
#error{color:#ffbb9b;margin-bottom:0}
.arena[data-state=Playing] .bomb{animation:bounce .8s ease-in-out infinite alternate}
.arena[data-state=Exploded] .bomb,.arena[data-state="Between Rounds"] .bomb{animation:boom .6s ease-out}
@keyframes bounce{to{transform:translateY(-12px) rotate(7deg)}
}
@keyframes boom{0%{transform:scale(.5)}
60%{transform:scale(1.3)}
100%{transform:scale(1)}
}
@media(max-width:520px){.grid{grid-template-columns:1fr}
.arena{padding:20px 12px}
.actions button{flex:1 1 140px}
.bomb{font-size:90px}
h1{letter-spacing:-1px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}
}


/* Phone-first play controls and comfortable touch targets. */
:host{display:block;color-scheme:dark;-webkit-tap-highlight-color:transparent}
*,*::before,*::after{box-sizing:border-box}
.party{padding-bottom:env(safe-area-inset-bottom,0px)}
header{padding:22px 5px 26px}
header p{margin:0;font-size:15px}
.eyebrow{font-size:10px;letter-spacing:2px}
.topline{align-items:center;gap:12px;font-weight:700}
#state{padding:7px 11px;border:1px solid #486d98;border-radius:100px;background:#80bbff16;letter-spacing:.5px}
#round{white-space:nowrap}
.game-controls{display:grid;grid-template-columns:1fr 1fr;max-width:480px;margin:24px auto 0;gap:10px}
#start{grid-column:1/-1;min-height:60px;font-size:19px}
#reset{background:transparent;color:#c6d8ee}
.arena[data-state=Playing] #start,.arena[data-state="Loading Audio"] #start,.arena[data-state="Between Rounds"] #start{display:none}
.arena[data-state=Playing] #stop,.arena[data-state="Loading Audio"] #stop,.arena[data-state="Between Rounds"] #stop{background:#922f36;border-color:#d75d58;color:#fff;grid-column:1/-1;min-height:60px;font-size:19px}
.arena[data-state=Playing] #reset,.arena[data-state="Loading Audio"] #reset,.arena[data-state="Between Rounds"] #reset{grid-column:1/-1}
.arena[data-state=Playing] #state{color:#ffdd8b;border-color:#b97540}
.arena[data-state=Exploded],.arena[data-state="Between Rounds"]{border-color:#dc814c;background:radial-gradient(ellipse at 50% 35%,#633d3c,#112b4c 75%)}
#error:empty{display:none}
.section-label{font-size:10px;letter-spacing:2px;font-weight:800;color:#ffcf7d;margin:4px 0 18px}
summary{min-height:28px;align-content:center}
input,select{min-height:48px}
input[type=range]{min-height:48px;padding:8px 0;cursor:pointer}
input[type=checkbox]{width:24px;height:24px;min-height:24px;accent-color:#ff863f;flex-shrink:0}
.check{min-height:48px;gap:12px}
input[type=file]{font-size:13px;padding:8px}
input::file-selector-button{border:0;border-radius:6px;padding:9px;background:#29517d;color:#fff;margin-right:8px}
.uploads{background:#102b4c;margin:0 0 20px;padding:14px}
.uploads .grid{margin-top:18px}
.uploads p{font-size:12px;margin-bottom:0}
fieldset>.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#stopPreview{grid-column:1/-1;background:transparent}
button{touch-action:manipulation}
button:active:not(:disabled){transform:translateY(1px)}
@media(max-width:600px){
 header{padding:12px 2px 20px}
 .eyebrow{font-size:9px;letter-spacing:1.4px}
 h1{font-size:34px;letter-spacing:-1.5px;margin:12px 0 10px}
 header p{font-size:13px;max-width:290px;margin:auto}
 .arena{border-radius:22px;padding:16px}
 .topline{font-size:10px;letter-spacing:1px}
 .bomb{font-size:78px;line-height:1.2;margin:18px auto 12px}
 h2{font-size:28px;line-height:1.15;letter-spacing:-.7px}
 #message{font-size:14px;line-height:1.5;min-height:42px;margin:12px auto 0;max-width:290px}
 .game-controls{margin-top:18px;gap:10px}
 button{padding:13px 10px;min-height:48px;font-size:14px;border-radius:12px}
 #start{min-height:56px;font-size:18px}
 details{margin-top:12px;padding:14px;border-radius:15px}
 summary{font-size:14px;min-height:30px}
 .grid{grid-template-columns:1fr;gap:14px;margin-bottom:22px}
 .timing-grid{grid-template-columns:1fr 1fr;gap:12px}
 label{font-size:13px;gap:8px}
 fieldset{padding-top:18px}
 fieldset>p:not(.section-label){font-size:12px}
 ol{padding-left:22px;font-size:14px}
 li+li{margin-top:10px}
 footer{font-size:11px;padding:18px 14px;line-height:1.6}
}
@media(max-width:360px){h1{font-size:29px}.eyebrow{font-size:8px}h2{font-size:25px}.arena{padding:14px}}
@media(max-height:700px) and (max-width:600px){header{padding-top:6px;padding-bottom:14px}.bomb{font-size:64px;margin:12px auto 8px}#message{margin-top:8px}.game-controls{margin-top:12px}}
.round-music{max-width:480px;margin:22px auto 0;text-align:left}
.round-music label{font-size:12px;color:#ffd575;font-weight:600}
.round-music select{font-weight:600;color:#f4f8ff;border-color:#486d98;background:#0d2442}
.round-music p{font-size:11px;margin:7px 0 0;line-height:1.5}
.arena[data-state=Playing] .round-music,.arena[data-state="Loading Audio"] .round-music{display:none}
@media(max-width:600px){.round-music{margin-top:16px}.round-music select{min-height:50px}.round-music p{font-size:10px}}
/* Decorative animations run at a constant pace, independent of round duration. */
.bomb-stage{position:relative;isolation:isolate;width:210px;margin:12px auto}
.bomb-stage .bomb{position:relative;z-index:2;line-height:1.3;margin:22px auto}
.orbit{position:absolute;inset:5%;border:1px solid #76b9ff40;border-radius:50%;background:radial-gradient(circle,#5ba8ff12,transparent 65%)}
.orbit::after{content:"";position:absolute;inset:12px;border:1px dashed #76b9ff35;border-radius:50%}
.arena[data-state=Ready] .bomb,.arena[data-state=Stopped] .bomb{animation:float 3s ease-in-out infinite}
.arena[data-state=Playing] .orbit{animation:ripple 1.6s ease-out infinite}
.arena[data-state="Loading Audio"] .orbit{animation:spin 2s linear infinite;border-top-color:#ffba68}
.beat{height:20px;display:flex;align-items:center;justify-content:center;gap:5px;visibility:hidden}
.beat i{width:4px;height:8px;background:#ffb968;border-radius:3px;animation:beat .7s ease-in-out infinite alternate}
.beat i:nth-child(2){animation-delay:-.4s}.beat i:nth-child(3){animation-delay:-.2s}.beat i:nth-child(4){animation-delay:-.6s}.beat i:nth-child(5){animation-delay:-.3s}
.arena[data-state=Playing] .beat{visibility:visible}
.burst{position:absolute;inset:0;pointer-events:none}
.burst i{position:absolute;left:50%;top:50%;width:8px;height:14px;border-radius:3px;background:#ffc868;opacity:0;--angle:0deg}
.burst i:nth-child(2){--angle:45deg}.burst i:nth-child(3){--angle:90deg}.burst i:nth-child(4){--angle:135deg}.burst i:nth-child(5){--angle:180deg}.burst i:nth-child(6){--angle:225deg}.burst i:nth-child(7){--angle:270deg}.burst i:nth-child(8){--angle:315deg}
.arena[data-state=Exploded] .burst i,.arena[data-state="Between Rounds"] .burst i{animation:scatter .8s ease-out both}
.quick-audio{display:flex;gap:8px;margin-top:10px}.quick-audio button{flex:1;font-size:12px;padding:9px 6px;min-height:44px;background:#1c3d64}
.quick-audio #stopPreview{background:transparent}
#previewStatus{font-size:12px;color:#9ad0ff;margin:10px 0 0}#previewStatus:empty{display:none}
.motion-setting{margin-bottom:24px}output{color:#9ad0ff;font-size:12px}
@keyframes float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-7px) rotate(3deg)}}
@keyframes ripple{0%{transform:scale(.9);opacity:.5}100%{transform:scale(1.13);opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes beat{to{height:20px}}
@keyframes scatter{0%{opacity:1;transform:rotate(var(--angle)) translateY(-25px)}100%{opacity:0;transform:rotate(var(--angle)) translateY(-100px) rotate(50deg)}}
.party[data-motion=off] *,.party[data-motion=off] *::before,.party[data-motion=off] *::after{animation:none!important;transition:none!important}
@media(max-width:600px){.bomb-stage{width:145px;margin:8px auto}.bomb-stage .bomb{margin:14px auto 8px}.beat{height:16px}.game-controls{margin-top:14px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.burst{display:none}}
.explosion-choice{margin-top:14px}.explosion-choice select{border-color:#557fa8}