/* 화면 배치 — 지도가 주인공, 조작은 아래, 창은 지도 위에 겹친다.
   모바일과 데스크톱이 같은 구조를 쓰되 버튼 크기만 달라진다. */

:root {
  --bg:#0a0b0f; --panel:#14171f; --line:#272b36;
  --ink:#e8eaf0; --dim:#98a0b2; --gold:#ffd65a;
  --good:#7ee0a8; --warn:#ff8f6b;
}
* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
body {
  background:#06070a; color:var(--ink); min-height:100dvh;
  font:15px/1.5 -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  display:flex; justify-content:center; overflow:hidden;
}
#app { width:100%; max-width:1100px; height:100dvh; display:flex; flex-direction:column; }

/* ── 상단 상태줄 — 글자 나열이 아니라 '칩'으로. 눈이 숫자를 바로 집게 ── */
header { padding:8px 12px 0; background:var(--panel); border-bottom:1px solid var(--line); }
.hrow { display:flex; align-items:center; gap:8px; }
.bars { flex:1 1 auto; min-width:0; display:flex; gap:6px; align-items:center; flex-wrap:nowrap; overflow-x:auto;
        scrollbar-width:none; padding-bottom:8px; }
.bars::-webkit-scrollbar { display:none; }
.chip { display:flex; align-items:center; gap:5px; flex:0 0 auto;
        background:#1d2230; border:1px solid #2b3243; border-radius:9px; padding:5px 9px;
        font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }
