/* count.delia.love — MrJoy 数到 10000
   配色取自频道 banner：草绿 → 青绿 → 湖蓝，粉色点缀。 */

:root{
  --ink:#0d1b16;
  --paper:#ffffff;
  --accent:#ff7ab8;          /* banner 上的粉点 */
  --grass:#8fd14f;
  --mint:#3ec9a7;
  --lake:#39b6d8;
  --chrome-fg:rgba(255,255,255,.92);
  --chrome-dim:rgba(255,255,255,.62);
  --num:#ffffff;
  --num-shadow:0 .04em 0 rgba(0,0,0,.16), 0 .12em .35em rgba(0,0,0,.22);
  --bg:linear-gradient(125deg,var(--grass) 0%,var(--mint) 52%,var(--lake) 100%);
  --panel:rgba(255,255,255,.16);
  --stroke:rgba(0,0,0,.30);
  --font:ui-rounded,"SF Pro Rounded","Hiragino Maru Gothic ProN","Segoe UI Variable Display",
         "Segoe UI",system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
}

html[data-theme="dark"]{
  --bg:radial-gradient(120% 120% at 50% 0%,#18202b 0%,#080a0e 70%);
  --num:#ffffff;
  --chrome-fg:rgba(255,255,255,.88);
  --chrome-dim:rgba(255,255,255,.48);
  --panel:rgba(255,255,255,.09);
  --stroke:rgba(0,0,0,.45);
}
html[data-theme="light"]{
  --bg:#f4f7f9;
  --num:#101a22;
  --num-shadow:0 .03em 0 rgba(0,0,0,.06);
  --chrome-fg:rgba(16,26,34,.82);
  --chrome-dim:rgba(16,26,34,.5);
  --panel:rgba(16,26,34,.06);
  --stroke:rgba(0,0,0,.35);
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--chrome-fg);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  user-select:none;
}
body::after{ /* 暗角，让中间的数字更立得住 */
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(120% 100% at 50% 45%,transparent 55%,rgba(0,0,0,.22) 100%);
}
html[data-theme="light"] body::after{background:none}

#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:6}

/* ---------- 会自己隐藏的界面 ---------- */
.chrome{
  position:fixed;left:0;right:0;z-index:4;
  transition:opacity .45s ease, transform .45s ease;
}
.chrome-top{top:0;padding-top:calc(env(safe-area-inset-top) + clamp(10px,1.8vh,20px))}
.chrome-bottom{bottom:0;padding-bottom:calc(env(safe-area-inset-bottom) + clamp(10px,1.8vh,20px))}
body.hushed .chrome{opacity:0;transform:translateY(var(--hush,0));pointer-events:none}
.chrome-top{--hush:-8px}
.chrome-bottom{--hush:8px}

.chrome-top{
  display:flex;align-items:center;gap:clamp(10px,2vw,28px);
  padding-inline:clamp(14px,2.4vw,32px);
}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.doodle{width:clamp(30px,3.4vw,46px);height:auto;color:var(--chrome-dim);flex:0 0 auto}
.brand-text{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand-name{font-size:clamp(15px,1.9vw,24px);font-weight:800;letter-spacing:.01em}
.brand-handle{font-size:clamp(10px,1.05vw,13px);color:var(--chrome-dim);font-weight:600}

.tagline{
  flex:1 1 auto;text-align:center;color:var(--chrome-dim);
  font-size:clamp(11px,1.25vw,16px);font-weight:600;font-style:italic;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.meta{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px;min-width:clamp(120px,16vw,220px)}
.meta-count{font-size:clamp(12px,1.35vw,17px);font-weight:700;font-variant-numeric:tabular-nums}
.meta-count b{font-size:1.2em}
.meta-count span{color:var(--chrome-dim);margin-left:.35em;font-weight:600}
.bar{width:100%;height:6px;border-radius:99px;background:var(--panel);overflow:hidden}
.bar i{
  display:block;height:100%;width:0%;border-radius:99px;
  background:linear-gradient(90deg,#fff,var(--accent));
  transition:width .28s cubic-bezier(.22,1,.36,1);
}
html[data-theme="light"] .bar i{background:linear-gradient(90deg,var(--mint),var(--accent))}

/* ---------- 舞台 ---------- */
#stage{
  position:fixed;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(12px,4.5vh,44px) clamp(12px,3vw,40px);
  gap:clamp(2px,1vh,14px);
}

#numberWrap{
  flex:1 1 auto;min-height:0;width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}

#number{
  display:flex;align-items:center;justify-content:center;
  color:var(--num);
  font-weight:800;
  line-height:1;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums lining-nums;
  text-shadow:var(--num-shadow);
  font-size:120px;               /* JS 会覆盖 */
  will-change:transform;
}
#number.bump{animation:bump .16s cubic-bezier(.3,1.6,.5,1)}
@keyframes bump{from{transform:scale(.955)}to{transform:scale(1)}}

