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

:root{
  --accent:#ff7ab8;          /* banner 上的粉点 */
  --grass:#8fd14f;
  --mint:#3ec9a7;
  --lake:#39b6d8;
  --chrome-fg:rgba(255,255,255,.92);
  --chrome-dim:rgba(255,255,255,.62);
  --words:rgba(255,255,255,.88);
  --num-a:#ffffff;           /* 数字渐变：上 */
  --num-b:#eafaff;           /* 中 */
  --num-c:#b9e6ff;           /* 下 */
  --digit-color:#e5322d;     /* JS 按首位数字改这个 */
  --seed:var(--digit-color);
  --bg-overlay:linear-gradient(125deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,0) 44%,rgba(0,0,0,.26) 100%);
  --panel:rgba(255,255,255,.16);
  --ray:rgba(255,255,255,.075);
  --glow:rgba(255,255,255,.42);
  --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"]{
  --seed:#0a0d12;
  --bg-overlay:radial-gradient(120% 120% at 50% 0%,#1b2534 0%,#070a0e 72%);
  --chrome-fg:rgba(255,255,255,.88);
  --chrome-dim:rgba(255,255,255,.46);
  --words:rgba(255,255,255,.8);
  --num-a:#ffffff; --num-b:#e6f4ff; --num-c:#93d3ff;
  --panel:rgba(255,255,255,.09);
  --ray:rgba(255,255,255,.05);
  --glow:rgba(120,210,255,.35);
}
html[data-theme="light"]{
  --seed:#eef3f6;
  --bg-overlay:none;
  --chrome-fg:rgba(16,26,34,.82);
  --chrome-dim:rgba(16,26,34,.5);
  --words:rgba(16,26,34,.7);
  --num-a:#16323f; --num-b:#12202a; --num-c:#0b141b;
  --panel:rgba(16,26,34,.06);
  --ray:rgba(16,26,34,.035);
  --glow:rgba(62,201,167,.4);
}

/* 底色偏亮时（比如 3 的黄），白字读不出来，整套前景翻深 */
html.on-light[data-theme="joy"]{
  --chrome-fg:rgba(24,18,0,.86);
  --chrome-dim:rgba(24,18,0,.55);
  --words:rgba(28,20,0,.82);
  --num-a:#2f2200; --num-b:#3d2c02; --num-c:#5c4409;
  --panel:rgba(24,18,0,.10);
  --ray:rgba(24,18,0,.05);
  --glow:rgba(60,40,0,.35);
}
html.on-light[data-theme="joy"] #words{text-shadow:none}
html.on-light[data-theme="joy"] #number{
  filter:drop-shadow(0 .028em 0 rgba(255,255,255,.35))
         drop-shadow(0 .07em .12em rgba(0,0,0,.18));
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  background-color:var(--seed);
  background-image:var(--bg-overlay);
  transition:background-color .45s ease;
  color:var(--chrome-fg);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  user-select:none;
}

/* 会慢慢飘的几团光，页面不至于是块死背景 */
body::before{
  content:"";position:fixed;inset:-25%;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 38% at 22% 28%,rgba(255,255,255,.30),transparent 70%),
    radial-gradient(34% 34% at 78% 22%,rgba(255,255,255,.17),transparent 70%),
    radial-gradient(42% 42% at 62% 82%,rgba(0,0,0,.22),transparent 70%);
  filter:blur(40px);
  animation:drift 22s ease-in-out infinite alternate;
}
html[data-theme="light"] body::before{opacity:.35}
@keyframes drift{
  from{transform:translate3d(-3%,-2%,0) scale(1)}
  to  {transform:translate3d(3%,2%,0) scale(1.12)}
}

