/* 동그라미 던전 — 화면 스타일
   포켓몬 바코드 게임(이수재의 전송 사고) 정책서 P18·P72와 같은 규칙을 따른다.
   - 도트: 둥근 모서리·흐린 그림자·그라데이션·반투명·흐림 금지. 그림자는 밀어 놓은 단색 블록. 그림은 정수배.
   - 색: 16색 팔레트(+ 던전 벽용 밤 색 셋). js/pixel.js 의 PX.P 와 같은 값.
   - 글자: Galmuri 기본 크기의 정수배만. Galmuri11 11·13·15px(작은 딱지·좁은 화면) · Galmuri9 18px(본문) · Galmuri11B 22·33·44·66px(제목·숫자)
   - 단추: 한 줄에 놓인 단추는 높이·폭·끝을 맞춘다(.btn-row). 글자는 한 줄, 넘치면 … ("버튼 와꾸 안 맞는 거는 절대 안 돼")
   - 선택·포커스: 노란 테두리, 목록은 ▶ 커서 */
:root {
  --ink: #3b2f4a; --ink-soft: #5e4f70; --paper: #fff8ec; --paper-2: #f3e3c8;
  --sky: #a9dff2; --sky-light: #d8f3fa; --white: #ffffff;
  --grass: #8ed36f; --grass-dark: #63b35c; --grass-light: #c2ec92; --sand: #f3d59c;
  --pink: #ff9fc5; --pink-dark: #c2507f; --red: #f46b6b; --yellow: #ffd966; --blue: #6ea8ea;
  --night: #2a2338; --night-2: #3a3150; --night-3: #4a4062;
  --line: var(--ink);
  --btn-h: 48px; --btn-big-h: 52px;
  /* UI 판넬·단추 9분할 재료(16칸, 모서리 5칸): Retro Diffusion UI 키트의 단추에서 만든 것(art/ui, 화면 2배) */
  --ui-cream: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABLUlEQVR4AaSRQUsCURSFz9yFWIQkOkSa/YUW0bKVtIn+QrsgaNVqlu0bJIoIrHHnwk27aFeLMCoQWrVvE0ZYJCIoCo6cKzMMgoOOA+e9ex/nO+/Ne4LAl09l3G0zodrJpV1qvKcngMAP2Eom3KubIzhFS3V5fgxqvKdn18y5XogGcKFcstD//cZyZiVUBM+KhyDDWngkLrBZz+9hwVwL1erGJq0gQ1ZksacL3FmLGYaetCHd7ihgBk5/0fPrHXhNlHn+gHg8FmVjn5n/BH5UxMJ/hWb9Z+qIoFdigyUFP56qOk8zfNbe1UZWHv/qxv6BjWw2jZeSg07jK1T0SDIFMmT1Emv/LcMq3Gnqc+UWYaLJtu9BhrUGsKg2WsbJ9QNOy6+4qExWwXkDdyZDDQEAAP//RXjOFAAAAAZJREFUAwCNXp/PMnFPxgAAAABJRU5ErkJggg==);
  --ui-wood: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABi0lEQVR4AZRSMUtCURg9PkosRJ6VWaaBEA01NNVWENHSFkFTLf2GhpaGIBwcwoYKLFpcgohoaEgJKVpUTKIoCaIh0YIsMRWx6MW58h5WDr4L537f977vnHvu5UmoWRPtDmXUZtHAetLVoTAS7DHWUKAJTNlcis8zjc3VeQ2sdzxz2PXNgjl7jJxVRYTAiMmhbK3N4Pgkikjk9hdC4SsQ7KlYXhwD3VBEGrZalPWVcfgDQQz1u9DTaa0L9lScRe6FS15HODDLMsV0oyIVIJmaqjy3015NdO7CQeoxo4vW52yDpbVZcISAbG0RhZ4tX/oU45LJZIRZlqFn5QoVbVw4YMXXZ9QLqVyuIPv8gmKpqJcLuhcO2rvsqLXViBIfkYdL5a/q+GuuUE0a2GWzEbHYHYzfZkix97xhYSmAj0IRF5dJDAz2/oPT3Q0VnEkkn+D1X+M0mzaIK1AkdJ4TZ/OX/ou9gzA2to/g3b9B9i0PzkbLaQMJQoAJPxzGMwjGUnURf8gjGU+AkbPkED8AAAD//9rD5usAAAAGSURBVAMA+029Wdyb3f4AAAAASUVORK5CYII=);
  --ui-dark: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABEklEQVR4AaSRT2vCQBTEJ9vWbG3RtpoeREu/Q2lP7cXSS79ze/EoePTgQTyIKEENwT9rRCPzJCEIBo2Byb73mN/sZqOQeL5LlfDLKYh+auWQOuzpSSCIA94fC+Hy5QObal00L3+COuzp+XVqYRQiARzcvNYRBAa2nU8VQa/6BjKsFY/EAZtnp4JbrVP1UHyiFWTIKpUPZMCdpTjjFagZlDH7gDM4+cTIL3cQNVnWywO0zmXZOGYuP0EclbGI/8JqtTg5IulVue29gJ4/lPWU12zuiY2s+hsPrHXvH9dXGv1BF0tjUkUPaTJk5RKbU98qTlucY+R2U0WTM+6ADGsJYNFwfct2W7ibtFHyj4swdyZD7QAAAP//4/w+gAAAAAZJREFUAwAyX6DPLnxRAQAAAABJRU5ErkJggg==);
}