#words{
  margin-top:clamp(4px,1.4vh,18px);
  color:var(--chrome-dim);
  font-size:clamp(12px,2.4vh,30px);
  font-weight:700;letter-spacing:.01em;text-align:center;
  max-width:92vw;
  transition:opacity .2s ease;
}
body.no-words #words{opacity:0;pointer-events:none}

#blocks{
  flex:0 0 auto;width:100%;
  height:clamp(70px,22vh,250px);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .25s ease;
}
#blocks svg{width:100%;height:100%;overflow:visible}
body.no-blocks #blocks{opacity:0;height:0}

.blk-label{
  fill:var(--chrome-dim);
  font-family:var(--font);
  font-weight:700;
}

/* ---------- 底部按键提示 ---------- */
.chrome-bottom{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding-inline:clamp(14px,2.4vw,32px);
}
.keys{display:flex;flex-wrap:wrap;justify-content:center;gap:6px clamp(10px,1.6vw,22px);
  font-size:clamp(10px,1.1vw,14px);font-weight:600;color:var(--chrome-dim)}
.keys span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
kbd{
  font-family:inherit;font-size:.92em;font-weight:700;line-height:1;
  padding:.28em .5em;border-radius:6px;
  background:var(--panel);color:var(--chrome-fg);
  border:1px solid rgba(255,255,255,.18);
}
html[data-theme="light"] kbd{border-color:rgba(0,0,0,.1)}
.tip{font-size:clamp(9px,1vw,12px);color:var(--chrome-dim);opacity:.75}

/* ---------- 提示条 ---------- */
.toast{
  position:fixed;left:50%;bottom:clamp(16px,6vh,60px);transform:translateX(-50%);
  z-index:8;padding:.6em 1.1em;border-radius:99px;
  background:rgba(0,0,0,.55);color:#fff;backdrop-filter:blur(10px);
  font-size:clamp(12px,1.4vw,17px);font-weight:700;
  animation:toastIn .2s ease;
}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,8px)}}

/* ---------- 跳转面板 ---------- */
.sheet{
  position:fixed;inset:0;z-index:9;display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.45);backdrop-filter:blur(6px);
}
.sheet-card{
  background:#fff;color:#0d1b16;border-radius:20px;padding:24px;
  width:min(360px,86vw);box-shadow:0 24px 60px rgba(0,0,0,.35);
  display:flex;flex-direction:column;gap:14px;
}
.sheet-card label{font-size:16px;font-weight:800}
.sheet-card input{
  font-family:var(--font);font-size:30px;font-weight:800;text-align:center;
  padding:.3em;border-radius:12px;border:2px solid #d8e0e4;background:#f7fafb;color:inherit;
  font-variant-numeric:tabular-nums;width:100%;
}
.sheet-card input:focus{outline:none;border-color:var(--mint)}
.sheet-actions{display:flex;gap:10px;justify-content:flex-end}
.sheet-actions button{
  font-family:var(--font);font-size:15px;font-weight:800;cursor:pointer;
  padding:.6em 1.3em;border-radius:99px;border:0;background:#eef2f4;color:#0d1b16;
}
.sheet-actions .primary{background:linear-gradient(120deg,var(--mint),var(--lake));color:#fff}

/* ---------- 整千的庆祝 ---------- */
.burst{
  position:fixed;inset:0;z-index:7;display:flex;align-items:center;justify-content:center;
  pointer-events:none;
  font-size:clamp(28px,7vw,110px);font-weight:800;color:#fff;
  text-shadow:0 .06em .2em rgba(0,0,0,.35);
  animation:burst 1.5s cubic-bezier(.2,1,.3,1) forwards;
}
@keyframes burst{
  0%{opacity:0;transform:scale(.7)}
  16%{opacity:1;transform:scale(1.04)}
  70%{opacity:1;transform:scale(1.04)}
  100%{opacity:0;transform:scale(1.12)}
}

@media (max-width:720px){
  .tagline{display:none}
  .keys span:nth-child(n+5){display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}