.chip i { width:12px; height:12px; border-radius:3px; flex:0 0 auto; }
.chip.gold { border-color:#6b5720; background:#2a2413; color:var(--gold); }
.chip.gold i { background:var(--gold); border-radius:50%; }
.chip.stone i { background:#a8b2c4; } .chip.iron i { background:#d98a4f; }
.chip.silver i { background:#f0f4fa; } .chip.pick i { background:#c9a227; border-radius:2px 5px 2px 5px; }
.chip.hp { gap:3px; padding:5px 8px; }
.heart { width:11px; height:11px; background:var(--good); flex:0 0 auto;
         clip-path:polygon(50% 100%,0 38%,18% 8%,50% 26%,82% 8%,100% 38%); }
.heart.off { background:#39404f; }
.ver { font-size:10px; color:#4a5162; flex:0 0 auto; padding-left:6px; }
.helpBtn { position:relative; flex:0 0 auto; align-self:flex-start; margin-top:1px; width:28px; height:28px; border-radius:8px;
           display:flex; align-items:center; justify-content:center; cursor:pointer;
           background:#1d2230; border:1px solid #2b3243; color:var(--ink);
           font-size:14px; font-weight:800; }
.helpBtn:active { background:#2b3243; }
/* 보이는 크기는 28px로 두되 누를 수 있는 범위만 44px로 넓힌다.
   상태줄 옆이라 버튼을 키우면 칩을 밀어내는데, 28px는 엄지로 못 맞춘다. */
.helpBtn::after { content:''; position:absolute; inset:-8px; }

/* 조작법 표 — 키는 왼쪽, 설명은 오른쪽. 한 줄에 하나씩 */
.keys { display:grid; grid-template-columns:auto 1fr; gap:7px 11px; align-items:baseline; }
.keys dt { display:flex; gap:3px; }
.keys dd { font-size:13.5px; font-weight:600; }
.keys dd small { color:var(--dim); font-size:11.5px; font-weight:400; margin-left:5px; }
kbd { display:inline-block; min-width:24px; padding:2px 6px; text-align:center;
      background:#262c3c; border:1px solid #39415a; border-bottom-width:2px;
      border-radius:5px; font:inherit; font-size:11.5px; font-weight:700; color:#dfe4ee; }
.note { margin-top:12px; padding:9px 11px; background:#161b26; border-radius:9px;
        font-size:11.5px; line-height:1.55; color:var(--dim); }
.note b { color:var(--ink); font-weight:700; }

/* ── 지금 할 일 — 초보가 헤매지 않게 한 줄로 ── */
.quest { display:flex; align-items:center; gap:9px; padding:8px 12px;
         background:linear-gradient(90deg,#1b2740,#151b28);
         border-bottom:1px solid var(--line); font-size:13px; }
.quest .tag { flex:0 0 auto; font-size:10.5px; font-weight:800; letter-spacing:.5px;
              color:#0d1420; background:var(--gold); padding:3px 7px; border-radius:6px; }
.quest .txt { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.quest .prog { flex:0 0 auto; font-size:12px; font-weight:700; color:var(--gold);
               font-variant-numeric:tabular-nums; }
.quest.clear { background:linear-gradient(90deg,#1a3326,#152118); }
.quest.clear .tag { background:var(--good); }
.quest.clear .prog { color:var(--good); }

/* ── 지도 ── */
.stage { position:relative; flex:1 1 auto; min-height:0; }
#world { display:block; width:100%; height:100%; background:var(--bg); }
/* 힌트는 지도 아래 가운데 — 좌상단 좌표 칩과 부딪히지 않는 유일한 빈 자리 */
.hint { position:absolute; left:50%; transform:translateX(-50%); bottom:10px;
        max-width:calc(100% - 24px); font-size:11px; line-height:1.4; text-align:center;
        color:rgba(255,255,255,.55); background:rgba(8,10,14,.78);
        padding:5px 12px; border-radius:12px; pointer-events:none; }

/* ── 채팅 입력 ── */
#chat { position:absolute; left:12px; right:12px; bottom:12px; display:none; }
#chat.on { display:block; }
#chat input {
  width:100%; padding:11px 14px; font:inherit; font-size:15px; color:var(--ink);
  background:rgba(14,17,24,.95); border:1px solid rgba(255,255,255,.3); border-radius:11px; outline:none;
}
#chat input::placeholder { color:#6f7789; }

/* ── 조작 ── */
#pad { display:flex; justify-content:space-between; align-items:flex-end; gap:10px;
       padding:10px 12px calc(10px + env(safe-area-inset-bottom));
       background:var(--panel); border-top:1px solid var(--line); }
.dpad { display:grid; grid-template-columns:repeat(3,var(--k)); grid-template-rows:repeat(2,var(--k));
        gap:5px; --k:50px; }
.key[data-k="up"]{grid-area:1/2} .key[data-k="left"]{grid-area:2/1}
.key[data-k="down"]{grid-area:2/2} .key[data-k="right"]{grid-area:2/3}
.acts { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; min-width:190px; }
.key {
  display:flex; align-items:center; justify-content:center; gap:5px;
  background:#232838; border:1px solid rgba(255,255,255,.14); border-radius:11px;
  color:var(--ink); font-size:16px; user-select:none; -webkit-user-select:none;
  touch-action:none; cursor:pointer; padding:12px 8px;
}
.key.on, .key.active { background:#3d69a8; border-color:#5f8fd0; }
.key.act { font-size:13px; font-weight:700; flex-direction:column; gap:3px; padding:9px 6px; }
.key.act em { font-style:normal; font-size:17px; line-height:1;
  /* 이모지 폰트를 명시 — 없으면 흑백 기호로 깨져 보인다 */
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; }
.key.act.hi { background:#3a2f14; border-color:#7a6428; color:var(--gold); }   /* 지금 눌러야 할 버튼 */
.key:disabled, .key.off { opacity:.38; }

/* ── 창 (인벤토리·상점) — 지도 위에 겹친다 ── */
.sheet { position:absolute; inset:0; background:rgba(6,7,10,.72); display:none;
         align-items:center; justify-content:center; padding:16px; z-index:5; }
.sheet.on { display:flex; }
.card { width:100%; max-width:440px; max-height:100%; overflow-y:auto;
        background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px; }
.card h2 { font-size:16px; margin-bottom:3px; }
.card .sub { font-size:12px; color:var(--dim); margin-bottom:12px; }
.row { display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--line); }
.row:first-of-type { border-top:0; }
.row .nm { flex:1; font-size:14px; }
.row .nm small { display:block; color:var(--dim); font-size:11.5px; margin-top:1px; }
.row .qty { font-variant-numeric:tabular-nums; color:var(--dim); font-size:13px; }
.btn { padding:7px 12px; font:inherit; font-size:13px; font-weight:600; border-radius:9px;
       border:1px solid rgba(255,255,255,.16); background:#2b3143; color:var(--ink); cursor:pointer; }
.btn.gold { border-color:#7a6428; background:#3a3218; color:var(--gold); }
.btn:disabled { opacity:.35; cursor:default; }
.close { width:100%; margin-top:14px; padding:11px; }
.card.wide { max-width:480px; }
.empty { color:var(--dim); font-size:13px; text-align:center; padding:18px 0; }

@media (max-width:520px) {
  .ver { display:none; }          /* 좁은 화면에선 판번호가 칩을 잘라먹는다 */
  .bars { gap:5px; }
  .chip { padding:5px 7px; font-size:12.5px; }
  .dpad { --k:56px; }
  .acts { min-width:150px; grid-template-columns:repeat(2,1fr); }
  .key.act { font-size:12.5px; padding:11px 4px; }
}