/* 액자.
 *
 * ── 후지지 않게 하려고 지킨 것 ─────────────────────────
 *  · **띠에 제 배경색을 주지 않는다.** 판 위에 얹는다. 위쪽 띠에 하늘색을 칠했더니
 *    캔버스 하늘과 미묘하게 어긋나 가로줄이 하나 생겼고, 그게 제일 후져 보였다.
 *  · **맨 글자를 두지 않는다.** 무엇이든 판때기(plaque)나 알약(pill) 안에 앉힌다.
 *    테두리 흰 선 + 아래로 지는 그림자 — 캐주얼 게임 UI 의 기본형.
 *  · **밤판에서 글자색이 뒤집힌다.** body[data-theme=night] 로 한 벌만 갈아 끼운다.
 *  · 누르는 것은 눌리게. 그림자를 두고 :active 에서 내려앉힌다.
 */
* { box-sizing: border-box; }

:root {
  --ink: #34465a;
  --plate: rgba(255,253,247,0.96);
  --plate-line: rgba(255,255,255,0.95);
  --drop: 0 3px 0 rgba(47,83,98,0.18), 0 5px 12px rgba(29,61,78,0.12);
  --gold: #ffc743;
  --gold-dark: #d89b27;
}
body[data-theme="night"] {
  --ink: #f2f5ff;
  --plate: rgba(38,42,86,0.78);
  --plate-line: rgba(180,200,255,0.5);
  --drop: 0 3px 0 rgba(6,8,30,0.5), 0 6px 16px rgba(0,0,0,0.35);
}

/* 메뉴 글씨 — 저작권 걱정 없는 귀여운 둥근 글꼴(Fredoka, SIL OFL).
 * 우리가 파일을 안고 간다 — 구글 폰트 주소를 부르면 크레이지게임스 iframe 이나
 * 광고 차단기 뒤에서 글꼴이 안 내려와 화면이 제각각이 된다.
 * 한글은 이 글꼴에 없으니 뒤의 시스템 글꼴이 받는다(라틴만 갈아 끼운다). */
@font-face {
  font-family: 'Fredoka'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("art/font/fredoka-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fredoka'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("art/font/fredoka-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 한글은 주아(배달의민족 주아, SIL OFL). **이 게임에 나오는 글자만** 깎아 담았다
 * (tools/subset-kr.py — 2.1MB 원본을 그대로 실으면 토스 번들이 무거워진다).
 * 새 한글 문구를 넣으면 빌드가 「빠진 글자」를 일러 준다. */
@font-face {
  font-family: 'Jua'; font-style: normal; font-weight: 400; font-display: swap;
  src: url("art/font/jua-kr.woff2") format("woff2");
}

html, body {
  margin: 0; padding: 0; height: 100%;
  background: #87d5fc;
  color: var(--ink);
  font: 15px/1.4 'Fredoka', 'Jua', -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", system-ui, sans-serif;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
#app { position: fixed; inset: 0; }

/* ── 넓은 화면(PC·크레이지게임스) ───────────────────────
 * 가로가 넓어지면 세로 판을 **가운데 기둥**으로 세운다.
 * 그냥 늘렸더니 판은 화면 한가운데 조그맣게 뜨고 위 띠만 끝에서 끝까지 늘어났다
 * (2026-09-16 1280×720 확인). 양옆은 어둡게 둔다 — 포털 화면이 원래 어둡다. */
@media (min-aspect-ratio: 3/4) {
  html { background: #0d1a29; }
  body { background: transparent; }
  /* 양옆은 **이 판의 배경 그림을 흐리게 키워** 채운다.
   * 단색으로 뒀더니 기둥 경계가 칼처럼 그어져 보였다(사장님 2026-09-16 「저 선은 뭐지」).
   * 흐린 같은 그림이 뒤에 깔리면 이음매가 사라지고 화면이 넓어 보인다. */
  body::before {
    content: ""; position: fixed; inset: -8%; z-index: -1;
    background: url("art/bg-day.jpg") center / cover no-repeat;
    filter: blur(34px) brightness(0.74) saturate(0.92);
  }
  body[data-theme="dusk"]::before { background-image: url("art/bg-dusk.jpg"); }
  body[data-theme="night"]::before { background-image: url("art/bg-night.jpg"); }
  #app {
    left: 50%; right: auto; transform: translateX(-50%);
    width: min(100vw, calc(100vh * 0.5625));
    box-shadow: 0 0 90px rgba(0,0,0,0.55);
  }
}

/* 판이 화면을 다 쓴다 */
#field { position: absolute; inset: 0; }
#cv { display: block; width: 100%; height: 100%; touch-action: none; }

/* ── 위쪽 띠 ─────────────────────────────────────────── */
#hud {
  position: absolute; left: 0; right: 0;
  /* ⚠ env(safe-area-inset-top) 은 토스 웹뷰에서 0 으로 내려올 때가 있다.
   * 그대로 믿었더니 폰에서 HUD 가 상태바·웹뷰 손잡이에 잘렸다(사장님 2026-09-16).
   * 최소 18px 은 언제나 띄운다. */
  top: 0;
  padding: calc(env(safe-area-inset-top, 0px) + 30px) 10px 0;
  pointer-events: none;                 /* 띠는 손짓을 가로채지 않는다 */
  /* 쪽지(#sheet z5)보다 위 — 끝 쪽지가 길어 아래 버튼이 안 보여도
   * 위의 🏠 로는 언제나 나갈 수 있어야 한다(2026-09-06 「메인 버튼이 아예 안 보인다」) */
  z-index: 6;
}
#hud button, #hud select { pointer-events: auto; }
  #hud .bar { display: flex; align-items: center; gap: 6px; min-width: 0; }
  #hud .sub { margin-top: 9px; }

.plaque, .pill, .tools button {
  background: var(--plate);
  border: 2px solid var(--plate-line);
  box-shadow: var(--drop);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--ink);
  border-radius: 999px;
}
.plaque {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 7px 5px 5px; flex: 1; min-width: 0; border-radius: 16px;
}
.plaque b {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(#ffe486, var(--gold));
  color: #6b4b06; font-size: 14px; font-weight: 900;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.12);
}
#pick {
  font: inherit; font-size: 12px; font-weight: 800; letter-spacing: -0.3px;
  color: var(--ink); background: transparent; border: 0; padding: 0 2px 0 0;
  -webkit-appearance: none; appearance: none; width: 100%; min-width: 0; text-overflow: ellipsis;
}
#pick option { color: #333; }

.pill { padding: 6px 8px; font-size: 12px; font-weight: 800; flex-shrink: 0; white-space: nowrap; }
/* 남은 동물 수 — 「목표」라는 8px 글자가 뭉개져 읽히지 않았다(2026-09-16).
 * 글자 대신 동물 얼굴을 앞에 세운다. 무엇이 몇  critters 남았는지 한눈에 읽힌다. */
#left {
  display: inline-flex; align-items: center; gap: 5px;
  min-width: 0; padding: 5px 10px 5px 5px; border-radius: 999px;
  font-size: 14px; font-weight: 900; line-height: 1;
}
#left::before {
  content: ""; display: block; width: 24px; height: 24px; border-radius: 7px;
  background: url("art/cube-rabbit.png") center / cover no-repeat;
  box-shadow: 0 1px 0 rgba(39,91,79,0.18);
}

