/* 编钟小舞台 —— 给幼儿园小朋友的糖果风视觉 */

:root {
  --amber: #FFA733;
  --amber-lt: #FFC44F;
  --amber-dk: #EE9A2E;
  --pink: #FF8FBF;
  --pink-lt: #FFE6F2;
  --mint: #59CDB4;
  --mint-lt: #DDF8F2;
  --sky: #6EC1F0;
  --grape: #B49CFF;
  --coral: #FF8A6B;
  --ink: #5C4632;
  --ink-soft: #907A5F;
  --line: #FFE3C4;
  --card: #FFFFFF;
  --radius: 26px;
  --radius-lg: 34px;
  --font: "Yuanti SC", "YouYuan", "PingFang SC", "Hiragino Maru Gothic ProN",
          "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.85;
  color: var(--ink);
  background:
    radial-gradient(900px 520px at 12% 0%, #FFF6DF 0%, rgba(255, 246, 223, 0) 70%),
    radial-gradient(800px 520px at 88% 8%, #FFEAF3 0%, rgba(255, 234, 243, 0) 70%),
    linear-gradient(180deg, #FFFBF1 0%, #FFF3E6 30%, #EFF8FF 68%, #F2FCF6 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wrap { width: min(1180px, 92vw); margin: 0 auto; position: relative; z-index: 2; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #FFF2D9; border: 2px solid #FFE0B0; border-radius: 10px;
  padding: 1px 8px; font-size: 0.84em; color: #B3752A;
}

/* ---------- 背景装饰 ---------- */
.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.cloud {
  position: absolute; display: block; background: #fff; border-radius: 999px;
  opacity: .85; filter: blur(.3px);
  box-shadow: 0 14px 30px rgba(140, 170, 200, .14);
}
.cloud::before, .cloud::after {
  content: ""; position: absolute; background: #fff; border-radius: 50%;
}
.cloud-1 { width: 200px; height: 66px; top: 9%; left: -14%; animation: drift 68s linear infinite; }
.cloud-1::before { width: 96px; height: 96px; top: -42px; left: 30px; }
.cloud-1::after { width: 70px; height: 70px; top: -28px; left: 104px; }
.cloud-2 { width: 150px; height: 52px; top: 34%; left: -20%; animation: drift 92s linear infinite 6s; }
.cloud-2::before { width: 76px; height: 76px; top: -34px; left: 24px; }
.cloud-2::after { width: 54px; height: 54px; top: -22px; left: 80px; }
.cloud-3 { width: 240px; height: 74px; top: 62%; left: -26%; animation: drift 116s linear infinite 14s; }
.cloud-3::before { width: 112px; height: 112px; top: -50px; left: 34px; }
.cloud-3::after { width: 82px; height: 82px; top: -34px; left: 124px; }
.cloud-4 { width: 170px; height: 58px; top: 84%; left: -18%; animation: drift 84s linear infinite 22s; }
.cloud-4::before { width: 86px; height: 86px; top: -38px; left: 26px; }
.cloud-4::after { width: 60px; height: 60px; top: -24px; left: 92px; }
@keyframes drift {
  from { transform: translateX(0); }
  to { transform: translateX(160vw); }
}

.float { position: absolute; font-size: 30px; opacity: .75; animation: floaty 7s ease-in-out infinite; }
.f1 { top: 16%; right: 8%; animation-delay: 0s; }
.f2 { top: 46%; left: 6%; font-size: 24px; animation-delay: 1.2s; }
.f3 { top: 72%; right: 10%; font-size: 34px; animation-delay: 2.4s; }
.f4 { top: 30%; left: 12%; font-size: 26px; animation-delay: 3.1s; }
.f5 { top: 88%; left: 20%; font-size: 26px; animation-delay: .6s; }
@keyframes floaty {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-16px) rotate(8deg); }
}

/* ---------- 首屏 ---------- */
.hero { position: relative; z-index: 2; padding: clamp(34px, 7vh, 74px) 0 clamp(20px, 4vh, 44px); text-align: center; }
.hero-inner { display: flex; flex-direction: column; align-items: center; }
.kicker {
  margin: 0; font-size: 16px; font-weight: 700; color: #fff; letter-spacing: .16em;
  background: linear-gradient(180deg, var(--pink), #FF6FA8);
  padding: 8px 22px; border-radius: 999px; border: 4px solid #fff;
  box-shadow: 0 6px 0 rgba(255, 111, 168, .28);
}
.hero-title {
  margin: 14px 0 0;
  font-size: clamp(76px, 16vw, 158px);
  line-height: 1;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--amber);
  text-shadow:
    -5px -5px 0 #fff, 5px -5px 0 #fff, -5px 5px 0 #fff, 5px 5px 0 #fff,
    -5px 0 0 #fff, 5px 0 0 #fff, 0 -5px 0 #fff, 0 5px 0 #fff,
    0 12px 0 #FFD9A0, 0 20px 30px rgba(255, 150, 60, .30);
}
.hero-sub {
  margin: 18px 0 0; font-size: clamp(17px, 2.2vw, 23px); font-weight: 700; color: #8A6A48;
  background: #fff; border: 4px solid var(--line); border-radius: 999px; padding: 8px 26px;
  box-shadow: 0 6px 0 rgba(255, 214, 170, .5);
}

.mascot { position: relative; margin-top: 22px; display: flex; flex-direction: column; align-items: center; }
.mascot-svg { width: clamp(120px, 17vw, 168px); height: auto; animation: bob 2.6s ease-in-out infinite; filter: drop-shadow(0 14px 20px rgba(230, 150, 60, .25)); }
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-12px) rotate(2deg); }
}
.mascot-bubble {
  position: relative; margin-bottom: 14px; background: #fff; border: 4px solid var(--line);
  border-radius: 22px; padding: 10px 20px; font-size: 16px; font-weight: 700; color: #8A6A48;
  box-shadow: 0 6px 0 rgba(255, 214, 170, .5); line-height: 1.5;
}
.mascot-bubble::after {
  content: ""; position: absolute; left: 50%; bottom: -14px; margin-left: -10px;
  width: 0; height: 0; border: 10px solid transparent; border-top-color: var(--line);
}
.mascot-bubble::before {
  content: ""; position: absolute; left: 50%; bottom: -7px; margin-left: -7px; z-index: 1;
  width: 0; height: 0; border: 7px solid transparent; border-top-color: #fff;
}

