/* Count Quick — layout is a fixed-height column: HUD / timer / stage.
   Only the stage flexes, so the timer never moves while you are reading it. */

:root{
  --bg:#140f26;
  --bg2:#1d1636;
  --ink:#efe9ff;
  --dim:#a294c9;
  --line:#33265c;
  --hot:#ffd166;
  --good:#4ade80;
  --bad:#fb7185;
  --burn:#4a2040;
  --pad:clamp(8px,2vw,18px);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

html,body{height:100%;overflow:hidden}

body{
  background:radial-gradient(120% 90% at 50% -10%,#2a1f4d 0%,var(--bg) 55%,#0d0a1a 100%);
  color:var(--ink);
  font-family:ui-rounded,"Segoe UI Variable Display","Segoe UI",Inter,system-ui,-apple-system,sans-serif;
  font-variant-numeric:tabular-nums;
  overscroll-behavior:none;
  touch-action:manipulation;
  user-select:none;-webkit-user-select:none;
}

#app{
  position:fixed;inset:0;
  display:flex;flex-direction:column;
  padding:max(var(--pad),env(safe-area-inset-top)) var(--pad)
          max(var(--pad),env(safe-area-inset-bottom));
  gap:clamp(6px,1.4vh,12px);
}

/* ============================ HUD ============================ */
#hud{
  flex:0 0 auto;
  display:flex;align-items:center;gap:clamp(8px,2.5vw,22px);
  font-size:clamp(9px,2.2vw,11px);letter-spacing:.14em;
}
.hud__cell{display:flex;flex-direction:column;line-height:1.05}
.hud__cell--wide{flex:1 1 auto}
.hud__cell--right{text-align:right}
.hud__k{color:var(--dim);font-weight:600}
.hud__v{font-size:clamp(15px,4.2vw,22px);font-weight:800;letter-spacing:0}
#hudStreak.hot{color:var(--hot)}

.iconbtn{
  flex:0 0 auto;width:34px;height:34px;border-radius:10px;
  background:rgba(255,255,255,.06);border:1px solid var(--line);
  color:var(--dim);font-size:15px;cursor:pointer;
}
.iconbtn:hover{color:var(--ink)}
.iconbtn.off{opacity:.4;text-decoration:line-through}

/* ============================ TIMER ============================ */
/* The track is ALWAYS the full 15s. That is the entire trick: as your ceiling
   drops, the bar it can fill visibly gets shorter and the burnt zone eats it. */
#timer{flex:0 0 auto}

.timer__top{
  display:flex;align-items:baseline;gap:6px;
  font-size:clamp(9px,2.2vw,11px);letter-spacing:.12em;color:var(--dim);
  margin-bottom:5px;
}
.timer__now{font-size:clamp(20px,5.6vw,30px);font-weight:800;color:var(--ink);letter-spacing:0}
.timer__now.warn{color:var(--hot)}
.timer__now.crit{color:var(--bad);animation:pulse .5s ease-in-out infinite}
.timer__unit{font-size:clamp(9px,2.2vw,11px)}
.timer__spacer{flex:1 1 auto}
.timer__caplabel{text-align:right;font-weight:600}
.timer__caplabel b{display:block;font-size:clamp(13px,3.4vw,17px);color:var(--hot);letter-spacing:0}

.timer__track{
  position:relative;height:clamp(26px,6.4vh,40px);
  background:#0c0819;border:1px solid var(--line);border-radius:10px;overflow:hidden;
}

/* burnt = the slice between your ceiling and the original 15s. Never coming back. */
.timer__burnt{
  position:absolute;top:0;right:0;bottom:0;width:0;
  background:
    repeating-linear-gradient(-45deg,rgba(251,113,133,.20) 0 6px,transparent 6px 12px),
    linear-gradient(90deg,rgba(74,32,64,.55),rgba(74,32,64,.85));
  border-left:1px dashed rgba(251,113,133,.55);
  transition:width .45s cubic-bezier(.22,1,.36,1);
}