/* 동전 — 판을 넘어 남는다. 늘 보여야 「모으는 중」이 된다 */
.pill.coin { color: #7a5a08; background: linear-gradient(#fff3c9, #ffe08a); border-color: #fff6dc; }
body[data-theme="night"] .pill.coin { color: #ffe9a8; background: rgba(96,72,16,0.7); border-color: rgba(255,225,140,0.45); }
.pill.coin::before, .good > b::after {
  content: ""; display: inline-block;
  width: 1.05em; height: 1.05em;
  background: url("art/gui/coin-v1.png") center / contain no-repeat;
  vertical-align: -0.15em;
}
.pill.coin::before { margin-right: 5px; }

/* 남은 시간 — 열 초 아래로 떨어지면 붉게 뛴다 */
#clock { padding: 4px 10px; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
#clock::before { content: "⏱"; margin-right: 4px; }
#clock.urgent { color: #fff; background: #e2574c; border-color: #ffd7d2; animation: tick 1s infinite; }
@keyframes tick { 50% { transform: scale(1.09); } }

.tools { margin-left: auto; display: flex; gap: 4px; flex-shrink: 0; }
.tools button {
  display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0;
  border: 0; border-radius: 50%; padding: 0; cursor: pointer;
  background: url("art/gui/circ-light-v1.png") center / 100% 100% no-repeat;
  box-shadow: 0 3px 6px rgba(28,53,65,0.22);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  color: #5a6d75;
}
.tools button::before {
  content: ""; display: block; width: 20px; height: 20px;
  background: currentColor;
  -webkit-mask: var(--tool-icon) center / contain no-repeat;
  mask: var(--tool-icon) center / contain no-repeat;
}
#home { --tool-icon: url("art/ui/home-v1.png"); }
#retry { --tool-icon: url("art/ui/retry-v1.png"); }
#mute { --tool-icon: url("art/ui/sound-v1.png"); }
#mute[aria-pressed="true"] { --tool-icon: url("art/ui/mute-v1.png"); color: #b65555; }
.tools button:active { transform: translateY(2px); box-shadow: none; }
button, select { touch-action: manipulation; }
/* 쪽지 안에서는 단추 위에서 끌어도 우리가 굴린다 — 탭은 그대로 먹는다 */
#sheet button, #sheet select, #sheet .card, #sheet img { touch-action: none; }
button:focus-visible, select:focus-visible { outline: 3px solid #339af0; outline-offset: 3px; }

/* 남은 구슬 — 그림이 판 위의 구슬과 똑같아야 알아본다 */
/* 한 줄로만 — 열 개가 Two rows로 접히면서 아래 글자를 밀어냈다 */
#queue { display: flex; align-items: center; gap: 3px; flex-wrap: nowrap; min-height: 25px; }
#queue .q { display: inline-flex; filter: drop-shadow(0 2px 2px rgba(30,40,80,0.25)); }
#queue .q.next {
  transform: scale(1.22); margin: 0 8px 0 2px;
  filter: drop-shadow(0 0 0 6px rgba(255,255,255,0.5)) drop-shadow(0 2px 3px rgba(30,40,80,0.3));
}
#queue .more { font-size: 12px; font-weight: 800; opacity: 0.75; margin-left: 3px; }
/* 쟁여 둔 아이템 — 구슬 목록 바로 옆에. 다음 발이 무엇인지 여기서 읽힌다 */
#queue .chg { position: relative; margin-left: 7px; }
#queue .chg b {
  position: absolute; right: -5px; bottom: -3px;
  min-width: 14px; padding: 0 3px; border-radius: 7px;
  background: #443a58; color: #fff; font-size: 10px; line-height: 14px; text-align: center;
}
#stage-name {
  margin-left: auto; padding: 4px 7px; min-width: 0; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis; border-radius: 8px;
  font-size: 10px; font-weight: 700; background: var(--plate); color: var(--ink);
}
#stage-name:empty { display: none; }
body[data-theme="night"] #stage-name { text-shadow: 0 1px 3px rgba(0,0,0,0.6); }

/* ── 구매한 아이템 — 판 옆에 세워 둔다 ──────────────────
   쪽지 안에만 두면 판을 못 보고 고르게 된다. 눌러서 그 자리에서 쓴다.
   당기는 자리(화면 아래쪽)와 겹치지 않게 가운데 위쪽에 세운다. */
/* 자리: **왼쪽 아래**. 가운데 위는 큐브가 서는 자리라 덮으면 안 되고
   (26% 에 두었더니 맨 왼쪽 줄을 가렸다), 가운데 아래는 엄지가 당기는 자리다.
   왼쪽 끝 46px 만 쓰면 둘 다 안 건드린다 — 거기서 당기는 건 어차피 나쁜 수다. */
