:root {
  color-scheme: dark;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, -apple-system, sans-serif;
  --orange: #ef7362;
  --orange-hot: #ffd0a4;
  --cyan: #78d8d2;
  --cyan-dim: #0a6670;
  --ink: #173d43;
  --panel: rgba(25, 53, 58, .95);
  --line: rgba(120, 216, 210, .34);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #322735; overflow: hidden; }
body { min-height: 100dvh; color: #f4f1e8; }
button, select, input { font: inherit; }
button { color: inherit; }

#game-shell {
  position: relative;
  width: min(100vw, 430px);
  height: 100dvh;
  min-height: 0;
  margin: 0 auto;
  overflow: hidden;
  background: #a9585c;
  box-shadow: 0 0 80px #1f1924;
  isolation: isolate;
}

#scene { width: 100%; height: 100%; display: block; touch-action: none; }
.screen { position: absolute; inset: 0; z-index: 30; display: none; align-items: center; justify-content: center; overflow-y:auto; padding: max(22px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); background: radial-gradient(circle at 50% 35%, rgba(15, 91, 102, .32), rgba(33, 28, 39, .97) 68%); }
.screen--visible { display: flex; }
.brand-lockup, .dialog-card { width: 100%; max-width: 360px; text-align: center; }
.eyebrow { margin: 0 0 8px; color: var(--cyan); font-size: 11px; font-weight: 800; letter-spacing: .22em; }
h1 { margin: 0; color: var(--orange-hot); font-size: clamp(48px, 18vw, 72px); line-height: .95; letter-spacing: -.055em; text-shadow: 0 0 30px rgba(239, 115, 98, .38); }
h2 { margin: 0 0 14px; font-size: 32px; letter-spacing: -.03em; }
.boot-copy, .dialog-card p { margin: 22px auto; max-width: 310px; color: #c2c7c5; font-size: 16px; line-height: 1.55; }
.primary-action, .danger-action { min-height: 52px; border: 1px solid var(--orange-hot); border-radius: 4px; padding: 0 24px; background: linear-gradient(135deg, #f08a72, #c65759); color: #291d29; font-weight: 900; letter-spacing: .08em; box-shadow: 0 8px 30px rgba(106, 43, 63, .28); }
.primary-action:disabled { opacity: .42; }
.system-note, .local-only { font-size: 12px; letter-spacing: .08em; }
.system-note { color: #a9b3b0; }
.local-only { color: #6b7775; }

#hud { position: absolute; inset: 0; z-index: 10; pointer-events: none; padding: max(10px, env(safe-area-inset-top)) 12px max(14px, env(safe-area-inset-bottom)); }
.hud-top { display: flex; align-items: flex-start; justify-content: space-between; }
.status-cluster { display: flex; align-items: center; gap: 8px; }
.level-badge { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--orange); border-radius: 50%; background: rgba(8, 10, 10, .82); color: var(--orange-hot); font-size: 12px; font-weight: 900; }
.level-badge span { font-size: 19px; }
.bars { width: 124px; }
.bar { position: relative; height: 13px; margin: 2px 0; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.62); overflow: hidden; transform: skewX(-9deg); }
.bar span { display: block; width: 100%; height: 100%; transition: width .18s ease; }
.bar b { position: absolute; inset: 0 5px; text-align: right; font-size: 9px; line-height: 12px; transform: skewX(9deg); }
.bar--health span { background: linear-gradient(90deg, #a52e20, #ff6b3b); }
.bar--shield span { background: linear-gradient(90deg, #107a88, #67efff); }
.xp-line { height: 3px; background: rgba(255,255,255,.12); }
.xp-line span { display: block; height: 100%; background: var(--orange); }
#combo-banner { width:fit-content; max-width:90%; margin:10px auto 0; padding:8px 14px 6px; border:1px solid #ffd58f; border-radius:5px; background:linear-gradient(110deg,rgba(55,26,43,.94),rgba(132,57,38,.9)); color:#fff0bc; text-align:center; box-shadow:0 3px 12px #35192844; }
#combo-banner[hidden] { display:none; }
#combo-label { font-size:18px; font-weight:900; letter-spacing:.03em; }
.combo-track { display:block; height:3px; margin-top:5px; background:#fff2; overflow:hidden; }
#combo-meter { display:block; height:100%; background:#ffd58f; transform-origin:left; transition:transform .1s linear; }
.icon-button { pointer-events: auto; width: 48px; height: 48px; border: 1px solid var(--line); background: rgba(8, 12, 13, .86); font-weight: 900; }
.mission-card { width: min(290px, 78vw); margin: 10px auto 0; padding: 7px 11px; border-left: 2px solid var(--cyan); background: linear-gradient(90deg, rgba(6,12,14,.82), rgba(6,12,14,.15)); }
.mission-kicker { display: block; color: var(--cyan); font-size: 9px; letter-spacing: .16em; }
#objective { display: block; font-size: 13px; line-height: 1.25; }
#contract-progress { display:block; margin-top:5px; font-size:10px; color:#ffe2b9; font-weight:700; }
#weapon-progress { display:block; margin-top:3px; font-size:10px; color:#b7fff2; font-weight:700; }
#region-status, #enemy-status { display:block; margin-top:4px; font-size:11px; line-height:1.4; color:#fff0d5; }
.route-hints { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; margin-top: 5px; color: var(--orange-hot); font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.route-hints[hidden] { display: none; }
#joystick-zone { position: absolute; left: 10px; bottom: calc(14px + env(safe-area-inset-bottom)); width: 138px; height: 138px; pointer-events: auto; touch-action: none; user-select: none; }
.joystick-base { position: absolute; left: 8px; bottom: 8px; width: 116px; height: 116px; border: 1px solid rgba(111,238,255,.32); border-radius: 50%; background: radial-gradient(circle, rgba(73,122,128,.16), rgba(4,8,9,.38)); box-shadow: inset 0 0 24px rgba(45,227,255,.1); }
#joystick-knob { position: absolute; left: 33px; top: 33px; width: 48px; height: 48px; border: 2px solid var(--cyan); border-radius: 50%; background: rgba(14,35,38,.82); box-shadow: 0 0 18px rgba(87,237,255,.25); transform: translate(0,0); }
#joystick-zone > span { position: absolute; left: 46px; bottom: 0; color: rgba(217,246,248,.58); font-size: 9px; letter-spacing: .18em; }
.pulse-button { position: absolute; right: 18px; bottom: calc(28px + env(safe-area-inset-bottom)); width: 92px; height: 92px; border: 2px solid var(--orange-hot); border-radius: 50%; pointer-events: auto; touch-action: none; background: radial-gradient(circle, rgba(239,115,98,.74), rgba(73,44,74,.94)); box-shadow: 0 0 0 8px rgba(239,115,98,.08), 0 0 24px rgba(73,44,74,.34); }
.pulse-button span, .pulse-button strong { display: block; }
.pulse-button span { font-size: 10px; }
.pulse-button strong { font-size: 15px; letter-spacing: .08em; }
.pulse-button:disabled { filter: grayscale(.8); opacity: .58; }
#toast-stack { position: absolute; left: 50%; bottom: 172px; width: min(300px, 86vw); transform: translateX(-50%); text-align: center; }
.toast { margin-top: 6px; padding: 8px 10px; border: 1px solid rgba(255,133,49,.36); background: rgba(8,9,9,.84); font-size: 13px; animation: toast-in .2s ease-out; }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }
.save-state { position: absolute; left: 12px; bottom: 158px; padding: 4px 6px; border: 1px solid rgba(7,91,104,.24); border-radius: 3px; background: rgba(244,231,205,.86); color: #284b4e; font-size: 9px; font-weight: 800; letter-spacing: .1em; box-shadow: 0 2px 10px rgba(73,44,74,.13); }
#threat-arrow { position: absolute; display: none; left: calc(50% - 14px); top: 22%; color: #ff6933; font-size: 26px; filter: drop-shadow(0 0 6px #ff3d00); transform-origin: 50% 200px; }

#pause-layer { z-index: 40; align-items: stretch; padding: 0; background: rgba(3,5,6,.78); backdrop-filter: blur(8px); }
.pause-panel { display:flex; flex-direction:column; width: 100%; min-height:0; height: calc(100% - max(24px, env(safe-area-inset-top))); margin-top: max(24px, env(safe-area-inset-top)); padding: 20px 16px calc(16px + env(safe-area-inset-bottom)); overflow: hidden; background: var(--panel); border-top: 1px solid var(--orange); }
.pause-panel > header, .pause-panel > .menu-save-state, .pause-panel > .tabs { flex-shrink:0; }
.pause-panel header { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.pause-panel header h2 { margin: 0; }
.pause-panel header > p { max-width: 140px; margin: 0; color: #899391; font-size: 12px; text-align: right; }
.menu-save-state { margin: 8px 0; color: #879391; font-size: 10px; letter-spacing: .11em; }
.tabs { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); margin: 14px 0; border-bottom: 1px solid rgba(255,255,255,.15); }
.tab { min-height: 48px; border: 0; background: transparent; color: #7e8987; font-size: 12px; font-weight: 800; }
.tab.is-active { color: var(--cyan); border-bottom: 2px solid var(--cyan); }
.tab-panel { display: none; flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding-bottom:16px; scroll-padding-block:12px; }
.tab-panel.is-active { display: block; }
#account-form label { display:block; margin:14px 0; color:#d8e5df; font-size:13px; }
#account-form input:not([type=checkbox]) { display:block; width:100%; min-width:0; margin-top:6px; min-height:46px; padding:10px; background:#10282e; color:#f3eddc; border:1px solid #70908e; border-radius:4px; font-size:16px; }
#account-form .account-consent { display:flex; gap:10px; align-items:flex-start; line-height:1.6; }
#account-public { flex:0 0 22px; width:22px; height:22px; }
#account-form button { display:block; width:100%; margin:10px 0; min-height:44px; }
#account-status, #cloud-state, #rank-status { color:#a7e8df; line-height:1.6; overflow-wrap:anywhere; }
.account-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.account-actions button, #rank-refresh { min-height:44px; }
#cloud-confirm { border:1px solid var(--orange); padding:12px; margin-top:12px; }
#rank-list { list-style:none; padding:0; }
#rank-list li { display:grid; grid-template-columns:30px minmax(0,1fr); gap:5px 10px; padding:14px 8px; border-bottom:1px solid #70898566; }
#rank-list li small { grid-column:2; color:#bdd0ca; }
#rank-list li span { overflow-wrap:anywhere; }
#rank-list li.rank-self { background:#265559; border-left:3px solid var(--cyan); }
.materials { display: flex; gap: 10px; margin-bottom: 10px; }
.materials span { flex: 1; padding: 9px; border: 1px solid rgba(255,255,255,.1); font-size: 11px; letter-spacing: .12em; }
.materials b { color: var(--orange-hot); }
.loadout-card { display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; align-items: center; min-height: 58px; margin: 7px 0; padding: 10px; border-left: 2px solid #59615f; background: rgba(255,255,255,.04); overflow-wrap:anywhere; }
.loadout-card.is-equipped { border-left-color: var(--cyan); }
.loadout-card.is-locked { opacity: .45; }
.loadout-card strong { font-size: 13px; }
.loadout-card small { color: #8e9997; }
.card-actions { grid-column: 1; display: flex; flex-wrap:wrap; gap: 8px; }
.card-actions button, .confirm-row button { min-height: 44px; min-width: 44px; border: 1px solid rgba(120,235,248,.34); background: rgba(9,17,19,.9); font-size: 10px; font-weight: 800; }
.panel-hint { color: #737d7b; font-size: 12px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; min-height: 62px; padding-right:16px; gap:8px; border-bottom: 1px solid rgba(255,255,255,.08); }
.setting-row select { min-height: 44px; border: 1px solid var(--line); background: #0a1112; color: white; }
.setting-row input { width: 25px; height: 25px; }
.setting-row input[type=file] { width:55%; height:auto; min-height:44px; font-size:11px; }
#import-select { min-height:44px; padding:8px 12px; border:1px solid var(--line); background:#0a1112; color:inherit; }
html[lang="zh-CN"] h1 { line-height:1.15; letter-spacing:.02em; }
html[lang="zh-CN"] .eyebrow, html[lang="zh-CN"] .mission-kicker, html[lang="zh-CN"] .save-state { letter-spacing:.04em; }
html[lang="zh-CN"] .card-actions button { font-size:12px; padding:8px; }
html[lang="zh-CN"] .loadout-card small { line-height:1.6; }
.pause-panel > .primary-action { width: 100%; flex-shrink:0; margin-top:8px; }
button:focus-visible, select:focus-visible { outline: 3px solid var(--cyan); outline-offset:2px; }
button:disabled { opacity:.5; cursor:not-allowed; }
.panel-hint, .menu-save-state, .loadout-card small, .tab, .pause-panel header > p { color:#b7cbc8; }
#reload-save { margin-top:12px; }
.danger-action { border-color: #ff6348; background: rgba(120,20,10,.35); color: #ffb09f; box-shadow: none; }
.confirm-row { display: flex; gap: 8px; }
.confirm-row button { flex: 1; }

#save-error { z-index: 60; background: rgba(8,3,2,.96); }
#qa-panel { position: absolute; z-index: 80; top: 132px; right: 4px; max-width: 170px; padding: 6px; background: rgba(0,0,0,.72); color: #8ff5ff; font: 9px/1.35 ui-monospace, monospace; pointer-events: none; }
#portrait-note { display: none; position: absolute; z-index: 100; inset: 0; place-items: center; background: #050708; font-weight: 800; }

@media (orientation: landscape) and (max-height: 520px) { #portrait-note { display: grid; } }
@media (max-width: 340px) {
  #joystick-zone { transform: scale(.88); transform-origin: bottom left; }
  .pulse-button { width: 80px; height: 80px; right: 12px; }
  .mission-card { width: 210px; }
  .loadout-card { padding: 7px; grid-template-columns:minmax(0,1fr); }
  .card-actions { grid-column:1; grid-row:auto; }
}
@media (max-height: 620px) {
  .mission-card { width:calc(100% - 20px); margin-top:6px; padding:5px 8px; }
  .mission-card > .mission-kicker:first-child, #region-status, #enemy-status, #contract-progress, .route-hints { display:none; }
  #objective { font-size:11px; }
  #combo-banner { margin-top:6px; padding:6px 10px 5px; }
  #combo-label { font-size:16px; }
  #toast-stack { bottom:156px; width:min(260px,84vw); }
  .toast { padding:5px 7px; font-size:11px; }
  .pause-panel { margin-top: 8px; height: calc(100% - 8px); padding-top: 12px; }
  .tab-panel { min-height: 220px; }
  .pause-panel header h2 { font-size: 26px; }
}
@media (min-width: 431px) { body { background: radial-gradient(circle, #182023, #050607 55%); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }