:root {
  --app-w: 100vw; --app-h: 100vh;
  --ink: #0f1a17; --ink2: #18261f; --paper: #f3ead6; --paper2: #e6dabd; --jade: #3f9b7a; --jade2: #2c7a5e;
  --gold: #e8b64a; --red: #c8402c; --muted: #9fb0a6; --glass: rgba(14, 24, 20, 0.72); --line: rgba(243, 234, 214, 0.16);
  --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --sans: system-ui, -apple-system, "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--ink); color: var(--paper); font-family: var(--sans); user-select: none; -webkit-user-select: none; touch-action: none; overscroll-behavior: none; }
#app { position: fixed; left: 0; top: 0; width: var(--app-w, 100vw); height: var(--app-h, 100vh); overflow: hidden; }
html.rotated { --safe-l: env(safe-area-inset-top, 0px); --safe-t: env(safe-area-inset-right, 0px); --safe-r: env(safe-area-inset-bottom, 0px); --safe-b: env(safe-area-inset-left, 0px); }
html.rotated #app { transform-origin: 0 0; transform: translateX(var(--app-h)) rotate(90deg); }
canvas#gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
.hidden { display: none !important; }

/* 加载 */
#loading { position: absolute; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: radial-gradient(ellipse at 50% 40%, #1d3229, var(--ink)); transition: opacity .6s; }
#loading.fade { opacity: 0; pointer-events: none; }
.ld-title { font-family: var(--serif); font-size: 44px; letter-spacing: .3em; font-weight: 700; }
.ld-bar { width: 220px; height: 3px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; }
.ld-bar i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .3s; }
.ld-tip { color: var(--muted); font-size: 13px; letter-spacing: .1em; }

