*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{background:#0b1220;color:#f8fafc;font:20px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
 padding:env(safe-area-inset-top) 14px calc(76px + env(safe-area-inset-bottom));touch-action:manipulation;overflow-x:hidden}
button,input{font:inherit;color:inherit}
button{cursor:pointer;border:0;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.top{display:flex;align-items:center;justify-content:center;padding:10px 0 4px}
.top h1{margin:0;font-size:1.15rem;font-weight:800;letter-spacing:.02em;color:#cbd5e1}
main{display:flex;flex-direction:column;gap:14px;max-width:1200px;margin:0 auto}
.talk{display:flex;flex-direction:column;align-items:center;gap:12px}
.list{order:-1}
/* Big mic */
.mic{width:min(66vw,46vh,300px);aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
 background:radial-gradient(circle at 35% 30%,#fb923c,#ef4444 70%);box-shadow:0 12px 40px #ef444455,inset 0 -8px 20px #0003;
 transition:transform .15s,width .3s;margin-top:6px}
.mic:active{transform:scale(.96)}
.mic .ic{font-size:clamp(64px,22vw,120px);line-height:1}
.mic .lbl{font-size:1.3rem;font-weight:800}
.mic.on{background:radial-gradient(circle at 35% 30%,#4ade80,#16a34a 70%);animation:pulse 1.1s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 #22c55e99}100%{box-shadow:0 0 0 34px #22c55e00}}
.mic.off{display:none}
body.has-timers .mic{width:min(42vw,30vh,220px)}
body.has-timers .mic .ic{font-size:clamp(48px,14vw,90px)}
.say{margin:0;color:#94a3b8;font-size:1.1rem;text-align:center}
.heard{margin:0;min-height:1.4em;font-size:1.25rem;font-weight:700;text-align:center;color:#fde68a}
.heard.bad{color:#fca5a5}
/* typed fallback */
.typerow{display:flex;gap:10px;width:100%;max-width:640px}
.typerow input{flex:1;min-width:0;height:68px;border-radius:18px;border:3px solid #334155;background:#111a2e;padding:0 18px;font-size:1.4rem}
.typerow input:focus{outline:none;border-color:#f97316}
.go{height:68px;padding:0 26px;border-radius:18px;background:#22c55e;color:#052e16;font-weight:900;font-size:1.4rem}
.go:active,.q:active,.n:active{transform:scale(.96)}
.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.names{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;width:100%;max-width:640px}
.n{min-height:56px;padding:0 20px;border-radius:28px;background:#1e293b;border:3px solid #334155;font-size:1.2rem;font-weight:700}
.n.sel{background:#f97316;border-color:#fdba74;color:#1c0a00}
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;max-width:640px}
.q{height:72px;border-radius:20px;background:#2563eb;font-size:1.45rem;font-weight:900;box-shadow:inset 0 -5px 0 #0003}
/* timer cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.card{position:relative;background:#1e293b;border-radius:24px;padding:14px 18px 16px;border:3px solid #334155;overflow:hidden;animation:pop .3s}
@keyframes pop{from{transform:scale(.9);opacity:0}}
.card .nm{font-size:1.6rem;font-weight:900;padding-right:52px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .tm{font-size:clamp(3rem,13vw,4.2rem);font-weight:900;font-variant-numeric:tabular-nums;line-height:1.05;letter-spacing:-.02em}
.card .bar{height:12px;border-radius:6px;background:#0f172a;margin-top:8px;overflow:hidden}
.card .bar i{display:block;height:100%;background:linear-gradient(90deg,#f97316,#facc15);border-radius:6px;transition:width .3s linear}
.card .x{position:absolute;top:10px;right:10px;width:44px;height:44px;border-radius:50%;background:#334155;color:#cbd5e1;font-size:1.3rem;font-weight:900;line-height:44px;padding:0}
.card.soon{border-color:#f97316}
.card.ring{border-color:#ef4444;background:#7f1d1d;animation:flash 1s infinite}
@keyframes flash{50%{background:#b91c1c}}
.keep{margin:0 0 8px;text-align:center;color:#fde68a;font-size:1rem;font-weight:700}
/* alarm */
.alarm{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:env(safe-area-inset-top) 18px env(safe-area-inset-bottom);
 background:#991b1b;animation:abg 2s ease-in-out infinite}
.alarm[hidden]{display:none}
@keyframes abg{50%{background:#dc2626}}
.abox{width:100%;max-width:720px;display:flex;flex-direction:column;align-items:center;gap:2.2vh;text-align:center}
.bell{font-size:clamp(70px,13vh,140px);line-height:1;animation:ring .5s ease-in-out infinite alternate}
@keyframes ring{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
.aname{font-size:clamp(2.6rem,9vh,5rem);font-weight:900;text-transform:uppercase;line-height:1;word-break:break-word}
.amsg{font-size:clamp(1.4rem,4vh,2.2rem);font-weight:700;opacity:.95}
.stop{width:100%;height:min(30vh,260px);border-radius:36px;background:#fff;color:#b91c1c;font-size:clamp(3rem,10vh,6rem);font-weight:900;letter-spacing:.06em;box-shadow:0 14px 40px #0006}
.snooze{width:100%;height:min(14vh,120px);border-radius:28px;background:#ffffff2e;border:4px solid #fff9;color:#fff;font-size:clamp(1.8rem,5vh,2.8rem);font-weight:900}
.stop:active,.snooze:active{transform:scale(.97)}
/* toast */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(86px + env(safe-area-inset-bottom));z-index:50;background:#f8fafc;color:#0b1220;
 padding:12px 18px;border-radius:18px;font-weight:800;font-size:1.1rem;display:flex;gap:14px;align-items:center;box-shadow:0 8px 30px #0008;max-width:92vw}
.toast[hidden]{display:none}
.toast button{background:#2563eb;color:#fff;border-radius:12px;padding:10px 16px;font-weight:900}
/* house ad (same style as Party Persona / Mind Dump) */
.ad{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;align-items:center;gap:10px;min-height:58px;
 padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:#111827;border-top:1px solid #1f2937;color:#fff;text-decoration:none;font-size:1rem}
.ad b{color:#fde047}.ad small{margin-left:auto;opacity:.55;font-size:.7rem}
body.alarm-on .ad,body.alarm-on .toast{display:none}
body.alarm-on{overflow:hidden}
/* tablet / desktop: controls left, timers right */
@media (min-width:900px) and (min-aspect-ratio:1/1){
 main{flex-direction:row;align-items:flex-start;gap:28px}
 .talk{flex:0 0 46%;position:sticky;top:8px}
 .list{order:0;flex:1}
 .mic,body.has-timers .mic{width:min(34vh,280px)}
 .cards{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
 .quick{grid-template-columns:repeat(3,1fr)}
 .list:empty,.cards:empty{min-height:0}
}
@media (min-width:700px) and (max-aspect-ratio:1/1){ .quick{grid-template-columns:repeat(6,1fr)} }
@media (min-width:900px) and (min-aspect-ratio:1/1){
 body:not(.has-timers) .talk{flex:1;position:static}
 body:not(.has-timers) .list{display:none}
 body:not(.has-timers) .mic{width:min(38vh,300px)}
}
/* 3+ timers: compact one-line cards so the mic stays on screen */
body.many .cards{gap:10px}
body.many .card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;padding:10px 66px 12px 16px;border-radius:20px}
body.many .card .nm{font-size:1.35rem;padding-right:0}
body.many .card .tm{font-size:clamp(2.2rem,10vw,2.8rem)}
body.many .card .bar{grid-column:1/-1;height:9px;margin-top:4px}
body.many .card .x{top:50%;transform:translateY(-50%)}
@media (min-width:900px) and (min-aspect-ratio:1/1){
 .quick{grid-template-columns:repeat(6,1fr);max-width:820px}
 .q{height:64px;font-size:1.25rem}
 body.has-timers .quick{grid-template-columns:repeat(3,1fr)}
 body.has-timers .q{height:58px}
 body.has-timers .n{min-height:48px;padding:0 15px;font-size:1.05rem}
 body.has-timers .talk{gap:10px}
 body.has-timers .mic{width:min(30vh,240px)}
 body.has-timers .heard:empty{display:none}
 body.many .cards{grid-template-columns:1fr}
 .names{max-width:820px}
 .typerow{max-width:820px}
}
.quick,#names{display:none!important}