/* 星星打字乐园 */
:root {
  --ink: #3b2a59; --ink2: #7a6a99; --ink3: #b4a8cc;
  --card: #fff; --soft: #faf6ff; --line: #eee6fb;
  --primary: #ff5fa2; --primary2: #ff8cc0; --primary-d: #e0307f;
  --ok: #22b07d; --bad: #ff5b78;
  --bg1: #ffe4f2; --bg2: #e8e1ff; --bg3: #dff3ff;
  --head: var(--ink);
  --shadow: 0 10px 30px rgba(90, 60, 150, .14);
  --r: 22px;
  --u: min(54px, 4vw, 6.3vh);
  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --round: "Arial Rounded MT Bold", "Nunito", "Varela Round", "Segoe UI", var(--font);
}
[data-theme=mint] { --primary: #14b8a6; --primary2: #4fd8c8; --primary-d: #0d8c7e; --bg1: #d6fbf1; --bg2: #d9e9ff; --bg3: #e9fff7; }
[data-theme=lemon] { --primary: #ff9a1f; --primary2: #ffbd57; --primary-d: #d97800; --bg1: #fff3c4; --bg2: #ffdcc4; --bg3: #fff0f3; }
[data-theme=galaxy] { --primary: #a56cff; --primary2: #c59bff; --primary-d: #7a3fe0; --bg1: #2a1d5c; --bg2: #4f3196; --bg3: #1b1440; --head: #fff; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font); color: var(--ink); overflow: hidden; user-select: none; -webkit-user-select: none;
  background: linear-gradient(140deg, var(--bg1), var(--bg2) 55%, var(--bg3)); background-attachment: fixed;
}
button { font-family: inherit; color: inherit; cursor: pointer; }
input { font-family: inherit; }
.ic { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.22em; }

/* 背景飘浮的小装饰 */
.deco { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.deco i { position: absolute; display: block; opacity: .55; animation: floaty 9s ease-in-out infinite; }
.deco i:nth-child(odd) { width: 26px; height: 26px; background: #fff; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.deco i:nth-child(even) { width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 70%); }
.deco .d1 { left: 6%; top: 14%; } .deco .d2 { left: 16%; top: 70%; animation-delay: -2s; } .deco .d3 { left: 88%; top: 22%; animation-delay: -4s; transform: scale(.7); }
.deco .d4 { left: 78%; top: 76%; animation-delay: -1s; } .deco .d5 { left: 46%; top: 88%; animation-delay: -6s; } .deco .d6 { left: 60%; top: 6%; animation-delay: -3s; }
.deco .d7 { left: 30%; top: 30%; animation-delay: -5s; transform: scale(.6); } .deco .d8 { left: 94%; top: 52%; animation-delay: -7s; }
[data-theme=galaxy] .deco i { opacity: .8; }
@keyframes floaty { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -18px; rotate: 12deg; } }

#app { position: relative; z-index: 1; height: 100%; }
.screen { height: 100vh; display: flex; flex-direction: column; animation: scrIn .35s ease; }
@keyframes scrIn { from { opacity: 0; transform: translateY(10px); } }

/* ---------- 按钮 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em; border: 0; border-radius: 999px;
  padding: .7em 1.35em; font-size: 1.05rem; font-weight: 800; color: #fff; letter-spacing: .02em; white-space: nowrap;
  background: linear-gradient(180deg, var(--primary2), var(--primary)); box-shadow: 0 5px 0 var(--primary-d), 0 10px 18px rgba(120, 40, 120, .18);
  transition: transform .12s, box-shadow .12s, filter .12s; position: relative;
}
.btn:hover { filter: brightness(1.06); transform: translateY(-2px); box-shadow: 0 7px 0 var(--primary-d), 0 14px 22px rgba(120, 40, 120, .2); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--primary-d), 0 4px 8px rgba(120, 40, 120, .2); }
.btn.ghost { background: #fff; color: var(--ink); box-shadow: 0 5px 0 #e3d8f6, 0 10px 18px rgba(90, 60, 150, .12); }
.btn.ghost:hover { box-shadow: 0 7px 0 #e3d8f6, 0 14px 22px rgba(90, 60, 150, .14); }
.btn.ghost:active { box-shadow: 0 1px 0 #e3d8f6; }
.btn.danger { background: linear-gradient(180deg, #ff8a9c, #ff5b78); box-shadow: 0 5px 0 #d93b5a; color: #fff; }
.btn.ghost.danger { background: #fff; color: #e0405f; box-shadow: 0 5px 0 #ffd3dc; }
.btn.sm { padding: .5em 1em; font-size: .95rem; box-shadow: 0 4px 0 var(--primary-d); }
.btn.ghost.sm { box-shadow: 0 4px 0 #e3d8f6; }
.btn.big { font-size: 1.15rem; padding: .8em 1.6em; }
.btn.xl { font-size: 1.35rem; padding: .85em 2.2em; }
.btn .kbd-hint { font-style: normal; font-size: .7em; font-weight: 700; background: rgba(255, 255, 255, .28); border-radius: 6px; padding: .1em .45em; margin-left: .2em; }
.btn.ghost .kbd-hint { background: #f1ebfb; }
.ibtn {
  width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; display: inline-grid; place-items: center; color: var(--ink);
  box-shadow: 0 4px 0 #e3d8f6, 0 8px 14px rgba(90, 60, 150, .12); transition: transform .12s; font-size: 1.05rem;
}
.ibtn:hover { transform: translateY(-2px) rotate(-6deg); color: var(--primary); }
.ibtn:active { transform: translateY(3px); box-shadow: 0 1px 0 #e3d8f6; }

/* ---------- 顶栏 ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; gap: 16px; flex: none; }
.tb-left, .tb-right { display: flex; align-items: center; gap: 10px; min-width: 260px; }
.tb-right { justify-content: flex-end; }
.tb-title { font-size: 1.35rem; font-weight: 900; color: var(--head); display: flex; align-items: center; gap: .4em; text-align: center; }
.tb-title .ic { color: var(--primary); }
.tb-logo { display: flex; align-items: center; gap: .4em; font-weight: 900; font-size: 1.1rem; color: var(--head); }
.tb-logo .ic { color: var(--primary); }
.star-pill {
  display: inline-flex; align-items: center; gap: .35em; border: 0; border-radius: 999px; padding: .45em 1em .45em .7em; font-size: 1.1rem;
  background: #fff; box-shadow: 0 4px 0 #f3dca0, 0 8px 14px rgba(200, 140, 0, .16); font-weight: 900; transition: transform .12s;
}
.star-pill .ic { color: #ffb400; width: 1.4em; height: 1.4em; }
.star-pill:hover { transform: translateY(-2px) scale(1.04); }

/* ---------- 开场 ---------- */
.scr-splash { height: 100vh; display: grid; place-items: center; }
.splash-card { background: rgba(255, 255, 255, .9); border-radius: 36px; padding: 34px 60px 40px; text-align: center; box-shadow: var(--shadow); max-width: 640px; animation: scrIn .5s ease; }
.splash-mascot { width: 150px; margin: 0 auto; }
.splash-sub { color: var(--ink2); font-size: 1.1rem; margin: 6px 0 18px; }
.splash-hi { font-size: 1.3rem; margin: 0 0 22px; }
.name-ask { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 1.15rem; font-weight: 800; margin: 0 0 24px; }
.name-ask .ic { color: var(--primary); }
.name-ask input, .set-row input {
  border: 3px solid var(--line); border-radius: 14px; padding: .5em .8em; font-size: 1.1rem; width: 190px; outline: none; color: var(--ink); background: #fff;
}
.name-ask input:focus, .set-row input:focus { border-color: var(--primary2); }
.logo { margin: 6px 0; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.logo .lt {
  display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; font-size: 2.2rem; font-weight: 900; color: var(--ink);
  background: color-mix(in srgb, var(--fc) 55%, #fff); box-shadow: 0 6px 0 color-mix(in srgb, var(--fc) 80%, #8a6fb8), 0 10px 16px rgba(90, 60, 150, .15);
  animation: tileBob 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * .15s); rotate: calc((var(--i) - 2.5) * 2deg);
}
.logo.sm .lt { width: 48px; height: 48px; font-size: 1.6rem; border-radius: 13px; box-shadow: 0 5px 0 color-mix(in srgb, var(--fc) 80%, #8a6fb8); }
@keyframes tileBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.mascot { display: block; overflow: visible; }
.bob { animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }

.bubble {
  position: relative; background: #fff; border-radius: 20px; padding: 14px 20px; font-size: 1.08rem; line-height: 1.6; box-shadow: var(--shadow); color: var(--ink);
}
.bubble small { color: var(--ink2); font-size: .88em; }
.bubble b { color: var(--primary-d); }
.bubble::before { content: ''; position: absolute; left: -12px; top: 26px; border: 8px solid transparent; border-right: 12px solid #fff; border-left: 0; }
.bubble.pop { animation: pop .35s ease; }
@keyframes pop { 0% { transform: scale(.9); } 60% { transform: scale(1.04); } }

/* ---------- 首页 ---------- */
.home-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 0 32px 28px; overflow: auto; }
.hero { display: flex; align-items: center; gap: 26px; }
.hero-m .mascot { width: 140px; }
.hero-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.hero-txt .logo { justify-content: flex-start; }
.modes { display: grid; grid-template-columns: repeat(3, minmax(0, 300px)); gap: 26px; }
.mode-card {
  --c1: #ff9ec7; --c2: #ff5fa2; --cd: #d93b84;
  border: 0; border-radius: 28px; background: #fff; padding: 0 0 22px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  box-shadow: 0 8px 0 color-mix(in srgb, var(--c2) 30%, #e3d8f6), var(--shadow); transition: transform .18s, box-shadow .18s; overflow: hidden;
}
.mode-card:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: 0 14px 0 color-mix(in srgb, var(--c2) 30%, #e3d8f6), 0 22px 40px rgba(90, 60, 150, .2); }
.mode-card:hover .mc-ic { transform: scale(1.12) rotate(-8deg); }
.mode-card:active { transform: translateY(2px); }
.c-pink { --c1: #ffb3d4; --c2: #ff5fa2; --cd: #d93b84; }
.c-violet { --c1: #cdbbff; --c2: #8b6cff; --cd: #6a49e0; }
.c-mint { --c1: #a6f0d6; --c2: #2fc9a0; --cd: #1a9e7c; }
.c-sky { --c1: #b5e6ff; --c2: #3fb3f0; --cd: #2088c4; }
.c-sun { --c1: #ffe39a; --c2: #ffb020; --cd: #d98a00; }
.c-coral { --c1: #ffc6b3; --c2: #ff7d5c; --cd: #e05634; }
.mc-art { width: 100%; height: 150px; background: linear-gradient(135deg, var(--c1), var(--c2)); position: relative; display: grid; place-items: center; margin-bottom: 8px; }
.mc-art::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .5) 0 8%, transparent 9%), radial-gradient(circle at 85% 70%, rgba(255, 255, 255, .35) 0 6%, transparent 7%), radial-gradient(circle at 70% 15%, rgba(255, 255, 255, .3) 0 4%, transparent 5%); }
.mc-ic { width: 92px; height: 92px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--c2); font-size: 2.6rem; box-shadow: 0 6px 0 rgba(0, 0, 0, .08); transition: transform .25s; z-index: 1; }
.fk { position: absolute; z-index: 1; background: #fff; border-radius: 12px; padding: .25em .6em; font-weight: 900; font-size: 1.2rem; color: var(--cd); box-shadow: 0 4px 0 rgba(0, 0, 0, .1); font-family: var(--round); animation: tileBob 2.4s ease-in-out infinite; }
.fk.k1 { left: 18%; top: 18%; rotate: -12deg; } .fk.k2 { right: 16%; bottom: 16%; rotate: 10deg; animation-delay: -1.2s; }
.fk.em { background: transparent; box-shadow: none; font-size: 2rem; padding: 0; }
.mc-title { font-size: 1.6rem; font-weight: 900; }
.mc-desc { color: var(--ink2); font-size: 1rem; }
.mc-prog { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--ink2); margin: 4px 0 10px; }
.bar { width: 110px; height: 10px; border-radius: 9px; background: #f1ebfb; overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--c1), var(--c2)); border-radius: 9px; }
.mode-card .btn { background: linear-gradient(180deg, var(--c1), var(--c2)); box-shadow: 0 5px 0 var(--cd); }
.home-bottom { display: flex; gap: 18px; }
.pill-btn {
  border: 0; display: inline-flex; align-items: center; gap: .5em; padding: .7em 1.3em; border-radius: 999px; background: rgba(255, 255, 255, .92); font-size: 1.05rem; font-weight: 800;
  box-shadow: 0 5px 0 #e3d8f6, 0 10px 18px rgba(90, 60, 150, .12); transition: transform .12s; position: relative;
}
.pill-btn .ic { color: var(--primary); }
.pill-btn em { font-style: normal; background: #fff0f7; color: var(--primary-d); border-radius: 999px; padding: .05em .6em; font-size: .9em; }
.pill-btn:hover { transform: translateY(-3px); }
.pill-btn .dot { position: absolute; right: 6px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: #ff4d6d; border: 2px solid #fff; animation: pop 1s infinite; }

/* ---------- 列表页通用 ---------- */
.page { flex: 1; overflow: auto; padding: 4px 32px 40px; width: 100%; max-width: 1200px; margin: 0 auto; }
.page-head { display: flex; align-items: center; gap: 22px; margin: 4px 0 18px; }
.ph-m { width: 96px; flex: none; }
.page-head .bubble { flex: 1; }
.grp { display: flex; align-items: center; gap: .4em; font-size: 1.2rem; margin: 22px 0 12px; color: var(--head); }
.grp .ic { color: var(--primary); }
.stars { display: inline-flex; gap: 2px; }
.stars .st { color: #e9e1f5; display: inline-flex; }
.stars .st.on { color: #ffbe0b; filter: drop-shadow(0 2px 0 #e8a200); }
.stars .ic { width: 1.5em; height: 1.5em; }
.stars.xs .ic { width: 1.05em; height: 1.05em; }
.muted { color: var(--ink2); }
.cap {
  display: inline-grid; place-items: center; min-width: 2em; height: 2em; padding: 0 .45em; border-radius: .5em; font-weight: 900; font-family: var(--round);
  background: color-mix(in srgb, var(--fc) 45%, #fff); box-shadow: 0 3px 0 color-mix(in srgb, var(--fc) 85%, #7f6aa8); color: var(--ink); font-size: 1rem;
}

/* 课程卡片 */
.ls-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.ls-card {
  border: 0; background: #fff; border-radius: 20px; padding: 18px 12px 14px; display: flex; flex-direction: column; align-items: center; gap: 10px; position: relative;
  box-shadow: 0 6px 0 #ebe2f8, var(--shadow); transition: transform .15s;
}
.ls-card:not(.locked):hover { transform: translateY(-5px); }
.ls-card.locked { opacity: .6; cursor: not-allowed; background: #f8f5fd; }
.ls-card.next { outline: 4px solid var(--primary2); animation: nextPulse 1.8s ease-in-out infinite; }
@keyframes nextPulse { 50% { outline-color: color-mix(in srgb, var(--primary2) 35%, transparent); } }
.ls-no { position: absolute; left: 12px; top: 10px; width: 28px; height: 28px; border-radius: 50%; background: #f3edfc; font-weight: 900; display: grid; place-items: center; font-size: .9rem; color: var(--ink2); }
.ls-card.done .ls-no { background: #e3f8ee; color: var(--ok); }
.ls-tag { position: absolute; right: -6px; top: -10px; background: var(--primary); color: #fff; font-size: .78rem; font-weight: 800; padding: .25em .7em; border-radius: 999px; display: flex; align-items: center; gap: .25em; box-shadow: 0 3px 0 var(--primary-d); }
.ls-caps { display: flex; gap: 6px; margin-top: 8px; }
.ls-title { font-weight: 800; font-size: 1.02rem; }
.ls-lock { font-size: .85rem; color: var(--ink2); display: flex; align-items: center; gap: .3em; }

/* 练习卡片 */
.pr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pr-card {
  border: 0; background: #fff; border-radius: 24px; padding: 22px 16px 18px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  box-shadow: 0 6px 0 color-mix(in srgb, var(--c2) 25%, #ebe2f8), var(--shadow); transition: transform .15s;
}
.pr-card:hover { transform: translateY(-6px) rotate(-1deg); }
.pr-ic { width: 70px; height: 70px; border-radius: 22px; display: grid; place-items: center; font-size: 2rem; color: #fff; background: linear-gradient(135deg, var(--c1), var(--c2)); box-shadow: 0 5px 0 var(--cd); margin-bottom: 4px; }
.pr-title { font-size: 1.25rem; font-weight: 900; }
.pr-desc { color: var(--ink2); font-size: .92rem; min-height: 1.4em; }
.pr-best { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .88rem; color: var(--ink2); min-height: 3.2em; justify-content: center; }
.pr-best .ic { color: #ffb400; }
.pr-best .muted .ic { color: var(--primary); }
.pr-card .btn { background: linear-gradient(180deg, var(--c1), var(--c2)); box-shadow: 0 4px 0 var(--cd); }

/* 游戏卡片 */
.gm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.gm-card { border: 0; padding: 0; background: #fff; border-radius: 28px; overflow: hidden; text-align: left; display: flex; flex-direction: column; box-shadow: 0 8px 0 color-mix(in srgb, var(--c2) 28%, #ebe2f8), var(--shadow); transition: transform .18s; }
.gm-card:hover { transform: translateY(-8px) rotate(-1deg); }
.gm-art { height: 170px; background: linear-gradient(160deg, var(--c1), var(--c2)); position: relative; overflow: hidden; }
.gm-body { padding: 16px 20px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.gm-title { font-size: 1.45rem; font-weight: 900; display: flex; align-items: center; gap: .35em; }
.gm-title .ic { color: var(--c2); }
.gm-desc { color: var(--ink2); line-height: 1.55; font-size: .98rem; flex: 1; }
.gm-modes { display: flex; flex-wrap: wrap; gap: 6px; }
.gm-mode { display: inline-flex; align-items: center; gap: 4px; background: var(--soft); border-radius: 999px; padding: .25em .7em; font-size: .85rem; font-weight: 700; }
.gm-card .btn { align-self: flex-start; background: linear-gradient(180deg, var(--c1), var(--c2)); box-shadow: 0 5px 0 var(--cd); }
.ga { position: absolute; }
.a-balloon .ga { width: 70px; animation: floaty 4s ease-in-out infinite; }
.a-balloon .b1 { left: 18%; top: 22px; } .a-balloon .b2 { left: 42%; top: 6px; width: 84px; animation-delay: -1.3s; } .a-balloon .b3 { left: 68%; top: 30px; animation-delay: -2.4s; }
.a-race .track { left: 0; right: 0; bottom: 26px; height: 46px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .55) 0 26px, transparent 26px 52px); border-radius: 0; opacity: .7; }
.a-race .r1, .a-race .r2 { font-size: 3.4rem; bottom: 40px; animation: runBob .4s ease-in-out infinite alternate; }
.a-race .r1 { left: 20%; } .a-race .r2 { left: 46%; bottom: 52px; animation-delay: -.2s; }
.a-race .r3 { right: 10%; top: 20px; font-size: 3.6rem; rotate: 10deg; }
.a-mole .hole-art { left: 50%; bottom: 16px; width: 170px; height: 46px; translate: -50% 0; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, #6b4430, #4a2c1e 70%); }
.a-mole .m1 { left: 50%; bottom: 34px; translate: -50% 0; font-size: 4.6rem; animation: molePeek 2.2s ease-in-out infinite; }
.a-mole .m2 { right: 16%; top: 16px; font-size: 3rem; animation: hammer 2.2s ease-in-out infinite; transform-origin: 80% 80%; }
@keyframes molePeek { 0%, 100% { transform: translateY(20px); } 30%, 70% { transform: translateY(0); } }
@keyframes hammer { 0%, 40% { rotate: 20deg; } 55% { rotate: -40deg; } 70%, 100% { rotate: 20deg; } }
@keyframes runBob { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-8px) rotate(4deg); } }

/* ---------- 弹窗 ---------- */
.modal-ov { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(50, 30, 90, .35); backdrop-filter: blur(4px); opacity: 0; transition: opacity .2s; padding: 20px; }
.modal-ov.show { opacity: 1; }
.modal {
  position: relative; background: #fff; border-radius: 30px; padding: 28px 34px 30px; width: min(620px, 94vw); max-height: 92vh; overflow: auto;
  box-shadow: 0 20px 60px rgba(60, 30, 110, .3); transform: scale(.9) translateY(14px); transition: transform .25s cubic-bezier(.2, 1.4, .4, 1);
}
.modal-ov.show .modal { transform: none; }
.m-close { position: absolute; right: 16px; top: 16px; width: 38px; height: 38px; box-shadow: none; background: #f5f0fc; }
.m-head { text-align: center; margin-bottom: 14px; }
.m-head h2 { margin: 6px 0 4px; font-size: 1.6rem; display: flex; align-items: center; justify-content: center; gap: .35em; }
.m-head h2 .ic { color: var(--primary); }
.m-head p { margin: 0; color: var(--ink2); }
.m-mascot { width: 96px; margin: 0 auto; }
.m-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.m-btns.col { flex-direction: column; align-items: center; }
.m-btns.col .btn { min-width: 220px; }
.modal h4 { margin: 16px 0 10px; display: flex; align-items: center; gap: .4em; font-size: 1.05rem; }
.modal h4 .ic { color: var(--primary); }

/* 教学开头 */
.m-intro { width: min(700px, 94vw); }
.posture { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.pt { background: var(--soft); border-radius: 18px; padding: 14px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: .9rem; color: var(--ink2); }
.pt .ic { width: 34px; height: 34px; color: var(--primary); }
.pt b { color: var(--ink); font-size: 1.02rem; }
.kt-box { background: var(--soft); border-radius: 20px; padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.kt-row { display: flex; align-items: center; gap: 12px; font-size: 1.15rem; }
.kt-row .cap { font-size: 1.35rem; }
.kt { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.kt-sub { margin: 0; color: var(--ink2); font-size: .95rem; }
.tip { display: flex; gap: .5em; align-items: flex-start; background: #fff8e1; border-radius: 16px; padding: 12px 16px; margin: 14px 0 0; line-height: 1.55; }
.tip .ic { color: #f0a800; margin-top: .15em; }
.fchip { display: inline-block; padding: .1em .6em; border-radius: 999px; background: color-mix(in srgb, var(--fc) 55%, #fff); font-weight: 900; color: var(--ink); box-shadow: 0 2px 0 color-mix(in srgb, var(--fc) 80%, #7f6aa8); }

/* 结算 */
.m-res { width: min(600px, 94vw); text-align: center; }
.res-top h2 { margin: 6px 0 0; font-size: 1.8rem; }
.res-stars { display: flex; justify-content: center; gap: 10px; margin: 10px 0 14px; }
.bigst { color: #eee7f7; display: inline-flex; transition: transform .3s; }
.bigst .ic { width: 64px; height: 64px; }
.bigst:nth-child(2) .ic { width: 80px; height: 80px; margin-top: -12px; }
.bigst.on { color: #ffbe0b; filter: drop-shadow(0 4px 0 #e8a200); animation: starIn .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes starIn { from { transform: scale(0) rotate(-90deg); } }
.res-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.rs { background: var(--soft); border-radius: 16px; padding: 12px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rs .ic { color: var(--primary); width: 26px; height: 26px; }
.rs-l { font-size: .85rem; color: var(--ink2); }
.rs b { font-size: 1.2rem; }
.res-lines { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; align-items: center; font-size: .98rem; }
.res-lines .ic { color: var(--primary); }
.badge.rec { display: inline-flex; align-items: center; gap: .3em; background: linear-gradient(90deg, #ffd54a, #ffb300); color: #7a4b00; font-weight: 900; padding: .3em 1em; border-radius: 999px; animation: pop .6s ease 2; }
.badge.rec .ic { color: #7a4b00; }
.gain .ic { color: #ffb400 !important; }
.unlock { background: #fff0f7; border-radius: 14px; padding: .45em 1em; display: inline-flex; align-items: center; gap: .4em; font-weight: 800; }
.new-stk { font-size: 1.6rem; animation: pop .8s ease infinite alternate; display: inline-block; }
.weak { display: inline-flex; align-items: center; gap: .4em; }
.weak .cap { font-size: .9rem; }

/* 选玩法 */
.m-mode { width: min(720px, 94vw); }
.mode-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mode-tile {
  border: 3px solid transparent; background: var(--soft); border-radius: 22px; padding: 16px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: .92rem; color: var(--ink2);
  transition: transform .15s, border-color .15s;
}
.mode-tile:hover { transform: translateY(-4px); border-color: var(--primary2); background: #fff; }
.mode-tile b { color: var(--ink); font-size: 1.15rem; }
.mode-tile em { font-style: normal; font-size: .85rem; display: flex; align-items: center; gap: .25em; }
.mode-tile em .ic { color: #ffb400; }
.mt-ic { width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(135deg, var(--primary2), var(--primary)); color: #fff; font-size: 1.6rem; box-shadow: 0 4px 0 var(--primary-d); }
.pet-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pet { border: 3px solid transparent; background: var(--soft); border-radius: 18px; padding: 10px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; transition: transform .12s; }
.pet span { font-size: 2.4rem; }
.pet:hover { transform: translateY(-3px); }
.pet.sel { border-color: var(--primary); background: #fff; box-shadow: 0 4px 0 var(--primary2); }
.seg-row { display: flex; gap: 10px; }
.segb { flex: 1; border: 3px solid transparent; background: var(--soft); border-radius: 16px; padding: 10px; font-weight: 800; font-size: 1rem; display: flex; align-items: center; justify-content: center; gap: .4em; }
.segb .ic { color: var(--primary); }
.segb.sel { border-color: var(--primary); background: #fff; }

/* 皮肤 / 设置 */
.th-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.th-card { border: 3px solid transparent; background: var(--soft); border-radius: 20px; padding: 12px; display: flex; flex-direction: column; gap: 8px; align-items: stretch; transition: transform .12s; }
.th-card:not(.locked):hover { transform: translateY(-3px); }
.th-card.sel { border-color: var(--primary); background: #fff; }
.th-card.locked { opacity: .55; cursor: not-allowed; }
.th-sw { height: 80px; border-radius: 14px; position: relative; display: block; }
.th-sw i { position: absolute; right: 14px; bottom: 14px; width: 34px; height: 34px; border-radius: 50%; border: 4px solid #fff; }
.th-n { font-weight: 900; font-size: 1.1rem; display: flex; align-items: center; gap: .35em; }
.th-n .ic { color: var(--primary); }
.th-need { font-size: .85rem; color: var(--ink2); text-align: left; }
.set-list { display: flex; flex-direction: column; gap: 12px; }
.set-row { display: flex; align-items: center; gap: 12px; background: var(--soft); border-radius: 18px; padding: 12px 16px; font-weight: 800; font-size: 1.05rem; }
.set-row > .ic { color: var(--primary); }
.set-row > span { flex: 1; }
.set-row input { width: 150px; font-size: 1rem; }
.tgl { width: 60px; height: 34px; border-radius: 999px; border: 0; background: #ddd3ee; position: relative; transition: background .2s; }
.tgl i { position: absolute; left: 4px; top: 4px; width: 26px; height: 26px; border-radius: 50%; background: #fff; transition: left .2s; box-shadow: 0 2px 4px rgba(0, 0, 0, .15); }
.tgl.on { background: var(--primary); }
.tgl.on i { left: 30px; }

/* 贴纸册 */
.stk-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.stk { border: 0; border-radius: 22px; aspect-ratio: 1 / 1.05; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; position: relative; }
.stk.on { background: #fff; box-shadow: 0 6px 0 #ebe2f8, var(--shadow); animation: scrIn .4s ease backwards; animation-delay: var(--d); }
.stk.on:hover { transform: rotate(-4deg) scale(1.05); }
.stk.on .se { font-size: 3.4rem; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .08)); }
.stk.wig .se { animation: wiggle .6s ease; }
@keyframes wiggle { 20% { transform: rotate(-18deg) scale(1.2); } 50% { transform: rotate(14deg) scale(1.25); } 80% { transform: rotate(-6deg); } }
.stk .sn { font-weight: 800; font-size: .92rem; }
.stk.off { background: rgba(255, 255, 255, .5); border: 3px dashed #d9cdef; color: var(--ink3); }
.stk.off .ic { width: 30px; height: 30px; }
.stk .new { position: absolute; top: -8px; right: -6px; background: #ff4d6d; color: #fff; font-style: normal; font-size: .72rem; font-weight: 900; padding: .2em .55em; border-radius: 999px; }

/* ---------- 打字页 ---------- */
.scr-run { overflow: hidden; }
.run-head { display: flex; align-items: center; gap: 12px; padding: 0 28px; flex: none; max-width: 1200px; width: 100%; margin: 0 auto; }
.chip { display: inline-flex; align-items: center; gap: .35em; background: #fff; border-radius: 999px; padding: .4em .95em; font-size: .98rem; box-shadow: 0 3px 0 #ebe2f8; white-space: nowrap; }
.chip .ic { color: var(--primary); }
.chip b { font-size: 1.1em; font-family: var(--round); }
.chip.tag { background: var(--primary); color: #fff; box-shadow: 0 3px 0 var(--primary-d); font-weight: 800; }
.chip.tag .ic { color: #fff; }
.pbar { flex: 1; height: 14px; border-radius: 9px; background: rgba(255, 255, 255, .8); overflow: hidden; box-shadow: inset 0 2px 3px rgba(90, 60, 150, .1); }
.pbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--primary2), var(--primary)); border-radius: 9px; transition: width .2s; }
.run-main { flex: 1; min-height: 0; display: flex; align-items: center; gap: 18px; padding: 10px 28px; max-width: 1200px; width: 100%; margin: 0 auto; }
.run-m { width: 170px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; align-self: center; }
.run-m .mascot { width: 92px; }
.run-m .bubble { font-size: .92rem; padding: 10px 14px; text-align: center; }
.run-m .bubble::before { left: 50%; top: -12px; translate: -50% 0; border: 8px solid transparent; border-bottom: 12px solid #fff; border-top: 0; }
.run-m { flex-direction: column-reverse; }
.run-m .bubble::before { top: auto; bottom: -12px; border-bottom: 0; border-top: 12px solid #fff; }
.text-card { flex: 1; background: #fff; border-radius: 28px; box-shadow: var(--shadow); padding: 22px 26px; display: flex; flex-direction: column; justify-content: center; gap: 16px; min-height: 0; height: 100%; max-height: 260px; }
#nxt { opacity: .45; }
.tl { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; font-family: var(--round); line-height: 1.1; }
.tl.big { font-size: clamp(1.7rem, 3.1vw, 2.7rem); }
.tl.preview { font-size: clamp(1rem, 1.6vw, 1.35rem); }
.tl.race { font-size: clamp(1.25rem, 2.1vw, 1.8rem); justify-content: flex-start; row-gap: .3em; }
.seg { display: inline-flex; flex-direction: column; align-items: center; }
.seg.lab { margin: 0 .05em; }
.seg .zh { font-family: var(--font); font-size: .62em; font-weight: 800; color: var(--ink); line-height: 1.2; }
.seg .py { font-family: var(--font); font-size: .4em; color: var(--ink2); line-height: 1.3; }
.chs { display: inline-flex; }
.ch { display: inline-block; min-width: .5em; text-align: center; padding: .06em .03em .1em; border-radius: .18em; color: #c3b8da; position: relative; transition: color .12s; }
.ch.sp { min-width: .55em; }
.ch.done { color: var(--ok); }
.ch.done.err { color: #ff8a3c; }
.ch.cur { color: var(--ink); background: color-mix(in srgb, var(--primary) 16%, #fff); }
.ch.cur::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: .02em; height: .1em; border-radius: 9px; background: var(--primary); animation: blink 1s steps(2, start) infinite; }
.ch.cur.err { background: #ffe1e7; color: var(--bad); }
.ch.sp.cur::before { content: '空格'; position: absolute; left: 50%; top: 50%; translate: -50% -50%; font-family: var(--font); font-size: .32em; font-weight: 800; color: #fff; background: var(--primary); padding: .15em .45em; border-radius: .4em; white-space: nowrap; }
.preview .ch, .preview .ch.cur { background: none; color: var(--ink2); }
.preview .ch::after, .preview .ch::before { display: none; }
@keyframes blink { 50% { opacity: .2; } }
.shake { animation: shake .3s ease; }
@keyframes shake { 20%, 60% { translate: -5px 0; } 40%, 80% { translate: 5px 0; } }

.kb-zone { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 0 12px; }
.kb-hint { font-size: 1.15rem; display: flex; align-items: center; gap: .4em; min-height: 2em; color: var(--head); }
.kb-hint .ic { color: var(--primary); }
.kb-hint .hint-sub { color: var(--ink2); font-size: .9em; }
kbd { display: inline-grid; place-items: center; min-width: 1.8em; padding: .1em .5em; border-radius: .4em; background: #fff; box-shadow: 0 3px 0 #d6cbe9; font-family: var(--round); font-weight: 900; color: var(--ink); }
.kb { display: flex; flex-direction: column; gap: calc(var(--u) * .1); padding: calc(var(--u) * .2); background: rgba(255, 255, 255, .92); border-radius: calc(var(--u) * .36); box-shadow: var(--shadow); }
.kb-row { display: flex; gap: calc(var(--u) * .1); justify-content: center; }
.key {
  width: calc(var(--u) * var(--w, 1) + var(--u) * .1 * (var(--w, 1) - 1)); height: var(--u); border-radius: calc(var(--u) * .2); position: relative;
  background: color-mix(in srgb, var(--fc) 30%, #fff); box-shadow: 0 calc(var(--u) * .07) 0 color-mix(in srgb, var(--fc) 70%, #b9aed3);
  display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--round); font-weight: 900; font-size: calc(var(--u) * .36); color: var(--ink);
  transition: transform .08s, background .15s;
}
.key .k2 { font-size: .62em; line-height: 1; opacity: .6; }
.key .k1.sym { line-height: 1; }
.key .kl { font-family: var(--font); font-size: .6em; font-weight: 800; }
.key .bump { position: absolute; bottom: 18%; width: 28%; height: 3px; border-radius: 3px; background: color-mix(in srgb, var(--fc) 60%, #6e5a96); }
.key.target { background: var(--fc); z-index: 2; transform: translateY(-2px) scale(1.06); animation: tgt 1s ease-in-out infinite; }
@keyframes tgt { 0%, 100% { box-shadow: 0 calc(var(--u) * .07) 0 color-mix(in srgb, var(--fc) 70%, #6e5a96), 0 0 0 3px #fff, 0 0 0 7px var(--fc); } 50% { box-shadow: 0 calc(var(--u) * .07) 0 color-mix(in srgb, var(--fc) 70%, #6e5a96), 0 0 0 3px #fff, 0 0 0 11px color-mix(in srgb, var(--fc) 40%, transparent); } }
.key.glow { background: var(--fc); animation: tgt 1s ease-in-out infinite; z-index: 2; }
.key.down { transform: translateY(calc(var(--u) * .06)); box-shadow: none; filter: brightness(.95); }
.key.bad { background: #ff8fa3 !important; animation: shake .25s; }
.kb-line { display: flex; align-items: flex-end; gap: calc(var(--u) * .3); }
.hand-side { width: calc(var(--u) * 4.2); flex: none; }
.hands { width: 100%; height: auto; overflow: visible; display: block; }
.hands .skin { fill: #ffe6d8; stroke: #eab49c; stroke-width: 2.5; }
.hands .palm { fill: #ffe6d8; stroke: #eab49c; stroke-width: 2.5; }
.hands .tip { fill: var(--fc); opacity: .7; }
.hands .fg { transition: transform .15s; }
.hands.any .fg:not(.on) .tip { opacity: .35; }
.hands .fg.on .skin { fill: var(--fc); stroke: color-mix(in srgb, var(--fc) 60%, #6e5a96); }
.hands .fg.on .tip { fill: #fff; opacity: .85; }
.hands .fg.on { animation: fingerBob .7s ease-in-out infinite; }
@keyframes fingerBob { 50% { transform: translateY(-5px); } }
.hand-lab { font-size: 15px; font-weight: 800; fill: #d79a80; text-anchor: middle; }

/* ---------- 游戏通用 ---------- */
.hud { display: flex; align-items: center; gap: 12px; padding: 0 28px 10px; flex: none; max-width: 1200px; width: 100%; margin: 0 auto; }
.hud .ibtn { margin-left: auto; }
.hearts { display: inline-flex; gap: 4px; background: #fff; border-radius: 999px; padding: .35em .8em; box-shadow: 0 3px 0 #ebe2f8; }
.hrt { color: #eadff5; display: inline-flex; }
.hrt.on { color: #ff4d6d; }
.hrt .ic { width: 1.5em; height: 1.5em; }
.hearts.hurt { animation: shake .4s; }
.chip.combo { opacity: 0; transform: scale(.6); transition: .2s; background: linear-gradient(90deg, #ffd54a, #ff9a1f); color: #6b3d00; box-shadow: 0 3px 0 #d98a00; }
.chip.combo .ic { color: #6b3d00; }
.chip.combo.show { opacity: 1; transform: none; }
.cdown { position: absolute; inset: 0; display: grid; place-items: center; z-index: 20; pointer-events: none; }
.cdown span { font-size: 7rem; font-weight: 900; color: #fff; -webkit-text-stroke: 4px var(--primary); paint-order: stroke fill; text-shadow: 0 8px 0 var(--primary-d); animation: cd .7s ease; font-family: var(--round); }
.cdown span.go { font-size: 5rem; font-family: var(--font); }
@keyframes cd { from { transform: scale(2); opacity: 0; } 40% { transform: scale(1); opacity: 1; } }
.float-t { position: absolute; z-index: 15; translate: -50% 0; font-weight: 900; font-size: 1.6rem; color: #fff; -webkit-text-stroke: 3px var(--primary); paint-order: stroke fill; pointer-events: none; animation: floatUp .9s ease forwards; font-family: var(--round); }
.float-t.gold { -webkit-text-stroke-color: #e09000; font-size: 2rem; }
@keyframes floatUp { to { transform: translateY(-60px); opacity: 0; } }
.banner { position: absolute; left: 50%; top: 30%; translate: -50% 0; z-index: 18; background: #fff; border-radius: 999px; padding: .6em 1.6em; font-size: 1.5rem; font-weight: 900; box-shadow: var(--shadow); display: flex; gap: .4em; align-items: center; animation: bannerIn 1.6s ease forwards; }
.banner .ic { color: var(--primary); }
@keyframes bannerIn { 0% { transform: scale(.4); opacity: 0; } 15% { transform: scale(1.08); opacity: 1; } 25% { transform: scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(-20px); } }

/* 气球 */
.sky { flex: 1; position: relative; margin: 0 28px 22px; border-radius: 30px; overflow: hidden; background: linear-gradient(180deg, #8fd3ff 0%, #c7ebff 55%, #fff0f7 100%); box-shadow: var(--shadow), inset 0 0 0 4px rgba(255, 255, 255, .6); }
.cloud { position: absolute; width: 160px; height: 50px; background: #fff; border-radius: 50px; opacity: .85; animation: cloud 40s linear infinite; }
.cloud::before, .cloud::after { content: ''; position: absolute; background: #fff; border-radius: 50%; }
.cloud::before { width: 70px; height: 70px; left: 24px; top: -34px; }
.cloud::after { width: 54px; height: 54px; left: 80px; top: -22px; }
.cloud.c1 { top: 14%; left: -10%; } .cloud.c2 { top: 42%; left: 40%; animation-duration: 55s; transform: scale(.7); opacity: .7; } .cloud.c3 { top: 70%; left: 75%; animation-duration: 48s; transform: scale(.85); }
@keyframes cloud { from { translate: 0 0; } to { translate: 120vw 0; } }
.grass { position: absolute; left: 0; right: 0; bottom: 0; height: 36px; background: radial-gradient(circle at 20px -6px, transparent 22px, #8fdc7a 23px) repeat-x; background-size: 40px 36px; opacity: .9; }
.bl { position: absolute; left: 0; top: 0; will-change: transform; z-index: 5; }
.bl .bsvg { width: 100%; display: block; filter: drop-shadow(0 6px 6px rgba(60, 40, 120, .15)); }
.bl-lab { position: absolute; left: 0; right: 0; top: 0; height: 72%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; pointer-events: none; }
.bl-letter { font-family: var(--round); font-weight: 900; font-size: 2.7rem; color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .15); }
.bl-zh { font-weight: 900; font-size: 1.25rem; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .18); }
.bl-py { font-size: .8rem; color: #fff; font-weight: 700; text-shadow: 0 1px 0 rgba(0, 0, 0, .2); }
.bl-word { background: #fff; border-radius: 999px; padding: .1em .5em; font-family: var(--round); font-weight: 900; font-size: 1.15rem; color: var(--ink); box-shadow: 0 3px 0 rgba(0, 0, 0, .12); white-space: nowrap; }
.bl-word i { font-style: normal; }
.bl-word i.t { color: var(--primary); }
.bl.locked .bl-word, .bl.locked.one .bl-letter { outline: 3px solid #fff; }
.bl.locked { z-index: 8; }
.bl.locked .bsvg { filter: drop-shadow(0 0 10px #fff) drop-shadow(0 6px 6px rgba(60, 40, 120, .2)); }
.bl-badge { position: absolute; right: 2px; top: 4px; width: 30px; height: 30px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: #ff4d6d; box-shadow: 0 2px 0 rgba(0, 0, 0, .1); }
.bl-badge.g { color: #ffb400; }
.bl.shake .bsvg { animation: shake .3s; }
.bl.fly { transition: transform 1.2s ease-in, opacity 1.2s; opacity: 0; }

/* 赛跑 */
.track { position: relative; margin: 0 28px 14px; background: linear-gradient(180deg, #9be38a, #7fd46e); border-radius: 28px; padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow); flex: none; }
.lane { display: flex; align-items: center; gap: 12px; position: relative; }
.lane-n { width: 64px; text-align: center; font-weight: 900; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .15); font-size: 1.05rem; }
.lane.me .lane-n { background: var(--primary); border-radius: 999px; padding: .2em 0; text-shadow: none; box-shadow: 0 3px 0 var(--primary-d); }
.runway { flex: 1; height: 62px; border-radius: 16px; background: repeating-linear-gradient(90deg, #f6c99a 0 40px, #f1bd88 40px 80px); position: relative; box-shadow: inset 0 3px 0 rgba(0, 0, 0, .06); }
.runway::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 16px; background: repeating-conic-gradient(#333 0 25%, #fff 0 50%) 0 0 / 8px 8px; border-radius: 0 16px 16px 0; }
.runner { --p: 0; position: absolute; top: 50%; left: calc(var(--p) * (100% - 70px)); translate: 0 -50%; transition: left .3s ease-out; display: flex; flex-direction: column; align-items: center; z-index: 2; }
.runner .pe { font-size: 2.6rem; line-height: 1; display: block; }
.runner.run .pe { animation: runBob .22s ease-in-out infinite alternate; }
.runner.win .pe { animation: winJump .5s ease 3; }
@keyframes winJump { 50% { transform: translateY(-20px) scale(1.15); } }
.rtag { position: absolute; top: -18px; background: #fff; border-radius: 999px; font-size: .72rem; font-weight: 800; padding: .05em .6em; white-space: nowrap; box-shadow: 0 2px 0 rgba(0, 0, 0, .1); }
.fin { color: #fff; font-size: 1.6rem; display: inline-flex; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .15)); }
.rank { position: absolute; right: 52px; top: 50%; translate: 0 -50%; z-index: 3; }
.rank b { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #ffd54a; color: #7a4b00; font-size: 1.2rem; box-shadow: 0 3px 0 #d99c00; animation: pop .5s; }
.race-text { margin: 0 28px; max-height: none; height: auto; flex: 1; min-height: 0; align-self: stretch; max-width: none; justify-content: center; overflow: auto; }
.scr-race .kb-hint { justify-content: center; padding: 10px 0 16px; }

/* 打地鼠 */
.chip.timer { gap: .5em; }
.tbar { width: 140px; height: 10px; border-radius: 9px; background: #f1ebfb; overflow: hidden; display: inline-block; }
.tbar i { display: block; height: 100%; background: linear-gradient(90deg, #8fdc7a, #2fc9a0); border-radius: 9px; }
.chip.timer.hurry { background: #fff0f3; animation: pop .5s infinite; }
.chip.timer.hurry .tbar i { background: linear-gradient(90deg, #ff8fa3, #ff4d6d); }
.field { flex: 1; position: relative; margin: 0 28px 22px; border-radius: 30px; background: linear-gradient(180deg, #b8ef9f, #8fdc7a 60%, #77cc62); box-shadow: var(--shadow), inset 0 0 0 4px rgba(255, 255, 255, .5); display: grid; place-items: center; overflow: hidden; }
.field::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .5) 0 3px, transparent 4px), radial-gradient(circle at 80% 30%, rgba(255, 255, 255, .5) 0 3px, transparent 4px), radial-gradient(circle at 40% 80%, rgba(255, 255, 255, .5) 0 3px, transparent 4px); background-size: 160px 120px; }
.holes { display: grid; grid-template-columns: repeat(3, 1fr); gap: min(2.5vh, 26px) min(6vw, 90px); position: relative; }
.hole { width: min(230px, 27vh); height: min(190px, 22vh); position: relative; }
.mbox { position: absolute; left: 0; right: 0; bottom: 18%; height: 120%; overflow: hidden; border-radius: 0 0 50% 50% / 0 0 30% 30%; z-index: 2; }
.mole { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; transform: translateY(105%); transition: transform .18s ease-out; }
.hole.up .mole { transform: translateY(8%); }
.hole.hit .mole { transform: translateY(30%) scaleY(.85); transition: transform .12s; }
.mface { font-size: min(6.6rem, 12.5vh); line-height: 1; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .1)); }
.msign { background: #fff; border-radius: 14px; min-width: 1.6em; padding: 0 .3em; text-align: center; font-family: var(--round); font-weight: 900; font-size: min(2.6rem, 5.6vh); color: var(--ink); box-shadow: 0 4px 0 #d6cbe9; margin-bottom: -6px; position: relative; z-index: 1; }
.hole.gold .msign { background: #ffd54a; box-shadow: 0 4px 0 #d99c00; }
.hole.gold .msign::before { content: '👑'; position: absolute; top: -.9em; left: 50%; translate: -50% 0; font-size: .8em; }
.hole.hit .msign { background: #c9f5d9; }
.hole.hit .mole::after { content: '💫'; position: absolute; top: 30%; left: 50%; translate: -50% 0; font-size: min(2.4rem, 5vh); animation: spin .6s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }
.dirt { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, #3e2618 0 42%, #6b4430 55%, #a0704e 68%, #c08a60 74%, transparent 75%); z-index: 1; filter: drop-shadow(0 6px 0 rgba(60, 120, 40, .25)); }
.hole::after { content: ''; position: absolute; left: 4%; right: 4%; bottom: 0; height: 22%; border-radius: 0 0 50% 50%; background: #9a6a4a; z-index: 3; clip-path: inset(50% 0 0 0); }

/* 提示 */
#toast {
  position: fixed; left: 50%; top: 20px; translate: -50% -140%; z-index: 80; background: #fff; border-radius: 999px; padding: .7em 1.4em; box-shadow: 0 10px 30px rgba(60, 30, 110, .25);
  font-size: 1.05rem; display: flex; align-items: center; gap: .5em; transition: translate .3s cubic-bezier(.2, 1.4, .4, 1), opacity .3s; pointer-events: none; max-width: 90vw; opacity: 0;
}
#toast.show { translate: -50% 0; opacity: 1; }
#toast .ic { color: var(--primary); }
#fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 70; }

/* 矮屏幕压一压 */
@media (max-height: 760px) {
  .topbar { padding: 10px 24px; }
  .mc-art { height: 120px; }
  .mc-ic { width: 76px; height: 76px; font-size: 2.1rem; }
  .home-main { gap: 18px; }
  .hero-m .mascot { width: 110px; }
  .text-card { padding: 14px 22px; }
  .run-m .mascot { width: 76px; }
  .track { padding: 10px 16px; gap: 6px; }
  .runway { height: 50px; }
  .runner .pe { font-size: 2.1rem; }
}
@media (max-width: 1100px) {
  .ls-grid { grid-template-columns: repeat(4, 1fr); }
  .pr-grid { grid-template-columns: repeat(3, 1fr); }
  .stk-grid { grid-template-columns: repeat(5, 1fr); }
  .tb-left, .tb-right { min-width: 0; }
  .run-m { display: none; }
}