#bag {
  position: absolute; left: calc(env(safe-area-inset-left) + 6px);
  bottom: calc(env(safe-area-inset-bottom) + 52px); z-index: 4;
  display: flex; flex-flow: column wrap; gap: 6px;
  /* 다섯 개 높이 — 여섯째부터는 옆줄로 선다. 한 줄로 다 세웠더니
   * 「여러 개 사면 아래 것이 잘려서 안 보인다」(사장님 9/6). */
  max-height: 252px; align-content: flex-start;
  pointer-events: none;
}
#bag[hidden] { display: none; }
#bag::before {
  content: "Owned"; align-self: center;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.5px;
  color: var(--ink); opacity: 0.75;
  text-shadow: 0 1px 3px rgba(255,255,255,0.6);
}
body[data-theme="night"] #bag::before { text-shadow: 0 1px 3px rgba(0,0,0,0.7); }
.bi {
  position: relative; pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0;
  border: 2px solid var(--plate-line); border-radius: 15px;
  background: var(--plate);
  box-shadow: var(--drop);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.bi:active { transform: translateY(2px); box-shadow: none; }
.bi.no { opacity: 0.4; }
.bmore {
  align-self: center; font-size: 10px; font-weight: 800;
  color: var(--ink); opacity: 0.75;
  text-shadow: 0 1px 3px rgba(255,255,255,0.6);
}
body[data-theme="night"] .bmore { text-shadow: 0 1px 3px rgba(0,0,0,0.7); }
.bi b {
  position: absolute; right: -4px; bottom: -4px;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: #443a58; color: #fff;
  font-size: 11px; font-weight: 900; line-height: 17px; text-align: center;
}

/* 쪽지 안에서 「지금 가진 것」 한 줄 */
.have {
  margin: 0 0 12px; padding: 8px 10px; border-radius: 14px;
  background: #eef1fa;
}
.have .eyebrow { margin: 0 0 6px; color: #8d86a0; }
.have .hi { position: relative; display: inline-flex; margin: 0 7px 0 0; }
.have .hi b {
  position: absolute; right: -4px; bottom: -3px;
  min-width: 15px; padding: 0 3px; border-radius: 8px;
  background: #443a58; color: #fff; font-size: 10px; line-height: 15px; text-align: center;
}

/* 시험용 계정임을 알린다 — 평소 기록과 딴 서랍을 쓴다 */
body[data-test="1"]::after {
  content: "Test account";
  position: fixed; left: 0; bottom: calc(env(safe-area-inset-bottom) + 2px);
  z-index: 20; padding: 3px 9px 3px 7px; border-radius: 0 999px 999px 0;
  background: rgba(226,87,76,0.9); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: 0.4px;
  pointer-events: none;
}

/* ── 아래쪽 ──────────────────────────────────────────── */
#foot {
  position: absolute; left: 0; right: 0;
  bottom: calc(env(safe-area-inset-bottom) + 6px);
  display: flex; justify-content: center;
  pointer-events: none;
}
#say:not(:empty) {
  padding: 7px 15px; border-radius: 999px;
  background: rgba(30,26,54,0.6); color: #fff;
  font-size: 13px; font-weight: 700;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: rise 0.28s ease;
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

#hint {
  position: absolute; left: 0; right: 0; bottom: 62px;
  margin: 0; text-align: center; font-size: 13px; font-weight: 800;
  color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,0.5);
  pointer-events: none;
}

/* ── 쪽지 — 판을 시작할 때와 끝났을 때 ────────────────── */
/* display 를 주면 hidden 속성이 무시된다. 안 보여야 할 쪽지가 판을 덮었다. */
#sheet[hidden] { display: none; }
#sheet {
  position: absolute; inset: 0; z-index: 5;
  /* 짧은 화면에서 쪽지가 화면보다 길어질 수 있다(Shop가 붙은 뒤로).
     .card 에 margin:auto 를 줬더니 **넘칠 때 위쪽이 스크롤로도 못 미치는 데로 밀렸다**
     (실기에서 「하드 · 5/200판」이 노치 뒤로 잘림 — 사장님 9/6). margin:auto 는 넘치면
     음수처럼 위로 민다. 대신 ::before/::after 신축 스페이서 — 자리가 남으면 가운데,
     넘치면 10px 로 줄고 처음부터 끝까지 스크롤이 닿는다. */
  display: flex; flex-direction: column; align-items: center;
  /* -webkit-overflow-scrolling:touch 는 뺐다 — 요즘 iOS 에선 필요 없고
   * absolute+flex 조합에서 간헐적으로 스크롤을 죽이는 사례가 있다 */
  overflow-y: auto;
  /* touch-action:pan-y 였다. 토스 웹뷰가 문서 스크롤을 잠근 채로 브라우저가
   * 손짓을 「내가 굴릴 것」이라 채가면(touchcancel) 우리 손잡이도 끊기고
   * 브라우저도 못 굴려서 **아무 일도 안 일어났다**(사장님 9/13 「스크롤이 안돼」).
   * none 으로 두면 브라우저가 손을 떼고, game.js 의 손잡이가 끝까지 굴린다. */
  touch-action: none;
  padding: calc(env(safe-area-inset-top) + 104px) 16px calc(env(safe-area-inset-bottom) + 20px);
  background: rgba(28,53,65,0.38);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  animation: fade 0.22s ease;
}
#sheet::before, #sheet::after { content: ""; flex: 1 0 10px; }
/* 메인 화면은 위 띠를 덜 피해도 된다 — 담을 게 많아 한 화면에 들어가야 한다 */
#sheet.sheet-main { padding-top: calc(env(safe-area-inset-top) + 14px); }
/* 첫 화면에서는 뒤 들판을 살린다 — blur 5px + 어두운 막에 눌려 풍경이 뭉개져 있었다 */
#sheet.sheet-main {
  background: linear-gradient(rgba(28,53,65,0.16), rgba(28,53,65,0.30));
  -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px);
}
/* ⚠ 여기에 흰 배경을 깔면 안 된다. 카드 테두리가 9-slice 구름 그림이라
 * 네모난 흰 바탕이 구름 밖으로 삐져나와 「사각 테두리에 둥근 프레임」이 됐다
 * (사장님 2026-09-16). 배경도 그림자도 border-image 가 이미 들고 있다. */

/* 메인 화면 — 판 HUD 는 여기서 할 일이 없다. 소리 단추 하나만 남긴다.
 * (2026-09-16 「UI 좀 개선하고」 — 첫 화면 위에 흰 알약이 여섯 개 떠 있었다) */
body[data-view="main"] #hud .plaque,
body[data-view="main"] #hud #left,
body[data-view="main"] #hud #coin,
body[data-view="main"] #hud #home,
body[data-view="main"] #hud #retry,
body[data-view="main"] #hud .sub { display: none; }
body[data-view="main"] #hud .bar { justify-content: flex-end; }
body[data-view="main"] #bag { display: none; }
/* 아래에 더 있으면 알려 준다 — 잘린 줄 모르고 「단추가 없다」고 한 적이 있다 */
#sheet.more::after { content: "Scroll down for more ↓"; flex: 0 0 auto;
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom) + var(--toss-banner-h, 0px) + 12px);
  padding: 7px 14px; border-radius: 999px;
  font-size: 11px; font-weight: 800; color: #123d4a;
  background: rgba(255,255,255,0.94); box-shadow: 0 4px 12px rgba(10,40,50,0.28);
  pointer-events: none; }
@keyframes fade { from { opacity: 0; } }

/* 쪽지 판 — GUI Pack Cartoon 의 팝업 배경을 9-slice 로 늘려 쓴다.
 * CSS 그라데이션으로 흉내 내던 두께·안쪽 테·그림자가 그림에 이미 들어 있다. */
