:root{
  --cream:#FFF3E0;
  --peach:#F6D9B8;
  --brick:#E63329;
  --mustard:#FFC42E;
  --ink:#2B1B3D;
  --mint:#17B8A6;
  --accent:#17B8A6;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100%;
  font-family:'Cairo',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;
  color:var(--ink);
  background-color:var(--cream);
  background-image:radial-gradient(var(--peach) 1.7px,transparent 1.8px);
  background-size:15px 15px;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
  user-select:none;
  -webkit-user-select:none;
  transition:background-color .45s ease;
}
body.ultra{
  background-color:#FFE1C8;
  background-image:radial-gradient(#F2B498 1.7px,transparent 1.8px);
}

input,textarea{user-select:text;-webkit-user-select:text}

button{
  font-family:inherit;
  cursor:pointer;
  color:var(--ink);
}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============ shell ============ */
.app{
  --shake:6px;
  max-width:520px;
  margin:0 auto;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:10px 14px 16px;
  will-change:transform;
}
.app.shaking{animation:shakeX .52s cubic-bezier(.36,.07,.19,.97)}

#app.fear-1{--accent:#17B8A6}
#app.fear-2{--accent:#3AC48B}
#app.fear-3{--accent:#FFC42E}
#app.fear-4{--accent:#F4711F}
#app.fear-5{--accent:#E63329}

/* ============ topbar ============ */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex:0 0 auto;
}
.brand{display:flex;align-items:center;gap:8px;min-width:0}
.brand h1{
  margin:0;
  font-size:23px;
  font-weight:900;
  line-height:1;
  letter-spacing:0;
  white-space:nowrap;
}
.brand-mark{
  width:34px;height:34px;flex:0 0 auto;
  display:grid;place-items:center;
  background:var(--brick);
  color:#fff;
  font-weight:900;
  font-size:21px;
  line-height:1;
  border:3px solid var(--ink);
  border-radius:12px;
  box-shadow:3px 3px 0 var(--ink);
  transform:rotate(-7deg);
}
#app.fear-5 .brand-mark{animation:bump .6s ease-out infinite}

.fear{
  display:flex;align-items:center;gap:6px;
  background:#fff;
  border:3px solid var(--ink);
  border-radius:999px;
  padding:3px 10px 3px 8px;
  box-shadow:3px 3px 0 var(--ink);
  flex:0 1 auto;
  min-width:0;
}
.fear-lbl{font-size:11px;font-weight:900;opacity:.75;white-space:nowrap}
.pips{display:flex;gap:3px}
.pips i{
  display:block;
  width:8px;height:15px;
  border-radius:4px;
  background:var(--peach);
  border:2px solid var(--ink);
  transition:background .2s ease,transform .2s ease;
}
.pips i.on{background:var(--accent);transform:scaleY(1.12)}

.icon-btn{
  width:44px;height:44px;flex:0 0 auto;
  display:grid;place-items:center;
  background:#fff;
  border:3px solid var(--ink);
  border-radius:14px;
  box-shadow:3px 3px 0 var(--ink);
  padding:0;
  transition:transform .1s ease,box-shadow .1s ease,background .2s ease;
}
.icon-btn svg{width:22px;height:22px}
.icon-btn .slash{opacity:0;transition:opacity .15s}
.icon-btn .wave{opacity:1;transition:opacity .15s}
.icon-btn.muted{background:var(--mint);color:#fff}
.icon-btn.muted .slash{opacity:1}
.icon-btn.muted .wave{opacity:0}
.icon-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}

