/* ============================================================
   낱말 퀘스트 · WORD QUEST — Midnight Arcade design system
   deep night sky + chunky toy tiles + gold/coral/mint accents
   ============================================================ */

:root {
  --bg-0: #0c1024;
  --bg-1: #141b3a;
  --bg-2: #1d2650;
  --panel: #202a58;
  --panel-hi: #2a3670;
  --line: rgba(255, 255, 255, .08);

  --ink: #f4f1e8;
  --ink-dim: #9aa3c7;

  --gold: #ffc93c;
  --gold-deep: #e8a20c;
  --coral: #ff6b6b;
  --coral-deep: #e04848;
  --mint: #4ecdc4;
  --mint-deep: #2fa89f;
  --sky: #6ea8ff;

  --tile: #fdf6e3;
  --tile-ink: #2b2313;
  --tile-side: #cdbf9a;
  --tile-good: #ffe9a8;
  --tile-good-side: #d9a514;

  --font-disp: 'Jua', 'Fredoka', sans-serif;
  --font-num: 'Fredoka', 'Jua', sans-serif;

  --r-lg: 22px;
  --r-md: 16px;
  --r-sm: 10px;
  --shadow-pop: 0 10px 24px rgba(0, 0, 0, .45);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }

body {
  font-family: var(--font-disp);
  background: radial-gradient(120% 80% at 50% -10%, #27336e 0%, var(--bg-1) 45%, var(--bg-0) 100%) fixed;
  color: var(--ink);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

/* ---- 밤하늘 별 배경 ------------------------------------------ */
#stars { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
#stars .star {
  position: absolute; border-radius: 50%;
  background: #fff;
  animation: twinkle 3.2s ease-in-out infinite;
}
@keyframes twinkle { 0%, 100% { opacity: .15; } 50% { opacity: .9; } }

/* ---- 앱 셸 (재사용 레이아웃: 헤더/컨텐트/바텀) ---------------- */
.app {
  position: fixed; inset: 0; z-index: 1;
  max-width: 480px; margin: 0 auto;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent 120px);
  box-shadow: 0 0 60px rgba(0,0,0,.5);
}

.app-header {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
  min-height: 58px;
}
.app-content {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding: 4px 14px 18px;
  scrollbar-width: none;
}
.app-content::-webkit-scrollbar { display: none; }
.app-bottom { flex: 0 0 auto; }

/* ---- 헤더 위젯 ------------------------------------------------ */
.h-title {
  flex: 1; font-size: 21px; letter-spacing: .5px;
  text-shadow: 0 2px 0 rgba(0,0,0,.35);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.h-logo { height: 26px; vertical-align: -6px; margin-right: 2px; }
.h-btn {
  width: 42px; height: 42px; flex: 0 0 auto;
  display: grid; place-items: center;
  font-size: 19px; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 4px 0 rgba(0,0,0,.35);
  cursor: pointer; transition: transform .08s;
}
.h-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.35); }

