/* 야미우치 — 화면은 640×360 픽셀 기준으로 짜고 통째로 정수배 확대한다. 글꼴도 픽셀 글꼴. */
@font-face { font-family: "Galmuri11"; src: url("../assets/fonts/Galmuri11.woff2") format("woff2"); font-weight: 400; font-display: block; }
@font-face { font-family: "Galmuri11"; src: url("../assets/fonts/Galmuri11-Bold.woff2") format("woff2"); font-weight: 700; font-display: block; }
@font-face { font-family: "Galmuri9"; src: url("../assets/fonts/Galmuri9.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Galmuri14"; src: url("../assets/fonts/Galmuri14.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "DotGothic16"; src: url("../assets/fonts/DotGothic16-Regular.ttf") format("truetype"); font-display: block; }

:root {
  --px: "Galmuri11", "DotGothic16", monospace;      /* 12px 배수로 쓴다 */
  --px-s: "Galmuri9", "Galmuri11", monospace;       /* 10px */
  --px-l: "Galmuri14", "Galmuri11", monospace;      /* 15px 배수 */
  --kanji: "DotGothic16", "Galmuri11", monospace;   /* 16px 배수 */
  --bg0: #0c0b0f; --bg1: #1a1720; --line: #3a3442;
  --gold: #b79a5b; --gold-hi: #ecd79c; --txt: #e9dfc7; --dim: #a0967f; --faint: #615a4c;
  --red: #a3241c; --red-hi: #e2493c; --blue: #8ea0c4;
  /* 닌자 모드 등에서 함께 쓰는 이름 */
  --washi: #e9dfc7; --sumi: #17130e; --shu: #b3261e; --ember: #f2b45c; --moon: #8ea0c4;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #000; overflow: hidden; }
body { font-family: var(--px); font-size: 12px; line-height: 16px; color: var(--txt); user-select: none; -webkit-font-smoothing: none; word-break: keep-all; }
#frame { position: absolute; background: #000; overflow: hidden; }
#cv { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
#ui { position: absolute; left: 0; top: 0; width: 640px; height: 360px; transform-origin: 0 0; }
.hidden { display: none !important; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { image-rendering: pixelated; }

/* ── 창 ──────────────────────────────────────────────── */
.win {
  position: relative; background-color: rgba(12, 11, 15, .95); border: 1px solid var(--gold); outline: 1px solid #000;
  box-shadow: inset 0 0 0 1px #000, inset 0 0 0 2px var(--line), 3px 3px 0 rgba(0, 0, 0, .55);
  background-image: linear-gradient(var(--gold-hi), var(--gold-hi)), linear-gradient(var(--gold-hi), var(--gold-hi)), linear-gradient(var(--gold-hi), var(--gold-hi)), linear-gradient(var(--gold-hi), var(--gold-hi));
  background-size: 3px 3px; background-repeat: no-repeat; background-position: 0 0, 100% 0, 0 100%, 100% 100%;
  padding: 10px 12px;
}
.win > h2 { font-family: var(--px-l); font-size: 15px; line-height: 18px; font-weight: 400; color: var(--gold-hi); padding-bottom: 5px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.win p { color: var(--dim); }
.win p + p { margin-top: 6px; }
.dim { color: var(--dim); } .faint { color: var(--faint); } .gold { color: var(--gold-hi); } .red { color: var(--red-hi); }
.kc { display: inline-block; font-family: var(--px-s); font-size: 10px; line-height: 11px; color: var(--txt); border: 1px solid var(--faint); border-bottom-width: 2px; padding: 0 3px; margin: 0 1px; background: #15131a; vertical-align: 1px; }
.center { position: absolute; inset: 0; display: grid; place-items: center; }
.row { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }

.btn { font-family: var(--px); font-size: 12px; line-height: 16px; color: var(--txt); background: var(--bg1); border: 1px solid var(--gold); outline: 1px solid #000; padding: 3px 12px 4px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .45); }
.btn:hover:not(:disabled), .btn:focus-visible { background: var(--red); border-color: var(--gold-hi); outline: 1px solid #000; }
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
.btn:disabled { color: var(--faint); border-color: var(--line); cursor: default; }
.btn.plain { border-color: var(--line); color: var(--dim); }
input { font: inherit; color: var(--txt); background: #000; border: 1px solid var(--line); outline: 1px solid #000; padding: 3px 6px 4px; width: 120px; }
input:focus { border-color: var(--gold-hi); }
input::placeholder { color: var(--faint); }
#code { width: 72px; letter-spacing: 4px; text-transform: uppercase; text-align: center; }
label.field { display: flex; align-items: center; gap: 8px; color: var(--dim); margin-top: 10px; }

/* 커서 메뉴 */
.menu { display: flex; flex-direction: column; }
.menu button { position: relative; text-align: left; height: 22px; padding: 0 8px 0 20px; color: var(--dim); }
.menu button b { font-weight: 400; font-family: var(--px-l); font-size: 15px; line-height: 22px; }
.menu button.sel { color: #fff; background: linear-gradient(90deg, var(--red), rgba(163, 36, 28, 0) 92%); }
.menu button.sel::before { content: ""; position: absolute; left: 7px; top: 7px; width: 6px; height: 8px; background: var(--gold-hi); clip-path: polygon(0 0, 100% 50%, 0 100%); animation: nudge .6s steps(2) infinite; }
.menu button.off { color: var(--faint); }
.menu button small { font-family: var(--px-s); font-size: 10px; color: var(--gold); margin-left: 6px; }
@keyframes nudge { 50% { transform: translateX(2px); } }

/* ── 늘 떠 있는 것: 뒤로, 조작 안내, 알림, 묻기 ────── */
#back { position: absolute; left: 8px; top: 8px; z-index: 20; }
#hint { position: absolute; right: 10px; bottom: 6px; z-index: 6; font-family: var(--px-s); font-size: 10px; color: var(--dim); display: flex; gap: 10px; text-shadow: 1px 1px 0 #000; pointer-events: none; }
#toast { position: absolute; left: 50%; top: 30px; transform: translateX(-50%); z-index: 30; white-space: nowrap; padding: 5px 12px; opacity: 0; pointer-events: none; transition: opacity .15s steps(3); }
#toast.on { opacity: 1; }
#modal { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(0, 0, 0, .6); }
#modal .win { min-width: 220px; text-align: center; }
#modal .row { justify-content: center; }

/* ── 첫 화면 · 타이틀 ───────────────────────────────── */
.screen { position: absolute; inset: 0; }
.s-gate { display: grid; place-items: center; background: #000; cursor: pointer; text-align: center; }
.gate b { display: block; font-family: var(--kanji); font-weight: 400; font-size: 32px; line-height: 40px; color: var(--txt); margin-bottom: 10px; }
.gate small { display: block; font-family: var(--px-s); font-size: 10px; color: var(--faint); margin-top: 4px; }
.s-title { cursor: pointer; }
.logo { position: absolute; left: 0; right: 0; top: 54px; text-align: center; }
.logo .k { font-family: var(--kanji); font-size: 80px; line-height: 84px; color: var(--txt); letter-spacing: 6px; text-shadow: 4px 4px 0 #000, -1px 0 0 #000, 0 -1px 0 #000, 4px 0 0 #000, 0 4px 0 #000; }
.logo .k i { font-style: normal; color: var(--red-hi); }
.logo .n { display: inline-block; margin-top: 8px; font-family: var(--px-l); font-size: 15px; line-height: 18px; letter-spacing: 12px; text-indent: 12px; color: #fff; background: var(--red); padding: 1px 4px 2px; box-shadow: 2px 2px 0 #000; }
.press { position: absolute; left: 0; right: 0; bottom: 34px; text-align: center; font-family: var(--px-l); font-size: 15px; color: var(--txt); text-shadow: 2px 2px 0 #000; animation: blink 1.1s steps(1) infinite; }
.copy { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-family: var(--px-s); font-size: 10px; color: var(--faint); text-shadow: 1px 1px 0 #000; }
@keyframes blink { 50% { opacity: 0; } }
.s-title.out .logo, .s-title.out .press, .s-title.out .copy { opacity: 0; transition: opacity .5s steps(4); }

/* ── 로비 ────────────────────────────────────────────── */
.lobby-menu { position: absolute; left: 28px; top: 92px; width: 168px; }
.lobby-logo { position: absolute; left: 28px; top: 42px; font-family: var(--kanji); font-size: 32px; line-height: 36px; color: var(--txt); text-shadow: 2px 2px 0 #000; }
.lobby-logo small { font-family: var(--px-l); font-size: 15px; color: #fff; background: var(--red); padding: 0 4px 1px; margin-left: 8px; vertical-align: 6px; box-shadow: 2px 2px 0 #000; }
.lobby-desc { position: absolute; left: 28px; right: 28px; bottom: 22px; padding: 7px 12px; }
.lobby-desc b { font-weight: 400; color: var(--gold-hi); font-family: var(--px-l); font-size: 15px; margin-right: 10px; }

/* ── 룰렛 ────────────────────────────────────────────── */
#roulette { position: absolute; inset: 0; z-index: 5; background: rgba(0, 0, 0, .72); }
.rl-head { position: absolute; left: 0; right: 0; top: 34px; text-align: center; }
.rl-title { font-family: var(--px-l); font-size: 30px; line-height: 34px; color: var(--txt); text-shadow: 2px 2px 0 #000; }
.rl-sub { margin-top: 6px; color: var(--dim); }
.rl-reels { position: absolute; left: 0; right: 0; top: 112px; display: flex; justify-content: center; gap: 10px; }
.reel { width: 108px; text-align: center; }
.reel-label { font-family: var(--px-s); font-size: 10px; color: var(--gold); margin-bottom: 4px; }
.reel-win { position: relative; height: 114px; padding: 0; overflow: hidden; }   /* 3칸 × 38px */
.reel-strip { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.ri { height: 38px; display: flex; align-items: center; gap: 6px; padding: 0 8px; text-align: left; }
.ri .ic { width: 34px; height: 30px; flex: none; display: grid; place-items: center; }
.ri img { max-width: 34px; max-height: 30px; }
.ri img.photo { width: 34px; height: 26px; object-fit: cover; outline: 1px solid #000; }
.ri b { font-family: var(--kanji); font-weight: 400; font-size: 24px; line-height: 30px; color: var(--txt); }
.ri span { font-family: var(--px-s); font-size: 10px; line-height: 12px; color: var(--txt); }
.reel-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(0, 0, 0, .8) 0 38px, transparent 38px 76px, rgba(0, 0, 0, .8) 76px); }
.reel-pick { position: absolute; left: 1px; right: 1px; top: 38px; height: 38px; pointer-events: none; border: 1px solid var(--gold); box-shadow: inset 0 0 0 1px #000; }
.reel.locked .reel-pick { border-color: #fff; background: rgba(226, 73, 60, .22); animation: flash .3s steps(3); }
@keyframes flash { 0% { background: rgba(255, 255, 255, .8); } }
.reel-stamp { position: absolute; right: 2px; top: 29px; z-index: 1; width: 16px; height: 16px; background: var(--red); color: #fff; font-family: var(--kanji); font-size: 16px; line-height: 16px; text-align: center; opacity: 0; box-shadow: 1px 1px 0 #000; }
.reel.locked .reel-stamp { opacity: 1; animation: stamp .2s steps(3); }
@keyframes stamp { 0% { transform: scale(3); opacity: 0; } }
.reel-name { margin-top: 6px; height: 16px; color: var(--gold-hi); opacity: 0; }
.reel.locked .reel-name { opacity: 1; }
.rl-foot { position: absolute; left: 0; right: 0; top: 276px; text-align: center; color: var(--dim); opacity: 0; }
#roulette.done .rl-foot { opacity: 1; }

/* 촛불(목숨) */
.cdl { display: inline-flex; gap: 4px; vertical-align: -2px; }
.cdl i { position: relative; width: 4px; height: 9px; margin-top: 5px; background: #d8cdb0; box-shadow: inset -1px 0 0 #a89c80; }
.cdl i::before { content: ""; position: absolute; left: 1px; top: -5px; width: 2px; height: 4px; background: #ffd27a; box-shadow: 0 1px 0 1px #ff8a2a; }
.cdl i.out { background: #4a453c; box-shadow: none; }
.cdl i.out::before { display: none; }

/* ── 보상 고르기 ─────────────────────────────────────── */
.draft-head { position: absolute; left: 0; right: 0; top: 36px; text-align: center; }
.draft-head h2 { font-family: var(--px-l); font-size: 30px; line-height: 34px; font-weight: 400; text-shadow: 2px 2px 0 #000; }
.draft-head p { color: var(--dim); margin-top: 4px; }
.draft-row { position: absolute; left: 0; right: 0; top: 102px; display: flex; justify-content: center; gap: 14px; }
.pick { width: 150px; height: 178px; text-align: center; display: flex; flex-direction: column; align-items: center; cursor: pointer; }
.pick .kind { font-family: var(--px-s); font-size: 10px; color: var(--gold); }
.pick .k { font-family: var(--kanji); font-size: 48px; line-height: 56px; margin-top: 4px; color: var(--txt); }
.pick .n { font-family: var(--px-l); font-size: 15px; line-height: 18px; color: var(--gold-hi); margin-top: 2px; }
.pick .d { color: var(--dim); margin-top: 6px; }
.pick .key { margin-top: auto; }
.pick:hover, .pick:focus-visible { border-color: #fff; background-color: #1f1016; transform: translateY(-3px); }
.draft-foot { position: absolute; left: 0; right: 0; top: 296px; display: flex; justify-content: center; align-items: center; gap: 14px; color: var(--dim); }

/* ── 방 ──────────────────────────────────────────────── */
.room-code { font-family: var(--kanji); font-size: 32px; line-height: 36px; letter-spacing: 6px; color: var(--gold-hi); }
.tabs { display: flex; gap: 4px; }
.tab { height: 20px; padding: 0 10px; color: var(--dim); border: 1px solid var(--line); background: var(--bg0); }
.tab.on { color: #fff; background: var(--red); border-color: var(--gold-hi); }
.tab small { font-family: var(--px-s); font-size: 10px; color: inherit; opacity: .7; margin-left: 4px; }
.tab:disabled { cursor: default; }
.seats { display: flex; gap: 6px; margin-top: 10px; }
.seat { flex: 1; min-width: 0; height: 52px; padding: 6px 8px; border: 1px solid var(--line); background: var(--bg1); }
.seat b { display: block; font-weight: 400; color: var(--txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat span { font-family: var(--px-s); font-size: 10px; color: var(--dim); }
.seat.me { border-color: var(--gold-hi); }
.seat.ok span { color: #8fce7a; }
.seat.empty { border-style: dashed; background: none; }
.seat.empty b { color: var(--faint); }

/* ── 결과 ────────────────────────────────────────────── */
.verdict { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; background: rgba(0, 0, 0, .7); }
.verdict .k { font-family: var(--kanji); font-size: 112px; line-height: 116px; color: var(--txt); text-shadow: 4px 4px 0 #000; animation: slam .25s steps(4); }
.verdict .k.lose { color: var(--red-hi); }
.verdict p { color: var(--txt); margin-top: 6px; text-shadow: 1px 1px 0 #000; }
.verdict .row { justify-content: center; margin-top: 16px; }
@keyframes slam { 0% { transform: scale(2.4); opacity: 0; } }

/* ── 도감 ────────────────────────────────────────────── */
.codex { position: absolute; inset: 30px 16px 22px 16px; display: grid; grid-template-columns: 188px 1fr; grid-template-rows: 22px 1fr; gap: 0 8px; }
.cx-tabs { grid-column: 1 / 3; display: flex; gap: 3px; padding-left: 72px; }
.cx-list { overflow-y: auto; padding: 6px 4px 6px 6px; scrollbar-width: thin; scrollbar-color: var(--gold) #000; }
.cx-item { display: flex; align-items: center; gap: 6px; width: 100%; height: 22px; padding: 0 4px; text-align: left; color: var(--dim); }
.cx-item .g { width: 30px; height: 20px; flex: none; display: grid; place-items: center; font-family: var(--kanji); font-size: 16px; color: var(--txt); overflow: hidden; }
.cx-item .g img { max-width: 30px; max-height: 18px; }
.cx-item .g img.photo { width: 30px; height: 18px; object-fit: cover; }
.cx-item:hover { color: var(--txt); }
.cx-item.on { color: #fff; background: linear-gradient(90deg, var(--red), rgba(163, 36, 28, 0)); }
.cx-page { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--gold) #000; display: flex; flex-direction: column; }
.cx-top { display: flex; gap: 12px; }
.cx-art { width: 170px; height: 74px; flex: none; background: #000; border: 1px solid var(--line); display: grid; place-items: center; overflow: hidden; }
.cx-art img { max-width: 100%; max-height: 100%; }
.cx-art img.photo { width: 100%; height: 100%; object-fit: cover; }
.cx-art b { font-family: var(--kanji); font-weight: 400; font-size: 64px; line-height: 68px; color: var(--txt); }
.cx-name { font-family: var(--px-l); font-size: 30px; line-height: 34px; color: var(--txt); }
.cx-desc { color: var(--dim); margin-top: 4px; }
.pc { display: grid; grid-template-columns: auto 1fr; gap: 3px 8px; margin-top: 7px; }
.pc dt { font-family: var(--px-s); font-size: 10px; line-height: 14px; height: 15px; padding: 0 4px; color: var(--gold-hi); border: 1px solid var(--line); white-space: nowrap; align-self: start; margin-top: 1px; }
.pc dt.pro { color: #8fce7a; border-color: #3c5a34; }
.pc dt.con { color: var(--red-hi); border-color: #6a2620; }
.pc dd { color: var(--txt); }
.pc dd small { display: block; font-family: var(--px-s); font-size: 10px; line-height: 13px; color: var(--faint); }
.cx-try { margin-top: auto; padding-top: 6px; display: flex; align-items: center; gap: 10px; color: var(--faint); font-family: var(--px-s); font-size: 10px; }
.cx-rules { columns: 2; column-gap: 16px; }
.cx-rules section { break-inside: avoid; margin-bottom: 10px; }
.cx-rules h3 { font-weight: 400; color: var(--gold-hi); }
.cx-rules p { color: var(--dim); }

/* ── 결투 HUD ────────────────────────────────────────── */
#hud { position: absolute; inset: 0; pointer-events: none; }
#top { position: absolute; top: 11px; left: 140px; right: 10px; display: flex; justify-content: space-between; align-items: flex-start; text-shadow: 1px 1px 0 #000; }
#duelno { color: var(--dim); font-family: var(--px-s); font-size: 10px; }
#relics { display: flex; gap: 3px; }
#relics span { width: 18px; height: 18px; font-family: var(--kanji); font-size: 16px; line-height: 17px; text-align: center; color: var(--gold-hi); background: var(--bg0); border: 1px solid var(--line); }
#banner { position: absolute; top: 50px; left: 0; right: 0; text-align: center; transition: opacity .3s steps(4); text-shadow: 2px 2px 0 #000; }
#banner .b-place { font-family: var(--px-l); font-size: 30px; line-height: 34px; color: var(--txt); }
#banner .b-foe { color: var(--txt); margin-top: 6px; text-shadow: 1px 1px 0 #000; }
#banner .b-note { color: var(--dim); margin-top: 2px; text-shadow: 1px 1px 0 #000; }
#banner .b-weapon { display: inline-block; margin-top: 10px; padding: 4px 10px; background: rgba(12, 11, 15, .9); border: 1px solid var(--gold); color: var(--txt); text-shadow: none; }
#banner .b-weapon b { font-weight: 400; color: var(--gold-hi); margin-right: 6px; }
#banner.kill { top: 84px; }
#banner.kill .k { font-family: var(--kanji); font-size: 96px; line-height: 100px; color: var(--txt); text-shadow: 4px 4px 0 #000; animation: slam .25s steps(4); }
#banner.kill .k.lose { color: var(--red-hi); }
#bottom { position: absolute; left: 0; right: 0; bottom: 6px; display: flex; flex-direction: column; align-items: center; gap: 3px; }
#status { height: 12px; font-family: var(--px-s); font-size: 10px; line-height: 12px; color: var(--blue); text-shadow: 1px 1px 0 #000; }
#status .bad { color: var(--red-hi); }
#breathwrap { width: 120px; height: 4px; background: #000; border: 1px solid var(--line); }
#breath { height: 100%; width: 100%; background: var(--blue); }
#breath.gasp { background: var(--red-hi); }
#hand { display: flex; gap: 4px; }
.slot { position: relative; width: 92px; height: 35px; padding: 2px 4px 2px 22px; text-align: left; background: rgba(12, 11, 15, .92); border: 1px solid var(--line); outline: 1px solid #000; overflow: hidden; }
.slot .key { position: absolute; left: 3px; top: 3px; }
.slot .k { position: absolute; left: 2px; top: 16px; width: 18px; text-align: center; font-family: var(--kanji); font-size: 16px; line-height: 16px; color: var(--gold-hi); }
.slot .n { display: block; font-family: var(--px-s); font-size: 10px; line-height: 12px; color: var(--txt); margin-top: 1px; }
.slot.weapon { width: 132px; border-color: var(--gold); }
.slot.weapon img { position: absolute; left: 2px; top: 17px; max-width: 19px; max-height: 15px; }
.slot .meter { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--gold-hi); }
.slot.empty .k, .slot.empty .n { visibility: hidden; }
.slot.busy { filter: brightness(.6); }
.slot.sealed { border-color: var(--red-hi); }
.pips { display: flex; gap: 2px; margin-top: 2px; }
.pips i { width: 5px; height: 5px; border: 1px solid var(--dim); }
.pips i.on { background: var(--dim); }
.pips i.live { background: var(--red-hi); border-color: var(--red-hi); }
.pips i.used { opacity: .25; }
#keys { font-family: var(--px-s); font-size: 10px; line-height: 12px; color: var(--faint); text-shadow: 1px 1px 0 #000; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ── 점수 칸 ─────────────────────────────────────────── */
.score { display: inline-flex; gap: 3px; vertical-align: -1px; }
.score i { width: 8px; height: 8px; border: 1px solid var(--gold); background: #000; box-shadow: 1px 1px 0 #000; }
.score i.on { background: var(--gold-hi); border-color: #fff; }

/* ── 설정 화면 (◀ 값 ▶) ─────────────────────────────── */
.opt-wrap { display: flex; gap: 10px; align-items: flex-start; }
.opt { width: 320px; }
.opt-row { display: flex; align-items: center; height: 22px; padding: 0 6px; color: var(--dim); }
.opt-row.sel { color: #fff; background: linear-gradient(90deg, var(--red), rgba(163, 36, 28, 0) 95%); }
.opt-row.off { color: var(--faint); }
.opt-l { width: 70px; flex: none; }
.opt-v { flex: 1; text-align: center; color: var(--txt); }
.opt-row.sel .opt-v { color: var(--gold-hi); }
.opt-row.off .opt-v { color: var(--faint); }
.opt-a { width: 16px; color: var(--gold); font-size: 10px; }
.opt-row.off .opt-a { visibility: hidden; }
.opt-d { min-height: 32px; margin-top: 6px; padding: 4px 6px; color: var(--dim); border-top: 1px solid var(--line); }
.char-card { width: 150px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.char-card { overflow: hidden; }
.char-card img { width: 170px; height: 84px; max-width: none; margin: -8px -10px -4px; }
.char-card b { display: block; font-weight: 400; color: var(--gold-hi); font-family: var(--px-l); font-size: 15px; }
.char-card span { font-family: var(--px-s); font-size: 10px; }

/* ── 캐릭터 고르기 ───────────────────────────────────── */
.chars { position: absolute; inset: 32px 16px 22px 16px; display: grid; grid-template-columns: 140px 1fr; gap: 8px; }
.ch-list { overflow-y: auto; padding: 6px; scrollbar-width: thin; scrollbar-color: var(--gold) #000; }
.ch-main { display: flex; flex-direction: column; }
.ch-top { display: flex; gap: 12px; }
#chPrev { width: 340px; height: 128px; flex: none; image-rendering: pixelated; border: 1px solid var(--line); background: #000; }
.ch-info { min-width: 0; max-height: 128px; overflow: hidden; }
.ch-info p { font-family: var(--px-s); font-size: 10px; line-height: 13px; }
.ch-note { font-family: var(--px-s); font-size: 10px; line-height: 13px; margin: 8px 4px 0; }
.ch-info p { margin-top: 3px; }
.ch-rows { margin-top: 4px; }
.ch-row { display: flex; align-items: center; height: 18px; padding: 0 6px; color: var(--dim); }
.ch-row.sel { color: #fff; background: linear-gradient(90deg, var(--red), rgba(163, 36, 28, 0) 95%); }
.ch-row input { width: 140px; padding: 1px 6px 2px; }
.sws { display: flex; gap: 3px; }
.sw { width: 13px; height: 13px; border: 1px solid #000; outline: 1px solid var(--line); }
.sw:hover { outline-color: var(--gold); }
.sw.on { outline: 2px solid #fff; z-index: 1; }
.ch-main .row { margin-top: auto; padding-top: 6px; }

/* 방: 판수 줄과 자리의 캐릭터 */
.tabs.fmt { margin-top: 6px; }
.seat { position: relative; padding-left: 52px; overflow: hidden; }
.seat img { position: absolute; left: -16px; top: -4px; width: 85px; height: 42px; }
.seat.empty { padding-left: 8px; }

/* ── 터치 (휴대폰 · 태블릿) ─────────────────────────────
   버튼 크기는 실제 화면 기준. 엄지가 닿는 양쪽 아래 구석에 둔다. */
html, body { overscroll-behavior: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
body.touch #hint, body.touch .kc, body.touch #keys, body.touch #hand, body.touch .nj-bottom { display: none !important; }
body.touch #back { padding: 6px 14px 7px; }
body.touch .opt-a { width: 30px; height: 22px; font-size: 13px; }
body.touch .menu button { height: 26px; }
body.touch .sw { width: 18px; height: 16px; }
body.touch .ch-row { height: 21px; }
body.touch .cx-item { height: 25px; }
body.touch .tab { height: 23px; }

#touch { position: fixed; inset: 0; z-index: 50; pointer-events: none; --u: clamp(46px, 12vh, 86px); font-family: var(--px); user-select: none; -webkit-user-select: none; touch-action: none; }
#touch .tz { position: absolute; display: flex; flex-direction: column; gap: calc(var(--u) * .16); pointer-events: none; }
#touch .tz-l { left: max(14px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); align-items: flex-start; }
#touch .tz-r { right: max(14px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); align-items: flex-end; }
#touch .tz-t { right: max(14px, env(safe-area-inset-right)); top: calc(max(10px, env(safe-area-inset-top)) + 4px); flex-direction: row; }
#touch .tz-c { left: 50%; bottom: 18%; transform: translateX(-50%); flex-direction: row; gap: 16px; }
#touch .trow { display: flex; gap: calc(var(--u) * .16); align-items: flex-end; }
.tb {
  position: relative; pointer-events: auto; width: var(--u); height: var(--u); border-radius: 50%; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  color: var(--txt); background: rgba(12, 11, 15, .58); border: 2px solid rgba(183, 154, 91, .75); box-shadow: 0 0 0 2px rgba(0, 0, 0, .55);
  font: inherit; touch-action: none;
}
.tb b { font-family: var(--kanji); font-weight: 400; font-size: calc(var(--u) * .38); line-height: 1; color: var(--gold-hi); text-shadow: 1px 1px 0 #000; }
.tb span { font-family: var(--px-s); font-size: clamp(9px, calc(var(--u) * .16), 13px); line-height: 1.15; color: var(--txt); text-shadow: 1px 1px 0 #000; max-width: 92%; text-align: center; word-break: keep-all; }
.tb em { position: absolute; right: 16%; top: 12%; font-style: normal; font-family: var(--px-s); font-size: clamp(9px, calc(var(--u) * .17), 13px); color: #fff; background: var(--red); padding: 0 3px; }
.tb u { position: absolute; left: 0; right: 0; top: 0; background: rgba(0, 0, 0, .55); text-decoration: none; pointer-events: none; }
.tb.down { background: rgba(163, 36, 28, .78); border-color: #fff; transform: scale(.94); }
.tb.lock { background: rgba(70, 90, 140, .78); border-color: var(--blue); }
.tb.off { opacity: .38; }
.tb.big { width: calc(var(--u) * 1.2); height: calc(var(--u) * 1.2); }
.tb.huge { width: calc(var(--u) * 1.55); height: calc(var(--u) * 1.55); border-width: 3px; }
.tb.huge b { font-size: calc(var(--u) * .56); }
.tb.mid { width: calc(var(--u) * 1); height: calc(var(--u) * 1); }
.tb.small { width: calc(var(--u) * .82); height: calc(var(--u) * .82); }
.tb.small b { font-size: calc(var(--u) * .3); }
.tb.card { width: calc(var(--u) * .92); height: calc(var(--u) * .92); border-radius: 12%; }
.tb.wide { width: auto; height: calc(var(--u) * .78); border-radius: 6px; padding: 0 22px; }
.tb.wide b { font-family: var(--px-l); font-size: 17px; color: var(--txt); }
#touch .tcards { display: flex; gap: calc(var(--u) * .14); }
#touch .tgrid { display: grid; grid-template-columns: repeat(3, auto); gap: calc(var(--u) * .12); justify-items: center; }
.tstick { position: relative; pointer-events: auto; width: calc(var(--u) * 2.1); height: calc(var(--u) * 2.1); border-radius: 50%; background: rgba(12, 11, 15, .42); border: 2px solid rgba(183, 154, 91, .55); touch-action: none; }
.tstick::before { content: ""; position: absolute; inset: 22%; border-radius: 50%; border: 1px dashed rgba(183, 154, 91, .35); }
.tstick i { position: absolute; left: 50%; top: 50%; width: 42%; height: 42%; margin: -21% 0 0 -21%; border-radius: 50%; background: rgba(183, 154, 91, .55); border: 2px solid var(--gold-hi); }

/* 세로로 들면 */
#rotate { position: fixed; inset: 0; z-index: 90; display: none; place-items: center; text-align: center; background: #000; color: var(--txt); font-family: var(--px-l); font-size: 18px; line-height: 30px; }
#rotate b { display: block; font-family: var(--kanji); font-weight: 400; font-size: 48px; line-height: 60px; color: var(--gold-hi); }
@media (orientation: portrait) { body.touch #rotate { display: grid; } }
#fs { position: absolute; right: 8px; top: 8px; z-index: 20; }
/* 작은 버튼: 이름 아래 남은 수 */
.tb.small em, .tb.card em { position: static; display: block; background: none; padding: 0; color: var(--gold-hi); font-size: clamp(10px, calc(var(--u) * .2), 14px); line-height: 1; margin-top: 1px; text-shadow: 1px 1px 0 #000; }
#touch .tgrid .tb.small { width: calc(var(--u) * .9); height: calc(var(--u) * .9); }
body.touch .nj-guide p:nth-child(n+2) { display: none; }
body.touch .lobby-logo { top: 48px; }