/* ============ stage / mascot ============ */
.stage{
  flex:1 1 auto;
  min-height:112px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  position:relative;
}
.mascot-wrap{
  position:relative;
  flex:1 1 auto;
  width:100%;
  min-height:90px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.mascot{
  height:100%;
  width:auto;
  max-height:100%;
  max-width:min(56vw,200px);
  object-fit:contain;
  animation:breathe 3.6s ease-in-out infinite;
  will-change:transform;
  filter:drop-shadow(0 6px 0 rgba(43,27,61,.16));
}
.mascot-wrap.charging .mascot{animation:jitter .09s linear infinite}
.mascot-wrap.screaming .mascot{animation:screamPop .55s ease-out}
.mascot-wrap.relief .mascot{animation:reliefSquash .5s ease-out}
.mascot-wrap.ultimate .mascot{filter:drop-shadow(0 0 18px var(--mustard)) drop-shadow(0 6px 0 rgba(43,27,61,.2))}

.face-fallback{
  display:none;
  width:110px;height:110px;
  border-radius:50% 50% 44% 44%;
  background:var(--peach);
  border:4px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);
  position:relative;
}
.face-fallback span{
  position:absolute;top:34%;width:14px;height:18px;border-radius:50%;
  background:var(--ink);
}
.face-fallback span:nth-child(1){right:24%}
.face-fallback span:nth-child(2){left:24%}
.face-fallback b{
  position:absolute;bottom:22%;right:50%;transform:translateX(50%);
  width:34px;height:20px;background:var(--ink);
  border-radius:0 0 40% 40%;
}
.mascot.failed{display:none}
.mascot.failed ~ .face-fallback{display:block}

.rings{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0}
.mascot-wrap.screaming .rings{opacity:1}
.rings i{
  position:absolute;
  width:88px;height:88px;
  border-radius:50%;
  border:4px solid var(--brick);
}
.mascot-wrap.screaming .rings i:nth-child(1){animation:ringOut .75s ease-out forwards}
.mascot-wrap.screaming .rings i:nth-child(2){animation:ringOut .75s ease-out .12s forwards;border-color:var(--mustard)}
.mascot-wrap.screaming .rings i:nth-child(3){animation:ringOut .75s ease-out .24s forwards}

.mascot-tag{
  display:flex;align-items:baseline;gap:6px;
  flex:0 0 auto;
}
.mascot-tag span{font-weight:900;font-size:16px}
.mascot-tag em{
  font-style:normal;font-size:12px;font-weight:700;opacity:.6;
}

/* ============ picker ============ */
.picker{
  display:flex;
  gap:8px;
  justify-content:center;
  flex:0 0 auto;
}
.pick{
  flex:1 1 0;
  max-width:90px;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1px;
  background:#fff;
  border:3px solid var(--ink);
  border-radius:16px;
  box-shadow:3px 3px 0 var(--ink);
  padding:5px 2px 4px;
  transition:transform .12s ease,box-shadow .12s ease,background .2s ease;
}
.pick img{width:30px;height:30px;object-fit:contain;pointer-events:none}
.pick span{font-size:11px;font-weight:900;line-height:1.2;white-space:nowrap}
.pick.active{
  background:var(--mustard);
  transform:translate(-2px,-2px);
  box-shadow:5px 5px 0 var(--ink);
}
.pick:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink)}

/* ============ sound mode chips ============ */
.modes{
  display:flex;
  gap:6px;
  flex:0 0 auto;
}
.mode{
  flex:1 1 0;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:7px 4px;
  background:#fff;
  color:var(--ink);
  border:3px solid var(--ink);
  border-radius:14px;
  box-shadow:3px 3px 0 var(--ink);
  font-family:inherit;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  transition:transform .1s ease,box-shadow .1s ease,background .2s ease,color .2s ease;
}
.mode svg{width:16px;height:16px;flex:0 0 auto}
.mode span{overflow:hidden;text-overflow:ellipsis}
.mode:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.mode.active{background:var(--brick);color:#fff}
.mode.active svg{color:var(--mustard)}
.mode:focus-visible{outline:3px solid var(--mint);outline-offset:2px}

/* ============ scream button ============ */
.scream-zone{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
}
.scream-btn{
  position:relative;
  width:min(56vw,188px);
  aspect-ratio:1/1;
  border-radius:50%;
  border:5px solid var(--ink);
  padding:0;
  background:radial-gradient(circle at 50% 30%,#FF7A6B 0%,var(--brick) 52%,#B7241C 100%);
  box-shadow:0 10px 0 var(--ink);
  display:grid;
  place-items:center;
  transition:transform .1s ease,box-shadow .1s ease;
  touch-action:none;
  outline:none;
}
.scream-btn::before{
  content:'';
  position:absolute;
  top:9%;left:17%;
  width:38%;height:25%;
  border-radius:50%;
  background:rgba(255,255,255,.5);
  filter:blur(1px);
  pointer-events:none;
}
.scream-btn::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  background:radial-gradient(circle at 50% 58%,rgba(255,196,46,.95),rgba(255,196,46,0) 66%);
  opacity:var(--fill,0);
  transition:opacity .07s linear;
  pointer-events:none;
}
.scream-btn:focus-visible{outline:4px solid var(--mint);outline-offset:4px}
.scream-btn.pressed{transform:translateY(4px);box-shadow:0 6px 0 var(--ink)}
.scream-btn.boom{animation:bump .45s ease-out}

.ring{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transform:rotate(-90deg);
  overflow:visible;
  pointer-events:none;
}
.ring-track{fill:none;stroke:rgba(43,27,61,.3);stroke-width:9}
.ring-fill{
  fill:none;
  stroke:var(--mustard);
  stroke-width:9;
  stroke-linecap:round;
  stroke-dasharray:565.5;
  stroke-dashoffset:565.5;
}

.btn-inner{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  pointer-events:none;
  padding-bottom:4px;
}
.bolt{
  width:32px;height:32px;
  fill:var(--mustard);
  stroke:var(--ink);
  stroke-width:1.4;
  stroke-linejoin:round;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.18));
}
.btn-label{
  font-size:31px;
  font-weight:900;
  color:#fff;
  line-height:1;
  text-shadow:0 3px 0 rgba(43,27,61,.45);
}
.btn-hint{
  font-size:11px;
  font-weight:700;
  color:#FFE9C6;
  margin-top:4px;
}