/* 屏幕通用 */
.screen { position: absolute; inset: 0; z-index: 10; display: none; }
.screen.on { display: flex; }
.btn { padding: 12px 26px; border-radius: 999px; background: rgba(243,234,214,.1); border: 1px solid var(--line); color: var(--paper); font-size: 16px; letter-spacing: .12em; backdrop-filter: blur(6px); transition: transform .12s, background .2s; }
.btn:active { transform: scale(.96); }
.btn.primary { background: linear-gradient(180deg, #f0c766, #c9902d); color: #2a1b05; border: 0; font-weight: 700; box-shadow: 0 6px 24px rgba(232,182,74,.3); }
.btn.big { font-size: 20px; padding: 15px 44px; }
.btn.ghost { background: transparent; }
.btn.small { padding: 7px 14px; font-size: 13px; letter-spacing: .05em; }
.btn:disabled { opacity: .4; }

/* 主菜单 */
#menu { flex-direction: column; justify-content: space-between; align-items: center; padding: calc(calc(var(--app-h) * 0.04) + var(--safe-t)) 24px calc(calc(var(--app-h) * 0.03) + var(--safe-b)); background: linear-gradient(180deg, rgba(10,18,15,.55) 0%, rgba(10,18,15,0) 35%, rgba(10,18,15,0) 55%, rgba(10,18,15,.75) 100%); }
.title-wrap { position: relative; text-align: center; margin-top: calc(var(--app-h) * 0.02); }
.game-title { font-family: var(--serif); font-weight: 900; font-size: clamp(48px, calc(min(var(--app-w), var(--app-h)) * 0.11), 104px); margin: 0; letter-spacing: .18em; color: #fbf4e2; text-shadow: 0 4px 30px rgba(0,0,0,.55), 0 1px 0 rgba(0,0,0,.4); }
.game-title span { color: var(--gold); }
.seal { position: absolute; right: -0.4em; top: -0.2em; width: 1.7em; height: 1.7em; display: grid; place-items: center; background: var(--red); color: #fde9da; font-family: var(--serif); font-weight: 900; font-size: clamp(16px, calc(min(var(--app-w), var(--app-h)) * 0.032), 28px); border-radius: 4px; transform: rotate(8deg); box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); }
.subtitle { margin: 6px 0 0; font-family: var(--serif); letter-spacing: .6em; color: rgba(243,234,214,.82); font-size: clamp(13px, calc(min(var(--app-w), var(--app-h)) * 0.024), 18px); text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.menu-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 760px; }
.menu-btns .big { min-width: 240px; }
.menu-btns .break { flex-basis: 100%; height: 0; }
.menu-foot { display: flex; gap: 20px; color: var(--muted); font-size: 13px; }

/* 面板屏 */
.panel-screen { flex-direction: column; background: rgba(9,16,13,.86); backdrop-filter: blur(10px); padding: calc(10px + var(--safe-t)) calc(14px + var(--safe-r)) calc(10px + var(--safe-b)) calc(14px + var(--safe-l)); }
.panel-screen header { display: flex; align-items: center; gap: 12px; padding: 4px 0 10px; border-bottom: 1px solid var(--line); }
.panel-screen h2 { margin: 0; font-family: var(--serif); font-size: 22px; letter-spacing: .2em; flex: 1; }
.back { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.08); font-size: 26px; line-height: 1; }
.wallet { color: var(--gold); font-weight: 700; font-size: 15px; white-space: nowrap; }
.wallet small { color: var(--muted); font-weight: 400; margin-right: 10px; }

.time-pick { display: flex; gap: 8px; padding: 10px 0; }
.time-pick button { padding: 7px 16px; border-radius: 999px; border: 1px solid var(--line); font-size: 14px; }
.time-pick button.on { background: var(--paper); color: var(--ink); font-weight: 700; }
.map-list { flex: 1; overflow-x: auto; overflow-y: hidden; display: flex; gap: 14px; padding: 6px 2px 10px; scroll-snap-type: x mandatory; touch-action: pan-x; }
.map-card { flex: 0 0 min(300px, calc(var(--app-w) * 0.78)); scroll-snap-align: start; border-radius: 16px; overflow: hidden; position: relative; display: flex; flex-direction: column; background: var(--ink2); border: 1px solid var(--line); }
.map-card .art { height: 42%; min-height: 90px; background-size: cover; background-position: center; position: relative; }
.map-card .art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, var(--ink2)); }
.map-card .body { padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; overflow: auto; }
.map-card h3 { margin: 0; font-family: var(--serif); font-size: 20px; letter-spacing: .12em; }
.map-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.map-card .fishes { display: flex; flex-wrap: wrap; gap: 4px; }
.map-card .fishes span { font-size: 11px; padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,.06); }
.map-card .go { margin-top: auto; }
.map-card.locked { filter: grayscale(.8); opacity: .65; }
.map-card .lock { position: absolute; top: 10px; right: 10px; background: rgba(0,0,0,.6); padding: 4px 10px; border-radius: 999px; font-size: 12px; z-index: 2; }

.tabs { display: flex; gap: 6px; padding: 10px 0; overflow-x: auto; touch-action: pan-x; }
.tabs button { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); font-size: 14px; white-space: nowrap; }
.tabs button.on { background: var(--jade); border-color: var(--jade); }
.shop-list { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; align-content: start; touch-action: pan-y; padding-bottom: 10px; }
.item { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; background: rgba(255,255,255,.03); display: flex; flex-direction: column; gap: 6px; }
.item.equipped { border-color: var(--gold); background: rgba(232,182,74,.07); }
.item h4 { margin: 0; font-size: 16px; display: flex; justify-content: space-between; gap: 8px; }
.item h4 small { color: var(--muted); font-weight: 400; font-size: 12px; white-space: nowrap; }
.item p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.5; }
.item .stats { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--paper2); }
.item .stats b { color: var(--gold); font-weight: 600; }
.item .row { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.item .price { color: var(--gold); font-weight: 700; }

.dex-progress { color: var(--muted); font-size: 13px; }
.dex-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 12px 0; align-content: start; touch-action: pan-y; }
.dex-card { border-radius: 12px; border: 1px solid var(--line); padding: 10px; background: rgba(255,255,255,.03); text-align: center; position: relative; }
.dex-card canvas, .dex-card img { width: 100%; height: 70px; object-fit: contain; }
.dex-card .nm { font-family: var(--serif); font-size: 16px; letter-spacing: .1em; }
.dex-card .rar { font-size: 11px; }
.dex-card.unknown .nm { color: var(--muted); }
.dex-card.unknown img { filter: brightness(0) opacity(.5); }

