:root { color-scheme:dark; --bg:#080e17; --line:#2c3a48; --muted:#8b9baa; --text:#e3eaf0; --amber:#efb45d; --cyan:#87cbd4; --game-width:360px; --game-height:640px; font-family:"Segoe UI","Microsoft YaHei",sans-serif; }
* { box-sizing:border-box; }
html,body { margin:0; width:100%; height:100%; overflow:hidden; }
body { display:grid; place-items:center; color:var(--text); background:#040912; background-image:radial-gradient(ellipse at center,#1b2c40,transparent 70%); }
button,a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; cursor:pointer; color:inherit; border:0; }
button:disabled { opacity:.5; cursor:wait; }
button:focus-visible,canvas:focus-visible,summary:focus-visible { outline:2px solid var(--amber); outline-offset:-3px; }
[hidden] { display:none!important; }
.app-shell { width:min(100%,480px); height:100dvh; max-height:1000px; display:flex; flex-direction:column; background:var(--bg); box-shadow:0 0 90px #0009; overflow:hidden; border-inline:1px solid #283646; }
.masthead { height:calc(56px + env(safe-area-inset-top)); padding:env(safe-area-inset-top) 20px 0; flex-shrink:0; display:flex; align-items:center; gap:14px; border-bottom:1px solid #29364780; background:#090f19; }
.brand { display:flex; align-items:center; gap:9px; background:none; padding:0; text-align:left; font-size:13px; letter-spacing:2.5px; font-weight:700; min-height:44px; }
.brand-mark { color:var(--amber); font-size:30px; font-weight:400; }
.brand-sub { display:block; color:var(--muted); font:6px Consolas,monospace; letter-spacing:1px; margin-top:4px; }
.page-counter { font:9px Consolas,monospace; color:#8394a7; margin-left:auto; white-space:nowrap; }
.quiet-button { background:none; padding:0; min-height:44px; min-width:54px; font-size:10px; color:var(--muted); }
.quiet-button span { color:var(--text); margin-left:5px; font:9px Consolas,monospace; }
/* 原生 scroll-snap 负责触屏横滑，页面自己的纵向内容仍可滚动。 */
.pages { display:flex; flex:1; min-height:0; width:100%; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scrollbar-width:none; }
.pages::-webkit-scrollbar,.page::-webkit-scrollbar { display:none; }
.page { flex:0 0 100%; width:100%; min-width:0; height:100%; scroll-snap-align:start; scroll-snap-stop:always; overflow-y:auto; overflow-x:hidden; scrollbar-width:none; }
.home-page { display:flex; align-items:center; justify-content:center; overflow:hidden; background:#020711; }
.viewport { position:relative; flex:none; width:var(--game-width); height:var(--game-height); background:#020711; isolation:isolate; overflow:hidden; container-type:inline-size; }
#game { display:block; width:100%; height:100%; touch-action:none; image-rendering:auto; outline:none; }
.corner { position:absolute; pointer-events:none; width:13px; height:13px; z-index:9; border-color:#71859a; border-style:solid; opacity:.6; }
.top-left { left:0; top:0; border-width:1px 0 0 1px; }
.top-right { right:0; top:0; border-width:1px 1px 0 0; }
.bottom-left { left:0; bottom:0; border-width:0 0 1px 1px; }
.bottom-right { right:0; bottom:0; border-width:0 1px 1px 0; }
.eyebrow { font:9px Consolas,"Microsoft YaHei",monospace; letter-spacing:1.5px; color:var(--muted); }
.menu { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; background:linear-gradient(#02081388,transparent 40%,transparent 50%,#020813f5 94%); }
.menu-heading { padding:8% 8% 0; }
.menu-heading .eyebrow { color:#bdc6d0; font-size:2.4cqw; letter-spacing:.8px; }
.tiny-cross { color:var(--amber); margin-right:4px; }
.menu-heading h2 { font-size:12cqw; letter-spacing:.8cqw; margin:13px 0 5px; font-weight:800; text-shadow:0 3px #09121b; }
.english-title { font:700 3.3cqw Consolas,monospace; letter-spacing:1cqw; color:#c4cbd1; }
.tag { display:inline-block; font-size:2.4cqw; letter-spacing:1px; color:var(--amber); border-top:1px solid #efb45d55; margin-top:14px; padding-top:9px; }
.home-record { margin-top:17px; display:flex; gap:10px; align-items:center; }
.home-record small { font:7px Consolas,monospace; letter-spacing:1px; color:#8194a8; }
.home-record strong { font:14px Consolas,monospace; color:#d1dbe3; letter-spacing:2px; }
.menu-actions { padding:0 7% 5%; }
.loadout { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:13px; }
.loadout button { text-align:left; padding:10px 12px; background:#0e1b29d9; border:1px solid #55657577; min-height:55px; }
.loadout small { font-size:9px; color:#8ea0b2; display:flex; justify-content:space-between; }
.loadout strong { font-size:13px; letter-spacing:2px; display:block; margin-top:6px; }
.ready-line { display:flex; align-items:center; font-size:2.4cqw; color:#c3cbd2; margin-bottom:10px; }
.ready-line>span:last-child { margin-left:auto; font:9px Consolas,monospace; color:#8b9fb2; }
.status-dot { display:inline-block; flex-shrink:0; width:5px; height:5px; background:#8fbfab; vertical-align:middle; margin-right:6px; }
.primary-button { background:var(--amber); color:#151b23; padding:14px 17px; min-height:47px; display:flex; align-items:center; justify-content:space-between; width:100%; font-size:14px; font-weight:700; letter-spacing:3px; border:1px solid #ffd294; box-shadow:inset 0 -3px #bd8440; }
.primary-button:hover { background:#ffd28c; }
.primary-button:active { transform:translateY(1px); }
.primary-button span { font-size:20px; line-height:1; }
.menu-hint { text-align:center; font-size:10px; color:#95a0ad; margin:12px 0 16px; letter-spacing:1px; }
.menu-bottom { display:flex; justify-content:space-between; font:7px Consolas,monospace; letter-spacing:.8px; color:#657e95; }
.connection-status { flex-shrink:0; height:24px; display:flex; align-items:center; padding:0 14px; font-size:8px; letter-spacing:.5px; color:#748ba0; background:#090f18; border-top:1px solid #243141; }
#swipe-hint { margin-left:auto; color:#99a5b2; }
.bottom-nav { display:flex; flex-shrink:0; height:calc(65px + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); background:#0c1521; border-top:1px solid #283848; }
.bottom-nav button { position:relative; flex:1; background:none; color:#7e91a5; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.bottom-nav button>span { font:23px Consolas,monospace; height:23px; }
.bottom-nav strong { font-size:10px; font-weight:500; letter-spacing:1px; }
.bottom-nav [aria-selected="true"] { color:var(--amber); background:linear-gradient(#efb45d12,transparent); }
.bottom-nav [aria-selected="true"]::before { content:""; position:absolute; top:0; left:30%; right:30%; height:2px; background:var(--amber); }
.selection-page { padding:24px 23px 20px; background:radial-gradient(ellipse at 70% 20%,#1b314455,transparent 60%),#0a121d; }
.page-heading h1 { font-size:25px; letter-spacing:2px; margin:12px 0 9px; }
.page-heading h1>span { color:var(--amber); }
.page-heading p { margin:0; font-size:10px; color:var(--muted); letter-spacing:.6px; line-height:1.8; }
.craft-stage { position:relative; height:clamp(140px,23dvh,218px); margin-top:18px; border:1px solid #304459; overflow:hidden; background:radial-gradient(ellipse at center,#9abdd81a 0%,transparent 55%),repeating-radial-gradient(ellipse at center,transparent 0 44px,#7cacca15 45px 46px,transparent 47px 62px),#0b1723; }
.craft-code,.craft-type { position:absolute; z-index:1; font:8px Consolas,"Microsoft YaHei",monospace; letter-spacing:1px; color:#8ba0b2; }
.craft-code { left:12px; top:11px; }.craft-type { right:12px; bottom:11px; color:var(--amber); }
#craft { width:100%; height:100%; object-fit:contain; display:block; image-rendering:auto; }
.craft-summary { display:flex; gap:14px; align-items:center; margin:14px 0; }
.craft-summary h2 { flex-shrink:0; font-size:23px; letter-spacing:3px; margin:0; }
.craft-summary p { color:var(--muted); font-size:10px; line-height:1.8; margin:0; }
.ship-options { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:16px; }
.ship-choice { position:relative; background:#101e2b; border:1px solid #34495e; padding:8px 4px 10px; display:flex; flex-direction:column; align-items:center; min-width:0; }
.ship-thumb { display:block; width:62px; height:62px; background-repeat:no-repeat; }
.ship-0 { background-image:url('assets/sprites-hd/player.png'); background-size:200% 200%; background-position:0 0; }
.ship-1,.ship-2 { background-image:url('assets/sprites-hd/selection.png'); background-size:100% 200%; }
.ship-1 { background-position:0 0; }.ship-2 { background-position:0 100%; }
.ship-choice strong { font-size:12px; letter-spacing:2px; margin-top:5px; }.ship-choice small { font-size:8px; color:var(--muted); margin-top:5px; }
.ship-choice[aria-pressed="true"],.sector-choice[aria-pressed="true"] { border-color:var(--amber); box-shadow:inset 0 0 0 1px #efb45d44; }
.ship-choice[aria-pressed="true"]::after { content:"✓"; position:absolute; top:4px; right:6px; color:var(--amber); font-size:11px; }
.selection-status { font-size:10px; color:var(--amber); letter-spacing:1px; margin:13px 0; text-align:center; }
.return-launch { margin-top:14px; min-height:44px; font-size:12px; }
.sector-options { display:flex; flex-direction:column; gap:12px; margin-top:22px; }
.sector-choice { width:100%; min-height:132px; border:1px solid #3b4d60; padding:17px; text-align:left; background-color:#081321; background-size:cover; background-position:center 22%; display:grid; grid-template-columns:1fr auto; gap:9px 8px; }
.sector-0 { background-image:linear-gradient(90deg,#071320ec,#07132044),url('assets/battle-background.webp'); }
.sector-1 { background-image:linear-gradient(90deg,#160e09e8,#07132033),url('assets/battle-red.webp'); }
.sector-2 { background-image:linear-gradient(90deg,#100d22ed,#07132033),url('assets/battle-rift.webp'); }
.sector-choice .eyebrow { color:#bbcbd8; font-size:8px; }.sector-choice .difficulty { font-size:9px; color:var(--amber); justify-self:end; }
.sector-choice strong { font-size:20px; letter-spacing:3px; grid-column:1/-1; }.sector-choice small { font-size:9px; color:#c2cbd6; grid-column:1/-1; }.sector-choice .sector-stats { font:8px Consolas,"Microsoft YaHei",monospace; color:#91a7ba; grid-column:1/-1; }
.instructions { padding:14px 0 0; border-top:1px solid var(--line); margin-top:16px; }
.instructions summary { cursor:pointer; display:flex; justify-content:space-between; font-size:11px; list-style:none; color:#c6d4df; min-height:28px; }.instructions summary::-webkit-details-marker { display:none; }
.instructions p { color:var(--muted); font-size:10px; line-height:1.9; }
.pickup-guide { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding-block:6px; }.pickup-guide>span { display:flex; align-items:center; gap:8px; font-size:10px; color:#b2c0cd; }
.pickup { display:inline-block; width:24px; height:24px; background:url('assets/sprites-hd/pickups.png') 0 0 / 200% 200% no-repeat; }.p-shield { background-position:100% 0; }.p-bomb { background-position:0 100%; }.p-score { background-position:100% 100%; }
.hud { position:absolute; inset:0 0 auto; padding:14px 14px 28px; background:linear-gradient(#040a14e8,#040a1477,transparent); pointer-events:none; }
.hud-top { display:flex; align-items:start; gap:18px; }.hud small { display:block; font:8px Consolas,monospace; color:#9cabb9; letter-spacing:1px; }.hud strong { font:22px Consolas,monospace; letter-spacing:2px; }.hud .wave { margin-left:auto; text-align:right; }.hud .wave strong { font-size:20px; }
.icon-button { background:#152132bb; border:1px solid #516070; height:44px; width:44px; pointer-events:auto; font:18px Consolas,monospace; }.hud-bottom { display:flex; justify-content:space-between; margin-top:10px; font-size:10px; color:var(--amber); letter-spacing:1px; }#weapon { color:#bdc8d4; font-size:9px; }
.boss-label { display:flex; justify-content:space-between; color:#f18a80; font-size:8px; letter-spacing:1px; margin:14px 0 6px; }.boss-track { height:4px; background:#382932; }#boss-fill { height:100%; background:#ed7968; width:100%; }
.combat-controls { position:absolute; bottom:12px; left:14px; right:14px; display:flex; justify-content:space-between; align-items:center; pointer-events:none; }.combat-controls>span { font-size:9px; color:#a7bed1; }
#bomb { pointer-events:auto; touch-action:manipulation; color:var(--amber); background:#121c2cec; border:1px solid #8f713f; padding:11px 14px; font-size:17px; display:flex; align-items:center; gap:10px; }#bomb span { font-size:11px; }#bomb b { font:14px Consolas,monospace; }
.notice { position:absolute; top:36%; left:0; right:0; text-align:center; color:var(--amber); font-size:15px; font-weight:700; letter-spacing:3px; pointer-events:none; text-shadow:0 2px 5px #000; background:#050d1bd9; padding:15px 0; opacity:0; transition:opacity .15s; }.notice.visible { opacity:1; }
.dialog { position:absolute; inset:0; background:#030914ce; display:flex; align-items:center; justify-content:center; z-index:10; }.dialog-card { background:#0c1724f2; border:1px solid #4a5560; border-top:2px solid var(--amber); padding:25px 21px; width:86%; text-align:center; box-shadow:0 16px 40px #0009; }.dialog h2 { font-size:25px; letter-spacing:3px; margin:16px 0 12px; }.dialog p { color:var(--muted); font-size:11px; line-height:1.8; margin-bottom:22px; }
.secondary-button { background:#1c2a38; border:1px solid #425263; width:100%; padding:12px; margin-top:12px; font-size:12px; letter-spacing:2px; }.text-button { background:none; color:var(--muted); font-size:11px; padding:14px 12px 0; }.results { display:flex; justify-content:space-around; border-block:1px solid var(--line); padding:16px 0; margin:0 0 22px; }.results small { display:block; font-size:10px; color:var(--muted); }.results strong { display:block; font:25px Consolas,monospace; color:var(--amber); margin-top:8px; }
body.in-flight .bottom-nav,body.in-flight #swipe-hint { display:none; }
body.in-flight .pages { overflow:hidden; scroll-snap-type:none; }
body.in-flight .brand { pointer-events:none; }
@media(max-width:480px) { .app-shell { border:0; max-height:none; }.masthead { padding-inline:15px; }.selection-page { padding:20px 19px; }.sector-choice { min-height:123px; padding:14px; } }
@media(max-height:720px) { .page-heading h1 { font-size:23px; }.craft-stage { height:135px; }.selection-page { padding-top:16px; }.menu-heading { padding-top:6%; }.home-record { margin-top:9px; }.menu-hint { margin-bottom:10px; }.loadout button { min-height:47px; padding:7px 10px; } }
@media(prefers-reduced-motion:reduce) { * { transition:none!important; scroll-behavior:auto!important; } }

/* 星域目标、战果结算与传送门共用现有蓝金军事界面。 */
.mission-line { display:flex; justify-content:space-between; gap:8px; margin-top:10px; color:#afc5d4; font-size:9px; }
.dialog { overflow-y:auto; padding:16px 0; }
.dialog-card { max-height:100%; overflow-y:auto; }
.result-emblem { width:66px; height:66px; margin:0 auto 17px; display:grid; place-items:center; color:var(--amber); font:42px Consolas,monospace; border:1px solid #efb45d80; background:radial-gradient(#efb45d25,transparent 70%); transform:rotate(0); }
.dialog[data-outcome="won"] .dialog-card { border-color:#b89555; background:radial-gradient(ellipse at top,#343023aa,transparent 65%),#0c1724f5; }
.dialog[data-outcome="won"] h2 { color:#f2c779; }
.dialog[data-outcome="lost"] .dialog-card { border-top-color:#e58176; background:radial-gradient(ellipse at top,#41242988,transparent 65%),#0c1724f5; }
.dialog[data-outcome="lost"] .result-emblem { color:#f08c83; border-color:#b4656088; background:radial-gradient(#dd68682b,transparent 70%); }
.dialog[data-outcome="lost"] h2 { color:#efa09a; }
.reward-strip { display:flex; align-items:center; gap:12px; padding:13px 11px; background:#efb45d0c; border:1px solid #bd945c55; text-align:left; font-size:12px; }
.reward-strip small { display:block; font-size:8px; color:#a7b4c2; margin-top:5px; }
.reward-strip>strong { margin-left:auto; font:26px Consolas,monospace; color:var(--amber); }
.ticket-icon { padding:5px 10px; border:1px dashed #d7a956; background:#a0713322; color:var(--amber); font-size:23px; }
.dialog .reward-status { font-size:10px; color:#a8c6c5; margin:12px 0 18px; }
#dialog-title:focus { outline:none; }
.dialog .results { margin-bottom:14px; padding:12px 0; }
#result-lottery { font-size:12px; letter-spacing:1px; }
.wallet-balances { display:grid; grid-template-columns:1fr 1fr; margin-top:22px; border:1px solid #35465a; background:#11213088; }
.wallet-balances>div { padding:13px 16px; }.wallet-balances>div+div { border-left:1px solid #35465a; }
.wallet-balances small { font-size:10px; color:#9badbe; }.wallet-balances strong { display:block; font:24px Consolas,monospace; margin-top:6px; }
.ticket-mini { color:var(--amber); font-size:18px; }.diamond-mini { color:#9ce9ff; font-size:19px; }
[data-rarity="blue"] { --rarity:#70b5eb; --portal-position:0% 0%; --energy-center:53.5% 49.4%; }
[data-rarity="purple"] { --rarity:#ac8bdf; --portal-position:100% 0%; --energy-center:46.6% 49.4%; }
[data-rarity="pink"] { --rarity:#df87b5; --portal-position:0% 100%; --energy-center:53.3% 43.1%; }
[data-rarity="gold"] { --rarity:#e3bd72; --portal-position:100% 100%; --energy-center:46.4% 43.1%; }
.portal-stage { position:relative; margin-top:24px; border:1px solid #526071; border-radius:5px; background:#101c28 url('assets/ui-v4/metal.webp') center / 350px; overflow:hidden; }
.reel-heading { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:13px 12px; border-bottom:1px solid #344555; }
.reel-heading>span { font-size:10px; letter-spacing:1px; color:#dac69c; }
.reel-heading small { font:6px Consolas,monospace; letter-spacing:1px; color:#8b9fae; }
.reel-window { position:relative; height:166px; overflow:hidden; background:#060e17; box-shadow:inset 0 0 18px #0008; }
.reward-reel { position:absolute; left:50%; top:13px; display:flex; gap:8px; width:max-content; transform:translateX(-296px); }
.drawing .reward-reel { will-change:transform; }
.reward-card { flex:0 0 112px; width:112px; height:140px; display:flex; flex-direction:column; align-items:center; border:1px solid #334251; border-bottom:3px solid var(--rarity); background:#07131e; }
.reward-card>small { align-self:stretch; padding:7px 8px 0; font-size:8px; letter-spacing:1px; color:var(--rarity); }
.reward-portal { position:relative; display:block; width:92px; height:92px; flex-shrink:0; background:url('assets/portal-rewards-user.webp') var(--portal-position) / 200% 200% no-repeat; }
/* 用户图集的四个能量中心略有偏移，遮罩只覆盖内部，保留静止的金属外圈。 */
.reward-portal::after { content:""; position:absolute; inset:0; background:inherit; mask-image:radial-gradient(circle 29px at var(--energy-center),#000 85%,transparent 100%); transform-origin:var(--energy-center); animation:portal-energy-spin 18s linear infinite; animation-play-state:paused; }
.lottery-page:not([inert]) .reward-portal::after { animation-play-state:running; }
@keyframes portal-energy-spin { to { transform:rotate(360deg); } }
@media(prefers-reduced-motion:reduce) { .reward-portal::after { animation:none; } }
.reward-card strong { color:#e5eaf0; font:18px Consolas,monospace; }
.reward-card strong span { font:9px "Microsoft YaHei",sans-serif; color:#a5b7c6; }
.reward-card.selected { border-color:var(--rarity); box-shadow:inset 0 0 0 1px var(--rarity); }
.reel-pointer.ui-icon { position:absolute; z-index:1; left:50%; top:0; width:20px; height:22px; transform:translateX(-50%) rotate(90deg); filter:drop-shadow(0 2px 3px #000); }
.reel-footer { position:relative; min-height:39px; display:grid; place-items:center; border-top:1px solid #344555; }
.portal-caption { padding:8px; color:#a3b8c8; font-size:9px; letter-spacing:1px; text-align:center; }
.portal-prize { position:absolute; inset:0; display:flex; gap:8px; align-items:center; justify-content:center; background:#101c28; color:var(--rarity); }
.portal-prize strong { font:23px Consolas,monospace; }.portal-prize small { font-size:9px; }.portal-prize .ui-icon { width:23px; height:23px; }
.draw-message { min-height:45px; display:grid; place-items:center; text-align:center; font-size:11px; color:#bed8e4; padding:10px 0; }
.draw-rules { font-size:9px; text-align:center; line-height:1.9; color:var(--muted); margin:12px 0 20px; }
.lottery-note { border-top:1px solid #304050; padding-top:15px; }.lottery-note p { font-size:10px; line-height:1.8; color:#9fb4c3; }
.lottery-note .secondary-button { margin:0; font-size:10px; letter-spacing:1px; }
@media(max-height:720px) { .dialog-card { padding:18px 16px; }.result-emblem { width:42px; height:42px; font-size:29px; margin-bottom:10px; }.dialog h2 { font-size:22px; margin:10px 0; }.dialog p { margin-bottom:14px; } }

/* V4 指挥终端：生图材质与图标，保留原生滑页及战斗尺寸适配。 */
:root { --bg:#080f18; --line:#304254; --muted:#8ca5b9; --text:#e7edf2; --amber:#d7b67b; --cyan:#96dbe9; }
body { background:#030811 url('assets/ui-v4/metal.webp') center / 512px; background-blend-mode:multiply; }
.app-shell { border-color:#465162; box-shadow:0 20px 100px #000b; }
.ui-icon { display:inline-block; width:24px; height:24px; flex-shrink:0; vertical-align:middle; background-position:center; background-size:contain; background-repeat:no-repeat; }
.icon-launch { background-image:url('assets/ui-v4/launch.png'); }
.icon-ship { background-image:url('assets/ui-v4/ship.png'); }
.icon-planet { background-image:url('assets/ui-v4/planet.png'); }
.icon-portal { background-image:url('assets/ui-v4/portal.png'); }
.icon-ticket { background-image:url('assets/ui-v4/ticket.png'); }
.icon-diamond { background-image:url('assets/ui-v4/diamond.png'); }
.icon-pause { background-image:url('assets/ui-v4/pause.png'); }
.icon-audio { background-image:url('assets/ui-v4/audio.png'); }
.icon-bomb { background-image:url('assets/ui-v4/bomb.png'); }
.icon-victory { background-image:url('assets/ui-v4/victory.png'); }
.icon-defeat { background-image:url('assets/ui-v4/defeat.png'); }
.icon-arrow { background-image:url('assets/ui-v4/arrow.png'); }
.icon-refresh { background-image:url('assets/ui-v4/refresh.png'); }
.icon-shield { background-image:url('assets/ui-v4/shield.png'); }
.icon-check { background-image:url('assets/ui-v4/check.png'); }
.icon-close { background-image:url('assets/ui-v4/close.png'); }

.masthead { height:calc(60px + env(safe-area-inset-top)); background:#0b1622 url('assets/ui-v4/metal.webp') center / 380px; border-bottom:1px solid #7b704e; gap:10px; }
.brand { font-size:12px; letter-spacing:2.8px; gap:8px; }.brand>.ui-icon { width:33px; height:38px; }.brand-sub { font-size:6px; color:#a3b4c2; }
.quiet-button { display:flex; align-items:center; justify-content:center; min-width:51px; }.quiet-button>.ui-icon { width:21px; height:21px; }.quiet-button[aria-pressed="false"]>.ui-icon { opacity:.5; }
.page-counter { font-size:8px; letter-spacing:1px; color:#9bafbf; }
.menu { background:#03091118; }.menu-heading { padding:6% 7% 0; }
.menu-heading .eyebrow { color:#c2b597; font-size:2.1cqw; letter-spacing:1.3px; }
.menu-heading h2 { font-size:10cqw; letter-spacing:1.2cqw; margin:10px 0 5px; color:#f2e9d7; font-weight:700; text-shadow:0 3px 18px #000; }
.english-title { font-size:2.4cqw; letter-spacing:1.2cqw; color:#a4becb; }.tag { color:#bacbd6; margin-top:11px; padding-top:8px; border-color:#8b7c55; font-size:2.3cqw; letter-spacing:2px; }
.home-record { margin-top:11px; }.home-record strong { font-size:12px; color:#d9c18e; }.home-record small { font-size:6px; color:#9aadb9; }
.home-wallet { display:flex; align-items:center; gap:7px; background:#101c29db; border:1px solid #57616a; padding:4px 9px; min-height:34px; margin-top:11px; color:#ead7ae; font:12px Consolas,monospace; }
.home-wallet .ui-icon { width:22px; height:22px; }.home-wallet .icon-arrow { width:12px; height:12px; margin-left:7px; }.wallet-divider { height:13px; border-left:1px solid #536170; margin:0 4px; }
.menu-actions { padding:0 6% 4%; }.loadout { gap:8px; margin-bottom:12px; }.loadout button { background:#101e2a url('assets/ui-v4/metal.webp') center / 340px; border-color:#526072; box-shadow:inset 0 1px #bac8d51a; padding:10px 12px; border-radius:4px; }
.loadout small { justify-content:flex-start; align-items:center; gap:5px; color:#aab9c6; font-size:9px; }.loadout small .ui-icon { width:18px; height:18px; }.loadout strong { margin-top:4px; font-size:14px; color:#efe4cd; letter-spacing:1px; }
.primary-button { background:#152535 url('assets/ui-v4/metal.webp') center / 350px; border-color:#b39764; color:#f4dba7; border-radius:4px; min-height:49px; font-size:14px; letter-spacing:2px; box-shadow:inset 0 1px #ffefd644,inset 0 -3px #030a11,0 4px 18px #0004; }
.primary-button:hover { background:#20364a url('assets/ui-v4/metal.webp') center / 350px; border-color:#edd097; }.primary-button>.ui-icon { width:26px; height:26px; }
#start { border-color:#d1af6f; min-height:54px; font-size:16px; letter-spacing:4px; }
.menu-hint { margin:10px 0 12px; font-size:9px; color:#93a9b7; }.menu-bottom { color:#859ba8; font-size:7px; }
.selection-page { background:#0a1420; padding:25px 23px 20px; }
.page-heading { border-left:2px solid #a3895c; padding-left:12px; }.page-heading .eyebrow { font-size:8px; color:#8d9dab; letter-spacing:1.8px; }.page-heading h1 { font-size:26px; font-weight:600; letter-spacing:2px; margin:10px 0 9px; }.page-heading h1>span { font:11px Consolas,monospace; color:#ab9066; letter-spacing:1px; vertical-align:middle; }.page-heading p { font-size:10px; line-height:1.9; color:#a0b2c0; letter-spacing:0; }
.craft-stage { margin-top:22px; height:clamp(160px,25dvh,230px); border:1px solid #586372; border-radius:6px; background:#344454 url('assets/battle-background.webp') center 65% / cover; background-blend-mode:multiply; box-shadow:inset 0 0 55px #030813b0; }
.craft-code { color:#9cb3c2; }.craft-type { background:#0a1523cc; padding:5px 8px; border:1px solid #72664c; border-radius:2px; }
.craft-summary { margin:18px 0; }.craft-summary h2 { font-weight:600; color:#e8d5aa; }.craft-summary p { font-size:10px; line-height:1.8; }
.ship-choice { background:#13202d url('assets/ui-v4/metal.webp') center / 260px; border-color:#415367; border-radius:5px; padding:12px 5px; }.ship-thumb { width:70px; height:70px; }.ship-choice strong { color:#dce6ed; letter-spacing:1px; }.ship-choice small { font-size:9px; }
.ship-choice[aria-pressed="true"] { background-color:#20354a; box-shadow:inset 0 0 0 1px #d7b67b33,0 0 16px #d7b67b0e; }.ship-choice[aria-pressed="true"]::after { content:""; width:16px; height:16px; background:url('assets/ui-v4/check.png') center / contain no-repeat; top:6px; right:6px; }
.selection-status { color:#b9d6d9; font-size:10px; margin:15px 0; }.return-launch { margin-top:18px; }
.sector-options { margin-top:23px; gap:14px; }.sector-choice { border-radius:6px; min-height:140px; padding:17px; border-color:#536270; gap:10px 8px; }.sector-choice strong { font-size:23px; letter-spacing:2px; color:#e5eaf0; font-weight:600; }.sector-choice small { color:#bccdd9; font-size:10px; }.sector-choice .sector-stats { font-size:9px; color:#a6c0cf; padding-top:7px; border-top:1px solid #b5c3ce22; }.sector-choice[aria-pressed="true"] { border-color:#c7a66c; box-shadow:inset 3px 0 #c7a66c; }
.instructions { border-color:#35495c; padding-top:15px; }.instructions summary { align-items:center; min-height:33px; }.instructions summary .ui-icon { width:15px; height:15px; }.instructions[open] summary .ui-icon { transform:rotate(90deg); }
.connection-status { background:#07101b; border-color:#344556; color:#8da6b8; height:23px; }
.bottom-nav { background:#0f1d2b url('assets/ui-v4/metal.webp') center / 380px; height:calc(73px + env(safe-area-inset-bottom)); border-top:1px solid #7d704e; }
.bottom-nav button { gap:4px; color:#8298ac; border-inline-end:1px solid #31425277; }.bottom-nav button:last-child { border:0; }.bottom-nav .ui-icon { width:31px; height:31px; opacity:.57; filter:saturate(.45); }.bottom-nav strong { font-size:10px; letter-spacing:.5px; }.bottom-nav [aria-selected="true"] { background:#d7b67b0c; color:#e6c995; }.bottom-nav [aria-selected="true"] .ui-icon { opacity:1; filter:none; }.bottom-nav [aria-selected="true"]::before { left:20%; right:20%; background:#d7b67b; }
.icon-button,#bomb { background:#122436 url('assets/ui-v4/metal.webp') center / 320px; border-color:#8b794f; border-radius:4px; }.icon-button .ui-icon { width:22px; height:22px; }#bomb>.ui-icon { width:23px; height:26px; }
#hull { display:flex; gap:4px; }#hull .ui-icon { width:17px; height:19px; }#hull .depleted { opacity:.2; filter:grayscale(1); }.boss-label>span:first-child { display:flex; align-items:center; gap:5px; }.boss-label .ui-icon { width:15px; height:15px; }
.hud strong { font-size:21px; color:#e4eaf1; }.hud .wave strong { font-size:18px; color:#e3c68e; }.mission-line { font-size:9px; color:#b0c7d5; }.notice { font-size:13px; letter-spacing:2px; color:#ecd4a3; border-block:1px solid #a38c5144; }
.dialog-card,.dialog[data-outcome="won"] .dialog-card,.dialog[data-outcome="lost"] .dialog-card { background:#101c2a url('assets/ui-v4/metal.webp') center / 400px; border-radius:7px; box-shadow:0 15px 60px #000b; }
.result-emblem,.dialog[data-outcome="lost"] .result-emblem { background:none; border:0; width:76px; height:76px; margin-bottom:15px; }.result-emblem .ui-icon { width:76px; height:76px; }.dialog h2 { font-weight:600; letter-spacing:2px; }.dialog .eyebrow { color:#acb9c7; }.reward-strip { background:#08131eb0; border-radius:4px; border-color:#7d714f; }.reward-strip>.ui-icon { width:39px; height:34px; }.secondary-button { border-radius:4px; background:#15283a; border-color:#3e5468; }
.wallet-balances { border-color:#596273; border-radius:5px; background:#112234 url('assets/ui-v4/metal.webp') center / 350px; }.wallet-balances>div+div { border-color:#465467; }.wallet-balances small { color:#a6b9c9; }.wallet-balances strong { display:flex; align-items:center; gap:8px; font-size:26px; color:#e8d4a7; }.wallet-balances .ui-icon { width:29px; height:28px; }
.draw-cost { display:flex; align-items:center; gap:5px; font:14px Consolas,monospace!important; }.draw-cost .ui-icon { width:29px; height:23px; }.draw-message { color:#d2e3ea; font-size:11px; min-height:48px; }.draw-rules { color:#90a8ba; font-size:9px; }.lottery-note { border-color:#3e5264; }.lottery-note .secondary-button { display:flex; align-items:center; justify-content:space-between; }.lottery-note .ui-icon { width:16px; height:16px; }
@media(max-width:480px) { .selection-page { padding:22px 19px; }.masthead { padding-inline:13px; } }
@media(max-height:720px) { .menu-heading { padding-top:4%; }.menu-heading h2 { font-size:9cqw; margin-top:8px; }.tag { margin-top:7px; padding-top:5px; }.home-record { margin-top:7px; }.home-wallet { margin-top:7px; min-height:28px; }.home-wallet .ui-icon { height:17px; }.menu-hint { margin:7px 0; }.menu-actions { padding-bottom:3%; }.loadout button { padding:7px 9px; }.loadout { margin-bottom:8px; }#start { min-height:45px; font-size:14px; }.craft-stage { height:155px; }.result-emblem,.dialog[data-outcome="lost"] .result-emblem,.result-emblem .ui-icon { width:47px; height:47px; }.bottom-nav { height:calc(65px + env(safe-area-inset-bottom)); }.bottom-nav .ui-icon { width:27px; height:27px; } }