.timer__fill{
  position:absolute;top:0;left:0;bottom:0;width:100%;
  background:linear-gradient(90deg,#7c3aed 0%,#a855f7 45%,#22d3ee 100%);
  box-shadow:0 0 18px rgba(168,85,247,.5) inset;
}
.timer__fill.warn{background:linear-gradient(90deg,#d97706,#fbbf24 60%,#fde68a)}
.timer__fill.crit{background:linear-gradient(90deg,#be123c,#fb7185 70%,#fecdd3)}

/* the ceiling marker itself */
.timer__cap{
  position:absolute;top:-2px;bottom:-2px;width:0;
  border-right:3px solid var(--hot);
  transition:left .45s cubic-bezier(.22,1,.36,1);
  filter:drop-shadow(0 0 6px rgba(255,209,102,.85));
}
.timer__cap i{
  position:absolute;top:-1px;right:-5px;width:9px;height:9px;background:var(--hot);
  border-radius:2px;transform:rotate(45deg);
}

/* every previous ceiling leaves a tick — the staircase down */
.timer__ghosts{position:absolute;inset:0;pointer-events:none}
.timer__ghosts i{
  position:absolute;top:0;bottom:0;width:1px;background:rgba(255,209,102,.22);
}

/* the second you clawed back, shown where you earned it */
.timer__gain{
  position:absolute;top:0;bottom:0;width:0;opacity:0;transform-origin:left center;
  background:linear-gradient(90deg,rgba(74,222,128,.25),rgba(74,222,128,.75));
  border-right:2px solid var(--good);
}
.timer__gain.go{animation:gain 1.05s ease-out}
@keyframes gain{
  0%{opacity:0;transform:scaleX(.2)}
  22%{opacity:1;transform:scaleX(1)}
  100%{opacity:0;transform:scaleX(1)}
}

/* the moment-of-guess flash */
.timer__snap{
  position:absolute;top:0;bottom:0;width:3px;background:#fff;opacity:0;
  box-shadow:0 0 14px #fff;
}
.timer__snap.go{animation:snap .55s ease-out}
@keyframes snap{
  0%{opacity:1;transform:scaleY(1.5)}
  100%{opacity:0;transform:scaleY(1)}
}
@keyframes pulse{50%{opacity:.45}}

.timer__scale{
  display:flex;justify-content:space-between;
  font-size:9px;color:#5f5289;margin-top:3px;letter-spacing:.1em;
}
.timer__note{
  font-size:clamp(9px,2.3vw,11.5px);color:var(--dim);margin-top:3px;min-height:1.2em;
  transition:color .2s;
}
.timer__note.flash{color:var(--hot);font-weight:700}

/* ============================ STAGE ============================ */
#stage{position:relative;flex:1 1 auto;min-height:0}
#cv{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:pointer}

#phaseTag{
  position:absolute;top:6px;left:50%;transform:translateX(-50%);
  font-size:clamp(9px,2.2vw,11px);letter-spacing:.18em;color:var(--dim);
  pointer-events:none;text-transform:uppercase;
}

#toastLayer{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.toast{
  position:absolute;left:50%;transform:translateX(-50%);
  font-weight:800;font-size:clamp(15px,4.4vw,24px);
  text-shadow:0 2px 14px rgba(0,0,0,.7);
  animation:rise 1s ease-out forwards;white-space:nowrap;
}
.toast.good{color:var(--good)}
.toast.bad{color:var(--bad)}
.toast.lock{color:var(--hot)}
@keyframes rise{
  0%{opacity:0;transform:translate(-50%,14px) scale(.85)}
  18%{opacity:1;transform:translate(-50%,0) scale(1.06)}
  100%{opacity:0;transform:translate(-50%,-46px) scale(1)}
}

/* ============================ COUNT QUICK ============================ */
#quick{
  position:fixed;left:clamp(6px,2vw,20px);
  bottom:calc(max(var(--pad),env(safe-area-inset-bottom)) - 6px);
  display:flex;align-items:flex-end;gap:8px;
  pointer-events:none;z-index:40;
  transform:translateY(130%);opacity:0;
  transition:transform .42s cubic-bezier(.22,1.4,.4,1),opacity .3s;
}
#quick.show{transform:translateY(0);opacity:1}
#quickAvatar{
  width:clamp(52px,13vw,84px);aspect-ratio:100/110;flex:0 0 auto;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.55));
  animation:bobber 2.4s ease-in-out infinite;
}
@keyframes bobber{50%{transform:translateY(-5px) rotate(-2deg)}}
#quickBubble{
  order:2;
  max-width:min(58vw,340px);
  background:linear-gradient(180deg,#fffdf5,#ffeec9);
  color:#2a1c4d;border-radius:14px;padding:8px 12px;
  font-size:clamp(11px,2.8vw,14.5px);font-weight:700;line-height:1.3;
  box-shadow:0 8px 22px rgba(0,0,0,.45);
  position:relative;margin-bottom:10px;
}
#quickBubble::after{
  content:"";position:absolute;left:-7px;bottom:9px;
  border:7px solid transparent;border-right-color:#fff6e0;border-left:0;
}