.hint{
  margin:0;
  font-size:11.5px;
  font-weight:700;
  opacity:.62;
  text-align:center;
  max-width:280px;
  line-height:1.4;
}

/* ============ card ============ */
.card{
  background:#fff;
  border:4px solid var(--ink);
  border-radius:22px;
  box-shadow:6px 6px 0 var(--ink);
  padding:10px;
  flex:0 0 auto;
}
.phrase-row{display:flex;gap:8px;align-items:center}
#phrase{
  flex:1 1 auto;
  min-width:0;
  font-family:inherit;
  font-weight:900;
  font-size:18px;
  color:var(--ink);
  background:var(--cream);
  border:3px solid var(--ink);
  border-radius:14px;
  padding:9px 12px;
  line-height:1.3;
}
#phrase::placeholder{color:#B2A294;font-weight:700;font-size:15px}
#phrase:focus{outline:none;box-shadow:0 0 0 4px rgba(23,184,166,.32)}

.mic-btn{
  width:52px;height:52px;flex:0 0 auto;
  display:grid;place-items:center;
  background:var(--mint);
  color:#fff;
  border:3px solid var(--ink);
  border-radius:16px;
  box-shadow:3px 3px 0 var(--ink);
  padding:0;
  transition:transform .1s ease,box-shadow .1s ease,background .2s ease;
}
.mic-btn svg{width:24px;height:24px}
.mic-btn .ic{display:none}
.mic-btn[data-state="idle"] .ic-mic{display:block}
.mic-btn[data-state="recording"] .ic-stop{display:block}
.mic-btn[data-state="busy"] .ic-busy{display:block;animation:spin .9s linear infinite}
.mic-btn[data-state="confirm"] .ic-check{display:block}
.mic-btn[data-state="recording"]{background:var(--brick);animation:pulse .95s ease-in-out infinite}
.mic-btn[data-state="confirm"]{background:var(--mustard);color:var(--ink)}
.mic-btn[data-state="busy"]{background:#9AA6A4}
.mic-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}