.settings-body { padding: 14px 0; display: flex; flex-direction: column; gap: 16px; max-width: 520px; overflow-y: auto; touch-action: pan-y; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.set-row input[type=range] { width: 50%; accent-color: var(--gold); }
.seg { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.seg button { padding: 6px 14px; font-size: 13px; }
.seg button.on { background: var(--paper); color: var(--ink); }
.toggle { width: 50px; height: 28px; border-radius: 999px; background: rgba(255,255,255,.15); position: relative; }
.toggle::after { content: ""; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--paper); transition: left .2s; }
.toggle.on { background: var(--jade); }
.toggle.on::after { left: 25px; }

.help-body { overflow-y: auto; padding: 4px 4px 20px; max-width: 760px; line-height: 1.75; font-size: 14.5px; touch-action: pan-y; }
.help-body h3 { font-family: var(--serif); color: var(--gold); margin: 18px 0 4px; letter-spacing: .1em; }
.help-body p, .help-body li { color: #d9d2c0; }
.help-body .g { color: var(--gold); } .help-body .r { color: #ff6a50; } .help-body .b { color: #6fb8ff; }

/* HUD */
#hud { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
#hud button, #hud .chip { pointer-events: auto; }
.hud-top { position: absolute; top: calc(8px + var(--safe-t)); left: calc(10px + var(--safe-l)); right: calc(10px + var(--safe-r)); display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.player-badge { display: flex; align-items: center; gap: 8px; background: var(--glass); padding: 5px 12px 5px 5px; border-radius: 999px; backdrop-filter: blur(6px); }
.player-badge .lv { width: 30px; height: 30px; border-radius: 50%; background: var(--jade); display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.xpbar { width: 70px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.15); overflow: hidden; }
.xpbar i { display: block; height: 100%; background: var(--jade); width: 0; transition: width .4s; }
.coins { color: var(--gold); font-weight: 700; font-size: 14px; }
.coins::before { content: "◎ "; opacity: .8; }
.place { background: var(--glass); padding: 6px 14px; border-radius: 999px; font-family: var(--serif); letter-spacing: .15em; font-size: 14px; backdrop-filter: blur(6px); }
.hud-btns { display: flex; gap: 6px; }
.icon-btn { width: 38px; height: 38px; border-radius: 50%; background: var(--glass); font-family: var(--serif); font-size: 16px; backdrop-filter: blur(6px); }
#inset { position: absolute; top: calc(56px + var(--safe-t)); right: calc(10px + var(--safe-r)); border: 2px solid rgba(243,234,214,.55); border-radius: 10px; box-shadow: 0 4px 20px rgba(0,0,0,.4); }
.inset-label { position: absolute; left: 0; right: 0; bottom: -22px; text-align: center; font-size: 12px; color: var(--paper); text-shadow: 0 1px 3px #000; }
#toasts { position: absolute; top: calc(58px + var(--safe-t)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; width: min(calc(var(--app-w) * 0.8), 520px); }
.toast { padding: 8px 18px; border-radius: 999px; background: var(--glass); backdrop-filter: blur(6px); font-size: 14.5px; animation: tin .25s ease-out; text-align: center; border: 1px solid var(--line); }
.toast.gold { color: #ffd77a; border-color: rgba(232,182,74,.5); }
.toast.bad { color: #ff8a73; border-color: rgba(200,64,44,.6); }
.toast.warn { color: #ffc98a; }
.toast.ok { color: #9ee0b8; }
.toast.out { opacity: 0; transition: opacity .4s; }
@keyframes tin { from { transform: translateY(-8px); opacity: 0; } }
.hud-left { position: absolute; left: calc(12px + var(--safe-l)); bottom: calc(14px + var(--safe-b)); display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.chip { display: flex; align-items: center; gap: 8px; background: var(--glass); padding: 7px 14px 7px 7px; border-radius: 999px; font-size: 14px; backdrop-filter: blur(6px); border: 1px solid var(--line); }
.chip .k { width: 26px; height: 26px; border-radius: 50%; background: var(--red); display: grid; place-items: center; font-family: var(--serif); font-size: 13px; }
.chip em { font-style: normal; color: var(--gold); font-size: 12px; }
.chip.ghost { padding: 7px 14px; }
.chum-meter { width: 110px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; margin-left: 4px; }
.chum-meter i { display: block; height: 100%; width: 0; background: #b9d77e; transition: width .5s; }
.side-ctrl { position: absolute; left: calc(14px + var(--safe-l)); bottom: calc(18px + var(--safe-b)); display: flex; gap: 12px; }
.side-ctrl button { width: 74px; height: 74px; border-radius: 50%; background: var(--glass); font-size: 26px; border: 1px solid var(--line); backdrop-filter: blur(6px); }
.side-ctrl button.on { background: rgba(63,155,122,.6); }
.action-wrap { position: absolute; right: calc(18px + var(--safe-r)); bottom: calc(16px + var(--safe-b)); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.action { width: 104px; height: 104px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f6d27c, #c48a26); color: #2a1b05; font-family: var(--serif); font-weight: 900; font-size: 24px; letter-spacing: .08em; box-shadow: 0 8px 30px rgba(0,0,0,.45), inset 0 -4px 0 rgba(0,0,0,.15); border: 3px solid rgba(255,245,220,.6); pointer-events: auto; }
.action.hot { animation: pulse .6s infinite; background: radial-gradient(circle at 40% 35%, #ff9a7a, #c8402c); color: #fff; }
.action.held { transform: scale(.94); filter: brightness(1.1); }
.action.jade { background: radial-gradient(circle at 40% 35%, #7fd3b0, #2c7a5e); color: #fff; }
@keyframes pulse { 50% { box-shadow: 0 0 0 14px rgba(200,64,44,.0), 0 0 30px rgba(255,120,80,.8); } }
.action-sub { font-size: 12px; color: var(--paper); text-shadow: 0 1px 3px #000; }
#meter { position: absolute; left: 50%; bottom: calc(26px + var(--safe-b)); transform: translateX(-50%); width: min(calc(var(--app-w) * 0.56), 460px); }
.meter-track { position: relative; height: 18px; border-radius: 9px; background: linear-gradient(90deg, rgba(111,184,255,.5), rgba(255,255,255,.25) 50%, rgba(255,106,80,.55)); border: 1px solid rgba(255,255,255,.4); overflow: hidden; }
.meter-track .good { position: absolute; top: 0; bottom: 0; background: rgba(110,220,150,.6); }
.meter-track .perfect { position: absolute; top: 0; bottom: 0; background: #ffd04d; box-shadow: 0 0 10px #ffd04d; }
.meter-track .needle { position: absolute; top: -2px; bottom: -2px; width: 4px; margin-left: -2px; background: #fff; box-shadow: 0 0 6px #000; }
.meter-cap { display: flex; justify-content: space-between; font-size: 12px; margin-top: 4px; color: var(--paper); text-shadow: 0 1px 3px #000; }
#fightUi .stam { position: absolute; top: calc(54px + var(--safe-t)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; background: var(--glass); padding: 6px 14px; border-radius: 999px; font-size: 13px; }
#fightUi .stam .bar { width: min(calc(var(--app-w) * 0.36), 240px); height: 8px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; }
#fightUi .stam .bar i { display: block; height: 100%; background: linear-gradient(90deg, #ff9a5a, #ffd04d); width: 100%; }
.tension { position: absolute; right: calc(136px + var(--safe-r)); bottom: calc(20px + var(--safe-b)); display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; }
.tbar { position: relative; width: 22px; height: min(calc(var(--app-h) * 0.46), 240px); border-radius: 11px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.35); overflow: hidden; }
.tbar i { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: #6fdc8c; transition: background .15s; }
.tbar .tz { position: absolute; left: 0; right: 0; pointer-events: none; }
.tbar .tz.slack { bottom: 0; height: 10%; background: repeating-linear-gradient(45deg, rgba(111,184,255,.35) 0 4px, transparent 4px 8px); }
.tbar .tz.danger { top: 0; height: 18%; background: repeating-linear-gradient(45deg, rgba(255,80,60,.35) 0 4px, transparent 4px 8px); }
.run-hint { position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%); font-family: var(--serif); font-size: 22px; font-weight: 800; letter-spacing: .15em; text-shadow: 0 2px 12px #000; opacity: 0; transition: opacity .2s; white-space: nowrap; }
.run-hint.on { opacity: 1; }
#landUi .dial { position: absolute; right: calc(140px + var(--safe-r)); bottom: calc(20px + var(--safe-b)); width: 120px; text-align: center; font-size: 12px; }
#landUi .dial svg { width: 120px; height: 120px; }
.dial-bg { fill: rgba(0,0,0,.45); stroke: rgba(255,255,255,.35); }
.dial-tol { fill: rgba(255,208,77,.25); }
.dial-net { stroke: #fff; stroke-width: 5; stroke-linecap: round; }
.dial-target { fill: #ffd04d; stroke: #fff; stroke-width: 1.5; }
#landUi .timing { position: absolute; left: 50%; bottom: calc(150px + var(--safe-b)); transform: translateX(-50%); width: min(calc(var(--app-w) * 0.6), 480px); text-align: center; font-size: 12px; text-shadow: 0 1px 3px #000; }
.ttrack { position: relative; height: 26px; border-radius: 13px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.35); margin-bottom: 4px; }
.ttrack i { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); background: rgba(110,220,150,.45); border-left: 2px solid #ffd04d; border-right: 2px solid #ffd04d; }
.ttrack b { position: absolute; top: 50%; transform: translate(-50%, -50%); font-size: 18px; transition: none; }
.ttrack b.flip { transform: translate(-50%, -50%) scaleX(-1); }

/* 弹窗 */
#modal { position: absolute; inset: 0; z-index: 40; background: rgba(5,10,8,.6); display: flex; align-items: center; justify-content: center; padding: 12px; backdrop-filter: blur(4px); }
.modal-card { background: linear-gradient(180deg, #1e2f27, #121d18); border: 1px solid rgba(232,182,74,.35); border-radius: 18px; padding: 16px 20px; width: min(560px, calc(var(--app-w) * 0.94)); max-height: calc(var(--app-h) * 0.94); overflow-y: auto; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.6); animation: pop .35s cubic-bezier(.2,1.4,.4,1); touch-action: pan-y; }
@keyframes pop { from { transform: scale(.85); opacity: 0; } }
.modal-card h3 { font-family: var(--serif); font-size: 28px; margin: 4px 0; letter-spacing: .15em; }
.modal-card .latin { color: var(--muted); font-style: italic; font-size: 12px; }
.modal-card .rar-tag { display: inline-block; padding: 2px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #111; margin: 4px 0; }
.modal-card canvas.preview { width: 100%; height: min(calc(var(--app-h) * 0.3), 200px); display: block; }
.modal-card .nums { display: flex; justify-content: center; gap: 22px; margin: 6px 0; }
.modal-card .nums div { display: flex; flex-direction: column; }
.modal-card .nums b { font-size: 24px; color: var(--gold); font-family: var(--serif); }
.modal-card .nums span { font-size: 12px; color: var(--muted); }
.modal-card .tags { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; min-height: 4px; }
.modal-card .tags span { font-size: 12px; padding: 2px 10px; border-radius: 999px; background: var(--red); }
.modal-card .tags span.t2 { background: var(--jade2); }
.modal-card .desc { color: #d6cfbd; font-size: 13px; line-height: 1.6; margin: 8px 0; text-align: left; }
.modal-card .acts { display: flex; gap: 10px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.modal-card .acts .btn { font-size: 15px; }
.modal-card .sub { font-size: 12px; color: var(--muted); }
.bait-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; text-align: left; margin-top: 10px; }
.bait-list button { border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 2px; background: rgba(255,255,255,.04); text-align: left; }
.bait-list button.on { border-color: var(--gold); background: rgba(232,182,74,.1); }
.bait-list button small { color: var(--muted); font-size: 11px; }
.bait-list button em { font-style: normal; color: var(--gold); font-size: 12px; }
.pause-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }


/* 矮屏（手机横屏） */
html.compact .action { width: 86px; height: 86px; font-size: 20px; }
html.compact .tension { right: calc(116px + var(--safe-r)); }
html.compact .tbar { height: calc(var(--app-h) * 0.52); }
html.compact .side-ctrl button { width: 62px; height: 62px; }
html.compact #landUi .dial { right: calc(118px + var(--safe-r)); }
html.compact #landUi .timing { bottom: calc(118px + var(--safe-b)); }
html.compact .menu-btns .btn { padding: 9px 20px; }
html.compact .btn.big { padding: 11px 36px; }
html.compact .game-title { font-size: calc(min(var(--app-w), var(--app-h)) * 0.15); }
@media (orientation: portrait) {
  html:not(.rotated) #meter { width: calc(var(--app-w) * 0.72); bottom: calc(150px + var(--safe-b)); }
  html:not(.rotated) .tension { right: calc(20px + var(--safe-r)); bottom: calc(150px + var(--safe-b)); }
  html:not(.rotated) .tbar { height: calc(var(--app-h) * 0.28); }
  html:not(.rotated) #landUi .dial { right: auto; left: 50%; transform: translateX(-50%); bottom: calc(160px + var(--safe-b)); }
  html:not(.rotated) #landUi .timing { bottom: calc(300px + var(--safe-b)); width: calc(var(--app-w) * 0.8); }
  html:not(.rotated) .place { display: none; }
}

/* 旋转横屏时，滚动列表允许双向手势（触摸方向与内容方向互换） */
html.rotated .map-list, html.rotated .shop-list, html.rotated .dex-grid, html.rotated .help-body,
html.rotated .settings-body, html.rotated .tabs, html.rotated .modal-card { touch-action: pan-x pan-y; }

/* 账号 */
.account-body { padding: 14px 0; display: flex; flex-direction: column; gap: 14px; width: min(100%, 440px); align-self: center; overflow-y: auto; touch-action: pan-y; }
.account-body .seg { align-self: center; }
.account-body form { display: flex; flex-direction: column; gap: 12px; }
.account-body label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.account-body input { font: inherit; font-size: 16px; color: var(--paper); background: rgba(243,234,214,.08); border: 1px solid var(--line); border-radius: 12px; padding: 11px 14px; outline: none; -webkit-user-select: text; user-select: text; }
.account-body input:focus { border-color: var(--gold); }
.account-body .btn { align-self: stretch; }
.acct-msg { min-height: 1.4em; font-size: 13.5px; line-height: 1.5; color: var(--gold); }
.acct-msg.bad { color: #ff8f7a; }
.acct-note { font-size: 12.5px; line-height: 1.7; color: var(--muted); }
.acct-card { border: 1px solid var(--line); border-radius: 16px; padding: 16px; background: rgba(243,234,214,.05); display: flex; flex-direction: column; gap: 8px; }
.acct-card b { font-size: 20px; font-family: var(--serif); letter-spacing: .08em; }
.acct-state { font-size: 13px; color: var(--muted); }
.acct-state.ok { color: #7fd1a6; }
.acct-state.warn { color: #ffcf6e; }
#menuAcct:empty { display: none; }