:root {
  --bg: #04050d;
  --panel: rgba(7, 9, 22, 0.86);
  --panel2: rgba(14, 18, 40, 0.9);
  --line: rgba(130, 170, 255, 0.22);
  --line2: rgba(130, 170, 255, 0.4);
  --text: #e8ecff;
  --muted: #8f97c4;
  --cyan: #4fe3ff;
  --pink: #ff4fb8;
  --gold: #ffc23a;
  --green: #3dff9a;
  --red: #ff4a5a;
  --font: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", system-ui, sans-serif;
  --display: "Segoe UI Black", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); overflow: hidden; -webkit-tap-highlight-color: transparent; }
body { user-select: none; -webkit-user-select: none; }
#game { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; touch-action: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: 0.45; }
input, select { font: inherit; }
kbd { display: inline-block; min-width: 2.2em; padding: 0 0.35em; border: 1px solid var(--line2); border-radius: 5px; font: 700 11px/1.7 var(--font); text-align: center; color: var(--cyan); background: rgba(79, 227, 255, 0.07); }

/* ---------- screens ---------- */
/* Above the HUD (20): in a game only the pause overlay and the rotate prompt show here. */
#ui { position: fixed; inset: 0; pointer-events: none; z-index: 30; }
.screen { position: absolute; inset: 0; display: none; flex-direction: column; pointer-events: auto; overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, rgba(4, 5, 13, 0.25), rgba(4, 5, 13, 0.82) 70%); }
.screen.active { display: flex; }
#scr-title { background: radial-gradient(ellipse at 50% 45%, rgba(4, 5, 13, 0.05), rgba(4, 5, 13, 0.75) 75%); }
body.in-game #ui .screen { display: none; }

.bar-top { display: flex; align-items: center; gap: 12px; padding: calc(12px + var(--safe-t)) calc(18px + var(--safe-r)) 12px calc(18px + var(--safe-l)); background: linear-gradient(rgba(4, 5, 13, 0.92), rgba(4, 5, 13, 0.6)); border-bottom: 1px solid var(--line); flex-shrink: 0; }
.bar-top h2 { margin: 0; font: 900 22px/1 var(--display); letter-spacing: 0.04em; text-shadow: 0 0 14px rgba(79, 227, 255, 0.5); }
.spacer { flex: 1; }
.back, .chip, .screen button:not(.mbtn):not(.node):not(.stage-card):not(.hero-card):not(.hpick):not(.room-row):not(.dt):not(.hero-chip):not(.icon-btn):not(.ap) {
  padding: 9px 16px; border-radius: 10px; border: 1px solid var(--line2); background: rgba(20, 26, 60, 0.75); transition: 0.15s; }
