/* Arena Merge Board — merge5 tavern table / carved board world pass */

@font-face {
  font-family: "Cinzel Decorative";
  src: url("assets/fonts/CinzelDecorative-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cinzel Decorative";
  src: url("assets/fonts/CinzelDecorative-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Crimson Text";
  src: url("assets/fonts/CrimsonText-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Crimson Text";
  src: url("assets/fonts/CrimsonText-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IM Fell French Canon";
  src: url("assets/fonts/IMFellFrenchCanon-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --bg: #1a120c;
  --text: #f4ead4;
  --ink: #2a1c10;
  --muted: #a89070;
  --gold: #e8c878;
  --brass: #c9a028;
  --danger: #c44848;
  --good: #3a8a58;
  --board-pad: 12px;
  --radius: 10px;
  --shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  font-family: "Crimson Text", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;   /* ns2: lock page scroll; board/lists keep their own overflow */
  min-height: 0;
  background:
    radial-gradient(900px 480px at 50% -8%, rgba(120, 80, 30, 0.35) 0%, transparent 55%),
    radial-gradient(800px 500px at 70% 80%, rgba(40, 70, 50, 0.18) 0%, transparent 50%),
    url("assets/merge/tavern_wood.jpg?v=merge6") center / 480px 480px repeat,
    #2a1a10;
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; }
button:disabled { opacity: 0.45; cursor: not-allowed; }

.app {
  max-width: 540px;
  margin: 0 auto;
  padding: 12px 14px 48px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.brand h1 {
  margin: 0;
  font-family: "Cinzel Decorative", Georgia, serif;
  font-size: 1.4rem;
  letter-spacing: 0.06em;
  color: #f8ecd0;
  text-shadow: 0 2px 0 #3a2410, 0 0 16px rgba(232, 200, 120, 0.25);
}
.brand .tag {
  display: inline-block;
  margin-top: 2px;
  font-family: "IM Fell French Canon", Georgia, serif;
  font-size: 0.78rem;
  color: #d4b878;
  letter-spacing: 0.03em;
}
.nav { display: flex; gap: 10px; flex-wrap: wrap; font-size: 0.9rem; }
.nav a { color: #c8b090; }
.nav a.active {
  color: #f0d890;
  font-weight: 700;
}
.nav a.muted { opacity: 0.65; }

/* Chalk slate score strip */
.slate-hud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: stretch;
  padding: 12px 14px;
  margin-bottom: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), transparent 40%),
    url("assets/merge/chalk_slate.png?v=merge6") center / cover;
  border: 3px solid #5a3a1c;
  border-radius: 6px;
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,0.06);
  color: #e8eef0;
}
.hud-cell { min-width: 64px; padding: 2px 4px; }
.hud-cell .label {
  display: block;
  font-family: "IM Fell French Canon", Georgia, serif;
  font-size: 0.72rem;
  color: #a8b0b4;
  letter-spacing: 0.04em;
}
.hud-cell strong {
  font-family: "Crimson Text", Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #f4f8f8;
  text-shadow: 0 1px 0 rgba(0,0,0,0.6);
}
.hud-cell.gold strong { color: #f0d890; }
.hud-cell.bank strong { color: #9ad4a8; }
.hud-cell.gems strong { color: #7ec8f0; }

.tavern-panel {
  position: relative;
  padding: 16px 14px 18px;
  background:
    linear-gradient(165deg, rgba(90, 58, 28, 0.55), rgba(40, 24, 12, 0.75)),
    url("assets/merge/tavern_wood.jpg?v=merge6") center / 360px 360px;
  border: 3px solid #6a4420;
  border-radius: 10px;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 220, 160, 0.15);
}

.board-wrap.carved-frame {
  position: relative;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  aspect-ratio: 1;
  padding: 14px;
  background:
    linear-gradient(160deg, #6a4424 0%, #3a2414 55%, #2a1810 100%);
  border: 4px solid #8a6230;
  border-radius: 12px;
  box-shadow:
    inset 0 0 0 2px #2a1810,
    inset 0 0 0 6px #5a3a1c,
    0 12px 28px rgba(0,0,0,0.5);
}

.board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: var(--board-pad);
  border-radius: 8px;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(70, 90, 60, 0.25) 0%, transparent 60%),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.04) 0 1px, transparent 1px 3px),
    linear-gradient(160deg, #3a4a38 0%, #1e2a20 50%, #141c16 100%);
  box-shadow: inset 0 0 40px rgba(0,0,0,0.45);
}
.board.mode-clear { box-shadow: inset 0 0 0 3px rgba(196, 72, 72, 0.55), inset 0 0 40px rgba(0,0,0,0.45); }
.board.mode-place { box-shadow: inset 0 0 0 3px rgba(58, 138, 88, 0.55), inset 0 0 40px rgba(0,0,0,0.45); }
.board.mode-place-dest { box-shadow: inset 0 0 0 3px rgba(232, 200, 120, 0.65), inset 0 0 40px rgba(0,0,0,0.45); }

.cell {
  position: relative;
  border-radius: 8px;
  background:
    url("assets/merge/stone_cell.png?v=merge6") center / cover,
    linear-gradient(160deg, #4a3c30, #2a2018);
  box-shadow:
    inset 0 2px 4px rgba(255, 230, 180, 0.08),
    inset 0 -2px 6px rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
}
.cell.light {
  filter: brightness(1.08);
}
.cell.clickable {
  cursor: pointer;
  outline: 2px dashed rgba(232, 200, 120, 0.5);
  outline-offset: -3px;
}
.cell.selected .piece {
  box-shadow:
    0 0 0 2px var(--gold),
    0 0 16px rgba(232, 200, 120, 0.45),
    0 6px 14px rgba(0, 0, 0, 0.5);
}
.cell.empty-target {
  outline: 2px dashed rgba(58, 138, 88, 0.55);
  outline-offset: -3px;
  background: rgba(58, 138, 88, 0.18);
}

/* Carved wooden chess figures */
.piece {
  position: relative;
  width: 90%;
  height: 90%;
  border-radius: 10px 10px 8px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  overflow: hidden;
  border: 2px solid rgba(90, 58, 28, 0.85);
  box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 230, 180, 0.25),
    inset 0 -3px 6px rgba(0, 0, 0, 0.35);
  animation: pop 0.18s ease-out;
  transition: transform 0.12s ease;
  pointer-events: none;
  background:
    linear-gradient(160deg, #8a6238 0%, #5a3a20 55%, #3a2414 100%);
}
.piece .glyph {
  position: relative;
  z-index: 1;
  font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "DejaVu Sans", "Apple Symbols", sans-serif;
  font-size: clamp(1.55rem, 7vw, 2.35rem);
  line-height: 1;
  color: #f4e6c8;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.45),
    0 0 8px rgba(232, 200, 120, 0.2);
}
.piece .name {
  position: relative;
  z-index: 1;
  font-family: "IM Fell French Canon", Georgia, serif;
  font-size: clamp(0.48rem, 2vw, 0.65rem);
  letter-spacing: 0.04em;
  text-transform: none;
  font-weight: 700;
  text-align: center;
  color: rgba(255, 240, 210, 0.9);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}
.piece.merged { animation: mergeFlash 0.32s ease-out; }
.piece.spawn { animation: pop 0.22s ease-out; }

@keyframes pop {
  from { transform: scale(0.55); opacity: 0.4; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes mergeFlash {
  0% { transform: scale(0.88); filter: brightness(1); }
  40% { transform: scale(1.12); filter: brightness(1.25); box-shadow: 0 0 18px rgba(232, 200, 120, 0.55); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* Tier wood stains — carved figures, not neon tiles */
.t1 { background: linear-gradient(160deg, #7a6a58, #4a3c30); border-color: #5a4a38; }
.t2 { background: linear-gradient(160deg, #4a6a8a, #2a4058); border-color: #3a5470; }
.t2 .glyph { color: #d8e8f8; }
.t3 { background: linear-gradient(160deg, #3a6a50, #244034); border-color: #2a5040; }
.t3 .glyph { color: #d8f0e0; }
.t4 { background: linear-gradient(160deg, #8a5230, #4a2c18); border-color: #6a3a20; }
.t5 { background: linear-gradient(160deg, #6a4a7a, #3a2848); border-color: #503860; }
.t5 .glyph { color: #f0e0f8; }
.t6 { background: linear-gradient(160deg, #9a7828, #5a4010); border-color: #c9a028; }
.t6 .glyph { color: #ffe9a0; }
.t7 { background: linear-gradient(160deg, #8a3840, #4a1820); border-color: #6a2830; }
.t7 .glyph { color: #f8d0d0; }
.t8 { background: linear-gradient(160deg, #4a3a7a, #282050); border-color: #3a3070; }
.t8 .glyph { color: #e0d8f8; }
.t9 { background: linear-gradient(160deg, #1e6a5a, #123830); border-color: #1a5048; }
.t9 .glyph { color: #c8f0e8; }
.t10 {
  background: linear-gradient(160deg, #c9a028 0%, #8a6a14 55%, #5a4010);
  border-color: #f0d890;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5), 0 0 16px rgba(232,200,120,0.3);
}
.t10 .glyph { color: #fff8e0; }
.t10 .name { color: #fff0c0; }

.overlay {
  position: absolute;
  inset: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255, 240, 200, 0.2), transparent 55%),
    linear-gradient(180deg, rgba(232, 210, 168, 0.94), rgba(212, 180, 120, 0.96));
  border-radius: 10px;
  text-align: center;
  z-index: 5;
  border: 2px solid #6a4824;
  color: #2a1c10;
  box-shadow: inset 0 0 30px rgba(120, 80, 30, 0.12);
}
.overlay[hidden] { display: none; }
.overlay-title {
  margin: 0;
  font-family: "Cinzel Decorative", Georgia, serif;
  font-size: 1.45rem;
  color: #5a3818;
  letter-spacing: 0.04em;
}
.overlay-detail {
  margin: 0;
  color: #6a5438;
  font-size: 0.95rem;
  line-height: 1.4;
}
.overlay-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 4px;
}

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  justify-content: center;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 18px;
  min-height: 48px;
  border-radius: 8px;
  border: 1px solid #6a4828;
  background: linear-gradient(180deg, #5a3a20, #3a2414);
  color: #f0e0c4;
  font-family: "IM Fell French Canon", Georgia, serif;
  font-size: 1rem;
  font-weight: 700;
  box-shadow: 0 2px 0 #1a1008, inset 0 1px 0 rgba(255,220,160,0.15);
}
.btn:hover:not(:disabled) {
  border-color: #c9a028;
  filter: brightness(1.06);
}
.btn.primary {
  background:
    radial-gradient(circle at 35% 30%, rgba(255,200,160,0.25), transparent 55%),
    linear-gradient(180deg, #c44848, #7a1820);
  border-color: #4a1010;
  color: #f8e8c8;
  box-shadow: 0 2px 0 #3a0c10, 0 4px 10px rgba(0,0,0,0.35);
}
.btn.gold,
.btn.gem-btn {
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.35), transparent 40%),
    linear-gradient(180deg, #f0d78c 0%, #c9a028 48%, #8a6a14 100%);
  border: 2px solid #f5e2a0;
  color: #2a1a00;
  font-weight: 700;
  box-shadow:
    0 3px 0 #5a4010,
    0 6px 16px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.45);
  min-width: 160px;
}
.btn.ghost {
  background: rgba(30, 18, 10, 0.4);
  color: #e8d4a8;
}
.btn.packs-link {
  display: inline-flex;
  text-decoration: none;
  background: linear-gradient(180deg, #3a2a10, #2a1e0c);
  border: 1px solid #8a7020;
  color: var(--gold);
}
.btn.packs-link[hidden] { display: none; }

.boost-bar, .shop-bar {
  margin-top: 14px;
  padding: 10px 10px 12px;
  background: rgba(20, 12, 6, 0.45);
  border: 1px solid rgba(138, 98, 48, 0.55);
  border-radius: 8px;
}
.bar-title {
  display: block;
  margin-bottom: 8px;
  font-family: "Cinzel Decorative", Georgia, serif;
  font-size: 0.85rem;
  color: #e8c878;
  letter-spacing: 0.04em;
}
.boost-row, .shop-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.btn.boost, .btn.shop {
  flex: 1 1 120px;
  min-height: 44px;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  font-size: 0.9rem;
  background: linear-gradient(180deg, #4a3020, #2a1810);
}
.btn.boost .meta, .btn.shop .meta {
  font-size: 0.72rem;
  font-weight: 400;
  color: #c8b090;
  font-family: "Crimson Text", Georgia, serif;
}
.mode-hint {
  margin: 8px 0 0;
  font-size: 0.85rem;
  color: #e8c878;
  font-style: italic;
}
.mode-hint[hidden] { display: none; }

.dev-drawer {
  margin-top: 12px;
  background: rgba(20, 12, 6, 0.55);
  border: 1px solid #5a3a1c;
  border-radius: 8px;
  color: #e8d4a8;
}
.dev-summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 12px;
  font-family: "IM Fell French Canon", Georgia, serif;
  font-size: 0.88rem;
  color: #d4b878;
  user-select: none;
}
.dev-summary::-webkit-details-marker { display: none; }
.dev-summary::before { content: "▸ "; color: #c9a028; }
.dev-drawer[open] .dev-summary::before { content: "▾ "; }
.dev-body {
  padding: 0 10px 10px;
  border-top: 1px solid rgba(180, 130, 60, 0.3);
  padding-top: 8px;
}
.dev-body .btn { min-height: 40px; font-size: 0.88rem; }

.hint {
  margin: 14px 4px 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #c8b090;
  font-style: italic;
}

.ladder {
  margin-top: 14px;
  padding: 10px;
  background: rgba(20, 12, 6, 0.4);
  border: 1px solid rgba(138, 98, 48, 0.45);
  border-radius: 8px;
}
.ladder-title {
  display: block;
  margin-bottom: 8px;
  font-family: "Cinzel Decorative", Georgia, serif;
  font-size: 0.85rem;
  color: #e8c878;
}
.ladder-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.ladder-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 56px;
  padding: 4px 2px;
  border-radius: 8px;
  background: linear-gradient(160deg, #5a3a20, #3a2414);
  border: 1px solid #8a6230;
  color: #f0e0c4;
  box-shadow: inset 0 1px 0 rgba(255,230,180,0.15);
}
.ladder-chip .sym {
  font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "DejaVu Sans", "Apple Symbols", sans-serif;
  font-size: 1.15rem;
  line-height: 1;
  color: #f4e6c8;
}
.ladder-chip .chip-name {
  font-family: "IM Fell French Canon", Georgia, serif;
  font-size: 0.48rem;
  line-height: 1.1;
  text-align: center;
  color: #d4b878;
  margin-top: 2px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.foot {
  margin-top: 18px;
  text-align: center;
  font-size: 0.82rem;
  color: #a89070;
}
.foot a { color: #e8c878; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(20px);
  background: #e8d4a8;
  border: 2px solid #6a4824;
  color: #2a1c10;
  padding: 10px 16px;
  border-radius: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 80;
  font-size: 0.95rem;
  max-width: 90vw;
  font-family: "Crimson Text", Georgia, serif;
  box-shadow: 0 10px 28px rgba(0,0,0,0.45);
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 420px) {
  .app { padding: 10px 10px 40px; }
  .board-wrap.carved-frame { padding: 10px; }
  .board { gap: 6px; padding: 6px; }
  .btn.gem-btn { min-width: 140px; }
  .slate-hud { gap: 6px 8px; padding: 10px 10px; }
}

@media (min-width: 1280px) {
  .app { max-width: 580px; padding-top: 24px; }
}

/* ---- merge5 slim top bar (match town/tower) ---- */
.top-hud.slim-hud {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px 10px;
  padding-top: max(8px, env(safe-area-inset-top));
  margin: 0 0 8px;
  background: linear-gradient(180deg, rgba(40, 24, 10, 0.35), transparent);
}
.back-town {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 42px;
  padding: 0 12px;
  border-radius: 999px;
  border: 2px solid #b8862e;
  background: linear-gradient(180deg, #f3e2c0, #d9bf8e);
  color: #2a1c10 !important;
  font-family: "IM Fell French Canon", Georgia, serif;
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  flex-shrink: 0;
}
.menu-btn {
  width: 42px; height: 42px;
  border-radius: 999px;
  border: 2px solid #b8862e;
  background: linear-gradient(180deg, #f3e2c0, #d9bf8e);
  color: #2a1c10;
  font-size: 1.15rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
  flex-shrink: 0;
  cursor: pointer;
}
.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-left: auto;
  justify-content: flex-end;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1.5px solid #b8862e;
  background: linear-gradient(180deg, #f7ebcf, #e2c992);
  color: #2a1c10;
  font-size: 0.82rem;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.pill i {
  width: 14px; height: 14px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}
.pill.gems i { background: radial-gradient(circle at 30% 30%, #b8f0ff, #2a9cc8); box-shadow: 0 0 6px #5ec8e8; }
.pill.gold i { background: radial-gradient(circle at 30% 30%, #ffe9a0, #c99620); }
.pill.coin i { background: radial-gradient(circle at 30% 30%, #f0d080, #a87828); }

.menu-fly {
  position: absolute;
  top: 58px; left: 14px;
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
  padding: 10px;
  border-radius: 14px;
  background: linear-gradient(165deg, #f3e2c0, #d4b888);
  border: 2px solid #b8862e;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
}
.menu-fly[hidden] { display: none !important; }
.menu-fly a {
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  color: #2a1c10 !important;
  text-decoration: none !important;
}
.menu-fly a:hover, .menu-fly a.active {
  background: rgba(107, 66, 38, 0.15);
}

.compact-slate {
  margin-bottom: 12px;
}
.app { position: relative; }

/* Gem cost icon */
.ico-gem {
  display: inline-block;
  width: 12px; height: 12px;
  margin-left: 4px;
  vertical-align: -1px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #b8f0ff, #2a9cc8);
  box-shadow: 0 0 5px #5ec8e8;
}

/* Toast at top */
.toast {
  top: 58px;
  bottom: auto;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  text-align: center;
}
.toast.show {
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 420px) {
  .pill.coin { display: none; }
}


/* ---- merge6 chalk slate + round tokens ---- */
.chalk-slate {
  margin: 0 0 12px;
  padding: 14px 16px 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), transparent 40%),
    url("assets/merge/chalk_slate.png?v=merge6") center / cover;
  border: 3px solid #5a3a1c;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.06);
  color: #eef2f4;
  text-align: center;
}
.slate-main {
  display: flex;
  justify-content: center;
  gap: 28px;
  align-items: flex-end;
}
.slate-big {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 88px;
}
.slate-big i {
  width: 14px; height: 14px;
  border-radius: 50%;
  display: block;
  margin-bottom: 2px;
}
.ico-score { background: radial-gradient(circle at 30% 30%, #ffe9a0, #c99620); }
.ico-moves { background: radial-gradient(circle at 30% 30%, #c8e8ff, #3a6a9a); }
.slate-big strong {
  font-family: "Crimson Text", Georgia, serif;
  font-size: clamp(1.8rem, 8vw, 2.4rem);
  font-weight: 700;
  line-height: 1;
  color: #f8fcff;
  text-shadow: 0 2px 0 rgba(0,0,0,0.55);
}
.slate-sub {
  margin-top: 8px;
  font-family: "IM Fell French Canon", Georgia, serif;
  font-size: 0.85rem;
  color: #b8c0c4;
}
.slate-sub strong { color: #e8eef0; font-size: 0.95rem; }

.token-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.token {
  position: relative;
  margin-bottom: 18px;
}
.token .token-name,
.token .token-price {
  /* sit under the round face */
}
.token .token-face {
  margin-bottom: 0;
}
.token {
  width: 70px;
  min-height: 70px;
  height: auto;
  padding: 10px 6px 8px;
  border-radius: 999px;
  border: 2px solid #8a6230;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,230,180,0.35), transparent 50%),
    linear-gradient(180deg, #6a4424, #3a2414);
  color: #f0e0c4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,230,180,0.2);
  cursor: pointer;
  font-family: "IM Fell French Canon", Georgia, serif;
}
.token:disabled { opacity: 0.4; cursor: not-allowed; }
.token.active-mode, .token:hover:not(:disabled) {
  border-color: #f0d890;
  filter: brightness(1.08);
}
.token-face {
  font-size: 1.35rem;
  line-height: 1;
  color: #fff0c8;
}
.token-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: #f0e0c4;
}
.token-price {
  font-size: 0.62rem;
  color: #d4b878;
  font-family: "Crimson Text", Georgia, serif;
  text-align: center;
  line-height: 1.15;
  max-width: 64px;
}
.token.pouch-token {
  background:
    radial-gradient(circle at 35% 28%, rgba(180,220,255,0.2), transparent 50%),
    linear-gradient(180deg, #4a3a28, #2a1c10);
  border-color: #6a5428;
}
.pouch-panel {
  margin-top: 10px;
  padding: 10px;
  background: rgba(20, 12, 6, 0.55);
  border: 1px solid rgba(138, 98, 48, 0.55);
  border-radius: 8px;
}
.pouch-panel[hidden] { display: none !important; }

/* Keep board hero — slightly larger on phone */
@media (max-width: 420px) {
  .board-wrap.carved-frame { max-width: 100%; }
  .token { width: 68px; height: 84px; }
  .slate-big strong { font-size: 2rem; }
}

/* Hide legacy slate-hud if leftover */
.slate-hud, .compact-slate, .boost-bar, .shop-bar { display: none !important; }

/* ---------- no-scroll pass (ns1): the Merge Board fits 390x844 and 1280x800 ---------- */
.app.world-pass { padding-bottom: 8px; }
.pill.coin, .pill.gold { display: none; }           /* Merge only spends gems */
.chalk-slate { margin: 0 0 8px; padding: 6px 14px 6px; display: flex; align-items: center; justify-content: center; gap: 18px; }
.chalk-slate .slate-main { gap: 18px; align-items: center; }
.chalk-slate .slate-big { flex-direction: row; gap: 6px; min-width: 0; }
.chalk-slate .slate-big i { margin: 0; }
.chalk-slate .slate-big strong { font-size: 1.8rem; }
.chalk-slate .slate-sub { margin: 0; }
.tavern-panel { padding: 10px 10px 10px; }
.board-wrap.carved-frame { width: min(100%, 420px, calc(100vh - 360px)); width: min(100%, 420px, calc(100dvh - 360px)); padding: 10px; }
.tavern-panel .controls { margin-top: 10px; gap: 8px; flex-wrap: nowrap; }
.tavern-panel .controls .btn { min-height: 46px; padding: 10px 12px; white-space: nowrap; }
.tavern-panel .token-row { margin-top: 10px; }
.tavern-panel .token { margin-bottom: 0; }
/* pouch shop pops over the board instead of pushing the page */
.tavern-panel .pouch-panel { position: absolute; left: 10px; right: 10px; bottom: 108px; z-index: 30; margin: 0; background: rgba(20,12,6,.95); box-shadow: 0 10px 30px rgba(0,0,0,.6); }
/* ladder: a small sheet over the board */
.tavern-panel .ladder { position: absolute; left: 10px; right: 10px; top: 10px; z-index: 31; margin: 0; background: rgba(20,12,6,.96); box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.tavern-panel .ladder[hidden] { display: none; }
.ladder-x { position: absolute; right: 6px; top: 4px; width: 36px; height: 36px; border: 0; background: none; color: #e8c878; font-size: 1.05rem; cursor: pointer; }
/* lab: a small pill in the corner */
.tavern-panel .dev-drawer { position: fixed; z-index: 40; right: 8px; bottom: 8px; margin: 0; }
.tavern-panel .dev-drawer .dev-summary { padding: 4px 12px; }
.tavern-panel .dev-drawer:not([open]) { background: rgba(20,12,6,.8); border-radius: 999px; }
/* night1: the boost hint floats over the board (no layout jump / page scroll) */
.mode-hint { position: fixed; left: 50%; top: calc(64px + env(safe-area-inset-top)); transform: translateX(-50%); z-index: 60; margin: 0;
  max-width: min(92vw, 420px); padding: 8px 14px; border-radius: 12px; background: rgba(30,18,8,.92); border: 2px solid #c49048;
  font-size: .95rem; font-style: normal; text-align: center; pointer-events: none; box-shadow: 0 6px 18px rgba(0,0,0,.5); }

/* mtut1: first-time tutorial (merge_tut.js) */
.overlay.idle .overlay-title { font-size: 26px; }
.mt-finger { position: absolute; z-index: 99994; transform: translate(-50%, -100%); pointer-events: none; display: flex; flex-direction: column; align-items: center; }
.mt-bubble { background: #fff4d6; color: #3a2410; border: 2px solid #c99a3c; border-radius: 12px; padding: 6px 12px; font-size: 15px; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.mt-hand { font-size: 40px; line-height: 1; animation: mtBob .9s ease-in-out infinite; filter: drop-shadow(0 3px 4px rgba(0,0,0,.5)); }
@keyframes mtBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
.mt-glow { box-shadow: 0 0 0 3px #ffd56a, 0 0 18px 6px rgba(255,213,106,.7) !important; animation: mtGlow 1.2s ease-in-out infinite; }
@keyframes mtGlow { 50% { box-shadow: 0 0 0 3px #ffd56a, 0 0 6px 2px rgba(255,213,106,.4); } }
.mt-card-wrap { position: fixed; inset: 0; z-index: 99995; background: rgba(10,6,2,.55); display: flex; align-items: flex-end; justify-content: center; padding: 16px 16px 120px; }
.mt-card { width: min(380px, 100%); background: linear-gradient(#3b2614, #24160b); border: 2px solid #c99a3c; border-radius: 16px; padding: 16px 18px; color: #f3e6c8; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
.mt-card h3 { margin: 6px 0 6px; color: #f1c96a; font-size: 20px; }
.mt-card p { margin: 0 0 14px; font-size: 15px; line-height: 1.4; }
.mt-dots { display: flex; gap: 6px; } .mt-dots i { width: 8px; height: 8px; border-radius: 50%; background: #6b5232; } .mt-dots i.on { background: #f1c96a; }
.mt-row { display: flex; justify-content: space-between; gap: 10px; }
.mt-help { width: 34px; height: 34px; min-width: 34px; border-radius: 50%; border: 2px solid #c99a3c; background: #2b1b0d; color: #f1c96a; font-weight: 700; font-size: 17px; cursor: pointer; padding: 0; align-self: center; }
/* mreward1: run-end reward line */
.overlay-reward { margin: 4px 0 10px; font-weight: 700; color: #6b4a12; font-size: 16px; }
.overlay-reward.paid { color: #2f6b1f; }
.overlay-reward.preview { color: #7a5a2a; font-weight: 600; font-size: 14px; }
/* mbank1 */
.btn.is-off, .btn:disabled.is-off { filter: grayscale(1) brightness(.7); opacity: .6; cursor: not-allowed; }
.bank-cd { margin: 6px 0 0; text-align: center; color: #f1c96a; font-weight: 700; font-size: 15px; }
#btnBuyMoves { white-space: nowrap; font-size: 15px; }