/* 暗角，让中间的数字更立得住 */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(120% 100% at 50% 45%,transparent 52%,rgba(0,0,0,.26) 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));
  box-shadow:0 0 10px 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);
}
/* 数字背后慢慢转的放射线 */
#stage::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:160vmax;height:160vmax;left:50%;top:46%;translate:-50% -50%;
  background:repeating-conic-gradient(from 0deg,var(--ray) 0deg 5deg,transparent 5deg 11deg);
  -webkit-mask:radial-gradient(closest-side,#000 18%,transparent 66%);
          mask:radial-gradient(closest-side,#000 18%,transparent 66%);
  animation:spin 90s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* 每按一下荡开的一圈波 */
#ring{
  position:fixed;left:50%;top:46%;translate:-50% -50%;z-index:1;pointer-events:none;
  width:46vmin;height:46vmin;border-radius:50%;
  border:.7vmin solid var(--glow);opacity:0;
}
#ring.go{animation:ring .55s cubic-bezier(.16,.9,.3,1)}
#ring.big{border-width:1.2vmin}
@keyframes ring{
  from{opacity:.5;transform:scale(.3)}
  to  {opacity:0;transform:scale(1.7)}
}

#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;
  font-weight:800;
  line-height:1;
  letter-spacing:-.02em;
  font-variant-numeric:tabular-nums lining-nums;
  font-size:120px;               /* JS 会覆盖 */
  filter:drop-shadow(0 .028em 0 rgba(0,0,0,.22))
         drop-shadow(0 .085em .13em rgba(0,0,0,.30));
  perspective:900px;
}
/* 一位一个格子，只有变了的那位才翻 */
.d{
  display:inline-block;
  background:linear-gradient(180deg,var(--num-a) 0%,var(--num-b) 46%,var(--num-c) 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  will-change:transform;
}
#number.party .d{
  background:linear-gradient(180deg,#fff 0%,#ffe27a 42%,#ff9ad5 100%);
  -webkit-background-clip:text;background-clip:text;
}
#number.party{animation:partyPop .6s cubic-bezier(.2,1.5,.35,1)}
@keyframes partyPop{
  0%{transform:scale(1)}
  30%{transform:scale(1.06)}
  100%{transform:scale(1)}
}
.d.roll{animation:rollUp .26s cubic-bezier(.2,1.35,.4,1)}
.d.roll.down{animation-name:rollDown}
@keyframes rollUp{
  0%{transform:translateY(-.3em) rotateX(78deg) scale(.88);opacity:.1}
  55%{opacity:1}
  100%{transform:none;opacity:1}
}
@keyframes rollDown{
  0%{transform:translateY(.3em) rotateX(-78deg) scale(.88);opacity:.1}
  55%{opacity:1}
  100%{transform:none;opacity:1}
}

#words{
  margin-top:clamp(6px,1.6vh,22px);
  color:var(--words);
  font-weight:800;
  letter-spacing:.005em;
  text-align:center;
  white-space:nowrap;
  font-size:40px;                /* JS 会覆盖 */
  text-shadow:0 .05em .16em rgba(0,0,0,.28);
  transition:opacity .2s ease;
}
html[data-theme="light"] #words{text-shadow:none}
body.no-words #words{opacity:0;pointer-events:none}

#blocks{
  flex:0 0 auto;width:100%;
  height:clamp(76px,25vh,270px);
  display:flex;align-items:center;justify-content:center;
}
#blocks svg{
  width:100%;height:100%;overflow:visible;
  animation:blkPop .3s cubic-bezier(.2,1.4,.4,1);
  /* 背景现在跟着首位数字变色，积木常和底色撞色（黄底黄积木）。
     先描一圈浅色把轮廓托出来，再压一层投影。 */
  filter:drop-shadow(0 0 .4vh rgba(255,255,255,.9))
         drop-shadow(0 .6vh .8vh rgba(0,0,0,.32));
}
@keyframes blkPop{
  from{transform:translateY(5%) scale(.9);opacity:.35}
  to  {transform:none;opacity:1}
}
body.no-blocks #blocks{display:none}

/* 10 以内那个小家伙：轻轻晃，还会眨眼 */
.figure{animation:bob 2.8s ease-in-out infinite}
@keyframes bob{
  0%,100%{transform:translateY(.5px)}
  50%    {transform:translateY(-.5px)}
}
.eyes{transform-box:fill-box;transform-origin:center;animation:blink 4.6s infinite}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}

/* ---------- 底部按键提示 ---------- */
.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}

/* ---------- 整千的庆祝 ---------- */
#flash{
  position:fixed;inset:0;z-index:5;pointer-events:none;opacity:0;
  background:radial-gradient(60% 60% at 50% 46%,#fff,rgba(255,255,255,0) 70%);
}
#flash.go{animation:flash .5s ease-out}
@keyframes flash{from{opacity:.75}to{opacity:0}}

.burst{
  position:fixed;inset:0;z-index:7;display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:clamp(10px,7vh,80px);
  pointer-events:none;
  font-size:clamp(26px,6.5vw,104px);font-weight:800;letter-spacing:-.02em;
  background:linear-gradient(180deg,#fff,#ffe9f5 45%,var(--accent));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 .05em .12em rgba(0,0,0,.4));
  animation:burst 1.6s cubic-bezier(.2,1,.3,1) forwards;
}
@keyframes burst{
  0%{opacity:0;transform:scale(.6) rotate(-4deg)}
  14%{opacity:1;transform:scale(1.06) rotate(1.5deg)}
  24%{transform:scale(1) rotate(0)}
  72%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.18)}
}

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