/* 글꼴은 두 겹: '-core'(자주 쓰는 한글 2,350자)를 먼저 쓰고 없는 글자만 전체 글꼴을 받는다 */
@font-face { font-family: 'Galmuri9'; src: url('../vendor/fonts/Galmuri9.woff2') format('woff2'); font-display: block; unicode-range: U+AC00-D7A3, U+3130-318F, U+1100-11FF; }
@font-face { font-family: 'Galmuri11'; src: url('../vendor/fonts/Galmuri11.woff2') format('woff2'); font-display: block; unicode-range: U+AC00-D7A3, U+3130-318F, U+1100-11FF; }
@font-face { font-family: 'Galmuri11B'; src: url('../vendor/fonts/Galmuri11-Bold.woff2') format('woff2'); font-display: block; unicode-range: U+AC00-D7A3, U+3130-318F, U+1100-11FF; }
@font-face { font-family: 'Galmuri9'; src: url('../vendor/fonts/Galmuri9-core.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'Galmuri11'; src: url('../vendor/fonts/Galmuri11-core.woff2') format('woff2'); font-display: block; }
@font-face { font-family: 'Galmuri11B'; src: url('../vendor/fonts/Galmuri11-Bold-core.woff2') format('woff2'); font-display: block; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--night); color: var(--ink);
  font-family: 'Galmuri9', monospace; font-size: 18px; line-height: 1.4;   /* 본문: Galmuri9 의 2배 */
  -webkit-font-smoothing: none; font-smooth: never; -webkit-text-size-adjust: 100%;
  overflow: hidden; overscroll-behavior: none; -webkit-user-select: none; user-select: none;
}
button, a { touch-action: manipulation; }
.px, img, canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
button { font: inherit; color: inherit; cursor: pointer; }
b { font-family: 'Galmuri11B', monospace; font-weight: 400; }

/* 글자 단계(정수배만) */

#app { position: relative; width: 100%; max-width: 520px; height: 100%; margin: 0 auto; overflow: hidden; border-left: 3px solid var(--ink); border-right: 3px solid var(--ink); }
@media (max-width: 446px) { #app { border: 0; } }

.screen { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); }
.screen.active { display: flex; }
.screen.center { justify-content: center; }
.screen.wall { background-color: #1c1c1c; background-size: 128px 128px; image-rendering: pixelated; } /* 벽 그림(web/bg/z*.png, 64칸 × 2배)은 game.js 가 넣는다 */
.screen.run { top: var(--top-h, 96px); }

/* 어두운 벽 위 밝은 글자: 흐림 없이 한 칸씩 테두리 */
.outlined { color: var(--paper); text-shadow: 2px 0 var(--ink), -2px 0 var(--ink), 0 2px var(--ink), 0 -2px var(--ink), 2px 2px var(--ink), -2px 2px var(--ink), 2px -2px var(--ink), -2px -2px var(--ink), 0 4px var(--night); }
.outlined-soft { color: var(--sky-light); }

/* ---------- 창 ---------- */
.win { /* 양피지 판넬: 9분할(모서리 5칸 → 화면 10px) */
  background: none; border: 10px solid transparent; border-image: var(--ui-cream) 5 fill / 10px / 0 repeat;
  image-rendering: pixelated; padding: 4px 6px;
}

/* ---------- 단추 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--btn-h); min-width: 0; padding: 0 10px; /* 글자가 테두리에 붙어 잘려 보이지 않게 안쪽 여백(10px)을 꼭 둔다 */
  background: none; border: 10px solid transparent; border-image: var(--ui-cream) 5 fill / 10px / 0 repeat; image-rendering: pixelated;
  position: relative; top: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.btn:active:not(:disabled) { top: 2px; }
.btn.primary { border-image-source: var(--ui-wood); color: var(--paper); text-shadow: 2px 2px 0 #35110e; } /* 중요한 단추는 나무색 */
.btn.big { min-height: var(--btn-big-h); font-family: 'Galmuri11B', monospace; font-size: 22px; }
.btn.wide { width: 100%; }
.btn:disabled { color: #9a90ab; text-shadow: none; border-image-source: var(--ui-dark); cursor: default; }
.btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
/* 한 줄에 놓인 단추: 같은 폭·같은 높이·끝 맞춤 */
.btn-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; width: 100%; flex: none; }
.btn-row > .btn { width: 100%; }

/* ---------- 타이틀 ---------- */
#title { padding: 0; }
#title-scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.title-ui { position: relative; z-index: 1; height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: max(36px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom)); }
.logo { display: block; }
.title-bottom { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.title-bottom > .btn-row, .btn.title-start { width: min(100%, 340px); } /* 배경(포털)이 보이게 가운데 */
.btn.title-start { min-height: 64px; font-size: 22px; gap: 8px; } /* 분홍 + 깜빡이는 ▶ 로 가장 눈에 띄게 */
.title-bottom > .btn-row .btn { min-height: 40px; }
.title-start .cur { color: var(--yellow); animation: blink 1.1s step-end infinite; } /* 커서만 깜빡이고 단추는 늘 눌린다 */
.title-start:focus-visible { outline: 3px solid var(--yellow); }
@keyframes blink { 0% { visibility: visible; } 50% { visibility: hidden; } } /* 켜짐·꺼짐 두 단계만 */
.best { margin: 0; min-height: 1.4em; font-size: 18px; color: var(--yellow); text-align: center; text-shadow: 2px 0 var(--ink), -2px 0 var(--ink), 0 2px var(--ink), 0 -2px var(--ink); }

/* ---------- 위쪽 줄(한 판 동안) ---------- */
.topbar { position: absolute; left: 0; right: 0; top: 0; z-index: 5; padding: max(8px, env(safe-area-inset-top)) 12px 8px; background: var(--zone-bg, var(--ink)); border-bottom: 3px solid var(--zone-edge, var(--night)); display: flex; flex-direction: column; gap: 6px; color: var(--paper); }
.top-row { display: flex; align-items: center; gap: 10px; min-height: 32px; }
.top-home { flex: none; width: 36px; height: 32px; display: grid; place-items: center; padding: 0; background: var(--zone-mid, var(--night-2)); border: 2px solid var(--zone-edge, var(--night-3)); cursor: pointer; } /* 어디서든 홈으로(판은 저장돼 이어할 수 있다) */
.top-home:active { transform: translateY(1px); }
.where { font-size: 18px; white-space: nowrap; }
.where b { font-size: 22px; color: var(--yellow); }
.gold { margin-left: auto; display: flex; align-items: center; gap: 6px; font-family: 'Galmuri11B', monospace; font-size: 22px; color: var(--yellow); }
.gold.bump { animation: bump .4s steps(4); }
@keyframes bump { 50% { transform: translateY(-4px); } }
.hearts { display: flex; flex-wrap: wrap; gap: 2px; }
.hearts img.lost { animation: lose .5s steps(4); }
@keyframes lose { 25% { transform: translateY(-6px); } 50% { transform: translateY(0); } 75% { transform: translateY(-2px); } }
.relic-bar { display: flex; flex-wrap: wrap; gap: 6px 8px; padding-bottom: 6px; } /* 많아지면 다음 줄로 */
.relic-bar::-webkit-scrollbar { display: none; }
.relic-chip { position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; line-height: 0; background: var(--paper); border: 3px solid var(--ink); box-shadow: 2px 2px 0 var(--night); }
.relic-chip .n { position: absolute; right: -4px; bottom: -6px; font-family: 'Galmuri11B', monospace; font-size: 11px; line-height: 1; padding: 2px 3px; background: var(--yellow); color: var(--ink); border: 2px solid var(--ink); }
.top-row2 { display: flex; align-items: center; gap: 10px; min-width: 0; } /* 유물 칸과 계열 칸을 한 줄에 */
.top-row2 .relic-bar { flex: 0 1 auto; min-width: 0; } /* 계열 칸을 유물 바로 옆에 */

/* ---------- 전투 ---------- */
#game { padding-top: max(10px, env(safe-area-inset-top)); }
.battle-head { width: 100%; display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin: 0 0 4px; }
.need { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; font-size: 18px; line-height: 1; white-space: nowrap; color: var(--paper); background: var(--zone-mid, var(--night-2)); border: 3px solid var(--zone-edge, var(--night-3)); }
.need b { color: var(--yellow); }
.need b { font-size: 22px; margin-right: -4px; }
.curse-bar { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px; min-height: 30px; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 0 8px 0 4px; font-size: 18px; line-height: 1; color: var(--paper); background: var(--zone-mid, var(--night-2)); border: 3px solid var(--zone-edge, var(--night-3)); white-space: nowrap; } /* 어두운 바탕 + 색 글씨: 구역 벽과 한 몸처럼 */
.chip.curse { color: var(--pink); }
.chip.blocked { color: var(--parch-dim); text-decoration: line-through; }
.chip.none { color: var(--parch-dim); }
.chip.boss { background: #b02f3c; border-color: #6e1c2e; color: var(--white); font-family: 'Galmuri11B', monospace; }
/* 보스 층: 핏빛 벽(ZONES 마지막)·붉은 판 테두리·붉은 안내 글 */
#game.boss .board { border-image-source: var(--ui-dark); box-shadow: 0 0 0 3px #b02f3c, 4px 4px 0 3px #14070c; } /* 보스: 어두운 틀 + 핏빛 테 */
#game.boss .hint { color: var(--pink); }
.boss-banner { position: absolute; left: 0; right: 0; top: 34%; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 12px; background: #2a0c14; border-top: 3px solid #b02f3c; border-bottom: 3px solid #b02f3c; color: var(--white); pointer-events: none; }
.boss-banner .bb-skull img { width: 96px; height: 96px; }
.boss-banner b { font-family: 'Galmuri11B', monospace; font-weight: 400; font-size: 33px; color: #ff5a5a; text-shadow: 3px 3px 0 #14070c; }
.boss-banner span { font-size: 18px; color: var(--pink); }
.boss-banner.show .bb-skull, .boss-banner.show b { animation: blink .28s step-end 4; } /* 켜짐·꺼짐 두 단계만 */

.board-wrap { width: 100%; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: safe center; gap: 8px; } /* 판 + 아래 칸을 한 덩어리로 세로 가운데 */
.below { width: 100%; flex: none; min-height: 180px; display: flex; align-items: flex-start; gap: 8px; } /* 결과(숫자·글·단추)는 판 바로 밑에 붙인다 */ /* 결과가 떠도 판 크기가 안 변하게 자리를 미리 잡고, 남는 높이는 다 쓴다 */
.below.roomy .hero { width: 140px; height: 168px; } /* 긴 폰: 캐릭터 3배 */
.below.roomy .result-acc { font-size: 44px; }
.below-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.hero { flex: none; width: 96px; height: 120px; display: flex; align-items: flex-end; justify-content: center; overflow: visible; pointer-events: none; } /* 고른 캐릭터가 판 옆에서 상황에 따라 움직인다 */
.hero img { flex: none; }
.board { position: relative; flex: none; box-sizing: content-box; border: 10px solid transparent; border-image: var(--ui-wood) 5 / 10px / 0 repeat; image-rendering: pixelated; box-shadow: 4px 4px 0 var(--night); } /* 나무 틀 */
.board.shake { animation: shake .3s steps(6); }
@keyframes shake { 20% { transform: translate(-3px, 1px); } 40% { transform: translate(3px, -1px); } 60% { transform: translate(-2px, 0); } 80% { transform: translate(2px, 1px); } }
#board { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; background: var(--paper); } /* 테두리는 바깥 상자에: 캔버스는 정확히 2배 */
.hint { font-size: 18px; color: var(--sky-light); min-height: 1.4em; text-align: center; pointer-events: none; }
.timer { position: absolute; top: 12px; left: 12%; right: 12%; height: 12px; background: var(--paper-2); border: 3px solid var(--ink); pointer-events: none; }
.timer div { height: 100%; width: 100%; background: var(--red); transform-origin: left; }
.timer.ink div { background: var(--blue); } /* 잉크 막대 */

.result { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.result .btn { width: 100%; }
.result-acc { flex: none; text-align: left; font-family: 'Galmuri11B', monospace; font-size: 33px; line-height: 1; color: var(--white);
  text-shadow: 3px 0 var(--ink), -3px 0 var(--ink), 0 3px var(--ink), 0 -3px var(--ink), 3px 3px var(--ink), -3px 3px var(--ink), 3px -3px var(--ink), -3px -3px var(--ink), 0 6px var(--ink); }
.result-acc.pass { color: var(--grass-light); }
.result-acc.fail { color: var(--pink); }
.result-msg { flex: 1; min-width: 0; font-size: 18px; line-height: 1.3; color: var(--paper); word-break: keep-all; }

/* ---------- 목록 화면 머리(상점·서고·도감) ---------- */
.shop-head { display: flex; flex-direction: column; align-items: center; margin-bottom: 4px; flex: none; }
.shop-head h2 { font-family: 'Galmuri11B', monospace; font-weight: 400; font-size: 33px; margin: 0; }
.gold-gain { display: flex; align-items: center; gap: 8px; font-family: 'Galmuri11B', monospace; font-size: 22px; padding: 4px 14px; margin: 6px 0 0; }
.sub { margin: 6px 0 8px; font-size: 18px; text-align: center; }

/* ---------- 카드 목록(상점·서고) ---------- */
.card-list { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.card-list > *, .rank-list > * { flex: none; } /* 목록 높이에 맞춰 카드가 찌그러지지 않게(넘치면 목록이 스크롤) */
.card-list.scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 4px 12px; margin-bottom: 8px; } /* 아래 단추와 붙지 않게 */
.card { position: relative; display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; min-height: 96px; } /* 이름·가격 줄, 딱지 줄, 설명 한 줄의 같은 높이 */
.card.win { padding: 10px 12px; }
.relic-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.relic-head .relic-name { flex: 1 1 auto; min-width: 0; }
.relic-head .price { margin-left: auto; }
.card .price.note, .card .price.note.cant { font-family: 'Galmuri9', monospace; font-size: 18px; color: var(--ink-soft); }
.card:disabled { cursor: default; }
.card.sold { background: var(--paper-2); color: var(--ink-soft); }
.card .price { margin-left: auto; flex: none; display: flex; align-items: center; gap: 4px; font-family: 'Galmuri11B', monospace; font-size: 22px; white-space: nowrap; }
.card .price.cant { color: var(--red); }
.relic-card { cursor: pointer; animation: pop .3s steps(3) backwards; }
.relic-card:nth-child(2) { animation-delay: .08s; }
.relic-card:nth-child(3) { animation-delay: .16s; }
@keyframes pop { from { transform: translateY(12px); } }
.relic-card:hover:not(:disabled), .relic-card:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.relic-card:focus-visible .relic-name::before { content: "▶ "; color: var(--pink-dark); }   /* 원작처럼 ▶ 커서 */
.relic-card:active:not(:disabled) { transform: translate(2px, 2px); }
.relic-icon { width: 70px; height: 70px; flex: none; display: grid; place-items: center; background: var(--sky-light); border: 3px solid var(--ink); }
.relic-text { min-width: 0; flex: 1; }
.relic-name { font-family: 'Galmuri11B', monospace; font-size: 22px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.relic-tags { display: flex; gap: 4px; margin-top: 3px; min-height: 19px; }
.relic-desc { font-size: 18px; color: var(--ink-soft); margin-top: 3px; line-height: 1.3; word-break: keep-all; } /* 설명은 다 보이게(넘치면 두 줄) */
.rar, .relic-own { font-family: 'Galmuri11', monospace; font-size: 11px; line-height: 1; padding: 3px 4px; border: 2px solid var(--ink); white-space: nowrap; }
.rar.common { background: var(--paper-2); }
.rar.uncommon { background: var(--sky); }
.rar.rare { background: var(--yellow); }
.relic-own { color: var(--pink-dark); border-color: var(--pink-dark); background: var(--paper); }

/* ---------- 강화(칸을 골라 아래 창에서 산다) ---------- */
.up-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; flex: 1; min-height: 0; overflow-y: auto; padding: 4px; align-content: start; }
.up-tier { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--paper); }
.up-tier:first-child { margin-top: 0; }
.tier-name { font-family: 'Galmuri11B', monospace; font-size: 22px; text-shadow: 2px 0 var(--ink), -2px 0 var(--ink), 0 2px var(--ink), 0 -2px var(--ink); }
.tier-count { margin-left: auto; font-size: 18px; color: var(--sky-light); }
.tier-tag { font-family: 'Galmuri11', monospace; font-size: 11px; line-height: 1; padding: 3px 4px; border: 2px solid var(--ink); white-space: nowrap; color: var(--ink); }
.tier-tag.t1 { background: var(--paper-2); }
.tier-tag.t2 { background: var(--sky); }
.tier-tag.t3 { background: var(--grass-light); }
.tier-tag.t4 { background: var(--yellow); }
.tier-tag.t5 { background: var(--pink); }
.up-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 100px; padding: 0; background: none; border: 10px solid transparent; border-image: var(--ui-cream) 5 fill / 10px / 0 repeat; image-rendering: pixelated; }
@media (max-width: 380px) { .up-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .btn.big { font-family: 'Galmuri9', monospace; font-size: 18px; } } /* 좁은 화면: 칸이 그림(64px)보다 좁아지지 않게 3열 */
.up-cell.maxed { border-image-source: var(--ui-wood); }
.up-cell.locked { border-image-source: var(--ui-dark); }
.up-cell.locked img { filter: grayscale(1) brightness(0.55) contrast(1.1); } /* 잠긴 강화도 흑백으로 어둡게: 무엇인지는 보이고 잠긴 건 구분 */
.char-grid .up-cell.locked img { filter: grayscale(1) brightness(0.55) contrast(1.1); } /* 캐릭터는 실루엣 대신 흑백으로 어둡게: 매력은 보이고 잠긴 건 구분 */
.up-cell.sel { outline: 3px solid var(--yellow); outline-offset: 2px; }
.up-cell:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.pips { display: flex; gap: 2px; min-height: 10px; }
.pip { width: 10px; height: 10px; border: 2px solid var(--ink-soft); background: var(--paper); }
.pip.on { background: var(--yellow); border-color: var(--ink); }
.up-cell.locked .pip { border-color: var(--night); background: var(--night-2); }
.up-detail { width: 100%; flex: none; display: flex; flex-direction: column; margin: 8px 0; padding: 8px 10px; }
.up-top { display: flex; gap: 10px; align-items: center; min-height: 100px; }
.up-top .relic-text { display: flex; flex-direction: column; gap: 3px; }
.up-top .relic-tags { margin-top: 0; }
.up-now { font-size: 18px; line-height: 1.3; word-break: keep-all; } /* 길면 두 줄로(잘리면 조건을 못 읽는다) */
.up-now b { color: var(--pink-dark); }
.up-actions { grid-template-columns: 1fr 2fr 1fr; grid-auto-flow: row; }
.up-actions #btn-buy { font-family: 'Galmuri11B', monospace; font-size: 22px; gap: 4px; }
.up-goal { color: var(--pink-dark); }

/* ---------- 캐릭터 고르기 ---------- */
.up-grid.char-grid { flex: none; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; overflow: visible; padding: 4px 2px; align-content: start; } /* 10명 = 5칸 × 2줄, 스크롤 없이 */
.char-grid .up-cell { min-height: 0; padding: 2px 0 3px; gap: 2px; justify-content: flex-start; border-width: 5px; border-image-width: 5px; } /* 테두리를 1배(5px)로: 좁은 화면에서도 얼굴 칸이 들어가게 */
.char-face { width: 56px; height: 56px; flex: none; overflow: hidden; display: flex; justify-content: flex-start; align-items: flex-start; background: var(--sky-light); border: 2px solid var(--ink); } /* 2배 그림에서 머리·어깨(28칸)만 — 위치는 anim.js 의 face 로 맞춘다 */
.char-face img { flex: none; }
.up-cell.locked .char-face { background: var(--night-2); border-color: var(--night); }
.char-grid .char-name { max-width: calc(100% - 14px); min-height: 2.4em; display: flex; align-items: center; justify-content: center; word-break: keep-all; padding: 0 1px; }

#chars .up-head { margin-bottom: 4px; }
.char-name { font-family: 'Galmuri11', monospace; font-size: 11px; line-height: 1.2; text-align: center; color: var(--ink); }
.up-cell.locked .char-name { color: var(--paper-2); }
.char-actions { grid-template-columns: 1fr 2fr; }
.char-actions #btn-go { font-family: 'Galmuri11B', monospace; font-size: 22px; }

/* ---------- 도감 ---------- */

/* ---------- 게임 오버 ---------- */
.over-floor { font-size: 18px; }
.over-floor b { display: block; font-size: 66px; line-height: 1.1; color: var(--blue); text-shadow: 3px 3px 0 var(--ink); }
.over-stats { font-size: 18px; color: var(--ink-soft); }
.over-record { font-family: 'Galmuri11B', monospace; font-size: 22px; color: var(--pink-dark); min-height: 1.2em; }

/* ---------- 모달·토스트 ---------- */
.modal { position: fixed; inset: 0; background: var(--night); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 10; }
.modal-card { max-width: 400px; max-height: 100%; overflow-y: auto; }
.modal-card h3 { margin: 0 0 8px; font-family: 'Galmuri11B', monospace; font-weight: 400; font-size: 22px; text-align: center; }
.nick-card { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.nick-sub { margin: 0; font-size: 18px; text-align: center; color: var(--ink-soft); }
.nick-input { font-family: 'Galmuri11B', monospace; font-size: 22px; padding: 10px 12px; border: 3px solid var(--ink); background: var(--white); color: var(--ink); outline: none; -webkit-user-select: text; user-select: text; border-radius: 0; width: 100%; }
.nick-input:focus { border-color: var(--pink-dark); box-shadow: 0 0 0 3px var(--yellow); }
.nick-err { margin: 0; min-height: 1.3em; font-size: 18px; color: var(--red); text-align: center; }
.rank-me { font-family: 'Galmuri11B', monospace; font-size: 18px; color: var(--gold); text-shadow: 2px 2px 0 var(--iron-edge); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; } /* 내 이름(누르는 단추가 아님 — 바꾸기는 설정) */
.rank-list { width: 100%; flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 4px 4px 8px; margin-bottom: 8px; }
.rank-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 72px; padding: 0 6px; background: none; border: 10px solid transparent; border-image: var(--ui-cream) 5 fill / 10px / 0 repeat; image-rendering: pixelated; }
.rank-row.me { outline: 3px solid var(--yellow); outline-offset: 2px; } /* 방금 낸 기록 */
.rank-no { font-family: 'Galmuri11B', monospace; font-size: 33px; line-height: 1; text-align: center; color: var(--ink-soft); }
.rank-row.top1 .rank-no { color: var(--pink-dark); }
.rank-row.top2 .rank-no, .rank-row.top3 .rank-no { color: #2f6fb8; }
.rank-name { font-family: 'Galmuri11B', monospace; font-size: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-sub { font-size: 18px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-floor { font-family: 'Galmuri11B', monospace; font-size: 33px; line-height: 1; white-space: nowrap; }
.rank-floor small { font-family: 'Galmuri9', monospace; font-size: 18px; }
.rank-empty { padding: 20px 12px; text-align: center; font-size: 18px; color: var(--sky-light); }
.modal-card ul { padding-left: 20px; margin: 0 0 14px; font-size: 18px; }
.toast { pointer-events: none; position: fixed; top: calc(max(10px, env(safe-area-inset-top)) + 62px); left: 50%; transform: translateX(-50%); z-index: 20; width: max-content; max-width: calc(100% - 32px); padding: 8px 14px; font-size: 18px; text-align: center; background: var(--ink); color: var(--paper); border: 3px solid var(--paper); box-shadow: 4px 4px 0 var(--night); }
.hidden, [hidden] { display: none !important; }
.up-head { width: 100%; flex: none; display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.up-head h2 { font-family: 'Galmuri11B', monospace; font-weight: 400; font-size: 33px; margin: 0; }
.up-head .gold-gain { margin: 0; }
/* 상점 머리: "N층 통과!" 와 받은 골드를 한 줄로 */
#shop .shop-head { width: 100%; flex-direction: row; justify-content: space-between; margin-bottom: 8px; }
#shop .shop-head h2 { font-size: 22px; }
#shop .shop-head .gold-gain { margin: 0; }
#shop .shop-head .sub { display: none; }
/* 상점: 다음 층 저주 미리 보기 줄 */
.shop-next { width: 100%; flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 8px; }
.shop-next-label { font-family: 'Galmuri11B', monospace; font-size: 22px; color: var(--paper); margin-right: 4px; }
.shop-next-label::after { content: " ▶"; color: var(--sky-light); font-size: 18px; }
.next-tag { font-family: 'Galmuri11', monospace; font-size: 11px; line-height: 1; padding: 3px 4px; border: 2px solid var(--ink); white-space: nowrap; background: var(--yellow); }
/* 보스 보상 머리 */
.reward-head { width: 100%; margin-bottom: 8px; }
.reward-head h2 { color: #ff5a5a; }

/* 아이템이 은은하게: 한 칸(2px)씩 툭툭 떠다니고, 가끔 귀퉁이에 별빛이 번쩍(칸마다 박자를 엇갈림) */
@keyframes itemBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes itemGlint { 0%, 86%, 100% { opacity: 0; transform: scale(1); } 90% { opacity: 1; transform: scale(2); } 94% { opacity: 1; transform: scale(1); } }
img.item { animation: itemBob 2.4s steps(1, end) infinite; }
.relic-icon, .up-cell { position: relative; }
.relic-icon::after, .up-cell:not(.locked)::after { content: ""; position: absolute; top: 12%; right: 14%; width: 14px; height: 14px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7' shape-rendering='crispEdges'%3E%3Cpath fill='%23ffc23a' d='M3 0h1v7H3zM0 3h7v1H0z'/%3E%3Cpath fill='%23fff' d='M3 3h1v1H3z'/%3E%3C/svg%3E") center / 14px 14px no-repeat; image-rendering: pixelated; opacity: 0; pointer-events: none; animation: itemGlint 4.2s linear infinite; }
.up-grid > :nth-child(3n+1) img.item, .card-list > :nth-child(3n+1) img.item { animation-delay: -0.8s; }
.up-grid > :nth-child(3n+2) img.item, .card-list > :nth-child(3n+2) img.item { animation-delay: -1.6s; }
.up-grid > :nth-child(4n+1)::after, .card-list > :nth-child(4n+1) .relic-icon::after { animation-delay: -1.1s; }
.up-grid > :nth-child(4n+2)::after, .card-list > :nth-child(4n+2) .relic-icon::after { animation-delay: -2.3s; }
.up-grid > :nth-child(4n+3)::after, .card-list > :nth-child(4n+3) .relic-icon::after { animation-delay: -3.4s; }
.relic-bar img.item:nth-child(2n) { animation-delay: -1.2s; }
.char-grid .up-cell::after { display: none; } /* 캐릭터 칸에는 반짝임 없음 */
@media (prefers-reduced-motion: reduce) { img.item, .relic-icon::after, .up-cell::after { animation: none; } }

.confirm-card { width: 100%; display: flex; flex-direction: column; gap: 14px; }
.confirm-msg { margin: 4px 0; font-size: 18px; line-height: 1.5; text-align: center; white-space: pre-line; }
.confirm-card .btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.btn-sub { font-family: 'Galmuri11', monospace; font-size: 18px; margin-left: 6px; opacity: 0.85; }
#btn-reroll { font-size: 18px; flex-direction: column; gap: 0; line-height: 1.1; } #btn-reroll .btn-sub { margin-left: 0; font-size: 11px; } /* 값은 아래 줄에 작게 */
@media (max-width: 440px) { .up-actions:not(.char-actions) { grid-template-columns: 1fr 1fr; } .up-actions:not(.char-actions) #btn-buy { grid-column: 1 / -1; order: -1; } } /* 좁은 화면: 올리기를 한 줄 전체로, 환불·뒤로는 아래 줄 */ /* 반 칸·세 칸 줄에 든 단추: 글씨를 한 단계 줄여 테두리와 여유를 둔다 */
.relic-chip img { display: block; margin: auto; } /* 아이콘을 칸 정가운데 */
.hearts img { width: 36px; height: auto; } /* 하트 3배: 위쪽 줄을 시원하게 */
@media (max-width: 380px) { .hearts img { width: 24px; } } /* 정수배(2배)만 */
.top-home { margin-left: 4px; }
.relics-card { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.relics-list { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; }
.relics-row { display: flex; align-items: center; gap: 12px; }
.relics-row .relic-icon { width: 76px; height: 76px; }
.relics-text { flex: 1; min-width: 0; }
.relic-tip { position: absolute; z-index: 20; max-width: 260px; display: flex; flex-direction: column; gap: 4px; padding: 6px 10px; pointer-events: none; font-size: 15px; line-height: 1.35; color: var(--ink); }
.relic-tip b { font-family: 'Galmuri11B', monospace; font-weight: 400; font-size: 18px; } .relic-tip em, .relics-st { font-style: normal; color: #b0482c; font-size: 15px; } /* 지금 상황 */

/* 캐릭터 고르기 아래 무대: 남는 높이를 다 쓴다 */
#chars .up-detail#char-detail { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; margin: 6px 0; padding: 10px 14px; }
.char-stage { position: relative; flex: 1 1 auto; min-height: 72px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; border: 3px solid var(--ink); background: url(../bg/z0.png) 0 0 / 128px 128px; box-shadow: inset 0 -22px 0 #3a3a3a, inset 0 -25px 0 #1e1e1e; image-rendering: pixelated; } /* 던전 벽 + 돌바닥(단색 띠, D6: 그라데이션 금지) */
.char-stage-fig { display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; }
.char-stage-fig img { flex: none; }
.char-info { flex: none; display: flex; flex-direction: column; gap: 6px; color: var(--ink); }
.char-title { font-family: 'Galmuri11B', monospace; font-size: 22px; } .char-title b { color: #b0482c; font-weight: 400; margin-left: 4px; }
.char-row, .char-title { word-break: keep-all; overflow-wrap: normal; line-break: strict; }
.char-row { font-size: 15px; line-height: 1.45; } .char-tag { display: inline-block; margin-right: 6px; padding: 0 6px; font-size: 13px; border: 2px solid var(--ink); } .char-tag.skill { color: #b0482c; border-color: #b0482c; }
.char-face { position: relative; } .char-lock { position: absolute; left: 0; right: 0; bottom: 0; font-size: 11px; line-height: 14px; text-align: center; background: var(--iron); color: var(--parch); }
.char-stage.locked .char-stage-fig img { filter: saturate(0.6) brightness(0.8); } /* 잠긴 캐릭터는 무대에서 살짝만 눌러 보여 준다 */

/* ── 점검(2026-10-18) 고침 ── */
/* 하던 판이 있으면 새로 시작을 한 줄 전체로(글자가 잘리지 않게) */
/* 누르는 자리 44px: 보이는 크기는 그대로 두고 눌리는 영역만 넓힌다 */
.top-home, .chip, .relic-chip { position: relative; }
.top-home::after, .chip::after { content: ""; position: absolute; inset: -7px -4px; }
.top-home:focus-visible, .chip:focus-visible, .relic-chip:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
/* 랭킹: 좁은 폰에서 이름·기록이 잘리지 않게 */
.rank-sub { white-space: normal; }
@media (max-width: 375px) {
  .rank-row { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; }
  .rank-no, .rank-floor { font-size: 22px; }
  .rank-name { font-size: 18px; }
  .rank-sub { font-size: 15px; }
}
/* 아주 좁은 폰(320): 글씨·하트를 한 단계 줄이고 로고 위 여백 */
@media (max-width: 340px) {
  .hearts img { width: 24px; }
  .relic-name { font-size: 18px; }
  .relic-desc { font-size: 13px; }
  .title-ui { padding-top: max(56px, env(safe-area-inset-top)); }
}
/* 도움말: 낱말 중간에서 줄이 안 바뀌게, 낮은 화면은 글씨 한 단계 작게 */
#howto, #howto li { word-break: keep-all; overflow-wrap: break-word; }
@media (max-height: 700px) { #howto li { font-size: 15px; line-height: 1.45; } }
/* 움직임 줄이기: 깜빡임·흔들림도 멈춘다 */
@media (prefers-reduced-motion: reduce) {
  .title-start .cur, .boss-banner.show .bb-skull, .boss-banner.show b, .board.shake, .gold.bump, .hearts img.lost, .relic-card { animation: none !important; }
}
/* 도움말: 목록만 창 안에서 스크롤하고 '알겠어요'는 늘 보이게 */
#howto .modal-card { display: flex; flex-direction: column; overflow: hidden; }
#howto .modal-card ul { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
#howto .modal-card > .btn { flex: none; }
/* 캐릭터 고르기(좁은 폰): 설명이 단추 밑으로 깔리지 않게 칸 안에서 스크롤, 무대는 더 줄어들 수 있게 */
#chars .up-detail#char-detail { overflow-y: auto; }
@media (max-width: 340px) {
  .char-stage { min-height: 56px; }
  .char-actions { grid-template-columns: 1fr 1.4fr; }
  .char-actions .btn { padding: 0 12px; }
  .char-actions #btn-go { font-size: 18px; }
}
@media (max-width: 340px) { .char-grid .char-name { max-width: 100%; padding: 0; letter-spacing: -0.5px; } }

@media (max-width: 340px) { .up-grid.char-grid { gap: 4px; padding: 4px 0; } }
@media (max-width: 340px) { .char-grid .up-cell { border-width: 4px; border-image-width: 4px; } }

.char-need { color: var(--ink); } /* 잠긴 캐릭터 여는 조건: 그림을 가리지 않게 설명 칸에 */
.hearts { flex-wrap: nowrap; min-width: 0; }
.hearts.many img { width: 24px; } /* 6칸 이상: 2배로(정수배) 한 줄에 */
/* 낮은 화면: 무대(왼쪽)와 설명(오른쪽)을 나란히 — 캐릭터를 줄이거나 자르지 않고 설명도 다 보이게 */

.curse-bar.crowded { gap: 4px; }
.curse-bar.crowded .chip { min-height: 26px; padding: 0 8px 0 4px; font-size: 15px; gap: 4px; border-width: 2px; }
.curse-bar.crowded .chip img { width: 18px; height: auto; }
/* 도움말: 그림 + 제목 한 줄 + 설명 한 줄, 넉넉한 간격 */
#howto .modal-card ul.howto-list { list-style: none; padding: 0; margin: 4px 0 18px; display: flex; flex-direction: column; gap: 16px; }
.howto-list li { display: flex; align-items: center; gap: 14px; }
.howto-list i { flex: none; width: 56px; height: 56px; display: grid; place-items: center; background: var(--paper); border: 3px solid var(--ink); }
.howto-list i img { width: 32px; height: 32px; } /* 32칸 그림 1배 */
.howto-list b { display: block; font-family: 'Galmuri11B', monospace; font-weight: 400; font-size: 18px; line-height: 1.3; }
.howto-list span { display: block; font-size: 15px; line-height: 1.4; color: var(--ink-soft); word-break: keep-all; }
/* ── 판 아래 대화창(포켓몬식): 왼쪽 캐릭터 + 오른쪽 양피지 창, 높이 고정이라 판 크기가 흔들리지 않는다 ── */
.below { min-height: 0; height: 156px; align-items: flex-end; gap: 4px; }
.below.roomy { height: 176px; }
.hero { background: none; border: 0; padding: 0; cursor: pointer; pointer-events: auto; align-self: flex-end; }
.hero:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.below-main.say { position: relative; align-self: stretch; margin-top: 12px; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; padding: 4px 6px; color: var(--ink); overflow: hidden; }
.say-name { position: absolute; top: -2px; left: 0; padding: 2px 8px; font-family: 'Galmuri11B', monospace; font-size: 15px; line-height: 1.2; color: var(--paper); background: var(--ink); }
.say-name:empty { display: none; }
.say .hint { margin-top: 20px; text-align: left; color: var(--ink); font-size: 18px; line-height: 1.35; word-break: keep-all; }
.say .result { margin-top: 18px; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "acc btn" "msg msg"; align-items: center; gap: 2px 8px; }
.say .result-acc { grid-area: acc; font-size: 33px; text-shadow: none; -webkit-text-stroke: 0; }
.below.roomy .say .result-acc { font-size: 33px; }
.say .result-acc.pass { color: #2f8a3c; } .say .result-acc.fail { color: var(--pink-dark); }
.say .result-msg { grid-area: msg; color: var(--ink); font-size: 15px; line-height: 1.35; }
.say .result .btn { grid-area: btn; justify-self: end; width: auto; min-height: 44px; padding: 0 14px; font-size: 18px; }
/* 설정 창 */
.settings-card { width: min(100%, 380px); display: flex; flex-direction: column; gap: 12px; }
.set-note { margin: 0; font-size: 15px; line-height: 1.4; color: var(--ink-soft); text-align: center; word-break: keep-all; }
.set-note:empty { display: none; }
/* 정확도: 판 위 가운데 위쪽에 크게(대화창을 비워 두려고) */
#board-box { position: relative; }
#board-box .result-acc { position: absolute; top: 14%; left: 0; right: 0; text-align: center; font-family: 'Galmuri11B', monospace; font-size: 44px; line-height: 1; pointer-events: none;
  text-shadow: 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink), 3px 3px 0 var(--ink), -3px 3px 0 var(--ink), 3px -3px 0 var(--ink), -3px -3px 0 var(--ink); }
#board-box .result-acc.pass { color: var(--grass-light); } #board-box .result-acc.fail { color: var(--pink); }
#board-box .result-acc.hidden { display: none; }
.say .result { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-top: 20px; }
.say .result-msg { font-size: 15px; line-height: 1.35; }
.say .result .btn { align-self: flex-end; }
.below { height: 168px; } .below.roomy { height: 184px; }
.say .result { margin-top: 18px; gap: 4px; }
@media (max-height: 600px) { .below, .below.roomy { height: 150px; } .say .result .btn { min-height: 40px; } } /* 아주 낮은 화면 */
@media (max-width: 360px) { /* 좁은 폰: 통과 칸을 위 오른쪽에 두고 칩은 아래 줄 전체 폭을 쓴다 */
  .battle-head:has(.crowded) { flex-wrap: wrap; }
  .battle-head:has(.crowded) .need { order: -1; margin-left: auto; }
  .battle-head:has(.crowded) .curse-bar { flex: 1 1 100%; }
}
@media (max-width: 360px) { .say .hint { font-size: 15px; } }
@media (max-width: 340px) { .say .result-msg { font-size: 13px; } }
@media (max-width: 340px) { #chars .char-row { font-size: 13px; line-height: 1.4; } #chars .char-tag { font-size: 11px; } }
@media (max-height: 600px) { .below, .below.roomy { height: 160px; } .say .result { margin-top: 16px; gap: 2px; } }

/* ════════ UI 2 (2026-10-18): 포켓몬 바코드 게임과 같은 부품 ════════
   2~3px 각진 테두리 + 평평한 바탕 + 몇 픽셀 밀어 놓은 단색 그림자. 9분할 나무·양피지 테두리는 판 틀에만 남긴다.
   주요 단추는 횃불 노랑, 위험·강조는 분홍. 글자는 작고 단정하게(Galmuri 정수 크기). */
:root { --line: var(--ink); --drop: #120d1a; }
.win { border: 3px solid var(--line); border-image: none; background: var(--paper); color: var(--ink);
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 5px var(--paper-2), 4px 4px 0 var(--drop); padding: 12px 14px; }
.btn { border: 3px solid var(--line); border-image: none; background: var(--paper); color: var(--ink); text-shadow: none;
  box-shadow: 0 4px 0 var(--drop); min-height: 48px; padding: 6px 14px; font-size: 18px; }
.btn:active:not(:disabled) { top: 3px; box-shadow: 0 1px 0 var(--drop); }
.btn.primary { background: var(--yellow); color: var(--ink); text-shadow: none; border-image: none; }
.btn.danger { background: var(--pink); }
.btn.big { min-height: 56px; font-size: 22px; }
.btn:disabled, .btn.primary:disabled { color: var(--ink-soft); background: var(--paper-2); border-color: var(--ink-soft); box-shadow: 0 4px 0 var(--drop); text-shadow: none; }
.btn .ico, .btn i img { width: 24px; height: 24px; flex: none; }
.modal { background: rgba(18, 13, 26, 0.86); }
.modal-card { max-width: 380px; }
.modal-card h3 { font-size: 22px; margin: 0 0 12px; }

/* 칩: 2px 테두리 한 줄 */
.chip { border: 2px solid var(--line); background: var(--paper); color: var(--ink); min-height: 30px; padding: 1px 8px; font-size: 15px; }
.chip.curse { background: var(--pink); color: var(--ink); }
.chip.boss { background: var(--red); color: var(--ink); border-color: var(--line); }
.chip.blocked, .chip.none { background: var(--paper-2); color: var(--ink-soft); }
.chip img { width: 24px; height: 24px; }
.need { border: 2px solid var(--line); background: var(--paper); color: var(--ink); min-height: 30px; font-size: 15px; }
.need b { color: var(--ink); font-size: 22px; }
.curse-bar.crowded .chip { border-width: 2px; }

/* ── 첫 화면: 그림이 주인공. 시작은 글자 하나, 메뉴는 아래 막대 ── */
#title { padding: 0; }
.title-ui { padding-bottom: 8px; }
.gem-chip { position: absolute; z-index: 2; top: max(12px, env(safe-area-inset-top)); left: 12px; gap: 4px; min-height: 36px; font-family: 'Galmuri11B', monospace; font-size: 18px; box-shadow: 3px 3px 0 var(--drop); cursor: pointer; }
.title-start { background: none; border: 0; padding: 8px 16px; min-height: 48px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: 'Galmuri11B', monospace; font-size: 33px; line-height: 1; color: var(--yellow);
  text-shadow: 3px 0 var(--ink), -3px 0 var(--ink), 0 3px var(--ink), 0 -3px var(--ink), 3px 3px var(--ink), -3px 3px var(--ink), 3px -3px var(--ink), -3px -3px var(--ink), 0 6px var(--drop); }
.title-start .cur { color: var(--yellow); }
.title-start:active { transform: translateY(2px); }
.best { font-size: 15px; }

/* ── 대화창: 분홍 안쪽 선 + 노란 이름표 + ▼ ── */
.below-main.say { border: 3px solid var(--line); border-image: none; background: var(--paper); box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 5px var(--pink), 4px 4px 0 var(--drop); padding: 10px 12px 10px; overflow: visible; margin-top: 16px; }
.say-name { top: -16px; left: 10px; padding: 0 8px; background: var(--yellow); color: var(--ink); border: 3px solid var(--line); font-family: 'Galmuri11B', monospace; font-size: 11px; line-height: 20px; }
.say .hint { margin-top: 4px; }
.say .result { margin-top: 2px; }
.say::after { content: "▼"; position: absolute; right: 10px; bottom: 4px; font-size: 11px; color: var(--pink-dark); animation: blink 0.8s steps(1) infinite; }
.say.busy::after { display: none; }

/* 위쪽 줄 */
.top-home { border: 2px solid var(--line); background: var(--paper); width: 40px; height: 36px; box-shadow: 2px 2px 0 var(--drop); }
.relic-chip { border: 2px solid var(--line); box-shadow: 2px 2px 0 var(--drop); }

/* 카드·칸(상점·강화·캐릭터·랭킹) */
.up-cell { border: 3px solid var(--line); border-image: none; background: var(--paper); box-shadow: 3px 3px 0 var(--drop); }
.up-cell.maxed { background: var(--yellow); border-image: none; }
.up-cell.locked { background: var(--night-2, #3a3150); border-color: var(--ink-soft); border-image: none; }
.char-grid .up-cell { border-width: 2px; }
.up-cell.on, .up-cell[aria-pressed="true"] { outline: 3px solid var(--yellow); outline-offset: 2px; }
.rank-row { border: 3px solid var(--line); border-image: none; background: var(--paper); box-shadow: 3px 3px 0 var(--drop); }

/* ── 설정: 휴대폰 설정처럼 묶음 목록 ── */
.settings-card { gap: 0; padding: 12px 12px 10px; max-height: 100%; overflow-y: auto; }
.set-group { margin: 6px 0 4px; font-family: 'Galmuri11B', monospace; font-size: 13px; color: var(--ink-soft); }
.setrow { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 10px; background: var(--paper); border: 3px solid var(--line); margin-top: -3px; text-align: left; cursor: pointer; font-size: 15px; color: var(--ink); }
.setrow:first-of-type, .set-group + .setrow { margin-top: 0; }
.setrow i { flex: none; line-height: 0; } .setrow i img { width: 24px; height: 24px; }
.setrow .setname { flex: 1; min-width: 0; }
.setrow .setval { flex: none; padding: 0 6px; border: 2px solid var(--line); font-size: 13px; line-height: 20px; background: var(--paper-2); }
.setrow .setval.on { background: var(--yellow); }
.setrow .setgo { flex: none; color: var(--ink-soft); }
.setrow:active { background: var(--paper-2); }
.setrow:focus-visible { outline: 3px solid var(--yellow); outline-offset: -3px; }
.set-foot { margin: 12px 0 2px; font-size: 13px; color: var(--ink-soft); text-align: center; }

/* ════════ 던전 질감 (UI 2 의 구조는 그대로, 색·무게만 던전에 맞춤) ════════
   조작하는 것 = 무쇠(어두운 금속, 위쪽 밝은 모서리, 아래 무거운 그림자) · 읽는 것 = 낡은 양피지 + 청동 테두리 · 가장 중요한 것 = 횃불 금색 */
:root {
  --iron: #2b2430; --iron-2: #3a3140; --iron-hi: #5b4f63; --iron-edge: #0e0a12; --drop: #07050a;
  --iron-lo: #1c1720; --iron-deep: #1a1520; --iron-pit: #241e28; --win-dark: #1d1820; /* 무쇠 아랫모서리 · 어두운 칸 · 아이템 칸 · 어두운 창(설정·계정) */
  --parch-dim: #a8957a; --gold-ink: #6e4a16; /* 어두운 창의 흐린 글씨(하나로) · 양피지 위 금빛 글씨(대비 4.5 이상) */
  --parch: #efdcb8; --parch-2: #e2c99c; --bronze: #9a6f3e; --bronze-d: #4a3220; --parch-ink: #2e2218;
  --gold: #e9b949; --gold-hi: #ffe08a; --gold-d: #8a5a1c; --blood: #8f2433; --blood-hi: #c94a55;
}
/* 양피지 창: 진한 갈색 바깥 선 + 청동 안쪽 선 */
.win { background: var(--parch); color: var(--parch-ink); border: 3px solid var(--bronze-d);
  box-shadow: inset 0 0 0 2px var(--parch), inset 0 0 0 4px var(--bronze), 4px 5px 0 var(--drop); }
.modal-card h3, .win h3 { color: var(--parch-ink); }
/* 무쇠 단추 */
.btn { background: var(--iron); color: var(--parch); border: 3px solid var(--iron-edge);
  box-shadow: inset 0 3px 0 var(--iron-hi), inset 0 -3px 0 var(--iron-lo), 0 4px 0 var(--drop); }
.btn:active:not(:disabled) { top: 3px; box-shadow: inset 0 3px 0 var(--iron-hi), inset 0 -3px 0 var(--iron-lo), 0 1px 0 var(--drop); }
.btn.primary { background: var(--gold); color: var(--parch-ink); border-color: var(--iron-edge);
  box-shadow: inset 0 3px 0 var(--gold-hi), inset 0 -3px 0 var(--gold-d), 0 4px 0 var(--drop); }
.btn.primary:active:not(:disabled) { box-shadow: inset 0 3px 0 var(--gold-hi), inset 0 -3px 0 var(--gold-d), 0 1px 0 var(--drop); }
.btn.danger { background: var(--blood); color: var(--parch); box-shadow: inset 0 3px 0 var(--blood-hi), inset 0 -3px 0 #4e121b, 0 4px 0 var(--drop); }
.btn:disabled, .btn.primary:disabled { background: #221d26; color: #6f6577; border-color: var(--iron-edge); box-shadow: 0 4px 0 var(--drop); }
.modal { background: rgba(7, 5, 10, 0.88); }
/* 양피지 창 안의 단추는 무쇠 그대로(창 위에서 무게가 산다) */

/* 칩·통과 칸: 어두운 바탕 + 색 글씨(구역 벽과 한 몸) */
.chip, .need { background: var(--zone-mid, var(--iron)); border: 2px solid var(--iron-edge); box-shadow: inset 0 2px 0 var(--iron-hi); color: var(--parch); }
.chip.curse { background: var(--zone-mid, var(--iron)); color: var(--pink); }
.chip.boss { background: var(--blood); color: var(--parch); box-shadow: inset 0 2px 0 var(--blood-hi); }
.chip.blocked, .chip.none { background: var(--zone-mid, var(--iron)); color: var(--parch-dim); }
.need b { color: var(--yellow); }
.gem-chip { background: var(--iron); color: var(--parch); border: 2px solid var(--iron-edge); box-shadow: inset 0 2px 0 var(--iron-hi), 3px 3px 0 var(--drop); }

/* 대화창: 양피지 + 청동 안쪽 선, 금색 이름표 */
.below-main.say { background: var(--parch); border: 3px solid var(--bronze-d); color: var(--parch-ink);
  box-shadow: inset 0 0 0 2px var(--parch), inset 0 0 0 4px var(--bronze), 4px 5px 0 var(--drop); }
.say .hint, .say .result-msg { color: var(--parch-ink); }
.say-name { background: var(--gold); color: var(--parch-ink); border: 2px solid var(--iron-edge); box-shadow: inset 0 2px 0 var(--gold-hi); }
.say::after { color: var(--bronze); }

/* 위쪽 줄 */
.top-home { background: var(--iron); border: 2px solid var(--iron-edge); box-shadow: inset 0 2px 0 var(--iron-hi), 2px 2px 0 var(--drop); }
.top-home img { filter: drop-shadow(1px 0 0 #b9a68a) drop-shadow(-1px 0 0 #b9a68a) drop-shadow(0 1px 0 #b9a68a) drop-shadow(0 -1px 0 #b9a68a); }
.relic-chip { background: var(--parch); border: 2px solid var(--bronze-d); box-shadow: inset 0 0 0 2px var(--parch-2), 2px 2px 0 var(--drop); }

/* 칸·카드: 양피지 */
.up-cell, .rank-row { background: var(--parch); border: 3px solid var(--bronze-d); box-shadow: inset 0 0 0 2px var(--parch-2), 3px 3px 0 var(--drop); color: var(--parch-ink); }
.up-cell.maxed { background: var(--gold); box-shadow: inset 0 0 0 2px var(--gold-hi), 3px 3px 0 var(--drop); }
.up-cell.locked { background: #2a2330; border-color: var(--iron-edge); box-shadow: inset 0 2px 0 var(--iron-hi), 3px 3px 0 var(--drop); }
.card, .relic-card { color: var(--parch-ink); }

/* 설정 목록: 양피지 창 안에 한 줄씩, 청동 선으로 나눔 */
.set-group { color: var(--bronze); }
.setrow { background: #f6e8cb; border: 2px solid var(--bronze-d); margin-top: -2px; color: var(--parch-ink); }
.setrow:active { background: var(--parch-2); }
.setrow .setval { background: var(--parch-2); border: 2px solid var(--bronze-d); color: var(--parch-ink); }
.setrow .setval.on { background: var(--gold); }
.setrow .setgo { color: var(--bronze); }
.set-foot, .set-note { color: var(--ink-soft); }

/* 캐릭터 고르기 아래: 가로로 넓고 낮은 무대 + 짧은 설명 세 줄(이름 · 능력 · 기술) */
#chars .up-detail#char-detail { flex: 0 1 auto; flex-direction: column; gap: 10px; padding: 10px 12px; overflow: hidden; }
#chars .char-stage { flex: none; width: 100%; border: 2px solid var(--bronze-d); }
.char-info { gap: 6px; }
.char-title { font-size: 22px; color: var(--parch-ink); } .char-title b { color: var(--blood); }
.char-row, .char-need { display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 1.3; color: var(--parch-ink); white-space: nowrap; }
.char-row > :last-child { overflow: hidden; text-overflow: ellipsis; }
.char-tag { flex: none; display: inline-block; min-width: 44px; margin: 0; padding: 0 6px; text-align: center; font-family: 'Galmuri11B', monospace; font-size: 13px; line-height: 20px; color: var(--parch); background: var(--iron); border: 2px solid var(--iron-edge); }
.char-tag.skill { color: var(--parch-ink); background: var(--gold); border-color: var(--iron-edge); }
.char-tag.lock { background: var(--blood); color: var(--parch); }
.char-need em { font-style: normal; color: var(--blood); font-family: 'Galmuri11B', monospace; }

/* 판 아래: 평소엔 무쇠 상태 판, 말할 때만 양피지 대화창이 그 위로 떠오른다(포켓몬 형식, 던전 질감) */
.below-main { position: relative; align-self: stretch; display: flex; flex-direction: column; }
.status-panel { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 10px 10px 8px; margin-top: 8px; background: var(--iron); border: 3px solid var(--iron-edge);
  box-shadow: inset 0 3px 0 var(--iron-hi), inset 0 -3px 0 var(--iron-lo), 4px 5px 0 var(--drop); }
.status-panel .battle-head { margin: 0; }
.status-panel .chip, .status-panel .need { background: #221c26; }
.status-hint { margin-top: auto; font-size: 15px; line-height: 1.35; color: var(--parch); word-break: keep-all; }
.status-hint::before { content: "▶ "; color: var(--gold); }
.status-hint:empty { display: none; }
.below-main > .say { position: absolute; inset: 8px 0 0 0; margin: 0; z-index: 3; display: none; }
.below-main > .say.open { display: flex; animation: say-pop .12s steps(2); }
@keyframes say-pop { from { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .below-main > .say.open { animation: none; } }
.screen.run .battle-head { width: 100%; }

/* 끝 화면: 돌 무대에 쓰러진 캐릭터 + 금빛 층 숫자, 기록은 양피지 줄 */
#over { gap: 12px; justify-content: center; }
.over-title { margin: 0; font-family: 'Galmuri11B', monospace; font-weight: 400; font-size: 33px; }
.over-stage { position: relative; width: 100%; height: 220px; display: flex; align-items: flex-end; justify-content: center; border: 3px solid var(--iron-edge);
  background: url(../bg/z0.png) 0 0 / 128px 128px; box-shadow: inset 0 -26px 0 #3a3a3a, inset 0 -29px 0 #1e1e1e, 4px 5px 0 var(--drop); image-rendering: pixelated; }
.over-floor { position: absolute; top: 14px; left: 0; right: 0; display: flex; align-items: baseline; justify-content: center; gap: 4px; font-family: 'Galmuri11B', monospace; color: var(--gold);
  text-shadow: 3px 0 var(--iron-edge), -3px 0 var(--iron-edge), 0 3px var(--iron-edge), 0 -3px var(--iron-edge), 3px 3px var(--iron-edge), -3px 3px var(--iron-edge), 3px -3px var(--iron-edge), -3px -3px var(--iron-edge), 0 6px var(--drop); }
.over-floor b { font-weight: 400; font-size: 66px; line-height: 1; } .over-floor span { font-size: 22px; }
.over-hero { line-height: 0; margin-bottom: 14px; } .over-hero img { image-rendering: pixelated; }
.over-record { padding: 4px 14px; font-family: 'Galmuri11B', monospace; font-size: 18px; color: var(--parch); background: var(--blood); border: 3px solid var(--iron-edge); box-shadow: inset 0 3px 0 var(--blood-hi), 3px 3px 0 var(--drop); }
.over-stats { width: 100%; display: flex; flex-direction: column; gap: 0; padding: 8px 14px; }
.ov-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 0; font-size: 15px; border-bottom: 2px solid var(--parch-2); }
.ov-row:last-child { border-bottom: 0; }
.ov-row b { font-weight: 400; font-family: 'Galmuri11B', monospace; font-size: 18px; } .ov-row small { font-family: 'Galmuri11', monospace; font-size: 13px; color: var(--ink-soft); }
.over-actions { width: 100%; display: flex; flex-direction: column; gap: 10px; }
@media (max-height: 700px) { .over-stage { height: 170px; } .over-title { font-size: 22px; } }
@media (max-width: 360px) { .char-row, .char-need { white-space: normal; align-items: flex-start; } .char-row > :last-child { overflow: visible; } #chars .char-title { font-size: 18px; } #chars .up-detail#char-detail { gap: 6px; padding: 8px 10px; } }
@media (max-height: 600px) { .char-grid .char-name { display: none; } } /* 아주 낮은 화면: 칸 이름은 아래 설명에 나오니 칸에서는 뺀다 */
/* 딱지(등급·티어·보유): 모두 같은 무쇠 작은 판 + 색 글씨(D7). 파스텔 상자는 쓰지 않는다 */
.rar, .tier-tag, .relic-own { background: var(--iron); border: 2px solid var(--iron-edge); color: var(--parch); padding: 3px 5px; font-size: 11px; line-height: 1; }
.rar.common { background: var(--iron); color: var(--parch); }
.rar.uncommon { background: var(--iron); color: #9fd8f0; }
.rar.rare { background: var(--iron); color: var(--gold); }
.tier-tag.t1, .tier-tag.t2, .tier-tag.t3, .tier-tag.t4, .tier-tag.t5 { background: var(--iron); }
.tier-tag.t1 { color: var(--parch); } .tier-tag.t2 { color: #9fd8f0; } .tier-tag.t3 { color: var(--grass-light); } .tier-tag.t4 { color: var(--gold); } .tier-tag.t5 { color: var(--pink); }
.relic-own { background: var(--blood); color: var(--parch); }
.next-tag { background: var(--gold); border: 2px solid var(--iron-edge); color: var(--parch-ink); }
/* 화면 제목: 모두 같은 모양(33 굵게, 테두리 글씨) */
#shop .shop-head h2, .shop-head h2, .up-head h2 { font-size: 33px; }
@media (max-width: 360px) { #shop .shop-head h2, .shop-head h2, .up-head h2 { font-size: 22px; } }
/* 끝 화면 층 숫자: 금빛 */
#over .over-floor b { color: var(--gold); text-shadow: none; }
/* 판 아래 칸: 최소 높이만 판 계산에 쓰고, 긴 폰에서 남는 높이는 상태 판·대화창이 채운다 */
.below, .below.roomy { height: auto; min-height: 168px; max-height: 300px; flex: 1 1 auto; }
@media (max-height: 600px) { .below, .below.roomy { min-height: 160px; } }
.board-wrap { justify-content: flex-start; padding-top: 6px; }
.below, .below.roomy { max-height: 210px; }
.board-wrap { justify-content: safe center; padding-top: 0; }
.status-panel .battle-head { flex-wrap: wrap; gap: 6px; }
.status-panel .battle-head .need { order: -1; margin-left: auto; }
.status-panel .battle-head .curse-bar { flex: 1 1 100%; min-height: 0; }
/* 메뉴·설정 아이콘: 32칸 그림을 1배 그대로(정수배) */
.setrow i img { width: 32px; height: 32px; filter: none; }
.top-home { width: 44px; height: 40px; } .top-home img { width: 32px; height: 32px; filter: none; }
/* 캐릭터 각성 줄 */
.char-awake { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--parch-ink); }
.char-tag.awake { background: var(--iron); color: var(--gold); min-width: 0; }
.awake-rec { color: var(--ink-soft); }
.awake-btn { margin-left: auto; min-height: 36px; padding: 2px 10px; font-size: 15px; gap: 4px; }
.awake-btn .gem-s img { width: 24px; height: auto; display: block; }
.awake-max { margin-left: auto; font-family: 'Galmuri11B', monospace; color: var(--gold-d); }
@media (max-height: 600px) { .awake-rec { display: none; } .awake-btn { min-height: 32px; font-size: 13px; } #chars .char-info { gap: 4px; } }
/* 캐릭터 화면: 남는 높이는 무대가 다 쓴다(캐릭터가 3~4배로 크게), 단추는 맨 아래 */
#chars .up-detail#char-detail { flex: 1 1 auto; }
#chars .char-stage { flex: 1 1 auto; }
#chars .char-actions { margin-top: auto; }
/* 알림: 무쇠 판 + 양피지 글씨(어느 화면에서나 같은 모양) */
.toast { background: var(--iron); color: var(--parch); border: 3px solid var(--iron-edge); box-shadow: inset 0 3px 0 var(--iron-hi), 4px 5px 0 var(--drop); font-size: 15px; line-height: 1.4; }
/* 보스 띠: 핏빛 판 */
.boss-banner { background: var(--blood); border-top: 3px solid var(--iron-edge); border-bottom: 3px solid var(--iron-edge); box-shadow: inset 0 3px 0 var(--blood-hi), inset 0 -3px 0 #4e121b; }
.boss-banner b { color: var(--parch); text-shadow: 3px 3px 0 var(--iron-edge); }
.boss-banner span { color: var(--gold-hi); }
/* 이름 입력 */
.nick-input { background: #f6e8cb; color: var(--parch-ink); border: 3px solid var(--bronze-d); }
.nick-input:focus { border-color: var(--gold-d); }
/* 화면 제목 아래 캐릭터 한마디 */
.head-say { margin: 2px 0 0; font-size: 15px; color: var(--gold-hi); text-shadow: 2px 2px 0 var(--iron-edge); word-break: keep-all; flex-basis: 100%; }
.head-say:empty { display: none; }
/* 아이템 칸: 어두운 무쇠 바탕 위에 보석처럼 */
.relic-icon { background: var(--iron-pit); border: 3px solid var(--iron-edge); box-shadow: inset 0 2px 0 var(--iron-hi); }
.shop-head { flex-wrap: wrap; }
.shop-head h2 { white-space: nowrap; }
@media (max-height: 600px) { #over { gap: 8px; } .over-stage { height: 130px; } .over-floor b { font-size: 44px; } .over-floor { top: 8px; } .ov-row { padding: 3px 0; } .over-stats { padding: 4px 12px; } }
.nick-actions:has(#nick-cancel[hidden]) { grid-auto-columns: 1fr; }

/* ── 첫 화면 단추(아래 막대 대신 화면 안 무쇠 단추) ── */
.title-ui { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
.title-menu { width: min(100%, 380px); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; margin-top: 6px; }
.tm-btn { flex-direction: column; gap: 2px; min-height: 68px; padding: 6px 2px 8px; font-family: 'Galmuri11', monospace; font-size: 13px; line-height: 1.2; white-space: nowrap; }
.tm-btn i { line-height: 0; } .tm-btn i img { width: 32px; height: 32px; }
.tm-btn[hidden] { display: none; }
.title-corner { position: absolute; z-index: 2; top: max(12px, env(safe-area-inset-top)); right: 12px; display: flex; gap: 8px; }
.corner-btn { width: 48px; min-height: 48px; padding: 0; } .corner-btn i { line-height: 0; } .corner-btn img { width: 32px; height: 32px; }

/* ── 설정: 어두운 던전 판(돌·무쇠) + 청동 테, 값은 금색 ── */
#settings .settings-card { background: var(--win-dark); color: var(--parch); border: 3px solid var(--bronze-d);
  box-shadow: inset 0 0 0 2px var(--win-dark), inset 0 0 0 4px var(--bronze), 5px 6px 0 var(--drop); }
#settings h3 { color: var(--gold); text-shadow: 2px 2px 0 var(--iron-edge); }
#settings .set-group { color: var(--bronze); }
#settings .setrow { background: var(--iron); color: var(--parch); border: 2px solid var(--iron-edge); box-shadow: inset 0 2px 0 var(--iron-hi); margin-top: 4px; }
#settings .setrow:active { background: var(--iron-2); }
#settings .setrow .setval { background: var(--iron-deep); color: var(--parch); border: 2px solid var(--iron-edge); }
#settings .setrow .setval.on { background: var(--iron-deep); color: var(--gold); border-color: var(--gold); } /* 켬: 금색 글자·테두리(채우지 않음) */
#settings .setrow .setgo { color: var(--gold); }
#settings .set-foot, #settings .set-note { color: var(--parch-dim); }

/* ── 전투 아래: 평소엔 담백한 대시보드(테두리 상자 없음), 일이 생길 때만 얼굴 + 대화창 ── */
.below .hero { display: none; }
.status-panel { background: none; border: 0; box-shadow: none; padding: 6px 4px 0; align-items: center; justify-content: flex-start; gap: 10px; margin-top: 4px; }
.status-panel .battle-head { justify-content: center; }
.status-panel .battle-head .need { order: -1; margin: 0 auto; min-height: 40px; padding: 0 16px; }
.status-panel .battle-head .need b { font-size: 33px; }
.status-panel .battle-head .curse-bar { justify-content: center; }
.status-hint { margin-top: 2px; text-align: center; color: var(--parch); text-shadow: 2px 0 var(--iron-edge), -2px 0 var(--iron-edge), 0 2px var(--iron-edge), 0 -2px var(--iron-edge); }
/* 설정: 목록이 길면 창 안에서 스크롤, 닫기는 늘 아래에 보이게 */
#settings #btn-settings-close { position: sticky; bottom: 0; z-index: 1; }
@media (max-height: 640px) { #settings .setrow { min-height: 44px; padding: 4px 10px; } #settings h3 { margin-bottom: 6px; } }
/* 서버 응답을 기다리는 동안: 손가락 모양만 바꾼다(화면을 가리지 않게) */
body.waiting, body.waiting button { cursor: progress; }
/* 계정 창: 설정과 같은 어두운 던전 판 */
#account .acct-card { width: min(100%, 380px); display: flex; flex-direction: column; gap: 10px; background: var(--win-dark); color: var(--parch); border: 3px solid var(--bronze-d);
  box-shadow: inset 0 0 0 2px var(--win-dark), inset 0 0 0 4px var(--bronze), 5px 6px 0 var(--drop); max-height: 100%; overflow-y: auto; }
#account h3 { color: var(--gold); margin: 0; text-shadow: 2px 2px 0 var(--iron-edge); }
.acct-desc { margin: 0; font-size: 15px; line-height: 1.45; color: var(--parch-dim); word-break: keep-all; overflow-wrap: anywhere; } /* 긴 이메일은 아무 데서나 줄을 바꿔 창 테두리에 붙지 않게 */
.acct-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.acct-tabs[hidden], .acct-field[hidden], .acct-member[hidden], #acct-forgot[hidden], #acct-submit[hidden] { display: none; }
.acct-field { display: flex; flex-direction: column; gap: 4px; font-size: 15px; color: var(--parch); }
.acct-field small { font-size: 13px; color: var(--parch-dim); }
.acct-field input { font-family: 'Galmuri11', monospace; font-size: 18px; padding: 10px 12px; min-height: 48px; background: #f6e8cb; color: var(--parch-ink); border: 3px solid var(--bronze-d); border-radius: 0; }
.acct-field input:focus { outline: 3px solid var(--gold); outline-offset: 0; }
.acct-err { margin: 0; min-height: 1.2em; font-size: 15px; color: var(--pink); }
.acct-err:empty { display: none; }
.acct-small { min-height: 44px; font-size: 15px; }
.set-desc { display: block; font-size: 13px; color: var(--parch-dim); line-height: 1.3; }

/* 판 위 줄: 통과 기준 + 저주 칩. 대사가 떠도 늘 보인다. 가운데 정렬, 많으면 두 줄 */
.board-wrap > .battle-head { flex: none; width: 100%; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
.board-wrap > .battle-head .need { order: 0; margin: 0; }
.board-wrap > .battle-head .curse-bar { flex: 0 1 auto; min-height: 0; justify-content: center; }
.board-wrap > .battle-head .curse-bar:empty { display: none; }
.board-wrap > .battle-head .chip, .board-wrap > .battle-head .need { background: #221c26; }
.board-wrap > .battle-head .need { min-height: 34px; padding: 0 12px; }
.board-wrap > .battle-head .need b { font-size: 22px; }
/* 칩이 많은 층(깊은 층·보스): 판 위 줄이 판을 덜 밀어내게 작은 칩 */
.board-wrap > .battle-head:has(.crowded) { gap: 4px; }
.board-wrap > .battle-head .curse-bar.crowded { gap: 4px; }
.board-wrap > .battle-head .curse-bar.crowded .chip { min-height: 24px; padding: 0 8px 0 4px; font-size: 13px; gap: 2px; }
.board-wrap > .battle-head:has(.crowded) .need { min-height: 28px; font-size: 15px; padding: 0 8px; }
.board-wrap > .battle-head:has(.crowded) .need b { font-size: 18px; }
/* 통과 칸과 칩이 한 흐름으로 줄바꿈(통과 칸만 따로 한 줄을 차지하지 않게) */
.board-wrap > .battle-head .curse-bar { display: contents; }
@media (max-width: 340px) { .board-wrap > .battle-head .curse-bar.crowded .chip { font-size: 11px; padding: 0 8px 0 2px; } .board-wrap > .battle-head:has(.crowded) .need { font-size: 13px; padding: 0 6px; } }
.need-shape { color: var(--yellow); } .need-shape:empty { display: none; }
#need-box { cursor: pointer; }
.board-wrap > .battle-head .chip.boss { background: var(--blood); color: var(--parch); }
@media (max-height: 640px) { #account .acct-card { gap: 8px; padding-top: 10px; padding-bottom: 10px; } .acct-field input { min-height: 44px; padding: 6px 10px; } .acct-desc { font-size: 13px; } }
#confirm { z-index: 11; } /* 확인 창은 언제나 다른 창(계정 등) 위에 */

/* ── 판 아래(2026-10-20 다시 짬): 왼쪽엔 늘 도전하는 캐릭터, 오른쪽엔 말풍선 → 안내 줄 → 결과(글 + 단추) ──
   말풍선은 캐릭터 자신의 말만(꼬리가 캐릭터를 가리킨다). 안내·결과·단추는 말풍선 밖. 위의 예전 규칙(.say·.status-panel·.talking)은 여기서 모두 덮는다 */
#below { display: flex; align-items: flex-end; gap: 12px; }
#below .hero { display: flex; flex: none; align-self: flex-end; }
#below .below-main { flex: 1; min-width: 0; align-self: stretch; position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 8px; padding-bottom: 6px; }
#below .say { position: relative; inset: auto; z-index: 1; margin: 0; display: none; flex-direction: column; padding: 8px 12px; background: var(--parch); color: var(--parch-ink);
  border: 3px solid var(--bronze-d); box-shadow: inset 0 0 0 2px var(--parch), inset 0 0 0 4px var(--bronze), 4px 4px 0 var(--drop); overflow: visible; animation: none; }
#below .say.open { display: flex; animation: say-pop .12s steps(2); }
@media (prefers-reduced-motion: reduce) { #below .say.open { animation: none; } }
/* 꼬리: 캐릭터 쪽(왼쪽 아래)을 가리키는 작은 삼각형 — 바깥 테(청동) 위에 안쪽(양피지) */
#below .say::before, #below .say::after { content: ""; position: absolute; width: 0; height: 0; border-style: solid; animation: none; right: auto; }
#below .say::before { left: -15px; bottom: 10px; border-width: 9px 15px 0 0; border-color: transparent var(--bronze-d) transparent transparent; }
#below .say::after { left: -9px; bottom: 13px; border-width: 5px 9px 0 0; border-color: transparent var(--parch) transparent transparent; }
#below .say-name { display: none; }
#below .say .hint { margin: 0; text-align: left; color: var(--parch-ink); font-size: 18px; line-height: 1.35; word-break: keep-all; min-height: 0; }
#below .status-panel { flex: none; display: block; margin: 0; padding: 0 2px; background: none; border: 0; box-shadow: none; visibility: visible; }
#below .status-hint { margin: 0; text-align: left; font-size: 15px; line-height: 1.4; color: var(--parch); word-break: keep-all;
  text-shadow: 2px 0 var(--iron-edge), -2px 0 var(--iron-edge), 0 2px var(--iron-edge), 0 -2px var(--iron-edge); }
#below .status-hint.flash { color: var(--gold); }
#below.resulting .status-panel { display: none; }
#below .result { margin: 0; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
#below .result.hidden { display: none; }
#below .result-msg { margin: 0; font-size: 15px; line-height: 1.4; color: var(--parch); word-break: keep-all;
  text-shadow: 2px 0 var(--iron-edge), -2px 0 var(--iron-edge), 0 2px var(--iron-edge), 0 -2px var(--iron-edge); }
#below .result .btn { align-self: stretch; width: 100%; min-height: 48px; padding: 0 14px; font-size: 18px; }
@media (max-width: 360px) { #below { gap: 10px; } #below .say .hint { font-size: 15px; } }
@media (max-height: 640px) { #below .result .btn { min-height: 44px; } #below .below-main { gap: 6px; } }
/* 낮은 화면: 판 위 줄(통과 기준·저주)을 늘 작은 칩으로 — 위쪽 유물 줄과 겹쳐도 판이 덜 밀리게 */
@media (max-height: 640px) {
  .board-wrap > .battle-head { gap: 4px; }
  .board-wrap > .battle-head .chip { min-height: 24px; padding: 0 8px 0 4px; font-size: 13px; gap: 2px; border-width: 2px; }
  .board-wrap > .battle-head .chip img { width: 18px; height: auto; }
  .board-wrap > .battle-head .need { min-height: 28px; font-size: 13px; padding: 0 8px; }
  .board-wrap > .battle-head .need b { font-size: 18px; }
}
/* 유물 강화 단계(★2·★3)와 심연 유물 딱지 */
.relic-chip .lv { position: absolute; left: -4px; top: -6px; font-family: 'Galmuri11B', monospace; font-size: 11px; line-height: 1; padding: 2px 3px; background: var(--gold); color: var(--parch-ink); border: 2px solid var(--iron-edge); }
.rar.deep { background: var(--blood); color: var(--parch); }
.rar.up-tag { background: var(--gold); color: var(--parch-ink); }
.relic-chip.more { font-family: 'Galmuri11B', monospace; font-size: 13px; line-height: 1; padding: 0 8px; color: var(--parch-ink); } /* '+N': 글자가 테두리에서 8px 넘게 떨어지게(18px 이면 4px) */
/* 아이콘 없는 칩(유물·캐릭터가 막은 저주)은 왼쪽도 글자 여백 8칸 */
.board-wrap > .battle-head .chip.noicon, .board-wrap > .battle-head .curse-bar.crowded .chip.noicon { padding-left: 8px; }
/* 낮은 화면: 판 아래 예약 칸을 캐릭터 키(2배 120)만큼만 — 기준·저주가 판 위로 올라가서 여긴 결과 글 + 단추만 들어가면 된다(넘치면 말풍선은 쉰다). 남는 높이는 판이 쓴다 */
@media (max-height: 640px) { #below, #below.roomy { min-height: 124px; } }
/* 말풍선은 캐릭터 얼굴 옆(2026-10-20 "말풍선이랑 사람 위치가 안 맞는데"): 캐릭터를 칸 위쪽에 세우고(오른쪽 = 말풍선 쪽으로 붙여),
   오른쪽 칸은 위에서부터 말풍선 → 안내/결과 글 → 단추. 꼬리는 말풍선 왼쪽 위에서 얼굴을 가리킨다 */
#below { align-items: flex-start; }
#below .hero { align-self: flex-start; align-items: flex-start; justify-content: flex-end; }
#below .below-main { justify-content: flex-start; padding-bottom: 0; }
#below .say::before { top: 12px; bottom: auto; border-width: 0 15px 9px 0; border-color: transparent var(--bronze-d) transparent transparent; }
#below .say::after { top: 15px; bottom: auto; border-width: 0 9px 5px 0; border-color: transparent var(--parch) transparent transparent; }
/* 첫 화면 왼쪽 위: 보석 칸 + 계정 칸(무쇠 칩, 손님이면 금색 글씨로 눈에 띄게) */
.title-left { position: absolute; z-index: 2; top: max(12px, env(safe-area-inset-top)); left: 12px; display: flex; gap: 8px; align-items: center; }
.title-left .gem-chip { position: relative; z-index: auto; top: auto; left: auto; } /* 누르는 자리 넓힘(::after)이 옆 계정 칸을 덮지 않게 자기 기준으로 */
/* 랭킹·끝 화면: 손님에게 가입 안내(무쇠 단추, 금색 글씨) */
.rank-join { color: var(--gold); font-size: 15px; min-height: 44px; margin: 0 0 8px; }
.rank-join[hidden] { display: none; }
/* 끝 화면이 낮은 폰에서 넘치지 않게(가입 안내 단추가 더해져도): 무대·기록 줄을 조금 줄인다 */
@media (max-height: 700px) { #over { gap: 8px; } #over .over-stage { height: 140px; } #over .ov-row { padding: 3px 0; } #over .over-stats { padding: 4px 14px; } }
@media (max-height: 600px) { #over .over-stage { height: 112px; } #over .over-floor b { font-size: 44px; } }
@media (max-height: 700px) { #over .over-stage { justify-content: flex-end; padding-right: 28px; } #over .over-floor { left: 20px; right: auto; top: 50%; transform: translateY(-50%); justify-content: flex-start; } }
#btn-shop-leave { flex-direction: column; gap: 0; line-height: 1.1; } #btn-shop-leave .btn-sub { margin-left: 0; font-size: 11px; } /* 통행료는 아래 줄에 작게(다시 뽑기와 같게) */
/* 이번 층 도형(판 가운데 크게 1초): 금빛 글씨에 무쇠 테, 판을 가리지 않게 눌러도 통과 */
#board-box .shape-call { position: absolute; top: 42%; left: 0; right: 0; text-align: center; font-family: 'Galmuri11B', monospace; font-size: 44px; line-height: 1; pointer-events: none; z-index: 2; color: var(--gold);
  text-shadow: 3px 0 var(--iron-edge), -3px 0 var(--iron-edge), 0 3px var(--iron-edge), 0 -3px var(--iron-edge), 3px 3px var(--iron-edge), -3px 3px var(--iron-edge), 3px -3px var(--iron-edge), -3px -3px var(--iron-edge); }
#board-box .shape-call.hidden { display: none; }
#board-box .shape-call.go { animation: shape-call 1.1s steps(4) forwards; }
@keyframes shape-call { 0% { transform: translateY(6px); opacity: 1; } 25% { transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { #board-box .shape-call.go { animation: none; } }
@media (max-width: 360px) { #board-box .shape-call { font-size: 33px; } }
/* 이스터에그 ★: 화면 전체를 살짝 흐리고 어둡게(사용자 요청, D6 흐림 금지의 유일한 예외 — tools/design-check.mjs ALLOW), 큰 주인공 + 양피지 대화창 */
.egg { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 16px; padding: 24px 16px max(24px, env(safe-area-inset-bottom));
  background: rgba(10, 7, 14, 0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); cursor: pointer; }
.egg.hidden { display: none; }
.egg-hero { line-height: 0; } .egg-hero img { image-rendering: pixelated; }
.egg-box { position: relative; width: min(100%, 420px); min-height: 104px; padding: 22px 16px 16px; background: var(--parch); color: var(--parch-ink); border: 3px solid var(--bronze-d);
  box-shadow: inset 0 0 0 2px var(--parch), inset 0 0 0 4px var(--bronze), 5px 6px 0 var(--drop); }
.egg-name { position: absolute; top: -14px; left: 12px; padding: 0 8px; font-family: 'Galmuri11B', monospace; font-size: 15px; line-height: 24px; color: var(--parch-ink); background: var(--gold); border: 2px solid var(--iron-edge); }
.egg-text { font-size: 18px; line-height: 1.45; word-break: keep-all; }
.egg-more { position: absolute; right: 12px; bottom: 6px; font-size: 11px; color: var(--bronze); animation: blink 0.8s steps(1) infinite; }
.egg.last .egg-more { display: none; }

/* ── 2026-10-25 점검 뒤 손질 ── */
/* 판 위 줄: 윗줄 = 통과 기준 + 보너스·기준 낮춤·보스, 아랫줄 = 저주. 저주가 없으면 한 줄 */
.board-wrap > .battle-head { flex-direction: column; flex-wrap: nowrap; }
.board-wrap > .battle-head .bh-top { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px; }
.board-wrap > .battle-head .curse-bar { display: flex; flex: none; width: 100%; flex-wrap: wrap; justify-content: center; gap: 6px; }
.board-wrap > .battle-head .curse-bar:empty { display: none; }
.board-wrap > .battle-head .chip.bonus { color: var(--grass-light); }
.board-wrap > .battle-head .chip.malus { color: var(--pink); }
.chip.bonus, .chip.malus { padding-left: 8px; font-family: 'Galmuri11B', monospace; }
@media (max-height: 640px) { .board-wrap > .battle-head .bh-top, .board-wrap > .battle-head .curse-bar { gap: 4px; } }
/* 결과 아래 작은 줄: 그린 값 + 보너스(이득을 본 만큼) */
.result-sub { position: absolute; left: 0; right: 0; top: calc(14% + 54px); text-align: center; font-family: 'Galmuri11B', monospace; font-size: 18px; line-height: 1; pointer-events: none; z-index: 2; color: var(--grass-light);
  text-shadow: 2px 0 var(--iron-edge), -2px 0 var(--iron-edge), 0 2px var(--iron-edge), 0 -2px var(--iron-edge); }
.result-sub.hidden { display: none; } .result-sub.neg { color: var(--pink); } /* 큰 정확도 숫자(위 14%) 바로 아래 */
@media (max-width: 360px) { .result-sub { font-size: 15px; } }
/* 몇 층부터: ◀ 층 ▶ */
.skip-card { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.skip-sub, .skip-cost { margin: 0; text-align: center; font-size: 15px; line-height: 1.4; word-break: keep-all; color: var(--parch-ink); }
.skip-cost { font-family: 'Galmuri11B', monospace; color: var(--gold-ink); }
.skip-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; align-items: center; gap: 8px; }
.skip-row .btn { min-height: 52px; padding: 0; font-size: 22px; }
.skip-row b { text-align: center; font-family: 'Galmuri11B', monospace; font-weight: 400; font-size: 33px; line-height: 1; color: var(--parch-ink); white-space: nowrap; }
.skip-card .btn-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
@media (max-width: 360px) { .skip-row b { font-size: 22px; } }
/* 업적: 양피지 줄(이름 · 설명 · 막대) + 오른쪽 받기 단추 */
.ach-count { font-family: 'Galmuri11B', monospace; padding: 0 10px; }
.ach-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; background: var(--parch); color: var(--parch-ink);
  border: 3px solid var(--bronze-d); box-shadow: inset 0 0 0 2px var(--parch-2), 3px 3px 0 var(--drop); }
.ach-row.got { background: var(--parch-2); }
.ach-row.got .ach-name, .ach-row.got .ach-desc { color: var(--ink-soft); }
.ach-text { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ach-name { font-family: 'Galmuri11B', monospace; font-size: 18px; line-height: 1.2; word-break: keep-all; }
.ach-desc { font-size: 13px; line-height: 1.35; color: var(--ink-soft); word-break: keep-all; overflow-wrap: break-word; }
.ach-bar { height: 8px; background: var(--iron-deep); border: 2px solid var(--iron-edge); }
.ach-bar i { display: block; height: 100%; background: var(--gold); }
.ach-row.got .ach-bar { display: none; }
.ach-dot { position: absolute; top: 4px; right: 6px; min-width: 20px; height: 20px; padding: 0 4px; font-family: 'Galmuri11B', monospace; font-size: 11px; line-height: 16px; text-align: center;
  color: var(--parch); background: var(--blood); border: 2px solid var(--iron-edge); }
.ach-dot[hidden] { display: none; }
#btn-ach { position: relative; }
/* 캐릭터 각성: 윗줄 = 단계·기록, 아랫줄 = 무엇이 좋아지는지 + 각성 단추. 아래 테두리에 붙지 않게 여백 */
.char-awake.awake-buy { flex-wrap: nowrap; }
.awake-fx { flex: 1 1 auto; min-width: 0; font-size: 13px; line-height: 1.35; color: var(--ink-soft); word-break: keep-all; }
.awake-btn { flex: none; min-height: 44px; }
#chars .char-info { padding-bottom: 4px; }
@media (max-height: 600px) { .awake-btn { min-height: 40px; } .awake-fx { font-size: 11px; } }

/* 화면 배치 점검(L1~L22) */
#reward .shop-head { flex-wrap: nowrap; } .reward-head .head-say { flex-basis: auto; }
.btn-row.acct-member { grid-template-columns: 1.4fr 1fr; } /* '비밀번호 바꾸기'가 테두리에 붙지 않게 */
#shop > .btn-row { grid-template-columns: 1fr 1.5fr; } /* 다음 층 쪽을 넓게(아래 줄 통행료 글이 잘렸다) */
.btn.title-start, .title-start { white-space: nowrap; }
@media (max-width: 360px) { .btn.title-start { font-size: 22px; } }
.nick-sub, .nick-err, .confirm-msg, .relics-st, .relic-desc, .toast, .acct-err { word-break: keep-all; overflow-wrap: break-word; }
#acct-name { min-width: 0; word-break: keep-all; overflow-wrap: break-word; }
#below .result-msg { max-height: 7.2em; overflow-y: auto; }
.awake-rec { color: var(--ink-soft); }
/* 칩 누르는 자리(::after)는 위아래 7px까지만: 두 줄(기준 줄·저주 줄) 사이 6px 틈을 넘으면 옆 줄 칩을 덮는다 */
@media (prefers-reduced-motion: reduce) { .up-cell:not(.locked)::after, .relic-icon::after { animation: none !important; } }
.gold { padding-left: 8px; } /* 하트 7칸 + 다섯 자리 골드여도 붙지 않게 */
.screen.run { padding-top: 10px; }
/* 설정: 목록만 스크롤, 닫기·버전은 늘 아래(닫기 밑으로 목록이 비치고 안내 글이 가려졌다) */
#settings .settings-card { display: flex; flex-direction: column; overflow: hidden; }
#settings .set-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-bottom: 10px; }
#settings #btn-settings-close { position: static; flex: none; }
#settings .set-foot { flex: none; }
/* 작은 글자 대비(4.5:1 이상) */
#settings .set-group { color: #b88a52; }
.up-now b, .up-goal { color: #a03a68; }
/* 화면 안 설명 줄을 잠깐 알림으로(강화·각성) */
.awake-fx.flash, .up-now.flash { font-family: 'Galmuri11B', monospace; color: var(--gold-d); }
.ov-row.ov-new b { font-size: 15px; text-align: right; word-break: keep-all; color: var(--gold-d); }
/* 가로로 눕힌 폰: 판이 너무 작아져서 세로로 돌려 달라는 한 줄 */
.rotate-tip { display: none; }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .rotate-tip { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; padding: 16px; background: var(--night, #120d1a);
    font-family: 'Galmuri11B', monospace; font-size: 22px; color: var(--gold); text-align: center; }
}
/* 옛 파스텔·보라 색을 던전 색으로(문구·디자인 점검 B-58~B-62) */
:root { --sky-light: #e2c99c; --night: #120d1a; --ink-soft: #5e4a36; }
.up-now b, .up-goal { color: var(--blood); }
.char-face { background: var(--iron-pit); border: 2px solid var(--iron-edge); }
.up-cell.locked .char-face { background: var(--iron-deep); border-color: var(--iron-edge); }
.howto-list i { background: var(--iron-pit); border: 3px solid var(--iron-edge); box-shadow: inset 0 2px 0 var(--iron-hi); }
.howto-list span { color: var(--ink-soft); }
.rank-row.top1 .rank-no { color: var(--gold-d); } .rank-row.top2 .rank-no, .rank-row.top3 .rank-no { color: var(--bronze); }
.relic-tip em, .relics-st, .char-title b { color: var(--blood); }
.chip.blocked, .chip.none, .board-wrap > .battle-head .chip.blocked { color: var(--parch-dim); }
.reward-head h2 { color: var(--parch); }
.pip { border-color: var(--bronze-d); background: var(--parch); } .pip.on { background: var(--gold); border-color: var(--iron-edge); }
.up-cell.maxed { background: var(--parch); box-shadow: inset 0 0 0 3px var(--gold), 3px 3px 0 var(--drop); } /* 한 화면에 금색 칸(단추)은 '올리기' 하나 */
.nick-err { color: var(--blood); }
.acct-desc { color: var(--parch-dim); }
/* 계정 창: 고른 탭은 노란 테두리(금색 단추는 '가입하기' 하나) */
.acct-tab.on { outline: 3px solid var(--gold); outline-offset: -3px; color: var(--gold); }
/* 캐릭터 능력 줄: 바론처럼 단점까지 적으면 두 줄까지 */
.char-row { white-space: normal; align-items: flex-start; } .char-row > :last-child { overflow: visible; text-overflow: clip; word-break: keep-all; }
/* 황금옷 단추 */
.char-awake .awake-fx { flex: 1 1 100%; } /* 긴 폰은 기록 아래 한 줄, 낮은 폰(기록을 숨김)은 별 옆 */
@media (max-height: 600px) { .char-awake .awake-fx { flex: 1 1 150px; } }
.skin-btn { white-space: nowrap; } /* 황금옷 단추는 각성 단추와 같은 모양(.awake-btn)으로 나란히 */
.char-awake.awake-buy { justify-content: flex-end; gap: 8px; } .char-awake.awake-buy .skin-btn, .char-awake.awake-buy .awake-btn, .char-awake.awake-buy .awake-max { margin-left: 0; }
.skin-btn.on { color: var(--gold); outline: 2px solid var(--gold); outline-offset: -4px; }
/* 첫 화면 아래 단추가 다섯(하던 판이 있어 '새 판'까지)이면 좁은 폰에서 글자를 한 단계 작게(테두리에 붙지 않게) */
@media (max-width: 380px) { .title-menu:not(:has(#btn-new[hidden])) { gap: 3px; } .title-menu:not(:has(#btn-new[hidden])) .tm-btn { font-size: 11px; padding-left: 0; padding-right: 0; } }
@media (max-height: 600px) { #chars .awake-btn, #chars .skin-btn { min-height: 40px; } #chars .char-row { line-height: 1.2; } #chars .char-title { font-size: 18px; line-height: 1.1; } }
@media (max-height: 700px) { .char-grid .char-name { display: none; } } /* 낮은 폰: 칸 이름은 아래 설명 칸 제목에 나오니 칸에서는 뺀다(각성·황금옷 단추가 칸 안에 들어오게) */
@media (max-height: 600px) { #chars .char-stage-fig { padding-bottom: 2px; } #chars .up-detail#char-detail { gap: 4px; padding-top: 6px; padding-bottom: 6px; } }
/* 강제 업데이트: 새로 받는 동안 화면 전체를 덮는 한 줄(누르기 막음) */
.upd-cover { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; background: var(--night); text-align: center; }
.upd-cover.hidden { display: none; }
.upd-cover b { font-family: 'Galmuri11B', monospace; font-weight: 400; font-size: 22px; color: var(--gold); }
.upd-cover span { font-size: 15px; color: var(--parch); }
/* 업적: 묶음 머리 + 줄(이름·설명·막대) + 오른쪽 진행/달성 */
.ach-head { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 4px 2px; font-family: 'Galmuri11B', monospace; color: var(--gold); text-shadow: 2px 2px 0 var(--iron-edge); }
.ach-head b { font-weight: 400; font-size: 18px; } .ach-head span { font-size: 13px; color: var(--parch-2); }
.ach-head:first-child { padding-top: 2px; }
.ach-row { padding: 8px 12px; }
.ach-mark { flex: none; min-width: 52px; text-align: right; font-family: 'Galmuri11B', monospace; font-size: 13px; color: var(--ink-soft); white-space: nowrap; }
.ach-row.got .ach-mark { color: var(--gold-d); }
.ach-row.got { box-shadow: inset 0 0 0 2px var(--gold), 3px 3px 0 var(--drop); }
/* 업적 달성 띠: 화면 위 가운데, 양피지 + 금빛 테두리, 2초 남짓 */
.ach-pop { position: fixed; z-index: 25; left: 50%; top: calc(max(8px, env(safe-area-inset-top)) + 4px); transform: translateX(-50%); width: min(calc(100% - 32px), 360px);
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "tag name" "tag text"; column-gap: 10px; align-items: center; padding: 8px 12px; pointer-events: none;
  background: var(--parch); color: var(--parch-ink); border: 3px solid var(--gold-d); box-shadow: inset 0 0 0 2px var(--gold), 4px 5px 0 var(--drop); }
.ach-pop.hidden { display: none; }
.ach-pop i { grid-area: tag; font-style: normal; font-family: 'Galmuri11B', monospace; font-size: 13px; line-height: 1.2; padding: 4px 6px; color: var(--parch-ink); background: var(--gold); border: 2px solid var(--iron-edge); white-space: nowrap; }
.ach-pop b { grid-area: name; font-family: 'Galmuri11B', monospace; font-weight: 400; font-size: 18px; line-height: 1.2; word-break: keep-all; overflow-wrap: break-word; }
.ach-pop span { grid-area: text; font-size: 13px; line-height: 1.3; color: var(--ink-soft); word-break: keep-all; overflow-wrap: break-word; }
.ach-pop.go { animation: ach-pop 2.2s steps(4) forwards; }
@keyframes ach-pop { 0% { transform: translate(-50%, -12px); } 12% { transform: translate(-50%, 0); } 88% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ach-pop.go { animation: none; } }
/* 고르기 무대: 누르면 미리 보기(각성 기운·황금 코스튬) — 왼쪽 위 작은 딱지로 지금 무엇을 보는지 */
#chars .char-stage { cursor: pointer; }
.stage-tag { position: absolute; top: 6px; left: 6px; z-index: 1; padding: 2px 8px; font-family: 'Galmuri11', monospace; font-size: 11px; line-height: 16px; color: var(--parch-2); background: var(--iron); border: 2px solid var(--iron-edge); pointer-events: none; white-space: nowrap; }
.stage-tag.on { color: var(--parch-ink); background: var(--gold); font-family: 'Galmuri11B', monospace; }
.ach-row.mini { padding: 4px 12px; } .ach-row.mini .ach-name { font-size: 15px; } .ach-row.mini .ach-desc { font-size: 11px; }
.ach-rest { margin: -2px 4px 2px; font-size: 11px; color: var(--parch-2); text-align: right; text-shadow: 2px 2px 0 var(--iron-edge); }
/* ── 단추 크기 체계(2026-10-25 "전체적으로 버튼 크기 아다리 맞추고") ──
   화면 아래 줄(뒤로·출발·올리기·환불·다시 뽑기·다음 층·다시 도전·결과 복사·처음으로) = 높이 56 · 같은 줄은 같은 글자(넓은 폰 22 굵게, 좁은 폰 18)
   창 안(확인·취소·닫기·알겠어요·층 건너뛰기 ◀▶) = 48 · 18 / 화면 안 작은 단추(각성·황금옷) = 44 · 15 / 판 아래 결과 단추 = 48 · 18 */
#chars .char-actions .btn, #upgrade .up-actions .btn, #rank > .btn-back, #ach > .btn-back, #over .over-actions .btn { min-height: 56px; font-family: 'Galmuri11B', monospace; font-size: 22px; }
#shop > .btn-row .btn { min-height: 56px; font-family: 'Galmuri11B', monospace; font-size: 18px; } /* 상점은 두 줄(값·통행료)이라 둘 다 18 */
#shop > .btn-row .btn .btn-sub { font-family: 'Galmuri11', monospace; font-size: 11px; }
@media (max-width: 380px) { #chars .char-actions .btn, #upgrade .up-actions .btn, #rank > .btn-back, #ach > .btn-back, #over .over-actions .btn { font-size: 18px; } }
.skip-row .btn { min-height: 48px; }
.char-need .need-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 조건 한 줄(꺾이면 칸마다 두 줄이 됐다) */
#btn-go img { width: 24px; height: auto; }
/* 첫 화면 윗줄: 보석·계정 칸도 도움말·설정 단추와 같은 높이(48)·같은 무쇠 모양(2026-10-25 "여기도 버튼 크기") */
.title-left .gem-chip { min-height: 48px; box-sizing: border-box; padding: 0 12px; border: 3px solid var(--iron-edge); background: var(--iron);
  box-shadow: inset 0 3px 0 var(--iron-hi), inset 0 -3px 0 var(--iron-lo), 0 4px 0 var(--drop); }
.title-left { align-items: flex-start; }
/* 이펙트(강화·각성·황금옷·해금·유물 강화): 화면 위 도트 불꽃 캔버스 + 떠오르는 글 + 대상 번쩍 */
.fx-layer { position: fixed; inset: 0; z-index: 30; pointer-events: none; image-rendering: pixelated; }
.fx-text { position: fixed; z-index: 31; pointer-events: none; transform: translate(-50%, -100%); white-space: nowrap; font-family: 'Galmuri11B', monospace; font-size: 22px; line-height: 1; color: var(--gold-hi);
  text-shadow: 2px 0 var(--iron-edge), -2px 0 var(--iron-edge), 0 2px var(--iron-edge), 0 -2px var(--iron-edge), 2px 2px var(--iron-edge), -2px 2px var(--iron-edge), 0 4px var(--drop); animation: fx-rise 1.1s steps(6) forwards; }
@keyframes fx-rise { 0% { transform: translate(-50%, -60%); } 20% { transform: translate(-50%, -110%); } 80% { opacity: 1; } 100% { transform: translate(-50%, -170%); opacity: 0; } }
.fx-flash { animation: fx-flash 0.48s steps(1) 1; }
@keyframes fx-flash { 0%, 50% { filter: brightness(1.9); } 25%, 75%, 100% { filter: none; } }
@media (prefers-reduced-motion: reduce) { .fx-text { animation: none; } .fx-flash { animation: none; } }
/* 결과 배치(2026-10-25): 결과 글은 판 바로 아래 한 줄 전체, 그 아래 캐릭터 + 말풍선, 단추는 아래 빈자리의 오른쪽 끝. 판 아래 칸이 화면 끝까지 늘어 빈자리를 쓴다 */
#game #below, #game #below.roomy { max-height: none; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: max-content minmax(0, 1fr); column-gap: 12px; row-gap: 8px; align-items: start; } /* 결과 글(윗줄 전체) · 캐릭터 | 말풍선·단추(남는 높이를 다 씀) */
#below > .result-msg { grid-column: 1 / -1; margin: 0; text-align: center; font-size: 15px; line-height: 1.4; color: var(--parch); word-break: keep-all; max-height: 4.2em; overflow-y: auto;
  text-shadow: 2px 0 var(--iron-edge), -2px 0 var(--iron-edge), 0 2px var(--iron-edge), 0 -2px var(--iron-edge); }
#below:not(.resulting) > .result-msg { display: none; }
#below .below-main { align-self: stretch; height: 100%; } #below .hero { grid-row: 2; }
#below:not(.resulting) .hero, #below:not(.resulting) .below-main { grid-row: 1 / -1; } /* 그릴 때는 결과 글 자리가 없으니 위로 붙는다 */
#below.resulting .result { margin-top: auto; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
#below.resulting .result .btn { min-height: 56px; }
@media (max-height: 640px) { #below.resulting .result .btn { min-height: 48px; } #below > .result-msg { font-size: 13px; max-height: 4.2em; } } /* 낮은 폰도 결과 글 3줄까지 보이게 */
/* 로딩: 화면 위 가는 금빛 막대(움직이는 토막) + 가운데 '잠시만요' 상자(뒤를 누르지 못하게 막는 투명한 막) */
.load-bar { position: fixed; z-index: 45; top: 0; left: 0; right: 0; height: 4px; background: var(--iron-edge); overflow: hidden; pointer-events: none; }
.load-bar::after { content: ""; position: absolute; top: 0; bottom: 0; width: 30%; background: var(--gold); animation: load-slide 1s steps(10) infinite; }
@keyframes load-slide { from { left: -30%; } to { left: 100%; } }
.load-bar.hidden, .load-veil.hidden { display: none; }
.load-veil { position: fixed; inset: 0; z-index: 44; display: flex; align-items: center; justify-content: center; }
.load-box { display: flex; align-items: center; gap: 6px; padding: 12px 16px; background: var(--iron); color: var(--parch); border: 3px solid var(--iron-edge); box-shadow: inset 0 3px 0 var(--iron-hi), 4px 5px 0 var(--drop); font-size: 15px; }
.load-box i { width: 8px; height: 8px; background: var(--gold); animation: load-dot 0.9s steps(1) infinite; }
.load-box i:nth-child(2) { animation-delay: 0.3s; } .load-box i:nth-child(3) { animation-delay: 0.6s; }
.load-box span { margin-left: 6px; }
@keyframes load-dot { 0%, 66% { background: var(--gold); } 33% { background: var(--iron-hi); } }
@media (prefers-reduced-motion: reduce) { .load-bar::after, .load-box i { animation: none; } .load-bar::after { left: 35%; } }
/* 설정(2026-10-25 다시 짬): 내 정보 칸 · 소리·진동은 바로 고르는 네 칸 · 앱·도움말은 아이콘 칸 셋 */
#settings .set-me { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; margin-bottom: 4px; background: var(--iron); border: 2px solid var(--iron-edge); box-shadow: inset 0 2px 0 var(--iron-hi); }
#settings .set-me-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#settings .set-me-text b { font-family: 'Galmuri11B', monospace; font-weight: 400; font-size: 22px; color: var(--gold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#settings .set-me-text span { font-size: 13px; line-height: 1.35; color: var(--parch-dim); word-break: keep-all; overflow-wrap: break-word; }
#settings .set-me-btns { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
#settings .set-me-btns .btn { min-height: 44px; font-size: 15px; padding: 0 8px; }
#settings .set-me-btns .btn[hidden] { display: none; }
#settings .seg-row { display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-top: 4px; padding: 8px; background: var(--iron); border: 2px solid var(--iron-edge); box-shadow: inset 0 2px 0 var(--iron-hi); }
#settings .seg-name { flex: none; min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--parch); white-space: nowrap; overflow: hidden; }
#settings .seg-name i { line-height: 0; flex: none; } #settings .seg-name img { width: 24px; height: 24px; }
#settings .seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 0; }
#settings .seg-btn { min-height: 44px; min-width: 0; padding: 0 8px; font-family: 'Galmuri11', monospace; font-size: 15px; color: var(--parch-dim); background: var(--iron-deep); border: 2px solid var(--iron-edge); cursor: pointer; white-space: nowrap; }
#settings .seg-btn.on { color: var(--gold); background: var(--iron-deep); outline: 2px solid var(--gold); outline-offset: -4px; font-family: 'Galmuri11B', monospace; } /* 한 화면 금색 단추는 하나(설정에선 손님 '가입·로그인')라 고른 칸은 테두리·글자만 */
#settings .seg-btn:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
#settings .set-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
#settings .set-tile { flex-direction: column; gap: 2px; min-height: 68px; padding: 6px 2px 8px; font-size: 13px; line-height: 1.2; white-space: nowrap; }
#settings .set-tile i { line-height: 0; } #settings .set-tile img { width: 32px; height: 32px; }
#settings .set-tip { margin: 6px 0 0; }
@media (max-height: 640px) { #over .over-actions .btn { min-height: 48px; } #over .over-actions { gap: 8px; } } /* 낮은 폰: 끝 화면 단추가 화면 밖으로 밀리지 않게(줄마다 같은 높이) */
@media (max-height: 700px) {
  #settings .set-me { padding: 8px 10px; gap: 6px; } #settings .set-me-text b { font-size: 18px; }
  #settings .set-tiles { margin-top: 8px; } #settings .set-tile { min-height: 56px; } #settings .set-tile img { width: 24px; height: 24px; }
  #settings .set-tip { display: none; } #settings h3 { margin-bottom: 6px; }
  #over .over-stats { display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; } #over .ov-row { padding: 2px 0; } /* 낮은 폰: 끝 화면 기록을 두 칸씩 */
}
/* 200층 엔딩: 화면 전체 도트 장면(낮은 해상도 캔버스를 정수배로) + 양피지 대화 상자 + 끝 카드 */
.ending { position: fixed; inset: 0; z-index: 42; background: #07050a; cursor: pointer; }
.ending.hidden { display: none; }
.ending .end-cv { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.end-box { position: absolute; left: 16px; right: 16px; bottom: max(24px, env(safe-area-inset-bottom)); margin: 0 auto; max-width: 420px; min-height: 96px; padding: 22px 16px 16px; background: var(--parch); color: var(--parch-ink);
  border: 3px solid var(--bronze-d); box-shadow: inset 0 0 0 2px var(--parch), inset 0 0 0 4px var(--bronze), 5px 6px 0 var(--drop); }
.end-box[hidden] { display: none; }
.end-name { position: absolute; top: -14px; left: 12px; padding: 0 8px; font-family: 'Galmuri11B', monospace; font-size: 15px; line-height: 24px; color: var(--parch-ink); background: var(--gold); border: 2px solid var(--iron-edge); }
.end-text { font-size: 18px; line-height: 1.5; word-break: keep-all; min-height: 2.9em; }
.end-more { position: absolute; right: 12px; bottom: 6px; font-size: 11px; color: var(--bronze); animation: blink 0.8s steps(1) infinite; }
.end-more[hidden] { display: none; }
.end-card { position: absolute; left: 16px; right: 16px; top: 50%; transform: translateY(-50%); margin: 0 auto; max-width: 360px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; cursor: default; }
.end-card[hidden] { display: none; }
.end-card b { font-family: 'Galmuri11B', monospace; font-weight: 400; font-size: 66px; line-height: 1; color: var(--gold); text-shadow: 3px 0 var(--iron-edge), -3px 0 var(--iron-edge), 0 3px var(--iron-edge), 0 -3px var(--iron-edge), 0 6px var(--drop); }
.end-card .end-who { font-family: 'Galmuri11B', monospace; font-size: 22px; color: var(--parch); text-shadow: 2px 2px 0 var(--iron-edge); }
.end-card p { margin: 4px 0 8px; font-size: 15px; line-height: 1.5; color: var(--parch-2); text-shadow: 2px 2px 0 var(--iron-edge); word-break: keep-all; }
.end-card .btn { width: 100%; }
@media (prefers-reduced-motion: reduce) { .end-more { animation: none; } }
.end-replay { position: absolute; top: 4px; right: 6px; z-index: 1; min-height: 40px; padding: 0 10px; font-size: 13px; color: var(--gold); } /* 누르는 자리 40px */
/* 전설 유물: 금빛 테두리가 번갈아 반짝(두 단계) · 수상한 상자: 열기 전 흔들림 */
.card.legend { box-shadow: inset 0 0 0 2px var(--gold), inset 0 0 0 4px var(--gold-d), 3px 3px 0 var(--drop); animation: legend-glint 0.8s steps(1) infinite; }
@keyframes legend-glint { 50% { box-shadow: inset 0 0 0 2px var(--gold-hi), inset 0 0 0 4px var(--gold), 3px 3px 0 var(--drop); } }
.relic-chip.legend { box-shadow: inset 0 0 0 2px var(--gold), 2px 2px 0 var(--drop); }
.rar.legend { background: var(--gold); color: var(--parch-ink); }
.card.shake { animation: box-shake 0.7s steps(8) 1; }
@keyframes box-shake { 0%, 100% { transform: none; } 12% { transform: translateX(-3px); } 25% { transform: translateX(3px); } 37% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 62% { transform: translateX(-2px); } 75% { transform: translateX(2px); } 87% { transform: translateX(-1px); } } /* 옆으로만(돌리면 도트가 뭉개진다) */
@media (prefers-reduced-motion: reduce) { .card.legend, .card.shake { animation: none; } }
/* ── 2026-10-24 밤 점검 뒤 손질 ── */
/* 좁은 폰(≤340): 계정 창·설정 프로필 단추를 한 줄에 하나씩('비밀번호 바꾸기'·'닉네임 바꾸기'가 테두리에 붙어 잘렸다) */
@media (max-width: 340px) { .btn-row.acct-member, #settings .set-me-btns { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); } }
/* 상점·내 유물 카드 이름: 말줄임 대신 낱말 단위로 두 줄("되감기 두루…") */
.card .relic-name, .relics-text .relic-name { white-space: normal; overflow: visible; text-overflow: clip; word-break: keep-all; overflow-wrap: break-word; }
/* 끝 화면 기록: 칸 이름은 한 줄 고정("새/강/화"로 꺾였다), 보석·새 강화 줄은 두 칸 배치에서도 한 줄 전체, 새 강화 값은 한 줄 요약(game.js) */
.ov-row > span { flex: none; white-space: nowrap; }
.ov-row.ov-new b { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#over .over-stats .ov-wide { grid-column: 1 / -1; }
@media (max-height: 700px) { /* 두 칸 배치: 칸이 글자 폭만큼 늘어나 밖으로 나가지 않게, 긴 정확도 줄은 넓은 왼쪽 칸에 짧은 줄과 짝지어 */
  #over .over-stats { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 10px; }
  #over .ov-top { order: 1; } #over .ov-boss { order: 2; } #over .ov-avg { order: 3; } #over .ov-combo { order: 4; } #over .ov-relic { order: 5; } #over .ov-new { order: 6; } }
@media (max-height: 700px) and (max-width: 400px) { #over .ov-row { gap: 8px; font-size: 13px; } #over .ov-row b { font-size: 15px; } } /* 좁은 폰의 두 칸 배치: "최고 정확도 100.0%"가 한 칸에 들어가게 한 단계 작게 */
/* 업적 띠: 위쪽 줄(층·하트·골드·문)과 첫 화면 위 칩을 가리지 않게 그 아래로 */
#app:has(> #topbar:not(.hidden)) .ach-pop { top: calc(var(--top-h, 96px) + 6px); }
#app:has(> #title.active) .ach-pop { top: calc(max(12px, env(safe-area-inset-top)) + 60px); }
/* 판 위 줄(깊은 층): 콤보는 작게, 저주가 한 줄을 넘으면 '+N' 칸(누르면 이번 층 저주 모두) */
.need { position: relative; }
.need-combo { position: absolute; z-index: 6; right: -6px; top: -15px; padding: 1px 4px; font-family: 'Galmuri11B', monospace; font-size: 11px; line-height: 1.1; color: var(--parch-ink); background: var(--gold); border: 2px solid var(--iron-edge); white-space: nowrap; pointer-events: none; } /* 콤보: 통과 칸 오른쪽 위에 걸친 작은 딱지(숫자를 가리지 않게 칸 위로 — 유물 칸 ×N 딱지와 같은 꼴) */
.board-wrap > .battle-head .chip.more { padding: 0 8px; font-family: 'Galmuri11B', monospace; }
.board-wrap > .battle-head .bh-top.tight .chip.bonus, .board-wrap > .battle-head .bh-top.tight .chip.malus { font-family: 'Galmuri11', monospace; word-spacing: -4px; } /* 윗줄이 넘칠 때만(game.js fitHead): 촘촘히 */
.board-wrap > .battle-head .bh-top.tight .chip.boss img { display: none; } .board-wrap > .battle-head .bh-top.tight .chip.boss { padding-left: 8px; }
/* 위쪽 줄 하트: 찌그러뜨리지 않는다(정수배). 2배로 한 줄에 안 들어가면 game.js 가 .tiny → 1배로 두 줄(줄 높이 그대로, 골드와 붙지 않게) */
.top-row .hearts { flex: 0 1 auto; } .top-row .hearts img { flex: none; }
.hearts.tiny { flex-wrap: wrap; align-content: center; gap: 2px; } .hearts.tiny img { width: 12px; }
/* 고블린 무리: 빼앗긴 골드·유물 줄이 흔들리며 잠깐 붉게 */
.gold.robbed, .relic-bar.robbed { animation: robbed .48s steps(6) 1; }
@keyframes robbed { 0%, 100% { transform: none; } 20% { transform: translateX(-3px); color: var(--blood-hi); } 40% { transform: translateX(3px); color: var(--blood-hi); } 60% { transform: translateX(-2px); color: var(--blood-hi); } 80% { transform: translateX(2px); } }
@media (prefers-reduced-motion: reduce) { .gold.robbed, .relic-bar.robbed { animation: none; } }
#board-box .result-acc.shard { color: var(--gold); } /* 별의 파편 통과: 정확도 대신 금빛 ★ */
/* ── 판 아래 배치(2026-10-25 사용자 그림 "이런 설명이 네모 밑에 그냥 풀로") — 위의 #below 규칙(406~1001줄대)을 여기서 모두 덮는다 ──
   ① 설명 줄(가로 전체): 이 층 요령·알림(.status-panel). 결과가 뜨면 같은 자리에 결과 글(#result-msg)
   ② 왼쪽 캐릭터 + 오른쪽 말풍선(캐릭터 혼잣말만 — 안내·단추는 밖)
   ③ 단추(오른쪽).  .stack(긴 폰, game.js resize): ③ 이 ② 아래 줄. 아니면(낮은 폰) 캐릭터가 ②③에 걸치고 단추는 말풍선 아래 오른쪽 끝 — 판 크기를 지키려고
   판 크기는 #below 의 min-height 로만 잰다(game.js resize) — 여기서는 min-height 를 건드리지 않는다 */
#game #below, #game #below.roomy { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; column-gap: 12px; row-gap: 8px; align-items: start; align-content: stretch; max-height: none; }
#game #below.stack { grid-template-rows: auto auto auto; align-content: start; }
#game #below > .status-panel, #game #below > .result-msg { grid-column: 1 / -1; grid-row: 1; margin: 0; padding: 0 2px; text-align: center; }
#game #below .status-hint { text-align: center; }
#game #below > .result-msg { max-height: 2.8em; overflow-y: auto; } /* 낮은 폰: 결과 글 2줄(넘치면 글 안에서 내려 본다) — 캐릭터·단추가 화면 밖으로 밀리지 않게 */
#game #below.stack > .result-msg { max-height: 4.2em; }
#game #below .hero { grid-column: 1; grid-row: 2 / 4; align-self: start; }
#game #below.stack .hero { grid-row: 2; }
#game #below .say { grid-column: 2; grid-row: 2; align-self: start; }
#game #below .result { grid-column: 2; grid-row: 3; align-self: end; margin: 0; padding: 0; }
#game #below.stack .result { align-self: start; }
#game #below.resulting .result .btn { min-height: 48px; }
#game #below.stack.resulting .result .btn { min-height: 56px; }
/* 랭킹 두 칸(층 · 업적, 2026-10-25 "업적 랭킹도 만들자"): 고른 칸은 금색 테두리·글자만(한 화면 금색 단추는 '가입' 하나) */
.rank-tabs { width: 100%; flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 8px; padding: 0 4px; }
.rank-tabs .rank-tab { min-height: 44px; padding: 0 16px; font-size: 18px; color: var(--parch-dim); }
.rank-tabs .rank-tab.on { color: var(--gold); outline: 2px solid var(--gold); outline-offset: -7px; font-family: 'Galmuri11B', monospace; }
.rank-tabs .rank-tab:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.ach-rank .rank-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ach-rank .rank-pic { flex: none; line-height: 0; }
.ach-rank .rank-pic:empty { display: none; }
.ach-rank .rank-text { min-width: 0; }
.ach-rank .rank-floor small { font-size: 15px; }
#rank-sub { word-break: keep-all; } /* "전체 300개"가 숫자·단위로 끊기지 않게 */
.ach-name, #ach-pop b, #ach-pop span { word-break: keep-all; text-wrap: balance; } /* 업적 300개: 긴 이름(9자)이 좁은 폰에서 끝 글자 하나만 다음 줄로 가지 않게 */
#app:has(> #rank.active) .ach-pop { top: auto; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 80px); } /* 랭킹: 업적 알림은 뒤로 단추 위(목록 아래쪽) — 위쪽 층·업적 칸을 덮지 않게 */

/* 랭킹 머리 글: 숫자와 단위가 갈라지지 않게, 줄은 고르게(2026-10-25) */
#rank-sub { word-break: keep-all; text-wrap: balance; }