/* ============================================================
   逻辑乐园 · 少儿逻辑启蒙游戏 —— 全局样式（分块写入）
   ============================================================ */
:root{
  --pink:#ff6b9d; --yellow:#ffd93d; --green:#6bcb77; --blue:#4d96ff;
  --purple:#b983ff; --orange:#ff9f45; --red:#ff5d5d; --teal:#3ec6c6;
  --ink:#4a3f6b; --ink-soft:#7a6fa0; --card:#ffffff;
  --shadow:0 6px 0 rgba(74,63,107,.12), 0 12px 28px rgba(74,63,107,.14);
  --radius:22px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
@media (min-width:1025px){
  /* Always reserve the gutter so pages with different content heights keep one topbar width. */
  html{overflow-y:scroll;scrollbar-gutter:stable}
  /* clip avoids turning the cross axis into a second scroll container/gutter. */
  body{overflow-x:clip}
}
body{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Comic Sans MS",sans-serif;
  color:var(--ink);
  background:linear-gradient(160deg,#aee6ff 0%,#c9c2ff 45%,#ffd6ec 100%);
  min-height:100vh;
  overflow-x:clip;
  user-select:none;
}
/* 顶栏与练习页保持一致：占满可用宽度，仅保留左右 14px 呼吸位。 */
#app{max-width:none;margin:0;padding:14px 14px 96px;position:relative;z-index:2}
#app > .topbar{margin:0 0 14px;border-radius:var(--radius)}
/* ---------- 背景装饰 ---------- */
#bg-deco{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}
.bg-shape{position:absolute;font-size:44px;opacity:.85;filter:drop-shadow(0 6px 10px rgba(74,63,107,.15));animation:floaty 7s ease-in-out infinite}
.bs1{left:4%;top:12%;animation-delay:0s}
.bs2{left:86%;top:8%;font-size:30px;animation-delay:1.2s}
.bs3{right:6%;top:34%;font-size:56px;animation-delay:2s}
.bs4{left:8%;top:64%;font-size:40px;animation-delay:3s}
.bs5{left:44%;top:6%;font-size:24px;animation-delay:.6s}
.bs6{right:12%;top:72%;font-size:46px;animation-delay:2.6s}
.bs7{left:2%;top:40%;font-size:36px;animation-delay:1.8s}
.bs8{left:60%;top:82%;font-size:26px;animation-delay:4s}
#confetti-canvas{position:fixed;inset:0;pointer-events:none;z-index:60}

/* ---------- 顶部栏 ---------- */
.topbar{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.82);backdrop-filter:blur(8px);border-radius:var(--radius);padding:10px 14px;box-shadow:var(--shadow);margin-bottom:14px;position:sticky;top:10px;z-index:30;min-width:0;height:62px;min-height:62px;flex-wrap:nowrap}
.logo{display:flex;align-items:center;gap:8px;font-weight:900;font-size:20px;color:var(--ink);cursor:pointer;min-width:0;flex:0 0 238px;width:238px;white-space:nowrap}
.logo .logo-brain{font-size:26px;display:inline-block;animation:wobble 2.4s ease-in-out infinite}
.logo small{display:block;font-size:10px;color:var(--ink-soft);font-weight:700;letter-spacing:1px}
.topbar-right{margin-left:0;display:flex;align-items:center;justify-content:flex-start;gap:8px;min-width:0;flex:1 1 auto;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.topbar-right::-webkit-scrollbar{display:none}

/* 平板宽度：顶栏与 Hub 保持 62px 单行；右侧控件独立横滑，避免被挤成 64px。 */
@media (min-width:901px) and (max-width:1180px){
  .topbar{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center;
    height:62px;
    min-height:62px;
  }
  .topbar>.logo{flex:0 0 238px;width:238px;min-width:0;white-space:nowrap}
  .topbar-right{
    flex:1 1 auto;
    min-width:0;
    flex-wrap:nowrap;
    justify-content:flex-start;
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:0;
    scrollbar-width:none;
  }
  .topbar-right::-webkit-scrollbar{display:none}
  .topbar-park-switch{flex:0 0 auto;flex-wrap:nowrap}
  .topbar-right .topbar-park-pill,
  .topbar-right .offline-btn,
  .topbar-right .pill,
  .topbar-right .avatar-btn{flex:none;white-space:nowrap}
}

/* 统一多乐园顶栏导航按键与乐园切换 */
.topbar-park-switch{display:flex;align-items:center;gap:6px;flex-shrink:0;min-width:0}
.topbar-park-pill{
  display:inline-flex;align-items:center;gap:5px;
  height:34.5px;box-sizing:border-box;
  font-family:inherit;
  padding:6px 13px;background:#ffffff;
  border:2px solid #e2e8f0;border-radius:999px;
  color:#475569;font-size:13px;font-weight:800;
  text-decoration:none !important;cursor:pointer;
  box-shadow:0 2px 4px rgba(74,63,107,.05);
  transition:all .15s ease;user-select:none;
}
.topbar-park-pill:hover{
  background:#f8fafc;color:#1e293b;border-color:#cbd5e1;
  transform:none;
}
.topbar-park-pill:active{transform:scale(.96)}
.topbar-park-pill.on{
  background:linear-gradient(135deg,#ede7ff,#d9f0ff);
  color:#3c5cc4;border-color:#9ab8ff;
  box-shadow:0 2px 4px rgba(74,63,107,.05);
}
.offline-btn{
  border:0;cursor:pointer;font-family:inherit;font-weight:900;font-size:13px;
  height:34.5px;box-sizing:border-box;
  color:#0c6b2a;background:linear-gradient(135deg,#eaffee,#d5f7dd);
  border:2px solid #a9dfb5;border-radius:999px;padding:8px 13px;
  box-shadow:0 3px 0 rgba(107,203,119,.25);transition:transform .15s, filter .15s;
  white-space:nowrap;
}
.offline-btn:hover{filter:brightness(1.03)}
.offline-btn:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(107,203,119,.25)}
.offline-btn.is-busy{color:#2b4a8b;background:linear-gradient(135deg,#eef6ff,#dcecff);border-color:#9ab8ff}
.offline-btn.is-ready{color:#0c6b2a;background:linear-gradient(135deg,#dfffe6,#bff2c9);border-color:#6bcb77}
.offline-btn.is-offline{color:#2b4a8b;background:linear-gradient(135deg,#e8f2ff,#d4e6ff);border-color:#7db6ff}
.offline-btn.is-error,.offline-btn.is-locked{color:#8a5600;background:linear-gradient(135deg,#fff8e1,#ffefc2);border-color:#ffd54d}
.offline-btn.ca-btn{color:#7a4b00;background:linear-gradient(135deg,#fff8dc,#ffe7a3);border-color:#f0c44d;box-shadow:0 3px 0 rgba(196,146,31,.2)}
.offline-btn.ca-btn:active{box-shadow:0 1px 0 rgba(196,146,31,.2)}
.offline-btn.ca-btn.is-ca-trusted{
  color:#166534;background:linear-gradient(135deg,#ecfdf5,#d1fae5);
  border-color:#86efac;cursor:default;opacity:1;
}
.offline-btn.ca-btn.is-ca-checking{
  color:#64748b;background:linear-gradient(135deg,#f8fafc,#eef2f7);
  border-color:#cbd5e1;cursor:default;opacity:1;
}
.pill{display:flex;align-items:center;gap:6px;background:#fff;border-radius:999px;padding:6px 12px;font-weight:900;font-size:15px;box-shadow:inset 0 -3px 0 rgba(74,63,107,.1);border:2px solid rgba(74,63,107,.06)}
.pill .pill-ico{font-size:18px}
.pill.coin-pill{color:#c98a00}
.pill.coin-pill.pop{animation:coinPop .5s ease}
.pill.star-pill{color:#e08a00}
.avatar-btn{flex:none;border:none;background:linear-gradient(135deg,var(--yellow),var(--orange));width:42px;height:42px;border-radius:50%;font-size:23px;cursor:pointer;box-shadow:0 4px 0 #d97b06, var(--shadow);transition:transform .15s}
.avatar-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #d97b06}

/* ---------- 英雄区 ---------- */
.hero{background:linear-gradient(135deg,#fff 0%,#fff7fb 100%);border-radius:26px;padding:18px 20px;box-shadow:var(--shadow);margin-bottom:16px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;left:-70px;bottom:-80px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle at 60% 40%,rgba(255,217,61,.38),rgba(255,217,61,0) 70%);pointer-events:none}
.hero h1{font-size:clamp(22px,4.5vw,32px);font-weight:900;letter-spacing:1px}
.hero-greet{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#fff7d6,#ffe9f3);border:2px dashed #ffcf5e;border-radius:999px;padding:5px 14px;font-weight:900;font-size:13px;color:#a06e00;margin-bottom:10px;animation:bounceIn .5s backwards}
.hero-greet .hg-ico{font-size:18px;animation:wobble 2.4s ease-in-out infinite}
.hero h1 .rainbow{background:linear-gradient(90deg,var(--pink),var(--orange),var(--green),var(--blue),var(--purple));-webkit-background-clip:text;background-clip:text;color:transparent;background-size:200% auto;animation:rainbowMove 4s linear infinite}
.hero p.sub{color:var(--ink-soft);font-weight:700;font-size:13px;margin-top:4px}
.title-box{margin-top:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.title-now{background:linear-gradient(135deg,var(--purple),var(--blue));color:#fff;font-weight:900;border-radius:999px;padding:6px 14px;font-size:14px;box-shadow:0 4px 12px rgba(77,150,255,.35)}
.progress-track{flex:1;min-width:160px;height:16px;background:#efeafc;border-radius:999px;overflow:hidden;box-shadow:inset 0 2px 4px rgba(74,63,107,.12)}
.progress-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--green),var(--teal));transition:width .6s cubic-bezier(.34,1.56,.64,1);box-shadow:inset 0 -4px 0 rgba(0,0,0,.08)}
.progress-text{font-size:12px;font-weight:800;color:var(--ink-soft);white-space:nowrap}

/* ---------- 游戏卡片网格 ---------- */
.section-title{display:flex;align-items:center;gap:8px;font-weight:900;font-size:18px;margin:6px 2px 12px}
.section-title .st-ico{font-size:22px}
.section-title .st-more{margin-left:auto;font-size:12px;color:var(--ink-soft);font-weight:700}
.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:14px}
.game-card{position:relative;background:var(--card);border-radius:var(--radius);padding:16px 12px 14px;text-align:center;cursor:pointer;box-shadow:var(--shadow);border:3px solid transparent;transition:transform .18s cubic-bezier(.34,1.56,.64,1),border-color .18s;animation:cardIn .5s backwards}
.game-card:hover{transform:translateY(-6px) rotate(-1deg) scale(1.03);border-color:var(--gc,var(--pink))}
.game-card:active{transform:scale(.97)}
.game-card .gc-ico{width:64px;height:64px;margin:0 auto 8px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:34px;background:var(--gc-bg,linear-gradient(135deg,#ffd6e5,#ffb3d1));box-shadow:inset 0 -5px 0 rgba(0,0,0,.08), 0 6px 14px rgba(74,63,107,.16);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.game-card:hover .gc-ico{transform:scale(1.14) rotate(-6deg)}
.game-card h3{font-size:15px;font-weight:900}
.game-card .gc-desc{font-size:11px;color:var(--ink-soft);font-weight:600;margin:4px 0 8px;line-height:1.4;min-height:31px}
.gc-stars{display:flex;justify-content:center;gap:3px;font-size:13px}
.gc-stars .s-on{color:#ffb900;text-shadow:0 0 8px rgba(255,185,0,.5)}
.gc-stars .s-off{color:#e6e0f2}
.gc-tag{position:absolute;top:-8px;right:-6px;background:linear-gradient(135deg,var(--red),var(--orange));color:#fff;font-size:10px;font-weight:900;padding:3px 8px;border-radius:999px;box-shadow:0 3px 8px rgba(255,93,93,.4);transform:rotate(8deg)}
.gc-lock{position:absolute;inset:0;background:rgba(255,255,255,.55);backdrop-filter:blur(1px);border-radius:var(--radius);display:none;align-items:center;justify-content:center;font-size:26px}
.game-card.locked .gc-lock{display:flex}

/* ---------- 底部导航 ---------- */
.tabbar{position:fixed;left:50%;transform:translateX(-50%);bottom:12px;z-index:40;display:flex;gap:4px;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-radius:999px;padding:6px;box-shadow:var(--shadow)}
.tabbar button{border:none;background:transparent;border-radius:999px;padding:8px 14px;display:flex;flex-direction:column;align-items:center;gap:1px;font-weight:900;font-size:11px;color:var(--ink-soft);cursor:pointer;transition:all .18s;font-family:inherit}
.tabbar button .tb-ico{font-size:20px}
.tabbar button.active{background:linear-gradient(135deg,var(--pink),var(--purple));color:#fff;box-shadow:0 4px 12px rgba(185,131,255,.4)}
.tabbar button:active{transform:scale(.92)}
/* ---------- 按钮 ---------- */
.btn{border:none;cursor:pointer;font-family:inherit;font-weight:900;border-radius:999px;padding:12px 26px;font-size:16px;color:#fff;background:linear-gradient(135deg,var(--blue),var(--purple));box-shadow:0 5px 0 rgba(77,150,255,.45), 0 10px 20px rgba(77,150,255,.3);transition:transform .15s, box-shadow .15s;letter-spacing:1px}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(77,150,255,.45)}
.btn:hover{filter:brightness(1.06)}
.btn-green{background:linear-gradient(135deg,var(--green),var(--teal));box-shadow:0 5px 0 rgba(60,198,198,.5), 0 10px 20px rgba(107,203,119,.3)}
.btn-green:active{box-shadow:0 1px 0 rgba(60,198,198,.5)}
.btn-pink{background:linear-gradient(135deg,var(--pink),var(--orange));box-shadow:0 5px 0 rgba(217,123,6,.45), 0 10px 20px rgba(255,107,157,.3)}
.btn-pink:active{box-shadow:0 1px 0 rgba(217,123,6,.45)}
.btn-ghost{background:#fff;color:var(--ink-soft);box-shadow:inset 0 0 0 2px #e6e0f2}
.btn-ghost:active{box-shadow:inset 0 0 0 2px #d9d0ec}
.btn-lg{padding:15px 34px;font-size:19px}
.btn-sm{padding:8px 16px;font-size:13px}

/* ---------- Toast ---------- */
.toast-wrap{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;width:min(92vw,420px)}
.toast{background:rgba(255,255,255,.96);border-radius:16px;box-shadow:var(--shadow);padding:10px 18px;font-weight:900;font-size:14px;display:flex;align-items:center;gap:8px;animation:toastIn .35s cubic-bezier(.34,1.56,.64,1)}
.toast.t-out{animation:toastOut .3s ease forwards}
.toast .t-ico{font-size:22px}

/* ---------- 弹窗 ---------- */
.modal-mask{position:fixed;inset:0;background:rgba(58,45,95,.42);backdrop-filter:blur(3px);z-index:70;display:flex;align-items:center;justify-content:center;padding:18px;animation:fadeIn .25s ease}
.modal{background:#fff;border-radius:28px;padding:26px 24px;width:min(94vw,460px);max-height:88vh;overflow-y:auto;box-shadow:0 24px 60px rgba(58,45,95,.35);animation:modalIn .4s cubic-bezier(.34,1.56,.64,1);text-align:center;position:relative}
.modal .m-close{position:absolute;top:12px;right:12px;border:none;background:#f3effc;color:var(--ink-soft);width:32px;height:32px;border-radius:50%;font-size:15px;cursor:pointer;font-weight:900}
.modal h2{font-size:24px;font-weight:900;margin-bottom:4px}
.modal .m-sub{color:var(--ink-soft);font-size:13px;font-weight:700;margin-bottom:16px}
.modal .m-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px}
.modal.m-win{background:linear-gradient(180deg,#fffdf5,#fff)}
.m-big-emoji{font-size:64px;display:block;animation:bounceIn .6s cubic-bezier(.34,1.56,.64,1)}

/* ---------- 离线中心 / 主屏幕安装指引 ---------- */
.offline-center,.offline-guide{text-align:left}
.offline-center-row{display:flex;align-items:flex-start;gap:10px;background:#f8f6ff;border:2px solid #ece6fa;border-radius:16px;padding:10px 12px;margin-bottom:8px}
.offline-center-row.is-bad{background:#fff8e8;border-color:#ffd38a}
.offline-center-row .ocr-ico{font-size:22px;line-height:1.2;flex:none}
.offline-center-row .ocr-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.offline-center-row .ocr-main b{font-size:14px;color:var(--ink)}
.offline-center-row .ocr-main small{font-size:12px;line-height:1.55;color:var(--ink-soft);font-weight:700;word-break:break-word}
.offline-center-note{background:linear-gradient(135deg,#effff2,#e7f7ff);border:2px dashed #a9dfb5;border-radius:14px;padding:9px 12px;font-size:12px;line-height:1.65;font-weight:800;color:#286b42}
.offline-center-note.is-warn{background:linear-gradient(135deg,#fff8e1,#fff1cf);border-color:#ffcf5e;color:#7a5600}
.offline-center-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.offline-center-actions .btn{width:100%;padding:10px 8px;font-size:13px}
.offline-guide-step{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}
.offline-guide-step > span{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--purple));color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center;flex:none;font-size:14px}
.offline-guide-step > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.offline-guide-step b{font-size:14px}
.offline-guide-step small{font-size:12px;line-height:1.55;color:var(--ink-soft);font-weight:700;word-break:break-all}
.offline-guide-tip{margin-top:14px;background:linear-gradient(135deg,#fff7d6,#e9f8ee);border:2px dashed #ffcf5e;border-radius:16px;padding:11px 13px;font-size:12px;line-height:1.7;font-weight:800;color:#6f5a13}
@media (max-width:520px){
  .offline-center-actions{grid-template-columns:1fr}
  .modal{padding:24px 18px}
}

/* ---------- 星星组件 ---------- */
.stars-widget{display:flex;justify-content:center;gap:10px;margin:14px 0}
.stars-widget .star{font-size:44px;color:#e6e0f2;transition:all .3s}
.stars-widget .star.lit{color:#ffb900;text-shadow:0 0 16px rgba(255,185,0,.65);animation:starPop .55s cubic-bezier(.34,1.56,.64,1)}
.stars-widget.sm .star{font-size:24px}
.coin-gain{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#fff3c9,#ffe08a);border-radius:999px;padding:6px 16px;font-weight:900;color:#b47b00;font-size:17px;box-shadow:inset 0 -3px 0 rgba(180,123,0,.18)}
.coin-gain.pop{animation:coinPop .5s ease}
.perfect-line{margin:10px auto 0;display:inline-block;background:linear-gradient(135deg,#ffe3f1,#ffb3d9);border-radius:999px;padding:6px 18px;font-weight:900;color:#c2185b;font-size:16px;box-shadow:inset 0 -3px 0 rgba(194,24,91,.18);animation:bounceIn .5s cubic-bezier(.34,1.56,.64,1)}
/* 连对火力喝彩（v1.33.0）：与 perfect-line 同款徽章pill造型，火焰橙配色 */
.streak-line{margin:10px auto 0;display:inline-block;background:linear-gradient(135deg,#fff3d6,#ffd54f);border-radius:999px;padding:6px 18px;font-weight:900;color:#b26a00;font-size:16px;box-shadow:inset 0 -3px 0 rgba(178,106,0,.18);animation:bounceIn .5s cubic-bezier(.34,1.56,.64,1)}
/* 徽章解锁专属欢呼（v1.35.0）：里程碑徽章专属一行，紫金配色 */
.badge-cheer{margin:10px auto 0;display:inline-block;background:linear-gradient(135deg,#ede7ff,#c9b6ff);border-radius:999px;padding:6px 18px;font-weight:900;color:#5b3cc4;font-size:16px;box-shadow:inset 0 -3px 0 rgba(91,60,196,.18);animation:bounceIn .5s cubic-bezier(.34,1.56,.64,1)}

/* ---------- 关卡选择 ---------- */
.level-list{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.level-card{display:flex;align-items:center;gap:12px;background:#f8f6ff;border:3px solid #ece6fa;border-radius:18px;padding:12px 14px;cursor:pointer;transition:all .18s;text-align:left}
.level-card:hover{border-color:var(--purple);transform:translateX(4px)}
.level-card.locked{opacity:.55;cursor:not-allowed}
.level-card.locked:hover{transform:none;border-color:#ece6fa}
.level-card .lv-badge{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900;color:#fff;background:linear-gradient(135deg,var(--blue),var(--purple));flex:none}
.level-card.lv2 .lv-badge{background:linear-gradient(135deg,var(--teal),var(--green))}
.level-card.lv3 .lv-badge{background:linear-gradient(135deg,var(--orange),var(--red))}
.level-card .lv-info{flex:1}
.level-card .lv-name{font-weight:900;font-size:15px}
.level-card .lv-desc{font-size:11px;color:var(--ink-soft);font-weight:700}
.level-card .lv-stars{display:flex;gap:2px;font-size:15px;color:#e6e0f2;flex:none}
.level-card .lv-stars .s-on{color:#ffb900}

/* ---------- 面板（徽章/商店/设置） ---------- */
.panel{background:#fff;border-radius:26px;padding:20px;box-shadow:var(--shadow);animation:cardIn .4s backwards}
.panel h2{font-size:22px;font-weight:900;display:flex;align-items:center;gap:8px;margin-bottom:4px}
.panel .p-sub{color:var(--ink-soft);font-size:13px;font-weight:700;margin-bottom:16px}
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px}
.badge-chip{background:#f8f6ff;border-radius:18px;padding:14px 8px;text-align:center;border:3px solid #ece6fa}
.badge-chip .b-ico{font-size:34px;filter:grayscale(1);opacity:.45}
.badge-chip .b-name{font-weight:900;font-size:12px;margin-top:6px;color:var(--ink-soft)}
.badge-chip .b-desc{font-size:10px;color:#a99ec7;font-weight:600;margin-top:2px;line-height:1.35}
.badge-chip.on{background:linear-gradient(160deg,#fff8e1,#ffefc2);border-color:#ffd54d}
.badge-chip.on .b-ico{filter:none;opacity:1;animation:wobble 3s ease-in-out infinite}
.badge-chip.on .b-name{color:#a06e00}
.badge-chip.on .b-desc{color:#c89a3a}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px}
.avatar-item{background:#f8f6ff;border:3px solid #ece6fa;border-radius:18px;padding:16px 8px;text-align:center;cursor:pointer;transition:all .18s}
.avatar-item:hover{transform:translateY(-4px);border-color:var(--pink)}
.avatar-item .a-emoji{font-size:44px}
.avatar-item .a-price{font-weight:900;font-size:13px;color:#c98a00;margin-top:6px;display:flex;align-items:center;justify-content:center;gap:4px}
.avatar-item .a-state{font-size:11px;font-weight:900;margin-top:4px;color:var(--ink-soft)}
.avatar-item.owned{border-color:var(--green);background:linear-gradient(160deg,#f1fbf2,#e2f8e6)}
.avatar-item.equipped{border-color:var(--purple);background:linear-gradient(160deg,#f6f0ff,#ede2ff)}
.setting-row{display:flex;align-items:center;gap:12px;background:#f8f6ff;border-radius:18px;padding:14px 16px;margin-bottom:10px;border:3px solid #ece6fa}
.setting-row .sr-ico{font-size:24px}
.setting-row .sr-info{flex:1;text-align:left}
.setting-row .sr-name{font-weight:900;font-size:15px}
.setting-row .sr-desc{font-size:11px;color:var(--ink-soft);font-weight:700}
.switch{width:58px;height:32px;border-radius:999px;background:#ddd4f0;position:relative;cursor:pointer;transition:background .2s;flex:none;border:none}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.2);transition:left .2s}
.switch.on{background:linear-gradient(135deg,var(--green),var(--teal))}
.switch.on::after{left:29px}
.danger-btn{background:linear-gradient(135deg,var(--red),#ff8a5d);box-shadow:0 5px 0 rgba(200,60,60,.4)}
.danger-btn:active{box-shadow:0 1px 0 rgba(200,60,60,.4)}

/* ---------- 每日挑战横幅 ---------- */
.daily-banner{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,#fff6d9,#ffe9f3);border:3px dashed #ffcf5e;border-radius:22px;padding:14px 16px;margin-bottom:16px;cursor:pointer;transition:transform .18s;box-shadow:var(--shadow)}
.daily-banner:hover{transform:scale(1.01)}
.daily-banner.done{background:#eefaf0;border-color:#8fd99f;cursor:default;opacity:.85}
.daily-banner .db-ico{font-size:40px;animation:wobble 2.6s ease-in-out infinite;flex:none}
.daily-banner .db-info{flex:1;text-align:left}
.daily-banner .db-title{font-weight:900;font-size:16px}
.daily-banner .db-desc{font-size:12px;color:var(--ink-soft);font-weight:700}
.daily-banner .db-go{flex:none}
/* ============================================================
   游戏页外壳
   ============================================================ */
.game-screen{animation:cardIn .35s backwards}
.game-header{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.9);border-radius:var(--radius);padding:10px 14px;box-shadow:var(--shadow);margin-bottom:14px;position:sticky;top:10px;z-index:20}
.gh-back{border:none;background:linear-gradient(135deg,#efe9ff,#e2d7ff);color:var(--ink);
  min-width:44px;height:44px;padding:0 14px;border-radius:14px;font-size:19px;cursor:pointer;font-weight:900;flex:none;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  box-shadow:0 3px 0 rgba(74,63,107,.18);transition:transform .15s}
.gh-back span{font-size:14px;font-weight:900;letter-spacing:.5px}
.gh-back:hover{background:linear-gradient(135deg,#e7ddff,#d6c6ff)}
.gh-back:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(74,63,107,.18)}
.gh-retry{border:none;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:5px;
  background:linear-gradient(135deg,#ffd93d,#ff9f45);color:#7a4b00;font-weight:900;font-size:14px;
  border-radius:14px;padding:0 14px;height:40px;box-shadow:0 3px 0 #d97b06;flex:none;transition:transform .12s}
.gh-retry span{font-size:14px;letter-spacing:.5px}
.gh-retry:hover{filter:brightness(1.05)}
.gh-retry:active{transform:translateY(3px);box-shadow:0 1px 0 #d97b06}
@media (max-width:520px){
  .gh-back,.gh-retry{padding:0 10px;height:40px}
  .gh-back span,.gh-retry span{font-size:12px}
}
@media (max-width:900px){
  .topbar{
    display:flex!important;flex-wrap:nowrap!important;
    align-items:center;gap:8px;
    height:62px;min-height:62px;
  }
  .topbar>.logo{flex:0 0 auto;width:auto;min-width:0;white-space:nowrap}
  .topbar-right{
    flex:1 1 auto;width:auto;margin-left:0;
    justify-content:flex-start;flex-wrap:nowrap;
    overflow-x:auto;overflow-y:hidden;
    padding-bottom:0;scrollbar-width:none;
  }
  .topbar-right::-webkit-scrollbar{display:none}
  .topbar-park-switch{flex-wrap:nowrap}
  .topbar-park-pill{font-size:12px;padding:6px 10px}
  .offline-btn{font-size:12px;padding:7px 10px}
  .pill{font-size:13px;padding:5px 9px}
  .pill .pill-ico{font-size:16px}
  .avatar-btn{width:40px;height:40px;font-size:22px}
}
@media (max-width:720px){
  .topbar{display:flex!important;flex-wrap:nowrap!important;gap:7px}
  .logo{flex:0 0 auto;width:auto;min-height:38px}
  .topbar-right{grid-area:auto!important;flex:1 1 auto;width:auto;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;padding-bottom:0;scrollbar-width:none}
  .topbar-right::-webkit-scrollbar{display:none}
  .topbar-park-switch{flex:0 0 auto;min-width:0;flex-wrap:nowrap}
  .topbar-park-pill{font-size:12px;padding:6px 10px}
  .offline-btn{font-size:12px;padding:7px 10px}
}
.gh-icon{width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;flex:none;box-shadow:inset 0 -4px 0 rgba(0,0,0,.1)}
.gh-title{font-weight:900;font-size:17px;line-height:1.15}
.gh-level{font-size:11px;color:var(--ink-soft);font-weight:800}
.gh-right{margin-left:auto;display:flex;align-items:center;gap:8px}
.gh-progress{font-weight:900;font-size:13px;color:var(--ink-soft);background:#f6f2ff;border-radius:999px;padding:5px 12px}

.game-body{background:#fff;border-radius:26px;box-shadow:var(--shadow);padding:20px 16px;min-height:420px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:14px;position:relative;overflow:hidden}
.game-body.shake{animation:shake .4s}
.game-tip{text-align:center;font-size:13px;color:var(--ink-soft);font-weight:700;margin-top:12px;line-height:1.6}
.game-tip b{color:var(--pink)}

.g-q{text-align:center;font-weight:900;font-size:clamp(17px,3.4vw,22px);line-height:1.5}
.g-q .g-emoji{font-size:clamp(30px,7vw,44px)}
.g-sub{text-align:center;color:var(--ink-soft);font-weight:700;font-size:13px}
.g-progress{width:min(420px,90%);height:14px;background:#efeafc;border-radius:999px;overflow:hidden;box-shadow:inset 0 2px 4px rgba(74,63,107,.1)}
.g-progress > div{height:100%;background:linear-gradient(90deg,var(--yellow),var(--orange));border-radius:999px;transition:width .4s ease}
.g-hud{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;font-weight:900;font-size:14px}
.g-hud .hud-chip{background:#f6f2ff;border-radius:999px;padding:6px 14px}
.g-hud .hud-chip b{color:var(--purple)}

/* 选项按钮（通用四选一/多选一） */
.opt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;width:min(560px,100%)}
.opt-btn{border:none;cursor:pointer;font-family:inherit;background:#f6f2ff;border-radius:20px;padding:16px 12px;font-size:clamp(17px,3.6vw,22px);font-weight:900;color:var(--ink);box-shadow:inset 0 -4px 0 rgba(74,63,107,.1);transition:transform .15s, background .15s;display:flex;align-items:center;justify-content:center;gap:8px;min-height:66px}
.opt-btn:hover{background:#ede6ff;transform:translateY(-3px)}
.opt-btn:active{transform:scale(.95)}
.opt-btn.correct{background:linear-gradient(135deg,#b8f0c0,#7fe08f);color:#0c6b2a;animation:starPop .4s}
.opt-btn.wrong{background:linear-gradient(135deg,#ffc9c9,#ff9d9d);color:#a02020;animation:shake .4s}
.opt-btn.emoji-opt{font-size:40px}
.opt-btn:disabled{cursor:default}

/* ---------- 数字记忆 九宫格 ---------- */
.num-pad{display:grid;grid-template-columns:repeat(3,74px);gap:12px}
.num-key{border:none;cursor:pointer;font-family:inherit;width:74px;height:66px;border-radius:20px;font-size:30px;font-weight:900;color:#fff;background:linear-gradient(135deg,var(--blue),var(--purple));box-shadow:0 5px 0 rgba(77,150,255,.4);transition:transform .1s}
.num-key:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(77,150,255,.4)}
.num-key.flash{animation:keyFlash .55s}
.num-key.good{background:linear-gradient(135deg,var(--green),var(--teal));box-shadow:0 5px 0 rgba(60,198,198,.4)}
.num-key.bad{background:linear-gradient(135deg,var(--red),#ff8a5d);animation:shake .4s}
.mem-status{font-weight:900;font-size:16px;color:var(--purple);min-height:24px}
.mem-sequence{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;min-height:44px}
.mem-dot{width:40px;height:40px;border-radius:14px;background:#efeafc;display:flex;align-items:center;justify-content:center;font-size:21px;font-weight:900;color:#cfc5e8}
.mem-dot.filled{background:linear-gradient(135deg,var(--yellow),var(--orange));color:#fff;box-shadow:0 4px 10px rgba(255,159,69,.4)}
.mem-dot.ok{background:linear-gradient(135deg,var(--green),var(--teal));color:#fff}

/* ---------- 找规律 ---------- */
.pattern-row{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
.pat-item{min-width:64px;height:64px;border-radius:18px;background:#f6f2ff;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:900;box-shadow:inset 0 -4px 0 rgba(74,63,107,.08);padding:0 10px}
.pat-item.q-mark{background:linear-gradient(135deg,var(--yellow),var(--orange));color:#fff;font-size:34px;animation:wobble 1.6s ease-in-out infinite}
.pat-item.grow{flex-direction:column;gap:2px;line-height:1}
.pat-arrow{font-size:26px;color:#cfc5e8}

/* ---------- 分类游戏 ---------- */
.sort-arena{display:flex;flex-direction:column;align-items:center;gap:18px;width:100%}
.sort-item{width:110px;height:110px;border-radius:28px;background:linear-gradient(160deg,#fff,#f4f0ff);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;font-size:58px;animation:bounceIn .45s cubic-bezier(.34,1.56,.64,1)}
.sort-item.pop-correct{animation:puffOut .45s forwards}
.sort-item.pop-wrong{animation:shake .4s}
.sort-baskets{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;width:min(620px,100%)}
.sort-basket{border:none;cursor:pointer;font-family:inherit;border-radius:22px;padding:14px 8px;background:#f6f2ff;box-shadow:inset 0 -5px 0 rgba(74,63,107,.1);display:flex;flex-direction:column;align-items:center;gap:4px;transition:transform .15s;font-weight:900;font-size:14px;color:var(--ink)}
.sort-basket:active{transform:scale(.94)}
.sort-basket .sb-ico{font-size:38px}
.sort-basket.hit{background:linear-gradient(135deg,#b8f0c0,#7fe08f)}

/* ---------- 迷宫 ---------- */
.maze-wrap{display:flex;flex-direction:column;align-items:center;gap:14px}
.maze-grid{display:grid;gap:3px;background:#d9d0ec;padding:8px;border-radius:16px;box-shadow:var(--shadow)}
.maze-cell{width:var(--mc,34px);height:var(--mc,34px);border-radius:8px;background:#fbf9ff;display:flex;align-items:center;justify-content:center;font-size:calc(var(--mc,34px) * .62)}
.maze-cell.wall{background:linear-gradient(135deg,#8f7fd4,#6f5bb8);box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.maze-cell.goal{background:linear-gradient(135deg,#fff3c9,#ffd964)}
.maze-cell.start{background:linear-gradient(135deg,#d9f6ff,#a5e8ff)}
.maze-star-here{animation:wobble 1.4s ease-in-out infinite;filter:drop-shadow(0 0 6px rgba(255,185,0,.8))}
.maze-rabbit{animation:hop .5s}
.dpad{display:grid;grid-template-columns:repeat(3,64px);grid-template-rows:repeat(3,56px);gap:6px}
.dpad button{border:none;cursor:pointer;font-family:inherit;border-radius:16px;font-size:24px;font-weight:900;color:#fff;background:linear-gradient(135deg,var(--teal),var(--blue));box-shadow:0 5px 0 rgba(77,150,255,.4);transition:transform .1s}
.dpad button:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(77,150,255,.4)}
.dpad .d-up{grid-area:1/2}.dpad .d-left{grid-area:2/1}.dpad .d-right{grid-area:2/3}.dpad .d-down{grid-area:3/2}
.dpad .d-mid{grid-area:2/2;display:flex;align-items:center;justify-content:center;font-size:20px}

/* ---------- 速算 ---------- */
.math-equation{font-size:clamp(38px,9vw,62px);font-weight:900;letter-spacing:4px;background:linear-gradient(135deg,#fff,#f4f0ff);border-radius:26px;padding:18px 34px;box-shadow:var(--shadow);animation:bounceIn .4s}
.math-equation .q{color:var(--pink)}
.timer-track{width:min(420px,88%);height:18px;background:#efeafc;border-radius:999px;overflow:hidden;box-shadow:inset 0 2px 4px rgba(74,63,107,.12)}
.timer-fill{height:100%;background:linear-gradient(90deg,var(--green),var(--yellow),var(--red));border-radius:999px;transition:width .25s linear}
.timer-fill.low{animation:pulseWarning .6s infinite}
.bolt-row{display:flex;gap:6px;font-size:24px}

/* ---------- 翻牌配对 ---------- */
.match-grid{display:grid;gap:10px;justify-content:center}
.match-card{width:var(--mcs,74px);height:var(--mcs,74px);border-radius:18px;cursor:pointer;perspective:600px;border:none;background:none;padding:0;font-family:inherit}
.match-inner{position:relative;width:100%;height:100%;transition:transform .35s;transform-style:preserve-3d}
.match-card.flipped .match-inner{transform:rotateY(180deg)}
.match-face{position:absolute;inset:0;border-radius:18px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;align-items:center;justify-content:center;font-size:calc(var(--mcs,74px) * .55);box-shadow:0 4px 10px rgba(74,63,107,.18)}
.match-front{background:linear-gradient(135deg,var(--purple),var(--blue));color:rgba(255,255,255,.9);font-size:calc(var(--mcs,74px) * .4)}
.match-back{background:linear-gradient(160deg,#fff,#f4f0ff);transform:rotateY(180deg)}
.match-card.done .match-back{background:linear-gradient(135deg,#b8f0c0,#7fe08f);animation:starPop .5s}
.match-card.shake{animation:shake .4s}

/* ---------- 时钟 ---------- */
.clock-face{filter:drop-shadow(0 10px 18px rgba(74,63,107,.2))}
.clock-face .dial{fill:#fff;stroke:#e6ddff;stroke-width:4}
.clock-face .tick{stroke:#b9a8e3;stroke-width:3;stroke-linecap:round}
.clock-face .hand-h{stroke:var(--ink);stroke-width:6;stroke-linecap:round}
.clock-face .hand-m{stroke:var(--pink);stroke-width:4;stroke-linecap:round}
.clock-face .pin{fill:var(--purple)}

/* ---------- 颜色混合 ---------- */
.mix-stage{display:flex;align-items:center;gap:14px;justify-content:center;flex-wrap:wrap}
.mix-blob{width:92px;height:92px;border-radius:50%;box-shadow:inset -8px -10px 0 rgba(0,0,0,.12), 0 10px 22px rgba(74,63,107,.22);display:flex;align-items:center;justify-content:center;font-weight:900;color:#fff;font-size:14px;text-shadow:0 1px 3px rgba(0,0,0,.3);animation:bounceIn .5s}
.mix-blob.small{width:64px;height:64px;font-size:12px}
.mix-plus{font-size:34px;font-weight:900;color:var(--ink-soft)}
.mix-eq{font-size:34px;font-weight:900;color:var(--ink-soft)}
.mix-blob.pulse{animation:pulseWarning .8s infinite}
.swatch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;width:min(560px,100%)}
.swatch-btn{border:none;cursor:pointer;font-family:inherit;height:78px;border-radius:20px;font-weight:900;font-size:15px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.35);box-shadow:inset 0 -6px 0 rgba(0,0,0,.15), 0 8px 18px rgba(74,63,107,.18);transition:transform .15s}
.swatch-btn:hover{transform:translateY(-3px)}
.swatch-btn:active{transform:scale(.95)}

/* ---------- 生活排排队 ---------- */
.seq-slots{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;width:min(640px,100%)}
.seq-slot{flex:1 1 96px;max-width:150px;min-height:96px;border-radius:20px;border:3px dashed #d9cff2;background:#fbf9ff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-weight:900;color:#b9a8e3;font-size:14px;padding:8px 6px;text-align:center;transition:transform .18s, background .18s, border-color .18s}
.seq-slot .ss-num{font-size:26px}
.seq-slot .ss-emoji{font-size:34px;line-height:1.15}
.seq-slot.active{border-color:var(--orange);background:linear-gradient(135deg,#fff6ea,#ffe8d1);color:var(--orange);animation:pulseWarning .9s infinite;transform:translateY(-3px)}
.seq-slot.filled{border-style:solid;border-color:var(--green);background:linear-gradient(135deg,#effee2,#d8f5cf);color:#0c6b2a;animation:starPop .35s}
.seq-slot.ok{border-color:var(--teal);background:linear-gradient(135deg,#d3f4f4,#b4ecec)}
.seq-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:12px;width:min(640px,100%);margin-top:4px}
.seq-card{border:none;cursor:pointer;font-family:inherit;border-radius:22px;padding:14px 10px;background:linear-gradient(160deg,#fff,#fdf3e6);box-shadow:inset 0 -5px 0 rgba(74,63,107,.08), 0 6px 14px rgba(74,63,107,.12);display:flex;flex-direction:column;align-items:center;gap:4px;font-weight:900;font-size:14px;color:var(--ink);transition:transform .15s;animation:bounceIn .45s cubic-bezier(.34,1.56,.64,1)}
.seq-card .sc-emoji{font-size:42px;line-height:1.1}
.seq-card:hover{transform:translateY(-4px) scale(1.03)}
.seq-card:active{transform:scale(.94)}
.seq-card.wrong{animation:shake .4s}

/* ---------- 比轻重 ---------- */
.balance-stage{display:flex;flex-direction:column;align-items:center;gap:6px}
.seesaw{width:min(340px,86vw);height:120px;position:relative}
.seesaw .beam{position:absolute;left:0;right:0;top:38px;height:14px;border-radius:8px;background:linear-gradient(90deg,#c9a06a,#a87c44);transform-origin:center;transition:transform .5s cubic-bezier(.34,1.56,.64,1);box-shadow:0 4px 8px rgba(74,63,107,.2)}
.seesaw.tilt-left .beam{transform:rotate(-11deg)}
.seesaw.tilt-right .beam{transform:rotate(11deg)}
.seesaw .pan-l,.seesaw .pan-r{position:absolute;top:44px;font-size:30px;display:flex;gap:4px;align-items:center;justify-content:center;flex-wrap:wrap;width:120px}
.seesaw .pan-l{left:4px}.seesaw .pan-r{right:4px}
.seesaw .stand{position:absolute;left:50%;transform:translateX(-50%);bottom:0;width:0;height:0;border-left:22px solid transparent;border-right:22px solid transparent;border-bottom:56px solid #b98d55;filter:drop-shadow(0 4px 6px rgba(74,63,107,.25))}
.chain-list{display:flex;flex-direction:column;gap:8px;width:min(420px,92%)}
.chain-row{background:#f6f2ff;border-radius:16px;padding:10px 14px;font-weight:900;font-size:16px;display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;animation:cardIn .4s backwards}

/* ---------- 镜子对称 ---------- */
.sym-wrap{display:flex;flex-direction:column;align-items:center;gap:14px}
.sym-grid{display:grid;gap:5px;padding:10px;background:#f6f2ff;border-radius:18px;box-shadow:var(--shadow)}
.sym-cell{width:var(--sc,40px);height:var(--sc,40px);border-radius:10px;background:#fff;box-shadow:inset 0 0 0 2px #ece6fa;cursor:default;display:flex;align-items:center;justify-content:center;font-size:calc(var(--sc,40px)*.5)}
.sym-cell.mirror{background:repeating-linear-gradient(45deg,#efe6ff,#efe6ff 6px,#e2d4ff 6px,#e2d4ff 12px);cursor:default}
.sym-cell.clickable{cursor:pointer;transition:transform .12s}
.sym-cell.clickable:hover{transform:scale(1.12);box-shadow:inset 0 0 0 3px var(--purple)}
.sym-cell.just-wrong{animation:shake .35s}
.palette-row{display:flex;gap:10px}
.palette-dot{width:44px;height:44px;border-radius:50%;border:4px solid #fff;box-shadow:0 4px 10px rgba(74,63,107,.25);cursor:pointer;transition:transform .15s}
.palette-dot.sel{transform:scale(1.22);border-color:var(--ink)}
/* ============================================================
   动画 & 响应式
   ============================================================ */
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-18px) rotate(6deg)}}
@keyframes wobble{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes rainbowMove{to{background-position:200% center}}
@keyframes cardIn{from{opacity:0;transform:translateY(26px) scale(.94)}to{opacity:1;transform:none}}
@keyframes bounceIn{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.08)}100%{transform:scale(1);opacity:1}}
@keyframes starPop{0%{transform:scale(.3) rotate(-30deg);opacity:.4}70%{transform:scale(1.35) rotate(8deg)}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes coinPop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
@keyframes keyFlash{0%,100%{transform:scale(1)}45%{transform:scale(1.22);filter:brightness(1.5)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
@keyframes toastIn{from{opacity:0;transform:translateY(-24px) scale(.9)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateY(-16px) scale(.92)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes modalIn{from{opacity:0;transform:translateY(40px) scale(.9)}to{opacity:1;transform:none}}
@keyframes puffOut{to{transform:scale(1.6);opacity:0}}
@keyframes pulseWarning{0%,100%{filter:brightness(1)}50%{filter:brightness(1.35)}}
@keyframes hop{0%{transform:translateY(0)}40%{transform:translateY(-14px) scale(1.1)}100%{transform:translateY(0)}}
@keyframes spinSlow{to{transform:rotate(360deg)}}

/* 滚动条 */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#cfc3ea;border-radius:99px}
::-webkit-scrollbar-track{background:transparent}

/* 响应式 */
@media (max-width:520px){
  #app{padding:10px 10px 92px}
  #app > .topbar{margin:0 0 14px}
  .games-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .game-card .gc-ico{width:54px;height:54px;font-size:28px}
  .num-pad{grid-template-columns:repeat(3,64px)}
  .num-key{width:64px;height:58px;font-size:26px}
  .topbar{padding:8px 10px}
  .logo{font-size:17px}
  .tabbar button{padding:7px 10px;font-size:10px}
  .dpad{grid-template-columns:repeat(3,58px);grid-template-rows:repeat(3,50px)}
  .game-body{padding:16px 10px;min-height:380px}
}
@media (max-width:390px){
  .hero{padding:15px 14px}
  .hero-greet{font-size:12px;padding:4px 10px;line-height:1.45}
  .hero h1{font-size:21px}
  .hero p.sub{font-size:12px;line-height:1.55}
  .title-box{gap:7px}
  .progress-track{min-width:120px}
  .daily-banner{padding:11px 12px;gap:9px}
  .daily-banner .db-ico{font-size:32px}
  .daily-banner .db-title{font-size:14px}
  .daily-banner .db-desc{font-size:11px;line-height:1.45}
  .section-title{font-size:16px;align-items:flex-start;flex-wrap:wrap}
  .section-title .st-more{margin-left:30px;flex:1 1 100%;font-size:11px}
  .game-card{padding:13px 8px 11px}
  .game-card .gc-ico{width:50px;height:50px;font-size:26px;border-radius:16px}
  .game-card h3{font-size:14px}
  .game-card .gc-desc{font-size:10.5px;line-height:1.4;min-height:44px}
}
@media (max-width:360px){
  .games-grid{grid-template-columns:repeat(2,1fr)}
}

/* 减少动画偏好 */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* ---------- 影子找找看 ---------- */
.sh-question{display:flex;flex-direction:column;align-items:center;gap:8px;background:#fff;border-radius:26px;padding:14px 26px;box-shadow:var(--shadow);margin:0 auto;animation:cardIn .4s}
.sh-qshape{width:130px;height:130px;display:flex;align-items:center;justify-content:center}
.sh-qshape svg{width:100%;height:100%;filter:drop-shadow(0 8px 12px rgba(74,63,107,.18))}
.sh-qname{font-weight:900;font-size:19px;color:var(--ink);background:linear-gradient(135deg,#f3edff,#e7dcff);padding:5px 18px;border-radius:999px;box-shadow:inset 0 -3px 0 rgba(74,63,107,.08)}
.sh-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:14px;width:min(640px,100%);margin:16px auto 0}
.sh-opt{border:none;cursor:pointer;font-family:inherit;background:#fff;border-radius:22px;padding:16px;box-shadow:inset 0 -5px 0 rgba(74,63,107,.08),0 6px 14px rgba(74,63,107,.12);display:flex;align-items:center;justify-content:center;transition:transform .15s;animation:bounceIn .45s cubic-bezier(.34,1.56,.64,1)}
.sh-opt svg{width:78px;height:78px;display:block;fill:#2e2647}
.sh-opt:hover{transform:translateY(-4px) scale(1.04)}
.sh-opt:active{transform:scale(.94)}
.sh-opt.correct{background:linear-gradient(135deg,#effee2,#d8f5cf);box-shadow:0 0 0 4px var(--green),0 6px 14px rgba(74,63,107,.12);animation:starPop .35s}
.sh-opt.wrong{animation:shake .4s}

/* ---------- 影子找找看 · 连对 HUD ---------- */
.g-hud .hud-chip.streak-hot{background:linear-gradient(135deg,#ffe8d6,#ffd0a8);color:#c25e00}
.g-hud .hud-chip.streak-hot b{color:#e3560a}
.g-hud .hud-chip.chip-pop{animation:chipPop .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes chipPop{0%{transform:scale(1)}45%{transform:scale(1.2)}100%{transform:scale(1)}}
/* 结算弹窗：新徽章依次弹入（惊喜反馈，6-8 岁向） */
@keyframes badgePop{0%{transform:scale(.2) rotate(-16deg);opacity:0}55%{transform:scale(1.22) rotate(5deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
.badge-pop{animation:badgePop .6s cubic-bezier(.2,1.4,.4,1) both}

/* ---------- 披萨平分家 ---------- */
.pizza-opt{padding:10px;display:flex;align-items:center;justify-content:center;background:#fffdf6}
.pizza-opt svg{width:100%;max-width:132px;height:auto;display:block;filter:drop-shadow(0 4px 6px rgba(74,63,107,.18));transition:transform .25s}
.pizza-opt:hover svg{transform:scale(1.06) rotate(-3deg)}
.pizza-opt.correct{background:linear-gradient(135deg,#e2fbE8,#a9efbd)}
.pizza-opt.correct svg{animation:starPop .4s}

/* ---------- 怎么办小侦探 ---------- */
.sense-opt{flex-direction:column;gap:2px;padding:12px 8px}
.sense-opt .so-emoji{font-size:44px;line-height:1.15}
.sense-opt .so-label{font-size:clamp(15px,3vw,18px)}
.sense-opt:hover .so-emoji{animation:wobble .6s ease-in-out}

/* ---------- 方位小管家 ---------- */
.dir-scene{position:relative;width:min(560px,100%);height:150px;background:linear-gradient(180deg,#f2f8ff,#e3eeff);border:3px dashed #b9d4ff;border-radius:24px;margin:0 auto 14px;overflow:hidden}
.dir-item{position:absolute;transform:translate(-50%,-50%);text-align:center;line-height:1.1}
.dir-item .di-emoji{display:block;font-size:46px}
.dir-item .di-name{display:block;font-size:14px;font-weight:900;color:#33507a;margin-top:2px}
.dir-avatar{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);text-align:center}
.dir-avatar .da-emoji{display:block;font-size:60px;line-height:1.1}
.dir-face-chip{display:inline-block;margin-top:6px;background:#fff;border:2px solid #b9d4ff;border-radius:999px;padding:3px 14px;font-weight:900;color:#33507a;font-size:14px}
.dir-emoji{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:64px;line-height:1.1}
.dir-opt{flex-direction:column;gap:2px;padding:10px 8px}
.dir-opt .do-arrow{font-size:42px;line-height:1.1}
.dir-opt .do-label{font-size:clamp(15px,3vw,18px)}
.dir-opt:hover .do-arrow{animation:wobble .6s ease-in-out}

/* ---------- 四宫数独 ---------- */
.sdk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;width:min(340px,94vw);margin:14px auto 4px;padding:10px;background:#eef5ff;border-radius:22px;box-shadow:var(--shadow)}
.sdk-cell{aspect-ratio:1/1;background:#fff;border:3px solid transparent;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:clamp(30px,8vw,40px);line-height:1;box-shadow:inset 0 0 0 2px #e4ecf8}
.sdk-cell.sdk-br{border-right-color:#7ea6d8}
.sdk-cell.sdk-bb{border-bottom-color:#7ea6d8}
.sdk-cell.sdk-given{background:#f2f7ff;box-shadow:inset 0 0 0 2px #b9d4ff;cursor:default}
.sdk-cell.sdk-empty{cursor:pointer;transition:transform .12s}
.sdk-cell.sdk-empty:hover{transform:scale(1.08);box-shadow:inset 0 0 0 3px var(--blue)}
.sdk-cell.sdk-bad{background:#ffe9e9;box-shadow:inset 0 0 0 3px #ff8a8a;animation:shake .35s}
.sdk-keys{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:14px auto 6px}
.sdk-key{width:64px;height:64px;border:none;border-radius:18px;background:#fff;font-size:34px;line-height:1;cursor:pointer;font-family:inherit;box-shadow:inset 0 -5px 0 rgba(74,63,107,.08),0 6px 14px rgba(74,63,107,.12);transition:transform .15s;display:flex;align-items:center;justify-content:center}
.sdk-key:hover{transform:translateY(-3px) scale(1.05)}
.sdk-key:active{transform:scale(.94)}
.sdk-key.sel{background:#eaf3ff;box-shadow:0 0 0 4px var(--blue),0 6px 14px rgba(74,63,107,.12)}
.sdk-key.sdk-eraser{font-size:28px;background:#fff6ea}
.sdk-key.sdk-undo{font-size:28px;background:#eefaf1}
.sdk-key.sdk-off{opacity:.4;filter:grayscale(.7);cursor:default}
.sdk-key.sdk-off:hover{transform:none}
/* 🐾 脚印小侦探：泥地案发现场卡片 */
.trc-card{width:min(420px,94%);margin:14px auto 4px;background:linear-gradient(160deg,#f0dcc0,#d9b38c);border-radius:24px;padding:14px 16px 10px;box-shadow:inset 0 -6px 0 rgba(122,74,33,.18),0 10px 22px rgba(122,74,33,.18);position:relative;overflow:hidden}
.trc-card::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(122,74,33,.10) 2px,transparent 3px);background-size:26px 26px;opacity:.5;pointer-events:none}
.trc-caption{position:relative;font-weight:900;font-size:15px;color:#6b3f16;margin-bottom:4px}
.trc-svg{position:relative;display:flex;justify-content:center}
.trc-foot{width:min(200px,52vw);height:auto;display:block;filter:drop-shadow(0 4px 4px rgba(122,74,33,.25));animation:footStamp .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes footStamp{0%{transform:scale(.4) rotate(-6deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
.trc-clue{position:relative;margin:8px 2px 2px;background:rgba(255,255,255,.72);border-radius:14px;padding:8px 12px;font-weight:900;font-size:clamp(15px,3vw,18px);color:#5b3410;line-height:1.5}
/* 🧩 类比小达人：示范配对卡片 */
.alg-card{width:min(460px,94%);margin:14px auto 4px;background:linear-gradient(160deg,#efe7ff,#cdb4ff);border-radius:24px;padding:14px 16px 12px;box-shadow:inset 0 -6px 0 rgba(120,80,220,.16),0 10px 22px rgba(120,80,220,.16)}
.alg-caption{font-weight:900;font-size:15px;color:#5b3fa8;margin-bottom:6px;text-align:center}
.alg-pair{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}
.alg-pair.alg-query{margin-top:8px;padding-top:10px;border-top:2px dashed rgba(120,80,220,.35)}
.alg-item{display:flex;flex-direction:column;align-items:center;gap:2px;background:rgba(255,255,255,.88);border-radius:16px;padding:8px 14px;box-shadow:0 3px 0 rgba(120,80,220,.18);animation:algPop .35s cubic-bezier(.34,1.56,.64,1)}
.alg-item .alg-emoji{font-size:38px;line-height:1.1}
.alg-item .alg-label{font-weight:900;font-size:14px;color:#4a3a7a}
.alg-arrow{font-size:26px;font-weight:900;color:#7a56d6}
.alg-q{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--yellow),var(--orange));color:#fff;font-size:30px;font-weight:900;box-shadow:0 4px 0 rgba(217,123,6,.5);animation:algPop .5s .12s backwards cubic-bezier(.34,1.56,.64,1)}
@keyframes algPop{0%{transform:scale(.5);opacity:0}100%{transform:scale(1);opacity:1}}

/* ============ 水杯大侦探 · 容量比较（v1.22.0） ============ */
.cap-card{width:min(480px,94%);margin:14px auto 4px;background:linear-gradient(160deg,#e2f8f8,#bdeeee);border-radius:24px;padding:14px 16px 12px;box-shadow:inset 0 -6px 0 rgba(30,150,150,.16),0 10px 22px rgba(30,150,150,.16)}
.cap-caption{font-weight:900;font-size:15px;color:#0f6b6b;margin-bottom:6px;text-align:center}
.cap-scene{display:flex;justify-content:center}
.cap-svg{width:min(400px,94%);height:auto;display:block}
.cup-name{font-size:14px;font-weight:900;fill:#0f6b6b}
.cap-cup .cup-body{transition:stroke .2s}
.cap-cup.win .cup-body{stroke:#f5a623;stroke-width:4.5}
.cap-cup.win .cup-name{fill:#c77800}
.cup-water{transform-box:fill-box;transform-origin:50% 100%;animation:capFill .55s cubic-bezier(.34,1.56,.64,1)}
@keyframes capFill{0%{transform:scaleY(.12)}65%{transform:scaleY(1.05)}100%{transform:scaleY(1)}}
.cap-opt-grid{grid-template-columns:repeat(3,1fr);width:min(520px,100%)}
.cap-opt{min-height:76px;font-size:clamp(16px,3.2vw,20px)}
.cap-opt .cap-emoji{font-size:34px;line-height:1}
.cap-opt .cap-opt-label{font-size:inherit}

/* ============ 矩阵小达人 · 2×2 矩阵补全（v1.26.0） ============ */
.mx-card{width:min(400px,94%);margin:14px auto 4px;background:linear-gradient(160deg,#e6ecff,#b7c8ff);border-radius:24px;padding:14px 16px 16px;box-shadow:inset 0 -6px 0 rgba(70,100,220,.16),0 10px 22px rgba(70,100,220,.16)}
.mx-caption{font-weight:900;font-size:15px;color:#33448c;margin-bottom:10px;text-align:center}
.mx-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mx-cell{position:relative;display:flex;align-items:center;justify-content:center;min-height:104px;background:rgba(255,255,255,.9);border-radius:18px;box-shadow:0 4px 0 rgba(70,100,220,.16);animation:mxPop .35s cubic-bezier(.34,1.56,.64,1)}
.mx-items{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:2px 4px;padding:12px 16px 14px;line-height:1.05}
.mx-n{position:absolute;right:8px;bottom:6px;font-weight:900;font-size:13px;color:#33448c;background:#e6ecff;border-radius:999px;padding:1px 8px}
.mx-qcell{background:linear-gradient(135deg,var(--yellow),var(--orange));box-shadow:0 4px 0 rgba(217,123,6,.45)}
.mx-q{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.92);color:#c25e00;font-size:30px;font-weight:900;animation:mxPop .5s .12s backwards cubic-bezier(.34,1.56,.64,1)}
.mx-opt{min-height:76px}
.mx-opt .so-emoji{font-size:42px}
@keyframes mxPop{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}

/* ============ 高矮比一比 · 传递性推理（v1.27.0） ============ */
.ht-card{width:min(480px,94%);margin:14px auto 4px;background:linear-gradient(160deg,#fff4e3,#ffd9ae);border-radius:24px;padding:14px 16px 16px;box-shadow:inset 0 -6px 0 rgba(194,94,0,.14),0 10px 22px rgba(194,94,0,.14)}
.ht-caption{font-weight:900;font-size:15px;color:#8a4b00;margin-bottom:10px;text-align:center}
.ht-chars{display:flex;gap:10px;justify-content:center;align-items:flex-end;flex-wrap:wrap}
.ht-char{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:66px;animation:mxPop .35s cubic-bezier(.34,1.56,.64,1)}
.ht-emo{font-size:38px;line-height:1.1;filter:drop-shadow(0 3px 2px rgba(194,94,0,.25))}
.ht-barwrap{width:26px;height:92px;display:flex;align-items:flex-end;background:rgba(255,255,255,.6);border-radius:999px;box-shadow:inset 0 2px 4px rgba(194,94,0,.14);overflow:hidden}
.ht-bar{width:100%;border-radius:999px;background:linear-gradient(180deg,var(--yellow),var(--orange));transform-origin:bottom;animation:htGrow .45s cubic-bezier(.34,1.56,.64,1)}
.ht-bar.ht-qbar{height:64px;display:flex;align-items:center;justify-content:center;color:#c25e00;font-weight:900;font-size:20px;background:repeating-linear-gradient(45deg,#fff,#fff 6px,#ffe9c9 6px,#ffe9c9 12px);border:2px dashed #f0a35e;animation:none}
.ht-name{font-weight:900;font-size:13px;color:#7a4300;background:rgba(255,255,255,.9);border-radius:999px;padding:2px 10px;box-shadow:0 2px 0 rgba(194,94,0,.14)}
.ht-clues{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}
.ht-clue{background:rgba(255,255,255,.94);border-radius:999px;padding:6px 12px;font-weight:900;font-size:14px;color:#7a4300;box-shadow:0 2px 0 rgba(194,94,0,.16);animation:mxPop .3s cubic-bezier(.34,1.56,.64,1)}
.ht-ask{font-weight:900;font-size:clamp(16px,3.4vw,20px);color:#8a4b00;margin:10px 0 4px;text-align:center}
.ht-opt{min-height:76px}
@keyframes htGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* ============ 排队小能手 · 序数与位置推理（v1.29.0） ============ */
.ln-card{width:min(560px,96%);margin:14px auto 4px;background:linear-gradient(160deg,#e3f8f5,#a8e6dc);border-radius:24px;padding:14px 10px 16px;box-shadow:inset 0 -6px 0 rgba(15,118,110,.14),0 10px 22px rgba(15,118,110,.14)}
.ln-caption{font-weight:900;font-size:15px;color:#0f766e;margin-bottom:12px;text-align:center}
.ln-line{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;padding:20px 8px 12px}
.ln-line::before{content:'';position:absolute;left:10px;right:10px;top:52%;height:4px;border-radius:4px;background:repeating-linear-gradient(90deg,#8a6d3b 0 10px,transparent 10px 18px);opacity:.7}
.ln-end{position:relative;z-index:1;font-weight:900;font-size:12px;color:#fff;background:#0f766e;border-radius:999px;padding:4px 8px;box-shadow:0 2px 0 rgba(15,118,110,.3);white-space:nowrap}
.ln-animals{position:relative;z-index:1;display:flex;gap:6px;justify-content:center;align-items:flex-end;flex-wrap:wrap}
.ln-animal{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:58px;padding:6px 8px 8px;background:rgba(255,255,255,.94);border-radius:16px;box-shadow:0 4px 0 rgba(15,118,110,.18);animation:mxPop .35s cubic-bezier(.34,1.56,.64,1)}
.ln-emo{font-size:34px;line-height:1.1;filter:drop-shadow(0 3px 2px rgba(15,118,110,.25))}
.ln-name{font-weight:900;font-size:13px;color:#115e59;white-space:nowrap}
.ln-prem{display:flex;justify-content:center;margin-top:12px}
.ln-prem-chip{background:rgba(255,255,255,.94);border-radius:999px;padding:6px 14px;font-weight:900;font-size:14px;color:#0e7490;box-shadow:0 2px 0 rgba(14,116,144,.16);animation:mxPop .3s cubic-bezier(.34,1.56,.64,1)}
.ln-ask{font-weight:900;font-size:clamp(16px,3.4vw,20px);color:#0f766e;margin:10px 0 4px;text-align:center}
.ln-opt{min-height:76px;flex-direction:column;gap:2px}
.ln-opt .so-label{font-size:clamp(18px,3vw,22px)}

/* ============ 密码破译员 · 符号替代推理（v1.31.0） ============ */
.cf-card{width:min(560px,96%);margin:14px auto 4px;background:linear-gradient(160deg,#f0eaff,#cbb2ff);border-radius:24px;padding:14px 10px 16px;box-shadow:inset 0 -6px 0 rgba(109,63,175,.16),0 10px 22px rgba(109,63,175,.16)}
.cf-caption{font-weight:900;font-size:15px;color:#6d3faf;margin-bottom:12px;text-align:center}
.cf-keyrow{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.cf-key{background:rgba(255,255,255,.94);border-radius:999px;padding:6px 14px;font-weight:900;font-size:16px;color:#5b2ea6;box-shadow:0 2px 0 rgba(91,46,166,.18);animation:mxPop .3s cubic-bezier(.34,1.56,.64,1)}
.cf-rev{display:flex;justify-content:center;margin-top:10px}
.cf-rev-chip{background:rgba(255,255,255,.94);border-radius:999px;padding:6px 14px;font-weight:900;font-size:14px;color:#0e7490;box-shadow:0 2px 0 rgba(14,116,144,.16);animation:mxPop .3s cubic-bezier(.34,1.56,.64,1)}
.cf-code{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:16px;padding:6px 0 2px}
.cf-slot{display:flex;align-items:center;justify-content:center;width:74px;height:74px;background:repeating-linear-gradient(45deg,#fff,#fff 8px,#f3edff 8px,#f3edff 16px);border:3px dashed #8b5cf6;border-radius:18px;box-shadow:0 4px 0 rgba(109,63,175,.2);animation:mxPop .35s cubic-bezier(.34,1.56,.64,1)}
.cf-sym{font-size:38px;line-height:1;filter:drop-shadow(0 3px 2px rgba(109,63,175,.25))}
.cf-ask{font-weight:900;font-size:clamp(16px,3.4vw,20px);color:#6d3faf;margin:10px 0 4px;text-align:center}
.cf-opt{min-height:76px;font-size:clamp(24px,5vw,34px);letter-spacing:3px;font-family:ui-monospace,Menlo,monospace}

/* ============================================================
   小伙伴 & 后院换装（js/core/companions.js）—— 四园共用
   ============================================================ */
.cmp-wallet{background:linear-gradient(135deg,#fff6d9,#ffe9f3);border:3px dashed #ffcf5e;border-radius:18px;
  padding:10px 14px;font-weight:900;font-size:14px;color:#a06e00;margin-bottom:14px;text-align:center}
.cmp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px}
.cmp-card{background:#fff;border:3px solid #ece6fa;border-radius:20px;padding:12px 10px;text-align:center;
  transition:transform .16s, border-color .16s;cursor:pointer}
.cmp-card:hover{transform:translateY(-4px)}
.cmp-card.owned{border-color:#8fd99f;background:linear-gradient(160deg,#f5fdf7,#eafaf0)}
.cmp-card.active{border-color:#b983ff;box-shadow:0 0 0 3px rgba(185,131,255,.18)}
.cmp-emoji{font-size:40px;width:68px;height:68px;margin:0 auto 6px;border-radius:20px;display:flex;
  align-items:center;justify-content:center;background:#f6f2ff;box-shadow:inset 0 -4px 0 rgba(74,63,107,.08)}
.cmp-outfit .cmp-emoji{width:56px;height:56px;font-size:32px}
.cmp-name{font-weight:900;font-size:14px}
.cmp-tag{font-size:11px;color:var(--ink-soft);font-weight:700;min-height:30px;line-height:1.35;margin:2px 0 4px}
.cmp-price{font-weight:900;font-size:12px;color:#c98a00}
.cmp-state{font-size:11px;font-weight:900;color:var(--ink-soft);margin-top:4px}
.cmp-buy{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.cmp-subtitle{font-weight:900;margin:16px 2px 8px;font-size:15px;color:var(--ink)}

/* ---------- 后院场景 ---------- */
.by-panel{padding:16px}
.by-scene{position:relative;height:min(46vh,330px);min-height:250px;border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg,#bfe9ff 0%,#e4f6ff 58%,#c9f0d3 58%,#a7e3b6 100%);
  box-shadow:inset 0 -6px 0 rgba(74,63,107,.06)}
.by-sun{position:absolute;left:14px;top:10px;font-size:34px;animation:floaty 6s ease-in-out infinite}
.by-cloud{position:absolute;font-size:30px;opacity:.9;animation:floaty 9s ease-in-out infinite}
.by-cloud.c1{left:30%;top:8px;animation-delay:1s}
.by-cloud.c2{right:16%;top:24px;font-size:24px;animation-delay:2.4s}
.by-house{position:absolute;right:14px;bottom:36%;font-size:54px;filter:drop-shadow(0 4px 6px rgba(74,63,107,.18))}
.by-tree{position:absolute;bottom:33%;font-size:46px}
.by-tree.t1{left:7%}
.by-tree.t2{left:24%;font-size:36px}
.by-flower{position:absolute;bottom:6%;font-size:26px}
.by-flower.f1{left:15%}
.by-flower.f2{right:22%}
.by-fence{position:absolute;left:0;right:0;bottom:0;height:33%;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.45) 0 12px,transparent 12px 30px)}
.by-ground{position:absolute;left:0;right:0;bottom:0;height:24%;background:linear-gradient(180deg,#9fe0a8,#7bd88f)}
.by-pet{position:absolute;bottom:20%;transform:translateX(-50%);cursor:pointer;user-select:none;z-index:3}
.by-fig{position:relative;display:block;width:96px;height:96px}
.by-base{position:absolute;left:50%;bottom:0;transform:translateX(-50%);font-size:74px;line-height:1}
.by-hat{position:absolute;left:50%;top:-16px;transform:translateX(-50%);font-size:30px;line-height:1}
.by-cloth{position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);font-size:34px;line-height:1}
.by-acc{position:absolute;right:-8px;bottom:18px;font-size:26px;line-height:1}
.by-shadow{width:54px;height:10px;margin:2px auto 0;border-radius:50%;background:rgba(74,63,107,.18);filter:blur(1px)}
.by-bubble{position:absolute;left:50%;bottom:104%;transform:translateX(-50%) scale(.6);opacity:0;background:#fff;
  border-radius:16px;padding:6px 12px;font-size:12px;font-weight:900;white-space:nowrap;
  box-shadow:0 6px 14px rgba(74,63,107,.18);transition:all .3s cubic-bezier(.34,1.56,.64,1);z-index:4}
.by-bubble.show{opacity:1;transform:translateX(-50%) scale(1)}
.by-hud{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.by-who{font-weight:900;font-size:14px}
.by-sub{font-weight:700;font-size:12px;color:var(--ink-soft)}
.by-actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.by-wardrobe{margin-top:12px;background:#f8f6ff;border:3px solid #ece6fa;border-radius:18px;padding:12px}
.by-wardrobe-title{font-weight:900;font-size:14px;margin-bottom:8px}
.by-slot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.by-slot-name{font-weight:900;font-size:12px;color:var(--ink-soft);min-width:34px}
.by-slot-btn{border:none;cursor:pointer;font-family:inherit;background:#fff;border-radius:999px;padding:6px 12px;
  font-weight:900;font-size:12px;color:var(--ink);box-shadow:inset 0 0 0 2px #e6e0f2;transition:transform .12s}
.by-slot-btn:hover{transform:translateY(-2px)}
.by-slot-btn.on{background:linear-gradient(135deg,#d9c8ff,#b983ff);color:#fff;box-shadow:none}
.by-empty{font-size:12px;color:var(--ink-soft);font-weight:700}
.by-switch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:10px}
.by-switch-item{border:none;cursor:pointer;font-family:inherit;background:#f6f2ff;border-radius:16px;padding:12px 8px;
  font-weight:900;font-size:13px;color:var(--ink);display:flex;flex-direction:column;align-items:center;gap:4px}
.by-switch-item.on{background:linear-gradient(135deg,#d9c8ff,#b983ff);color:#fff}
.by-switch-emoji{font-size:30px}
@media (max-width:520px){
  .by-scene{height:262px}
  .by-fig{width:80px;height:80px}
  .by-base{font-size:60px}
  .by-hat{font-size:24px;top:-12px}
  .by-cloth{font-size:28px}
  .by-acc{font-size:22px}
}

/* ---------- 小伙伴卡片动效 & 预览（2026-10-16） ---------- */
@keyframes cmpFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.06)}}
.cmp-float{animation:cmpFloat 2.2s ease-in-out infinite}
.cmp-preview{display:flex;align-items:center;justify-content:center;height:150px;
  background:radial-gradient(circle at 50% 60%,#fff7fb,#f2ecff);border-radius:22px;
  border:3px dashed #d9c8ff;overflow:hidden}
.cmp-preview-pet{font-size:86px;line-height:1;filter:drop-shadow(0 8px 14px rgba(74,63,107,.25))}

/* ---------- 语音介绍按钮 & 介绍条（voice.js，2026-10-16） ---------- */
.game-intro{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:linear-gradient(135deg,#fffaf0,#fff2f8);
  border:3px dashed #ffcf5e;border-radius:20px;padding:10px 14px;margin-bottom:12px;box-shadow:var(--shadow)}
.game-intro .gi-text{font-weight:900;font-size:15px;line-height:1.5;color:var(--ink);flex:1;min-width:180px}
.modal-intro{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;
  background:linear-gradient(135deg,#fff8e6,#ffeef6);border-radius:18px;padding:10px 12px;margin-bottom:12px}
.modal-intro span{font-weight:900;font-size:14px;line-height:1.5;text-align:left;flex:1;min-width:150px;color:var(--ink)}
.voice-btn{border:none;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px;
  background:linear-gradient(135deg,#ffd93d,#ff9f45);color:#7a4b00;font-weight:900;font-size:14px;
  border-radius:999px;padding:9px 16px;box-shadow:0 4px 0 #d97b06;transition:transform .12s;flex:none}
.voice-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #d97b06}
.voice-btn.voice-big{font-size:16px;padding:12px 20px}
.voice-btn.speaking{background:linear-gradient(135deg,#7fe08f,#3ec6c6);color:#fff;box-shadow:0 4px 0 #2b9d9d;
  animation:voicePulse .9s ease-in-out infinite}
@keyframes voicePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@media (max-width:520px){
  .game-intro{flex-direction:column;align-items:stretch}
  .game-intro .gi-text{font-size:14px}
}

/* ---------- 大号对错反馈（ui.js feedback） ---------- */
.fb-layer{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;pointer-events:none;opacity:0;transition:opacity .18s}
.fb-layer.show{animation:fbShow .95s ease forwards}
.fb-layer.ok{background:radial-gradient(circle at 50% 45%,rgba(74,214,109,.22),rgba(74,214,109,0) 58%)}
.fb-layer.bad{background:radial-gradient(circle at 50% 45%,rgba(255,86,86,.22),rgba(255,86,86,0) 58%)}
.fb-badge{width:148px;height:148px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:92px;font-weight:900;color:#fff;line-height:1;
  text-shadow:0 4px 10px rgba(0,0,0,.18)}
.fb-layer.ok .fb-badge{background:linear-gradient(160deg,#63e07f,#22a34c);
  box-shadow:0 0 0 14px rgba(74,214,109,.20),0 20px 44px rgba(34,163,76,.35)}
.fb-layer.bad .fb-badge{background:linear-gradient(160deg,#ff8a8a,#d63031);
  box-shadow:0 0 0 14px rgba(255,86,86,.18),0 20px 44px rgba(214,48,49,.35);
  animation:fbShake .5s ease}
.fb-text{font-weight:900;font-size:22px;letter-spacing:1px}
.fb-layer.ok .fb-text{color:#178a3f}
.fb-layer.bad .fb-text{color:#c02626}
@keyframes fbShow{0%{opacity:0;transform:scale(.62)}16%{opacity:1;transform:scale(1.10)}
  30%{transform:scale(1)}78%{opacity:1}100%{opacity:0;transform:scale(.96)}}
@keyframes fbShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-10px)}50%{transform:translateX(10px)}75%{transform:translateX(-6px)}}
@media (max-width:520px){
  .fb-badge{width:118px;height:118px;font-size:72px}
  .fb-text{font-size:18px}
}

/* 分类游戏：对/错状态文字（配合大号徽标，文字只作辅助） */
.g-sub.ok{color:#178a3f;font-weight:900;font-size:17px}
.g-sub.bad{color:#c02626;font-weight:900;font-size:17px}

/* 手机横屏（低高度）：必须放在文件末尾，覆盖上面的基础尺寸。
   同一组规则里也保留一个显式宽度上限，避免桌面超宽短窗口误触发。 */
@media (max-height:520px) and (max-width:1024px) and (orientation:landscape){
  #app{padding-bottom:max(92px,calc(84px + env(safe-area-inset-bottom,0px)))}
  .topbar{position:relative;top:0}
  .topbar-right{justify-content:flex-start}
  .game-screen .game-header{position:relative;top:0;min-height:48px;padding:6px 10px;margin-bottom:8px;gap:7px}
  .game-screen .gh-back,.game-screen .gh-retry{height:36px;padding:0 9px;border-radius:11px}
  .game-screen .gh-icon{width:36px;height:36px;font-size:20px;border-radius:11px}
  .game-screen .gh-title{font-size:15px}
  .game-screen .gh-level{font-size:10px}
  .game-screen .gh-right{gap:5px}
  .game-screen .gh-progress{padding:4px 8px;font-size:11px}
  .game-screen .game-intro{padding:7px 10px;margin-bottom:8px;gap:7px;flex-wrap:nowrap}
  .game-screen .game-intro .gi-text{font-size:12px;line-height:1.35;min-width:0}
  .game-screen .game-intro .voice-btn{padding:7px 10px;font-size:12px}
  .game-screen .game-body{
    padding:12px 10px 78px;min-height:0;gap:9px;
    overflow-y:auto;overscroll-behavior:contain;
  }
  .game-screen .game-tip{margin-top:8px;margin-bottom:72px;font-size:11px;line-height:1.4}
  .game-screen .g-q{font-size:clamp(15px,2.7vw,19px);line-height:1.35}
  .game-screen .g-q .g-emoji{font-size:clamp(26px,5vw,36px)}
  .game-screen .opt-grid,.game-screen .sh-options,.game-screen .cap-opt-grid{gap:8px}
  .game-screen .opt-btn,.game-screen .sh-opt,.game-screen .cap-opt,.game-screen .mx-opt,
  .game-screen .ht-opt,.game-screen .ln-opt,.game-screen .cf-opt{min-height:54px;padding:8px}
  .game-screen .sh-qshape{width:84px;height:84px}
  .game-screen .sh-opt svg{width:54px;height:54px}
  .game-screen .sh-opt{min-height:70px;padding:8px}
  .game-screen .sh-question{padding:8px 14px}
  .game-screen .sdk-grid{width:min(250px,88vw);gap:5px;padding:7px;margin:6px auto 2px}
  .game-screen .sdk-key{width:50px;height:50px;font-size:26px}
  .game-screen .trc-card,.game-screen .alg-card,.game-screen .cap-card,.game-screen .mx-card,
  .game-screen .ht-card,.game-screen .ln-card,.game-screen .cf-card{margin-top:6px;padding:9px 12px}
  .game-screen .trc-foot{width:min(130px,36vw)}
  .tabbar{bottom:7px;padding:4px;gap:2px;max-width:calc(100vw - 20px)}
  .tabbar button{padding:5px 10px;font-size:10px}
  .tabbar button .tb-ico{font-size:17px}
}

/* 手机横屏最终顶栏规则：Hub、四园与游戏页统一为 52px 单行。
   右侧控件仍放在自己的横向滚动容器里，避免为了塞下按钮而把顶栏撑成两行。 */
@media (max-height:520px) and (max-width:1024px) and (orientation:landscape){
  html{scrollbar-width:none}
  html::-webkit-scrollbar{display:none}
  /* Hub and the three subject pages define #app in page-level <style> blocks.
     Keep the phone-landscape gutter identical across every park. */
  body #app{padding:6px 8px 92px;padding-bottom:max(92px,calc(84px + env(safe-area-inset-bottom,0px)))}
  body #app > .topbar,
  #app > .topbar,
  .topbar{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center;
    gap:7px;
    height:52px;
    min-height:52px;
    margin:6px 0 8px;
    padding:6px 8px;
    border-radius:16px;
  }
  .topbar > .logo{
    flex:0 0 88px;
    width:88px;
    min-width:0;
    min-height:0;
    font-size:17px;
    white-space:nowrap;
  }
  .topbar .logo .logo-brain{font-size:22px}
  .topbar .logo small{display:none}
  .topbar-right{
    flex:1 1 auto;
    width:auto;
    min-width:0;
    min-height:0;
    height:40px;
    margin-left:0;
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:0;
    scrollbar-width:none;
  }
  .topbar-right::-webkit-scrollbar{display:none}
  .topbar-park-switch{flex:0 0 auto;min-width:0;flex-wrap:nowrap}
  .topbar-park-pill{flex:none;height:33.5px;font-size:12px;padding:6px 10px;white-space:nowrap}
  .topbar-right .offline-btn,
  .topbar-right .pill,
  .topbar-right .avatar-btn{flex:none;white-space:nowrap}
  .topbar-right .offline-btn{height:33.5px;font-size:12px;padding:7px 10px}
  .topbar-right .pill{font-size:13px;padding:5px 9px}
  .topbar-right .avatar-btn{width:40px;height:40px;font-size:22px}
}

/* ============================================================
 * 两行顶栏(2026-10-21):
 *   手机竖屏:行1 = 乐园名 + 在线/CA 状态;行2 = 三个导航 + 离线包
 *   ≥900px(横屏/桌面):合并回一行,状态靠右
 * ============================================================ */
.topbar.mp-two-row{flex-direction:column;align-items:stretch;gap:8px;
  height:auto;min-height:0;padding:9px 12px;flex-wrap:nowrap}
.topbar.mp-two-row .mp-row{display:flex;align-items:center;gap:8px;min-width:0}
.topbar.mp-two-row .mp-row-1{justify-content:space-between}
.topbar.mp-two-row .mp-row-1 .logo{min-width:0;flex:1 1 auto;overflow:hidden}
.topbar.mp-two-row .mp-row-1 .logo span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar.mp-two-row .mp-row-2{justify-content:flex-start;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:1px}
.topbar.mp-two-row .mp-row-2::-webkit-scrollbar{display:none}
/* 状态区(在线 + CA 芯片)在行1右侧,靠右对齐、不换行 */
.topbar.mp-two-row .topbar-right.mp-status{flex:0 0 auto;margin-left:auto;justify-content:flex-end;
  overflow:visible;flex-wrap:nowrap;gap:6px}
.topbar.mp-two-row .mp-row-2 .offline-btn{flex:0 0 auto}
.topbar.mp-two-row .mp-row-2 .topbar-park-switch{flex:0 0 auto;flex-wrap:nowrap}

/*
 * 顶栏高度必须由内容决定,不能写死 —— 一旦内容超过固定高度,
 * sticky 容器会把它裁掉(实测横屏 844x390 时第二行只剩 1px 高,按钮全被切掉)。
 */
.topbar.mp-two-row{height:auto !important;min-height:0 !important;overflow:visible !important}
.topbar.mp-two-row .mp-row{height:auto !important;min-height:0}

/*
 * 宽屏(横屏/桌面):尝试排成一行(名 / 导航 / 状态 / 离线包)。
 * 用 flex-wrap 兜底:一行放不下就自动换行,而不是压扁或裁掉。
 */
@media (min-width:900px){
  .topbar.mp-two-row{flex-direction:row;align-items:center;justify-content:flex-start;
    gap:10px;flex-wrap:wrap;row-gap:6px}
  .topbar.mp-two-row .mp-row{display:contents}
  .topbar.mp-two-row .mp-row-1 .logo{flex:0 0 auto}
  .topbar.mp-two-row .topbar-right.mp-status{margin-left:auto;order:2}
  .topbar.mp-two-row .mp-row-2 .topbar-park-switch{order:0}
  .topbar.mp-two-row .mp-row-2 .offline-btn{order:1}
}

/* 手机横屏(高度矮、宽度中等):保持两行,别硬挤成一行 */
@media (min-width:760px) and (max-width:899px){
  .topbar.mp-two-row{flex-direction:column;align-items:stretch}
  .topbar.mp-two-row .mp-row{display:flex}
}

/* ============================================================
 * 欢迎卡片右上角人物头像(2026-10-21)
 *  - 圆形裁切,与卡片白底融合:外发光 + 柔和投影
 *  - 手机竖屏小尺寸,平板/桌面放大;右侧留白由文字容器让位
 * ============================================================ */
.hero:has(.hero-kid){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;
  column-gap:14px;row-gap:0}
.hero .hero-body{position:relative;z-index:2;min-width:0;grid-column:1;grid-row:1}
/* 头像独立占右侧一列 —— 与文字永不重叠,随卡片高度自然对齐 */
.hero .hero-kid{position:relative;grid-column:2;grid-row:1;justify-self:end;align-self:start;
  pointer-events:none;width:84px;height:84px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 3px #fff,
             0 0 0 6px rgba(185,131,255,.35),
             0 10px 22px rgba(74,63,107,.22);
  overflow:hidden;display:grid;place-items:center;margin-top:2px}
.hero .hero-kid img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.hero .hero-kid::after{content:"";position:absolute;inset:-8px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,217,61,.26),rgba(255,107,157,.08) 55%,transparent 72%);
  z-index:-1}
/* 黄色装饰光晕挪到左下,不抢头像 */
.hero::after{content:"";position:absolute;left:-70px;bottom:-80px;width:180px;height:180px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 60% 40%,rgba(255,217,61,.38),rgba(255,217,61,0) 70%)}

@media (max-width:759px){
  .hero:has(.hero-kid){column-gap:10px}
  .hero .hero-kid{width:78px;height:78px}
  .hero h1{font-size:clamp(19px,5.4vw,24px);line-height:1.25}
  .hero .sub{font-size:12px;line-height:1.55}
  .hero-greet{font-size:12px}
}
@media (min-width:760px){
  .hero:has(.hero-kid){column-gap:18px}
  .hero .hero-kid{width:112px;height:112px}
}
@media (min-width:1100px){
  .hero:has(.hero-kid){column-gap:22px}
  .hero .hero-kid{width:132px;height:132px}
}


/* ============================================================
 * 顶栏:手机端「📥 离线包」并入第一行,排在「🟢 在线」之后
 * (DOM 已把离线按钮移进 .mp-status;这里控制窄屏/宽屏的排列与尺寸)
 * ============================================================ */
.topbar.mp-two-row .mp-status [data-offline-button]{flex:0 0 auto}
@media (max-width:759px){
  /* 窄屏:第一行 = 名字 + [在线][CA][离线包];第二行只剩三个导航 */
  .topbar.mp-two-row .mp-row-1{flex-wrap:nowrap;overflow:visible;gap:6px}
  .topbar.mp-two-row .mp-row-1 .logo{flex:1 1 auto;min-width:0}
  .topbar.mp-two-row .mp-status{flex:0 0 auto;gap:5px}
  .topbar.mp-two-row .mp-status .offline-btn,
  .topbar.mp-two-row .mp-status [data-offline-button],
  .topbar.mp-two-row .mp-status [data-offline-ca],
  .topbar.mp-two-row .mp-status [data-net-chip]{
    font-size:11px;padding:5px 8px;border-radius:999px;white-space:nowrap}
  .topbar.mp-two-row .mp-row-2{justify-content:flex-start}
}
@media (min-width:760px){
  /* 宽屏:离线包回到导航那一侧(视觉上仍在同一行) */
  .topbar.mp-two-row .mp-status [data-offline-button]{order:9}
}


/* ============================================================
 * 逻辑乐园顶栏:第一行元素多(离线/星/币/头像),窄屏必须收紧
 * 否则整行超宽 → 横向溢出 + logo 被挤出屏幕(实测 66px 溢出)
 * ============================================================ */
@media (max-width:759px){
  .topbar.mp-two-row .mp-status{gap:4px}
  .topbar.mp-two-row .mp-status .pill{font-size:11px;padding:4px 6px;min-width:0}
  .topbar.mp-two-row .mp-status .pill .pill-ico{font-size:11px}
  .topbar.mp-two-row .mp-row-1 .logo{flex:1 1 auto;min-width:0}
  .topbar.mp-two-row .mp-row-1 .logo span:last-child{font-size:15px}
  .topbar.mp-two-row .mp-row-1 .logo small{display:none}
  /*
   * 第一行元素多(离线/CA/在线/星/币/头像)时,logo 不能被压成 0 宽:
   * 给 logo 保底宽度,状态区允许自身收缩;仍放不下的次要元素(头像/币)
   * 用 display:none 让位 —— 它们都能在页面其它入口找到。
   */
  .topbar.mp-two-row .mp-row-1 .logo{flex:0 1 auto;min-width:96px}
  .topbar.mp-two-row .mp-status{flex:1 1 auto;justify-content:flex-end;min-width:0;overflow:hidden}
  .topbar.mp-two-row .mp-status .avatar-btn{display:none}
  .topbar.mp-two-row .mp-status .coin-pill{display:none}
}
/* 宽屏:头像与金币恢复显示 */
@media (min-width:760px){
  .topbar.mp-two-row .mp-status .avatar-btn{display:flex}
  .topbar.mp-two-row .mp-status .coin-pill{display:inline-flex}
}


/* ============================================================
 * 手机端第一行空间紧张:只保留「在线 + CA + 离线」三个必要状态。
 * 星/币/头像/进度% 全部让位(它们各自有页面内入口)。
 * 离线按钮文案压缩为图标,避免"继续准备 0%"这种长文案撑宽。
 * ============================================================ */
@media (max-width:759px){
  .topbar.mp-two-row .mp-status{gap:4px;flex-wrap:nowrap;overflow:hidden}
  .topbar.mp-two-row .mp-status .star-pill,
  .topbar.mp-two-row .mp-status .coin-pill,
  .topbar.mp-two-row .mp-status .avatar-btn{display:none !important}
  .topbar.mp-two-row .mp-status [data-offline-button]{
    max-width:96px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-size:11px;padding:5px 8px}
  .topbar.mp-two-row .mp-status [data-offline-ca]{font-size:11px;padding:5px 8px}
  .topbar.mp-two-row .mp-status [data-net-chip]{font-size:11px;padding:5px 8px}
}
@media (min-width:760px){
  .topbar.mp-two-row .mp-status .star-pill,
  .topbar.mp-two-row .mp-status .coin-pill,
  .topbar.mp-two-row .mp-status .avatar-btn{display:inline-flex}
}


/* 超窄屏(≤375px,如 iPhone SE/mini):进一步压缩,保证零横向溢出 */
@media (max-width:375px){
  .topbar.mp-two-row .mp-row-1 .logo{min-width:76px}
  .topbar.mp-two-row .mp-row-1 .logo span:last-child{font-size:13px}
  .topbar.mp-two-row .mp-status{gap:3px}
  .topbar.mp-two-row .mp-status [data-net-chip],
  .topbar.mp-two-row .mp-status [data-offline-ca]{font-size:10px;padding:4px 6px}
  .topbar.mp-two-row .mp-status [data-offline-button]{max-width:74px;font-size:10px;padding:4px 6px}
}