.chip {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px;
  background: rgba(0,0,0,.32); border: 1px solid var(--line);
  font-family: var(--font-num); font-weight: 600; font-size: 15px;
}
.chip .ico { font-size: 15px; }
.chip.gem { color: #b7e6ff; }
.chip.score { color: var(--gold); }
.chip.streak { color: var(--coral); }
.chip .bump { display: inline-block; animation: bump .35s; }
@keyframes bump { 30% { transform: scale(1.5); } }

/* ---- 바텀 내비 (재사용) --------------------------------------- */
.bottom-nav {
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 6px 10px 8px; /* 하단 인셋은 네이티브(앱)가 처리 → env 중복 제거 */
  background: linear-gradient(180deg, rgba(12,16,36,0), rgba(12,16,36,.92) 30%);
}
.bottom-nav button {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 2px; border: 0; background: none; color: var(--ink-dim);
  font-family: var(--font-disp); font-size: 11px; cursor: pointer;
  border-radius: var(--r-sm); transition: transform .12s, color .12s;
}
.bottom-nav button .nico { font-size: 22px; filter: grayscale(.7) opacity(.75); transition: filter .12s, transform .12s; }
.bottom-nav button.on { color: var(--gold); }
.bottom-nav button.on .nico { filter: none; transform: translateY(-3px) scale(1.18); }
.bottom-nav button:active .nico { transform: scale(.85); }

/* ---- 공용 게임 버튼 (3D 토이 버튼) ----------------------------- */
.gbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-disp); font-size: 18px; color: #3a2a05;
  background: linear-gradient(180deg, #ffe08a, var(--gold));
  border: 0; border-radius: var(--r-md);
  padding: 14px 26px;
  box-shadow: 0 6px 0 var(--gold-deep), 0 12px 20px rgba(0,0,0,.35);
  cursor: pointer; transition: transform .08s, box-shadow .08s;
}
.gbtn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--gold-deep); }
.gbtn.coral { color: #fff; background: linear-gradient(180deg, #ff8f8f, var(--coral)); box-shadow: 0 6px 0 var(--coral-deep), 0 12px 20px rgba(0,0,0,.35); }
.gbtn.coral:active { box-shadow: 0 1px 0 var(--coral-deep); }
.gbtn.mint { color: #06332f; background: linear-gradient(180deg, #7fe3dc, var(--mint)); box-shadow: 0 6px 0 var(--mint-deep), 0 12px 20px rgba(0,0,0,.35); }
.gbtn.mint:active { box-shadow: 0 1px 0 var(--mint-deep); }
.gbtn.ghost { color: var(--ink); background: var(--panel); box-shadow: 0 6px 0 #10163a, 0 12px 20px rgba(0,0,0,.25); border: 1px solid var(--line); }
.gbtn.ghost:active { box-shadow: 0 1px 0 #10163a; }
.gbtn.big { font-size: 22px; padding: 18px 40px; border-radius: 20px; }
.gbtn.small { font-size: 14px; padding: 9px 16px; box-shadow: 0 4px 0 var(--gold-deep); }
.gbtn.small:active { box-shadow: 0 1px 0 var(--gold-deep); }
.gbtn:disabled { filter: grayscale(.8) brightness(.7); pointer-events: none; }

/* ---- 패널 ------------------------------------------------------ */
.panel {
  background: linear-gradient(180deg, var(--panel-hi), var(--panel));
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: 0 8px 0 rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
  padding: 16px;
}

/* ============================================================
   홈 화면
   ============================================================ */
.home { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 4vh; }
.logo-wrap { text-align: center; animation: drop-in .7s cubic-bezier(.2, 1.4, .4, 1); }
.logo-moon { margin-bottom: -6px; }
.logo-moon img {
  width: 92px; height: 92px;
  animation: moon-float 4s ease-in-out infinite;
  filter: drop-shadow(0 8px 24px rgba(255,201,60,.35));
}
@keyframes moon-float { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-9px) rotate(4deg); } }
.logo-tiles { display: flex; gap: 7px; justify-content: center; margin-bottom: 12px; }
.logo-tiles .lt {
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center;
  font-size: 26px; color: var(--tile-ink);
  background: linear-gradient(180deg, #fffdf4, var(--tile));
  box-shadow: 0 6px 0 var(--tile-side), 0 10px 18px rgba(0,0,0,.4);
  animation: tile-bob 2.6s ease-in-out infinite;
}
.logo-tiles .lt:nth-child(2n) { animation-delay: .3s; background: linear-gradient(180deg, #fff3c4, var(--tile-good)); box-shadow: 0 6px 0 var(--tile-good-side), 0 10px 18px rgba(0,0,0,.4); }
.logo-tiles .lt:nth-child(3n) { animation-delay: .55s; }
@keyframes tile-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(2deg); } }
.logo-sub { color: var(--ink-dim); font-size: 14px; letter-spacing: 4px; font-family: var(--font-num); font-weight: 600; }
@keyframes drop-in { from { transform: translateY(-40px) scale(.8); opacity: 0; } }

.home .panel { width: 100%; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.home-stats { display: flex; gap: 10px; width: 100%; justify-content: center; flex-wrap: wrap; }

.lang-switch { display: flex; background: rgba(0,0,0,.3); border-radius: 999px; padding: 4px; gap: 4px; }
.lang-switch button {
  border: 0; border-radius: 999px; padding: 8px 18px;
  font-family: var(--font-disp); font-size: 14px;
  background: none; color: var(--ink-dim); cursor: pointer; transition: all .15s;
}
.lang-switch button.on { background: var(--gold); color: #3a2a05; box-shadow: 0 2px 8px rgba(255,201,60,.4); }

/* ============================================================
   스테이지 선택
   ============================================================ */
.stage-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding-top: 8px; }
.stage-node {
  aspect-ratio: 1; border: 0; border-radius: 18px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-family: var(--font-num); font-weight: 700; font-size: 20px;
  transition: transform .1s;
  animation: pop-in .4s cubic-bezier(.2, 1.6, .4, 1) backwards;
}
.stage-node:nth-child(4n+2) { animation-delay: .04s; } .stage-node:nth-child(4n+3) { animation-delay: .08s; } .stage-node:nth-child(4n+0) { animation-delay: .12s; }
@keyframes pop-in { from { transform: scale(.4); opacity: 0; } }
.stage-node:active { transform: scale(.92); }
.stage-node .st-ico { font-size: 17px; }
.stage-node.completed { color: #3a2a05; background: linear-gradient(180deg, #ffe08a, var(--gold)); box-shadow: 0 5px 0 var(--gold-deep); }
.stage-node.open { color: #06332f; background: linear-gradient(180deg, #7fe3dc, var(--mint)); box-shadow: 0 5px 0 var(--mint-deep); animation: pulse-glow 1.6s ease-in-out infinite; }
.stage-node.playing { color: #fff; background: linear-gradient(180deg, #ff8f8f, var(--coral)); box-shadow: 0 5px 0 var(--coral-deep); }
.stage-node.locked { color: var(--ink-dim); background: var(--panel); box-shadow: 0 5px 0 #10163a; cursor: default; }
@keyframes pulse-glow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.22) drop-shadow(0 0 12px rgba(78,205,196,.7)); } }

/* ============================================================
   게임 화면
   ============================================================ */
.game-wrap { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.game-wrap .clue-bar, .game-wrap .item-bar, .game-wrap .kb { flex: 0 0 auto; }

.clue-bar {
  display: flex; align-items: center; gap: 10px;
  background: rgba(0,0,0,.34); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 8px 14px; height: 62px;
  overflow: hidden; cursor: pointer;
}
.clue-bar .cb-no {
  flex: 0 0 auto; font-family: var(--font-num); font-weight: 700; font-size: 13px;
  color: #06332f; background: var(--mint); border-radius: 8px; padding: 3px 8px;
}
.clue-bar .cb-text {
  flex: 1; font-size: 14px; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.clue-bar .cb-arrow { color: var(--ink-dim); font-size: 13px; }

.grid-area { flex: 1 1 auto; min-height: 0; display: grid; place-items: center; }
.xw-grid { position: relative; }
.xw-cell {
  position: absolute; border-radius: 8px;
  display: grid; place-items: center;
  background: linear-gradient(180deg, #fffdf4, var(--tile));
  box-shadow: 0 3px 0 var(--tile-side);
  color: var(--tile-ink); cursor: pointer;
  transition: transform .1s, background .15s, box-shadow .15s;
}
.xw-cell .no {
  position: absolute; top: 1px; left: 4px;
  font-family: var(--font-num); font-weight: 600;
  color: #8a7b52; pointer-events: none;
}
.xw-cell.in-slot { background: linear-gradient(180deg, #eafffd, #bff0ec); box-shadow: 0 3px 0 #7cc4be; }
.xw-cell.active { background: linear-gradient(180deg, #fff3c4, #ffe08a); box-shadow: 0 3px 0 var(--tile-good-side), 0 0 14px rgba(255,201,60,.55); transform: scale(1.08); z-index: 2; }
.xw-cell.solved { background: linear-gradient(180deg, #ffe9a8, #ffd257); box-shadow: 0 3px 0 var(--tile-good-side); color: #4a3403; }
.xw-cell.revealed { background: linear-gradient(180deg, #e0d4ff, #c3b1f7); box-shadow: 0 3px 0 #8f79cf; }
.xw-cell.pop { animation: cell-pop .45s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes cell-pop { 40% { transform: scale(1.3) rotate(4deg); } }
.xw-cell.shake { animation: cell-shake .4s; background: linear-gradient(180deg, #ffd3d3, #ffb0b0); box-shadow: 0 3px 0 #d67373; }
@keyframes cell-shake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.xw-cell.spark { animation: cell-spark .8s; }
@keyframes cell-spark { 0% { filter: brightness(2.2) drop-shadow(0 0 14px #c3b1f7); transform: scale(1.35); } }

.pick-mode .xw-cell:not(.solved) { outline: 2px dashed var(--sky); outline-offset: -2px; animation: pick-blink 1s infinite; }
@keyframes pick-blink { 50% { outline-color: transparent; } }

/* 아이템 바 */
.item-bar { display: flex; gap: 8px; justify-content: center; padding: 2px 0 6px; }
.item-btn {
  position: relative; border: 0; cursor: pointer;
  width: 58px; height: 62px; border-radius: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: linear-gradient(180deg, var(--panel-hi), var(--panel));
  border: 1px solid var(--line);
  box-shadow: 0 5px 0 #10163a;
  color: var(--ink); font-family: var(--font-disp); font-size: 10px;
  transition: transform .08s;
}
.item-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 #10163a; }
.item-btn .iico { font-size: 22px; }
.item-btn .cnt {
  position: absolute; top: -6px; right: -6px;
  min-width: 22px; height: 22px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--coral); color: #fff;
  font-family: var(--font-num); font-weight: 700; font-size: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.item-btn .cnt.zero { background: #555f8a; }
.item-btn.armed { outline: 3px solid var(--sky); animation: pulse-glow 1s infinite; }

/* 클루 드로어 */
.clue-drawer { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow-y: auto; }
.clue-drawer h4 { color: var(--gold); font-size: 15px; margin: 6px 0 2px; }
.clue-item {
  display: flex; gap: 8px; padding: 9px 10px; border-radius: var(--r-sm);
  background: rgba(0,0,0,.25); font-size: 14px; line-height: 1.35; cursor: pointer;
}
.clue-item.done { opacity: .45; text-decoration: line-through; }
.clue-item.cur { outline: 2px solid var(--mint); }
.clue-item b { color: var(--mint); font-family: var(--font-num); flex: 0 0 auto; }

/* ---- 콤보 배너 ------------------------------------------------- */
#combo-layer { position: fixed; inset: 0; pointer-events: none; z-index: 60; display: grid; place-items: center; }
.combo-banner {
  font-family: var(--font-disp); text-align: center;
  animation: combo-pop .9s cubic-bezier(.2, 1.5, .4, 1) forwards;
  text-shadow: 0 4px 0 rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.5);
}
.combo-banner .cb-main { display: block; }
.combo-banner .cb-sub { display: block; font-size: 18px; color: var(--ink); margin-top: 2px; }
.combo-good .cb-main { font-size: 44px; color: var(--mint); }
.combo-great .cb-main { font-size: 50px; color: var(--sky); }
.combo-excellent .cb-main { font-size: 56px; color: var(--gold); }
.combo-amazing .cb-main {
  font-size: 62px;
  background: linear-gradient(90deg, #ffc93c, #ff6b6b, #ffc93c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.combo-legendary .cb-main {
  font-size: 68px;
  background: linear-gradient(90deg, #4ecdc4, #6ea8ff, #c3b1f7, #ff6b6b, #ffc93c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: legend-hue 1s linear infinite;
}
@keyframes legend-hue { to { filter: hue-rotate(360deg); } }
@keyframes combo-pop {
  0% { transform: scale(.2) rotate(-8deg); opacity: 0; }
  35% { transform: scale(1.15) rotate(2deg); opacity: 1; }
  55% { transform: scale(1); }
  80% { opacity: 1; }
  100% { transform: scale(1.05) translateY(-30px); opacity: 0; }
}

body.shake-hard .app { animation: hard-shake .45s; }
@keyframes hard-shake {
  20% { transform: translate(-6px, 3px) rotate(-.5deg); }
  40% { transform: translate(6px, -3px) rotate(.5deg); }
  60% { transform: translate(-4px, -2px); }
  80% { transform: translate(4px, 2px); }
}

/* ---- 플로팅 텍스트 / 파티클 ------------------------------------ */
#fx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 55; overflow: hidden; }
.float-text {
  position: absolute; font-family: var(--font-num); font-weight: 700; font-size: 24px;
  color: var(--gold); text-shadow: 0 2px 0 rgba(0,0,0,.5);
  animation: float-up 1s ease-out forwards;
}
@keyframes float-up { to { transform: translateY(-70px) scale(1.25); opacity: 0; } }
.particle { position: absolute; border-radius: 50%; pointer-events: none; }
.confetti-bit { position: absolute; width: 10px; height: 14px; top: -20px; animation: confetti-fall linear forwards; }
@keyframes confetti-fall { to { transform: translateY(110vh) rotate(720deg); } }

/* ---- 클리어 오버레이 ------------------------------------------- */
.clear-overlay {
  position: fixed; inset: 0; z-index: 70;
  display: grid; place-items: center;
  background: rgba(8, 10, 26, .82); backdrop-filter: blur(6px);
  animation: fade-in .4s;
}
@keyframes fade-in { from { opacity: 0; } }
.clear-card { text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; padding: 20px; }
.clear-stars { display: flex; gap: 14px; font-size: 54px; }
.clear-stars .cs { animation: star-in .5s cubic-bezier(.2, 1.8, .4, 1) backwards; filter: drop-shadow(0 6px 12px rgba(255,201,60,.45)); }
.clear-stars .cs:nth-child(2) { animation-delay: .25s; font-size: 68px; }
.clear-stars .cs:nth-child(3) { animation-delay: .5s; }
@keyframes star-in { from { transform: scale(0) rotate(-180deg); opacity: 0; } }
.clear-title { font-size: 42px; color: var(--gold); text-shadow: 0 4px 0 rgba(0,0,0,.4); animation: drop-in .6s .2s backwards; }
.clear-score { font-family: var(--font-num); font-weight: 700; font-size: 30px; color: var(--ink); }
.clear-score small { display: block; font-size: 14px; color: var(--mint); margin-top: 4px; }
.clear-actions { display: flex; gap: 12px; margin-top: 8px; }
.clear-brand {
  margin-top: 18px; font-size: 14px; color: var(--ink-dim); letter-spacing: 2px;
  display: flex; align-items: center; gap: 6px; justify-content: center;
}
.clear-brand img { height: 20px; }

/* ============================================================
   랭킹
   ============================================================ */
.rank-tabs { display: flex; gap: 6px; padding: 4px 0 12px; }
.rank-tabs button {
  flex: 1; border: 0; padding: 9px 4px; border-radius: 999px; cursor: pointer;
  font-family: var(--font-disp); font-size: 13px;
  background: rgba(0,0,0,.3); color: var(--ink-dim); border: 1px solid var(--line);
}
.rank-tabs button.on { background: var(--gold); color: #3a2a05; border-color: transparent; }

.rank-me {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; margin-bottom: 12px;
  border-radius: var(--r-md);
  background: linear-gradient(90deg, rgba(255,201,60,.18), rgba(255,107,107,.14));
  border: 1.5px solid var(--gold);
  box-shadow: 0 0 18px rgba(255,201,60,.18);
  position: sticky; top: 0; z-index: 3; backdrop-filter: blur(8px);
}
.rank-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--r-sm); background: rgba(0,0,0,.22); margin-bottom: 7px; animation: pop-in .35s backwards; }
.rank-row:nth-child(odd) { background: rgba(0,0,0,.32); }
.rank-row.is-me { outline: 1.5px solid var(--gold); }
.r-rank { flex: 0 0 40px; text-align: center; font-family: var(--font-num); font-weight: 700; font-size: 17px; color: var(--ink-dim); }
.r-rank.medal { font-size: 24px; }
.r-name { flex: 1; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-name .guest-tag { font-size: 11px; color: var(--ink-dim); margin-left: 5px; }
.r-score { font-family: var(--font-num); font-weight: 700; color: var(--gold); font-size: 17px; }
.rank-empty { text-align: center; color: var(--ink-dim); padding: 40px 0 20px; font-size: 15px; }

/* ============================================================
   룰렛
   ============================================================ */
.roulette-wrap { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 8px; }
.wheel-box { position: relative; width: min(320px, 78vw); }
.wheel-pointer {
  position: absolute; top: -8px; left: 50%; transform: translateX(-50%); z-index: 3;
  font-size: 34px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.5));
}
#wheel-canvas { width: 100%; height: auto; display: block; filter: drop-shadow(0 14px 28px rgba(0,0,0,.5)); }
.spin-left { color: var(--ink-dim); font-size: 14px; }
.spin-left b { color: var(--gold); font-family: var(--font-num); }

/* ============================================================
   상점
   ============================================================ */
.shop-section h3 { margin: 14px 0 10px; font-size: 17px; color: var(--gold); }
.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.shop-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px 8px; border-radius: var(--r-md); border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel-hi), var(--panel));
  box-shadow: 0 6px 0 rgba(0,0,0,.28);
  cursor: pointer; transition: transform .1s;
}
.shop-card:active { transform: translateY(4px); }
.shop-card .sc-ico { font-size: 34px; }
.shop-card .sc-amount { font-family: var(--font-num); font-weight: 700; font-size: 16px; }
.shop-card .sc-price { font-size: 12px; color: var(--mint); font-family: var(--font-num); font-weight: 600; }
.shop-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-radius: var(--r-md); background: rgba(0,0,0,.25); margin-bottom: 9px; border: 1px solid var(--line);
}
.shop-row .sr-ico { font-size: 28px; }
.shop-row .sr-body { flex: 1; }
.shop-row .sr-name { font-size: 15px; }
.shop-row .sr-desc { font-size: 12px; color: var(--ink-dim); margin-top: 2px; line-height: 1.35; }
.shop-row.sub-row { border-color: rgba(255,201,60,.35); background: linear-gradient(90deg, rgba(255,201,60,.08), rgba(0,0,0,.25)); }
.shop-row .gbtn.small { flex: 0 0 auto; white-space: nowrap; }

/* ============================================================
   모달 / 토스트
   ============================================================ */
#modal-root:empty { display: none; }
.modal-back {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(8, 10, 26, .7); backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: 20px;
  animation: fade-in .25s;
}
.modal-card {
  width: 100%; max-width: 380px;
  background: linear-gradient(180deg, var(--panel-hi), var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-pop);
  padding: 22px 20px; position: relative;
  animation: modal-in .35s cubic-bezier(.2, 1.5, .4, 1);
  max-height: 86dvh; overflow-y: auto;
}
@keyframes modal-in { from { transform: scale(.7) translateY(30px); opacity: 0; } }
.modal-card h3 { font-size: 21px; margin-bottom: 14px; text-align: center; color: var(--gold); }
.modal-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border: 0; border-radius: 10px; background: rgba(0,0,0,.3); color: var(--ink-dim); font-size: 15px; cursor: pointer; }
.modal-actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }

.field { margin-bottom: 12px; }
.field label { display: block; font-size: 13px; color: var(--ink-dim); margin-bottom: 5px; }
.field input {
  width: 100%; padding: 12px 14px; border-radius: var(--r-sm);
  border: 1.5px solid var(--line); background: rgba(0,0,0,.35); color: var(--ink);
  font-family: var(--font-disp); font-size: 16px; outline: none;
}
.field input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,201,60,.18); }

#toast-root { position: fixed; left: 0; right: 0; bottom: calc(90px + env(safe-area-inset-bottom)); z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast {
  padding: 11px 20px; border-radius: 999px;
  background: rgba(10, 13, 32, .92); border: 1px solid var(--line);
  color: var(--ink); font-size: 14px; box-shadow: var(--shadow-pop);
  animation: toast-in .3s cubic-bezier(.2, 1.5, .4, 1), fade-out .3s 2.2s forwards;
}
.toast.err { border-color: var(--coral); color: #ffc9c9; }
@keyframes toast-in { from { transform: translateY(20px) scale(.8); opacity: 0; } }
@keyframes fade-out { to { opacity: 0; transform: translateY(10px); } }

/* ---- 인앱 게임 키보드 ------------------------------------------ */
.kb {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px 2px 4px; /* 하단 인셋은 네이티브(앱)가 처리 */
  user-select: none; -webkit-user-select: none;
  flex: 0 0 auto;
}
.kb-row { display: flex; gap: 5px; justify-content: center; }
.kb-key {
  flex: 1; min-width: 0; height: 44px;
  border: 0; border-radius: 9px; cursor: pointer;
  font-family: var(--font-disp); font-size: 18px; color: var(--tile-ink);
  background: linear-gradient(180deg, #fffdf4, var(--tile));
  box-shadow: 0 3px 0 var(--tile-side);
  transition: transform .05s, box-shadow .05s;
  touch-action: manipulation;
}
.kb-key:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--tile-side); filter: brightness(1.06); }
.kb-key.kb-fn {
  flex: 1.4; font-size: 17px; color: var(--ink);
  background: linear-gradient(180deg, var(--panel-hi), var(--panel));
  border: 1px solid var(--line); box-shadow: 0 3px 0 #10163a;
}
.kb-key.kb-fn:active { box-shadow: 0 1px 0 #10163a; }
.kb-key.kb-fn.on { color: #3a2a05; background: linear-gradient(180deg, #ffe08a, var(--gold)); box-shadow: 0 3px 0 var(--gold-deep); }
.kb-key.kb-enter {
  flex: 0 1 220px; height: 40px; font-size: 16px; color: #06332f;
  background: linear-gradient(180deg, #7fe3dc, var(--mint));
  box-shadow: 0 3px 0 var(--mint-deep);
  opacity: .45;
}
.kb-key.kb-enter:active { box-shadow: 0 1px 0 var(--mint-deep); }
.kb-key.kb-enter.ready { opacity: 1; animation: pulse-glow 1.2s ease-in-out infinite; }

@media (max-height: 700px) {
  .kb-key { height: 38px; font-size: 16px; }
  .kb-key.kb-enter { height: 34px; }
}

/* ---- 히든 IME 인풋 -------------------------------------------- */
#ime-input { position: fixed; top: 0; left: -9999px; width: 10px; height: 10px; opacity: .01; border: 0; font-size: 16px; }

/* ---- 오프라인 차단 화면 ----------------------------------------- */
.offline-overlay {
  position: fixed; inset: 0; z-index: 300;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: radial-gradient(120% 80% at 50% -10%, #27336e 0%, var(--bg-1) 45%, var(--bg-0) 100%);
  padding: 24px; text-align: center;
  animation: fade-in .3s;
}
.offline-overlay img { width: 84px; height: 84px; opacity: .9; animation: moon-float 4s ease-in-out infinite; }
.offline-overlay .off-title { font-size: 22px; color: var(--gold); }
.offline-overlay .off-desc { font-size: 14px; color: var(--ink-dim); margin-bottom: 10px; }

/* ---- 광고 모달 (웹 스텁) --------------------------------------- */
.ad-stub { text-align: center; padding: 20px 6px; }
.ad-stub .ad-box {
  height: 150px; border-radius: var(--r-md); margin-bottom: 14px;
  display: grid; place-items: center; font-size: 15px; color: var(--ink-dim);
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 12px, transparent 12px 24px), rgba(0,0,0,.35);
  border: 1px dashed var(--line);
}
.ad-count { font-family: var(--font-num); font-weight: 700; font-size: 26px; color: var(--gold); }

/* 작은 화면 */
@media (max-height: 640px) {
  .logo-tiles .lt { width: 42px; height: 42px; font-size: 21px; }
  .clear-stars { font-size: 40px; }
}