:root {
    color: #6b3a50;
    background: #b0d1fc;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-synthesis: none;
    letter-spacing: 0;

    /* 画布外留白（letterbox/pillarbox）的梦幻延伸背景：逐段取自 sky/city/street 三层合成后的
       实际逐行均色（顶部晴空蓝 → 城市粉紫 → 草地嫩绿 → 街面奶油粉），宽屏时画布铺满视口高度，
       渐变按视口高度百分比与画面纵向色带对齐，两侧留白像同一张画的延伸而不是冷灰蓝硬边 */
    --stage-backdrop: linear-gradient(
        180deg,
        #b0d1fc 0%,
        #bed9fb 20%,
        #c5defc 35%,
        #ddd8ee 42%,
        #ecd2e3 50%,
        #ebcbe0 60%,
        #dfe3c2 66%,
        #b7f78f 73%,
        #aef185 82%,
        #b4ee92 90%,
        #f7f0ee 95%,
        #fbefe4 100%
    );

    /* 樱花奇比调色板（对齐 ART_ASSET_SPEC 与 public/assets/game/ 素材描边） */
    --ink: #6b3a50;            /* 正文 */
    --ink-strong: #6b2d47;
    --muted: #bb8ba0;
    --paper: #fff5f9;          /* 纸白面板 */
    --pink: #f27fa5;           /* 樱花粉强调 */
    --pink-strong: #e0608a;
    --pink-soft: #ffd3e5;
    --pink-pale: #fbe4ee;
    --stroke: #f2a9c6;         /* 面板描边 */
    --stroke-soft: #e5b3c8;
    --line: #f0cfdd;           /* 分隔线 */
    --radius-panel: 26px;      /* 面板：更圆润的卡通感 */
    --radius-card: 18px;       /* 卡片 */
    --radius-control: 14px;    /* 输入框/分段控件 */
    --shadow-panel: 0 14px 34px rgba(233, 111, 155, .18);
    /* 弹性缓动：轻微过冲的果冻感，用于面板/弹窗入场与选中反馈 */
    --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);

    /* 手绘描边文字：em 随字号缩放，--text-stroke-color 可按元素覆盖 */
    --text-stroke-color: #d97a99;
    --text-outline:
        0 0.07em 0 var(--text-stroke-color), 0 -0.055em 0 var(--text-stroke-color),
        0.06em 0 0 var(--text-stroke-color), -0.06em 0 0 var(--text-stroke-color),
        0.045em 0.045em 0 var(--text-stroke-color), -0.045em 0.045em 0 var(--text-stroke-color),
        0.045em -0.045em 0 var(--text-stroke-color), -0.045em -0.045em 0 var(--text-stroke-color),
        0 0.13em 0.2em rgba(166, 76, 95, .3);
}

* { box-sizing: border-box; }

html, body, #root {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none;
}

button, input { font: inherit; letter-spacing: 0; }
button { -webkit-tap-highlight-color: transparent; }

body {
    display: grid;
    place-items: center;
    background-color: #b0d1fc;
    background-image: var(--stage-backdrop);
}

.game-shell {
    position: relative;
    /* --stage-width/--stage-height 由 Phaser 实际显示尺寸经 JS 写入（见 src/game/stageSync.ts），
       回退值保持旧的 9:16 居中计算，覆盖 JS 生效前的短暂启动期 */
    width: 100vw;
    height: 100svh;
    overflow: hidden;
    isolation: isolate;
    background: var(--stage-backdrop);
}

/* 桌面超宽屏 pillarbox 时的画布左右羽化过渡：用同一梦幻渐变横向淡出，把画布硬边融进背景。
   是否启用由 stageSync 依据实际留白写入 --edge-feather（0/1），铺满宽度时自动隐藏 */
.game-shell::before, .game-shell::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 46px;
    z-index: 5;
    background: var(--stage-backdrop);
    opacity: var(--edge-feather, 0);
    transition: opacity .3s ease;
    pointer-events: none;
}