.card {
  width: 100%; max-width: 360px;
  margin: 0; flex-shrink: 0;
  padding: 26px 24px 24px;
  border: 0; border-radius: 0;
  background: none;
  /* 배경이 비치는 판 — 판이 꽉 막혀 있으면 뒤 그림이 하나도 안 보인다
   * (사장님 2026-09-16 「프레임을 반투명으로 해 배경이 비치게」) */
  border-image: url("art/gui/panel-see-v1.png") 56 fill / 28px / 0 round;
  /* ⚠ backdrop-filter 를 걸면 **네모난 얼룩**이 생긴다 — 흐림은 상자 넓이대로 걸리는데
   * 판 모양은 구름이라, 구름 밖 네 귀퉁이에 뿌연 네모가 그대로 비쳤다(2026-09-16 밤).
   * 반투명은 그림이 이미 들고 있으니 흐림은 뺀다. */
  filter: drop-shadow(0 12px 26px rgba(16,46,59,0.30));
  text-align: center; color: #34465a;
  animation: pop 0.3s cubic-bezier(0.2, 1.5, 0.4, 1);
}
@keyframes pop { from { opacity: 0; transform: scale(0.86) translateY(14px); } }

.card .eyebrow {
  margin: 0 0 2px; font-size: 12px; font-weight: 800;
  letter-spacing: 1px; color: #5f7a7c;
}
.card h2 { margin: 0 0 8px; font-size: 25px; letter-spacing: -0.5px; }
.card .lead {
  margin: 0 0 14px; font-size: 14px; font-weight: 600; color: #637980;
  line-height: 1.45;
}

/* 이 판에서 주는 구슬 — 이름과 하는 짓을 같이 보여 준다.
   「쪼개미가 뭔지 모르겠다」는 말을 여기서 막는다. */
/* 구슬 목록 — 한 줄에 둘씩. 넷을 세로로 쌓으면 470px 가 되어
 * 「시작」이 배너 뒤로 밀렸다(사장님 9/13). 처음 보는 구슬(.new)만 한 줄 차지한다. */
