/* sizes use --px (screen pixels per game pixel) so the whole UI scales with the 288x512 playfield */
:root { --px: 2; --ink: #e8ecff; --gold: #ffd23a; --blue: #3a8aff; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; color: var(--ink); font-family: Nunito, "Noto Sans TC", "Microsoft JhengHei", sans-serif; -webkit-user-select: none; user-select: none; }
#stage { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); overflow: hidden; background: #0a0e22; }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; }
#touchArea { position: absolute; inset: 0; touch-action: none; }
button { font: inherit; cursor: pointer; color: inherit; touch-action: manipulation; }
[hidden] { display: none !important; }
.grow { flex: 1; }
.px { font-family: "Press Start 2P", monospace; }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; }
#hud button { pointer-events: auto; }
#hudTop { display: flex; align-items: center; gap: calc(var(--px) * 5px); padding: calc(var(--px) * 4px); font-family: "Press Start 2P", monospace; font-size: calc(var(--px) * 6px); text-shadow: 0 0 calc(var(--px) * 2px) #000; }
#hp { display: flex; gap: calc(var(--px) * 1.5px); align-items: center; }
#hp i { width: calc(var(--px) * 6px); height: calc(var(--px) * 6px); background: #3a1a2a; clip-path: polygon(50% 100%, 0 40%, 15% 5%, 50% 25%, 85% 5%, 100% 40%); }
#hp i.on { background: #ff4a7a; }
#hp .sh { font-size: calc(var(--px) * 6px); margin-left: calc(var(--px) * 2px); }
#pow { color: #ff7a6a; }
#cr { color: var(--gold); }
#bPause { border: 0; background: rgba(255, 255, 255, .15); border-radius: calc(var(--px) * 3px); width: calc(var(--px) * 14px); height: calc(var(--px) * 14px); font-size: calc(var(--px) * 7px); padding: 0; }
#bossBar { position: absolute; left: calc(var(--px) * 10px); right: calc(var(--px) * 10px); top: calc(var(--px) * 22px); font-size: calc(var(--px) * 6px); font-weight: 900; text-shadow: 0 0 3px #000; }
#bossBar div { height: calc(var(--px) * 4px); background: rgba(80, 0, 20, .7); border: 1px solid #ff9aaa; margin-top: calc(var(--px) * 1.5px); }
#bossBar i { display: block; height: 100%; background: linear-gradient(90deg, #ff3a4a, #ffb03a); transition: width .1s; }
#hudBot { position: absolute; right: calc(var(--px) * 6px); bottom: calc(var(--px) * 8px); display: flex; gap: calc(var(--px) * 5px); align-items: flex-end; }
#bSkill, #bBomb { border: calc(var(--px) * 1px) solid rgba(255, 255, 255, .5); background: rgba(10, 14, 34, .6); border-radius: 50%; width: calc(var(--px) * 34px); height: calc(var(--px) * 34px); font-size: calc(var(--px) * 13px); position: relative; padding: 0; }
#bBomb { width: calc(var(--px) * 26px); height: calc(var(--px) * 26px); font-size: calc(var(--px) * 10px); }
#bBomb b { position: absolute; right: calc(var(--px) * -2px); bottom: calc(var(--px) * -2px); font-size: calc(var(--px) * 6px); font-family: "Press Start 2P", monospace; background: #e8322c; border-radius: calc(var(--px) * 3px); padding: calc(var(--px) * 1px); }
#bBomb.none { opacity: .35; }
#bSkill span { position: absolute; left: 12%; right: 12%; bottom: calc(var(--px) * -5px); height: calc(var(--px) * 3px); background: #1a1d3a; border-radius: 9px; overflow: hidden; }
#bSkill i { display: block; height: 100%; background: linear-gradient(90deg, #3a8aff, #8af0ff); }
#bSkill.ready { border-color: var(--gold); color: var(--gold); box-shadow: 0 0 calc(var(--px) * 6px) var(--gold); animation: pulse .8s infinite; }
#bSkill.active { border-color: #fff; color: #fff; background: rgba(255, 255, 255, .3); }
@keyframes pulse { 50% { transform: scale(1.08); } }
body:not(.touch) #bSkill, body:not(.touch) #bBomb { opacity: .75; }
#flash { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
#flash.on { animation: fl .35s ease-out; }
@keyframes fl { 0% { opacity: .45; } 100% { opacity: 0; } }
#warn { position: absolute; left: 0; right: 0; top: 40%; text-align: center; opacity: 0; pointer-events: none; }
#warn b { display: block; font-family: "Press Start 2P", monospace; font-size: calc(var(--px) * 18px); color: #ff3a4a; text-shadow: 0 0 calc(var(--px) * 4px) #ff0000; background: repeating-linear-gradient(-45deg, rgba(255, 210, 58, .25) 0 8px, transparent 8px 16px); padding: calc(var(--px) * 6px) 0; }
#warn small { font-size: calc(var(--px) * 7px); font-weight: 900; }
#warn.on { animation: warn 2.6s steps(1) forwards; }
@keyframes warn { 0%, 20%, 40%, 60%, 80% { opacity: 1; } 10%, 30%, 50%, 70% { opacity: .2; } 100% { opacity: 0; } }
#toast { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); font-weight: 900; font-size: calc(var(--px) * 8px); color: #fff; text-shadow: 0 0 calc(var(--px) * 3px) #000, 0 0 2px #000; opacity: 0; transition: opacity .2s; pointer-events: none; white-space: nowrap; }
#toast.on { opacity: 1; }

