@font-face {
  font-family: "Toy Pinyin";
  src: url("../fonts/toy-pinyin-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: block;
}
:root {
  --sky: #8fd6ff;
  --sky-soft: #d4f0ff;
  --sea: #3fb8e8;
  --grass: #7fd36b;
  --grass-dark: #4aa84a;
  --sun: #ffc531;
  --sun-dark: #e09a12;
  --coral: #ff7a59;
  --coral-dark: #d9583b;
  --berry: #ff5c8a;
  --violet: #9b7bff;
  --ink: #3b2a1f;
  --ink-soft: #7a6553;
  --cream: #fff8e8;
  --card: #ffffff;
  --radius: 26px;
  --cn: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  --py: "Toy Pinyin", "Quicksand", sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--cn);
  color: var(--ink);
  background: #fdeec4 radial-gradient(#f7dc9a 2px, transparent 2.5px) 0 0 / 26px 26px;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
button:focus-visible, input:focus-visible { outline: 4px solid #5b8def; outline-offset: 3px; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
.py { font-family: var(--py); font-weight: 400; }

/* 手机全屏显示；宽屏时居中成手机比例的画框。 */
.bl-app { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--sky-soft); }
/* 竖屏：铺满屏幕，平板竖放时限制内容宽度。横屏：960×560 画布由脚本整体缩放并居中。 */
.bl-app[data-layout="tall"] { max-width: 600px; margin: 0 auto; }
.bl-app[data-layout="wide"] { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
@media (hover: hover) {
  .btn:hover, .icon-btn:hover, .preset:hover, .tone-key:hover { filter: brightness(1.06); }
  .station:hover .disc, .balloon:hover, .piece:hover, .spot:hover { filter: brightness(1.08); }
}
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; animation: screen-in .45s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes screen-in { from { opacity: 0; transform: scale(.96); } }

/* 粗圆按钮，按下时下沉，适合小手点按。 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 64px; padding: 0 30px; border-radius: 999px; font-size: 22px; font-weight: 800; color: #fff; background: var(--coral); box-shadow: 0 6px 0 var(--coral-dark); transition: transform .08s, box-shadow .08s; }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--coral-dark); }
.btn.green { background: var(--grass); box-shadow: 0 6px 0 var(--grass-dark); }
.btn.green:active { box-shadow: 0 2px 0 var(--grass-dark); }
.btn.sun { background: var(--sun); color: var(--ink); box-shadow: 0 6px 0 var(--sun-dark); }
.btn.sun:active { box-shadow: 0 2px 0 var(--sun-dark); }
.btn.ghost { background: #fff; color: var(--ink); box-shadow: 0 6px 0 #e3d6bf; }
.btn.ghost:active { box-shadow: 0 2px 0 #e3d6bf; }
.btn.small { min-height: 48px; padding: 0 20px; font-size: 18px; }
.icon-btn { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; font-size: 26px; box-shadow: 0 5px 0 #e3d6bf; }
.icon-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #e3d6bf; }

/* 对话气泡。voice 标签表示此处后期接入配音。 */
.bubble { position: relative; padding: 14px 18px; border-radius: 22px; background: #fff; font-size: 19px; font-weight: 700; line-height: 1.45; box-shadow: 0 6px 0 rgba(59, 42, 31, .08); }
.bubble::after { content: ""; position: absolute; left: -10px; top: 22px; border: 10px solid transparent; border-right-color: #fff; border-left: 0; }
.bubble.tail-down::after { left: 34px; top: auto; bottom: -10px; border: 10px solid transparent; border-top-color: #fff; border-bottom: 0; }
.voice-tag { display: inline-flex; align-items: center; gap: 4px; margin-right: 6px; padding: 2px 8px; border-radius: 999px; background: #eef4ff; color: #5b8def; font-size: 12px; font-weight: 800; vertical-align: 3px; }

/* 弹层与提示。 */
.overlay { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: 24px; background: rgba(40, 70, 100, .45); animation: fade-in .25s; }
.sheet { position: relative; width: 100%; max-height: 100%; overflow: auto; padding: 26px 22px 24px; border-radius: 32px; background: var(--cream); box-shadow: 0 10px 0 rgba(0, 0, 0, .12); animation: pop-in .4s cubic-bezier(.2, .9, .3, 1.3); }
.sheet h2 { font-size: 24px; font-weight: 900; text-align: center; }
.toast { position: absolute; left: 50%; bottom: 120px; z-index: 40; transform: translateX(-50%); padding: 12px 22px; border-radius: 999px; background: rgba(59, 42, 31, .88); color: #fff; font-size: 16px; font-weight: 700; white-space: nowrap; animation: pop-in .3s; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes pop-in { from { opacity: 0; transform: scale(.7); } }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.shake { animation: shake .4s; }

/* 小百灵：按 data 属性显示对应部件。 */
.lark { display: block; width: 100%; height: auto; overflow: visible; }
.lark .lk-v { display: none; }
.lark[data-eye="open"] .lk-eye-open, .lark[data-eye="up"] .lk-eye-open,
.lark[data-eye="happy"] .lk-eye-happy, .lark[data-eye="closed"] .lk-eye-closed, .lark[data-eye="line"] .lk-eye-line,
.lark[data-beak="closed"] .lk-beak-closed, .lark[data-beak="talk"] .lk-beak-closed, .lark[data-beak="talk"] .lk-beak-smile,
.lark[data-beak="smile"] .lk-beak-smile, .lark[data-beak="a"] .lk-beak-a, .lark[data-beak="o"] .lk-beak-o, .lark[data-beak="e"] .lk-beak-e,
.lark[data-beak="i"] .lk-beak-i, .lark[data-beak="u"] .lk-beak-u, .lark[data-beak="ü"] .lk-beak-ü,
.lark[data-fx="sing"] .lk-fx-sing, .lark[data-fx="think"] .lk-fx-think, .lark[data-fx="oops"] .lk-fx-oops,
.lark[data-fx="cheer"] .lk-fx-cheer, .lark[data-fx="sleepy"] .lk-fx-sleepy { display: inline; }
.lark[data-eye="up"] .lk-eye-open { transform: translate(3px, -4px); }
.lark .lk-eye-open { transform-box: fill-box; transform-origin: center; animation: lk-blink 4.2s infinite; }
.lark[data-beak="talk"] .lk-beak-smile { animation: lk-talk .36s steps(2) infinite; }
.lark .lk-wing { transform-box: fill-box; transform-origin: 50% 8%; transition: transform .3s; }
.lark[data-mood="cheer"] .lk-wing-l { transform: rotate(62deg); }
.lark[data-mood="cheer"] .lk-wing-r { transform: rotate(-62deg); }
.lark[data-mood="cheer"], .lark[data-mood="happy"] { animation: bounce .7s ease-in-out infinite; }
.lark .lk-fx-sing, .lark .lk-fx-sleepy, .lark .lk-fx-cheer { animation: lk-float 1.6s ease-in-out infinite; }
.flying .lark .lk-wing-l { animation: lk-flap-l .22s ease-in-out infinite alternate; }
.flying .lark .lk-wing-r { animation: lk-flap-r .22s ease-in-out infinite alternate; }
.bob .lark { animation: bounce 2.6s ease-in-out infinite; }
@keyframes lk-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
@keyframes lk-talk { 50% { opacity: 0; } }
@keyframes lk-float { 50% { transform: translateY(-6px); } }
@keyframes lk-flap-l { from { transform: rotate(20deg); } to { transform: rotate(95deg); } }
@keyframes lk-flap-r { from { transform: rotate(-20deg); } to { transform: rotate(-95deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}