* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; font-family: "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; color: #e8f1f5; user-select: none; }
#game { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(100vw, calc(100vh * 16 / 9)); height: min(100vh, calc(100vw * 9 / 16)); overflow: hidden; background: #0b141a; cursor: none; font-size: calc(min(100vw, calc(100vh * 16 / 9)) / 100); }
#gl, #overlay { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#overlay { pointer-events: none; }
.hidden { display: none !important; }

/* HUD (font sizes in em relative to #game = 1% of width => 19.2px at 1920) */
#hud { position: absolute; inset: 0; pointer-events: none; }
#hud-top { position: absolute; top: 1.2em; left: 1.2em; display: flex; gap: 0.8em; }
.hud-box { background: rgba(8, 20, 28, 0.62); border: 1px solid rgba(160, 220, 255, 0.25); padding: 0.35em 0.9em; border-radius: 0.4em; font-size: 1.05em; backdrop-filter: blur(3px); }
.hud-box .lbl { opacity: 0.7; font-size: 0.8em; margin-right: 0.3em; }
.hud-box b { font-size: 1.25em; color: #fff; }
#coin-box b { color: #ffd76a; }
#boss-bar { position: absolute; top: 1.2em; left: 50%; transform: translateX(-50%); width: 36em; text-align: center; }
#boss-bar .name { font-size: 1.1em; letter-spacing: 0.15em; color: #ff8b6b; text-shadow: 0 0 0.5em #f30; margin-bottom: 0.2em; font-weight: bold; }
.bar { height: 0.9em; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.3); border-radius: 0.5em; overflow: hidden; }
.fill { height: 100%; width: 100%; background: linear-gradient(90deg, #ff4b2b, #ffb347); transition: width 0.15s; }
#wall-bar { position: absolute; left: 1.2em; bottom: 1.4em; width: 22em; }
#wall-bar .name { font-size: 0.85em; opacity: 0.8; margin-bottom: 0.25em; }
#wall-bar .fill { background: linear-gradient(90deg, #3dd6a0, #7ff3ff); }
#wall-bar.low .fill { background: linear-gradient(90deg, #ff3b3b, #ff9d3b); }
#wall-num { position: absolute; right: -2.8em; bottom: -0.2em; font-size: 1.3em; }
#weapons { position: absolute; right: 1.2em; bottom: 1.4em; display: flex; gap: 0.6em; }
.wpn { width: 9.5em; background: rgba(8, 20, 28, 0.62); border: 1px solid rgba(160, 220, 255, 0.25); border-radius: 0.5em; padding: 0.45em 0.6em; font-size: 0.9em; opacity: 0.55; position: relative; }
.wpn.on { opacity: 1; border-color: #ffd76a; box-shadow: 0 0 0.8em rgba(255, 215, 106, 0.45); }
.wpn.locked { opacity: 0.25; }
.wpn .k { position: absolute; top: 0.3em; right: 0.5em; font-size: 0.8em; opacity: 0.7; }
.wpn .nm { font-weight: bold; font-size: 1.05em; }
.wpn .lv { font-size: 0.8em; color: #ffd76a; }
.wpn .cd { height: 0.35em; background: rgba(255,255,255,0.15); border-radius: 0.2em; margin-top: 0.35em; overflow: hidden; }
.wpn .cd i { display: block; height: 100%; background: #7ff3ff; width: 100%; }
.wpn .cd i.hot { background: #ff6a3b; }
#banner { position: absolute; top: 17%; left: 0; right: 0; text-align: center; font-size: 3.2em; font-weight: 900; letter-spacing: 0.08em; text-shadow: 0 0 0.4em rgba(0,0,0,0.9), 0 0 1em rgba(255,80,40,0.6); opacity: 0; transition: opacity 0.4s; }
#banner.show { opacity: 1; }
#banner small { display: block; font-size: 0.4em; font-weight: normal; letter-spacing: 0.02em; margin-top: 0.4em; }
#hint { position: absolute; bottom: 0.4em; left: 50%; transform: translateX(-50%); font-size: 0.75em; opacity: 0.55; white-space: nowrap; }
#demo-tag { position: absolute; top: 4.5em; left: 1.2em; color: #ffd76a; font-weight: bold; font-size: 1em; animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: 0.35; } }

/* Screens */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: radial-gradient(ellipse at center, rgba(6, 18, 26, 0.55), rgba(0, 0, 0, 0.85)); cursor: default; z-index: 5; }
#title { background: linear-gradient(180deg, rgba(5,12,18,0.15), rgba(3,8,12,0.75)); }
h1 { font-size: 5.4em; margin: 0 0 0.15em; letter-spacing: 0.12em; font-weight: 900; color: #f2f7f9; text-shadow: 0 0.06em 0 #1b3a48, 0 0 0.5em rgba(120, 220, 255, 0.45); }
h1.red { color: #ff6b4a; text-shadow: 0 0 0.5em rgba(255, 60, 30, 0.6); }
h2 { font-size: 2.6em; margin: 0 0 0.3em; }
.sub { font-size: 1.25em; line-height: 1.6; opacity: 0.9; margin: 0.3em 0 1.2em; }
.btns { display: flex; gap: 1em; justify-content: center; margin: 0.8em 0; }
button { font: inherit; font-size: 1.15em; padding: 0.6em 1.5em; border-radius: 0.45em; border: 1px solid rgba(160, 220, 255, 0.5); background: rgba(20, 50, 66, 0.85); color: #fff; cursor: pointer; transition: transform 0.08s, background 0.15s; }
button:hover { background: rgba(40, 96, 124, 0.95); transform: translateY(-1px); }
button.big { font-size: 1.4em; background: linear-gradient(180deg, #e9a43b, #c26a12); border-color: #ffd76a; font-weight: bold; }
button.big:hover { background: linear-gradient(180deg, #f6b852, #d97c1d); }
button:disabled { opacity: 0.4; cursor: default; transform: none; }
.howto { display: grid; grid-template-columns: repeat(3, auto); gap: 0.45em 2.2em; font-size: 1em; margin-top: 1.2em; background: rgba(0,0,0,0.35); padding: 0.9em 1.6em; border-radius: 0.6em; text-align: left; }
.howto b { color: #ffd76a; margin-right: 0.5em; }
.note { font-size: 0.95em; opacity: 0.8; max-width: 52em; line-height: 1.6; }
#loading { margin-top: 0.8em; font-size: 0.9em; opacity: 0.7; }

#shop-cards { display: grid; grid-template-columns: repeat(5, 13.5em); gap: 1em; margin: 0.4em 0 1em; }
.card { background: rgba(10, 28, 38, 0.92); border: 1px solid rgba(160, 220, 255, 0.35); border-radius: 0.7em; padding: 1em 0.9em; text-align: left; display: flex; flex-direction: column; gap: 0.4em; min-height: 15em; }
.card h3 { margin: 0; font-size: 1.25em; }
.card .lvl { color: #ffd76a; font-size: 0.95em; }
.card .desc { font-size: 0.9em; opacity: 0.85; flex: 1; line-height: 1.5; }
.card .next { font-size: 0.85em; color: #7ff3ff; }
.card button { font-size: 1em; padding: 0.5em 0.6em; }
.card.max { opacity: 0.6; }

.quiz-card { width: 54em; background: linear-gradient(180deg, rgba(14, 36, 48, 0.97), rgba(8, 20, 28, 0.97)); border: 2px solid #ffd76a; border-radius: 1em; padding: 1.6em 2em; box-shadow: 0 0 3em rgba(255, 215, 106, 0.25); }
.quiz-head { display: flex; justify-content: space-between; font-size: 1em; margin-bottom: 0.8em; }
#quiz-tag { background: #ffd76a; color: #1a2a33; font-weight: bold; padding: 0.15em 0.8em; border-radius: 1em; }
#quiz-why { opacity: 0.8; }
#quiz-q { font-size: 1.75em; line-height: 1.5; margin: 0.4em 0 1em; font-weight: bold; white-space: pre-line; }
#quiz-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8em; }
#quiz-opts button { font-size: 1.3em; text-align: left; padding: 0.7em 1em; }
#quiz-opts button .n { display: inline-block; width: 1.6em; height: 1.6em; line-height: 1.6em; text-align: center; border-radius: 50%; background: rgba(255,255,255,0.15); margin-right: 0.6em; font-size: 0.8em; }
#quiz-opts button.correct { background: #1f8a5a; border-color: #7fffbf; }
#quiz-opts button.wrong { background: #8a2b1f; border-color: #ff8b6b; }
#quiz-feedback { margin-top: 1em; font-size: 1.2em; line-height: 1.6; padding: 0.7em 1em; border-radius: 0.5em; background: rgba(0,0,0,0.3); }
#quiz-feedback.ok { color: #9dffcf; }
#quiz-feedback.no { color: #ffb4a0; }
#quiz-opts button:disabled { opacity: 0.45; }
/* 분수: 분자 위·분모 아래(quiz.js fracHTML) */
.frac { display: inline-flex; flex-direction: column; align-items: stretch; vertical-align: middle; text-align: center; font-size: 0.95em; line-height: 1.12; margin: 0 0.15em; }
.frac > span { padding: 0.02em 0.22em; }
.frac > span:first-child { border-bottom: 0.08em solid currentColor; }
.mixed { white-space: nowrap; }
.mixed .frac { margin-left: 0.06em; }
#quiz-opts button.correct:disabled, #quiz-opts button.wrong:disabled { opacity: 1; }
.diff { margin-top: 0.4em; font-size: 1em; display: flex; gap: 0.5em; align-items: center; }
.dbtn { font-size: 0.95em; padding: 0.3em 1em; opacity: 0.6; }
.dbtn.on { opacity: 1; border-color: #ffd76a; color: #ffd76a; }
.review { max-width: 60em; max-height: 14em; overflow-y: auto; text-align: left; background: rgba(0,0,0,0.4); border-radius: 0.6em; padding: 0.7em 1.2em; margin-bottom: 0.6em; font-size: 0.95em; line-height: 1.5; }
.review h4 { margin: 0 0 0.4em; color: #ffd76a; }
.review .it { margin-bottom: 0.5em; }
.review .it b { color: #9dffcf; }
.review .tag { display: inline-block; background: rgba(255,215,106,0.2); color: #ffd76a; border-radius: 1em; padding: 0 0.6em; margin-right: 0.4em; font-size: 0.85em; }
#best { margin-top: 0.6em; color: #ffd76a; font-size: 1em; }

/* ── v2 화면들 ── */
#title { background: #05090c; padding: 0; }
#title-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: saturate(1.05); }
#title-bg.noimg { background: linear-gradient(180deg, rgba(5,12,18,0.1), rgba(3,8,12,0.6)); }
#title-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, rgba(0,0,0,0.05), rgba(0,0,0,0.55) 80%), linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%); }
.title-inner { position: relative; display: flex; flex-direction: column; align-items: center; margin-top: -4em; }
.btns.col { flex-direction: column; gap: 0.7em; margin-top: 1em; }
button.wide { width: 14em; font-size: 1.5em; letter-spacing: 0.15em; font-weight: bold; }
button.ghost { margin-top: 1.4em; background: transparent; border-color: rgba(255,255,255,0.25); font-size: 0.95em; opacity: 0.75; }
button.danger { background: rgba(120, 30, 20, 0.8); border-color: #ff8b6b; }
button.back { background: rgba(10, 20, 26, 0.85); }

.menu-cards { display: flex; gap: 2.4em; margin: 1.2em 0 1.6em; }
.menu-card { width: 24em; padding: 2em 1.6em; border-radius: 1em; background: linear-gradient(180deg, rgba(20, 52, 68, 0.92), rgba(8, 20, 28, 0.94)); border: 2px solid rgba(160, 220, 255, 0.35); cursor: pointer; transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s; }
.menu-card:hover { transform: translateY(-4px); border-color: #ffd76a; box-shadow: 0 0 2em rgba(255, 215, 106, 0.3); }
.menu-card .ic { font-size: 4em; }
.menu-card h3 { font-size: 2em; margin: 0.3em 0; }
.menu-card p { opacity: 0.85; line-height: 1.6; }
.coinline { font-size: 1.2em; } .coinline b { color: #ffd76a; }

#loadout { display: flex; gap: 1em; align-items: center; margin-bottom: 1em; background: rgba(0,0,0,0.35); padding: 0.5em 1.2em; border-radius: 0.6em; }
#loadout img { height: 3.2em; border-radius: 0.3em; }
#stage-cards { display: grid; grid-template-columns: repeat(3, 22em); gap: 1.1em; margin-bottom: 1em; }
.stage { position: relative; text-align: left; padding: 1em 1.2em; border-radius: 0.8em; background: rgba(10, 28, 38, 0.92); border: 1px solid rgba(160, 220, 255, 0.35); cursor: pointer; min-height: 11em; transition: transform 0.1s, border-color 0.1s; }
.stage:hover { transform: translateY(-2px); border-color: #ffd76a; }
.stage .no { font-size: 0.85em; color: #7ff3ff; letter-spacing: 0.1em; }
.stage h3 { margin: 0.15em 0 0.2em; font-size: 1.45em; }
.stage .s2 { opacity: 0.8; font-size: 0.9em; }
.stage .stars { color: #ffb347; margin-top: 0.4em; letter-spacing: 0.1em; }
.stage .boss { margin-top: 0.4em; font-size: 0.9em; color: #ff9a7a; }
.stage .badge { position: absolute; top: 0.8em; right: 0.9em; font-size: 0.8em; padding: 0.15em 0.6em; border-radius: 1em; background: #1f8a5a; }
.stage.locked { filter: grayscale(1) brightness(0.45); cursor: default; }
.stage.locked:hover { transform: none; border-color: rgba(160, 220, 255, 0.35); }
.stage.endless { background: linear-gradient(135deg, rgba(60, 20, 70, 0.92), rgba(10, 20, 40, 0.92)); }

.hangar-head { display: flex; align-items: center; gap: 2em; margin-bottom: 0.6em; }
.hangar-head h2 { margin: 0; }
.tabs { display: flex; gap: 0.4em; }
.tab { font-size: 1.15em; padding: 0.45em 1.6em; opacity: 0.6; }
.tab.on { opacity: 1; border-color: #ffd76a; color: #ffd76a; }
.hangar-body { display: flex; gap: 1.2em; align-items: stretch; height: 34em; }
#veh-list { width: 15em; display: flex; flex-direction: column; gap: 0.5em; overflow-y: auto; }
.vcard { display: flex; gap: 0.6em; align-items: center; padding: 0.35em 0.5em; border-radius: 0.6em; background: rgba(10, 28, 38, 0.9); border: 1px solid rgba(160, 220, 255, 0.25); cursor: pointer; text-align: left; }
.vcard img { width: 5.5em; height: 3.4em; object-fit: cover; border-radius: 0.3em; background: #0b1419; }
.vcard .t { font-weight: bold; } .vcard .r { font-size: 0.75em; opacity: 0.75; }
.vcard.on { border-color: #ffd76a; box-shadow: 0 0 0.8em rgba(255, 215, 106, 0.35); }
.vcard.locked { filter: grayscale(1) brightness(0.55); }
.vcard .sel { font-size: 0.7em; color: #7fffbf; }
.preview-wrap { position: relative; flex: 1; border-radius: 0.8em; overflow: hidden; background: radial-gradient(ellipse at 50% 35%, #2a3d48, #0a1217 75%); border: 1px solid rgba(160, 220, 255, 0.2); }
#preview { width: 100%; height: 100%; display: block; }
#veh-title { position: absolute; left: 1em; top: 0.8em; right: 1em; text-align: left; pointer-events: none; }
#veh-title h3 { margin: 0; font-size: 1.9em; } #veh-title .role { color: #ffd76a; } #veh-title p { opacity: 0.85; max-width: 30em; line-height: 1.5; }
#veh-panel { width: 25em; overflow-y: auto; text-align: left; background: rgba(8, 20, 28, 0.85); border-radius: 0.8em; padding: 0.9em 1.1em; border: 1px solid rgba(160, 220, 255, 0.2); }
.statrow { display: grid; grid-template-columns: 5.5em 1fr 4.5em; align-items: center; gap: 0.5em; margin: 0.25em 0; font-size: 0.95em; }
.statbar { height: 0.6em; background: rgba(255,255,255,0.1); border-radius: 0.3em; overflow: hidden; position: relative; }
.statbar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #3dd6a0, #7ff3ff); }
.statbar i.nx { background: rgba(255, 215, 106, 0.55); }
.statrow b { text-align: right; }
.partrow { margin: 0.55em 0; padding: 0.55em 0.6em; border-radius: 0.5em; background: rgba(255,255,255,0.04); }
.partrow .ph { display: flex; justify-content: space-between; align-items: center; }
.pips { letter-spacing: 0.1em; color: #ffd76a; }
.partrow .lk { font-size: 0.78em; opacity: 0.7; margin: 0.2em 0 0.35em; }
.partrow button { font-size: 0.9em; padding: 0.35em 0.8em; width: 100%; }
.panel-actions { display: flex; gap: 0.5em; margin: 0.6em 0; }
.panel-actions button { flex: 1; font-size: 1em; padding: 0.5em; }
#hangar-s { flex-direction: column; }
#slot-row { display: flex; gap: 0.8em; align-items: center; }
.slot { width: 12em; height: 4.2em; border-radius: 0.6em; border: 2px dashed rgba(160, 220, 255, 0.35); display: flex; align-items: center; gap: 0.5em; padding: 0.3em; font-size: 0.9em; }
.slot img { height: 100%; border-radius: 0.3em; }
.slot.lockedslot { opacity: 0.4; }
#sup-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.7em; overflow-y: auto; }
.scard { background: rgba(10, 28, 38, 0.92); border: 1px solid rgba(160, 220, 255, 0.25); border-radius: 0.6em; padding: 0.5em; text-align: left; font-size: 0.85em; display: flex; flex-direction: column; gap: 0.25em; }
.scard img { width: 100%; height: 6em; object-fit: cover; border-radius: 0.4em; background: #0b1419; }
.scard .t { font-weight: bold; font-size: 1.05em; }
.scard .d { opacity: 0.75; min-height: 2.4em; }
.scard .st { color: #7ff3ff; }
.scard button { font-size: 0.85em; padding: 0.3em 0.4em; }
.scard.locked img { filter: grayscale(1) brightness(0.45); }
.scard.locked .t, .scard.locked .d { opacity: 0.5; }
.scard.eq { border-color: #7fffbf; box-shadow: 0 0 0.6em rgba(127, 255, 191, 0.3); }

.opt-grid { display: grid; grid-template-columns: 10em 22em; gap: 0.9em 1.4em; align-items: center; text-align: left; font-size: 1.1em; margin-bottom: 1em; }
.opt-grid input[type=range] { width: 100%; accent-color: #ffd76a; }
.toggle.on { opacity: 1; border-color: #ffd76a; color: #ffd76a; }
#title .title-inner { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 3.2em 0 2.6em; }
#title .t-top { text-align: center; }
#title .t-bot { display: flex; flex-direction: column; align-items: center; }
#title h1 { font-size: 6.2em; margin: 0; text-shadow: 0 0.05em 0 #1b1010, 0 0 0.4em rgba(0,0,0,0.9), 0 0 1.2em rgba(255, 120, 60, 0.45); }
#title .sub { font-size: 1.2em; text-shadow: 0 0 0.5em #000; margin: 0.2em 0 0; }
#title .btns.col { margin: 0; }
#title button.wide { box-shadow: 0 0.3em 1.2em rgba(0,0,0,0.6); }
#title #btn-option { background: rgba(10, 24, 32, 0.85); }
#title #best, #title #loading { text-shadow: 0 0 0.4em #000; }
#title #btn-demo { margin-top: 0.8em; }
#title .maker { font-size: 1.1em; letter-spacing: 0.18em; color: rgba(242, 217, 184, 0.85); text-shadow: 0 0 0.4em #000, 0 0 0.8em #000; margin: 0.7em 0 0; }
#title .copyright { position: absolute; left: 0; right: 0; bottom: 0.7em; margin: 0; padding: 0 1em; text-align: center; font-size: 0.88em; color: rgba(255, 255, 255, 0.6); text-shadow: 0 0 0.4em #000; pointer-events: none; }
#slot-row { justify-content: center; margin-bottom: 0.4em; }
#hangar-s { gap: 0.6em; }