/* ---------- screens ---------- */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: calc(var(--px) * 10px); }
button.big { border: 0; background: linear-gradient(#ff6a4a, #e8322c); color: #fff; font-weight: 900; font-size: calc(var(--px) * 10px); padding: calc(var(--px) * 6px) calc(var(--px) * 16px); border-radius: calc(var(--px) * 6px); box-shadow: 0 calc(var(--px) * 2px) 0 #8a1a10; }
button.big:active { transform: translateY(2px); box-shadow: none; }
#title { justify-content: center; gap: calc(var(--px) * 14px); background: radial-gradient(ellipse at 50% 30%, rgba(58, 138, 255, .25), transparent 60%); }
.logo { text-align: center; margin-top: -30%; }
.logo h1 { margin: 0; font-size: calc(var(--px) * 30px); font-weight: 900; color: #fff; text-shadow: 0 calc(var(--px) * 2px) 0 #3a8aff, 0 0 calc(var(--px) * 10px) #3a8aff; letter-spacing: 2px; }
.logo h2 { margin: calc(var(--px) * 2px) 0 0; font-family: "Press Start 2P", monospace; font-size: calc(var(--px) * 9px); color: var(--gold); }
.tbtns { display: flex; flex-direction: column; gap: calc(var(--px) * 6px); align-items: center; }
.tbtns button:not(.big), #pause button:not(.big) { border: 1px solid rgba(255, 255, 255, .4); background: rgba(10, 14, 34, .7); border-radius: calc(var(--px) * 5px); padding: calc(var(--px) * 4px) calc(var(--px) * 12px); font-weight: 800; font-size: calc(var(--px) * 7px); }
.ctl { font-size: calc(var(--px) * 5.5px); opacity: .7; text-align: center; max-width: 92%; position: absolute; bottom: calc(var(--px) * 8px); }

#hangar { background: rgba(6, 8, 20, .82); padding: calc(var(--px) * 6px); gap: calc(var(--px) * 4px); }
.htop { display: flex; align-items: center; gap: calc(var(--px) * 3px); width: 100%; }
.htop h2 { margin: 0; font-size: calc(var(--px) * 10px); }
.htop .cr { color: var(--gold); font-weight: 900; font-size: calc(var(--px) * 8px); margin-left: calc(var(--px) * 4px); }
.htop button { border: 0; background: rgba(255, 255, 255, .12); border-radius: calc(var(--px) * 3px); padding: calc(var(--px) * 2px) calc(var(--px) * 4px); font-size: calc(var(--px) * 6px); font-weight: 800; }
#tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--px) * 2px); width: 100%; }
#tabs button { border: 0; border-radius: calc(var(--px) * 3px); background: rgba(255, 255, 255, .1); padding: calc(var(--px) * 3.5px) 0; font-weight: 900; font-size: calc(var(--px) * 6.5px); }
#tabs button.sel { background: var(--blue); }
#panel { flex: 1; width: 100%; overflow: auto; display: flex; flex-direction: column; gap: calc(var(--px) * 3px); padding-right: 2px; }
#hLaunch { width: 100%; display: flex; flex-direction: column; align-items: center; }
#hLaunch small { font-size: calc(var(--px) * 5.5px); font-weight: 800; opacity: .9; }
.mission { display: flex; gap: calc(var(--px) * 4px); align-items: center; text-align: left; border: 1px solid rgba(255, 255, 255, .15); background: linear-gradient(90deg, color-mix(in srgb, var(--a) 35%, transparent), rgba(10, 14, 34, .6)); border-radius: calc(var(--px) * 4px); padding: calc(var(--px) * 4px); }
.mission.sel { border-color: var(--g); box-shadow: 0 0 calc(var(--px) * 4px) var(--g); }
.mission:disabled { opacity: .45; }
.mission .num { font-family: "Press Start 2P", monospace; font-size: calc(var(--px) * 12px); color: var(--g); width: calc(var(--px) * 16px); text-align: center; }
.mission .mt { flex: 1; display: flex; flex-direction: column; }
.mission b { font-size: calc(var(--px) * 7.5px); }
.mission small { font-size: calc(var(--px) * 5.5px); opacity: .85; }
.mission .boss { color: #ff9aaa; font-weight: 800; }
.mission .st { font-size: calc(var(--px) * 5px); text-align: right; }
.pilot { display: flex; gap: calc(var(--px) * 4px); border: 1px solid rgba(255, 255, 255, .15); border-left: calc(var(--px) * 2px) solid var(--c); background: rgba(10, 14, 34, .6); border-radius: calc(var(--px) * 4px); padding: calc(var(--px) * 4px); }
.pilot.sel { background: color-mix(in srgb, var(--c) 22%, rgba(10, 14, 34, .8)); box-shadow: 0 0 calc(var(--px) * 4px) var(--c); }
.pilot .ph { display: flex; flex-direction: column; gap: calc(var(--px) * 2px); }
.pilot .ph img, .pilot .ph canvas { width: calc(var(--px) * 30px); height: calc(var(--px) * 30px); image-rendering: pixelated; border-radius: calc(var(--px) * 2px); }
.pilot .pt { flex: 1; font-size: calc(var(--px) * 5.5px); }
.pilot .pt b { font-size: calc(var(--px) * 8px); color: var(--c); }
.pilot .pt p { margin: calc(var(--px) * 1.5px) 0; line-height: 1.35; }
.pilot .pt i { font-style: normal; font-weight: 900; color: var(--gold); margin-right: 4px; }
.pilot button { border: 0; border-radius: calc(var(--px) * 3px); background: var(--c); padding: calc(var(--px) * 2px) calc(var(--px) * 6px); font-weight: 900; font-size: calc(var(--px) * 6px); }
.row { display: flex; align-items: center; gap: calc(var(--px) * 4px); border: 1px solid rgba(255, 255, 255, .15); background: rgba(10, 14, 34, .6); border-radius: calc(var(--px) * 4px); padding: calc(var(--px) * 4px); }
.row .ic { font-size: calc(var(--px) * 13px); }
.row .rt { flex: 1; display: flex; flex-direction: column; }
.row b { font-size: calc(var(--px) * 7px); }
.row small { font-size: calc(var(--px) * 5.5px); opacity: .85; }
.row .own { color: #8af0ff; }
.pips { display: flex; gap: calc(var(--px) * 1.5px); margin-top: calc(var(--px) * 1.5px); }
.pips i { width: calc(var(--px) * 8px); height: calc(var(--px) * 3px); background: #2a2e4a; }
.pips i.on { background: var(--gold); }
.row button { border: 0; border-radius: calc(var(--px) * 3px); background: linear-gradient(#ffe07a, #ffb02a); color: #3a2400; font-weight: 900; padding: calc(var(--px) * 3px) calc(var(--px) * 5px); font-size: calc(var(--px) * 6.5px); }
.row button.poor { filter: grayscale(1); opacity: .5; }
.maxed { font-family: "Press Start 2P", monospace; font-size: calc(var(--px) * 6px); color: var(--gold); }

#result, #ending { background: rgba(6, 8, 20, .82); justify-content: center; gap: calc(var(--px) * 8px); }
#rTitle { font-size: calc(var(--px) * 15px); margin: 0; }
#rTitle.win { color: var(--gold); } #rTitle.lose { color: #ff7a8a; }
#rBody { width: 80%; font-size: calc(var(--px) * 7px); }
#rBody div { display: flex; justify-content: space-between; border-bottom: 1px dashed rgba(255, 255, 255, .2); padding: calc(var(--px) * 2px) 0; }
#rBody b { color: var(--gold); }
#rBody p { font-size: calc(var(--px) * 6px); opacity: .8; }
#ending h2 { font-family: "Press Start 2P", monospace; font-size: calc(var(--px) * 12px); color: var(--gold); margin: 0; }
#ending p { font-size: calc(var(--px) * 8px); font-weight: 900; }
.crew { display: flex; gap: calc(var(--px) * 3px); }
.crew img { width: calc(var(--px) * 34px); height: calc(var(--px) * 34px); image-rendering: pixelated; border-radius: calc(var(--px) * 3px); border: 1px solid rgba(255, 255, 255, .3); }

#pause, #help { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); display: flex; align-items: center; justify-content: center; }
#pause .box, #help .box { background: #10142a; border: 1px solid rgba(255, 255, 255, .3); border-radius: calc(var(--px) * 6px); padding: calc(var(--px) * 10px); display: flex; flex-direction: column; gap: calc(var(--px) * 6px); align-items: center; width: 82%; position: relative; }
#help .box { align-items: stretch; font-size: calc(var(--px) * 6.5px); max-height: 86%; overflow: auto; }
#help p { margin: calc(var(--px) * 2px) 0; line-height: 1.45; }
#help .x { position: absolute; right: calc(var(--px) * 4px); top: calc(var(--px) * 4px); border: 0; background: none; font-size: calc(var(--px) * 9px); }
#pause h2, #help h2 { margin: 0; font-size: calc(var(--px) * 11px); }

/* ---------- dialogue ---------- */
#dialog { position: absolute; left: calc(var(--px) * 4px); right: calc(var(--px) * 4px); bottom: calc(var(--px) * 6px); min-height: calc(var(--px) * 70px); display: flex; gap: calc(var(--px) * 5px); align-items: flex-start; background: rgba(8, 12, 30, .92); border: calc(var(--px) * 1px) solid #8ab4ff; border-radius: calc(var(--px) * 5px); padding: calc(var(--px) * 5px); cursor: pointer; animation: dlg .2s ease; }
#dialog.foe { border-color: #ff6a7a; background: rgba(30, 6, 14, .92); }
@keyframes dlg { from { transform: translateY(20px); opacity: 0; } }
#dImg { width: calc(var(--px) * 44px); height: calc(var(--px) * 44px); image-rendering: pixelated; border-radius: calc(var(--px) * 3px); border: 1px solid rgba(255, 255, 255, .3); flex: none; }
#dialog .dt { flex: 1; }
#dName { display: block; color: var(--gold); font-size: calc(var(--px) * 7px); margin-bottom: calc(var(--px) * 2px); }
#dialog.foe #dName { color: #ff8a9a; }
#dText { margin: 0; font-size: calc(var(--px) * 7.5px); line-height: 1.5; font-weight: 800; min-height: 3em; }
#dSkip { position: absolute; right: calc(var(--px) * 3px); top: calc(var(--px) * -12px); border: 0; background: rgba(8, 12, 30, .9); border-radius: calc(var(--px) * 3px); font-size: calc(var(--px) * 5.5px); font-weight: 800; padding: calc(var(--px) * 1.5px) calc(var(--px) * 4px); }
.coin { display: inline-block; width: calc(var(--px) * 6px); height: calc(var(--px) * 6px); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6a0, #ffc83a 55%, #b07a10); margin-right: calc(var(--px) * 2px); vertical-align: -10%; }
body.clean #warn, body.clean #dialog, body.clean #toast, body.clean #hudBot { display: none !important; }