/* ============================ OVERLAYS ============================ */
.ov{
  position:fixed;inset:0;z-index:60;
  display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(10,7,20,.86);backdrop-filter:blur(7px);
  overflow-y:auto;
}
.ov--hidden{display:none}
.ov__card{
  width:min(520px,100%);
  background:linear-gradient(180deg,#241a44,#181030);
  border:1px solid var(--line);border-radius:18px;
  padding:clamp(18px,4.5vw,30px);text-align:center;
  box-shadow:0 24px 70px rgba(0,0,0,.6);
}
.ov__title{
  font-size:clamp(34px,10vw,54px);font-weight:900;letter-spacing:-.02em;line-height:1;
  background:linear-gradient(92deg,#c4b5fd,#22d3ee 60%,#ffd166);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ov__title span{display:inline-block}
.ov__title--sm{font-size:clamp(26px,7vw,38px)}
.ov__tag{margin:10px 0 14px;color:var(--ink);font-size:clamp(14px,3.6vw,17px)}
.ov__deadline{color:var(--dim);margin-bottom:14px;font-size:clamp(12px,3.2vw,14px)}

.ov__rules{
  text-align:left;list-style:none;display:flex;flex-direction:column;gap:9px;
  margin:0 0 18px;font-size:clamp(11.5px,3vw,14px);color:#cdc0ee;line-height:1.45;
}
.ov__rules li{padding-left:16px;position:relative}
.ov__rules li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;
  border-radius:2px;background:var(--hot);transform:rotate(45deg)}
.ov__rules b{color:var(--ink)}

.btn{
  width:100%;padding:13px 20px;border:0;border-radius:12px;cursor:pointer;
  font:inherit;font-weight:800;font-size:clamp(15px,4vw,18px);color:#1a1030;
  background:linear-gradient(92deg,#ffd166,#fca5f1 55%,#a5f3fc);
  box-shadow:0 8px 22px rgba(255,209,102,.28);
}
.btn:active{transform:translateY(1px)}
.ov__foot{margin-top:11px;font-size:11px;color:#6f629c;letter-spacing:.05em}
kbd{background:#2c2150;border:1px solid var(--line);border-radius:4px;padding:1px 5px;font-size:10px}

.go__stats{display:flex;gap:10px;margin-bottom:16px}
.go__stats>div{
  flex:1;background:rgba(255,255,255,.05);border:1px solid var(--line);
  border-radius:12px;padding:9px 4px;
}
.go__stats span{display:block;font-size:clamp(19px,5.4vw,26px);font-weight:800}
.go__stats label{font-size:9px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase}

.go__stair{margin-bottom:16px}
.go__stairlab{font-size:9.5px;letter-spacing:.14em;color:var(--dim);
  text-transform:uppercase;margin-bottom:5px}
#stairCv{width:100%;height:104px;display:block;
  background:#0c0819;border:1px solid var(--line);border-radius:10px}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}