:root {
  --bg: #050a18; --panel: #0c1630; --panel2: #101e3e; --line: #24406e; --text: #e8f0ff; --dim: #8ea3c6;
  --accent: #5cd0ff; --gold: #ffd24d; --core: #c98bff; --danger: #ff5470; --ok: #5ee38f;
  --font: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --cut: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #02040a; color: var(--text); font-family: var(--font); overflow: hidden; overscroll-behavior: none; user-select: none; -webkit-user-select: none; touch-action: none; }
#app { position: fixed; inset: 0; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
#ui { position: absolute; inset: 0; pointer-events: none; }
#ui > * { pointer-events: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

#hud-buttons[hidden] { display: none; }
#btn-pause { position: absolute; top: calc(env(safe-area-inset-top) + 10px); right: 12px; width: 40px; height: 40px; border-radius: 10px; background: rgba(6, 14, 30, .6); border: 1px solid rgba(255, 255, 255, .22); display: flex; align-items: center; justify-content: center; gap: 5px; }
#btn-pause span { width: 4px; height: 15px; background: #fff; border-radius: 1px; }
#btn-bomb { position: absolute; right: 16px; bottom: calc(env(safe-area-inset-bottom) + 22px); width: 76px; height: 76px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, rgba(255, 130, 200, .55), rgba(100, 20, 80, .55)); border: 2px solid #ff9ad6; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 0 22px rgba(255, 110, 190, .45); }
#btn-bomb b { font-size: 13px; }
#btn-bomb i { font-style: normal; font-size: 21px; font-weight: 900; line-height: 1; }
#btn-bomb.empty { opacity: .38; filter: grayscale(.7); }

#toasts { position: absolute; top: calc(env(safe-area-inset-top) + 66px); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; z-index: 40; }
.toast { background: rgba(10, 22, 48, .94); border: 1px solid var(--accent); padding: 8px 16px; font-size: 13px; font-weight: 700; clip-path: var(--cut); animation: tin .25s ease-out; max-width: 90%; }
@keyframes tin { from { transform: translateY(-10px); opacity: 0; } }

.screen { position: absolute; inset: 0; display: flex; flex-direction: column; padding: calc(env(safe-area-inset-top) + 12px) max(14px, env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 12px) max(14px, env(safe-area-inset-left)); max-width: 640px; margin: 0 auto; }
.screen.backdrop { max-width: none; background: linear-gradient(180deg, rgba(4, 9, 22, .88), rgba(4, 9, 22, .96)); }
.screen.backdrop > * { width: 100%; max-width: 612px; margin-left: auto; margin-right: auto; }
.scroll { flex: 1; min-height: 0; overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: 12px; }
.topbar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex: none; min-height: 40px; }
.topbar h2 { margin: 0; font-size: 20px; font-weight: 900; flex: 1; letter-spacing: 1px; }
.back { width: 40px; height: 40px; background: var(--panel2); border: 1px solid var(--line); clip-path: var(--cut); font-size: 18px; flex: none; }
.cur { font-size: 13px; font-weight: 800; white-space: nowrap; }
.cur.g { color: var(--gold); } .cur.c { color: var(--core); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 18px; min-height: 44px; font-weight: 800; font-size: 15px; background: var(--panel2); border: 1px solid var(--line); clip-path: var(--cut); transition: filter .12s, transform .08s; }
.btn:active { transform: scale(.97); filter: brightness(1.25); }
.btn.primary { background: linear-gradient(135deg, #2fb8ff, #4a6fff); border: 0; color: #fff; }
.btn.gold { background: linear-gradient(135deg, #ffcf4d, #ff8f3d); border: 0; color: #2a1600; }
.btn.danger { background: #3a1224; border-color: var(--danger); color: #ffc0cc; }
.btn[disabled] { opacity: .4; pointer-events: none; }
.btn.small { padding: 7px 12px; min-height: 36px; font-size: 13px; }
.row { display: flex; gap: 8px; }
.row > .btn { flex: 1; }

/* Home */
.home { justify-content: space-between; align-items: stretch; }
.home-res { display: flex; gap: 12px; justify-content: flex-end; margin-right: 0; }
.logo { text-align: center; margin-top: 6vh; }
.logo h1 { margin: 0; font-size: clamp(50px, 15vw, 82px); font-weight: 900; font-style: italic; letter-spacing: 2px; line-height: 1; background: linear-gradient(180deg, #fff 20%, #5cd0ff 60%, #3a5cff); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 22px rgba(92, 208, 255, .55)); }
.logo p { margin: 8px 0 0; letter-spacing: 9px; color: var(--accent); font-size: 13px; font-weight: 800; padding-left: 9px; }
.hero { display: flex; justify-content: center; align-items: center; flex: 1; min-height: 120px; }
.hero img { width: min(48vw, 220px); filter: drop-shadow(0 0 28px rgba(92, 208, 255, .65)); animation: bob 3.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-12px); } }
.menu { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 420px; margin: 0 auto; }
.menu .btn.go { font-size: 21px; min-height: 62px; letter-spacing: 6px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.badge { color: var(--danger); margin-left: 2px; }

/* Stage select */
.tabs { display: flex; gap: 6px; flex: none; margin-bottom: 8px; }
.tab { flex: 1; padding: 9px 2px; text-align: center; font-size: 13px; font-weight: 800; background: var(--panel); border: 1px solid var(--line); clip-path: var(--cut); color: var(--dim); min-height: 40px; }
.tab.on { background: var(--panel2); color: #fff; border-color: var(--accent); }
.tab[disabled] { opacity: .35; pointer-events: none; }
.sector { padding: 12px 2px 6px; display: flex; align-items: baseline; gap: 10px; }
.sector b { font-size: 16px; }
.sector small { font-size: 10px; letter-spacing: 3px; font-weight: 800; }
.stages { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stage { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--panel); border: 1px solid var(--line); clip-path: var(--cut); text-align: left; min-height: 74px; overflow: hidden; }
.stage img { width: 54px; height: 54px; object-fit: contain; flex: none; }
.stage .n { font-size: 11px; color: var(--dim); font-weight: 800; }
.stage .t { font-size: 14px; font-weight: 800; }
.stage .s { font-size: 12px; color: var(--gold); letter-spacing: 1px; }
.stage.locked { opacity: .36; pointer-events: none; }
.stage.locked img { filter: brightness(0); }

/* Panels / preflight */
.panel { background: var(--panel); border: 1px solid var(--line); clip-path: var(--cut); padding: 12px; margin-bottom: 8px; }
.panel h3 { margin: 0 0 6px; font-size: 15px; }
.kv { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; }
.kv span:first-child { color: var(--dim); }
.muted { color: var(--dim); font-size: 12.5px; line-height: 1.5; }
.brief { display: flex; gap: 12px; align-items: center; }
.brief img { width: 104px; height: 104px; object-fit: contain; flex: none; }

/* Hangar */
.shiprow { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; touch-action: pan-x; flex: none; scrollbar-width: none; }
.ship { flex: 0 0 76px; padding: 6px 2px; text-align: center; background: var(--panel); border: 1px solid var(--line); clip-path: var(--cut); font-size: 12px; font-weight: 800; }
.ship img { width: 54px; height: 54px; display: block; margin: 0 auto; }
.ship.on { border-color: var(--accent); background: var(--panel2); }
.ship.locked img { filter: brightness(.12); }
.slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.slot { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #081022; border: 1px dashed var(--line); clip-path: var(--cut); font-size: 11px; color: var(--dim); gap: 2px; padding: 3px; }
.slot.sel { border-style: solid; border-color: var(--accent); background: var(--panel2); }
.tile { position: relative; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 25px; font-weight: 900; background: linear-gradient(145deg, #15264a, #0b1630); border: 2px solid; clip-path: var(--cut); width: 100%; }
.tile small { position: absolute; right: 4px; bottom: 1px; font-size: 10px; font-weight: 800; color: #fff; }
.tile em { position: absolute; left: 4px; top: 2px; font-style: normal; font-size: 9px; color: var(--ok); font-weight: 800; }
.inv { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; }
.filters { display: flex; gap: 5px; margin: 8px 0 6px; flex-wrap: wrap; }
.filters .btn { flex: 1; padding: 6px 2px; min-height: 34px; font-size: 12px; min-width: 50px; }
.filters .btn.on { border-color: var(--accent); color: var(--accent); }

/* Modal + cards */
.modal { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(2, 5, 14, .78); z-index: 20; }
.sheet { width: 100%; max-width: 410px; max-height: 88%; overflow-y: auto; touch-action: pan-y; background: var(--panel); border: 1px solid var(--accent); clip-path: var(--cut); padding: 16px; }
.sheet h3 { margin: 0 0 4px; font-size: 18px; }
.item-head { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.item-head .tile { width: 68px; flex: none; }
.cards { display: flex; flex-direction: column; gap: 8px; }
.card { width: 100%; text-align: left; padding: 12px 14px; background: var(--panel2); border: 1px solid var(--line); clip-path: var(--cut); display: flex; gap: 12px; align-items: center; animation: pop .28s ease-out backwards; }
.card:nth-child(2) { animation-delay: .07s; } .card:nth-child(3) { animation-delay: .14s; }
.card:active { filter: brightness(1.3); }
.card .tile { width: 56px; flex: none; font-size: 22px; }
.card b { font-size: 15px; display: block; margin-bottom: 2px; }
@keyframes pop { from { transform: scale(.9); opacity: 0; } }
.center { text-align: center; }
.result-title { font-size: 44px; font-weight: 900; font-style: italic; margin: 10px 0 2px; text-align: center; }
.stars { font-size: 34px; color: var(--gold); text-align: center; letter-spacing: 7px; }
.stars i { font-style: normal; color: #2c3a58; }

.list-row { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.list-row > div { flex: 1; min-width: 0; }
.list-row b { font-size: 14px; }
.bar { height: 4px; background: rgba(255, 255, 255, .1); margin-top: 5px; }
.bar i { display: block; height: 100%; background: var(--accent); }
input[type=range] { width: 150px; touch-action: none; accent-color: var(--accent); }
textarea { width: 100%; height: 76px; background: #081022; color: var(--text); border: 1px solid var(--line); font-size: 11px; touch-action: pan-y; user-select: text; -webkit-user-select: text; }
.switch { width: 50px; height: 28px; border-radius: 14px; background: #1c2c4e; position: relative; flex: none; }
.switch::after { content: ''; position: absolute; left: 3px; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: #8ea3c6; transition: left .12s; }
.switch.on { background: #2b8fd8; }
.switch.on::after { left: 25px; background: #fff; }
@media (min-width: 520px) { .stages { grid-template-columns: 1fr 1fr 1fr 1fr; } .stage { flex-direction: column; text-align: center; } }
@media (prefers-reduced-motion: reduce) { .hero img, .card, .toast { animation: none; } }