:root {
  --tile-h: 42px; /* JS가 실제 갱도 높이를 재서 화면에 꽉 차도록 매 로드/리사이즈마다 다시 계산해 넣는다 */
  --blue: #3182F6;
  --blue-dark: #1B64DA;
  --bg: #F2F4F6;
  --card: #FFFFFF;
  --text: #191F28;
  --text-sub: #8B95A1;
  --green: #04C77E;
  --red: #F04452;
  --gold: #F5A623;
  --radius: 16px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; }

html, body {
  margin: 0;
  padding: 0;
  background: #0d0f12;
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Malgun Gothic", system-ui, sans-serif;
  color: var(--text);
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

#app {
  max-width: 480px;
  margin: 0 auto;
  height: 100dvh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* ---------- Top bar : 지하 갱도 계기판 콘셉트의 금속 패널 ---------- */
.topbar {
  background: linear-gradient(180deg, #3d434c, #23262b);
  padding: 14px 18px 12px;
  border-bottom: 3px solid #14161a;
  box-shadow: inset 0 -2px 0 rgba(255,255,255,0.07), 0 2px 8px rgba(0,0,0,0.35);
  position: sticky;
  top: 0;
  z-index: 5;
}
.brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.brand {
  font-weight: 800;
  font-size: 17px;
  color: #f2d9a0;
  text-shadow: 0 1px 0 rgba(0,0,0,0.5);
}
.ranking-btn {
  flex: none;
  border: none;
  background: linear-gradient(180deg, #ffe6a0, #f0b93d);
  color: #6b4a12;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
/* 보유 자산이 커지면 자릿수가 아주 길어져서, 라벨 옆에 붙이면(가로 배치) 폭이 부족해
   줄바꿈되며 바로 아래 줄(초당 자동수입)과 붙어 겹쳐 보인다. 라벨을 값 위에 두고 값이
   가로 폭을 전부 쓰도록 세로로 쌓아서 줄바꿈 여지를 최대한 줄이고, 그래도 줄바꿈되면
   충분한 줄간격/여백으로 다음 항목과 분리되게 한다. */
.stats { display: flex; flex-direction: column; gap: 6px; }
.stat { display: flex; flex-direction: column; gap: 1px; }
.stat-label { font-size: 11px; color: #9aa1a9; }
.stat-value { display: flex; align-items: center; gap: 5px; font-size: 16px; font-weight: 800; color: #ffd166; text-shadow: 0 1px 2px rgba(0,0,0,0.5); line-height: 1.3; }
.stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  font-size: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #5a5147, #2a251f);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15);
}

/* ---------- Content / tabs ---------- */
.content { flex: 1; min-height: 0; overflow-y: auto; padding-bottom: 70px; }
.tab-panel { display: none; padding: 12px; }
.tab-panel.active { display: block; }
/* 채굴 화면은 갱도가 화면에 꽉 차 보이도록, 화면 높이에 맞춰 늘어나는 세로 flex 구조로
   따로 잡는다(다른 탭은 목록이라 길어지면 자연스럽게 스크롤되면 되므로 그대로 block). */
#tab-dig.active { display: flex; flex-direction: column; min-height: 100%; }

.section-title { font-size: 18px; font-weight: 800; margin: 4px 0 4px; }
.section-subtitle { font-size: 15px; font-weight: 800; margin: 22px 0 2px; }
.section-count { font-size: 12px; font-weight: 700; color: var(--blue); }
.section-desc { font-size: 13px; color: var(--text-sub); margin: 0 0 14px; }

/* ---------- Dig screen : 돌/금속 명패 느낌의 위치·깊이 태그 ---------- */
.layer-banner {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 8px;
}
.chip {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  background: linear-gradient(180deg, #e7e2d6, #c9c1ab);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), inset 0 -3px 4px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.15);
  min-width: 0;
}
.chip-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  font-size: 15px;
  border-radius: 8px;
  background: linear-gradient(180deg, #4a4038, #2b241f);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}
.chip-text {
  font-weight: 800;
  font-size: 13px;
  color: #3a3226;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chip-depth .chip-text span { color: #1f1a12; font-weight: 800; display: inline-block; }
.chip-depth .chip-text span.pop { animation: depthPop 0.25s ease-out; color: #a8631a; }
@keyframes depthPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* ---------- 하단 캐릭터 명찰 칩 ---------- */
.char-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 6px auto 2px;
  width: fit-content;
  padding: 6px 16px 6px 6px;
  border-radius: 999px;
  background: linear-gradient(180deg, #3d434c, #23262b);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 2px 4px rgba(0,0,0,0.25);
}
.char-chip-avatar {
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #6b7280, #2f333a);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.15);
}
.char-chip-name { font-size: 12px; font-weight: 700; color: #e7e2d6; }

/* ---------- Mine shaft ---------- */
.shaft {
  position: relative;
  background: linear-gradient(180deg, #CFE8FF 0%, #EAF4FF 40%, #F2F4F6 100%);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 220px;
}
/* 타격 순간 살짝 흔들리는 카메라 셰이크 */
.shaft.shaking { animation: shakeShaft 0.15s; }
@keyframes shakeShaft {
  0%, 100% { transform: translate(0,0); }
  25% { transform: translate(-3px, 2px); }
  50% { transform: translate(3px, -2px); }
  75% { transform: translate(-2px, 1px); }
}
.shaft.shaking-big { animation: shakeShaftBig 0.26s; }
@keyframes shakeShaftBig {
  0%, 100% { transform: translate(0,0); }
  15% { transform: translate(-6px, 3px); }
  35% { transform: translate(6px, -4px); }
  55% { transform: translate(-5px, 3px); }
  75% { transform: translate(4px, -2px); }
}
.shaft-surface {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-size: 12px;
  font-weight: 700;
  color: #4a7fb5;
  padding: 6px 0;
  background: rgba(255,255,255,0.5);
}
.sound-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  font-size: 15px;
  padding: 2px 4px;
  cursor: pointer;
  line-height: 1;
  opacity: 1;
  transition: opacity 0.15s;
}
.music-toggle { right: 40px; }
.sound-toggle.is-off { opacity: 0.35; }
.shaft-viewport {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.shaft-rope {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 2px dashed rgba(255,255,255,0.35);
  z-index: 1;
}
.shaft-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}
.shaft-track.sinking { animation: sinkDown 0.28s cubic-bezier(.34,1.4,.64,1); }
@keyframes sinkDown {
  from { transform: translateY(-60px); }
  to { transform: translateY(0); }
}
/* 깊이 들어갈수록 화면 가장자리가 점점 어두워져서, 매번 초기화되는 애니메이션과 별개로
   "예전보다 훨씬 깊이 내려왔다"는 게 항상 누적되어 보이도록 한다 */
.shaft-vignette {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 38%, transparent 35%, rgba(0,0,0,var(--vignette-a, 0)) 100%);
  transition: background 0.3s ease;
}

.tile {
  position: absolute;
  left: 10%;
  right: 10%;
  height: var(--tile-h);
  border-radius: 10px;
  overflow: hidden;
}
.tile-dug {
  background: linear-gradient(180deg, #2b2f36, #1a1d22);
  box-shadow: inset 0 0 12px rgba(0,0,0,0.6);
  opacity: 0.9;
}
/* 지층별 흙/암반 질감: 잔돌(반점) + 반짝이는 광물 하이라이트(glint) + 색 그라데이션으로 표현 */
.tile-ground {
  background-image:
    radial-gradient(circle at 60% 45%, var(--glint) 0 3px, transparent 5px),
    radial-gradient(circle at 22% 30%, var(--speckle) 0 2px, transparent 3px),
    radial-gradient(circle at 68% 55%, var(--speckle) 0 2px, transparent 3px),
    radial-gradient(circle at 42% 78%, var(--speckle) 0 2px, transparent 3px),
    radial-gradient(circle at 85% 20%, var(--speckle) 0 2px, transparent 3px),
    radial-gradient(circle at 30% 65%, var(--speckle) 0 1.5px, transparent 3px),
    linear-gradient(160deg, var(--top), var(--bottom));
  box-shadow: 0 4px 0 rgba(0,0,0,0.25), inset 0 -6px 10px rgba(0,0,0,0.15);
}
/* 파낸 자리가 일자로 잘리지 않고 V자로 움푹 파이는 것처럼 보이도록 사다리꼴로 잘라낸다 */
.tile-ground .tile-progress {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 0%;
  background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.25));
  clip-path: polygon(8% 0%, 92% 0%, 62% 100%, 38% 100%);
  transition: height 0.08s linear;
}
.tile-active {
  z-index: 2;
  background-image:
    radial-gradient(ellipse at 50% 30%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.18) 55%, transparent 80%),
    radial-gradient(circle at 60% 45%, var(--glint) 0 3px, transparent 5px),
    radial-gradient(circle at 22% 30%, var(--speckle) 0 2px, transparent 3px),
    radial-gradient(circle at 68% 55%, var(--speckle) 0 2px, transparent 3px),
    radial-gradient(circle at 42% 78%, var(--speckle) 0 2px, transparent 3px),
    radial-gradient(circle at 85% 20%, var(--speckle) 0 2px, transparent 3px),
    linear-gradient(160deg, var(--top), var(--bottom));
  box-shadow: inset 0 10px 14px rgba(0,0,0,0.4), 0 4px 0 rgba(0,0,0,0.25), 0 0 0 3px rgba(255,255,255,0.5);
}

.dirt-pile {
  position: absolute;
  right: 8%;
  bottom: 6px;
  font-size: 26px;
  transform: scale(0.6);
  transform-origin: bottom center;
  z-index: 2;
  opacity: 0.9;
  transition: transform 0.25s ease;
}

.char-overlay {
  position: absolute;
  left: 50%;
  top: calc(var(--tile-h) * 3);
  transform: translate(-50%, -100%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  transition: transform 0.1s ease-out;
}
.pet-row {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  min-height: 16px;
  max-width: 210px;
  justify-content: center;
}
.pet-row span { font-size: 15px; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4)); }
.char-rig {
  position: relative;
  width: var(--tile-h);
  height: calc(var(--tile-h) * 0.93);
}
.char-emoji {
  position: absolute;
  left: 42%;
  top: 50%;
  font-size: calc(var(--tile-h) * 0.77);
  line-height: 1;
  transform: translate(-50%, -50%);
  transform-origin: 60% 85%;
}
.char-emoji.bob { animation: charBob 0.2s ease-out; }
@keyframes charBob {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  40% { transform: translate(-50%, -46%) rotate(-6deg); }
  100% { transform: translate(-50%, -50%) rotate(0deg); }
}
.char-emoji.sinking { animation: charDip 0.22s ease-out; }
@keyframes charDip {
  0% { transform: translate(-50%, -50%); }
  40% { transform: translate(-50%, -38%); }
  100% { transform: translate(-50%, -50%); }
}

.shovel-emoji {
  position: absolute;
  left: 68%;
  top: 62%;
  font-size: calc(var(--tile-h) * 0.47);
  line-height: 1;
  transform-origin: 15% 20%;
  transform: rotate(-8deg);
}
.shovel-emoji.digging { animation: shovelSwing 0.32s ease-in-out; }
@keyframes shovelSwing {
  0%   { transform: rotate(-8deg)  translate(0, 0); }
  20%  { transform: rotate(-38deg) translate(-2px, -4px); }   /* 삽을 뒤로 들어올림 */
  45%  { transform: rotate(48deg)  translate(3px, 6px); }     /* 땅에 콱 박음 */
  70%  { transform: rotate(58deg)  translate(5px, 3px); }     /* 흙을 퍼올림 */
  100% { transform: rotate(-8deg)  translate(0, 0); }         /* 원위치, 흙을 던짐 */
}
.hp-bar-wrap {
  width: 100px;
  height: 8px;
  background: rgba(0,0,0,0.25);
  border-radius: 6px;
  overflow: hidden;
}
.hp-bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #FFD861, var(--gold));
  transition: width 0.08s linear;
}

.shaft-tap-area {
  position: absolute;
  inset: 0;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  z-index: 4;
}
.shaft-tap-area:active { background: rgba(255,255,255,0.06); }

.dirt-puff {
  position: absolute;
  font-size: 14px;
  pointer-events: none;
  z-index: 10;
  animation: puffOut 0.5s ease-out forwards;
}
@keyframes puffOut {
  0% { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: var(--puff-end) scale(0.6); opacity: 0; }
}

.spark-particle {
  position: absolute;
  font-size: 13px;
  pointer-events: none;
  z-index: 11;
  filter: drop-shadow(0 0 3px rgba(255,220,120,0.9));
  animation: sparkOut 0.42s ease-out forwards;
}
@keyframes sparkOut {
  0% { transform: translate(0,0) scale(0.5); opacity: 1; }
  40% { transform: translate(0,0) scale(1.3); opacity: 1; }
  100% { transform: var(--spark-end) scale(0.4); opacity: 0; }
}

/* 안전모 랜턴에서 아래로 부채꼴 모양 빛이 뻗어나가는 연출 */
.headlamp-cone {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--tile-h) * 2.53);
  height: calc(var(--tile-h) * 3.5);
  background: conic-gradient(from 0deg at 50% 0%,
    transparent 0deg 143deg,
    rgba(255,232,150,0.32) 143deg 217deg,
    transparent 217deg 360deg);
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
}

.loot-log {
  min-height: 18px;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  color: #0a7a4a;
  background: #eafaf1;
  border: 1px solid #c9f0da;
  border-radius: 12px;
  padding: 6px 10px;
  margin: 0 0 8px;
}

.mini-stats {
  display: flex;
  gap: 8px;
}
.mini-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  min-width: 0;
  background: linear-gradient(180deg, #313a3a, #1c2323);
  border-radius: 12px;
  padding: 6px 8px;
  box-shadow: inset 0 0 0 1px rgba(120,200,180,0.18), inset 0 2px 3px rgba(255,255,255,0.05), 0 2px 5px rgba(0,0,0,0.25);
}
.mini-stat-top {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.mini-stat-icon {
  flex: none;
  width: 22px; height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  border-radius: 7px;
  background: linear-gradient(180deg, #4a4038, #2b241f);
}
.mini-stat-label { flex: 1; font-size: 11px; color: #8fa39c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mini-stat b { color: #ffd166; font-size: 13px; text-shadow: 0 1px 2px rgba(0,0,0,0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

/* ---------- Shop ---------- */
.shop-tabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin-bottom: 12px;
  padding-bottom: 2px;
}
.shop-cat-btn {
  flex: none;
  padding: 8px 14px;
  border-radius: 999px;
  border: none;
  background: var(--card);
  color: var(--text-sub);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.shop-cat-btn.active { background: var(--blue); color: #fff; }

.shop-list { display: flex; flex-direction: column; gap: 10px; }
.shop-item {
  background: var(--card);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.shop-item-icon { font-size: 30px; width: 40px; text-align: center; flex: none; }
.shop-item-info { flex: 1; min-width: 0; }
.shop-item-name { font-size: 14px; font-weight: 800; }
.shop-item-desc { font-size: 12px; color: var(--text-sub); margin-top: 2px; }
.shop-item-level { font-size: 11px; color: var(--blue); margin-top: 3px; font-weight: 700; }
.shop-buy-btn {
  flex: none;
  min-width: 84px;
  padding: 10px 8px;
  border-radius: 12px;
  border: none;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  text-align: center;
  line-height: 1.3;
}
.shop-buy-btn:disabled { background: #D1D6DB; color: #fff; cursor: not-allowed; }
.shop-buy-btn.maxed { background: var(--green); }
.shop-item.owned-current .shop-item-name::after {
  content: " (착용중)";
  color: var(--green);
  font-size: 11px;
}

/* ---------- Book ---------- */
.book-list { display: flex; flex-direction: column; gap: 8px; }
.book-item {
  background: var(--card);
  border-radius: 14px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0.4;
}
.book-item.found { opacity: 1; }
.book-icon { font-size: 24px; width: 32px; text-align: center; }
.book-name { font-size: 13px; font-weight: 700; flex: 1; }
.book-count { font-size: 12px; color: var(--text-sub); }

/* ---------- Company ---------- */
.company-locked {
  background: var(--card);
  border-radius: var(--radius);
  padding: 32px 20px;
  text-align: center;
  margin-top: 20px;
}
.locked-emoji { font-size: 48px; margin-bottom: 10px; }
.locked-title { font-weight: 800; font-size: 15px; margin-bottom: 6px; }
.locked-desc { font-size: 13px; color: var(--text-sub); line-height: 1.5; margin-bottom: 16px; }
.locked-progress { height: 10px; background: #E5E8EB; border-radius: 6px; overflow: hidden; }
.locked-progress-bar { height: 100%; width: 0%; background: var(--blue); transition: width 0.3s; }

.company-name-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #E5E8EB;
  font-size: 14px;
  margin-bottom: 12px;
  text-align: center;
  font-weight: 700;
  color: var(--text);
}
.company-name-input:focus { outline: none; border-color: var(--blue); }

.ipo-badge {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  color: #0a7a4a;
  background: #d7f7e8;
  padding: 3px 9px;
  border-radius: 999px;
  vertical-align: middle;
}

.ipo-banner {
  background: linear-gradient(135deg, #16a35a, #0d7a42);
  border-radius: var(--radius);
  padding: 18px 20px;
  text-align: center;
  margin-bottom: 18px;
  box-shadow: 0 4px 12px rgba(13,122,66,0.35);
}
.ipo-title { font-weight: 800; font-size: 16px; color: #fff; margin-bottom: 6px; }
.ipo-desc { font-size: 13px; color: rgba(255,255,255,0.9); line-height: 1.5; margin-bottom: 14px; }
.ipo-banner .modal-btn { background: #fff; color: #0d7a42; }

/* ---------- Tab bar ---------- */
.tabbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: 480px;
  background: var(--card);
  border-top: 1px solid #E5E8EB;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.tab-btn {
  flex: 1;
  border: none;
  background: none;
  padding: 10px 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--text-sub);
  font-weight: 700;
  cursor: pointer;
}
.tab-icon { font-size: 20px; }
.tab-btn.active { color: var(--blue); }

/* ---------- Modal ---------- */
.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 24px;
}
.modal-box {
  background: #fff;
  border-radius: 20px;
  padding: 28px 22px;
  text-align: center;
  width: 100%;
  max-width: 320px;
}
.modal-emoji { font-size: 44px; margin-bottom: 8px; }
.modal-title { font-weight: 800; font-size: 16px; margin-bottom: 8px; }
.modal-desc { font-size: 13px; color: var(--text-sub); line-height: 1.6; margin-bottom: 18px; white-space: pre-line; }
.modal-btn {
  width: 100%;
  padding: 13px;
  border-radius: 12px;
  border: none;
  background: var(--blue);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
}
.modal-btn + .modal-btn { margin-top: 8px; }
.modal-btn-danger { background: var(--red); }
.modal-btn-ghost { background: #F2F4F6; color: var(--text-sub); }

/* ---------- 설정 / 초기화 ---------- */
.reset-btn {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #F0B6BB;
  background: #FFF1F2;
  color: var(--red);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  margin-top: 8px;
}

/* ---------- Toast ---------- */
.toast {
  position: absolute;
  left: 50%;
  bottom: 100px;
  transform: translate(-50%, 20px);
  background: rgba(25,31,40,0.92);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
  z-index: 60;
  white-space: nowrap;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Floating loot text ---------- */
.float-text {
  position: absolute;
  font-weight: 800;
  font-size: 15px;
  pointer-events: none;
  animation: floatUp 0.8s ease-out forwards;
  z-index: 10;
  white-space: nowrap;
}
@keyframes floatUp {
  0% { transform: translate(-50%, 0); opacity: 1; }
  100% { transform: translate(-50%, -50px); opacity: 0; }
}