/* ============ 设备适配：手势、安全区（刘海 / 底部横条）、横竖屏、小屏手机、加载层、时长锁 ============ */

/* ---- 不让浏览器接管手势：下拉刷新、整页回弹、左右滑动翻页、长按菜单、双击放大 ---- */
html, body { overscroll-behavior: none; -webkit-touch-callout: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
input, textarea { -webkit-touch-callout: default; }

/* ---- 安全区：画面整体让开刘海 / 灵动岛 / 底部横条，让出来的边用当前画面的底色补齐 ---- */
:root { --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px); }
#app { top: var(--sat); right: var(--sar); bottom: var(--sab); left: var(--sal); }
html[data-screen="home"] body, html[data-screen="explore"] body, html[data-screen="battle5"] body { background: #0a0a0a; }
html[data-screen="hub"] body, html[data-screen="title"] body { background: linear-gradient(180deg, #5cc4ff, #bfe7ff 60%, #3fa7e8); }
.modal-bg { padding: calc(12px + var(--sat)) calc(12px + var(--sar)) calc(12px + var(--sab)) calc(12px + var(--sal)); }
#fx > .toast { top: calc(84px + var(--sat)); max-width: calc(100vw - 24px - var(--sal) - var(--sar)); }
.act-card { right: calc(18px + var(--sar)); top: calc(92px + var(--sat)); }
.modal { overscroll-behavior: contain; max-height: calc(100vh - 24px - var(--sat) - var(--sab)); max-height: calc(100dvh - 24px - var(--sat) - var(--sab)); -webkit-overflow-scrolling: touch; }

/* ---- 统一加载层（屏幕正中间） ---- */
.loader { position: fixed; inset: 0; z-index: 8000; display: grid; place-items: center; padding: var(--sat) var(--sar) var(--sab) var(--sal); background: rgba(15,20,50,.32); opacity: 0; transition: opacity .2s; }
.loader.in { opacity: 1; }
.ld-box { width: min(340px, 84vw); padding: 20px 22px 16px; border-radius: 24px; background: var(--panel); color: var(--ink); box-shadow: var(--shadow); border: var(--border); text-align: center; transform: scale(.94); transition: transform .2s; }
body:not([data-theme="kid"]) .ld-box { background: var(--glass); backdrop-filter: var(--blur); }
.loader.in .ld-box { transform: none; }
.ld-ico .emo { width: 46px; height: 46px; animation: ldspin 1.4s ease-in-out infinite; }
@keyframes ldspin { 50% { transform: rotate(180deg) scale(1.15); } 100% { transform: rotate(360deg); } }
.ld-title { font-size: 19px; font-weight: 700; margin-top: 4px; }
.loader .pl-btns { display: flex; gap: 10px; justify-content: center; margin-top: 12px; } .loader .pl-btns[hidden] { display: none; }

/* ---- 每日时长锁 ---- */
body.locked #fx { z-index: 9000; }
.modal-bg.tlock-bg { z-index: 40; background: radial-gradient(circle at 50% 28%, #3c4396, #151938 72%); backdrop-filter: none; }
.modal-bg.tlock-bg.tlock-top { z-index: 41; background: rgba(8,10,30,.6); }
.tlock { text-align: center; }
.tlock .rest-ico .emo { width: 64px; height: 64px; }
.tlock .tl-parent { margin-top: 14px; }
.tl-opts { flex-wrap: wrap; justify-content: center; gap: 10px; }
.modal.tlock-m .tl-set { margin: 14px auto 0; display: flex; }
.pt-btns { justify-content: flex-start; gap: 8px; margin-top: 4px; flex-wrap: wrap; }

/* ---- 家长中心：音量滑块 ---- */
.vols { display: grid; gap: 6px; margin: 6px 0 2px; }
.vrow { display: flex; align-items: center; gap: 10px; }
.vrow .emo { width: 24px; height: 24px; }
.vrow span { width: 2.6em; flex: none; }
.vrow input[type=range] { flex: 1; min-width: 0; height: 30px; accent-color: var(--accent); }
.vrow b { width: 2.2em; text-align: right; font-variant-numeric: tabular-nums; }

/* ---- 小屏手机：竖屏窄屏 ---- */
.lb { transform-origin: 50% 100%; }
@media (max-width: 480px) {
  .w3-label .lb { transform: scale(.8); } .w3-label.hot .lb { transform: scale(.9) translateY(-3px); }
  .hud { padding: 8px 10px; } .hud-av { width: 40px; height: 40px; } .hud-btn { width: 40px; height: 40px; font-size: 19px; }
  .hub-tip { bottom: 96px; }
  .ztop, .gtop { padding: 10px 12px; gap: 8px; }
  .ztop .back, .gtop .back, .btop .back { width: 44px; height: 44px; font-size: 21px; }
  .modal { padding: 20px 16px 16px; } .mtitle { font-size: 22px; }
}
/* ---- 小屏手机：横屏（高度很矮） ---- */
@media (max-height: 500px) {
  .hud { padding: 6px 10px; } .hud-name, .xpbar, .hud-gems { display: none !important; }
  .hud-me { padding: 3px 10px 3px 3px; } .hud-av { width: 36px; height: 36px; }
  .hud-pill { padding: 3px 10px; font-size: 15px; } .hud-btn { width: 36px; height: 36px; font-size: 17px; }
  .dock { bottom: 6px; padding: 4px 8px; border-radius: 20px; } .dbtn { min-width: 48px; padding: 2px 6px; font-size: 11px; } .dbtn .emo { width: 26px; height: 26px; }
  .hub-tip { bottom: 64px; font-size: 13px; padding: 6px 14px; }
  .w3-label .lb { transform: scale(.66); } .w3-label.hot .lb { transform: scale(.76) translateY(-3px); }
  .ztop, .gtop { padding: 6px 12px; gap: 8px; }
  .ztop .back, .gtop .back, .btop .back { width: 38px; height: 38px; font-size: 18px; }
  .gtitle { font-size: 16px; } .gtitle .emo { width: 28px; height: 28px; } .ghearts .emo { width: 24px; height: 24px; }
  .ztitle .emo { width: 34px; height: 34px; } .ztitle b { font-size: 19px; } .ztitle small { display: none; }
  .stage { padding: 4px 12px 8px; gap: 8px; }
  .modal { padding: 14px 18px 12px; } .mtitle { font-size: 20px; margin: 2px 0 8px; }
  .modal .btn.big { font-size: 19px; padding: 11px 26px; }
  .ld-box { padding: 14px 18px 12px; } .ld-ico .emo { width: 34px; height: 34px; }
  .bossnode { padding: 4px 10px; } .bn-ico, .bn-ico img, .bn-ico .emo { width: 36px; height: 36px; } .ztabs { padding: 2px 16px 6px; } .ztabs button { padding: 5px 14px; }
  .levels { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; padding-top: 2px; }
  .lvcard { padding: 8px 6px 6px; } .lv-ico { width: 50px; height: 50px; } .lv-ico .emo { width: 38px; height: 38px; } .lv-name { font-size: 15px; }
}
/* ---- 手机横屏的小游戏：上下太矮，题目面板挪到左边一栏，右边整块高度留给玩法区；
        方向键 / 操作按钮放在题目下面，左手拇指够得着 ---- */
@media (orientation: landscape) and (max-height: 540px) {
  .s-game .stage:has(> .qpanel) { --qw: min(31vw, 290px); padding-left: calc(var(--qw) + 24px); }
  .s-game .stage > .qpanel { position: absolute; left: 12px; top: 4px; bottom: 8px; width: var(--qw); height: fit-content; max-height: calc(100% - 12px); margin: auto 0; overflow-y: auto; z-index: 3; padding: 10px 12px; }
  .s-game .stage:has(> .dpad, > .tf-ctl) > .qpanel { margin-top: 0; max-height: calc(100% - 120px); }
  .s-game .stage > .qpanel .qtext { font-size: 16px; gap: 6px; }
  .s-game .stage > .qpanel .qbig { font-size: 34px; } .s-game .stage > .qpanel .qbig.latin { font-size: 30px; }
  .s-game .stage > .qpanel .qvis .qemo { width: 60px; height: 60px; }
  .s-game .stage > .dpad, .s-game .stage > .tf-ctl { position: absolute; left: calc(12px + var(--qw) / 2); bottom: 8px; transform: translateX(-50%); z-index: 3; }
  .tf-ctl { flex-direction: column; gap: 8px; } .tf-ctl .btn { font-size: 17px; padding: 9px 18px; }
  .field, .sea, .pond, .rn-field, .fp-field, .ar-field, .sl-field, .bo-field, .rh-field, .fd-field, .tf-field { min-height: 150px; }
  .holes { gap: 6px 16px; } .hole { height: min(150px, 42vh); } .mspr .spr, .mspr .emo { width: 66px; height: 66px; } .hole.up .mole { bottom: 26px; } .hole .dirt { height: 32px; }
  .mgrid { grid-template-columns: repeat(6, 1fr); gap: 8px; } .mgrid.n8 { grid-template-columns: repeat(4, 1fr); } .mgrid.n10 { grid-template-columns: repeat(5, 1fr); } .mgrid.n16 { grid-template-columns: repeat(8, 1fr); }
  .ccol { gap: 6px; } .cnode { min-height: 40px; padding: 4px 8px; }
  .chests { flex-wrap: nowrap; gap: 6px; } .chest { zoom: .7; }
  .clockwrap { flex-wrap: nowrap; gap: 16px; } .bigclock .clock-svg { width: min(300px, 70vh); height: min(300px, 70vh); }
  .clockctl { padding: 10px 12px; gap: 8px; } .cc-time { font-size: 30px; }
  .cs-cust > .emo { width: 56px; height: 56px; } .cs-item { flex-direction: row; gap: 8px; padding: 6px 12px; } .cs-item .emo { width: 40px; height: 40px; }
  .cs-tray { min-height: 72px; padding: 8px; } .cs-in { min-height: 44px; } .cs-wallet { gap: 6px; }
  .money.note { width: 78px; height: 42px; font-size: 15px; } .money.coin { width: 50px; height: 50px; } .money.c1 { width: 40px; height: 40px; } .money.c5 { width: 45px; height: 45px; }
  .hg-sky { transform: scale(.6); transform-origin: 50% 0; margin-bottom: -92px; }
  .hg-word span { font-size: 30px; min-width: 32px; } .hg-kb button { height: 38px; font-size: 19px; }
  .sm-pad { width: min(26vw, 150px, 30vh); font-size: 24px; border-radius: 22px; }
  .sy-grid { width: min(100%, 58vh * var(--c) / var(--r), 460px); } .sy-sw { width: 40px; height: 40px; }
  .vs-head { gap: 12px; } .vs-head span { padding: 2px 10px 2px 2px; } .vs-head .hero, .vs-head .spr, .vs-head .emo { width: 30px; height: 30px; } .vs-head i { font-size: 17px; }
  .tt-wrap, .bd-wrap { gap: 12px; } .bd-board { width: min(50vw, 116vh); } .tt-board { width: min(40vw, 62vh); }
  .tt-side .qpanel, .bd-side .qpanel, .du-box .qpanel { padding: 6px 10px; } .tt-side .qvis .qemo, .bd-side .qvis .qemo, .du-box .qvis .qemo { width: 44px; height: 44px; }
  .tt-side .qbig, .bd-side .qbig { font-size: 26px; }
  .tt-side .choices, .bd-side .choices, .du-box .choices { gap: 8px; } .tt-side .choices.compact .choice, .bd-side .choices.compact .choice, .du-box .choices.compact .choice { min-height: 54px; padding: 4px 8px; }
  .bl-scale { width: calc(100% - 140px); } .bl-load { width: 130px; }
  .ck-top { padding-bottom: 8px; } .ck-cust .emo { width: 54px; height: 54px; } .ck-bubble { padding: 6px 12px; font-size: 16px; } .ck-bubble::before { top: 16px; }
  .ck-o b { font-size: 26px; } .ck-o .emo { width: 34px; height: 34px; } .ck-txt { font-size: 18px; } .ck-pat { left: 66px; }
  .ck-plate { min-height: 90px; padding: 8px 40px; } .ck-food .emo { width: 34px; height: 34px; }
  .ck-shelf { padding: 6px 10px; gap: 8px; } .ck-item { width: 54px; height: 54px; } .ck-item .emo { width: 40px; height: 40px; }
  .du-top { gap: 14px; } .du-p { flex-direction: row; gap: 8px; padding: 4px 14px 4px 4px; min-width: 0; } .du-p .spr, .du-p .emo, .du-p .hero { width: 36px; height: 36px; } .du-score { font-size: 24px; } .du-vs { font-size: 22px; }
}
/* 窄屏手机：天平的两个托盘、水管两头的水龙头和小花不能伸出屏幕 */
@media (max-width: 560px) {
  .bl-scale { width: calc(100% - 120px); } .bl-load { width: 110px; }
  .pp-wrap { padding: 0 38px; } .pp-grid { width: min(100vw - 110px, 58vh); } .pp-src .emo, .pp-sink .emo { width: 36px; height: 36px; }
}
/* 竖屏（平板竖放也算）：棋盘在上、题目在下，不挤成左右两栏 */
@media (orientation: portrait) {
  .tt-wrap, .bd-wrap { flex-direction: column; gap: 12px; }
  .tt-side, .bd-side { flex: none; width: 100%; }
  .bd-board { width: min(96vw, 760px); } .tt-board { width: min(70vw, 38vh, 440px); }
}