/* ==========================================================
   学累了休息会 · 2027 考研倒计时（皮一下版）
   糖果色 + 两只猫怪兽 + 合成鞭声
   ========================================================== */

:root {
  color-scheme: light;

  --ink: #3a2438;
  --ink-soft: #6b4d64;
  --pink: #ff7ab6;
  --pink-deep: #e2649a;
  --peach: #ffb27a;
  --mint: #7fe3c4;
  --lav: #b79cff;
  --butter: #ffe27a;
  --paper: #fffdfb;

  --card-shadow: 0 8px 0 rgba(58, 36, 56, .14), 0 18px 30px -18px rgba(58, 36, 56, .45);
  --font: "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  --font-num: "Bahnschrift", "DIN Alternate", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .8, .3, 1);
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  padding-bottom: 66px;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  color: var(--ink);
  background: linear-gradient(150deg, #ffe3ef 0%, #ffeecd 34%, #d9f7ea 68%, #e8dcff 100%);
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1, p { margin: 0; }

button { font: inherit; color: inherit; }

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

/* 共享渐变定义：0 尺寸但不能 display:none，否则引用失效 */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 14px; }

/* ---------- 糖果色流动背景 ---------- */
.candy { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.blob {
  position: absolute; border-radius: 50%;
  filter: blur(50px);
  opacity: .75;
  animation: drift 26s ease-in-out infinite;
}
.blob-1 { width: 46vmax; height: 46vmax; top: -16vmax; left: -10vmax; background: radial-gradient(circle, #ff9ec7, rgba(255, 158, 199, 0) 68%); }
.blob-2 { width: 40vmax; height: 40vmax; top: -8vmax; right: -12vmax; background: radial-gradient(circle, #ffd166, rgba(255, 209, 102, 0) 68%); animation-delay: -8s; }
.blob-3 { width: 44vmax; height: 44vmax; bottom: -18vmax; left: 8vmax; background: radial-gradient(circle, #8ef0d2, rgba(142, 240, 210, 0) 68%); animation-delay: -15s; }
.blob-4 { width: 36vmax; height: 36vmax; bottom: -12vmax; right: 2vmax; background: radial-gradient(circle, #b79cff, rgba(183, 156, 255, 0) 70%); animation-delay: -20s; }
.blob-5 { width: 30vmax; height: 30vmax; top: 30%; left: 42%; background: radial-gradient(circle, #ffe27a, rgba(255, 226, 122, 0) 70%); animation-delay: -4s; opacity: .55; }

@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33% { transform: translate3d(3vmax, -2.4vmax, 0) scale(1.08); }
  66% { transform: translate3d(-2.6vmax, 2vmax, 0) scale(.95); }
}

/* ---------- 飘浮 emoji ---------- */
.emoji-field { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.float-emoji {
  position: absolute; bottom: -12vh;
  font-size: var(--size, 24px);
  opacity: 0;
  will-change: transform, opacity;
  animation: floatUp var(--dur, 12s) linear forwards;
}
@keyframes floatUp {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  12% { opacity: .55; }
  80% { opacity: .45; }
  100% { transform: translate3d(var(--dx, 20px), -118vh, 0) rotate(var(--rot, 40deg)); opacity: 0; }
}

/* ---------- 顶栏 ---------- */
.topbar {
  position: relative; z-index: 4;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 18px clamp(16px, 4vw, 40px) 0;
}
.brand {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  border: 3px solid var(--ink); border-radius: 999px;
  background: rgba(255, 253, 251, .82);
  font-weight: 800; font-size: 14px; letter-spacing: .04em;
  box-shadow: 0 5px 0 rgba(58, 36, 56, .16);
}
.brand-dot { font-size: 14px; }

.sound-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px;
  border: 3px solid var(--ink); border-radius: 999px;
  background: var(--butter);
  font-size: 13.5px; font-weight: 800;
  cursor: pointer;
  box-shadow: 0 5px 0 rgba(58, 36, 56, .2);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), background-color .2s;
}
.sound-btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 rgba(58, 36, 56, .2); }
.sound-btn:active { transform: translateY(2px); box-shadow: 0 3px 0 rgba(58, 36, 56, .2); }
.sound-btn[aria-pressed="false"] { background: #fff; color: var(--ink-soft); }

/* ---------- 主舞台 ---------- */
.stage {
  position: relative; z-index: 3;
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  padding: 8px clamp(14px, 4vw, 40px) 12px;
  text-align: center;
}

.stage.is-shaking { animation: shake .32s linear; }
@keyframes shake {
  0%, 100% { transform: translate3d(0, 0, 0); }
  20% { transform: translate3d(-5px, 2px, 0) rotate(-.3deg); }
  45% { transform: translate3d(5px, -2px, 0) rotate(.3deg); }
  70% { transform: translate3d(-3px, 1px, 0); }
  85% { transform: translate3d(2px, -1px, 0); }
}

.eyebrow {
  display: inline-block;
  padding: 5px 14px;
  border: 2px dashed rgba(58, 36, 56, .4);
  border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .12em;
  color: var(--ink-soft);
  background: rgba(255, 253, 251, .55);
}

.title {
  margin-top: 14px;
  font-size: clamp(32px, 7vw, 82px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: .01em;
  color: #fff;
  -webkit-text-fill-color: #fff;
  -webkit-text-stroke: 3px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 6px 0 rgba(255, 122, 182, .85), 0 12px 18px rgba(58, 36, 56, .22);
  transform: rotate(-2deg);
  animation: wobble 3.6s ease-in-out infinite;
  transform-origin: 50% 80%;
}
@keyframes wobble {
  0%, 100% { transform: rotate(-2.2deg) translateY(0); }
  35% { transform: rotate(1.6deg) translateY(-5px); }
  70% { transform: rotate(-1.2deg) translateY(2px); }
}

/* ---------- 倒计时 ---------- */
.clock-block { margin-top: clamp(14px, 2.4vw, 24px); }
.clock-label {
  font-size: 13px; font-weight: 800; letter-spacing: .28em;
  color: var(--ink-soft); margin-bottom: 8px;
}
.clock {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(4px, 1vw, 10px);
}
.cd {
  display: flex; flex-direction: column; align-items: center;
  min-width: clamp(56px, 10vw, 104px);
  padding: clamp(6px, 1.2vw, 12px) clamp(6px, 1.4vw, 14px);
  border: 3px solid var(--ink); border-radius: clamp(12px, 2vw, 20px);
  background: var(--paper);
  box-shadow: var(--card-shadow);
}
.cd b {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-size: clamp(26px, 4.2vw, 50px);
  font-weight: 900; line-height: 1;
  letter-spacing: -.01em;
}
.cd i {
  font-style: normal; font-size: 11px; font-weight: 800;
  letter-spacing: .16em; color: var(--ink-soft);
  margin-top: 3px;
}
.cd-sep {
  padding-bottom: 0;
  margin-bottom: 26px;
  font-family: var(--font-num); font-size: clamp(18px, 3vw, 28px);
  font-weight: 900; color: var(--ink-soft);
  animation: blink 2s steps(1, end) infinite;
}
@keyframes blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .25; } }

/* ---------- 猫舞台 ---------- */
.cat-stage {
  position: relative;
  width: min(760px, 100%);
  margin-top: clamp(12px, 2vw, 20px);
  padding-top: 62px;
}

.bubble {
  position: absolute; left: 50%; top: 0;
  transform: translateX(-50%) rotate(-1.6deg);
  max-width: min(560px, 92%);
  padding: 12px 22px;
  border: 3px solid var(--ink); border-radius: 22px;
  background: var(--paper);
  box-shadow: 0 7px 0 rgba(58, 36, 56, .14);
  font-size: clamp(14px, 1.7vw, 18px); font-weight: 800; line-height: 1.45;
  z-index: 5;
}
.bubble-tail {
  position: absolute; left: 50%; bottom: -11px;
  width: 18px; height: 18px;
  margin-left: -9px;
  background: var(--paper);
  border-right: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  transform: rotate(45deg);
  border-bottom-right-radius: 3px;
}
.bubble.is-pop { animation: bubblePop .34s var(--ease); }
@keyframes bubblePop {
  0% { transform: translateX(-50%) rotate(-1.6deg) scale(.9); }
  45% { transform: translateX(-50%) rotate(1.4deg) scale(1.07); }
  100% { transform: translateX(-50%) rotate(-1.6deg) scale(1); }
}

/* 3D 舞台：鼠标移动时猫会跟着微微转，像两颗小圆饼 */
.cats {
  position: relative; z-index: 2;
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(8px, 4vw, 56px);
  perspective: 1100px;
}

.cat-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transform-style: preserve-3d;
  transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg));
  transition: transform .18s ease-out;
  will-change: transform;
}

.cat {
  position: relative;
  width: clamp(148px, 22vw, 226px);
  transform-origin: 50% 92%;
  transform-style: preserve-3d;
  animation: bob 2.8s ease-in-out infinite alternate;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cat::after {
  content: ""; position: absolute; left: 10%; right: 10%; bottom: -8px;
  height: 18px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 50%, rgba(58, 36, 56, .28), rgba(58, 36, 56, 0) 70%);
  filter: blur(4px);
  z-index: -1;
  pointer-events: none;
  transition: transform .28s var(--ease), opacity .28s var(--ease);
}
.cat-wrap:nth-child(2) .cat { animation-delay: -1.4s; }

@keyframes bob {
  0% { transform: translateY(0) rotate(-1deg); }
  100% { transform: translateY(-7px) rotate(1deg); }
}

.cat-squish { display: block; transform-origin: 50% 95%; transform-style: preserve-3d; }
.cat-svg {
  display: block; width: 100%; height: auto; overflow: visible;
  filter: drop-shadow(0 8px 8px rgba(58, 36, 56, .16));
}

/* 配色 */
.cat--mint { --fur: #8ee9cb; --fur-dark: #43b892; --belly: #effff9; }
.cat--peach { --fur: #ffb894; --fur-dark: #e8835a; --belly: #fff2ea; }

.cat-body { fill: var(--fur); stroke: var(--ink); stroke-width: 4; }
.cat-belly { fill: var(--belly); }
.cat-ao { fill: url(#catShade); }
.cat-hl { fill: url(#catLit); opacity: .85; }
.cat-belly-lit { fill: url(#catBellyLit); opacity: .55; }
.cat-rim {
  fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round;
  opacity: .34; filter: blur(.4px);
}
.cat-ear { fill: var(--fur); stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; }
.cat-ear-inner { fill: #ffc7dd; stroke: none; }
.cat-horn { fill: var(--butter); stroke: var(--ink); stroke-width: 3.4; stroke-linejoin: round; }
.cat-tail { fill: none; stroke: var(--fur-dark); stroke-width: 11; stroke-linecap: round; }
.cat-paw { fill: var(--belly); stroke: var(--ink); stroke-width: 3.4; }
.cat-paw-hi { fill: #fff; opacity: .5; }
.cat-eye { fill: #fff; stroke: var(--ink); stroke-width: 3.4; transform-box: fill-box; transform-origin: 50% 50%; transition: transform .12s var(--ease); }
.cat-pupil { fill: var(--ink); }
.cat-glint { fill: #fff; }
.cat-glint-sm { fill: #fff; opacity: .75; }
.cat-brow { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.cat-blush { fill: rgba(255, 112, 172, .5); }
.cat-nose { fill: #ff7ba9; stroke: var(--ink); stroke-width: 2.4; stroke-linejoin: round; }
.cat-nose-hi { fill: #fff; opacity: .65; }
.cat-mouth { fill: none; stroke: var(--ink); stroke-width: 3.6; stroke-linecap: round; }
.cat-whisker { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; opacity: .5; }
.cat-sting { stroke: #ff4d6d; stroke-width: 5; stroke-linecap: round; opacity: 0; transition: opacity .12s; }

.cat-tag {
  font-size: 10.5px; font-weight: 800; letter-spacing: .18em;
  color: var(--ink-soft); opacity: .8;
}

/* 猫猫被抽：3D 里也往前弹一下 */
.cat.is-hit { animation: catHit .52s var(--ease); }
.cat.is-hit .cat-eye { transform: scaleY(.28); }
.cat.is-hit .cat-squish { animation: squish .52s var(--ease); }
.cat.is-hit .cat-sting { opacity: 1; }
.cat.is-hit::after { transform: scale(1.16, .66); opacity: .85; }
@keyframes catHit {
  0% { transform: rotate(0) translate3d(0, 0, 0) scale(1, 1); }
  12% { transform: rotate(-9deg) translate3d(-7px, -6px, 28px) scale(1.05, .93); }
  32% { transform: rotate(6deg) translate3d(5px, 1px, -6px) scale(.96, 1.05); }
  55% { transform: rotate(-4deg) translate3d(-3px, 0, 10px) scale(1.01, .98); }
  78% { transform: rotate(2deg) translate3d(1px, 0, 0) scale(1, 1); }
  100% { transform: rotate(0) translate3d(0, 0, 0) scale(1, 1); }
}
@keyframes squish {
  0%, 100% { transform: scale(1, 1) skewX(0); }
  18% { transform: scale(1.08, .9) skewX(-6deg); }
  45% { transform: scale(.94, 1.06) skewX(4deg); }
  72% { transform: scale(1.02, .98) skewX(-2deg); }
}

/* ---------- 巨型木棒 ---------- */
.club {
  position: absolute; inset: 0;
  z-index: 4;                       /* 在猫之上：砸下来的时候盖住猫头 */
  pointer-events: none; opacity: 0;
  filter: drop-shadow(0 20px 24px rgba(51, 26, 12, .34));
}
.club-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.club-rig { transform-box: view-box; transform-origin: 742px 36px; }

.club-ink-path { fill: #2a1409; stroke: #2a1409; stroke-width: 15; stroke-linejoin: round; }
.club-ink-circle { fill: #2a1409; stroke: #2a1409; stroke-width: 11; }
.club-wood-path, .club-wood-circle { fill: url(#wood); }
.club-detail .grain { fill: none; stroke: #6b3a18; stroke-width: 3.2; stroke-linecap: round; opacity: .34; }
.club-detail .band { fill: none; stroke: #43260f; stroke-width: 4; stroke-linecap: round; opacity: .55; }
.club-detail .stud { fill: #cfd6de; stroke: #2a1409; stroke-width: 3; }
.club-detail .shine { fill: none; stroke: #ffe6c8; stroke-width: 5; stroke-linecap: round; opacity: .42; }
.club-trail path { fill: #fff; opacity: 0; filter: url(#softBlur); }

.club.is-swing { opacity: 1; animation: clubShow .8s linear; }
.club.is-swing .club-rig { animation: clubSwing .8s cubic-bezier(.22, .72, .2, 1); }
.club.is-swing .club-trail path { animation: clubTrail .8s ease-out; }

@keyframes clubShow {
  0% { opacity: 0; }
  5% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; }
}
/* 抬起蓄力 → 抡下来 → 命中（50%）→ 压下去再回弹 */
@keyframes clubSwing {
  0% { transform: rotate(32deg); }
  14% { transform: rotate(42deg); }
  40% { transform: rotate(-6deg); }
  50% { transform: rotate(0deg); }
  56% { transform: rotate(15deg); }
  70% { transform: rotate(6deg); }
  84% { transform: rotate(1deg); }
  100% { transform: rotate(0deg); }
}
@keyframes clubTrail {
  0% { opacity: 0; }
  28% { opacity: .45; }
  46% { opacity: .65; }
  60% { opacity: .15; }
  100% { opacity: 0; }
}

/* ---------- 清场：黑幕 + 白闪 ---------- */
.smash-veil {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(circle at 50% 58%, rgba(52, 28, 62, .55) 0%, rgba(18, 10, 26, .95) 58%, rgba(8, 4, 14, .98) 100%);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
body.is-smash .smash-veil { opacity: 1; }

.smash-flash {
  position: fixed; inset: 0; z-index: 12; pointer-events: none;
  background: #fff; opacity: 0;
}
.smash-flash.is-on { animation: flashOut .28s ease-out; }
@keyframes flashOut { 0% { opacity: .95; } 100% { opacity: 0; } }

/* 清场时除了猫和棒子，其他全部淡出 */
.topbar, .eyebrow, .title, .clock-block, .bubble, .actions,
.strike-line, .tail, .foot, .cat-tag, .candy, .emoji-field {
  transition: opacity .3s var(--ease);
}
body.is-smash .topbar,
body.is-smash .eyebrow,
body.is-smash .title,
body.is-smash .clock-block,
body.is-smash .bubble,
body.is-smash .actions,
body.is-smash .strike-line,
body.is-smash .tail,
body.is-smash .foot,
body.is-smash .audio-hint,
body.is-smash .cat-tag {
  opacity: 0 !important;
  pointer-events: none;
}
body.is-smash .candy { opacity: .16; }
body.is-smash .emoji-field { opacity: 0; }

/* 镜头推近 */
.cat-stage { transition: transform .42s var(--ease); }
body.is-smash .cat-stage { transform: translateY(-6vh) scale(1.16); }

/* ---------- 重击特效：冲击波 + 💥 + 木屑 + 砰！ ---------- */
.smash-fx {
  position: absolute; left: 71%; top: 40%;
  width: 0; height: 0; z-index: 8;
  pointer-events: none;
}
.shock {
  position: absolute; left: 0; top: 0;
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  border-radius: 50%;
  border: 5px solid rgba(255, 255, 255, .95);
  box-shadow: 0 0 26px rgba(255, 214, 102, .9);
  opacity: 0;
}
.smash-fx.is-on .shock { animation: shockOut .6s ease-out; }
.smash-fx.is-on .shock2 { animation: shockOut .8s .12s ease-out; }
@keyframes shockOut {
  0% { transform: scale(.2); opacity: 1; }
  100% { transform: scale(5.6); opacity: 0; }
}

.smash-fx .impact {
  position: absolute; left: -28px; top: -22px;
  font-size: clamp(46px, 6vw, 76px);
  opacity: 0;
  filter: drop-shadow(0 6px 0 rgba(58, 36, 56, .28));
}
.smash-fx.is-on .impact { animation: impactPop .58s var(--ease) forwards; }
@keyframes impactPop {
  0% { opacity: 0; transform: scale(.25) rotate(-22deg); }
  28% { opacity: 1; transform: scale(1.55) rotate(7deg); }
  60% { opacity: 1; transform: scale(1.15) rotate(-3deg); }
  100% { opacity: 0; transform: scale(.9) rotate(0); }
}

.debris i {
  position: absolute; left: 0; top: 0;
  width: 12px; height: 7px; margin: -3.5px 0 0 -6px;
  background: #cf8f4d;
  border: 2px solid #4a2a12;
  border-radius: 2px;
  opacity: 0;
}
.smash-fx.is-on .debris i { animation: chipFly .72s ease-out forwards; }
@keyframes chipFly {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); }
}

.smash-word {
  position: absolute; left: -120px; top: -230px;
  font-size: clamp(40px, 6.6vw, 84px); font-weight: 900; white-space: nowrap;
  color: #fff; -webkit-text-fill-color: #fff;
  -webkit-text-stroke: 5px var(--ink);
  paint-order: stroke fill;
  text-shadow: 0 9px 0 rgba(255, 122, 182, .85);
  opacity: 0; transform: rotate(-8deg);
}
.smash-fx.is-on .smash-word { animation: wordBang .85s var(--ease) forwards; }
@keyframes wordBang {
  0% { opacity: 0; transform: rotate(-16deg) scale(.4); }
  22% { opacity: 1; transform: rotate(-8deg) scale(1.18); }
  70% { opacity: 1; transform: rotate(-6deg) scale(1); }
  100% { opacity: 0; transform: translateY(-24px) rotate(-4deg) scale(1.04); }
}

/* 猫的反应：右边被压扁，左边吓得弹起来 */
body.is-smash .cat.is-hit { animation: smashSquash .66s var(--ease); }
body.is-smash .cat.is-hit .cat-eye { transform: scaleY(.12); }
body.is-smash .cat.is-hit .cat-sting { opacity: 1; }
@keyframes smashSquash {
  0% { transform: scale(1, 1); }
  12% { transform: scale(1.26, .58); }
  42% { transform: scale(1.2, .66); }
  72% { transform: scale(.95, 1.06); }
  100% { transform: scale(1, 1); }
}
body.is-smash .cat.is-shock { animation: shockJump .6s var(--ease); }
@keyframes shockJump {
  0% { transform: translateY(0) rotate(0); }
  26% { transform: translateY(-30px) rotate(-7deg); }
  58% { transform: translateY(6px) rotate(4deg); }
  100% { transform: translateY(0) rotate(0); }
}

/* 更狠的震屏 */
body.is-smash .stage.is-shaking { animation: bigShake .52s linear; }
@keyframes bigShake {
  0%, 100% { transform: translate3d(0, 0, 0); }
  14% { transform: translate3d(-13px, 9px, 0) rotate(-.6deg); }
  34% { transform: translate3d(12px, -8px, 0) rotate(.55deg); }
  54% { transform: translate3d(-9px, 6px, 0) rotate(-.3deg); }
  76% { transform: translate3d(7px, -4px, 0); }
}

/* ---------- 按钮 ---------- */
.actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 12px;
  margin-top: clamp(12px, 2vw, 22px);
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px;
  border: 3px solid var(--ink); border-radius: 999px;
  font-size: clamp(13.5px, 1.5vw, 16px); font-weight: 900; letter-spacing: .02em;
  cursor: pointer;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), background-color .2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(3px); }

.btn-primary {
  background: linear-gradient(135deg, #ff9ec9, #ffb27a);
  color: var(--ink);
  box-shadow: 0 8px 0 var(--pink-deep), 0 18px 24px -12px rgba(226, 100, 154, .7);
}
.btn-primary:hover { box-shadow: 0 10px 0 var(--pink-deep), 0 22px 26px -12px rgba(226, 100, 154, .75); }
.btn-primary:active { box-shadow: 0 4px 0 var(--pink-deep); }

.btn-ghost {
  background: var(--paper);
  box-shadow: 0 8px 0 rgba(58, 36, 56, .2);
}
.btn-ghost:active { box-shadow: 0 4px 0 rgba(58, 36, 56, .2); }

.tail {
  margin-top: clamp(8px, 1.4vw, 12px);
  font-size: 12.5px; font-weight: 700;
  color: var(--ink-soft);
  max-width: 30em;
}

.strike-line {
  margin-top: 8px;
  font-size: 12px; font-weight: 800; letter-spacing: .04em;
  color: var(--ink-soft);
}
.strike-line b {
  font-family: var(--font-num);
  font-size: 15px; color: var(--pink-deep);
  padding: 0 2px;
}

/* ---------- 页脚 / 音效提示 ---------- */
.foot {
  position: relative; z-index: 3;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px;
  padding: 4px 20px 6px;
  font-size: 11.5px; color: var(--ink-soft);
  opacity: .85;
}
.foot-sep { opacity: .5; }

.audio-hint {
  position: fixed; left: 50%; bottom: 20px; z-index: 9;
  display: inline-flex; align-items: center; gap: 8px;
  width: max-content; max-width: calc(100vw - 24px);
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--ink); color: #fff;
  font-size: 13px; font-weight: 800; white-space: nowrap;
  box-shadow: 0 10px 24px -12px rgba(58, 36, 56, .7);
  transform: translate(-50%, 0);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.audio-hint.is-hidden { opacity: 0; transform: translate(-50%, 16px); pointer-events: none; }

/* ---------- 矮窗口（笔记本常见 900px 高）：整体收一点，别让页脚被音效提示压住 ---------- */
@media (max-height: 980px) {
  .title { margin-top: 8px; font-size: clamp(30px, 6.4vw, 74px); }
  .clock-block { margin-top: 16px; }
  .clock-label { margin-bottom: 4px; }
  .cat { width: clamp(140px, 20vw, 204px); }
  .cat-stage { margin-top: 6px; padding-top: 50px; }
  .actions { margin-top: 12px; }
  .strike-line { margin-top: 6px; }
  .tail { margin-top: 6px; font-size: 11.5px; }
  .foot { font-size: 10.5px; padding-bottom: 2px; }
}

/* ---------- 小屏 ---------- */
@media (max-width: 560px) {
  body { padding-bottom: 76px; }
  .topbar { padding: 12px 14px 0; }
  .brand { font-size: 12.5px; padding: 6px 11px; border-width: 2.5px; }
  .sound-btn { font-size: 12px; padding: 7px 12px; border-width: 2.5px; }
  .eyebrow { font-size: 10.5px; letter-spacing: .08em; padding: 4px 10px; }
  .title { margin-top: 10px; -webkit-text-stroke-width: 2.4px; text-shadow: 0 4px 0 rgba(255, 122, 182, .85), 0 8px 12px rgba(58, 36, 56, .2); }
  .cat-stage { padding-top: 54px; }
  .bubble { padding: 10px 15px; border-width: 2.5px; font-size: 13px; max-width: 96%; }
  .cats { gap: 6px; }
  .cat { width: clamp(132px, 38vw, 176px); }
  .smash-word { left: -96px; top: -150px; font-size: 38px; -webkit-text-stroke-width: 3.5px; }
  .strike-line { font-size: 11px; }
  .actions { gap: 9px; width: 100%; }
  .btn { padding: 11px 16px; border-width: 2.5px; }
  .btn-primary { flex: 1 1 100%; }
  .btn-ghost { flex: 1 1 100%; }
  .tail { font-size: 11.5px; }
  .foot { font-size: 10.5px; padding: 2px 16px 4px; }
  .audio-hint { font-size: 12px; padding: 10px 16px; bottom: 16px; }
  body.is-smash .cat-stage { transform: translateY(6vh) scale(1.16); }
}

@media (max-height: 700px) {
  .cat { width: clamp(104px, 16vh, 148px); }
  .title { font-size: clamp(28px, 5.6vw, 56px); }
  .cat-stage { padding-top: 56px; }
  .tail { display: none; }
}

/* ---------- 减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .title, .cat, .cd-sep { animation: none; }
  .blob { animation: none; }
  .float-emoji { display: none; }
  .stage.is-shaking, body.is-smash .stage.is-shaking { animation: none; }
  .cat.is-hit, body.is-smash .cat.is-hit, body.is-smash .cat.is-shock { animation: none; }
  .cat.is-hit .cat-squish { animation: none; }
  .bubble.is-pop { animation: none; }
  .cat-wrap { transform: none !important; }
  .smash-veil, .smash-flash { display: none; }
  .smash-fx .shock, .smash-fx .debris { display: none; }
  .smash-fx.is-on .impact { animation: none; opacity: 1; }
  .smash-fx.is-on .smash-word { animation: none; opacity: 1; }
  .club.is-swing .club-rig { animation: none; }
  .club.is-swing .club-trail ellipse, .club.is-swing .club-trail path { animation: none; }
  body.is-smash .cat-stage { transform: none; }
}