.kinds {
  list-style: none; margin: 0 0 10px; padding: 0; text-align: left;
  display: grid; grid-template-columns: 1fr 1fr; gap: 5px;
}
.kinds li {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 8px; margin: 0; min-width: 0;
  border: 1px solid #e1eae8; border-radius: 12px; background: #edf4f1;
}
.kinds li.new { grid-column: 1 / -1; }
.kinds .tx { flex: 1; min-width: 0; }
.kinds b { display: inline; font-size: 13px; }
.kinds em {
  font-style: normal; font-size: 11px; font-weight: 800;
  color: #357c69; background: #d4e9df; border-radius: 8px; padding: 1px 5px; margin-left: 4px;
}
.kinds small { display: block; font-size: 11.5px; color: #5e7479; margin-top: 1px; }

.tags { margin: 0 0 14px; display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; }
.tags span {
  font-size: 11px; font-weight: 800; color: #536f72;
  background: #e8f0ed; border-radius: 999px; padding: 4px 10px;
}

/* 단추는 GUI Pack Cartoon(ricimi) 스프라이트를 9-slice 로 늘려 쓴다 —
 * 그라데이션 흉내로는 안 나오는 두께와 광택이 그림에 이미 들어 있다.
 * 가로는 마음대로 늘어나고, 둥근 모서리(슬라이스 46px)는 그대로 지킨다. */
.card button {
  width: 100%; margin-top: 2px; border: 0; border-radius: 0;
  padding: 16px 18px 19px; font: inherit; font-size: 16px; font-weight: 800; line-height: 1.25;
  color: #7a4f06; background: none; box-shadow: none;
  border-image: url("art/gui/btn-yellow-v1.png") 46 fill / 23px / 0 round;
  text-shadow: 0 1px 0 rgba(255,255,255,0.55);
  cursor: pointer; transition: transform 0.1s ease, filter 0.1s ease;
}
.card button:active { transform: translateY(3px); filter: brightness(0.94); }
.card button.ghost {
  margin-top: 8px; color: #5c6a70; text-shadow: 0 1px 0 rgba(255,255,255,0.5);
  border-image: url("art/gui/btn-gray-v1.png") 46 fill / 23px / 0 round;
}
.card button:disabled { opacity: 0.5; cursor: default; transform: none; box-shadow: none; }

/* 메인으로·처음부터 — 쪽지 맨 아래 한 줄에 작게 */
.mrow { display: flex; gap: 8px; }
.mrow button.ghost { flex: 1; font-size: 14px; padding: 11px 8px; }

/* ── 메인 화면 ───────────────────────────────────────── */
.card.main { text-align: center; padding-top: 18px; }
.msub {
  display: inline-block; margin: 0 0 9px; padding: 4px 12px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: 2px; color: #408876;
  background: #e3f2e9; border: 1px solid #d3e8df;
}
.mlogo {
  margin: 0 0 4px; font-size: 40px; line-height: 1.15; font-weight: 900; letter-spacing: -2px;
  color: #337f78; text-shadow: 0 2px 0 #fff, 0 4px 0 #c8e3d2;
}
.mintro { margin: 7px 0 10px; font-size: 12px; font-weight: 600; color: #637c7d; word-break: keep-all; }
.mchoose { margin: 11px 0 7px; font-size: 13px; font-weight: 800; color: #526d72; }
.mhelp { margin: 14px 0 8px; font-size: 11px; color: #6d8284; }
.mcredit { margin: 11px 0 0; font-size: 9px; letter-spacing: 0.4px; color: #788d8e; }
/* 이 판에서 구할 동물 얼굴 — 「동물 3 critters」라는 글자보다 얼굴이 먼저 읽힌다 */
.mfaces {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  margin: 9px 0 6px;
}
.mface {
  width: 38px; height: 38px; border-radius: 50%;
  filter: drop-shadow(0 2px 0 rgba(39,91,79,0.15)) drop-shadow(0 4px 7px rgba(39,91,79,0.14));
}
.mfaces b {
  margin-left: 4px; padding: 4px 9px; border-radius: 999px;
  background: #eaf1ed; color: #48706a; font-size: 12px; font-weight: 800;
}

/* 동물 친구 다섯 — 첫 화면의 주인공. 판에서 쓰는 그림 그대로라 들어가서 알아본다 */
.manimals { display: flex; justify-content: center; gap: 8px; margin: 10px 0 9px; }
.mcube {
  /* 동물은 **동그란 방울**이다 — 네모난 흰 받침을 깔면 방울 뒤에 각진 판이 비친다 */
  width: 56px; height: 56px; border-radius: 50%;
  filter: drop-shadow(0 3px 0 rgba(39,91,79,0.16)) drop-shadow(0 6px 10px rgba(39,91,79,0.16));
  animation: mbob 2.6s ease-in-out infinite;
}
.mcube:nth-child(2) { animation-delay: 0.26s; }
.mcube:nth-child(3) { animation-delay: 0.52s; }
.mcube:nth-child(4) { animation-delay: 0.78s; }
.mcube:nth-child(5) { animation-delay: 1.04s; }

.mballs {
  display: flex; justify-content: center; gap: 8px; margin: 0 auto; width: fit-content;
  padding: 5px 11px; border-radius: 18px; background: #eaf1ed;
  box-shadow: inset 0 2px 3px rgba(39,91,79,0.08);
}
.mballs .mb { animation: mbob 2.4s ease-in-out infinite; }
.mballs .mb:nth-child(2) { animation-delay: 0.3s; }
.mballs .mb:nth-child(3) { animation-delay: 0.6s; }
.mballs .mb:nth-child(4) { animation-delay: 0.9s; }
.mballs .mb:nth-child(5) { animation-delay: 1.2s; }
@keyframes mbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* 메인 소개 한 줄과 시작 단추 */
.mdesc {
  margin: 0 0 14px; font-size: 13px; line-height: 1.5;
  font-weight: 700; color: #6d6480; word-break: keep-all;
}
.mdesc .mstar {
  display: block; margin-top: 6px; font-size: 13px; color: #a2761a;
}
#mgo { width: 100%; margin-bottom: 12px; font-size: 18px; font-weight: 900; }

/* 모드 카드 — 누르는 것이 곧 시작.
 * 9/13: 셋이 되면서 세로 카드로는 화면을 넘어 아래 단추가 잘렸다.
 * 아이콘 왼쪽·글 오른쪽의 가로 줄로 바꿔 한 화면에 담는다(사장님). */
.mmodes { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.card button.mmode {
  --mode-accent: #299b7a; --mode-border: #a2d5bd; --mode-fill: #e4f5e9;
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-width: 0; padding: 9px 12px; border-radius: 18px;
  border: 2px solid var(--mode-border); background: linear-gradient(#f6fcf7, var(--mode-fill));
  box-shadow: 0 4px 0 var(--mode-border); text-align: left; color: var(--mode-accent);
}
.card button.mmode .mtext { flex: 1 1 auto; min-width: 0; }
.card button.mmode .mgo {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end;
  padding: 5px 9px; border-radius: 11px; background: rgba(255,255,255,0.72);
  font-size: 12px; font-weight: 900; line-height: 1.25; color: var(--mode-accent);
}
.card button.mmode .mgo i { font-style: normal; font-size: 10px; opacity: .85; }
.card button.mmode[data-m="h"] {
  --mode-accent: #b85f4e; --mode-border: #e9b1a0; --mode-fill: #ffeadf;
  background: linear-gradient(#fff9ee, var(--mode-fill));
}
.mode-icon { display: block; flex: 0 0 44px; margin: 0; object-fit: contain; filter: drop-shadow(0 3px 0 rgba(60,70,60,0.08)); }
.card button.mmode:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--mode-border); }
.card button.mmode b { display: block; font-size: 18px; margin-bottom: 1px; }
.card button.mmode em { display: block; font-style: normal; font-size: 11px; font-weight: 800; color: var(--mode-accent); }
.card button.mmode small {
  display: block; margin: 2px 0 0; font-size: 10.5px; line-height: 1.4;
  font-weight: 600; color: #5e7476; word-break: keep-all;
}
/* ⚠ 예전엔 `.mmode span` 이 흰 알약이었다. 글을 감싼 .mtext 까지 알약이 되어
 * 줄이 두 배로 길어졌다 — 이어서 판수 배지(.mgo)에만 준다. */
.card button.mmode.on { border-color: var(--mode-accent); box-shadow: 0 4px 0 var(--mode-accent); }
.card button.mmode.on:active { box-shadow: 0 1px 0 var(--mode-accent); }

/* Shop — 모은 동전을 여기서 쓴다 */
/* Shop. **눈에 띄어야 한다** — 조용한 띠로 두었더니 있는 줄도 몰랐다.
   그렇다고 「시작」과 다투면 안 되니, 금빛 단추 꼴은 시작에만 남기고
   여기는 차양 그림·테두리·파는 것 미리보기로 눈을 끈다. */
.shop {
  margin: 0 0 14px; padding: 8px;
  border-radius: 18px;
  background: linear-gradient(#fff9e9, #fff3d8);
  border: 1.5px solid #e9cf91;
  box-shadow: 0 3px 0 rgba(190,150,50,0.14);
}
.shop.can { animation: shopnudge 2.4s ease-in-out 3; }
@keyframes shopnudge {
  0%, 100% { box-shadow: 0 3px 0 rgba(190,150,50,0.22); }
  50% { box-shadow: 0 3px 0 rgba(190,150,50,0.22), 0 0 0 6px rgba(255,207,94,0.35); }
}
/* 파는 아이템 미리보기 — 접혀 있어도 무엇을 파는지 보인다 */
.sicons {
  display: flex; justify-content: center; gap: 6px; flex-wrap: wrap;
  padding: 2px 0 4px;
}
.sicons svg { filter: drop-shadow(0 1px 2px rgba(120,90,20,0.28)); }
.scoach {
  margin: 2px 0 4px; font-size: 11.5px; font-weight: 700; color: #a08540;
}
.scoach b { color: #d08a10; }
/* 「시작」이 이 쪽지의 주인공이다. Shop 머리는 조용한 띠로 둔다 —
   .card button 보다 셈이 세야 금빛 단추 꼴을 덮는다. */
.shop .shead {
  width: 100%; display: flex; align-items: center; gap: 9px;
  border: 0; border-radius: 12px; background: transparent; box-shadow: none;
  padding: 4px 4px;
  font: inherit; color: #7a5a08; text-align: left;
}
.shop .shead:active { transform: none; box-shadow: none; background: #fff1cd; }
.sbadge { flex: 0 0 auto; display: block; width: 34px; height: 34px; background: url("art/gui/shop-v1.png") center / contain no-repeat; }
.stitle { flex: 1; min-width: 0; font-size: 16px; font-weight: 900; letter-spacing: -0.2px; }
.stitle small { display: block; font-size: 10.5px; font-weight: 700; color: #a89066; letter-spacing: 0; }
.scoin {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px;
  background: linear-gradient(#fff3c9, #ffe08a); border: 1.5px solid #fff6dc;
  font-size: 13px; font-weight: 900; color: #7a5a08;
}
.scoin::after {
  content: ""; width: 1.05em; height: 1.05em;
  background: url("art/gui/coin-v1.png") center / contain no-repeat;
}
.shop .shead i { flex: 0 0 auto; font-style: normal; font-size: 14px; color: #c2a24f; }
.shead .c { color: #7a5a08; }
.shead i { font-style: normal; margin-left: 2px; }
.shop.open .shead { margin-bottom: 8px; }
.sgroup {
  margin: 6px 2px 4px; font-size: 11px; font-weight: 800;
  letter-spacing: 0.6px; color: #a08540; text-align: left;
}
.card button.good {
  width: 100%; display: flex; align-items: center; gap: 8px;
  margin: 0 0 5px; padding: 8px 10px;
  border: 1px solid #efe6ce; border-radius: 12px; background: #fffef9;
  box-shadow: 0 2px 0 rgba(160,133,64,0.18);
  font: inherit; font-size: 13px; font-weight: 800; line-height: 1.3; color: #526c76;
}
.good span { flex: 1; text-align: left; min-width: 0; }
.good .nm { display: block; color: #443a58; }
.good small { display: block; font-size: 10.5px; font-weight: 600; color: #8d86a0; }
.good > b { color: #7a5a08; flex: 0 0 auto; }
.good > b::after { margin-left: 4px; }
.card button.good:disabled { opacity: 0.45; box-shadow: none; }
.card button.good:not(:disabled):active { transform: translateY(2px); box-shadow: none; }

/* 이어하기 단추 안의 값 */
.card button b { font-weight: 900; }

/* 결과 — 팩의 트로피·별을 사용하되 Stars 개수는 접근성 이름으로 남긴다. */
.result-icon { display: block; object-fit: contain; margin: 0 auto 12px; }
.stars { display: flex; justify-content: center; gap: 8px; margin: 0 0 12px; line-height: 1; }
.stars i { display: block; width: 36px; height: 36px; font-size: 0; background: url("art/gui/star-off-v1.png") center / contain no-repeat; opacity: 0.85; }
.stars i.on { background-image: url("art/gui/star-v1.png"); filter: drop-shadow(0 2px 0 rgba(180,130,0,0.18)); opacity: 1; animation: star 0.4s backwards cubic-bezier(0.2,1.7,0.4,1); }
.stars i.on:nth-child(2) { animation-delay: 0.14s; }
.stars i.on:nth-child(3) { animation-delay: 0.28s; }
@keyframes star { from { opacity: 0; transform: scale(0.2) rotate(-40deg); } }

/* ── 광고 자리 — 앱(래퍼) 안에서만 ─────────────────────
   배너는 래퍼가 웹뷰 위에 얹는다. body.native-ad 동안 쪽지 아래를
   배너 높이만큼 비워 둔다 — 안 비우면 「시작」이 배너에 깔린다. */
/* 아래 여백 = 배너(78) + 그 위에 뜨는 프로모션 안내 띠(약 80).
 * 배너만 계산했더니 「시작」이 안내 띠 뒤로 들어갔다(2026-09-10, 구슬 4종 판). */
body.native-ad #sheet { padding-bottom: calc(env(safe-area-inset-bottom) + 96px); }
body.native-ad #foot { bottom: calc(env(safe-area-inset-bottom) + 72px); }

/* 광고 단추 — 「시작」의 금빛과 다투지 않는 초록. 공짜라는 얼굴이다 */
.card button.adfree, .card button#adrevive {
  color: #0d5b2e; background: linear-gradient(#b9f0c6, #7ddf9a);
  box-shadow: 0 5px 0 #4cb872;
}
.card button.adfree:active, .card button#adrevive:active {
  box-shadow: 0 1px 0 #4cb872;
}
.card button.adfree { margin-top: 8px; font-size: 15px; padding: 12px 16px; }
/* 광고 보상 한 줄 — 세로로 쌓으면 「시작」이 밀린다 */
.card .adlead { margin: 10px 0 0; font-size: 12px; color: #8a7a6a; text-align: center; }
.card .adrow { display: flex; gap: 6px; margin-top: 4px; }
.card .adrow button.adfree { flex: 1; min-width: 0; margin-top: 0; font-size: 13px; padding: 10px 4px; white-space: nowrap; }
.card button.adfree:disabled, .card button#adrevive:disabled {
  opacity: 0.6; box-shadow: none; transform: none;
}

@media (max-width: 360px) {
  #hud { padding-left: 6px; padding-right: 6px; }
  #hud .bar { gap: 4px; }
  .tools { gap: 3px; }
  .tools button { width: 36px; }
  .pill.coin { padding: 6px; font-size: 11px; }
  .plaque { padding-right: 4px; gap: 3px; }
  .plaque b { min-width: 22px; height: 24px; font-size: 12px; }
  #pick { font-size: 11px; }
  #sheet { padding-left: 12px; padding-right: 12px; }
  .card { padding: 18px 14px; }
  .mlogo { font-size: 42px; }
  .mmodes { gap: 8px; }
  .card button.mmode small { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* 극악 모드 카드 — 하드보다 한 단계 더 붉게(2026-09-13). */
.card button.mmode[data-m="x"] {
  --mode-accent: #8e2437; --mode-border: #d99aa6; --mode-fill: #ffe0e5;
  background: linear-gradient(#fff4f5, var(--mode-fill));
}
.card button.mmode.locked { opacity: .5; filter: grayscale(.45); }

/* 한 모드짜리 판(영어판·CrazyGames)의 커다란 시작 단추.
 * 고를 것이 없으니 첫 화면에서 눈이 갈 곳은 여기 하나여야 한다 —
 * 판 단추(btn-green)를 크게 늘리고 진행(판·별)을 아래 작게 붙인다. */
.card button.mplay {
  margin-top: 6px; padding: 18px 18px 22px; color: #1f5c2e;
  border-image: url("art/gui/btn-green-v1.png") 46 fill / 26px / 0 round;
}
.card button.mplay.alt { color: #6b4a12; border-image-source: url("art/gui/btn-yellow-v1.png"); }
.card button.mplay b { display: block; font-size: 22px; letter-spacing: 0.3px; }
.card button.mplay small {
  display: block; margin-top: 3px; font-size: 12px; font-weight: 800; opacity: 0.85;
}


/* ── 메뉴 글씨에 흰 테두리 ──────────────────────────────
 * 그림 위에 글자가 얹히니 테두리가 없으면 배경색에 먹힌다(사장님 2026-09-16 「겉에 흰테두리」).
 * paint-order 로 진짜 외곽선을 긋고, 안 되는 브라우저에서는 그림자 여덟 방향으로 흉내 낸다. */
.card h1, .card h2, .card button, .card .eyebrow, .card .lead, .card .mchoose,
.card .stitle, .card .sgroup, .card .tags span, .plaque, .pill {
  paint-order: stroke fill;
  -webkit-text-stroke: 3px rgba(255,255,255,0.92);
}
.card h1, .card h2 { -webkit-text-stroke-width: 4px; }
.card button small, .card button em, .card .stitle small { -webkit-text-stroke-width: 2px; }
@supports not (paint-order: stroke) {
  .card h1, .card h2, .card button, .card .eyebrow, .card .lead {
    -webkit-text-stroke: 0;
    text-shadow:
      -1.5px -1.5px 0 #fff, 1.5px -1.5px 0 #fff, -1.5px 1.5px 0 #fff, 1.5px 1.5px 0 #fff,
      0 -2px 0 #fff, 0 2px 0 #fff, -2px 0 0 #fff, 2px 0 0 #fff;
  }
}

/* 3D 제목 그림 — 글자 대신 그림을 쓸 때. 테두리·그림자는 그림이 이미 들고 있다.
 * ⚠ width/height 속성이 살아 있으니 CSS 로 폭만 줄이면 비율이 무너진다 — height:auto 를 꼭 같이 준다. */
.mlogo:has(.mlogoimg) { text-shadow: none; -webkit-text-stroke: 0; margin: 2px 0 6px; }
.mlogoimg {
  display: block; width: min(58%, 196px); height: auto; margin: 0 auto;
  filter: drop-shadow(0 6px 12px rgba(20,60,60,0.22));
  animation: mbob 3.2s ease-in-out infinite;
}

/* ── 데스크톱 가로 배치(포키·크레이지게임스 16:9) ──────────────
 * 포키 하드 요건: "16:9 aspect ratio. Your game must scale to cover the full canvas."
 * (2026-09-17 사장님 「데스크탑은 필수 아니야?」→「그럼 빨리 만들어야지」)
 * 판(물리·캔버스)은 9:16 기둥 그대로 두고, 폰에서 위 띠에 있던 것들을 **양옆 패널**로 옮긴다.
 * 왼쪽: 판 번호·이름·남은 구슬·시계  /  오른쪽: 동전·남은 동물·홈/다시/소리·산 아이템.
 * 기둥 밖으로 나가는 건 #app 이 transform 으로 서 있어 absolute 가 #app 기준이라 가능하다. */
@media (min-aspect-ratio: 3/4) and (min-width: 560px) {
  #hud { left: 0; right: 0; top: 0; bottom: 0; padding: 0; }
  #hud .bar, #hud .sub {
    position: absolute; top: 14px; width: clamp(150px, 26vw, 230px);
    flex-direction: column; align-items: stretch; gap: 8px;
    padding: 12px 10px; border-radius: 18px;
    background: rgba(12, 14, 34, 0.62); border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  /* ⚠ .sub 은 class="bar sub" 라 .bar 규칙도 같이 받는다 — .sub 을 뒤에 두고 left 를 풀어야
   * 왼쪽으로 간다(처음엔 둘 다 오른쪽에 겹쳐 떴다). */
  #hud .bar { left: 100%; margin-left: 14px; }
  #hud .sub { left: auto; right: 100%; margin-left: 0; margin-right: 14px; margin-top: 0; }
  #hud .plaque { flex: 0 0 auto; }
  #hud .tools { display: flex; justify-content: space-between; }
  #stage-name { margin-left: 0; white-space: normal; font-size: 12px; text-align: center; }
  #queue { justify-content: center; flex-wrap: wrap; }
  #clock { align-self: center; }
  /* 산 아이템 — 오른쪽 패널 아래에 가로로 */
  #bag {
    left: 100%; right: auto; bottom: auto; top: 200px; margin-left: 14px;
    width: clamp(150px, 26vw, 230px); max-height: none;
    flex-flow: row wrap; justify-content: center; padding: 10px; box-sizing: border-box;
    border-radius: 18px; background: rgba(12, 14, 34, 0.62); border: 1px solid rgba(255,255,255,0.14);
  }
  #bag::before { flex-basis: 100%; }
  /* 패널 글자는 어두운 바탕 위라 밝게 */
  #hud .plaque, #hud .pill, #hud .tools button, #hud #stage-name, #hud #queue .more {
    color: #fff;
  }
  /* 첫 화면 쪽지는 기둥보다 넓게 편다 — 640×360 에서 기둥이 200px 이라 아이템 줄이 넘치고
   * 단추 글자가 한 글자씩 세로로 꺾였다(2026-09-17 포키 Inspector 데스크톱 576×324). */
  #sheet.sheet-main {
    left: 50%; right: auto; width: min(94vw, 440px); transform: translateX(-50%);
    padding-left: 12px; padding-right: 12px;
  }
  #sheet.sheet-main .card { max-width: 400px; }
  /* 판 소개·끝 쪽지 — 데스크톱은 화면이 낮아(470px) 상점 아래의 시작 단추가 스크롤 밖으로 숨는다.
   * 포키 플레이테스트에서 데스크톱 5명이 전부 0 나갔다(2026-09-17). 위 여백을 줄이고
   * 시작 단추를 상점 위로 올린다. */
  #sheet { padding-top: 18px; padding-bottom: 18px; left: 50%; right: auto; width: min(94vw, 600px); transform: translateX(-50%); }
  #sheet .card.intro {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 14px; align-items: start;
    grid-template-areas: "brief start" "brief shop" "brief mrow";
    max-width: 560px; text-align: left;
  }
  #sheet .card.intro .brief { grid-area: brief; }
  #sheet .card.intro #start { grid-area: start; margin-top: 0; }
  #sheet .card.intro .shop { grid-area: shop; }
  #sheet .card.intro .mrow { grid-area: mrow; }
  /* 쪽지가 떠 있는 동안 양옆 패널은 물러난다 — 넓어진 쪽지 가장자리를 가리기 때문 */
  body:has(#sheet:not([hidden])) #hud .bar, body:has(#sheet:not([hidden])) #hud .sub, body:has(#sheet:not([hidden])) #bag { opacity: 0; pointer-events: none; }
  /* 첫 화면의 소리 단추는 넓어진 쪽지 밖, 오른쪽 위로 */
  body[data-view="main"] #hud .bar {
    left: auto; right: 0; margin: 0; top: 10px; width: auto; padding: 8px;
    background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

/* Prism Breaker 껍데기 — 크리스탈 동굴에 맞춘 어두운 UI.
 * 원본(구슬팡·Critter Pop)의 카툰 판·단추 그림을 덮어쓴다. 그림 파일은 그대로 두고 CSS 로만 가린다. */
:root {
  --pb-ink: #eaf2ff;
  --pb-muted: #a9b6d8;
  --pb-panel: rgba(22, 20, 46, 0.86);
  --pb-line: rgba(120, 170, 255, 0.35);
  --pb-cyan: #56e1ff;
  --pb-violet: #8b6bff;
}
body { color: var(--pb-ink); }

/* 판 — 구름 대신 어두운 유리 */
.card {
  border-image: none !important;
  background: var(--pb-panel);
  border: 1.5px solid var(--pb-line);
  border-radius: 22px;
  color: var(--pb-ink);
  box-shadow: 0 0 0 1px rgba(86,225,255,0.12) inset, 0 18px 40px rgba(4,6,24,0.55);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  filter: none;
}
.card .eyebrow, .card .lead, .card small, .card .mchoose { color: var(--pb-muted); }
.card h1, .card h2 { color: var(--pb-ink); }

/* 글자 — 흰 글씨에 회색 테두리(사장님 2026-09-17 「글자가 안 보인다」 → 「주황 말고 회색」).
 * 어두운 동굴 배경에서 흰 글자만 놓으면 오로라·수정에 먹힌다. 짙은 회색이 배경과 글자 사이를 갈라 준다. */
.card h1, .card h2, .card button, .card .eyebrow, .card .lead, .card .mchoose,
.card .stitle, .card .sgroup, .card .tags span, .card small, .card b, .card em,
.plaque, .pill, .tools button, #hud button, #queue .more {
  color: #ffffff !important;
  paint-order: stroke fill;
  -webkit-text-stroke: 3.5px #3c4257 !important;
  text-shadow: 0 2px 5px rgba(8,4,24,0.65);
}
.card h1, .card h2 { -webkit-text-stroke-width: 4.5px !important; }
.card small, .card .eyebrow, .card .tags span, .plaque, .pill { -webkit-text-stroke-width: 2.6px !important; }
@supports not (paint-order: stroke) {
  .card h1, .card h2, .card button, .card .lead, .plaque, .pill {
    -webkit-text-stroke: 0 !important;
    text-shadow: -2px -2px 0 #3c4257, 2px -2px 0 #3c4257, -2px 2px 0 #3c4257, 2px 2px 0 #3c4257,
                 0 -2.5px 0 #3c4257, 0 2.5px 0 #3c4257, -2.5px 0 0 #3c4257, 2.5px 0 0 #3c4257;
  }
}

/* 단추 — 사탕색 그림 대신 크리스탈 그라데이션 */
.card button {
  border-image: none !important;
  border-radius: 16px;
  background: linear-gradient(180deg, #7ff0ff, #35b6ff 60%, #2a7fe0);
  border: 1px solid rgba(255,255,255,0.35);
  box-shadow: 0 4px 0 #1c56a8, 0 10px 20px rgba(6,12,40,0.45);
}
.card button:active { transform: translateY(3px); box-shadow: 0 1px 0 #1c56a8; }
.card button.ghost {
  color: var(--pb-ink);
  background: rgba(70, 80, 140, 0.45);
  border: 1px solid var(--pb-line);
  box-shadow: none;
  text-shadow: none;
}
.card button.mplay {
  background: linear-gradient(180deg, #b79bff, #7a4dff 55%, #5b2fe0);
  color: #fff;
  box-shadow: 0 5px 0 #3c1aa8, 0 14px 26px rgba(20,8,60,0.5);
  text-shadow: 0 2px 4px rgba(10,0,40,0.5);
}
.card button.mplay:active { box-shadow: 0 1px 0 #3c1aa8; }

/* 위 띠(판 번호·남은 것·동전)와 옆 아이템 — 밝은 알약을 어둡게 */
.plaque, .pill, .tools button, #hud button, #hud select {
  background: rgba(10, 11, 32, 0.94) !important;
  color: #ffffff !important;
  border: 1px solid rgba(140, 190, 255, 0.5) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
}
#hud button { filter: brightness(1.6) saturate(0.6); }

/* ⚠ **작은 글씨에 두꺼운 테두리를 두르면 오히려 뭉개진다**
 * (2026-09-17 사장님 「이 위쪽 글자 가독성이 안좋아」).
 * 카드의 큰 글씨는 3.5px 가 맞지만, 위 띠의 13~15px 글자는 획 사이가 메워진다.
 * 여기서는 테두리를 얇게 하고 대신 바탕을 더 짙게 깔아 대비를 낸다.
 * select 에 걸려 있던 brightness 필터도 뺐다 — 글자까지 같이 희뿌예졌다. */
.plaque, .pill, #hud select, #stage-name, #queue .more, .tools button {
  -webkit-text-stroke: 0 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 10px rgba(0, 0, 0, 0.7) !important;
  color: #ffffff !important;
  font-weight: 800;
}
#hud select { filter: none !important; }
#stage-name {
  background: rgba(10, 11, 32, 0.92);
  border: 1px solid rgba(140, 190, 255, 0.45);
  border-radius: 999px;
  padding: 2px 11px;
  -webkit-text-stroke: 0 !important;                 /* 작은 글씨엔 테두리가 독이다 */
  text-shadow: 0 1px 3px rgba(0,0,0,0.95) !important;
  letter-spacing: 0.2px;
}
/* 판 번호 — 노란 동전 위에 짙은 갈색 글씨라 안 읽혔다(2026-09-17 사장님 지적).
 * 동전을 어둡게 깔고 흰 숫자를 얹는다. */
.plaque b, #stage-no {
  color: #ffffff !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.95), 0 0 6px rgba(0,0,0,0.8) !important;
  background: rgba(10, 11, 32, 0.92) !important;
  border: 1px solid rgba(140, 190, 255, 0.5) !important;
  border-radius: 999px !important;
  background-image: none !important;
}
/* 남은 구슬 줄의 「+n」 도 같이 */
#queue .more { -webkit-text-stroke: 0 !important; text-shadow: 0 1px 3px rgba(0,0,0,0.95) !important; }

/* 가게 — 노란 차양 대신 짙은 보라 */
.shop { background: rgba(28, 24, 60, 0.9) !important; border-color: var(--pb-line) !important; }
.shop .stitle, .shop .scoin, .shop .scoach, .shop .sgroup { color: var(--pb-ink) !important; }
.good { background: rgba(46, 44, 92, 0.7) !important; color: var(--pb-ink) !important; border-color: var(--pb-line) !important; }
.mballs { background: rgba(30, 30, 66, 0.7) !important; box-shadow: none !important; }

/* 밝은 알약들도 어둡게 — 흰 바탕에 흰 글씨가 남아 있었다 */
.kinds li { background: rgba(38, 40, 86, 0.75) !important; border-color: var(--pb-line) !important; }
.kinds em { background: rgba(86, 225, 255, 0.18) !important; color: #dff6ff !important; }
.kinds small, .kinds b { color: #fff !important; }
.mfaces b { background: rgba(38, 40, 86, 0.8) !important; color: #fff !important; }
.shop .shead:active { background: rgba(40, 36, 80, 0.9) !important; }
.scoin { background: rgba(60, 50, 110, 0.85) !important; color: #fff !important; }
#sheet.more::after { background: rgba(28, 26, 62, 0.92); color: #fff; }
/* 시간 알약이 붉게 번쩍일 때만 흰 글씨 그대로 둔다 */
#clock.urgent { -webkit-text-stroke: 2.6px #7a1d16 !important; }

/* 배경 다섯 — 팩의 Map 2(산성 초록)·Map 3(보랏빛 노을)을 더 얹었다(2026-09-18 「맵이 몇 개 더」) */
@media (min-aspect-ratio: 3/4) {
  body[data-theme="acid"]::before { background-image: url("art/bg-acid.jpg"); }
  body[data-theme="sunset"]::before { background-image: url("art/bg-sunset.jpg"); }
}