.hero-actions { display: flex; gap: 16px; margin-top: 26px; flex-wrap: wrap; justify-content: center; }
.hero-facts {
  list-style: none; display: flex; flex-wrap: wrap; gap: 12px 16px; justify-content: center;
  margin: 30px 0 0; padding: 0;
}
.hero-facts li {
  background: #fff; border: 4px solid var(--line); border-radius: 999px;
  padding: 8px 22px; font-size: 15px; font-weight: 700; color: #8A6A48;
  box-shadow: 0 6px 0 rgba(255, 214, 170, .5);
}
.hero-facts b { font-size: 22px; color: var(--amber); margin-right: 6px; }

/* ---------- 按钮 ---------- */
.btn {
  appearance: none; border: 4px solid #fff; border-radius: 999px;
  padding: 14px 30px; font-family: inherit; font-size: 18px; font-weight: 700;
  color: #fff; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  transition: transform .12s ease, box-shadow .12s ease, filter .15s ease;
}
.btn:active { transform: translateY(5px); }
.btn.primary {
  background: linear-gradient(180deg, var(--amber-lt), var(--amber));
  box-shadow: 0 7px 0 #D9822B, 0 14px 22px rgba(255, 160, 50, .35);
}
.btn.primary:active { box-shadow: 0 2px 0 #D9822B; }
.btn.ghost {
  background: linear-gradient(180deg, #FFFFFF, #FFF3E0); color: #C2822F;
  border-color: #fff; box-shadow: 0 7px 0 #F0D7B4, 0 12px 20px rgba(220, 180, 120, .28);
}
.btn.ghost:active { box-shadow: 0 2px 0 #F0D7B4; }
.btn:hover { filter: brightness(1.03); }

/* ---------- 区块 ---------- */
section { position: relative; z-index: 2; padding: clamp(26px, 4.5vh, 54px) 0; }
.section-head { max-width: 780px; margin-bottom: 20px; }
.section-head h2 {
  margin: 0; font-size: clamp(25px, 3.2vw, 38px); font-weight: 700; color: var(--amber-dk);
  text-shadow: 2px 2px 0 #fff, 4px 4px 0 rgba(255, 210, 150, .55);
}
.section-head p { margin: 12px 0 0; font-size: 16px; color: var(--ink-soft); font-weight: 600; }

/* ---------- 控制条 ---------- */
.console {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px;
  padding: 16px 24px; border: 4px solid var(--line); border-radius: var(--radius);
  background: #fff; box-shadow: 0 8px 0 rgba(255, 219, 175, .55); margin-bottom: 20px;
}
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 16px; font-weight: 700; color: var(--ink); user-select: none; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.sw-track {
  width: 60px; height: 32px; border-radius: 999px; background: #EFE3D2;
  border: 3px solid #fff; position: relative; transition: background .2s ease;
  flex: none; box-shadow: inset 0 2px 5px rgba(150, 120, 90, .2);
}
.sw-knob {
  position: absolute; top: 1px; left: 1px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 2px 5px rgba(150, 120, 90, .35);
  transition: transform .2s cubic-bezier(.4, 1.6, .5, 1);
}
.switch input:checked + .sw-track { background: linear-gradient(180deg, #FFC44F, #FFA733); }
.switch input:checked + .sw-track .sw-knob { transform: translateX(26px); }
.switch input:focus-visible + .sw-track { outline: 3px solid var(--sky); outline-offset: 3px; }

.vol { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; color: var(--ink-soft); }
input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 138px; height: 12px; border-radius: 999px;
  background: linear-gradient(90deg, var(--amber-lt), #FFE7C4); border: 3px solid #fff;
  box-shadow: inset 0 2px 5px rgba(150, 120, 90, .18); outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%;
  background: #fff; border: 4px solid var(--amber); cursor: pointer;
  box-shadow: 0 3px 6px rgba(150, 120, 90, .3);
}
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  border: 4px solid var(--amber); cursor: pointer;
}
.mode-hint {
  margin-left: auto; font-size: 15px; font-weight: 700; color: #fff;
  background: linear-gradient(180deg, var(--mint), #3FBFA6);
  padding: 7px 18px; border-radius: 999px; border: 3px solid #fff;
  box-shadow: 0 5px 0 rgba(63, 191, 166, .35);
}

/* ---------- 舞台 ---------- */
.stage-grid { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 20px; align-items: start; }
.rack {
  position: relative; border: 5px solid #fff; border-radius: var(--radius-lg);
  padding: 10px 8px 4px;
  background: linear-gradient(180deg, #EAF6FF 0%, #F3FBFF 45%, #EAFBF1 100%);
  box-shadow: 0 10px 0 rgba(190, 220, 240, .55), 0 18px 34px rgba(150, 190, 220, .28);
  overflow: hidden;
}
.rack-svg { width: 100%; height: auto; display: block; position: relative; z-index: 1; }

/* 钟架构件 */
.ground { fill: #C8EFD5; }
.ground-top { fill: #E4F9EA; }
.post { fill: #FFF4DE; stroke: #F2DCB8; stroke-width: 5; }
.cap { fill: #FF9EB5; stroke: #fff; stroke-width: 4; }
.beam { stroke: rgba(255, 255, 255, .85); stroke-width: 4; }
.bunt-string { stroke: #E8D9C0; stroke-width: 3; fill: none; }
.flag { stroke: #fff; stroke-width: 3; stroke-linejoin: round; }

/* 钟体 */
.bell { cursor: pointer; }
.bell-wob { transform-box: fill-box; transform-origin: 50% 6%; }
.bell-body { stroke: rgba(255, 255, 255, .9); stroke-width: 4; stroke-linejoin: round; }
.bell-string, .bell-wire { stroke: #D8C6AC; stroke-width: 3; stroke-linecap: round; }
.bell-hanger-yong { stroke: #fff; stroke-width: 3; stroke-linejoin: round; }
.bell-hanger-line { fill: none; stroke-width: 9; stroke-linecap: round; }
.bell-hanger-bar { stroke: #fff; stroke-width: 3; }
.bell-ring { fill: none; stroke: #fff; stroke-width: 3; }
.bell-han { fill: #fff; }
.bell-shine { fill: rgba(255, 255, 255, .45); }
.bell-rim { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 4.5; stroke-linecap: round; }

.bell:hover .bell-body { filter: brightness(1.06) saturate(1.06); }

.face-line { stroke: #5C4632; fill: none; stroke-width: 3.6; stroke-linecap: round; }
.face-mouth { fill: #E8607A; stroke: none; }
.face-calm { opacity: 1; transition: opacity .12s ease; }
.face-happy { opacity: 0; transition: opacity .12s ease; }
.bell.lit .face-calm { opacity: 0; }
.bell.lit .face-happy { opacity: 1; }

@keyframes bellWobble {
  0% { transform: rotate(0deg); }
  18% { transform: rotate(-6.5deg); }
  40% { transform: rotate(5.5deg); }
  62% { transform: rotate(-3deg); }
  82% { transform: rotate(1.5deg); }
  100% { transform: rotate(0deg); }
}
.bell.lit .bell-wob { animation: bellWobble .85s cubic-bezier(.36, 1.5, .4, 1); }
.bell.lit .bell-body { filter: brightness(1.14) drop-shadow(0 0 14px rgba(255, 226, 150, .95)); }

@keyframes bellBounce {
  0% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-9%) scale(1.06); }
  100% { transform: translateY(0) scale(1); }
}
.bell.playing .bell-wob { animation: bellBounce .5s ease-out; }
.bell.playing .bell-body { filter: brightness(1.16) drop-shadow(0 0 16px rgba(120, 225, 200, .95)); }

/* 敲击分区 */
.zone { fill: transparent; }
.rack.duo .zone[data-zone="center"] { fill: rgba(255, 170, 60, .22); }
.rack.duo .zone[data-zone="side"] { fill: rgba(90, 200, 235, .24); }
.zone-label {
  fill: #fff; font-size: 12px; font-weight: 700; text-anchor: middle;
  paint-order: stroke; stroke: rgba(120, 90, 50, .55); stroke-width: 3.4px; stroke-linejoin: round;
  opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.rack.duo .zone-label { opacity: 1; }

/* 标注 */
.bell-note, .bell-lu, .bell-key, .tier-label { text-anchor: middle; font-family: var(--font); font-weight: 700; }
.bell-note { fill: #7A6244; font-size: 17px; }
.bell-lu { fill: #A89272; font-size: 11px; font-weight: 600; }
.bell-key { fill: #C2A87F; font-size: 11px; font-family: ui-monospace, monospace; }
.tier-label { text-anchor: start; fill: #8AA890; font-size: 15px; font-weight: 700; }
.rack.hide-labels .bell-note, .rack.hide-labels .bell-lu, .rack.hide-labels .bell-key { display: none; }

/* 敲击星星特效 */
.sparkle {
  position: absolute; z-index: 3; font-size: 20px; pointer-events: none;
  transform: translate(-50%, -50%); animation: sparkleFly .85s ease-out forwards;
}
@keyframes sparkleFly {
  0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; }
  30% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.5); opacity: 0; }
}

/* ---------- 侧栏 ---------- */
.side { display: flex; flex-direction: column; gap: 16px; }
.readout {
  border: 5px solid #fff; border-radius: var(--radius); padding: 18px;
  background: linear-gradient(180deg, #FFF6E4, #FFFDF8);
  box-shadow: 0 9px 0 rgba(255, 219, 175, .55), 0 14px 26px rgba(220, 190, 150, .28);
  min-height: 190px;
}
.readout.empty { display: flex; align-items: center; justify-content: center; color: #B39B79; font-size: 16px; font-weight: 700; text-align: center; }
.ro-title { display: flex; align-items: baseline; gap: 10px; padding-bottom: 12px; border-bottom: 3px dotted #FFDFB5; margin-bottom: 12px; }
.ro-bell { font-size: 26px; font-weight: 700; color: var(--amber-dk); }
.ro-group { font-size: 13px; color: #B39B79; font-weight: 700; }
.ro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.ro-item { display: flex; flex-direction: column; gap: 1px; }
.ro-k { font-size: 12px; color: #B39B79; font-weight: 700; }
.ro-v { font-size: 16px; font-weight: 700; color: #6E5843; }
.ro-item.hot .ro-v { color: #F0851F; }

.scope-wrap {
  position: relative; border: 5px solid #fff; border-radius: var(--radius);
  background: linear-gradient(180deg, #EAF7FF, #F6FDFF); padding: 10px;
  box-shadow: 0 9px 0 rgba(190, 220, 240, .5); overflow: hidden;
}
#scope { width: 100%; height: 110px; display: block; border-radius: 16px; }
.scope-label { position: absolute; left: 18px; top: 14px; font-size: 12px; font-weight: 700; color: #9DB6C6; }
.audio-hint, .kbd-hint { margin: 0; font-size: 14px; font-weight: 600; color: #A08A6B; }
.audio-hint.warn { color: #E06A6A; }

/* ---------- 演奏台 ---------- */
.player-grid { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 20px; align-items: start; }
.tunes { display: grid; gap: 12px; max-height: 540px; overflow-y: auto; padding: 4px 6px 4px 2px; }
.tunes::-webkit-scrollbar { width: 10px; }
.tunes::-webkit-scrollbar-thumb { background: #FFD9A6; border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
.tune {
  text-align: left; font-family: inherit; cursor: pointer; color: var(--ink);
  border: 4px solid #fff; border-radius: 22px; padding: 13px 18px;
  background: #fff; display: grid; gap: 2px;
  box-shadow: 0 7px 0 rgba(255, 219, 175, .55), 0 10px 18px rgba(220, 190, 150, .2);
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.tune:hover { transform: translateY(-3px); box-shadow: 0 10px 0 rgba(255, 219, 175, .6), 0 14px 22px rgba(220, 190, 150, .26); }
.tune.active {
  background: linear-gradient(180deg, #FFF4DC, #FFE9C4);
  box-shadow: 0 7px 0 #FFC978, inset 0 0 0 3px #FFD79A;
}
.tune-tag { font-size: 12px; font-weight: 700; color: #fff; background: var(--coral); border-radius: 999px; padding: 1px 12px; justify-self: start; }
.tune-title { font-size: 21px; font-weight: 700; color: #6E5843; }
.tune-sub { font-size: 13px; font-weight: 600; color: #A89272; }

.transport {
  border: 5px solid #fff; border-radius: var(--radius-lg); padding: 22px;
  background: #fff; box-shadow: 0 10px 0 rgba(255, 219, 175, .55), 0 16px 30px rgba(220, 190, 150, .25);
}
.now-playing { display: flex; flex-direction: column; margin-bottom: 14px; }
.now-playing b { font-size: 24px; font-weight: 700; color: var(--amber-dk); }
.now-playing span { font-size: 13px; font-weight: 600; color: #A89272; }
.progress-wrap { height: 18px; border-radius: 999px; background: #F4EADB; overflow: hidden; border: 3px solid #fff; box-shadow: inset 0 2px 5px rgba(150, 120, 90, .18); }
.progress { width: 0%; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #FFC44F, #FF8FBF, #6EC1F0); transition: width .08s linear; }
.transport-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 18px; }
.time { font-family: ui-monospace, monospace; font-size: 14px; font-weight: 700; color: #A89272; min-width: 100px; }
.t-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.speed { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--ink-soft); margin-left: auto; }
.speed span { min-width: 40px; color: #F0851F; font-family: ui-monospace, monospace; }

.tune-desc {
  margin: 18px 0 0; padding: 14px 18px; font-size: 15px; font-weight: 600; color: #6E5843;
  background: #FFF7E8; border: 3px dashed #FFD79A; border-radius: 18px; line-height: 1.8;
}
.td-tag { color: #fff; background: var(--sky); border-radius: 999px; padding: 1px 12px; font-size: 12px; font-weight: 700; margin-right: 8px; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; font-size: 13px; font-weight: 600; color: #A89272; }
.lg { display: inline-flex; align-items: center; gap: 6px; }
.grownup { margin-top: 16px; }
.grownup summary { cursor: pointer; font-size: 14px; font-weight: 700; color: #B39B79; list-style: none; }
.grownup summary::-webkit-details-marker { display: none; }
.grownup summary::before { content: "▸ "; }
.grownup[open] summary::before { content: "▾ "; }
.grownup .legend { margin-top: 10px; }

/* ---------- 小课堂 ---------- */
.science { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
.sci-stats {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px;
  padding: 24px; border: 5px solid #fff; border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #FFF6E4, #FFFDF8);
  box-shadow: 0 10px 0 rgba(255, 219, 175, .55), 0 16px 30px rgba(220, 190, 150, .25);
}
.stat { text-align: center; }
.stat-v { font-size: 36px; font-weight: 700; color: var(--amber); line-height: 1.1; }
.stat-v span { font-size: 15px; color: #A89272; margin-left: 5px; }
.stat-l { font-size: 13px; font-weight: 700; color: #A89272; margin-top: 4px; }

.card {
  border: 5px solid #fff; border-radius: var(--radius-lg); padding: 24px;
  background: #fff; box-shadow: 0 10px 0 rgba(255, 219, 175, .5), 0 16px 30px rgba(220, 190, 150, .22);
}
.card.wide { grid-column: 1 / -1; }
.card.soft { background: linear-gradient(180deg, #FFFDF8, #FFF7EC); }
.card-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
.card-icon {
  font-size: 26px; flex: none; width: 56px; height: 56px; display: grid; place-items: center;
  border-radius: 20px; background: var(--pink-lt); border: 4px solid #fff;
  box-shadow: 0 5px 0 rgba(255, 180, 210, .4);
}
.card:nth-child(3n+2) .card-icon { background: var(--mint-lt); box-shadow: 0 5px 0 rgba(120, 210, 190, .4); }
.card:nth-child(3n+3) .card-icon { background: #E7F1FF; box-shadow: 0 5px 0 rgba(140, 190, 240, .4); }
.card-head h3 { margin: 0; font-size: 23px; font-weight: 700; color: #6E5843; }
.card-lead { margin: 4px 0 0; font-size: 14px; font-weight: 700; color: var(--coral); }
.card-body p { margin: 0 0 12px; font-size: 15.5px; font-weight: 600; color: #6E5843; }
.points { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.points li { position: relative; padding-left: 26px; font-size: 15px; font-weight: 600; color: #6E5843; }
.points li::before {
  content: "★"; position: absolute; left: 0; top: 0; color: var(--amber-lt); font-size: 15px;
}

.timeline { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.timeline li { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 12px 6px; border-bottom: 3px dotted #FFE6C6; }
.timeline li:last-child { border-bottom: none; }
.tl-time { font-size: 16px; font-weight: 700; color: var(--amber-dk); }
.tl-text { font-size: 15px; font-weight: 600; color: #6E5843; }
.sources { margin: 16px 0 0; font-size: 13px; font-weight: 600; color: #B39B79; }

/* ---------- 页脚 ---------- */
footer { padding: 40px 0 54px; text-align: center; color: #A89272; font-size: 14px; font-weight: 600; position: relative; z-index: 2; }
footer p { margin: 4px 0; }
footer .tiny { color: #C0AC90; font-size: 13px; }

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
  .stage-grid { grid-template-columns: 1fr; }
  .player-grid { grid-template-columns: 1fr; }
  .tunes { max-height: none; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero-sub { font-size: 16px; padding: 7px 18px; }
  .hero-facts li { padding: 6px 16px; font-size: 14px; }
  .hero-facts b { font-size: 19px; }
  .console { gap: 12px 18px; padding: 14px 18px; }
  .mode-hint { margin-left: 0; width: 100%; text-align: center; }
  .timeline li { grid-template-columns: 1fr; gap: 2px; }
  .btn { font-size: 16px; padding: 12px 22px; }
  .speed { margin-left: 0; }
  .ro-grid { grid-template-columns: 1fr 1fr; }
  .float { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cloud, .float, .mascot-svg { animation: none; }
}