.voice-row{
  display:flex;
  gap:8px;
  align-items:center;
  margin-top:8px;
}
.prep-btn{
  flex:1 1 auto;
  min-width:0;
  font-size:14.5px;
  font-weight:900;
  padding:9px 8px;
  border:3px solid var(--ink);
  border-radius:14px;
  background:var(--mustard);
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .1s ease,box-shadow .1s ease,background .2s ease;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.prep-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.prep-btn:disabled{
  background:#EBE3D8;
  color:#8C8290;
  box-shadow:3px 3px 0 #BDB2A6;
  cursor:default;
}
.prep-btn.busy{background:#F6D9B8}

.vol{
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 0 108px;
  min-width:0;
}
.vol-ico{width:18px;height:18px;flex:0 0 auto;opacity:.7}
#volume{
  width:100%;
  min-width:0;
  accent-color:var(--brick);
  height:26px;
}

.status{
  margin:7px 2px 0;
  font-size:12px;
  font-weight:700;
  line-height:1.5;
  color:#635274;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  min-height:18px;
}
.status .st-link{
  font-size:12px;
  font-weight:900;
  color:var(--ink);
  background:var(--mint);
  border:2px solid var(--ink);
  border-radius:999px;
  padding:2px 10px;
  text-decoration:none;
  box-shadow:2px 2px 0 var(--ink);
}
.status .st-btn{
  font-size:12px;
  font-weight:900;
  color:var(--ink);
  background:var(--mustard);
  border:2px solid var(--ink);
  border-radius:999px;
  padding:2px 10px;
  box-shadow:2px 2px 0 var(--ink);
}

/* ============ footer ============ */
.foot{
  display:flex;
  gap:8px;
  align-items:center;
  flex:0 0 auto;
}
.sneak-btn{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:14px;
  font-weight:900;
  padding:10px 12px;
  background:#fff;
  border:3px solid var(--ink);
  border-radius:16px;
  box-shadow:3px 3px 0 var(--ink);
  transition:transform .1s ease,box-shadow .1s ease,background .2s ease,color .2s ease;
}
.sneak-btn .dot{
  width:11px;height:11px;border-radius:50%;
  background:var(--mint);
  border:2px solid var(--ink);
  flex:0 0 auto;
}
.sneak-btn.on{background:var(--ink);color:var(--mustard)}
.sneak-btn.on .dot{background:var(--mustard)}
.sneak-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.mini-btn{
  width:46px;height:44px;flex:0 0 auto;
  display:grid;place-items:center;
  background:#fff;
  border:3px solid var(--ink);
  border-radius:14px;
  box-shadow:3px 3px 0 var(--ink);
  padding:0;
}
.mini-btn svg{width:22px;height:22px}
.mini-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}