.game-shell::before {
    left: calc(50% - var(--stage-width, 100vw) / 2);
    -webkit-mask-image: linear-gradient(to right, #000, transparent);
    mask-image: linear-gradient(to right, #000, transparent);
}

.game-shell::after {
    right: calc(50% - var(--stage-width, 100vw) / 2);
    -webkit-mask-image: linear-gradient(to left, #000, transparent);
    mask-image: linear-gradient(to left, #000, transparent);
}

#game-container {
    position: absolute;
    inset: 0;
    /* 容器保持透明：letterbox 留白显示 .game-shell 的梦幻渐变，而不是一块实色 */
    background: transparent;
}

#game-container canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--stage-width, min(100vw, calc(100svh * 0.5625))) !important;
    height: var(--stage-height, min(100svh, calc(100vw * 1.77778))) !important;
    margin: 0 !important;
    transform: translate(-50%, -50%);
    display: block;
    touch-action: none;
}

.topbar, .menu-layer, .hud {
    width: var(--stage-width, min(100vw, calc(100svh * 0.5625)));
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}

.topbar {
    position: absolute;
    z-index: 40;
    top: max(12px, env(safe-area-inset-top));
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    pointer-events: none;
}

/* Keep the interactive overlays aligned to the centered portrait stage. */
.menu-layer, .hud {
    position: absolute;
    inset-block: 0;
    z-index: 20;
    pointer-events: none;
}

/* 菜单构图：游戏名 + 控件面板作为一列整体垂直居中，任何视口高度下都不重叠；
   标题块加大加高（装饰探出）后吃掉上方天空的空白，底部轻微留白让整列略上浮 */
.menu-layer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(22px, 6svh, 48px);
    padding-bottom: clamp(0px, 4svh, 40px);
}

/* 游戏名糖果牌：大弧角粉白面板当标题底板（手账贴纸/糖果牌），中文主名+英文药丸
   收进一个整体，不再直接飘在柱子/弹幕等复杂背景上。厚底阴影 + 内圈虚线与
   menu-controls 同一手账语言；z-index 1 保证探出牌子上缘的蝴蝶结在与
   天空弹幕带交界处仍压在弹幕之上 */
.game-title {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 9px;
    max-width: calc(100% - 24px);
    padding: 24px 30px 18px;
    text-align: center;
    pointer-events: none;
    background: linear-gradient(168deg, #ffeff7 0%, #ffddeb 62%, #ffd2e4 100%);
    border: 3px solid var(--stroke);
    border-radius: 46px;
    box-shadow:
        0 9px 0 rgba(233, 111, 155, .16),
        0 18px 38px rgba(233, 111, 155, .22);
    animation: title-in .6s var(--ease-bounce) both;
}

/* 内圈虚线：贴纸缝线装饰，跟随大弧角 */
.game-title::after {
    content: "";
    position: absolute;
    inset: 7px;
    border: 2px dashed rgba(242, 127, 165, .32);
    border-radius: 38px;
    pointer-events: none;
}

/* 中文主名：每个字一个 span，交替旋转 + 上下错落 + 字号微差，
   像手工剪贴上去的卡通字；整体仍居中、可读 */
.game-title h1 {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff6f9;
    font-family: "Arial Black", Impact, sans-serif;
    font-size: 60px;
    line-height: 1.12;
    letter-spacing: 0;
    text-shadow: var(--text-outline);
}

.game-title h1 span {
    display: inline-block;
    transform: rotate(var(--tilt, 0deg)) translateY(var(--lift, 0));
}

.game-title h1 span:nth-child(4n + 1) { --tilt: -6deg; --lift: .05em; }
.game-title h1 span:nth-child(4n + 2) { --tilt: 4deg; --lift: -.06em; font-size: 1.08em; }
.game-title h1 span:nth-child(4n + 3) { --tilt: -3deg; --lift: .04em; font-size: .94em; }
.game-title h1 span:nth-child(4n + 4) { --tilt: 6deg; --lift: -.04em; font-size: 1.04em; }

/* 牌缘装饰：全部锚定在糖果牌边缘（负偏移探出边框），服务边框不再满天散点。
   顶部正中蝴蝶结是主视觉（像给牌子打结），左下云朵托底、右上小花点角，
   另有三个小闪点补充；大件浮动、小件闪烁 */
.title-decor { position: absolute; inset: 0; pointer-events: none; }

.title-trim { position: absolute; }

.title-trim.ribbon {
    top: -19px;
    left: 50%;
    margin-left: -16px;
    color: #f27fa5;
    --tilt: 0deg;
    animation: decor-bob 2.8s ease-in-out infinite;
    filter: drop-shadow(0 2px 0 rgba(217, 122, 153, .3));
}

.title-trim.cloud-left {
    bottom: -13px;
    left: -19px;
    color: #fdfcff;
    --tilt: -7deg;
    animation: decor-bob 3.6s ease-in-out infinite;
    animation-delay: 1.1s;
    filter: drop-shadow(0 2px 0 rgba(140, 170, 220, .4));
}

.title-trim.flower-right {
    top: -13px;
    right: -15px;
    color: #ff8fbf;
    --tilt: 12deg;
    animation: decor-bob 3.1s ease-in-out infinite;
    animation-delay: .5s;
    filter: drop-shadow(0 2px 0 rgba(217, 122, 153, .3));
}

.title-trim.star-left { top: -9px; left: -11px; color: #ffc95c; animation: spark-twinkle 2s ease-in-out infinite; }
.title-trim.spark-right { bottom: -7px; right: -13px; color: #9fd0ff; animation: spark-twinkle 1.8s ease-in-out infinite; animation-delay: .4s; }
.title-trim.heart-bottom { bottom: -11px; left: 22%; color: #ff9fb8; animation: spark-twinkle 2.4s ease-in-out infinite; animation-delay: .9s; }

@keyframes decor-bob {
    0%, 100% { transform: rotate(var(--tilt, 0deg)) translateY(0); }
    50% { transform: rotate(var(--tilt, 0deg)) translateY(-6px); }
}

@keyframes spark-twinkle {
    0%, 100% { opacity: .5; transform: scale(.82) rotate(-8deg); }
    50% { opacity: 1; transform: scale(1.12) rotate(8deg); }
}

/* 天空弹幕带：flex 吃掉标题上方的全部空白（与底部 spacer 平分剩余空间，
   标题+面板仍整体居中）。弹幕只在这条带内飘，结构上不可能压到主标题；
   开启尺寸容器查询，带太矮时（横屏矮窗、极小视口）整带弹幕隐藏 */
.menu-sky {
    position: relative;
    align-self: stretch;
    flex: 1 1 0;
    min-height: 0;
    container-type: size;
}

.menu-sky-spacer { flex: 1 1 0; }

/* 弹幕留言：在天空带内从右缘飘入、穿出左缘后由 React 移除；
   整层不可交互，速度/轨道/字号由 services/danmaku.ts 确定性给出 */
.danmaku-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* 天空带矮于一条完整弹幕轨道的可读高度时不再显示弹幕（避免贴着标题挤成一团） */
@container (max-height: 96px) {
    .danmaku-bullet { display: none; }
}

.danmaku-bullet {
    position: absolute;
    left: 100%;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 3px 12px;
    color: #d9598a;
    background: rgba(255, 249, 252, .74);
    border: 2px solid rgba(242, 169, 198, .55);
    border-radius: 999px;
    font-weight: 800;
    white-space: nowrap;
    animation: danmaku-drift linear forwards;
    will-change: transform;
}

.danmaku-bullet i { font-style: normal; font-size: .72em; opacity: .6; }

@keyframes danmaku-drift {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-1 * var(--stage-width, 100vw) - 100%)); }
}

/* 英文副标：糖果药丸做成轻微歪贴的贴纸，带卡通厚底阴影 */
.game-title p {
    margin: 0;
    padding: 4px 15px;
    color: var(--pink-strong);
    background: rgba(255, 250, 253, .94);
    border: 2px solid var(--stroke);
    border-radius: 999px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .28em;
    text-indent: .28em; /* 抵消末字符 letter-spacing，视觉居中 */
    text-transform: uppercase;
    transform: rotate(-2.5deg);
    box-shadow: 0 3px 0 rgba(242, 127, 165, .2);
}

.result-layer {
    position: absolute;
    inset: 0;
    z-index: 20;
    background: rgba(154, 86, 112, .3);
    pointer-events: auto;
}

.result-layer .result-sheet {
    width: min(calc(var(--stage-width, 100vw) - 28px), 420px);
    left: 50%;
    top: 50%;
    right: auto;
    bottom: auto;
    /* 用独立 translate 属性居中：controls-in 动画的 transform 会覆盖静态 transform 声明 */
    translate: -50% -50%;
}

.dialog-backdrop {
    position: absolute;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 14px;
    background: rgba(154, 86, 112, .5);
    backdrop-filter: blur(6px);
}

/* The Phaser container itself remains full-screen while the canvas stays 9:16. */
#game-container {
    width: 100% !important;
    height: 100% !important;
}

.top-actions { display: flex; gap: 7px; margin-right: 10px; pointer-events: auto; }

.icon-button, .dialog-close {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: #a2536b;
    background: rgba(255, 247, 251, .92);
    border: 2px solid var(--stroke);
    border-radius: 50%;
    box-shadow: 0 2px 0 rgba(198, 112, 122, .25);
    cursor: pointer;
    transition: transform .16s ease, background .16s ease;
}

.icon-button:hover, .dialog-close:hover { transform: translateY(-2px) rotate(-6deg) scale(1.06); background: #ffd9e8; }
.account-active { color: #e0608a; }

.menu-controls {
    position: relative;
    z-index: 1;
    width: min(100% - 28px, 420px);
    padding: 16px;
    color: var(--ink);
    background: rgba(255, 247, 251, .94);
    border: 3px solid var(--stroke);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-panel);
    pointer-events: auto;
    animation: controls-in .55s .08s var(--ease-bounce) both;
}

/* 面板内圈虚线：手账贴纸的「缝线」装饰 */
.menu-controls::after, .dialog::after, .result-sheet::after {
    content: "";
    position: absolute;
    inset: 7px;
    border: 2px dashed rgba(242, 127, 165, .3);
    border-radius: calc(var(--radius-panel) - 9px);
    pointer-events: none;
}

.character-rail {
    display: grid;
    /* 两位角色一行并排；卡片上只有高清头像（256² portrait），无名字文本 */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.character-choice {
    min-width: 0;
    padding: 7px 2px 6px;
    display: grid;
    justify-items: center;
    gap: 3px;
    background: var(--pink-pale);
    border: 2px solid var(--line);
    border-radius: var(--radius-card);
    cursor: pointer;
    transition: transform .24s var(--ease-bounce), border-color .16s ease, background .16s ease;
}

.character-choice:hover { transform: translateY(-2px) scale(1.03); }
/* 选中的角色卡轻微歪头：贴纸随手一贴的俏皮感 */
.character-choice.selected { background: var(--pink-soft); border-color: var(--pink); transform: translateY(-4px) rotate(-2deg) scale(1.04); }
.character-choice.selected:nth-child(2n) { transform: translateY(-4px) rotate(2deg) scale(1.04); }
.character-choice img { display: block; width: 48px; height: 48px; object-fit: contain; }

/* 角色展示名（左碗碗 / 右盆盆）：头像下方小字，清晰但不与主按钮抢视线 */
.character-name { color: #a2536b; font-size: 12px; font-weight: 900; letter-spacing: .1em; }
.character-choice.selected .character-name { color: var(--pink-strong); }

/* 按钮统一「糖果药丸贴纸」样式：全圆角 + 同色系描边 + 实底边缘 */
.primary-button, .secondary-button, .save-button {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 2.5px solid;
    border-radius: 999px;
    font-weight: 900;
    cursor: pointer;
    transition: transform .2s var(--ease-bounce), filter .16s ease, box-shadow .16s ease;
}

.primary-button { width: 100%; color: #5c2440; background: #ffa9c8; border-color: #d3688b; box-shadow: 0 4px 0 #d3688b; }
.primary-button:hover, .save-button:hover, .secondary-button:hover { transform: translateY(-2px) scale(1.03); filter: brightness(1.04); }
.primary-button:active, .save-button:active, .secondary-button:active { transform: translateY(3px) scale(.98); box-shadow: none; }
.primary-button:disabled { cursor: wait; opacity: .65; }
.primary-button.compact { width: auto; flex: 1.4; }
.secondary-button { flex: 1; color: #7a4459; background: var(--pink-pale); border-color: var(--stroke-soft); box-shadow: 0 4px 0 var(--stroke-soft); }
.save-button { width: 100%; color: #fff5f8; background: var(--pink-strong); border-color: #b04a6d; box-shadow: 0 4px 0 #b04a6d; }

/* 计分 HUD：纵向流式排布（大分数 → 奖励徽章），彻底避免绝对定位叠压 */
.hud {
    z-index: 15;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding-top: max(64px, calc(env(safe-area-inset-top) + 52px));
}

.score-number {
    color: #fff6f9;
    font-family: "Arial Black", Impact, sans-serif;
    font-size: 52px;
    line-height: 1;
    text-shadow: var(--text-outline);
    animation: score-pop .22s ease-out both;
}

.reward-count {
    min-width: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 13px;
    color: var(--pink-strong);
    background: var(--paper);
    border: 2px solid var(--stroke-soft);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 3px 0 rgba(198, 112, 122, .25);
}

.result-sheet {
    position: absolute;
    left: 50%;
    top: 50%;
    right: auto;
    bottom: auto;
    width: min(calc(var(--stage-width, 100vw) - 28px), 420px);
    translate: -50% -50%;
    padding: 24px 18px 18px;
    color: var(--ink);
    background: var(--paper);
    border: 3px solid var(--stroke);
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-panel);
    text-align: center;
    animation: controls-in .38s var(--ease-bounce) both;
}

.result-score {
    --text-stroke-color: var(--pink);
    color: #fff;
    margin: 0 0 18px;
    font-family: "Arial Black", Impact, sans-serif;
    font-size: 72px;
    line-height: 1;
    text-shadow: var(--text-outline);
}
.result-actions { display: flex; gap: 8px; margin-top: 10px; }

/* 作者水印：右下角小字低对比常驻，不可交互；对局中由 .faded 进一步淡化避免分神 */
.watermark {
    position: absolute;
    right: max(12px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    z-index: 30;
    color: rgba(107, 58, 80, .38);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
    pointer-events: none;
    user-select: none;
    transition: opacity .4s ease;
}

.watermark.faded { opacity: .35; }

.dialog {
    position: relative;
    width: 100%;
    max-width: 430px;
    max-height: calc(100% - 24px);
    padding: 24px 18px 18px;
    overflow: hidden;
    color: var(--ink);
    background: var(--paper);
    border: 3px solid var(--stroke);
    border-radius: var(--radius-panel);
    box-shadow: 0 16px 40px rgba(122, 68, 89, .3);
    animation: dialog-in .28s var(--ease-bounce) both;
}

.eyebrow { margin: 0 0 4px; color: var(--pink-strong); font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.dialog h2 { margin: 0 0 16px; font-family: "Arial Black", Impact, sans-serif; font-size: 27px; }
.dialog-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; background: var(--pink-pale); border-radius: 999px; }
.segmented button { height: 36px; color: var(--muted); background: transparent; border: 0; border-radius: 999px; font-weight: 800; cursor: pointer; }
.segmented button.active { color: var(--ink-strong); background: var(--pink-soft); }

.auth-dialog form, .note-dialog form { display: grid; gap: 12px; margin-top: 16px; }
.auth-dialog label, .note-dialog label { display: grid; gap: 6px; color: #bb8ba0; font-size: 11px; font-weight: 800; }
.auth-dialog input, .note-dialog input { width: 100%; height: 44px; padding: 0 12px; color: var(--ink); background: #fff; border: 2px solid var(--stroke-soft); border-radius: var(--radius-control); outline: none; }
.auth-dialog input:focus, .note-dialog input:focus { border-color: var(--pink); box-shadow: 0 0 0 2px rgba(242, 127, 165, .18); }
.form-error { margin: 0; color: #d94f6e; font-size: 11px; }

/* 留言入口：角色面板右上沿的小贴纸按钮 */
.note-button {
    position: absolute;
    top: -15px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 13px;
    color: var(--pink-strong);
    background: #fff3f9;
    border: 2px solid var(--stroke);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 3px 0 rgba(198, 112, 122, .3);
    transform: rotate(3deg);
    cursor: pointer;
    pointer-events: auto;
    transition: transform .2s var(--ease-bounce), background .16s ease;
}
.note-button:hover { transform: rotate(0deg) translateY(-2px); background: #ffd9e8; }

.leaderboard-dialog { height: min(590px, calc(100% - 24px)); display: flex; flex-direction: column; }
.leaderboard-list { flex: 1; min-height: 0; margin-top: 12px; overflow-y: auto; scrollbar-width: thin; }
.leaderboard-row { height: 52px; display: grid; grid-template-columns: 28px 38px minmax(0, 1fr) auto; align-items: center; gap: 8px; border-bottom: 1px solid #f7dbe7; }
.leaderboard-row .rank { color: #bb8ba0; text-align: center; }
.leaderboard-row:nth-child(-n+3) .rank { color: #f27fa5; font-size: 18px; }
.leaderboard-row img { width: 36px; height: 36px; object-fit: contain; }
.leaderboard-row span { overflow: hidden; font-size: 13px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-row strong { color: #e0608a; font-size: 16px; }
.empty-state { margin: 80px 0; color: #bb8ba0; text-align: center; }
.my-rank { display: flex; justify-content: space-between; margin-top: 10px; padding: 11px 12px; color: var(--ink-strong); background: var(--pink-soft); border-radius: var(--radius-control); font-size: 12px; }

@keyframes title-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } }
/* 入场都带一点果冻回弹：先轻微过冲再落定，幅度小不影响操作 */
@keyframes controls-in {
    0% { opacity: 0; transform: translateY(26px) scale(.95); }
    65% { opacity: 1; transform: translateY(-4px) scale(1.015); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes dialog-in {
    0% { opacity: 0; transform: scale(.86); }
    60% { opacity: 1; transform: scale(1.03); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes score-pop {
    0% { transform: scale(.6); }
    60% { transform: scale(1.14); }
    100% { transform: scale(1); }
}

@media (max-height: 700px) {
    .menu-layer { gap: 16px; padding-bottom: 8px; }
    .game-title { padding: 19px 24px 14px; border-radius: 38px; }
    .game-title::after { border-radius: 31px; }
    .game-title h1 { font-size: 50px; }
    .title-trim.ribbon { width: 26px; height: 26px; top: -16px; margin-left: -13px; }
    .title-trim.cloud-left { width: 26px; height: 26px; bottom: -11px; left: -15px; }
    .title-trim.flower-right { width: 22px; height: 22px; top: -11px; right: -12px; }
    .menu-controls { padding: 11px; }
    .character-choice img { width: 42px; height: 42px; }
    .primary-button, .secondary-button, .save-button { min-height: 43px; }
}

/* 桌面大屏：画布变宽后适度放大关键排版 */
@media (min-width: 900px) {
    .score-number { font-size: 62px; }
    .result-score { font-size: 84px; }
    .game-title { padding: 30px 40px 22px; border-radius: 56px; }
    .game-title::after { border-radius: 48px; }
    .game-title h1 { font-size: 74px; }
    .title-trim.ribbon { width: 40px; height: 40px; top: -24px; margin-left: -20px; }
    .title-trim.cloud-left { width: 40px; height: 40px; bottom: -16px; left: -24px; }
    .title-trim.flower-right { width: 33px; height: 33px; top: -16px; right: -19px; }
    .character-choice img { width: 56px; height: 56px; }
    .character-name { font-size: 13px; }
}

/* 横屏矮窗口（手机横过来、分屏）：进一步压缩纵向占用，标题装饰让位 */
@media (max-height: 520px) {
    .menu-layer { gap: 10px; padding-bottom: 0; }
    .game-title { gap: 4px; padding: 10px 16px 8px; border-radius: 26px; }
    .game-title::after { border-radius: 20px; inset: 5px; }
    .game-title h1 { font-size: 32px; }
    .game-title p { font-size: 9px; padding: 2px 10px; }
    .title-decor { display: none; }
    .menu-controls { padding: 8px; }
    .note-button { top: -12px; padding: 4px 10px; font-size: 11px; }
    .character-choice { padding: 4px 2px 3px; gap: 1px; }
    .character-choice img { width: 30px; height: 30px; }
    .character-name { font-size: 10px; }
    .primary-button, .secondary-button, .save-button { min-height: 38px; }
}

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