* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
:root { --surface: rgba(17, 27, 38, .8); --on: #fff; --btn: #f4f1ea; --btn-on: #1b2733; --r: 12px; --gap: 12px; --joy: 104px; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #4aa3ff; font-family: -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; touch-action: none; user-select: none; }
#app, #app canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chip { position: fixed; top: calc(var(--gap) + env(safe-area-inset-top)); min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 0 16px; border-radius: var(--r); background: var(--surface); color: var(--on); font-size: 15px; line-height: 1; border: 0; }
#room { left: calc(var(--gap) + env(safe-area-inset-left)); font-weight: 600; }
#sound { right: calc(var(--gap) + env(safe-area-inset-right)); width: 44px; padding: 0; cursor: pointer; font: inherit; }
#sound .off, #sound.muted .on { display: none; }
#sound.muted .off { display: block; }
.zoom { right: calc(var(--gap) + env(safe-area-inset-right)); width: 44px; padding: 0; cursor: pointer; opacity: .55; transition: opacity .15s; }
.zoom:active { opacity: 1; }
#zin { top: calc(var(--gap) + 52px + env(safe-area-inset-top)); }
#zout { top: calc(var(--gap) + 100px + env(safe-area-inset-top)); }
.banner { position: fixed; top: calc(68px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); padding: 10px 16px; border-radius: var(--r); background: var(--surface); color: var(--on); font-size: 14px; white-space: nowrap; }
.toast { position: fixed; top: calc(124px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%) translateY(-8px); max-width: calc(100% - 140px); padding: 10px 16px; border-radius: var(--r); background: var(--surface); color: var(--on); font-size: 14px; opacity: 0; transition: .25s; pointer-events: none; text-align: center; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* 아래 한 줄: 오른쪽 아래 동그란 버튼 세 개(dock), 왼쪽 아래 한 칸(stack)에 안내, 주문 상태, 쿠팡 칩, 먹는 시간 게이지가 위로 쌓인다 */
.dock { position: fixed; z-index: 4; right: calc(var(--gap) + env(safe-area-inset-right)); bottom: calc(var(--gap) + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 8px; }
.rb { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: var(--surface); color: var(--on); cursor: pointer; }
.rb .ic { width: 22px; height: 22px; }
.rb:active, .rb[aria-expanded="true"] { background: rgba(60, 76, 94, .92); }
.rb:disabled { opacity: .45; cursor: default; }
.stack { position: fixed; z-index: 4; left: calc(var(--gap) + env(safe-area-inset-left)); bottom: calc(var(--gap) + var(--joy) + 10px + env(safe-area-inset-bottom)); width: min(320px, calc(100% - 2 * var(--gap) - 60px - env(safe-area-inset-left) - env(safe-area-inset-right))); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; pointer-events: none; }
.stack > *, .stack button, .stack a { pointer-events: auto; }
.hint { padding: 8px 12px; border-radius: var(--r); background: var(--surface); color: var(--on); font-size: 13px; transition: opacity .6s; pointer-events: none !important; }
.hint.gone { opacity: 0; }
body.dealing .hint, body.holding .hint { display: none; }

/* 행동 목록: 행동 버튼 왼쪽에 세로로 펼쳐진다. 바깥(어두운 막)을 누르면 닫힌다 */
.wheel { position: fixed; inset: 0; z-index: 10; background: rgba(10, 16, 24, .32); }
.wheel[hidden] { display: none; }
.ring { position: absolute; right: calc(var(--gap) + 56px + env(safe-area-inset-right)); bottom: calc(var(--gap) + 56px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.wi { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-height: 44px; padding: 0 6px 0 14px; border: 0; border-radius: var(--r); background: var(--surface); color: var(--on); font: inherit; cursor: pointer; }
.wi[hidden] { display: none; }
.wi i { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--btn); color: var(--btn-on); order: 2; flex: none; }
.wi .ic { width: 18px; height: 18px; }
.wi span { font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.wi:disabled { cursor: default; }
.wi:disabled i { background: rgba(255,255,255,.18); color: rgba(255,255,255,.55); }
.wi:disabled span { color: rgba(255,255,255,.6); }
.wi[aria-pressed="true"] i { background: #ffd43b; }
.mvring { bottom: calc(var(--gap) + env(safe-area-inset-bottom)); }
.mvring .wi { justify-content: flex-start; padding: 0 14px; }
.wclose { position: absolute; right: calc(var(--gap) + env(safe-area-inset-right)); bottom: calc(var(--gap) + 56px + env(safe-area-inset-bottom)); width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(60, 76, 94, .92); color: var(--on); cursor: pointer; }

/* 주문 패널: 게임 화면을 가리지 않는 작은 판. 세로는 아래 38%, 가로는 오른쪽 300px. 막이 없어 위쪽 게임은 그대로 보이고 눌린다 */
:root { --sheet: #16212c; --card: rgba(255,255,255,.06); --line: rgba(255,255,255,.1); --sub: rgba(255,255,255,.62); --accent: #3182f6; }
.sheet-wrap { position: fixed; inset: 0; z-index: 12; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
/* 닫혀 있어도 레이아웃을 지워 버리지 않고 화면 밖에 둔다: 열 때 다시 배치할 일이 없고 transform 만 움직인다 */
.sheet-wrap[hidden] { display: flex; visibility: hidden; }
.sheet-wrap[hidden] .sheet { transform: translateY(calc(100% + 20px)); transition: transform .2s ease-in, visibility 0s .2s; }
.sheet { pointer-events: auto; width: min(560px, 100%); max-height: 38vh; display: flex; flex-direction: column; padding: 0 12px; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); padding-bottom: env(safe-area-inset-bottom); border-radius: 16px 16px 0 0; background: var(--sheet); color: var(--on); box-shadow: 0 -4px 16px rgba(0,0,0,.25); will-change: transform; transition: transform .24s cubic-bezier(.2,.8,.2,1); }
.sheet:has(#board[open]) { max-height: 52vh; }   /* 현황판을 펼치면 메뉴 칸이 눌리지 않게 */
.sheet.drag { transition: none; }
.sheet.back { transition: transform .2s ease-out; }
@media (prefers-reduced-motion: reduce) { .sheet, .sheet-wrap[hidden] .sheet { transition: none; } }
.sheet-top { touch-action: none; cursor: grab; flex: none; }
.grab { width: 36px; height: 4px; margin: 6px auto 0; border-radius: 2px; background: rgba(255,255,255,.24); }
.sheet header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 0 4px; }
.x { width: 44px; height: 44px; margin-right: -8px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: none; color: var(--sub); cursor: pointer; flex: none; }
.seg { flex: none; display: flex; gap: 2px; padding: 2px; border-radius: 10px; background: rgba(255,255,255,.08); }
.seg button { min-width: 64px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 8px; background: none; color: var(--sub); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.seg button[aria-selected="true"] { background: var(--btn); color: var(--btn-on); }
.opill { flex: none; display: flex; align-items: center; gap: 8px; margin: 0 0 4px; padding: 3px 12px 3px 4px; border-radius: 999px; background: var(--card); font-size: 12px; font-weight: 600; }
.opill[hidden] { display: none; }
.opill .th { width: 22px; height: 22px; border-radius: 50%; background: var(--tint, #fff); object-fit: contain; flex: none; }
.items { flex: 1 1 auto; min-height: 56px; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; padding: 2px 0 6px; align-content: start; }
.item { display: flex; align-items: center; gap: 8px; height: 60px; padding: 0 8px; border: 0; border-radius: 12px; background: var(--card); color: inherit; font: inherit; text-align: left; cursor: pointer; box-shadow: inset 0 0 0 2px transparent; transition: transform .1s; }
.item[hidden] { display: none; }
.item:active { transform: scale(.98); }
.item .thb { width: 40px; height: 40px; }
.item .tx { display: flex; flex-direction: column; min-width: 0; }
.item b { font-size: 13px; font-weight: 600; line-height: 1.25; word-break: keep-all; }
.item small { font-size: 11px; color: var(--sub); }
.item[aria-pressed="true"] { background: rgba(49,130,246,.16); box-shadow: inset 0 0 0 2px var(--accent); }
.item:disabled { opacity: .4; cursor: default; transform: none; }
.thb { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--tint, #fff); flex: none; overflow: hidden; }
.thb .th { width: 88%; height: 88%; object-fit: contain; }
.sheet-foot { flex: none; }
.sheet-foot:has(#menu-go[hidden]) { display: none; }
.primary { width: 100%; height: 46px; margin: 0 0 6px; border: 0; border-radius: 10px; background: var(--accent); color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: transform .1s; }
.primary[hidden] { display: none; }
.primary:active { transform: scale(.99); background: #1b64da; }
.primary:disabled { background: rgba(255,255,255,.1); color: rgba(255,255,255,.4); cursor: default; transform: none; }
/* 가로: 오른쪽 300px 판 */
@media (orientation: landscape) and (max-height: 520px) {
  .sheet-wrap { justify-content: flex-end; align-items: stretch; }
  .sheet-wrap[hidden] .sheet { transform: translateX(calc(100% + 20px)); }
  .sheet { width: 300px; max-height: none; height: 100%; border-radius: 16px 0 0 16px; padding-right: max(12px, env(safe-area-inset-right)); padding-top: env(safe-area-inset-top); box-shadow: -4px 0 16px rgba(0,0,0,.25); }
  .grab { display: none; }
  .sheet header { padding-top: 6px; }
}

/* 주문 상태 알약 + 쿠팡 칩(펼치면 링크와 수수료 안내가 함께 보인다) + 먹는 시간 게이지 */
.pill { display: flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 14px 6px 6px; border-radius: var(--r); background: var(--surface); color: var(--on); }
.pill .thb { width: 32px; height: 32px; }
.pill p { margin: 0; min-width: 0; }
.pill b { font-size: 13px; font-weight: 600; line-height: 1.3; }
.gauge[hidden] { display: none; }
.gauge { position: relative; }
.buy { flex: none; align-self: stretch; min-height: 44px; margin: -6px -14px -6px 0; padding: 0 12px 0 8px; border: 0; background: none; color: rgba(255,255,255,.55); font: inherit; font-size: 11px; cursor: pointer; white-space: nowrap; }
.buypop { position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 2; width: max-content; max-width: min(300px, calc(100vw - 2 * var(--gap) - 60px)); padding: 8px 12px; border-radius: var(--r); background: var(--surface); color: var(--on); }
.buypop[hidden] { display: none; }
.buypop a { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; color: var(--on); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.buypop .ic { width: 14px; height: 14px; }
.buypop small { display: block; font-size: 11px; line-height: 1.35; color: rgba(255,255,255,.62); }
.gbody { display: flex; flex-direction: column; gap: 6px; min-width: 150px; }
.gbody b { font-size: 13px; font-weight: 600; line-height: 1.2; }
.gbar { display: block; height: 7px; border-radius: 4px; background: rgba(255,255,255,.28); overflow: hidden; }
.gbar i { display: block; height: 100%; width: 100%; border-radius: 4px; background: #ffd43b; transform-origin: left; }

/* 직원 말풍선 */
.bubble { position: fixed; left: 0; top: 0; z-index: 5; max-width: 220px; padding: 8px 12px; border-radius: 12px; background: rgba(17, 27, 38, .86); color: #fff; font-size: 13px; line-height: 1.35; white-space: nowrap; opacity: 0; pointer-events: none; will-change: transform, opacity; margin-top: -8px; }
.bubble::after { content: ''; position: absolute; left: 50%; top: 100%; margin-left: -6px; border: 6px solid transparent; border-top-color: rgba(17, 27, 38, .86); border-bottom: 0; }

/* 가상 조이스틱: 왼쪽 아래 반투명 원. 끌면 카메라 기준 방향으로 계속 걷는다 */
.joy { position: fixed; z-index: 4; left: calc(var(--gap) + 4px + env(safe-area-inset-left)); bottom: calc(var(--gap) + 4px + env(safe-area-inset-bottom)); width: var(--joy); height: var(--joy); border-radius: 50%; background: rgba(17, 27, 38, .22); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); touch-action: none; opacity: .75; transition: opacity .15s; }
.joy.on { opacity: 1; background: rgba(17, 27, 38, .32); }
.joy i { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(255,255,255,.72); box-shadow: 0 2px 6px rgba(0,0,0,.25); pointer-events: none; }
@media (orientation: landscape) and (max-height: 520px) { :root { --joy: 92px; } }

/* 한마디 목록: 행동 목록 자리에 바꿔 띄운다 */
.says { position: absolute; right: calc(var(--gap) + 56px + env(safe-area-inset-right)); bottom: calc(var(--gap) + 56px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.says[hidden] { display: none; }
.says .wi { justify-content: flex-start; padding: 0 14px; }
@media (orientation: landscape) and (max-height: 520px) {
  .ring, .says { gap: 4px; }
  .wi { min-height: 38px; }
  .wi i { width: 28px; height: 28px; }
  .says { display: grid; grid-template-columns: 1fr 1fr; }
  .says[hidden] { display: none; }
}

/* 주문 현황(패널 안): 한 줄 요약, 누르면 목록이 펼쳐진다 */
.board { flex: none; margin: 0 0 4px; padding: 0 10px; border-radius: 10px; background: var(--card); }
.board[hidden] { display: none; }
.board summary { display: flex; align-items: center; gap: 8px; min-height: 44px; list-style: none; cursor: pointer; font-size: 13px; font-weight: 700; }
.board summary::-webkit-details-marker { display: none; }
.board summary > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board summary::after { content: ''; flex: none; width: 6px; height: 6px; margin-left: 2px; border: solid var(--sub); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-2px, -2px); }
.board[open] summary::after { transform: rotate(-135deg); }
.bpin { margin-left: auto; flex: none; min-height: 36px; padding: 0 8px; border: 0; border-radius: 8px; background: rgba(255,255,255,.1); color: var(--sub); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; }
.bpin[aria-pressed="true"] { background: rgba(49,130,246,.25); color: #fff; }
.board ol { max-height: 88px; overflow-y: auto; margin-bottom: 8px !important; }
.board ol, .mini ol { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.board li, .mini li { display: flex; align-items: center; gap: 8px; min-height: 26px; font-size: 13px; line-height: 1.25; }
.board li .thb, .mini li .thb { width: 26px; height: 26px; }
.board li .dot, .mini li .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--c, #fff); }
.board li .nm { font-weight: 600; white-space: nowrap; }
.board li .st { margin-left: auto; min-width: 0; color: var(--sub); text-align: right; }
.board li.mine { margin: 0 -6px; padding: 2px 6px; border-radius: 8px; background: rgba(49,130,246,.2); }
.board li.mine .st { color: #fff; font-weight: 600; }
.board .more { color: var(--sub); font-size: 12px; }
.mini { position: fixed; z-index: 3; left: calc(var(--gap) + env(safe-area-inset-left)); top: calc(var(--gap) + 52px + env(safe-area-inset-top)); max-width: 210px; padding: 8px 10px; border-radius: var(--r); background: var(--surface); color: var(--on); pointer-events: none; }
.mini[hidden] { display: none; }
.mini h3 { margin: 0; font-size: 12px; font-weight: 700; color: var(--sub); }
.mini ol { margin-top: 6px; gap: 4px; }
.mini li { min-height: 22px; font-size: 12px; }
.mini li .thb { width: 20px; height: 20px; }
.mini li .st { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini li.mine .st { font-weight: 700; }
.bubble.say { background: rgba(255, 255, 255, .92); color: #1b2733; }
.bubble.say::after { border-top-color: rgba(255, 255, 255, .92); }
.ring[hidden] { display: none; }

.dealrow { flex: none; margin: 0 0 6px; padding: 0 4px; }
.dealrow[hidden] { display: none; }
.dealrow a { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; color: var(--sub); font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
.dealrow .ic { width: 14px; height: 14px; }
.dealrow small { display: block; font-size: 10px; line-height: 1.3; color: var(--sub); }
.pill[hidden] { display: none; }

/* 위쪽 제조 현황 줄: 사람 수 칩과 소리 버튼 사이 가운데. 좁으면 main.js 가 3개까지만, +N */
.ostrip { position: fixed; z-index: 3; top: calc(var(--gap) + env(safe-area-inset-top)); left: calc(var(--gap) + 138px + env(safe-area-inset-left)); right: calc(var(--gap) + 52px + env(safe-area-inset-right)); height: 44px; display: flex; align-items: center; justify-content: center; gap: 6px; pointer-events: none; overflow: hidden; }
.ostrip[hidden] { display: none; }
.ocell { display: flex; align-items: center; gap: 4px; height: 36px; padding: 0 8px 0 4px; border-radius: var(--r); background: var(--surface); color: var(--on); font-size: 13px; font-weight: 600; flex: none; }
.ocell .thb { width: 28px; height: 28px; }
.ocell.more { padding: 0 10px; }
.ocell.pop { animation: ocell-pop .4s cubic-bezier(.2,.9,.3,1.4); }
@keyframes ocell-pop { 0% { transform: scale(.7); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .ocell.pop { animation: none; } }

/* 인원 칩: 사람 아이콘, 숫자, 작은 방 번호 */
#room { gap: 6px; }
#room .ic { width: 18px; height: 18px; }
#room small { font-size: 11px; font-weight: 500; color: rgba(255,255,255,.6); }
/* 주문창이 열려 있으면 주문 버튼만 막 위로 올려 X 로 바꾼다(다시 누르면 닫힘) */
body.menu-open .dock { z-index: 13; top: calc(var(--gap) + env(safe-area-inset-top)); bottom: auto; }
body.menu-open #act, body.menu-open #mv { display: none; }
#order .i-x { display: none; }
body.menu-open #order .i-x { display: block; }
body.menu-open #order .i-cup { display: none; }
/* 화면에 띄운 판 닫기 */
.mini { padding-right: 34px; }
.mini .mclose { position: absolute; top: 2px; right: 2px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: none; color: var(--sub); cursor: pointer; pointer-events: auto; }
body.menu-open #sound { visibility: hidden; }

/* 패널이 열려 있는 동안: 세로는 조이스틱과 왼쪽 아래 안내를 치워 패널과 겹치지 않게, 가로는 위쪽 버튼을 패널 왼쪽으로 */
@media (orientation: portrait) { body.menu-open .joy, body.menu-open .stack { display: none; } }
@media (orientation: landscape) and (max-height: 520px) {
  body.menu-open .dock { right: calc(var(--gap) + 300px); }
  body.menu-open .zoom { right: calc(var(--gap) + 300px); }
}

/* 상황 버튼: 정자 근처 낚시하기, 노점 앞 상점 열기. 왼쪽 아래 한 칸에 쌓인다 */
.ctx { min-height: 44px; padding: 6px 14px 6px 10px; border: 0; background: var(--surface); color: var(--on); font: inherit; cursor: pointer; }
.ctx b { font-size: 14px; font-weight: 700; white-space: nowrap; }
.ctx:active { background: rgba(60, 76, 94, .92); }
body.fishing .hint { display: none; }
/* 낚시 칸: 조이스틱과 오른쪽 버튼 사이. 입질이면 노랗게 바뀌고 남은 시간이 줄어든다 */
.fishui { position: fixed; z-index: 5; left: calc(var(--gap) + var(--joy) + 14px + env(safe-area-inset-left)); right: calc(var(--gap) + 58px + env(safe-area-inset-right)); bottom: calc(var(--gap) + env(safe-area-inset-bottom)); display: flex; justify-content: center; gap: 6px; }
.fishui[hidden] { display: none; }
.fishbtn { flex: 0 1 220px; min-width: 0; min-height: 52px; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 8px 14px; border: 0; border-radius: var(--r); background: var(--surface); color: var(--on); font: inherit; cursor: pointer; touch-action: manipulation; }
.fishbtn b { font-size: 15px; font-weight: 700; line-height: 1.2; }
.fishbtn .gbar { visibility: hidden; }
.fishbtn.bite { color: #ffd43b; animation: bite-shake .18s linear infinite; }
.fishbtn.bite .gbar { visibility: visible; }
.fishbtn.bite .gbar i { background: #ffd43b; }
@keyframes bite-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) { .fishbtn.bite { animation: none; } }
.fishx { flex: none; width: 44px; align-self: stretch; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--r); background: var(--surface); color: var(--on); cursor: pointer; }
/* 주문창이나 상점이 열려 있어도 입질을 놓치지 않게 판 바로 위(가로는 판 왼쪽)로 비킨다 */
body.menu-open .fishui, body.shop-open .fishui { z-index: 13; left: var(--gap); right: var(--gap); bottom: calc(38vh + 8px); }
@media (orientation: landscape) and (max-height: 520px) { body.menu-open .fishui, body.shop-open .fishui { left: calc(var(--gap) + var(--joy) + 14px); right: 312px; bottom: var(--gap); } }

/* 상점 판: 주문 판과 같은 모양. 조이스틱만 비킨다 */
@media (orientation: portrait) { body.shop-open .joy, body.shop-open .stack, body.shop-open .dock { display: none; } }
@media (orientation: landscape) and (max-height: 520px) { body.shop-open .dock { display: none; } }
.shop-title { margin: 0; font-size: 16px; font-weight: 700; }
.coins { display: flex; align-items: center; gap: 6px; margin: 0 0 0 auto; padding: 0 10px; min-height: 32px; border-radius: 999px; background: var(--card); color: #ffd43b; }
.coins .ic { width: 16px; height: 16px; }
.coins b { font-size: 14px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
#shop-items { grid-template-columns: 1fr; }
.shead { grid-column: 1 / -1; margin: 6px 2px 0; font-size: 12px; font-weight: 700; color: var(--sub); }
.note { grid-column: 1 / -1; margin: 6px 2px; font-size: 13px; line-height: 1.4; color: var(--sub); word-break: keep-all; }
.note[hidden] { display: none; }
.sitem { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 0 8px; border-radius: 12px; background: var(--card); }
.sitem .thb { width: 40px; height: 40px; color: #1b2733; }
.sitem .tx { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.sitem .tx b { font-size: 13px; font-weight: 600; line-height: 1.25; word-break: keep-all; }
.sitem .tx small { font-size: 11px; color: var(--sub); }
.sbtn { flex: none; min-width: 84px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 10px; background: var(--btn); color: var(--btn-on); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.sbtn:active { transform: scale(.98); }
.sbtn:disabled { background: rgba(255,255,255,.1); color: rgba(255,255,255,.45); cursor: default; transform: none; }

/* 머리 위 이름표: 말풍선(z 5)과 버튼(z 4) 아래. 말풍선은 이 높이만큼 위로 올라간다 */
.nametag { position: fixed; left: 0; top: 0; z-index: 3; padding: 0 6px; border-radius: 8px; background: rgba(17, 27, 38, .5); color: #fff; font-size: 11px; font-weight: 600; line-height: 17px; white-space: nowrap; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.nametag.me { background: rgba(17, 27, 38, .78); color: #ffe066; }
/* 닉네임 시트 */
.nick-now { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 2px 8px; border-radius: 12px; background: var(--card); }
.nick-now b { font-size: 16px; font-weight: 700; word-break: keep-all; }
.nick-now .sbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.nick-now .ic { width: 16px; height: 16px; }
.nick-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 8px; }
.chips { display: flex; gap: 6px; overflow-x: auto; overscroll-behavior: contain; touch-action: pan-x; scrollbar-width: none; padding-bottom: 2px; }
.chips::-webkit-scrollbar { display: none; }
.chips button { flex: none; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--card); color: var(--on); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.chips button[aria-pressed="true"] { background: var(--btn); color: var(--btn-on); }

/* 처음 3초만 글자까지 보이고, 그 뒤엔 왼쪽에 그림과 짧은 표시만 남는다. 누르면 다시 펼친다 */
.pill.tiny { align-self: flex-start; width: max-content; padding: 4px; cursor: pointer; }
.gauge.tiny { flex-direction: column; gap: 4px; }
.gauge.tiny .thb { width: 40px; height: 40px; }
.gauge.tiny .gbody { min-width: 0; width: 40px; }
.gauge.tiny .gbody b, .gauge.tiny .buy { display: none; }
.gauge.tiny .gbar { height: 5px; }
#ostat.tiny { padding-right: 10px; }