/* ============ overlays ============ */
.overlay{
  position:fixed;
  inset:0;
  z-index:60;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(43,27,61,.74);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.overlay.hidden{display:none}

.panel{
  width:100%;
  max-width:380px;
  max-height:88dvh;
  overflow-y:auto;
  background:var(--cream);
  border:4px solid var(--ink);
  border-radius:26px;
  box-shadow:8px 8px 0 var(--ink);
  padding:20px 18px 16px;
  text-align:center;
  position:relative;
  animation:popIn .35s cubic-bezier(.2,1.4,.5,1);
}
.panel-badge{
  display:inline-block;
  background:var(--brick);
  color:#fff;
  font-size:12px;
  font-weight:900;
  padding:3px 12px;
  border:3px solid var(--ink);
  border-radius:999px;
  box-shadow:3px 3px 0 var(--ink);
  transform:rotate(-3deg);
  margin-bottom:10px;
}
.panel h2{
  margin:0 0 12px;
  font-size:26px;
  font-weight:900;
  line-height:1.25;
}
.warn-list{
  text-align:right;
  margin:0 0 16px;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.warn-list li{
  position:relative;
  padding-right:22px;
  font-size:13.5px;
  font-weight:700;
  line-height:1.55;
  color:#4A3B5C;
}
.warn-list li::before{
  content:'';
  position:absolute;
  right:4px;top:8px;
  width:8px;height:8px;
  border-radius:50%;
  background:var(--brick);
  border:2px solid var(--ink);
}
.big-btn{
  width:100%;
  font-size:17px;
  font-weight:900;
  padding:13px;
  background:var(--brick);
  color:#fff;
  border:4px solid var(--ink);
  border-radius:18px;
  box-shadow:5px 5px 0 var(--ink);
  transition:transform .1s ease,box-shadow .1s ease;
}
.big-btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.panel-foot{
  margin:12px 0 0;
  font-size:11.5px;
  font-weight:700;
  opacity:.62;
  line-height:1.5;
}

.overlay-count{
  background:radial-gradient(circle at 50% 38%,#48335F 0%,#2B1B3D 72%);
}
.count-inner{text-align:center;padding:10px}
.count-top{
  margin:0 0 6px;
  color:#FFE9C6;
  font-size:15px;
  font-weight:900;
}
.count-num{
  font-size:clamp(96px,40vw,168px);
  font-weight:900;
  line-height:.95;
  color:var(--mustard);
  text-shadow:0 10px 0 rgba(0,0,0,.35);
}
.count-num.pop{animation:bump .55s ease-out}
.count-sub{
  margin:10px 0 0;
  color:#C7B4DE;
  font-size:13px;
  font-weight:700;
}

.flash{
  position:fixed;
  inset:0;
  z-index:70;
  background:#fff;
  opacity:0;
  pointer-events:none;
}
.flash.on{animation:flashOut .34s ease-out forwards}

.toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  z-index:80;
  background:var(--ink);
  color:#FFF3E0;
  font-size:13px;
  font-weight:700;
  padding:10px 18px;
  border-radius:999px;
  box-shadow:4px 4px 0 rgba(0,0,0,.3);
  max-width:88vw;
  text-align:center;
  line-height:1.4;
  pointer-events:none;
}
.toast.hidden{display:none}

/* ============ animations ============ */
@keyframes breathe{
  0%,100%{transform:scale(1) rotate(0deg)}
  50%{transform:scale(1.035) rotate(-1deg)}
}
@keyframes jitter{
  0%{transform:translate(-2px,1px) scale(1.02)}
  50%{transform:translate(2px,-2px) scale(1.055)}
  100%{transform:translate(-1px,1px) scale(1.03)}
}
@keyframes screamPop{
  0%{transform:scale(1)}
  25%{transform:scale(1.14) rotate(-3deg)}
  60%{transform:scale(1.06) rotate(2deg)}
  100%{transform:scale(1)}
}
@keyframes reliefSquash{
  0%{transform:scale(1.06)}
  45%{transform:scale(.94)}
  100%{transform:scale(1)}
}
@keyframes ringOut{
  0%{transform:scale(.55);opacity:.9}
  100%{transform:scale(2.5);opacity:0}
}
@keyframes bump{
  0%{transform:scale(1)}
  35%{transform:scale(1.08)}
  100%{transform:scale(1)}
}
@keyframes popIn{
  0%{transform:scale(.86) translateY(12px);opacity:0}
  100%{transform:scale(1) translateY(0);opacity:1}
}
@keyframes flashOut{
  0%{opacity:.8}
  100%{opacity:0}
}
@keyframes shakeX{
  0%,100%{transform:translateX(0)}
  15%{transform:translateX(var(--shake))}
  32%{transform:translateX(calc(var(--shake) * -1))}
  50%{transform:translateX(calc(var(--shake) * .65))}
  70%{transform:translateX(calc(var(--shake) * -.4))}
  86%{transform:translateX(calc(var(--shake) * .2))}
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.07)}
}

/* ============ responsive ============ */
@media (max-height:720px){
  .hint{display:none}
  .mascot-tag{display:none}
  .app{gap:6px;padding-top:8px}
}
@media (max-height:600px){
  .brand h1{font-size:19px}
  .brand-mark{width:29px;height:29px;font-size:17px;border-radius:10px}
  .scream-btn{width:min(46vw,146px)}
  .btn-label{font-size:24px}
  .bolt{width:24px;height:24px}
  .btn-hint{font-size:10px;margin-top:2px}
  .pick img{width:24px;height:24px}
  .pick span{font-size:10px}
  .mode{font-size:10.5px;padding:6px 3px;border-radius:12px;gap:3px}
  .mode svg{width:14px;height:14px}
  .stage{min-height:84px}
  .card{padding:8px}
  #phrase{font-size:16px;padding:7px 10px}
  .mic-btn{width:46px;height:46px}
  .foot .sneak-btn{font-size:12.5px;padding:8px}
  .mini-btn{height:40px}
}
@media (min-width:600px){
  .brand h1{font-size:27px}
  .btn-label{font-size:34px}
  .stage{min-height:180px}
}

@media (prefers-reduced-motion:reduce){
  .mascot,.mascot-wrap.charging .mascot,.mascot-wrap.screaming .mascot,.mascot-wrap.relief .mascot,
  .app.shaking,.scream-btn.boom,.mic-btn,.rings i,.count-num.pop,#app.fear-5 .brand-mark{
    animation:none !important;
  }
  .flash.on{animation-duration:.01s}
}