/* 모기 디펜스 3D 페이지 — 휴대폰 먼저(엄지로 아래 카드를 끌어 방에 놓는다), 넓은 화면은 아래 줄이 가운데 고정 폭 */
:root {
  /* 모기 처형장과 같은 색·글꼴(글꼴은 언어마다 i18n.js 가 바꾼다) */
  --bg: #070a10; --wall: #11171a; --tray-hi: #1f272b; --line: rgba(237, 229, 214, 0.12); --line-hi: rgba(237, 229, 214, 0.28);
  --paper: #ede5d6; --muted: #8e9995; --blood: #c8141e; --blood-ink: #ff6a6a; --lamp: #f0ab45; --gold: #f6c544; --lamp-tint: rgba(240, 171, 69, 0.14);
  --panel: rgba(17, 22, 25, 0.9); --panel2: rgba(20, 26, 29, 0.95);
  --text: var(--paper); --dim: var(--muted); --ok: #7cffa0; --bad: #ff6a6a; --accent: #9ad8f5;
  --f-display: "Black Han Sans", "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif; --f-display-w: 400;
  --f-body: "IBM Plex Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); overflow: hidden; color: var(--text); font: 14px/1.35 var(--f-body); -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; touch-action: none; }
button { font: inherit; color: inherit; border: 0; cursor: pointer; }
#stage { position: fixed; inset: 0; }
[hidden] { display: none !important; }

/* 위 줄 */
#hud { position: fixed; top: calc(8px + var(--safe-t)); left: 8px; right: 8px; display: flex; gap: 6px; align-items: center; pointer-events: none; z-index: 5; }
#hud > * { pointer-events: auto; }
.pill { display: flex; align-items: baseline; gap: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; backdrop-filter: blur(6px); }
.pill b { font: 600 17px var(--f-mono); font-variant-numeric: tabular-nums; }
.pill small { color: var(--dim); font-size: 11px; }
.blood b { color: #ff7b85; }
.drop { width: 10px; height: 13px; background: var(--blood); border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; transform: translateY(1px); display: inline-block; }
.blood.flash { animation: flash 0.5s; }
@keyframes flash { 30% { background: rgba(226, 51, 63, 0.55); } }
.hpbox { flex: 0 1 170px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 4px 10px 6px; }
.hplabel { display: flex; justify-content: space-between; font-size: 11px; color: var(--dim); }
.hplabel b { color: var(--text); font-variant-numeric: tabular-nums; }
.hpbar { height: 6px; background: rgba(255, 255, 255, 0.08); border-radius: 4px; overflow: hidden; margin-top: 3px; }
.hpbar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #b3121f, #ff4a55); transition: width 0.2s; }
.hpbox.hurt { animation: hurt 0.6s infinite; }
@keyframes hurt { 50% { border-color: rgba(255, 70, 80, 0.8); } }
.wavebox { margin: 0 auto; display: flex; flex-direction: column; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 4px 14px; }
.wavebox b { font-family: var(--f-display); font-weight: var(--f-display-w); font-size: 17px; letter-spacing: 0.02em; }
.wavebox small { color: var(--dim); font-size: 11px; font-variant-numeric: tabular-nums; }
.score b { color: var(--gold); }
.ib { width: 38px; height: 38px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); display: grid; place-items: center; font-size: 16px; backdrop-filter: blur(6px); }
.ib:active { transform: scale(0.94); }

#viewBtns { position: fixed; right: 8px; top: calc(60px + var(--safe-t)); display: flex; flex-direction: column; gap: 6px; z-index: 5; }

#banner { position: fixed; left: 50%; top: calc(18% + var(--safe-t)); transform: translateX(-50%); text-align: center; pointer-events: none; z-index: 6; animation: bin 0.35s ease-out; }
#banner b { display: block; font-family: var(--f-display); font-weight: var(--f-display-w); font-size: clamp(26px, 6vw, 46px); letter-spacing: 0.01em; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8), 0 0 2px #000; }
#banner small { display: block; font-size: 14px; color: #f2d7a8; text-shadow: 0 1px 8px #000; margin-top: 2px; }
#banner.boss b { color: #ff6a6a; }
#banner.event b { color: #ffd27a; }
@keyframes bin { from { opacity: 0; transform: translate(-50%, -8px) scale(1.08); } }
#toast { position: fixed; left: 50%; bottom: calc(150px + var(--safe-b)); transform: translateX(-50%); background: rgba(40, 12, 14, 0.92); border: 1px solid rgba(255, 90, 100, 0.4); padding: 7px 14px; border-radius: 10px; z-index: 7; pointer-events: none; font-size: 13px; }
#toast.ok { background: rgba(14, 36, 22, 0.92); border-color: rgba(120, 255, 160, 0.35); }
#hint { position: fixed; left: 50%; top: calc(62px + var(--safe-t)); transform: translateX(-50%); background: var(--panel2); border: 1px solid var(--line); padding: 6px 12px; border-radius: 10px; z-index: 6; font-size: 13px; display: flex; gap: 8px; align-items: center; }
#hint button { background: rgba(255, 255, 255, 0.1); padding: 4px 10px; border-radius: 8px; }

/* 아래 줄: 카드 + 웨이브 단추 */
#dock { position: fixed; left: 0; right: 0; bottom: 0; padding: 0 8px calc(8px + var(--safe-b)); z-index: 5; background: linear-gradient(to top, rgba(7, 10, 16, 0.9), rgba(7, 10, 16, 0.55) 70%, rgba(7, 10, 16, 0)); }
.tabs { display: flex; gap: 4px; align-items: center; padding: 6px 2px; }
.tabs button { background: rgba(255, 255, 255, 0.06); border: 1px solid var(--line); padding: 4px 12px; border-radius: 999px; color: var(--dim); font-size: 12px; }
.tabs button.on { background: rgba(143, 208, 255, 0.16); color: var(--text); border-color: rgba(143, 208, 255, 0.4); }
#nextInfo { margin-left: auto; font-size: 11px; color: var(--dim); display: flex; gap: 6px; align-items: center; overflow: hidden; white-space: nowrap; }
#nextInfo .chip { background: rgba(255, 255, 255, 0.07); border-radius: 6px; padding: 1px 6px; }
#nextInfo .chip.new { background: rgba(255, 180, 80, 0.2); color: #ffd28a; }
.row { display: flex; gap: 8px; align-items: stretch; }
#cards { flex: 1; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; touch-action: pan-x; }
#cards::-webkit-scrollbar { display: none; }
.card { flex: 0 0 auto; width: 74px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 3px 3px 5px; display: flex; flex-direction: column; align-items: center; position: relative; touch-action: none; }
.card img { width: 60px; height: 60px; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.card .nm { font-size: 11px; line-height: 1.15; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .cost { font-size: 11px; color: #ff8a92; font-variant-numeric: tabular-nums; }
.card .mt { position: absolute; top: 3px; left: 4px; font-size: 9px; color: var(--dim); letter-spacing: 0.04em; }
.card.poor { opacity: 0.45; }
.card.off { opacity: 0.3; filter: grayscale(1); }
.card.armed { border-color: var(--ok); box-shadow: 0 0 0 2px rgba(124, 255, 160, 0.35); }
#bWave { flex: 0 0 96px; border-radius: 14px; background: var(--blood); display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: 0 4px 18px rgba(200, 30, 40, 0.35); }
#bWave b { font-family: var(--f-display); font-weight: var(--f-display-w); font-size: 17px; letter-spacing: 0.02em; }
#bWave small { font-size: 11px; opacity: 0.8; font-variant-numeric: tabular-nums; }
#bWave:disabled { background: var(--panel); box-shadow: none; opacity: 0.8; }
#bWave.go { animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { box-shadow: 0 4px 26px rgba(255, 60, 70, 0.7); } }

/* 고른 것 */
#sheet { position: fixed; left: 8px; right: 8px; bottom: calc(8px + var(--safe-b)); background: var(--panel2); border: 1px solid var(--line); border-radius: 16px; padding: 10px; z-index: 6; backdrop-filter: blur(8px); max-width: 560px; margin: 0 auto; animation: up 0.18s ease-out; }
@keyframes up { from { transform: translateY(14px); opacity: 0; } }
.sh-head { display: flex; gap: 10px; align-items: center; }
.sh-head img { width: 54px; height: 54px; background: rgba(255, 255, 255, 0.04); border-radius: 10px; }
.sh-head b { display: block; font-size: 16px; }
.sh-head small { color: var(--dim); font-size: 12px; }
.sh-head .x { margin-left: auto; width: 32px; height: 32px; }
#sStats { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 2px; font-size: 12px; color: var(--dim); }
#sStats b { color: var(--text); font-variant-numeric: tabular-nums; }
#sStats .up { color: var(--ok); }
#sStats .desc { flex-basis: 100%; color: var(--dim); }
#sActs { display: flex; gap: 6px; flex-wrap: wrap; }
#sActs button { flex: 1 1 120px; background: rgba(255, 255, 255, 0.07); border: 1px solid var(--line); border-radius: 12px; padding: 9px 8px; text-align: left; }
#sActs button b { display: block; font-size: 13px; }
#sActs button small { display: block; color: var(--dim); font-size: 11px; }
#sActs button .c { color: #ff8a92; }
#sActs button.main { background: linear-gradient(180deg, rgba(124, 255, 160, 0.18), rgba(124, 255, 160, 0.06)); border-color: rgba(124, 255, 160, 0.35); }
#sActs button.br { flex-basis: 45%; }
#sActs button.sell { flex: 0 0 auto; color: #ffb0b0; }
#sActs button:disabled { opacity: 0.4; }

/* ───── 처음 화면·창·설정·랭킹 — 모기 처형장(bzzkill) 스타일(2026-10-14 정민님 '처형장 스타일로 꾸며'): 두꺼운 제목 글꼴 + 고정폭 숫자,
   한지색 글자·피 빨강·램프 주황·금색, 어두운 패널·가는 선, 시상대(왕관·메달·단), 분할 탭 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; border-radius: 10px; background: var(--tray-hi); border: 1px solid var(--line-hi); color: var(--paper); font-size: 14px; font-weight: 500; white-space: nowrap; }
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--blood); border-color: transparent; color: #fff; }
.btn.primary:hover { background: #dc1b26; }
.btn.warm { background: var(--lamp-tint); border-color: rgba(240, 171, 69, 0.45); color: var(--lamp); }
.screen { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 24px 16px; overflow-y: auto; }
.title { background: radial-gradient(ellipse at 50% 40%, rgba(6, 8, 9, 0.2), rgba(6, 8, 9, 0.82) 70%); touch-action: pan-y; }
.title-in { width: min(680px, 100%); display: grid; gap: 20px; justify-items: center; text-align: center; animation: tin 0.5s ease-out; }
@keyframes tin { from { opacity: 0; transform: translateY(8px); } }
.title .brand-sm { font: 600 12px/1 var(--f-mono); letter-spacing: 0.32em; color: var(--muted); }
.title h2 { margin: 0; font-family: var(--f-display); font-weight: var(--f-display-w); line-height: 0.95; font-size: clamp(50px, 11vw, 108px); letter-spacing: 0.01em; max-width: 100%; text-shadow: 0 6px 40px rgba(0, 0, 0, 0.6); }
.title h2 span, .title h2 b { display: block; white-space: nowrap; }
.title h2 b { color: var(--blood-ink); font-weight: inherit; }
/* 시각은 고정폭, 한글·일어 등 문장은 본문 글꼴로(고정폭 대체 글꼴이 글자 사이를 벌려 놓지 않게) */
.title .tag { margin: -6px 0 0; font: 500 13px/1.4 "IBM Plex Mono", var(--f-body); color: var(--muted); }
.load { width: min(320px, 80%); display: grid; gap: 6px; }
.load .bar { height: 4px; background: rgba(237, 229, 214, 0.1); border-radius: 2px; overflow: hidden; }
.load .bar i { display: block; height: 100%; width: 0; background: var(--blood-ink); transition: width 0.15s; }
.load span { font: 500 11px var(--f-mono); color: var(--muted); }
.modes { width: min(420px, 100%); display: grid; gap: 10px; }
.play { position: relative; display: grid; gap: 4px; justify-items: center; padding: 14px 10px 12px; border-radius: 14px; background: var(--blood); color: #fff; box-shadow: 0 10px 40px rgba(200, 20, 30, 0.45); font-family: var(--f-display); font-weight: var(--f-display-w); font-size: clamp(26px, 4.8vw, 36px); letter-spacing: 0.04em; transition: transform 0.1s, background-color 0.15s; }
.play b { font-weight: inherit; line-height: 1; }
.play small { font: 600 12px/1.25 var(--f-body); letter-spacing: 0; opacity: 0.85; word-break: keep-all; }
.play:hover { background: #dc1b26; }
.play:active { transform: scale(0.98); }
.play:disabled { opacity: 0.4; cursor: progress; box-shadow: none; }
.lvbar { width: min(420px, 100%); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; margin-top: -8px; }
.lvbar i { height: 6px; border-radius: 3px; background: rgba(237, 229, 214, 0.1); overflow: hidden; }
.lvbar i b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--lamp), var(--gold)); transition: width 0.4s; }
.lvbar small { font: 500 11.5px var(--f-body); color: var(--muted); white-space: nowrap; }
.lv { display: inline-block; margin-left: 5px; padding: 1px 5px; border-radius: 5px; font: 700 10px/1.4 var(--f-mono); font-style: normal; vertical-align: 1px; border: 1px solid currentColor; }
.lv.t0 { color: #9aa3a8; } .lv.t1 { color: #c8814a; } .lv.t2 { color: #c9ced6; } .lv.t3 { color: var(--gold); } .lv.t4 { color: #9ad8f5; }
.title-stats { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.tstat { min-width: 140px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); text-align: left; }
.tstat span { display: block; font-size: 11.5px; color: var(--muted); }
.tstat strong { font: 600 22px/1.2 var(--f-mono); font-variant-numeric: tabular-nums; }
.tstat strong small { font: 500 11px var(--f-body); color: var(--muted); margin-left: 4px; }
.lang-quick { position: absolute; top: calc(14px + var(--safe-t)); right: 16px; display: flex; gap: 6px; align-items: center; }
.lang-quick select { min-height: 34px; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--paper); font: 500 13px var(--f-body); }
.lang-quick .gear { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); }
.lang-quick .gear:hover { color: var(--paper); border-color: var(--line-hi); }
.lang-quick .gear svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
@media (max-width: 520px) { .title { padding-top: 62px; } }
/* 국기(Windows 는 국기 이모지를 글자로 보여 주므로 처형장의 Twemoji 국기 글꼴을 같이 쓴다) */
@font-face { font-family: "Twemoji Country Flags"; src: url("/bzzkill/fonts/TwemojiCountryFlags.woff2") format("woff2"); unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E007F; font-display: swap; }
.flag { font-family: "Twemoji Country Flags", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-style: normal; }
/* 오늘의 랭킹(처음 화면) */
.today { width: min(560px, 100%); display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); text-align: left; }
.today header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.today h3 { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; }
.today h3 svg { width: 17px; height: 17px; fill: var(--gold); }
.link { background: none; border: 0; padding: 6px 2px; color: var(--lamp); font: 600 13px var(--f-body); white-space: nowrap; }
.today-me { margin: 0; font-size: 13px; color: var(--muted); text-align: center; word-break: keep-all; }
.today-me b { color: var(--lamp); }
.today-me .nickcta { margin-left: 6px; padding: 3px 8px; border-radius: 7px; border: 1px solid var(--lamp); background: transparent; color: var(--lamp); font: 600 12px var(--f-body); }
/* 시상대: 1위 가운데·가장 높게(왕관), 2위 왼쪽, 3위 오른쪽 */
@keyframes crownGlow { 50% { filter: drop-shadow(0 0 14px rgba(240, 171, 69, 0.85)); transform: translateY(-2px); } }
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 6px; padding: 6px 2px 0; }
.pod { min-width: 0; display: grid; justify-items: center; gap: 3px; text-align: center; }
.pod .crown { width: 30px; height: 30px; fill: var(--gold); stroke: #8a5a12; stroke-width: 1; filter: drop-shadow(0 0 8px rgba(240, 171, 69, 0.55)); animation: crownGlow 2.4s ease-in-out infinite; }
.pod .medal { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font: 700 13px/1 var(--f-mono); color: #1a1208; background: var(--mc); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35), inset 0 -2px 0 rgba(0, 0, 0, 0.18); }
.pod .pn { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 700; }
.pod .pb { display: flex; gap: 3px; align-items: center; }
.pod .pb:empty { display: none; }
.pod .pv { font: 600 12px var(--f-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.pod .block { width: 100%; height: var(--h); border-radius: 8px 8px 0 0; background: linear-gradient(180deg, color-mix(in srgb, var(--mc) 55%, transparent), color-mix(in srgb, var(--mc) 12%, transparent)); border: 1px solid color-mix(in srgb, var(--mc) 70%, transparent); border-bottom: 0; display: grid; place-items: start center; padding-top: 6px; font: 700 18px var(--f-mono); font-style: normal; color: color-mix(in srgb, var(--mc) 90%, white); }
.pod.p1 { --mc: var(--gold); --h: 74px; } .pod.p2 { --mc: #c9ced6; --h: 52px; } .pod.p3 { --mc: #c8814a; --h: 38px; }
.pod.p1 .pn { font-size: 15px; color: var(--gold); }
.pod.p1 .pv { color: var(--paper); }
.pod.me .pn::after { content: " · " attr(data-you); color: var(--lamp); font-weight: 600; }
.pod.me .block { box-shadow: 0 0 0 2px var(--lamp) inset; }
.pod.empty .pn { color: var(--muted); font-weight: 500; font-size: 11px; white-space: normal; line-height: 1.25; }
.pod.empty .medal, .pod.empty .block { opacity: 0.45; }
.podium.compact { gap: 3px; padding: 0; }
.podium.compact .pod { gap: 2px; }
.podium.compact .crown { width: 22px; height: 22px; }
.podium.compact .medal { width: 20px; height: 20px; font-size: 11px; }
.podium.compact .pn { font-size: 12px; }
.podium.compact .pod.p1 .pn { font-size: 13px; }
.podium.compact .pv { font-size: 11px; }
.podium.compact .pod.p1 { --h: 44px; } .podium.compact .pod.p2 { --h: 32px; } .podium.compact .pod.p3 { --h: 24px; }
.podium.compact .block { font-size: 13px; padding-top: 3px; }
/* 창(설정·랭킹·결과·일시정지) */
.modal { background: rgba(6, 8, 9, 0.62); z-index: 40; }
.sheet { width: min(520px, 100%); max-height: min(720px, 100%); overflow-y: auto; display: grid; gap: 14px; align-content: start; padding: 18px; background: #141a1d; border: 1px solid var(--line-hi); border-radius: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); touch-action: pan-y; -webkit-user-select: text; user-select: text; }
.sheet header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sheet h3 { margin: 0; font-family: var(--f-display); font-weight: var(--f-display-w); font-size: 24px; }
.x { width: 40px; height: 40px; border-radius: 9px; border: 1px solid var(--line); background: transparent; font-size: 20px; line-height: 1; color: var(--muted); }
.x:hover { color: var(--paper); border-color: var(--muted); }
#mBody { display: grid; gap: 14px; color: var(--paper); }
#mBody table { width: 100%; border-collapse: collapse; font-size: 13px; }
#mBody td { padding: 6px 2px; border-top: 1px solid var(--line); }
#mBody td:last-child { text-align: right; font: 600 14px var(--f-mono); font-variant-numeric: tabular-nums; }
.run-score { display: grid; justify-items: center; gap: 2px; }
.run-score b { font: 700 46px/1 var(--f-mono); color: var(--gold); }
.run-score span { font-size: 12px; color: var(--muted); }
.run-score .new { margin-top: 6px; padding: 3px 7px; border-radius: 7px; font: 700 10.5px/1 var(--f-mono); color: #1a1208; background: var(--gold); }
.run-rank { margin: 0; text-align: center; font-size: 15px; font-weight: 700; color: var(--lamp); word-break: keep-all; }
.run-rank .btn { margin-left: 6px; min-height: 34px; padding: 6px 10px; font-size: 13px; }
.sheet-foot { display: flex; gap: 8px; flex-wrap: wrap; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--line); }
.sheet-foot .btn { flex: 1 1 auto; }
/* 분할 탭 */
.stabs { display: flex; gap: 4px; padding: 3px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line); border-radius: 9px; }
.stabs button { flex: 1; min-width: 0; padding: 6px 8px; font-size: 12.5px; border-radius: 6px; background: transparent; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stabs button[aria-selected="true"] { background: var(--tray-hi); color: var(--paper); box-shadow: inset 0 0 0 1px var(--line-hi); }
/* 랭킹 창 */
.board-me { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--lamp-tint); border: 1px solid rgba(240, 171, 69, 0.35); font-size: 13px; }
.board-me b { font: 600 14px var(--f-mono); color: var(--lamp); }
.board-list { list-style: none; margin: 0; padding: 0; display: grid; }
.board-list li { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 8px; padding: 8px 4px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.board-list li .r { font: 600 13px var(--f-mono); color: var(--muted); }
.board-list li .n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.board-list li .n small { margin-left: 6px; color: var(--muted); font-size: 12px; }
.board-list li .v { font: 600 14px var(--f-mono); }
.board-list li.me { background: var(--lamp-tint); border-radius: 6px; }
.board-state { padding: 18px 4px; text-align: center; color: var(--muted); font-size: 13px; }
/* 설정 */
.set-sec { display: grid; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.015); }
.set-sec h4 { margin: 0; font: 600 12px/1.2 var(--f-body); letter-spacing: 0.06em; color: var(--muted); text-transform: uppercase; }
.field { display: grid; gap: 8px; }
.field > label { font-size: 12.5px; color: var(--muted); }
.field .row { display: flex; align-items: center; gap: 10px; }
.field .row > :first-child { flex: 1; }
.field output { font: 600 12px var(--f-mono); color: var(--paper); min-width: 3.5em; text-align: right; }
.field select, .field input[type="text"] { min-height: 42px; padding: 8px 10px; font-size: 16px; border-radius: 9px; border: 1px solid var(--line-hi); background: var(--tray-hi); color: var(--paper); font-family: var(--f-body); }
.field input[type="range"] { width: 100%; accent-color: var(--blood-ink); }
.seg { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.seg button { display: grid; gap: 2px; padding: 9px 8px; border-radius: 9px; border: 1px solid var(--line); background: var(--tray-hi); text-align: left; }
.seg button b { font-size: 14px; }
.seg button span { font-size: 11px; color: var(--muted); }
.seg button[aria-pressed="true"] { border-color: var(--blood-ink); box-shadow: inset 0 0 0 1px var(--blood-ink); }
.note { margin: 0; font-size: 12px; color: var(--muted); }
#loadbar { display: none; }

/* 넓은 화면: 아래 줄 가운데 */
@media (min-width: 900px) {
  #dock { left: 50%; right: auto; transform: translateX(-50%); width: min(980px, 96vw); background: none; }
  #dock .row, #dock .tabs { background: var(--panel); border-radius: 16px; padding: 6px 8px; border: 1px solid var(--line); }
  #dock .tabs { margin-bottom: 6px; }
  .card { width: 82px; }
  .card img { width: 66px; height: 66px; }
  #toast { bottom: 170px; }
}
@media (max-width: 480px) {
  #hud { gap: 4px; left: 6px; right: 6px; }
  .pill { padding: 4px 8px; } .pill b { font-size: 15px; }
  .hpbox { flex: 1 1 90px; padding: 3px 8px 5px; } .hplabel span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 64px; }
  .pill.score { display: none; }
  .wavebox { padding: 3px 8px; margin: 0; flex: 0 0 auto; } .wavebox b { font-size: 13px; white-space: nowrap; }
  .ib { width: 34px; height: 34px; border-radius: 10px; }
  #viewBtns { top: calc(54px + var(--safe-t)); }
  #banner b { font-size: 24px; } #banner small { font-size: 12px; max-width: 86vw; margin: 2px auto 0; }
  .card { width: 66px; } .card img { width: 52px; height: 52px; }
  #bWave { flex-basis: 80px; }
}