.back:hover, .chip:hover, .screen button:not(:disabled):hover { border-color: var(--cyan); box-shadow: 0 0 14px rgba(79, 227, 255, 0.35); }
.primary, .screen button.primary { background: linear-gradient(135deg, #1a6bff, #00c6ff) !important; border-color: #7fe6ff !important; color: #fff; font-weight: 800; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); box-shadow: 0 0 18px rgba(0, 170, 255, 0.45); }
.danger { border-color: rgba(255, 74, 90, 0.6) !important; color: #ffb3bb; }
.chip { font-size: 13px; padding: 7px 12px !important; }
.muted { color: var(--muted); font-size: 13px; }
.warn { color: #ffcf6b; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }

/* class icons */
.ci { display: inline-block; width: 22px; height: 22px; background: var(--c, #fff); flex-shrink: 0; filter: drop-shadow(0 0 6px var(--c, #fff)); vertical-align: middle; }
.ci.sm { width: 14px; height: 14px; margin-right: 6px; }
.ci.lg { width: 34px; height: 34px; }
.ci.xl { width: 58px; height: 58px; }
.ci.c0 { clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); --c: #ffb82e; }
.ci.c1 { clip-path: polygon(50% 3%, 100% 95%, 0 95%); --c: #ff573d; }
.ci.c2 { clip-path: inset(8% round 18%); --c: #3dff99; }
.ci.c3 { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); --c: #57dbff; }

/* ---------- title ---------- */
.title-wrap { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6vw; padding: 24px; overflow: auto; }
.logo { text-align: center; }
.logo-main { font: italic 900 clamp(54px, 9vw, 128px)/0.9 var(--display); letter-spacing: 0.02em; }
.logo-main span { display: block; }
.logo-main .n1 { color: #e6fbff; text-shadow: 0 0 8px #4fe3ff, 0 0 30px #00b7ff, 0 0 70px #0088ff; }
.logo-main .n2 { color: #fff0fb; text-shadow: 0 0 8px #ff6fd0, 0 0 30px #ff2fa8, 0 0 70px #d0008a; margin-left: 0.6em; }
.logo-ko { margin-top: 14px; font-weight: 900; font-size: clamp(18px, 2.4vw, 30px); letter-spacing: 0.6em; text-indent: 0.6em; color: #fff; text-shadow: 0 0 14px rgba(255, 194, 58, 0.8); }
.tagline { margin: 12px 0 0; color: #c7ceff; font-size: clamp(14px, 1.6vw, 18px); }
.menu { display: flex; flex-direction: column; gap: 12px; width: min(380px, 90vw); }
.mbtn { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 16px 22px; border-radius: 14px; border: 1px solid var(--line2); background: linear-gradient(135deg, rgba(20, 30, 80, 0.85), rgba(10, 12, 32, 0.85)); text-align: left; transition: 0.15s; }
.mbtn b { font-size: 20px; font-weight: 900; }
.mbtn small { color: var(--muted); font-size: 13px; }
.mbtn:not(:disabled):hover { transform: translateX(4px); border-color: var(--cyan); box-shadow: 0 0 22px rgba(79, 227, 255, 0.35); }
.mbtn.solo { border-color: rgba(255, 150, 80, 0.55); }
.mbtn.online { border-color: rgba(255, 79, 184, 0.55); }
.mbtn.hangar { border-color: rgba(61, 255, 154, 0.5); }
.menu-row { display: flex; gap: 10px; }
.menu-row button { flex: 1; }
.menu-row .fs { flex: 0 0 auto; }
.profile { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; font-size: 13px; color: var(--muted); padding: 4px; }
.profile span { display: inline-flex; align-items: center; }
.hint { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 4px 0 0; }
.corner { position: absolute; right: calc(16px + var(--safe-r)); top: calc(14px + var(--safe-t)); display: flex; gap: 8px; }
.corner a { color: inherit; text-decoration: none; }
/* full-screen switch (fullscreen.js): corners point out to enter, in to leave */
.fs { display: inline-flex; align-items: center; justify-content: center; }
.fs-ic { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fs-ic .fs-back, .fs.on .fs-go { display: none; }
.fs.on .fs-back { display: inline; }

/* ---------- hangar ---------- */
.hangar { flex: 1; display: grid; grid-template-columns: 250px 300px 1fr; gap: 14px; padding: 14px calc(18px + var(--safe-r)) calc(14px + var(--safe-b)) calc(18px + var(--safe-l)); min-height: 0; }
.hero-list { display: flex; flex-direction: column; gap: 10px; overflow: auto; }
.hero-card { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); text-align: left; transition: 0.15s; }
.hero-card b { display: block; font-size: 16px; }
.hero-card small { color: var(--muted); font-size: 12px; }
.hero-card .lv { font-size: 12px; margin-top: 4px; color: #cfd6ff; }
.hero-card.sel { border-color: var(--c); box-shadow: 0 0 16px color-mix(in srgb, var(--c) 45%, transparent), inset 0 0 18px color-mix(in srgb, var(--c) 18%, transparent); }
.xpbar { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.1); overflow: hidden; margin-top: 4px; width: 150px; }
.xpbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--c, var(--cyan)), #fff); box-shadow: 0 0 8px var(--c, var(--cyan)); }
.xpbar.big { width: 100%; height: 9px; margin: 8px 0 4px; }
.hero-detail { padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); overflow: auto; }
.hd-head { display: flex; gap: 14px; align-items: center; margin-bottom: 10px; }
.hd-head h3 { margin: 0; font-size: 24px; color: var(--c); text-shadow: 0 0 12px var(--c); }
.hd-head p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.hd-head em { color: var(--text); font-style: normal; }
.skills { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 13px; line-height: 1.45; }
.skills li { display: flex; gap: 8px; align-items: flex-start; }
.skills kbd { flex-shrink: 0; margin-top: 1px; }
.tree { display: flex; flex-direction: column; min-height: 0; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); padding: 12px; }
.tree-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.tree-head b { font-size: 17px; color: var(--c); text-shadow: 0 0 10px var(--c); }
.tree-head small { color: var(--muted); flex: 1; }
.branches { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; overflow: auto; min-height: 0; }
.branch { display: flex; flex-direction: column; gap: 6px; }
.br-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; border-radius: 8px; background: linear-gradient(90deg, color-mix(in srgb, var(--b) 30%, transparent), transparent); border-left: 3px solid var(--b); }
.br-head b { color: var(--b); text-shadow: 0 0 8px var(--b); }
.tier { display: flex; flex-direction: column; gap: 6px; padding: 6px; border-radius: 10px; border: 1px dashed transparent; position: relative; }
.tier.shut { border-color: rgba(255, 255, 255, 0.08); }
.tier.shut .node { opacity: 0.4; }
.tier .need { font-size: 11px; color: var(--muted); text-align: center; }
.tier.capt { background: linear-gradient(180deg, color-mix(in srgb, var(--b) 10%, transparent), transparent); }
.node { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--line); background: rgba(12, 15, 36, 0.9); text-align: left; transition: 0.12s; }
.node b { font-size: 13px; }
.node .rk { position: absolute; right: 8px; top: 7px; font-size: 11px; color: var(--muted); font-weight: 700; }
.node small { font-size: 11.5px; color: #b5bde8; line-height: 1.35; padding-right: 16px; }
.node small.nx { color: #8fe9ff; }
.node.can { border-color: color-mix(in srgb, var(--b) 60%, transparent); }
.node.can:hover { box-shadow: 0 0 12px color-mix(in srgb, var(--b) 50%, transparent); transform: translateY(-1px); }
.node.has { border-color: var(--b); background: linear-gradient(135deg, color-mix(in srgb, var(--b) 22%, #0c0f24), #0c0f24); }
.node.has .rk { color: var(--b); }
.node.full { box-shadow: inset 0 0 12px color-mix(in srgb, var(--b) 35%, transparent); }
.node.cap { border-width: 2px; }
.node.cap.has { box-shadow: 0 0 18px color-mix(in srgb, var(--b) 60%, transparent), inset 0 0 14px color-mix(in srgb, var(--b) 30%, transparent); }
.node.capblock { opacity: 0.35; }
.node .minus { position: absolute; right: 6px; bottom: 5px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 900; background: rgba(255, 255, 255, 0.08); color: #ffb3bb; }
.node .minus:hover { background: rgba(255, 74, 90, 0.35); }
.node.shake { animation: shake 0.3s; }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* ---------- stages ---------- */
.diff-tabs { display: flex; gap: 6px; }
.dt { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(12, 15, 36, 0.8); }
.dt b { font-size: 16px; }
.dt span { font-size: 12px; color: var(--muted); }
.dt.sel.d0 { border-color: #5dff9d; box-shadow: 0 0 14px rgba(93, 255, 157, 0.4); }
.dt.sel.d1 { border-color: #4fe3ff; box-shadow: 0 0 14px rgba(79, 227, 255, 0.4); }
.dt.sel.d2 { border-color: #ff4a5a; box-shadow: 0 0 14px rgba(255, 74, 90, 0.45); }
.dt.sel span { color: var(--text); }
.stage-grid { flex: 1; display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: minmax(110px, 250px); align-content: center; gap: 12px; padding: 16px calc(18px + var(--safe-r)) 16px calc(18px + var(--safe-l)); overflow: auto; min-height: 0; }
.stage-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 4px; padding: 12px 14px; border-radius: 14px; text-align: left;
  border: 1px solid color-mix(in srgb, var(--g) 50%, transparent);
  background: radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--g) 30%, transparent), transparent 60%), linear-gradient(160deg, rgba(10, 12, 30, 0.92), rgba(5, 6, 16, 0.92)); transition: 0.15s; overflow: hidden; }
.stage-card .mini { position: absolute; left: 10%; right: 10%; top: 14%; bottom: 34%; width: 80%; height: 52%; opacity: 0.85; }
.mini .w rect { fill: color-mix(in srgb, var(--w) 12%, transparent); stroke: var(--w); stroke-width: 0.35; filter: drop-shadow(0 0 1px var(--w)); }
.mini .p circle { fill: #ff4fb8; filter: drop-shadow(0 0 1.5px #ff4fb8); }
.mini .p circle.bs { fill: none; stroke: #ff8a3a; stroke-width: 0.5; }
.mini .c { fill: #bff6ff; filter: drop-shadow(0 0 2px #4fe3ff); }
.stage-card .num { position: absolute; right: 12px; top: 4px; font: italic 900 46px/1 var(--display); color: transparent; -webkit-text-stroke: 1.5px var(--g); opacity: 0.8; filter: drop-shadow(0 0 6px var(--g)); }
.stage-card b { font-size: 16px; position: relative; text-shadow: 0 0 6px #000, 0 1px 3px #000, 0 0 12px #000; }
.stage-card .stars { position: relative; }
.stage-card .boss { position: absolute; left: 12px; top: 10px; font: 900 11px/1 var(--display); color: #ffd6a8; padding: 3px 6px; border: 1px solid #ff7a3a; border-radius: 5px; font-style: normal; background: rgba(255, 90, 40, 0.2); }
.stage-card .stars { display: flex; gap: 8px; font-size: 12px; }
.sd.d0 { color: #5dff9d; } .sd.d1 { color: #4fe3ff; } .sd.d2 { color: #ff6b78; }
.sd { font-style: normal; letter-spacing: -1px; }
.stage-card:not(.lock):hover { transform: translateY(-2px); box-shadow: 0 0 18px color-mix(in srgb, var(--g) 45%, transparent); }
.stage-card.sel { border-color: var(--g); box-shadow: 0 0 22px color-mix(in srgb, var(--g) 55%, transparent), inset 0 0 20px color-mix(in srgb, var(--g) 22%, transparent); }
.stage-card.lock { filter: grayscale(0.85) brightness(0.55); }
.stage-card .lockic { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); font-size: 26px; }
.launch-bar { display: flex; align-items: center; gap: 16px; padding: 12px calc(18px + var(--safe-r)) calc(12px + var(--safe-b)) calc(18px + var(--safe-l)); background: linear-gradient(rgba(4, 5, 13, 0.6), rgba(4, 5, 13, 0.95)); border-top: 1px solid var(--line); flex-shrink: 0; }
.hero-chip { display: flex; gap: 10px; align-items: center; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--c); background: rgba(12, 15, 36, 0.9); text-align: left; box-shadow: 0 0 14px color-mix(in srgb, var(--c) 35%, transparent); }
.hero-chip b { display: block; } .hero-chip small { color: var(--muted); font-size: 12px; }
.stage-info { flex: 1; min-width: 0; }
.stage-info b { font-size: 17px; }
.stage-info p { margin: 3px 0; color: #c8cff5; font-size: 13px; }
.stage-info small { color: var(--muted); font-size: 12px; }
.stage-info small.warn { color: #ffcf6b; }
.ally { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ally b { display: block; font-size: 14px; } .ally small { color: var(--muted); font-size: 11.5px; }
.ally-pick { display: flex; gap: 6px; }
.ap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 60px; min-height: 50px; padding: 5px 6px; border-radius: 10px; border: 1px solid var(--line2); background: rgba(12, 15, 36, 0.9); color: var(--muted); font-size: 11.5px; transition: 0.15s; }
.ap .ci { width: 18px; height: 18px; }
.ap.sel { border-color: var(--c, var(--cyan)); color: #fff; box-shadow: 0 0 14px color-mix(in srgb, var(--c, var(--cyan)) 45%, transparent); }
.seat.empty.ai { opacity: 0.9; }
.launch { font-size: 20px !important; padding: 14px 34px !important; border-radius: 14px !important; letter-spacing: 0.05em; }

/* ---------- results ---------- */
#scr-results { background: rgba(4, 5, 13, 0.78); overflow: auto; }
.results { width: min(1000px, 94vw); padding: 24px; text-align: center; margin: auto; }
.results h1 { margin: 0; font: italic 900 clamp(40px, 7vw, 76px)/1 var(--display); letter-spacing: 0.03em; }
.results.win h1 { color: #fff7da; text-shadow: 0 0 10px #ffc23a, 0 0 40px #ff9a00; }
.results.lose h1 { color: #ffe0e4; text-shadow: 0 0 10px #ff4a5a, 0 0 40px #c8002a; }
.res-stage { color: var(--muted); margin: 8px 0; }
.res-wave { font: 900 24px var(--display); color: #ffb3bb; }
.stars.big { font-size: 46px; letter-spacing: 6px; margin: 6px 0 12px; }
.stars.big i { font-style: normal; color: rgba(255, 255, 255, 0.2); }
.stars.big i.on { color: #ffd34a; text-shadow: 0 0 14px #ffae00; animation: starpop 0.5s both; }
.stars.big i.on:nth-child(2) { animation-delay: 0.25s; } .stars.big i.on:nth-child(3) { animation-delay: 0.5s; }
@keyframes starpop { from { transform: scale(2.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.res-body { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; text-align: left; margin-top: 8px; }
.res-table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-size: 14px; }
.res-table th, .res-table td { padding: 9px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.res-table th { color: var(--muted); font-size: 12px; font-weight: 600; text-align: left; }
.res-table td:not(:first-child), .res-table th:not(:first-child) { text-align: right; }
.res-table tr.me td { background: rgba(79, 227, 255, 0.08); font-weight: 700; }
.res-side { display: flex; flex-direction: column; gap: 12px; }
.res-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.res-facts span { padding: 10px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.res-facts b { display: block; color: var(--text); font-size: 20px; }
.xpbox { display: flex; gap: 14px; padding: 14px; border-radius: 12px; background: var(--panel); border: 1px solid var(--c); box-shadow: 0 0 16px color-mix(in srgb, var(--c) 30%, transparent); }
.xpbox > div { flex: 1; }
.xpbox b { font-size: 20px; color: var(--c); }
.xpbox em { margin-left: 8px; font-size: 12px; font-style: normal; color: #ffd98a; }
.xpbox small { color: var(--muted); }
.lvup { margin: 8px 0 0; color: #fff; font-weight: 800; text-shadow: 0 0 10px var(--c); animation: pulse 1.2s infinite; }
.unlock { margin: 6px 0 0; color: #9fffd0; font-weight: 700; }
.xpbox.wait b { animation: pulse 1.2s infinite; }
.xpbox.none b { color: var(--muted); }
.xpbox .recalc { display: block; margin-top: 6px; }
@keyframes pulse { 50% { opacity: 0.6; } }
.res-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.res-actions button { min-width: 130px; }
.glow { border-color: var(--gold) !important; box-shadow: 0 0 16px rgba(255, 194, 58, 0.5); }
/* party relay (relay.js): the host's pick under the results, and the move banner on every screen */
.relay-row { margin-top: 16px; }
.relay-row h3 { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: 0.04em; }
.relay-row p { margin: 0; word-break: keep-all; }
.relay-games { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.relay-games button { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.relay-games b { font-size: 15px; }
.relay-games small { font-size: 12px; color: var(--muted); }
.relay-banner { position: fixed; top: calc(12px + var(--safe-t)); left: 50%; transform: translateX(-50%); z-index: 95; width: min(560px, calc(100vw - 24px));
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--panel2); border: 1px solid var(--cyan);
  box-shadow: 0 0 24px rgba(79, 227, 255, 0.35), 0 12px 40px rgba(0, 0, 0, 0.55); animation: relayIn 0.25s; }
.relay-banner p { margin: 0; flex: 1; font-size: 15px; line-height: 1.4; word-break: keep-all; }
.relay-banner div { display: flex; gap: 8px; flex-shrink: 0; }
.relay-banner button { padding: 9px 14px; border-radius: 10px; border: 1px solid var(--line2); background: rgba(20, 26, 60, 0.85); }
@keyframes relayIn { from { transform: translate(-50%, -16px); opacity: 0; } }
@media (max-width: 480px) { .relay-banner { flex-direction: column; align-items: stretch; } .relay-banner div > * { flex: 1; } }

/* ---------- lobby / room ---------- */
.lobby, .room { flex: 1; display: grid; grid-template-columns: minmax(300px, 420px) 1fr; gap: 18px; padding: 18px calc(18px + var(--safe-r)) calc(18px + var(--safe-b)) calc(18px + var(--safe-l)); overflow: auto; min-height: 0; }
.lobby-main, .room-side { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); }
.lobby-list { padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); overflow: auto; }
.online-about { margin-top: 18px; color: var(--muted); font-size: 13px; line-height: 1.6; max-width: 640px; }
.lobby-list h3, .room-side h3 { margin: 0 0 4px; font-size: 14px; color: var(--muted); font-weight: 600; }
.set { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.set input:not([type=range]), .set select, .code-row input, #r-stage { background: rgba(10, 14, 34, 0.9); border: 1px solid var(--line2); color: var(--text); border-radius: 8px; padding: 8px 10px; min-width: 0; }
.set input[type=range] { width: 170px; accent-color: var(--cyan); }
.code-row input { flex: 1; text-transform: uppercase; letter-spacing: 0.3em; font-weight: 800; }
.hero-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.hpick { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 10px; border: 1px solid var(--line); background: rgba(12, 15, 36, 0.9); font-size: 13px; }
.hpick small { color: var(--muted); font-size: 11px; }
.hpick.sel { border-color: var(--c); box-shadow: 0 0 14px color-mix(in srgb, var(--c) 45%, transparent); }
.room-row { display: grid; grid-template-columns: 70px 1fr auto 1.2fr; gap: 10px; align-items: center; width: 100%; padding: 10px 12px; margin-bottom: 8px; border-radius: 10px; border: 1px solid var(--line); background: rgba(12, 15, 36, 0.9); text-align: left; font-size: 13px; }
.room-row b { letter-spacing: 0.2em; color: var(--cyan); }
.room-row:hover { border-color: var(--cyan); }
.seats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; align-content: start; }
.seat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 150px; border-radius: 14px; border: 1px solid var(--c, var(--line)); background: var(--panel); box-shadow: 0 0 16px color-mix(in srgb, var(--c, transparent) 25%, transparent); text-align: center; padding: 12px; }
.seat .ci { width: 44px; height: 44px; }
.seat .nm { font-weight: 800; font-size: 16px; }
.seat .nm em { font-style: normal; font-size: 11px; color: var(--gold); border: 1px solid var(--gold); border-radius: 5px; padding: 1px 5px; margin-left: 4px; }
.seat small { color: var(--muted); }
.seat .rd { font-style: normal; font-size: 12px; padding: 3px 10px; border-radius: 20px; border: 1px solid var(--line2); color: var(--muted); }
.seat .rd.on { color: #9fffd0; border-color: #3dff9a; }
.seat.empty { border-style: dashed; opacity: 0.75; --c: transparent; }
.seat.me { outline: 2px solid rgba(255, 255, 255, 0.3); outline-offset: 3px; }
.seat.gone { opacity: 0.5; }
.stage-ro { margin: 0; font-size: 14px; }

/* ---------- overlay ---------- */
.overlay { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(2, 3, 10, 0.65); backdrop-filter: blur(3px); pointer-events: auto; }
.overlay[hidden] { display: none; }
.panel { width: min(560px, 92vw); max-height: 88vh; overflow: auto; padding: 22px; border-radius: 16px; border: 1px solid var(--line2); background: var(--panel2); box-shadow: 0 0 40px rgba(0, 120, 255, 0.25); display: flex; flex-direction: column; gap: 10px; }
.panel h2 { margin: 0 0 6px; font: 900 24px var(--display); text-shadow: 0 0 12px rgba(79, 227, 255, 0.5); }
.panel h3 { margin: 8px 0 0; font-size: 15px; color: var(--cyan); }
.panel p { margin: 0; line-height: 1.55; color: #cdd3f5; font-size: 14px; }
.panel.pause { width: min(360px, 90vw); }
.p-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.p-head h2 { margin: 0; }
.panel.pause button { padding: 12px; border-radius: 10px; border: 1px solid var(--line2); background: rgba(20, 26, 60, 0.8); }
.panel .row button { flex: 1; padding: 11px; border-radius: 10px; border: 1px solid var(--line2); background: rgba(20, 26, 60, 0.8); }
.sets { display: flex; flex-direction: column; gap: 10px; }
.help { margin: 0; padding-left: 18px; line-height: 1.6; font-size: 13.5px; color: #cdd3f5; }
.reacts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.reacts li { padding: 7px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); border-left: 3px solid; }
.reacts .r0 { border-color: #8cf2ff; } .reacts .r1 { border-color: #b3bfff; } .reacts .r2 { border-color: #8099ff; } .reacts .r3 { border-color: #ffcc4d; } .reacts .r4 { border-color: #fff; } .reacts .r5 { border-color: #ff73e6; }
.heroes-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; font-size: 13px; }
.heroes-mini div { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); }
.heroes-mini small { color: var(--muted); font-size: 11.5px; }

#toast { position: fixed; left: 50%; bottom: 12%; transform: translateX(-50%) translateY(20px); z-index: 60; padding: 10px 18px; border-radius: 10px; background: rgba(10, 14, 34, 0.95); border: 1px solid var(--line2); opacity: 0; pointer-events: none; transition: 0.25s; font-size: 14px; max-width: 90vw; text-align: center; }
#toast.show { opacity: 1; transform: translateX(-50%); }
.fatal { position: fixed; inset: 0; display: grid; place-items: center; padding: 30px; text-align: center; font-size: 18px; background: var(--bg); z-index: 100; }
.rotate { display: none; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; z-index: 20; pointer-events: none; font-size: 14px; }
#hud[hidden] { display: none; }
.h-top { position: absolute; left: 50%; top: calc(8px + var(--safe-t)); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 5px; width: min(560px, 50vw); }
.h-stage { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #cfd6ff; text-shadow: 0 1px 3px #000; }
.h-stage b { font: italic 900 16px var(--display); color: var(--cyan); }
.h-diff { font-style: normal; font-size: 11px; padding: 1px 6px; border-radius: 5px; border: 1px solid; }
.h-diff.d0 { color: #5dff9d; } .h-diff.d1 { color: #4fe3ff; } .h-diff.d2 { color: #ff6b78; }
.h-wave { font: italic 900 22px/1 var(--display); letter-spacing: 0.05em; color: #fff; text-shadow: 0 0 10px rgba(79, 227, 255, 0.7), 0 2px 4px #000; }
.h-core { display: flex; align-items: center; gap: 8px; width: 100%; }
.h-core span { font-size: 11px; color: #9fefff; font-weight: 700; }
.h-core b { font-size: 12px; min-width: 38px; text-align: right; color: #cfefff; }
.bar { flex: 1; height: 10px; border-radius: 5px; background: rgba(0, 0, 0, 0.55); border: 1px solid rgba(120, 220, 255, 0.35); overflow: hidden; }
.bar i { display: block; height: 100%; transform-origin: left; background: linear-gradient(90deg, #3ab8ff, #9ff3ff); box-shadow: 0 0 10px #4fe3ff; transition: transform 0.15s; }
.h-core .bar.low { border-color: rgba(255, 80, 90, 0.8); animation: pulse 0.6s infinite; }
.h-core .bar.low i { background: linear-gradient(90deg, #ff3050, #ff9aa6); box-shadow: 0 0 10px #ff4a5a; }
.h-prep { font-size: 14px; font-weight: 700; color: #fff; text-shadow: 0 1px 3px #000; }
.h-prep em { font-style: normal; font-weight: 500; color: #9fefff; font-size: 12px; margin-left: 6px; }
.h-boss { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; margin-top: 4px; }
.h-boss span { font: 900 13px var(--display); letter-spacing: 0.15em; color: #ffc1e6; text-shadow: 0 0 10px #ff2fa8; }
.h-boss .bar { width: 100%; height: 12px; border-color: rgba(255, 90, 200, 0.6); }
.h-boss .bar i { background: linear-gradient(90deg, #ff2fa8, #ffb3ea); box-shadow: 0 0 10px #ff2fa8; }
.h-team { position: absolute; left: calc(10px + var(--safe-l)); top: calc(10px + var(--safe-t)); display: flex; flex-direction: column; gap: 6px; width: 190px; }
.tm { position: relative; display: grid; grid-template-columns: 18px 1fr auto; column-gap: 7px; align-items: center; padding: 6px 8px; border-radius: 9px; background: rgba(5, 7, 18, 0.72); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); }
.tm.me { border-color: var(--c); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 35%, transparent); }
.tm .ci { width: 16px; height: 16px; }
.tm .nm { font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm em { font-style: normal; font-size: 10.5px; color: var(--muted); }
.tm .hp, .tm .ul { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden; margin-top: 4px; }
.tm .ul { height: 2px; margin-top: 2px; }
.tm .hp i, .tm .ul i { display: block; height: 100%; transform-origin: left; }
.tm .hp i { background: linear-gradient(90deg, #3dff9a, #b8ffd9); }
.tm .ul i { background: var(--c); box-shadow: 0 0 6px var(--c); }
.tm.ult .ul i { animation: pulse 0.8s infinite; }
.tm .st { position: absolute; right: 8px; top: 20px; font-size: 11px; color: #ff9aa6; font-weight: 800; }
.tm.dead { opacity: 0.6; }
.h-right { position: absolute; right: calc(10px + var(--safe-r)); top: calc(10px + var(--safe-t)); display: flex; align-items: flex-start; gap: 10px; }
.h-scrap, .h-kills { display: flex; flex-direction: column; align-items: flex-end; padding: 5px 10px; border-radius: 9px; background: rgba(5, 7, 18, 0.72); border: 1px solid var(--line); }
.h-scrap b { font: 900 20px/1 var(--display); color: #b6ff4a; text-shadow: 0 0 8px rgba(182, 255, 74, 0.6); }
.h-kills b { font: 900 20px/1 var(--display); color: #ffd6e8; }
.h-scrap span, .h-kills span { font-size: 10.5px; color: var(--muted); }
.h-combo { position: absolute; right: 0; top: 52px; font: italic 900 22px var(--display); color: #fff; white-space: nowrap; text-shadow: 0 0 10px #ff8a2a, 0 2px 4px #000; }
.h-combo.hot { color: #ffe9a8; text-shadow: 0 0 12px #ff4a00, 0 0 24px #ff2fa8; animation: pulse 0.4s infinite; }
.icon-btn { pointer-events: auto; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line2); background: rgba(5, 7, 18, 0.72); font-size: 13px; }
.h-net { position: absolute; right: 0; top: 84px; font-size: 11px; color: var(--muted); }
.h-net.bad { color: #ffcf6b; }
.h-fps { position: absolute; right: 0; top: 100px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.h-skills { position: absolute; left: 50%; bottom: calc(12px + var(--safe-b)); transform: translateX(-50%); display: flex; gap: 8px; }
.sk { position: relative; width: 88px; height: 58px; border-radius: 11px; overflow: hidden; background: rgba(5, 7, 18, 0.8); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 0 4px 7px; }
.sk kbd { position: absolute; left: 5px; top: 5px; min-width: 0; font-size: 10px; line-height: 1.5; }
.sk span { font-size: 11px; font-weight: 700; text-align: center; line-height: 1.2; color: #e8ecff; z-index: 1; }
.sk .cd { position: absolute; inset: 0; background: conic-gradient(rgba(0, 0, 0, 0.72) calc(var(--p, 0) * 360deg), transparent 0); pointer-events: none; }
.sk .cdn { position: absolute; top: 14px; font: 900 16px var(--display); color: #fff; text-shadow: 0 1px 3px #000; z-index: 2; }
.sk.ready { border-color: var(--c); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 40%, transparent); }
.sk.r { width: 96px; }
.sk.r.ready { animation: ultglow 1s infinite; }
.sk.poor span { color: #ff9aa6; }
@keyframes ultglow { 50% { box-shadow: 0 0 22px var(--c), inset 0 0 14px color-mix(in srgb, var(--c) 40%, transparent); } }
.h-banner { position: absolute; left: 50%; top: 21%; transform: translate(-50%, -50%) scale(0.8); font: italic 900 clamp(28px, 4vw, 52px)/1 var(--display); letter-spacing: 0.04em; color: #fff; opacity: 0; transition: opacity 0.25s, transform 0.25s; white-space: nowrap; text-shadow: 0 0 12px #4fe3ff, 0 0 40px #0088ff; }
.h-banner.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.h-banner.boss { color: #ffe0f4; text-shadow: 0 0 12px #ff2fa8, 0 0 50px #ff0066; animation: pulse 0.5s 4; }
.h-banner.win { color: #fff7da; text-shadow: 0 0 12px #ffc23a, 0 0 50px #ff9a00; }
.h-banner.lose { color: #ffe0e4; text-shadow: 0 0 12px #ff4a5a, 0 0 50px #c8002a; }
.h-banner.clear { font-size: clamp(24px, 3.4vw, 40px); color: #d9fff0; text-shadow: 0 0 12px #3dff9a; }
.h-banner.small { font-size: clamp(18px, 2.4vw, 26px); top: 70%; text-shadow: 0 0 10px #ff4a5a, 0 2px 4px #000; }
.h-down { position: absolute; left: 50%; top: 62%; transform: translateX(-50%); text-align: center; font-size: 15px; color: #ffd0d6; text-shadow: 0 1px 4px #000; }
.h-down b { font-size: 20px; color: #fff; }
.h-afk { position: absolute; left: 50%; top: 31%; transform: translateX(-50%); width: max-content; max-width: min(92vw, 680px); padding: 9px 16px; border-radius: 10px; background: rgba(5, 7, 18, 0.8); border: 1px solid rgba(255, 196, 90, 0.65); color: #ffe7b0; font-size: 15px; font-weight: 700; text-align: center; text-shadow: 0 1px 3px #000; pointer-events: none; animation: pulse 1.6s infinite; }
.tm.ai .nm { color: #ffd98a; }
.h-touch { position: absolute; right: calc(14px + var(--safe-r)); bottom: calc(14px + var(--safe-b)); width: 250px; height: 200px; pointer-events: none; }
.tb { position: absolute; pointer-events: auto; border-radius: 50%; border: 2px solid rgba(160, 220, 255, 0.5); background: rgba(5, 7, 18, 0.55); font: 900 18px var(--display); color: #fff; overflow: hidden; touch-action: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0 6px; }
.tb .cd { position: absolute; inset: 0; background: conic-gradient(rgba(0, 0, 0, 0.7) calc(var(--p, 0) * 360deg), transparent 0); pointer-events: none; }
.tb .k { position: relative; z-index: 1; font: 900 12px/1 var(--display); color: color-mix(in srgb, var(--c) 60%, #fff); }
.tb.wait .k { font-size: 16px; color: #fff; text-shadow: 0 1px 3px #000; }
.tb .nm { position: relative; z-index: 1; font: 700 11px/1.15 var(--font); color: #e8ecff; text-align: center; word-break: keep-all; text-shadow: 0 1px 2px #000; }
.tb.wait .nm { opacity: 0.6; }
.tb.poor .nm { color: #ff9aa6; opacity: 1; }
.tb.down { transform: scale(0.92); border-color: #fff; }
.tb.sk1 { width: 74px; height: 74px; right: 96px; bottom: 6px; }
.tb.sk2 { width: 74px; height: 74px; right: 10px; bottom: 90px; }
.tb.ult { width: 86px; height: 86px; right: 4px; bottom: 0; border-color: rgba(255, 210, 90, 0.6); }
.tb.ult.ready { box-shadow: 0 0 18px #ffc23a; border-color: #ffd98a; }
.tb.call { right: 170px; bottom: 120px; width: auto; height: auto; border-radius: 10px; padding: 8px 12px; font: 700 13px var(--font); white-space: nowrap; }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  .hangar { grid-template-columns: 200px 1fr; grid-template-rows: auto 1fr; overflow: auto; }
  .hero-list { flex-direction: row; overflow-x: auto; grid-column: 1 / -1; }
  .hero-card { min-width: 190px; }
  .hero-detail { grid-column: 1; }
  .tree { grid-column: 2; min-height: 360px; }
  .stage-grid { grid-template-columns: repeat(5, minmax(120px, 1fr)); }
  /* Hero chip + stage info + AI ally picker + launch no longer fit one row: the info takes its own row
     (on one row it was squeezed to a word per line and the bar filled the screen). */
  .launch-bar { flex-wrap: wrap; gap: 8px 12px; }
  .stage-info { order: -1; flex-basis: 100%; }
  .launch { flex: 1; }
}
@media (max-width: 820px) {
  .hangar { display: flex; flex-direction: column; overflow: auto; }
  .tree { min-height: auto; }
  .branches { grid-template-columns: repeat(3, minmax(170px, 1fr)); overflow: visible; }
  .tree { overflow-x: auto; }
  .stage-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 96px; }
  .launch-bar { flex-wrap: wrap; gap: 10px; }
  .stage-info { order: -1; flex-basis: 100%; }
  .launch { flex: 1; }
  .lobby, .room { grid-template-columns: 1fr; }
  .res-body { grid-template-columns: 1fr; }
  .title-wrap { flex-direction: column; gap: 18px; justify-content: flex-start; padding-top: calc(64px + var(--safe-t)); }
  .h-team { width: 150px; }
  .h-top { width: 60vw; }
}
@media (max-height: 520px) {
  .title-wrap { flex-direction: row; gap: 24px; padding: 12px; }
  .logo-main { font-size: 44px; }
  .mbtn { padding: 9px 16px; }
  .mbtn b { font-size: 16px; }
  .menu { gap: 7px; }
  /* The menu fills the height here, so the corner chips move top left, above the logo. */
  .corner { right: auto; left: calc(16px + var(--safe-l)); }
  /* Centered while it fits; taller than the screen (browser bars showing), the menu starts at the
     top and the rest scrolls, instead of its first button going above the edge. */
  .title-wrap > * { margin-block: auto; }
  /* Tighter overlays: the pause menu shows all its buttons without scrolling. */
  .panel { padding: 12px 18px; gap: 7px; max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
  .panel h2 { font-size: 20px; }
  .p-head { margin-bottom: 0; }
  .panel.pause button, .panel .row button { padding: 7px 12px; }
  .sets { gap: 6px; }
  .bar-top { padding-top: calc(6px + var(--safe-t)); padding-bottom: 6px; }
  /* Landscape phones keep five columns (the narrow-width rule's two columns are for portrait): ten
     cards in two rows, none scrolled away. */
  .stage-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 78px; padding-top: 8px; padding-bottom: 8px; }
  /* 78px cards: number, boss tag and lock share a top row, the name (one line) and stars sit below. */
  .stage-card { padding: 6px 10px; gap: 2px; }
  .stage-card b { font-size: 13px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .stage-card .num { font-size: 24px; top: 3px; right: 8px; }
  .stage-card .boss { left: 8px; top: 6px; font-size: 10px; padding: 2px 5px; }
  .stage-card .lockic { top: 5px; transform: translateX(-50%); font-size: 16px; line-height: 1.2; }
  .stage-card .stars { font-size: 11px; gap: 6px; }
  /* The stage footer in two short rows: one-line name, tip and recommendation, then the hero chip,
     a compact AI ally picker and the launch button. */
  .launch-bar { gap: 4px 10px; padding-top: 6px; padding-bottom: calc(6px + var(--safe-b)); }
  .stage-info b, .stage-info p, .stage-info small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .stage-info b { font-size: 14px; } .stage-info p { margin: 1px 0; font-size: 12px; }
  .hero-chip { padding: 4px 10px; max-width: 200px; min-width: 0; }
  .hero-chip > span { min-width: 0; } .hero-chip small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ally small { display: none; }
  .ap { min-width: 46px; min-height: 40px; padding: 3px 4px; font-size: 10.5px; gap: 1px; }
  .launch { font-size: 17px !important; padding: 9px 18px !important; }
  .h-team { transform: scale(0.8); transform-origin: top left; }
  .h-right { transform: scale(0.8); transform-origin: top right; }
  .h-top { transform: translateX(-50%) scale(0.85); transform-origin: top center; }
  .h-skills { transform: translateX(-50%) scale(0.8); transform-origin: bottom center; }
  /* Results on a landscape phone: two columns kept, everything tighter, and the actions stick to
     the bottom edge so they show without scrolling even when the page runs long. */
  .results { padding: 6px calc(10px + var(--safe-r)) 0 calc(10px + var(--safe-l)); }
  .results h1 { font-size: 30px; }
  .res-stage { margin: 3px 0; font-size: 13px; }
  .res-wave { font-size: 18px; margin: 4px 0; }
  .stars.big { font-size: 24px; margin: 0 0 4px; }
  .res-body { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 10px; margin-top: 4px; align-items: start; }
  .res-table { font-size: 12px; }
  .res-table th, .res-table td { padding: 3px 5px; }
  .res-table th { font-size: 10px; }
  .res-side { gap: 8px; }
  .res-facts { gap: 6px; }
  .res-facts span { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 4px 8px; font-size: 11px; }
  .res-facts b { font-size: 14px; }
  .xpbox { gap: 10px; padding: 8px 10px; }
  .xpbox b { font-size: 16px; }
  .xpbar.big { height: 7px; margin: 5px 0 3px; }
  .xpbox small { font-size: 12px; }
  .lvup, .unlock { margin: 3px 0 0; font-size: 13px; }
  .res-actions { position: sticky; bottom: 0; z-index: 1; gap: 8px; margin-top: 6px; padding: 8px 0 calc(8px + var(--safe-b)); }
  .res-actions::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(rgba(4, 5, 13, 0), rgba(4, 5, 13, 0.9) 35%);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
  .res-actions button { min-width: 0; padding: 8px 14px !important; font-size: 14px; }
  .h-banner { top: 40%; }
  .stage-card .mini { top: 8%; bottom: 40%; opacity: 0.55; }
  .hangar { display: grid; grid-template-columns: 78px 1fr; grid-template-rows: 1fr; gap: 8px; padding: 8px calc(8px + var(--safe-r)) calc(8px + var(--safe-b)) calc(8px + var(--safe-l)); overflow: hidden; }
  .hangar .hero-list { flex-direction: column; grid-column: 1; overflow-y: auto; gap: 6px; }
  .hangar .hero-card { min-width: 0; flex-direction: column; align-items: center; padding: 6px 4px; gap: 3px; text-align: center; }
  .hangar .hero-card > div > b, .hangar .hero-card small, .hangar .hero-card .xpbar { display: none; }
  .hangar .hero-card .lv { margin: 0; font-size: 11px; }
  .hangar .hero-detail { display: none; }
  .hangar .tree { grid-column: 2; min-height: 0; overflow: auto; padding: 8px; }
  .hangar .branches { overflow: visible; }
}
@media (hover: none) and (pointer: coarse) {
  .h-skills { display: none; }
}
@media (orientation: portrait) and (max-width: 700px) {
  body.in-game .rotate { display: grid; position: fixed; inset: 0; z-index: 90; place-items: center; background: rgba(4, 5, 13, 0.92); font-size: 20px; font-weight: 800; pointer-events: auto; }
}