/* ============================================================
   Project S — Web Demo styles
   Landscape-first, mobile-style HUD over a full-screen canvas.
   ============================================================ */

:root {
  --bg: #0e1116;
  --panel: rgba(20, 26, 38, 0.82);
  --panel-border: rgba(255, 255, 255, 0.12);
  --text: #eef2f7;
  --soft: #ffcf4d;   /* coins  */
  --hard: #5ad1ff;   /* gems   */
  --attack: #ff5d5d;
  --skill: #9b7bff;
}

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

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  touch-action: none;
}

/* ---------------- Game stage ---------------- */

#game-root {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000; /* letterbox bars */
}

#game {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain; /* keep 2:1 aspect, centered on screen */
  image-rendering: pixelated; /* crisp placeholder tiles */
}

/* ---------------- HUD ---------------- */

#hud {
  position: absolute;
  inset: 0;
  pointer-events: none; /* only specific children capture input */
  padding: max(12px, env(safe-area-inset-top)) 16px 16px;
}

.currency-bar {
  display: flex;
  gap: 10px;
  pointer-events: auto;
}

.currency-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  padding: 6px 8px 6px 12px;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.currency-icon {
  font-size: 18px;
  line-height: 1;
}
.currency-icon.soft { color: var(--soft); text-shadow: 0 0 8px rgba(255, 207, 77, 0.6); }
.currency-icon.hard { color: var(--hard); text-shadow: 0 0 8px rgba(90, 209, 255, 0.6); }

.currency-value {
  min-width: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 15px;
}

.currency-plus {
  pointer-events: auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: var(--text);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.08s ease, background 0.12s ease;
}
.currency-plus:active {
  transform: scale(0.85);
  background: rgba(255, 255, 255, 0.25);
}

.status-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  pointer-events: auto;
  width: max-content;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  padding: 6px 12px;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.hp-label {
  font-weight: 800;
  font-size: 12px;
  color: #ff8a8a;
  letter-spacing: 0.5px;
}

.hp-track {
  width: 160px;
  height: 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  overflow: hidden;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.6);
}

.hp-fill {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff5d5d, #ff8a5d);
  transition: width 0.25s ease, background 0.25s ease;
}
.hp-fill.full { background: linear-gradient(90deg, #43d17a, #7ff0a8); }

.hp-text {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(238, 242, 247, 0.85);
}

.xp-bar { margin-top: 6px; }

.lvl-label {
  font-weight: 800;
  font-size: 12px;
  color: #ffe14d;
  letter-spacing: 0.5px;
  min-width: 30px;
}

.xp-track {
  width: 160px;
  height: 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  overflow: hidden;
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.6);
}

.xp-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #f4c84a, #ffe89a);
  transition: width 0.25s ease;
}

.xp-text {
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(238, 242, 247, 0.78);
}

.hud-tip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  letter-spacing: 0.3px;
  color: rgba(238, 242, 247, 0.55);
  background: rgba(0, 0, 0, 0.25);
  padding: 4px 10px;
  border-radius: 999px;
  opacity: 1;
  transition: opacity 0.6s ease;
}
.hud-tip.hide { opacity: 0; }

/* ---------------- Weather widget ---------------- */

/* Top-right HUD: clock/weather (left) + World map (right) merged into ONE card,
   split by a divider. The single card owns the background, border and shadow;
   the two sections inside are transparent so they read as one unit. */
.topright-hud {
  position: absolute;
  top: calc(max(12px, env(safe-area-inset-top)) + 62px);
  right: max(16px, env(safe-area-inset-right));
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 8px;
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  z-index: 5;
  pointer-events: none;
}

.weather-hud {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 150px;
  max-width: min(186px, 36vw);
  /* divider between the weather section and the World map */
  border-left: 3px solid var(--weather-accent, #9fb0c4);
  padding: 2px 12px 0 10px;
  margin-right: 10px;
  border-right: 1px solid var(--panel-border);
  pointer-events: none;
  z-index: 3;
}
.weather-hud.hunt-active { top: 0; transform: none; }

/* Compact clock + weather: tight rows, small subtle step buttons. */
.weather-clock {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-bottom: 4px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11px;
}
.weather-clock .dn-icon { font-size: 13px; line-height: 1; }
.weather-clock .dn-time {
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.weather-clock .dn-phase {
  color: rgba(238, 242, 247, 0.6);
  font-size: 10px;
}
.dn-next, .weather-next {
  pointer-events: auto;
  cursor: pointer;
  margin-left: auto;
  flex: none;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  line-height: 1;
  color: rgba(238, 242, 247, 0.75);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--panel-border);
  border-radius: 5px;
  transition: transform 0.1s ease, background 0.12s ease, border-color 0.12s ease;
}
.dn-next:hover, .weather-next:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--text);
}
.weather-next:hover { border-color: var(--weather-accent, #9fb0c4); }
.dn-next:active, .weather-next:active { transform: scale(0.9); }

.weather-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.weather-icon { font-size: 14px; line-height: 1; }
.weather-name {
  font-weight: 700;
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.weather-time {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  color: var(--weather-accent, #9fb0c4);
  font-variant-numeric: tabular-nums;
}
.weather-next { margin-left: 4px; }
.weather-track {
  margin-top: 4px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.weather-fill {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: var(--weather-accent, #9fb0c4);
  transition: width 0.3s linear;
}
.weather-effects {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.25;
}
.weather-effects:empty { display: none; }
.weather-effects .we-boost { color: #7fe08a; }
.weather-effects .we-weaken { color: #ff8f8f; }

/* Forecast strip — pinned to the bottom of the panel so it fills the leftover
   space below the current weather. Shows upcoming weather + the in-game hour. */
.weather-forecast {
  margin-top: auto;
  padding-top: 7px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.weather-forecast:empty { display: none; }
.weather-forecast .wf-label {
  width: 100%;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(238, 242, 247, 0.5);
  margin-bottom: 1px;
}
.weather-forecast .wf-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.weather-forecast .wf-icon { font-size: 18px; line-height: 1; }
.weather-forecast .wf-time {
  font-size: 12px;
  font-weight: 700;
  color: rgba(238, 242, 247, 0.82);
  font-variant-numeric: tabular-nums;
}

/* ---------------- Virtual joystick ---------------- */

.joystick {
  position: absolute;
  left: max(20px, env(safe-area-inset-left));
  bottom: max(20px, env(safe-area-inset-bottom));
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 2px solid rgba(255, 255, 255, 0.16);
  touch-action: none;
  pointer-events: auto;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.4);
}

.joystick-thumb {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f4f7fb, #aab4c4);
  border: 2px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
  transition: transform 0.04s linear;
}

/* ---------------- Action buttons ---------------- */

#actions {
  position: absolute;
  right: max(22px, env(safe-area-inset-right));
  bottom: max(26px, env(safe-area-inset-bottom));
  display: flex;
  align-items: flex-end;
  gap: 16px;
  pointer-events: auto;
}

.action-btn {
  position: relative;
  border: none;
  border-radius: 50%;
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.5px;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
  transition: transform 0.07s ease, filter 0.12s ease;
}
.action-btn:active { transform: scale(0.9); }
.action-btn:disabled { filter: grayscale(0.4) brightness(0.7); cursor: default; }

.action-btn.attack {
  width: 92px;
  height: 92px;
  font-size: 18px;
  background: radial-gradient(circle at 35% 30%, #ff8a8a, var(--attack));
}
.action-btn.skill {
  position: absolute;
  right: 76px;
  bottom: 96px;
  width: 72px;
  height: 72px;
  font-size: 13px;
  background: radial-gradient(circle at 35% 30%, #c3aaff, var(--skill));
}
.action-btn.mount {
  width: 64px;
  height: 64px;
  font-size: 26px;
  margin-bottom: 6px;
  background: radial-gradient(circle at 35% 30%, #e0b083, #8a5a2b);
}
/* lit ring + glow while the player is riding */
.action-btn.mount.active {
  box-shadow: 0 0 0 3px #ffe6b0, 0 8px 18px rgba(0, 0, 0, 0.45);
  filter: brightness(1.12);
}

.action-btn.swap {
  width: 64px;
  height: 64px;
  font-size: 24px;
  margin-bottom: 6px;
  background: radial-gradient(circle at 35% 30%, #8fe0c8, #2b8a73);
}
.action-btn.auto {
  width: 64px;
  height: 64px;
  font-size: 13px;
  margin-bottom: 6px;
  background: radial-gradient(circle at 35% 30%, #b0b8c8, #555f73);
}
/* pet attack toggle */
.action-btn.petatk {
  width: 64px;
  height: 64px;
  font-size: 24px;
  margin-bottom: 6px;
  background: radial-gradient(circle at 35% 30%, #b0b8c8, #555f73);
}
.action-btn.petatk.active {
  background: radial-gradient(circle at 35% 30%, #ff8a8a, #c0392b);
  box-shadow: 0 0 0 3px #ffd0c0, 0 8px 18px rgba(0, 0, 0, 0.45);
  filter: brightness(1.08);
}
/* flee — only shown during a wild battle */
.action-btn.flee {
  position: absolute;
  right: 0;
  bottom: 172px;
  width: 64px;
  height: 64px;
  font-size: 13px;
  background: radial-gradient(circle at 35% 30%, #ffd08a, #c0392b);
}
.action-btn.catch {
  position: absolute;
  right: 0;
  bottom: 96px;
  width: 64px;
  height: 64px;
  background: radial-gradient(circle at 35% 30%, #ffffff, #3fa9ff);
}
.pokeball-icon {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid #243044;
  background: linear-gradient(to bottom, #e8444f 0 47%, #243044 47% 56%, #f7fbff 56% 100%);
  box-shadow: inset 0 3px 5px rgba(255, 255, 255, 0.55), inset 0 -3px 5px rgba(0, 0, 0, 0.18);
}
.pokeball-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 3px solid #243044;
  background: #f7fbff;
  transform: translate(-50%, -50%);
}
.catch-menu {
  position: absolute;
  right: max(22px, env(safe-area-inset-right));
  bottom: calc(max(26px, env(safe-area-inset-bottom)) + 96px);
  z-index: 45;
  width: min(310px, calc(100vw - 28px));
  max-height: min(360px, calc(100vh - 180px));
  overflow: auto;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(16, 22, 34, 0.94);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.48);
  pointer-events: auto;
  display: none;
}
.catch-menu.show { display: block; }
.catch-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #e7edf5;
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 8px;
}
.catch-menu-close {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  cursor: pointer;
}
.catch-choice {
  width: 100%;
  min-height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  color: #eef5ff;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  margin-top: 6px;
  cursor: pointer;
  text-align: left;
}
.catch-choice:hover { background: rgba(63, 169, 255, 0.16); }
.catch-choice:disabled { opacity: 0.45; cursor: default; }
.catch-choice .cc-icon { font-size: 22px; text-align: center; }
.catch-choice .cc-name { font-weight: 800; font-size: 13px; }
.catch-choice .cc-count { color: #aeb8c6; font-size: 12px; margin-top: 2px; }
.catch-choice .cc-rate { color: #8fe0c8; font-weight: 900; font-size: 14px; }
/* lit ring + glow while auto mode is engaged */
.action-btn.auto.active {
  background: radial-gradient(circle at 35% 30%, #ffe89a, #d8a52b);
  box-shadow: 0 0 0 3px #ffe6b0, 0 8px 18px rgba(0, 0, 0, 0.45);
  filter: brightness(1.08);
}

.action-label { position: relative; z-index: 2; pointer-events: none; }

/* Active-weapon chip above the action buttons */
.weapon-hud {
  position: absolute;
  right: max(22px, env(safe-area-inset-right));
  bottom: calc(max(26px, env(safe-area-inset-bottom)) + 108px);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  background: rgba(20, 26, 38, 0.82);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  pointer-events: none;
  max-width: 46vw;
  transition: transform 0.12s ease;
}
.weapon-hud.swap-pulse { transform: scale(1.08); }
.weapon-hud-icon { font-size: 18px; line-height: 1; }
.weapon-hud-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Radial cooldown sweep, driven by --cd (0 = ready, 1 = just fired) */
.cooldown {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 1;
  pointer-events: none;
  background: conic-gradient(
    rgba(0, 0, 0, 0.55) calc(var(--cd, 0) * 360deg),
    rgba(0, 0, 0, 0) 0deg
  );
}

/* ---------------- Player skill bar (7 active skills) ---------------- */
.skillbar {
  position: absolute;
  right: max(14px, env(safe-area-inset-right));
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9;
  pointer-events: auto;
}
.skill-slot {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  background: radial-gradient(circle at 35% 28%, #3a4258, #222838);
  color: #fff;
  font-size: 25px;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.42);
  transition: transform 0.07s ease, filter 0.12s ease;
}
.skill-slot:active { transform: scale(0.9); }
.skill-slot.cooling { filter: grayscale(0.5) brightness(0.72); }
.skill-ic { position: relative; z-index: 0; line-height: 1; }
.skill-sweep {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: conic-gradient(
    rgba(0, 0, 0, 0.6) calc(var(--cd, 0) * 360deg),
    rgba(0, 0, 0, 0) 0deg
  );
}
.skill-cd-text {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
  pointer-events: none;
}

/* ---------------- Hunt HUD (boss bar + revives) ---------------- */

.hunt-hud {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: min(640px, 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 4;
}
.hunt-hud.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.hunt-hint {
  display: none;
  text-align: center;
  font-weight: 700;
  font-size: 15px;
  color: #ffd9a0;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
  margin-bottom: 6px;
}
.hunt-hud.searching .hunt-hint { display: block; }
.hunt-hud.searching .boss-row,
.hunt-hud.searching .boss-track { display: none; }

.boss-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 5px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
}
.boss-name {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.5px;
  color: #ff7a7a;
}
.boss-hp-text {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(238, 242, 247, 0.9);
}

.boss-track {
  height: 16px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
.boss-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #b3203a, #ff5d5d);
  transition: width 0.2s ease;
}

.revives {
  margin-top: 7px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: #ffd9d9;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
  letter-spacing: 1px;
}

/* ---------------- Chat box ---------------- */

.chat-box {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  width: min(460px, 46%);
  z-index: 8;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.chat-tabs {
  display: flex;
}
.chat-tab {
  flex: 1;
  padding: 7px 4px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: rgba(238, 242, 247, 0.55);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.chat-tab:hover { color: rgba(238, 242, 247, 0.85); }
.chat-tab.active { color: #fff; border-bottom-color: var(--soft); }
.chat-tab .chat-unread {
  display: inline-block;
  min-width: 7px;
  height: 7px;
  margin-left: 4px;
  border-radius: 50%;
  background: var(--attack);
  vertical-align: middle;
}

.chat-history {
  height: 96px;
  overflow-y: auto;
  padding: 6px 10px;
  font-size: 12.5px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chat-msg .chat-sender { font-weight: 700; color: #8fc7ff; margin-right: 4px; }
.chat-msg.team .chat-sender { color: #88e0a0; }
.chat-msg.global .chat-sender { color: #c3aaff; }
.chat-msg.self .chat-sender { color: var(--soft); }
.chat-msg .chat-text { color: #e3e8ef; }
.chat-msg.system .chat-sender { color: #ffb454; }
.chat-msg.system .chat-text { color: #ffd9a0; font-style: italic; }

.chat-input-row {
  display: flex;
  gap: 6px;
  padding: 6px;
  border-top: 1px solid var(--panel-border);
}
.chat-input-row input {
  flex: 1;
  min-width: 0;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  color: #fff;
  padding: 7px 10px;
  font-size: 13px;
  outline: none;
}
.chat-input-row input:focus { border-color: rgba(255, 207, 77, 0.6); }
.chat-input-row button {
  background: var(--soft);
  color: #1c2230;
  border: none;
  border-radius: 8px;
  padding: 0 14px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
}
.chat-input-row button:active { transform: scale(0.94); }

/* ---------------- NPC dialogue box ---------------- */

.dialogue {
  position: absolute;
  left: 50%;
  bottom: 196px;
  transform: translateX(-50%) translateY(12px);
  width: min(760px, 64%);
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  padding: 18px 26px 22px;
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);
  pointer-events: none; /* never blocks the controls beneath it */
  opacity: 0;
  transition: opacity 0.18s ease, transform 0.18s ease;
  z-index: 5;
}
.dialogue.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.dialogue-name {
  color: var(--soft);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.3px;
  margin-bottom: 8px;
}
.dialogue-name::before {
  content: "🗨 ";
}

.dialogue-text {
  color: var(--text);
  font-size: 23px;
  line-height: 1.5;
}

.dialogue-cue {
  position: absolute;
  right: 14px;
  bottom: 8px;
  font-size: 11px;
  color: rgba(238, 242, 247, 0.6);
  animation: cue-bob 1s ease-in-out infinite;
}
@keyframes cue-bob {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(2px); opacity: 1; }
}

/* ---------------- Location name banner ---------------- */

.location-banner {
  position: absolute;
  top: 84px;
  left: 50%;
  transform: translateX(-50%) translateY(-14px);
  z-index: 6;
  pointer-events: none;
  padding: 10px 26px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(28, 39, 56, 0.95), rgba(20, 26, 38, 0.95));
  border: 2px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 1px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.location-banner.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---------------- Minimap (world overview) ---------------- */

/* Right section of the merged top-right card — transparent, no own frame. */
.minimap {
  position: relative;
  pointer-events: auto;
  cursor: pointer;
  z-index: 5;
  transition: transform 0.12s ease, opacity 0.12s ease;
}
.minimap:hover { opacity: 0.92; }
.minimap:active { transform: scale(0.97); }

.minimap-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-align: center;
  color: rgba(238, 242, 247, 0.7);
  margin-bottom: 4px;
}

.minimap-expand-hint {
  font-size: 11px;
  opacity: 0.8;
  margin-left: 2px;
}

.minimap canvas {
  display: block;
  border-radius: 8px;
}

/* Expanded (near-fullscreen) minimap overlay */
.minimap-expanded {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(6, 9, 14, 0.7);
  backdrop-filter: blur(3px);
  pointer-events: auto;
}
.minimap-expanded.show { display: flex; }

.minimap-expanded-box {
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  padding: 14px 16px 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  max-width: 94vw;
  max-height: 92vh;
}

.minimap-expanded-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  color: rgba(238, 242, 247, 0.92);
}

.minimap-expanded-close {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--panel-border);
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}
.minimap-expanded-close:active { transform: scale(0.9); }
.minimap-expanded-close:hover { background: rgba(255, 255, 255, 0.12); }

.minimap-expanded canvas {
  display: block;
  border-radius: 12px;
}

/* ---------------- Game document button + popup ---------------- */

.docs-btn {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: calc(max(16px, env(safe-area-inset-right)) + 174px);
  width: 50px;
  height: 50px;
  border-radius: 14px;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.08s ease, background 0.15s ease;
}
.docs-btn:active { transform: scale(0.9); }
.docs-btn:hover { background: rgba(30, 38, 56, 0.95); }

.docs-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(6, 9, 14, 0.66);
  backdrop-filter: blur(3px);
}
.docs-overlay.show { display: flex; }

.docs-box {
  width: min(820px, 92%);
  max-height: 84%;
  overflow-y: auto;
  background: linear-gradient(180deg, #1c2738, #141a26);
  border: 1px solid rgba(127, 212, 255, 0.3);
  border-radius: 18px;
  padding: 18px 22px 24px;
  color: #dce4ee;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
}
.docs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 16px;
}
.docs-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #eef2f7;
  font-size: 16px;
  cursor: pointer;
}
.docs-close:hover { background: rgba(255, 255, 255, 0.22); }
.docs-section {
  margin-top: 14px;
  padding: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
}
.docs-section h3 { margin: 0 0 7px; color: var(--soft); }
.docs-section p { margin: 6px 0; line-height: 1.5; }
.element-circles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.element-card {
  padding: 14px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.2);
}
.element-title {
  margin-bottom: 11px;
  font-weight: 800;
  text-align: center;
}
.element-cycle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}
.element {
  padding: 6px 10px;
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}
.cycle-arrow { color: #99a7b8; font-weight: 800; }
.element-card ul { margin: 12px 0 0; padding-left: 21px; line-height: 1.6; }
.wood { background: #3f9b54; }
.fire { background: #d9534f; }
.water { background: #358ac4; }
.earth { background: #9b7045; }
.metal { background: #788594; }
.lightning { background: #9b71d9; }
.orb-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0;
}
.orb {
  min-width: 58px;
  padding: 10px;
  border-radius: 50%;
  color: #fff;
  font-weight: 800;
  text-align: center;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,0.25), 0 3px 10px rgba(0,0,0,0.3);
}
.docs-note { color: #9eabb9; font-size: 13px; }
.weather-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.weather-card {
  padding: 12px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.2);
}
.weather-name {
  margin-bottom: 8px;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}
.weather-effect {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
}
.weather-effect.boost { color: #88e0a0; }
.weather-effect.weaken { color: #ff9a9a; }
.weather-effect.neutral { color: #aeb8c6; }

/* ---------------- Craft button + popup ---------------- */

.craft-btn {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: calc(max(16px, env(safe-area-inset-right)) + 116px);
  width: 50px;
  height: 50px;
  border-radius: 14px;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.08s ease, background 0.15s ease;
}
.craft-btn:active { transform: scale(0.9); }
.craft-btn:hover { background: rgba(30, 38, 56, 0.95); }

.craft-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(6, 9, 14, 0.62);
  backdrop-filter: blur(3px);
}
.craft-overlay.show { display: flex; }

.craft-box {
  position: relative;
  width: min(560px, 92%);
  max-height: 82%;
  overflow-y: auto;
  background: linear-gradient(180deg, #1c2738, #141a26);
  border: 1px solid rgba(255, 207, 77, 0.3);
  border-radius: 18px;
  padding: 18px 20px 22px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
}
.craft-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 20px;
  font-weight: 800;
  color: #eef2f7;
  margin-bottom: 16px;
}
.craft-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #eef2f7;
  font-size: 16px;
  cursor: pointer;
}
.craft-close:hover { background: rgba(255, 255, 255, 0.22); }

.craft-hint {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: #aeb8c6;
}

/* Three material slots */
.craft-slots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}
.craft-plus { font-size: 20px; font-weight: 800; color: #6b7689; }
.craft-slot {
  position: relative;
  width: 92px;
  height: 92px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px dashed rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  color: #6b7689;
  font-size: 13px;
  cursor: pointer;
  transition: transform 0.08s ease, border-color 0.12s ease, background 0.12s ease;
}
.craft-slot:hover { border-color: rgba(255, 207, 77, 0.5); }
.craft-slot:active { transform: scale(0.96); }
.craft-slot.filled {
  border-style: solid;
  border-color: rgba(255, 207, 77, 0.45);
  background: rgba(255, 207, 77, 0.08);
  color: #eef2f7;
}
.craft-slot .cs-icon { font-size: 32px; line-height: 1; }
.craft-slot .cs-name {
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  padding: 0 4px;
  line-height: 1.2;
}
.craft-slot .cs-empty { font-size: 22px; font-weight: 800; }

.craft-make {
  display: block;
  width: 100%;
  background: var(--soft);
  color: #1c2230;
  border: none;
  border-radius: 12px;
  padding: 13px 16px;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  transition: transform 0.08s ease, filter 0.12s ease;
}
.craft-make:active { transform: scale(0.98); }
.craft-make:disabled { filter: grayscale(0.6) brightness(0.6); cursor: default; }

/* Result area shown after crafting */
.craft-result { margin-top: 16px; }
.craft-result:empty { margin-top: 0; }
.craft-result .cr-card {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 12px;
  padding: 12px 14px;
}
.craft-result .cr-card.success {
  background: rgba(136, 224, 160, 0.12);
  border: 1px solid rgba(136, 224, 160, 0.4);
}
.craft-result .cr-card.fail {
  background: rgba(255, 138, 138, 0.1);
  border: 1px solid rgba(255, 138, 138, 0.4);
  color: #ff9a9a;
  font-weight: 700;
}
.craft-result .cr-r-icon { font-size: 34px; }
.craft-result .cr-r-info { display: flex; flex-direction: column; gap: 2px; }
.craft-result .cr-r-tag { font-size: 12px; color: #88e0a0; font-weight: 700; }
.craft-result .cr-r-name { font-size: 16px; font-weight: 800; color: #fff; }
.craft-result .cr-r-stats { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 2px; }
.craft-result .cr-r-stat { font-size: 12px; color: #cdd6e4; }

/* Recipe book below the slots (scrolls when long) */
.craft-recipes { margin-top: 18px; }
.craft-recipes-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--soft);
  margin-bottom: 10px;
}
.craft-recipes-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
}
.crl-row {
  display: grid;
  grid-template-columns: minmax(120px, 40%) 1fr;
  align-items: center;
  gap: 6px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 10px 12px;
}
.crl-out { display: flex; align-items: center; gap: 8px; }
.crl-ic { font-size: 24px; }
.crl-name { font-size: 14px; font-weight: 800; color: #fff; }
.crl-needs { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.crl-need { font-size: 12px; }
.crl-need.ok { color: #88e0a0; }
.crl-need.low { color: #ff8a8a; }

/* Material picker overlay (inside the craft box) */
.craft-picker {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  flex-direction: column;
  background: linear-gradient(180deg, #1c2738, #141a26);
  border-radius: 18px;
  padding: 18px 20px 22px;
}
.craft-picker.show { display: flex; }
.craft-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 17px;
  font-weight: 800;
  color: #eef2f7;
  margin-bottom: 14px;
}
.craft-picker-close {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #eef2f7;
  font-size: 15px;
  cursor: pointer;
}
.craft-picker-close:hover { background: rgba(255, 255, 255, 0.22); }
.craft-picker-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 8px;
  overflow-y: auto;
}
.craft-pick-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 10px 6px;
  color: #eef2f7;
  cursor: pointer;
  transition: transform 0.08s ease, border-color 0.12s ease;
}
.craft-pick-item:hover { border-color: rgba(255, 207, 77, 0.5); }
.craft-pick-item:active { transform: scale(0.95); }
.craft-pick-item .cp-icon { font-size: 28px; }
.craft-pick-item .cp-name { font-size: 11px; font-weight: 700; text-align: center; line-height: 1.2; }
.craft-pick-item .cp-count { font-size: 11px; color: #ffcf4d; font-weight: 800; }
.craft-picker-empty { color: #aeb8c6; font-size: 13px; text-align: center; margin-top: 20px; }
.craft-picker-empty.hide { display: none; }

/* ---------------- Character button + popup ---------------- */

.char-btn {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: calc(max(16px, env(safe-area-inset-right)) + 58px);
  width: 50px;
  height: 50px;
  border-radius: 14px;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.08s ease, background 0.15s ease;
}
.char-btn:active { transform: scale(0.9); }
.char-btn:hover { background: rgba(30, 38, 56, 0.95); }

.char-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(6, 9, 14, 0.62);
  backdrop-filter: blur(3px);
}
.char-overlay.show { display: flex; }

.char-box {
  width: min(640px, 92%);
  max-height: 82%;
  overflow-y: auto;
  background: linear-gradient(180deg, #1c2738, #141a26);
  border: 1px solid rgba(127, 212, 255, 0.28);
  border-radius: 18px;
  padding: 18px 20px 22px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
}
.char-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 20px;
  font-weight: 800;
  color: #eef2f7;
  margin-bottom: 16px;
}
.char-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #eef2f7;
  font-size: 16px;
  cursor: pointer;
}
.char-close:hover { background: rgba(255, 255, 255, 0.22); }

.char-body {
  display: flex;
  gap: 18px;
}
.char-stats { flex: 0 0 40%; }
.char-equip { flex: 1; min-width: 0; }
.char-col-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--soft);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.char-stats ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.char-stats li {
  display: flex;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 14px;
}
.char-stats .st-k { color: #aeb8c6; }
.char-stats .st-v { color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }

.equip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.equip-cell {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  cursor: pointer;
  color: #cdd5e0;
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.08s ease;
}
.equip-cell:hover { background: rgba(255, 255, 255, 0.1); }
.equip-cell:active { transform: scale(0.96); }
.equip-cell.sel { border-color: var(--soft); background: rgba(255, 207, 77, 0.12); }
.equip-icon { font-size: 30px; line-height: 1; }
.equip-slot-label { font-size: 11px; color: #9aa4b2; }

/* empty slot: faded, text only */
.equip-cell.empty {
  opacity: 0.45;
  border-style: dashed;
}
.equip-empty-text { font-size: 13px; font-weight: 700; color: #aeb8c6; }
.equip-empty-tag { font-size: 10px; color: #7c8694; letter-spacing: 0.5px; }

.equip-detail {
  margin-top: 12px;
  min-height: 78px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 12px 14px;
  color: #aeb8c6;
  font-size: 13px;
}
.equip-detail .ed-head { display: flex; align-items: center; gap: 8px; }
.equip-detail .ed-ic { font-size: 22px; }
.equip-detail .ed-name { font-size: 16px; font-weight: 800; color: #fff; }
.equip-detail .ed-slot { font-size: 12px; color: var(--soft); margin: 2px 0 6px; }
.equip-detail .ed-stats { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 6px; }
.equip-detail .ed-stats span { color: #88e0a0; font-weight: 700; }
.equip-detail .ed-desc { color: #9aa4b2; line-height: 1.5; }
.equip-detail .ed-empty { color: #7c8694; font-style: italic; }
.equip-detail .ed-prof { color: #ffcf4d; font-size: 12px; margin-bottom: 8px; }
.equip-detail .ed-unequip {
  background: rgba(255, 138, 138, 0.16);
  border: 1px solid rgba(255, 138, 138, 0.45);
  color: #ff9a9a;
  border-radius: 8px;
  padding: 6px 14px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: transform 0.08s ease, filter 0.12s ease;
}
.equip-detail .ed-unequip:active { transform: scale(0.96); }

/* Bag list (equippable items) inside the character panel */
.char-inv { margin-top: 18px; }
.char-inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 10px;
}
.ci-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 10px 8px;
  color: #eef2f7;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.08s ease;
}
.ci-cell:hover { border-color: rgba(255, 207, 77, 0.5); background: rgba(255, 255, 255, 0.09); }
.ci-cell:active { transform: scale(0.96); }
.ci-cell .ci-icon { font-size: 28px; line-height: 1; }
.ci-cell .ci-name { font-size: 12px; font-weight: 700; text-align: center; line-height: 1.2; }
.ci-cell .ci-stat { font-size: 11px; color: #88e0a0; }
.char-inv-empty { color: #aeb8c6; font-size: 13px; margin: 6px 0 0; }
.char-inv-empty.hide { display: none; }

/* Pet companion picker inside the character panel */
.char-pet { margin-top: 18px; }
.char-pet-active { margin-bottom: 10px; }
.cpa-slots {
  font-size: 11.5px;
  font-weight: 700;
  color: #d9c2ff;
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}
.char-pet-active .cpa-card { margin-bottom: 8px; }
.char-pet-active .cpa-card:last-child { margin-bottom: 0; }
.cpa-card {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(176, 107, 255, 0.1);
  border: 1px solid rgba(176, 107, 255, 0.32);
  overflow: hidden;
}
.cpa-card.empty {
  color: #8b97a8;
  font-size: 13px;
  font-style: italic;
  background: rgba(255, 255, 255, 0.04);
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.14);
}
.cpa-card.epic { border-color: rgba(255, 196, 77, 0.8); }
.cpa-icon { font-size: 40px; line-height: 1; flex: 0 0 auto; }
.cpa-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cpa-name { font-size: 15px; font-weight: 800; color: #fff; }
.cpa-flag {
  font-size: 9px; font-weight: 800; padding: 1px 6px; border-radius: 999px;
  background: linear-gradient(90deg, #ffb14d, #ff7a3d); color: #2a1700; vertical-align: middle;
}
.cpa-sub { font-size: 11.5px; color: #d9c2ff; }
.cpa-stats { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
.cpa-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 11.5px;
  color: #c2ccd9;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
}
.cpa-stat b { color: #ffd34d; font-weight: 800; }
.cpa-stat b.high { color: #5fcf6a; } /* tiềm năng > 20 */
.cpa-remove {
  margin-left: auto;
  align-self: flex-start;
  flex: 0 0 auto;
  background: rgba(255, 138, 138, 0.16);
  border: 1px solid rgba(255, 138, 138, 0.45);
  color: #ff9a9a;
  border-radius: 8px;
  padding: 5px 12px;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
}
.cpa-remove:active { transform: scale(0.96); }

.char-pet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
}
.cp-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 6px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #eef2f7;
  font-family: inherit;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.08s ease;
}
.cp-cell:hover { border-color: rgba(176, 107, 255, 0.55); background: rgba(176, 107, 255, 0.12); }
.cp-cell:active { transform: scale(0.96); }
.cp-cell.sel { border-color: #b06bff; background: rgba(176, 107, 255, 0.2); box-shadow: 0 0 0 1px #b06bff inset; }
.cp-cell.epic { border-color: rgba(255, 196, 77, 0.8); }
.char-pet-empty { color: #aeb8c6; font-size: 13px; margin: 6px 0 0; }
.char-pet-empty.hide { display: none; }

/* ---------------- Item detail popup ---------------- */
.item-detail-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(6, 9, 14, 0.68);
  backdrop-filter: blur(3px);
}
.item-detail-overlay.show { display: flex; }
.item-detail-box {
  width: min(360px, 88%);
  background: linear-gradient(180deg, #1c2738, #141a26);
  border: 1px solid rgba(127, 212, 255, 0.32);
  border-radius: 16px;
  padding: 16px 18px 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
}
.item-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--soft);
  margin-bottom: 12px;
}
.item-detail-close {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #eef2f7;
  font-size: 14px;
  cursor: pointer;
}
.item-detail-close:hover { background: rgba(255, 255, 255, 0.22); }
.item-detail-body .id-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.item-detail-body .id-ic { font-size: 36px; line-height: 1; }
.item-detail-body .id-title { display: flex; flex-direction: column; gap: 2px; }
.item-detail-body .id-name { font-size: 17px; font-weight: 800; color: #fff; }
.item-detail-body .id-slot { font-size: 12px; color: var(--soft); }
.item-detail-body .id-stats { display: flex; flex-direction: column; gap: 6px; }
.item-detail-body .id-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 13px;
  color: #cdd6e4;
}
.item-detail-body .id-stat b { color: #ffcf4d; font-size: 12px; }
.item-detail-body .id-prof { color: #ffcf4d; font-size: 12px; margin-top: 8px; }
.item-detail-equip {
  display: block;
  width: 100%;
  margin-top: 16px;
  background: var(--soft);
  color: #1c2230;
  border: none;
  border-radius: 10px;
  padding: 12px 16px;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  transition: transform 0.08s ease, filter 0.12s ease;
}
.item-detail-equip:active { transform: scale(0.98); }
.item-detail-equip.danger {
  background: rgba(255, 138, 138, 0.16);
  border: 1px solid rgba(255, 138, 138, 0.5);
  color: #ff9a9a;
}

/* ---------------- Inventory button + popup ---------------- */

.inv-btn {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  width: 50px;
  height: 50px;
  border-radius: 14px;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.08s ease, background 0.15s ease;
}
.inv-btn:active { transform: scale(0.9); }
.inv-btn:hover { background: rgba(30, 38, 56, 0.95); }

.inv-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--attack);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.inv-badge.zero { display: none; }

.inv-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(6, 9, 14, 0.62);
  backdrop-filter: blur(3px);
}
.inv-overlay.show { display: flex; }

.inv-box {
  width: min(540px, 90%);
  max-height: 80%;
  overflow-y: auto;
  background: linear-gradient(180deg, #1c2738, #141a26);
  border: 1px solid rgba(255, 207, 77, 0.3);
  border-radius: 18px;
  padding: 18px 20px 22px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
}

.inv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 20px;
  font-weight: 800;
  color: #eef2f7;
  margin-bottom: 16px;
}
.inv-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #eef2f7;
  font-size: 16px;
  cursor: pointer;
}
.inv-close:hover { background: rgba(255, 255, 255, 0.22); }

.inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.inv-cell {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 12px 8px 10px;
  text-align: center;
}
.inv-icon { font-size: 34px; line-height: 1; }
.inv-name { font-size: 13px; color: #cdd5e0; margin-top: 6px; }
.inv-count { font-size: 15px; font-weight: 800; color: var(--soft); margin-top: 2px; }
.inv-stats {
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}
.inv-stat {
  display: flex;
  justify-content: space-between;
  gap: 5px;
  color: #b8c2cf;
  font-size: 10px;
  line-height: 1.25;
}
.inv-stat b {
  color: #88e0a0;
  white-space: nowrap;
}
.inv-condition {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: left;
}
.inv-condition > div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #cdd5e0;
  font-size: 11px;
  margin-bottom: 3px;
}
.inv-condition > div b { color: var(--soft); }
.inv-condition p {
  margin: 5px 0 0;
  color: #7f8b9b;
  font-size: 9px;
  line-height: 1.3;
}

.inv-empty {
  text-align: center;
  color: rgba(238, 242, 247, 0.6);
  font-size: 15px;
  padding: 24px 0;
}

/* ---------------- Teleport choice popup ---------------- */

.prompt-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(6, 9, 14, 0.62);
  backdrop-filter: blur(3px);
}
.prompt-overlay.show {
  display: flex;
}

.prompt-box {
  width: min(460px, 86%);
  background: linear-gradient(180deg, #1c2738, #141a26);
  border: 1px solid rgba(127, 212, 255, 0.35);
  border-radius: 18px;
  padding: 26px 24px 20px;
  text-align: center;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(127, 212, 255, 0.15);
}

.prompt-q {
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: 800;
  color: #eef2f7;
  line-height: 1.4;
}

.confirm-text {
  margin: -8px 0 18px;
  font-size: 15px;
  color: #c8d2df;
  line-height: 1.45;
}

.prompt-party {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.prompt-party-slot {
  min-height: 82px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 7px 6px;
  border-radius: 10px;
  border: 1px solid rgba(127, 212, 255, 0.28);
  background: rgba(127, 212, 255, 0.08);
}
.prompt-party-slot.empty {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.04);
}
.prompt-party-slot .pps-icon { font-size: 22px; line-height: 1; }
.prompt-party-slot .pps-name {
  font-size: 11.5px;
  font-weight: 800;
  color: #eef2f7;
  text-align: center;
  line-height: 1.2;
}
.prompt-party-slot .pps-el {
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  line-height: 1.25;
}

.prompt-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.prompt-opt {
  font-size: 17px;
  font-weight: 700;
  color: #eef2f7;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(127, 212, 255, 0.3);
  background: rgba(127, 212, 255, 0.1);
  cursor: pointer;
  transition: transform 0.08s ease, background 0.15s ease, border-color 0.15s ease;
}
.prompt-opt:hover {
  background: rgba(127, 212, 255, 0.22);
  border-color: rgba(127, 212, 255, 0.6);
}
.prompt-opt:active {
  transform: scale(0.97);
}

.prompt-cancel {
  margin-top: 16px;
  font-size: 14px;
  color: rgba(238, 242, 247, 0.65);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
}
.prompt-cancel:hover {
  color: #eef2f7;
}

/* ---------------- First-time intro (starter gift) ---------------- */

.intro-overlay {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(6, 9, 14, 0.78);
  backdrop-filter: blur(4px);
  pointer-events: auto;
}
.intro-overlay.show { display: flex; }

.intro-box {
  width: min(680px, 92%);
  max-height: 92%;
  overflow-y: auto;
  background: linear-gradient(180deg, #1c2738, #141a26);
  border: 1px solid rgba(127, 212, 255, 0.35);
  border-radius: 18px;
  padding: 22px 22px 20px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(127, 212, 255, 0.15);
}

.intro-guide { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.intro-avatar { font-size: 46px; line-height: 1; }
.intro-title { font-size: 20px; font-weight: 800; color: #ffd34d; }
.intro-msg { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: #c2ccd9; }

.intro-group { margin-bottom: 16px; }
.intro-group-title {
  font-size: 14px;
  font-weight: 800;
  color: #eef2f7;
  margin-bottom: 10px;
  letter-spacing: 0.3px;
}
.intro-cards { display: flex; gap: 10px; }

.intro-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px;
  border-radius: 12px;
  border: 1px solid rgba(127, 212, 255, 0.25);
  background: rgba(127, 212, 255, 0.08);
  color: #eef2f7;
  cursor: pointer;
  text-align: center;
  transition: transform 0.08s ease, background 0.15s ease, border-color 0.15s ease;
}
.intro-card:hover { background: rgba(127, 212, 255, 0.18); border-color: rgba(127, 212, 255, 0.5); }
.intro-card:active { transform: scale(0.97); }
.intro-card.sel {
  background: rgba(255, 211, 77, 0.16);
  border-color: #ffd34d;
  box-shadow: 0 0 14px rgba(255, 211, 77, 0.25);
}
.intro-card .intro-ic { font-size: 34px; line-height: 1; }
.intro-card .intro-nm { font-size: 15px; font-weight: 800; }
.intro-card .intro-ds { font-size: 11.5px; line-height: 1.4; color: #9fb0c2; }

.intro-confirm {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 14px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffd14d, #f0a82e);
  color: #2a1c00;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(240, 168, 46, 0.35);
  transition: transform 0.08s ease, filter 0.12s ease;
}
.intro-confirm:hover { filter: brightness(1.05); }
.intro-confirm:active { transform: scale(0.98); }
.intro-confirm:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

@media (max-width: 560px) {
  .intro-cards { flex-direction: column; }
}

/* ---------------- Rotate hint (portrait only) ---------------- */

#rotate-hint {
  display: none;
}

@media (orientation: portrait) {
  #game-root { display: none; }
  #rotate-hint {
    display: flex;
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    text-align: center;
    padding: 24px;
    background: var(--bg);
  }
  .rotate-icon {
    font-size: 64px;
    animation: spin 2.4s ease-in-out infinite;
  }
  #rotate-hint p { max-width: 280px; line-height: 1.5; color: rgba(238,242,247,0.8); }
}

@keyframes spin {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(90deg); }
}

/* ---------------- Pet egg button + gacha popup ---------------- */

.pet-btn {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: calc(max(16px, env(safe-area-inset-right)) + 232px);
  width: 50px;
  height: 50px;
  border-radius: 14px;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.08s ease, background 0.15s ease;
}
.pet-btn:active { transform: scale(0.9); }
.pet-btn:hover { background: rgba(30, 38, 56, 0.95); }
.pet-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #b06bff;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.pet-badge.zero { display: none; }

.pet-overlay {
  position: absolute;
  inset: 0;
  z-index: 21;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(6, 9, 14, 0.64);
  backdrop-filter: blur(3px);
}
.pet-overlay.show { display: flex; }

.pet-box {
  position: relative;
  width: min(680px, 94%);
  height: min(520px, 88%);
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #1c2738, #141a26);
  border: 1px solid rgba(176, 107, 255, 0.35);
  border-radius: 18px;
  padding: 16px 18px 18px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
.pet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 19px;
  font-weight: 800;
  color: #eef2f7;
  margin-bottom: 12px;
}
.pet-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #eef2f7;
  font-size: 16px;
  cursor: pointer;
}
.pet-close:hover { background: rgba(255, 255, 255, 0.22); }

.pet-body {
  display: flex;
  gap: 12px;
  flex: 1;
  min-height: 0;
}

/* Left vertical tab rail (banners) */
.pet-tabs {
  flex: 0 0 150px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  padding-right: 4px;
}
.pet-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: #c2ccd9;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.pet-tab:hover { background: rgba(255, 255, 255, 0.08); }
.pet-tab .pt-ic { font-size: 20px; flex: 0 0 auto; }
.pet-tab.active {
  background: rgba(176, 107, 255, 0.16);
  border-color: rgba(176, 107, 255, 0.55);
  color: #fff;
}
.pet-tab.paid .pt-cost { color: var(--hard); font-weight: 800; }

/* Right content panel */
.pet-panel {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 4px 6px 4px 2px;
}
.pet-panel-title {
  font-size: 17px;
  font-weight: 800;
  color: #eef2f7;
  margin: 0 0 4px;
}
.pet-panel-sub {
  font-size: 12.5px;
  color: #aeb8c6;
  line-height: 1.5;
  margin: 0 0 14px;
}

/* Egg slots (1 element + 2 components) */
.egg-slots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
}
.egg-plus { font-size: 18px; font-weight: 800; color: #6b7689; }
.egg-slot {
  position: relative;
  width: 86px;
  height: 86px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1.5px dashed rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  color: #6b7689;
  font-size: 12px;
  cursor: pointer;
  transition: transform 0.08s ease, border-color 0.12s ease, background 0.12s ease;
}
.egg-slot:active { transform: scale(0.96); }
.egg-slot.element { border-color: rgba(176, 107, 255, 0.4); }
.egg-slot.filled {
  border-style: solid;
  border-color: rgba(176, 107, 255, 0.55);
  background: rgba(176, 107, 255, 0.1);
  color: #eef2f7;
}
.egg-slot .es-icon { font-size: 30px; line-height: 1; }
.egg-slot .es-name { font-size: 10.5px; font-weight: 700; text-align: center; padding: 0 3px; line-height: 1.2; }
.egg-slot .es-empty { font-size: 20px; font-weight: 800; }
.egg-slot .es-tag { font-size: 9px; opacity: 0.7; }

.pet-cost {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #c2ccd9;
  margin-bottom: 12px;
}
.pet-cost .pc-soft { color: var(--soft); }
.pet-cost .pc-hard { color: var(--hard); }

.pet-roll-btn {
  display: block;
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(180deg, #a45cff, #7d33e6);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(125, 51, 230, 0.4);
  transition: transform 0.08s ease, filter 0.12s ease;
}
.pet-roll-btn:hover { filter: brightness(1.08); }
.pet-roll-btn:active { transform: scale(0.97); }
.pet-roll-btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

.pet-odds {
  margin: 12px 0 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: #8b97a8;
}
.pet-odds b { color: #c2ccd9; }

/* Banner featured art */
.banner-feature {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(176, 107, 255, 0.1);
  border: 1px solid rgba(176, 107, 255, 0.3);
  margin-bottom: 14px;
}
.banner-feature .bf-icon { font-size: 52px; line-height: 1; }
.banner-feature .bf-name { font-size: 16px; font-weight: 800; color: #fff; }
.banner-feature .bf-tag { font-size: 11.5px; color: #d9c2ff; margin-top: 2px; }
.banner-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.banner-pool .bp-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 11.5px;
  color: #c2ccd9;
}

/* Collection grid */
.pet-collection {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}
.pet-coll-empty { color: #8b97a8; font-size: 13px; padding: 10px 2px; }
.coll-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 6px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.coll-cell .cc-icon { font-size: 30px; line-height: 1; }
.coll-cell .cc-name { font-size: 11.5px; font-weight: 700; color: #eef2f7; text-align: center; }
.coll-cell .cc-stars { font-size: 11px; color: #ffd34d; letter-spacing: 1px; }
.coll-cell .cc-el { font-size: 10px; padding: 1px 6px; border-radius: 999px; color: #fff; }

/* Element color chips (shared by cards + collection) */
.el-fire { background: #ff6b3d; }
.el-water { background: #3fa9ff; }
.el-wood { background: #5fcf6a; }
.el-earth { background: #c9a14a; }
.el-metal { background: #8a93a3; }
.el-lightning { background: #e0b400; }

/* Epic + shiny treatments */
.coll-cell.epic, .pet-card.epic {
  border-color: rgba(255, 196, 77, 0.8);
  box-shadow: 0 0 16px rgba(255, 196, 77, 0.35) inset;
}
.coll-cell .cc-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffb14d, #ff7a3d);
  color: #2a1700;
}
.coll-cell.shiny::after, .pet-card.shiny::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
  background-size: 250% 250%;
  animation: shinySweep 1.8s linear infinite;
  mix-blend-mode: screen;
}
@keyframes shinySweep {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

/* Ingredient picker (over the panel) */
.pet-picker {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  flex-direction: column;
  background: rgba(10, 14, 22, 0.96);
  border-radius: 18px;
  padding: 16px 18px;
}
.pet-picker.show { display: flex; }
.pet-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 800;
  color: #eef2f7;
  margin-bottom: 12px;
}
.pet-picker-close {
  width: 30px; height: 30px;
  border-radius: 8px; border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #eef2f7; font-size: 15px; cursor: pointer;
}
.pet-picker-list {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  align-content: start;
}
.pet-pick-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: #eef2f7;
  font-size: 12px;
  cursor: pointer;
}
.pet-pick-item:hover { background: rgba(176, 107, 255, 0.14); }
.pet-pick-item .pp-ic { font-size: 22px; }
.pet-pick-item .pp-ct { margin-left: auto; color: #8b97a8; font-weight: 700; }
.pet-picker-empty { color: #8b97a8; font-size: 13px; text-align: center; margin-top: 20px; }
.pet-picker-empty.hide { display: none; }

/* Reveal overlay (the rolled result) */
.pet-reveal {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(8, 10, 18, 0.92);
  border-radius: 18px;
  padding: 20px;
}
.pet-reveal.show { display: flex; }
.pet-reveal-inner { width: 100%; display: flex; justify-content: center; }

.pet-card {
  position: relative;
  width: min(320px, 92%);
  padding: 18px 18px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, #232f44, #161d2b);
  border: 1px solid rgba(255, 255, 255, 0.14);
  text-align: center;
  overflow: hidden;
  animation: petPop 0.32s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
@keyframes petPop {
  0% { transform: scale(0.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.pet-card .pc-big { font-size: 64px; line-height: 1; }
.pet-card .pc-title { font-size: 20px; font-weight: 800; color: #fff; margin-top: 6px; }
.pet-card .pc-el-row { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 6px; }
.pet-card .pc-el { font-size: 11px; padding: 2px 9px; border-radius: 999px; color: #fff; font-weight: 700; }
.pet-card .pc-stars { font-size: 22px; color: #ffd34d; letter-spacing: 2px; margin-top: 8px; }
.pet-card .pc-stars .dim { color: rgba(255, 255, 255, 0.18); }
.pet-card .pc-badges { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.pet-card .pc-flag {
  font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 999px;
}
.pet-card .pc-flag.epic { background: linear-gradient(90deg, #ffb14d, #ff7a3d); color: #2a1700; }
.pet-card .pc-flag.shiny { background: linear-gradient(90deg, #7fe7ff, #b06bff); color: #07121e; }
.pet-card .pc-stat-list { margin-top: 12px; display: flex; flex-direction: column; gap: 5px; }
.pet-card .pc-stat {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; color: #c2ccd9;
  padding: 5px 9px; border-radius: 8px; background: rgba(255, 255, 255, 0.05);
}
.pet-card .pc-stat b { color: #fff; }
.pet-card .pc-stat .pot { color: #ffd34d; font-weight: 800; }
.pet-card .pc-stat .pot.high { color: #5fcf6a; } /* tiềm năng > 20 */

/* Tapped-companion info panel — standalone modal overlay */
.petinfo-overlay {
  position: absolute;
  inset: 0;
  z-index: 22;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(6, 9, 14, 0.7);
  backdrop-filter: blur(3px);
  padding: 20px;
}
.petinfo-overlay.show { display: flex; }
.petinfo-inner { width: 100%; display: flex; justify-content: center; }
.petinfo-close {
  border: none;
  border-radius: 999px;
  padding: 11px 28px;
  font-size: 15px;
  font-weight: 800;
  color: #07121e;
  background: linear-gradient(90deg, #7fe7ff, #b06bff);
  cursor: pointer;
}
.petinfo-close:active { transform: scale(0.97); }

.pet-card.pet-detail { width: min(340px, 94%); max-height: 82vh; overflow-y: auto; }
.pet-card .pc-big.pc-sprite { line-height: 0; }
.pet-card .pc-big.pc-sprite img {
  width: 96px; height: 96px; image-rendering: pixelated;
}
.pet-card .pd-section {
  margin: 14px 0 6px; font-size: 11px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: #8fa0b6; text-align: left;
}
.pet-card .pd-stat-list { display: flex; flex-direction: column; gap: 5px; }
.pet-card .pd-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; color: #c2ccd9;
  padding: 5px 9px; border-radius: 8px; background: rgba(255, 255, 255, 0.05);
}
.pet-card .pd-row b { color: #fff; }
.pet-card .pd-el { font-size: 11px; padding: 2px 9px; border-radius: 999px; color: #fff; font-weight: 700; }

/* Non-pet reward card (gold / diamond / material) */
.pet-card.reward .pc-big { font-size: 56px; }
.pet-card.reward .pc-reward-text { font-size: 15px; color: #eef2f7; margin-top: 8px; }

.pet-reveal-close {
  padding: 11px 28px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(180deg, #a45cff, #7d33e6);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.pet-reveal-close:active { transform: scale(0.97); }

/* ============================================================
   Quest log + Explorer codex (top-LEFT buttons + popups).
   Mirrors the inventory/character panel styling, flipped to the
   left edge so it sits opposite the bag/character buttons.
   ============================================================ */

.quest-btn,
.codex-btn {
  position: absolute;
  left: max(16px, env(safe-area-inset-left));
  width: 50px;
  height: 50px;
  border-radius: 14px;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.08s ease, background 0.15s ease;
}
/* stacked below the HP + XP status bars so they don't overlap them */
.quest-btn { top: calc(max(12px, env(safe-area-inset-top)) + 130px); }
.codex-btn { top: calc(max(12px, env(safe-area-inset-top)) + 188px); }
.quest-btn:active,
.codex-btn:active { transform: scale(0.9); }
.quest-btn:hover,
.codex-btn:hover { background: rgba(30, 38, 56, 0.95); }

.quest-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #67c46b;
  color: #06210a;
  font-size: 12px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.quest-badge.zero { display: none; }

/* ---- Active-quest tracker (left HUD panel; click to auto-start) ---- */
.quest-tracker {
  position: absolute;
  top: calc(max(12px, env(safe-area-inset-top)) + 130px);
  left: calc(max(16px, env(safe-area-inset-left)) + 62px);
  width: 232px;
  padding: 8px 12px 10px;
  border-radius: 12px;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  color: #eef2f7;
  pointer-events: auto;
  cursor: pointer;
  z-index: 5;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.quest-tracker:hover { border-color: rgba(255, 255, 255, 0.35); }
.quest-tracker:active { transform: scale(0.98); }
.quest-tracker.empty { cursor: default; opacity: 0.65; }
.quest-tracker.empty .qt-go { display: none; }
.qt-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: rgba(238, 242, 247, 0.7);
}
.qt-go { color: #67c46b; font-size: 11px; }
.qt-name {
  margin: 5px 0 7px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  color: #eef2f7;
}
.qt-bar {
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.qt-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #67c46b, #9be08a);
  border-radius: 999px;
  transition: width 0.2s ease;
}
.qt-count {
  margin-top: 4px;
  font-size: 11px;
  color: rgba(238, 242, 247, 0.6);
  text-align: right;
}

/* ---- shared overlay (quest + codex) ---- */
.quest-overlay,
.codex-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(6, 9, 14, 0.62);
  backdrop-filter: blur(3px);
}
.quest-overlay.show,
.codex-overlay.show { display: flex; }

.quest-box,
.codex-box {
  width: min(540px, 92%);
  max-height: 84%;
  overflow-y: auto;
  background: linear-gradient(180deg, #1c2738, #141a26);
  border: 1px solid rgba(255, 207, 77, 0.3);
  border-radius: 18px;
  padding: 18px 20px 22px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
}

.quest-header,
.codex-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 20px;
  font-weight: 800;
  color: #eef2f7;
  margin-bottom: 14px;
}
.quest-close,
.codex-close {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #eef2f7;
  font-size: 16px;
  cursor: pointer;
}
.quest-close:hover,
.codex-close:hover { background: rgba(255, 255, 255, 0.22); }

/* ---- quest log body ---- */
.quest-title-now {
  font-size: 14px;
  font-weight: 700;
  color: #ffd34d;
  margin-bottom: 8px;
}
.quest-title-now:empty { display: none; }
.quest-hint {
  font-size: 12px;
  color: #9fb0c4;
  margin: 0 0 14px;
}
.quest-chapter {
  margin-bottom: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
}
.quest-chapter.done { opacity: 0.7; }
.quest-chapter.locked { opacity: 0.45; }
.quest-chapter-name {
  font-size: 15px;
  font-weight: 800;
  color: #eef2f7;
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.quest-chapter-reward {
  font-size: 12px;
  color: #ffd34d;
  font-weight: 700;
}
.quest-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin-top: 8px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: background 0.12s ease, transform 0.08s ease;
}
.quest-row.trackable:hover { background: rgba(103, 196, 107, 0.18); }
.quest-row.trackable:active { transform: scale(0.99); }
.quest-row.done { cursor: default; }
.quest-row-check {
  font-size: 16px;
  width: 20px;
  text-align: center;
}
.quest-row-main { flex: 1; min-width: 0; }
.quest-row-name {
  font-size: 13px;
  font-weight: 600;
  color: #dfe6ef;
}
.quest-row.done .quest-row-name { color: #8fd49a; text-decoration: line-through; }
.quest-bar {
  margin-top: 5px;
  height: 7px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.quest-bar-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #67c46b, #a6e86a);
}
.quest-row-count {
  font-size: 12px;
  font-weight: 700;
  color: #9fb0c4;
  white-space: nowrap;
}
.quest-row-go {
  font-size: 16px;
  color: #67c46b;
}

.quest-titles {
  margin-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 12px;
}
.quest-titles-head {
  font-size: 14px;
  font-weight: 800;
  color: #eef2f7;
  margin-bottom: 8px;
}
.quest-titles-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.quest-title-chip {
  font-size: 12px;
  font-weight: 800;
  color: #2a1c06;
  background: linear-gradient(135deg, #ffe07a, #ffb347);
  border-radius: 999px;
  padding: 5px 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.quest-titles-empty {
  font-size: 12px;
  color: #9fb0c4;
  margin: 0;
}
.quest-titles-list:not(:empty) + .quest-titles-empty { display: none; }

/* ---- codex body ---- */
.codex-section { margin-bottom: 16px; }
.codex-sec-head {
  font-size: 14px;
  font-weight: 800;
  color: #eef2f7;
  margin-bottom: 8px;
}
.codex-sec-head span { color: #9fb0c4; font-weight: 600; font-size: 12px; }
.codex-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.codex-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #dfe6ef;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 6px 10px;
}
.codex-chip .codex-chip-icon { font-size: 16px; }
.codex-chip.boss { border-color: rgba(255, 93, 93, 0.4); color: #ffb3b3; }
.codex-chip.area { border-color: rgba(90, 209, 255, 0.35); color: #bfe9ff; }
.codex-empty {
  font-size: 12px;
  color: #9fb0c4;
  margin: 0;
}
.codex-grid:not(:empty) + .codex-empty { display: none; }

/* ---- Hero roster selector (character panel) ---- */
.char-heroes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.hero-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.25);
  color: #dfe6ef;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.08s ease;
}
.hero-card:hover { background: rgba(255, 255, 255, 0.06); }
.hero-card:active { transform: scale(0.98); }
.hero-card.active {
  border-color: #ffd34d;
  background: rgba(255, 211, 77, 0.12);
}
.hero-card-ic { font-size: 20px; }
.hero-card-nm { font-size: 13px; font-weight: 800; }
.hero-card-sk { font-size: 11px; color: #9b7bff; }

/* ---- Benched pets shown in the bag (inventory popup) ---- */
.inv-pets-title {
  display: none;
  margin: 14px 0 8px;
  font-size: 14px;
  font-weight: 800;
  color: #eef2f7;
}
.inv-pets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}
.inv-pet-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 6px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.25);
  color: #dfe6ef;
  cursor: pointer;
  transition: border-color 0.12s ease, transform 0.08s ease, background 0.12s ease;
}
.inv-pet-cell:hover { background: rgba(255, 255, 255, 0.06); }
.inv-pet-cell:active { transform: scale(0.97); }
.inv-pet-cell.epic { border-color: rgba(186, 124, 255, 0.6); }
.inv-pet-cell.shiny { border-color: rgba(255, 211, 77, 0.7); }
.inv-pet-ic { font-size: 24px; }
.inv-pet-nm { font-size: 12px; font-weight: 700; text-align: center; }
.inv-pet-el { font-size: 11px; color: #9fb0c4; }

/* ============================================================
   Bank (#14) + VIP (#11) — left-side buttons + popups.
   ============================================================ */
.bank-btn,
.vip-btn {
  position: absolute;
  left: max(16px, env(safe-area-inset-left));
  width: 50px;
  height: 50px;
  border-radius: 14px;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 0.08s ease, background 0.15s ease;
}
.bank-btn { top: calc(max(12px, env(safe-area-inset-top)) + 246px); }
.vip-btn { top: calc(max(12px, env(safe-area-inset-top)) + 304px); }
.bank-btn:active, .vip-btn:active { transform: scale(0.9); }
.bank-btn:hover, .vip-btn:hover { background: rgba(30, 38, 56, 0.95); }

.vip-badge {
  position: absolute;
  bottom: -6px;
  right: -8px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #8a8a8a;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 6px;
  padding: 1px 4px;
}
.vip-badge.active {
  color: #2a1c06;
  background: linear-gradient(135deg, #ffe07a, #ffb347);
  box-shadow: 0 0 8px rgba(255, 200, 80, 0.7);
}

.bank-overlay, .vip-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(6, 9, 14, 0.62);
  backdrop-filter: blur(3px);
}
.bank-overlay.show, .vip-overlay.show { display: flex; }

.bank-box, .vip-box {
  width: min(440px, 92%);
  max-height: 84%;
  overflow-y: auto;
  background: linear-gradient(180deg, #1c2738, #141a26);
  border: 1px solid rgba(255, 207, 77, 0.3);
  border-radius: 18px;
  padding: 18px 20px 22px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
}
.bank-header, .vip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 20px;
  font-weight: 800;
  color: #eef2f7;
  margin-bottom: 12px;
}
.bank-close, .vip-close {
  width: 32px; height: 32px;
  border-radius: 8px; border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #eef2f7; font-size: 16px; cursor: pointer;
}
.bank-close:hover, .vip-close:hover { background: rgba(255, 255, 255, 0.22); }
.bank-hint { font-size: 12px; color: #9fb0c4; margin: 0 0 14px; }
.bank-balances { display: flex; gap: 10px; margin-bottom: 12px; }
.bank-bal {
  flex: 1;
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
.bank-bal-k { font-size: 11px; color: #9fb0c4; }
.bank-bal-v { font-size: 18px; font-weight: 800; color: #ffd34d; }
.bank-row { margin-bottom: 10px; }
#bank-amount {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--panel-border);
  background: rgba(0, 0, 0, 0.35);
  color: #eef2f7;
  font-size: 15px;
}
.bank-actions { display: flex; gap: 10px; margin-bottom: 8px; }
.bank-act {
  flex: 1; padding: 11px; border: none; border-radius: 10px;
  font-size: 14px; font-weight: 800; cursor: pointer; color: #06210a;
}
.bank-act.deposit { background: linear-gradient(135deg, #ffd86a, #ff9f43); }
.bank-act.withdraw { background: linear-gradient(135deg, #6ad0ff, #4a9fe0); }
.bank-act:active { transform: scale(0.98); }
.bank-quick { display: flex; gap: 10px; margin-bottom: 8px; }
.bank-quick button {
  flex: 1; padding: 8px; border-radius: 8px;
  border: 1px solid var(--panel-border);
  background: rgba(255, 255, 255, 0.06); color: #dfe6ef;
  font-size: 12px; cursor: pointer;
}
.bank-msg, .vip-msg { font-size: 12px; color: #8fd49a; min-height: 16px; }

.vip-status { font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.vip-on { color: #ffd34d; }
.vip-off { color: #9fb0c4; }
.vip-perks { list-style: none; padding: 0; margin: 0 0 14px; }
.vip-perks li {
  font-size: 13px; color: #dfe6ef;
  padding: 7px 10px; margin-bottom: 6px;
  background: rgba(0, 0, 0, 0.25); border-radius: 8px;
}
.vip-buy {
  width: 100%; padding: 12px; border: none; border-radius: 10px;
  font-size: 14px; font-weight: 800; cursor: pointer; color: #2a1c06;
  background: linear-gradient(135deg, #ffe07a, #ffb347);
  margin-bottom: 8px;
}
.vip-buy:active { transform: scale(0.99); }

/* ---- Egg recipe list (#6) ---- */
.egg-recipe-list { display: flex; flex-direction: column; gap: 10px; }
.egg-recipe {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.22);
}
.egg-recipe-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.egg-recipe-ic { font-size: 22px; }
.egg-recipe-nm { font-size: 14px; font-weight: 800; color: #eef2f7; }
.egg-recipe-tag {
  margin-left: auto;
  font-size: 10px; font-weight: 800;
  color: #2a1c06;
  background: linear-gradient(135deg, #ffe07a, #ffb347);
  border-radius: 6px; padding: 2px 6px;
}
.egg-recipe-mats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.egg-mat {
  font-size: 12px; font-weight: 700;
  border-radius: 8px; padding: 3px 8px;
  border: 1px solid transparent;
}
.egg-mat.ok { color: #6ad06a; background: rgba(106, 208, 106, 0.12); border-color: rgba(106, 208, 106, 0.4); }
.egg-mat.no { color: #ff6b6b; background: rgba(255, 107, 107, 0.12); border-color: rgba(255, 107, 107, 0.4); }
.egg-recipe-make {
  width: 100%; padding: 9px; border: none; border-radius: 9px;
  font-size: 13px; font-weight: 800; cursor: pointer; color: #06210a;
  background: linear-gradient(135deg, #ffd86a, #ff9f43);
}
.egg-recipe-make:disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.6); }
.egg-recipe-make:not(:disabled):active { transform: scale(0.99); }

/* ---- #17: inventory backdrop hidden + drag item to chat ---- */
.inv-overlay {
  background: transparent;
  backdrop-filter: none;
  pointer-events: none; /* see-through; only the box catches input */
}
.inv-overlay .inv-box {
  pointer-events: auto;
}
.inv-cell[draggable="true"], .inv-pet-cell[draggable="true"] { cursor: grab; }
.inv-cell[draggable="true"]:active, .inv-pet-cell[draggable="true"]:active { cursor: grabbing; }

/* ---- #17/#18: chat item links + drop target + trade tab ---- */
.chat-item-link {
  color: #ffd34d;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}
.chat-item-link:hover { color: #fff; }
.chat-box.drag-over {
  outline: 2px dashed #ffd34d;
  outline-offset: -2px;
}
.chat-tab[data-tab="trade"] { color: #6ad06a; }
.chat-tab[data-tab="trade"].active { color: #06210a; background: #6ad06a; }
.chat-msg.trade .chat-sender { color: #6ad06a; }

/* ============================================================
   Black market (#19) — top-right button + auction popup.
   ============================================================ */
.bm-btn {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: calc(max(16px, env(safe-area-inset-right)) + 290px);
  width: 50px; height: 50px;
  border-radius: 14px;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  font-size: 24px; line-height: 1; cursor: pointer; pointer-events: auto;
  transition: transform 0.08s ease, background 0.15s ease;
}
.bm-btn:active { transform: scale(0.9); }
.bm-btn:hover { background: rgba(30, 38, 56, 0.95); }
.bm-badge {
  position: absolute; top: -6px; right: -6px;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: #b06bff; color: #fff;
  font-size: 12px; font-weight: 800; line-height: 20px; text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.reset-btn {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: calc(max(16px, env(safe-area-inset-right)) + 348px);
  width: 58px;
  height: 50px;
  border-radius: 14px;
  border: 1px solid rgba(255, 138, 138, 0.5);
  background: rgba(62, 23, 28, 0.88);
  color: #ffd6d6;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  pointer-events: auto;
}
.reset-btn:active { transform: scale(0.94); }
.reset-btn:hover { background: rgba(92, 32, 40, 0.95); }
.bm-badge.zero { display: none; }

.bm-overlay {
  position: absolute; inset: 0; z-index: 20; display: none;
  align-items: center; justify-content: center;
  background: rgba(6, 9, 14, 0.62); backdrop-filter: blur(3px);
}
.bm-overlay.show { display: flex; }
.bm-box {
  width: min(480px, 92%); max-height: 84%; overflow-y: auto;
  background: linear-gradient(180deg, #221a2e, #15121c);
  border: 1px solid rgba(176, 107, 255, 0.4);
  border-radius: 18px; padding: 18px 20px 22px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
}
.bm-header {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 20px; font-weight: 800; color: #eef2f7; margin-bottom: 10px;
}
.bm-close {
  width: 32px; height: 32px; border-radius: 8px; border: none;
  background: rgba(255, 255, 255, 0.1); color: #eef2f7; font-size: 16px; cursor: pointer;
}
.bm-close:hover { background: rgba(255, 255, 255, 0.22); }
.bm-hint { font-size: 12px; color: #b9a9d4; margin: 0 0 14px; }
.bm-form { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
#bm-item {
  flex: 1 1 160px; min-width: 0; padding: 9px 10px; border-radius: 9px;
  border: 1px solid var(--panel-border); background: rgba(0,0,0,0.4); color: #eef2f7; font-size: 13px;
}
#bm-price {
  width: 110px; padding: 9px 10px; border-radius: 9px;
  border: 1px solid var(--panel-border); background: rgba(0,0,0,0.4); color: #eef2f7; font-size: 13px;
}
#bm-list {
  padding: 9px 16px; border: none; border-radius: 9px; cursor: pointer;
  font-size: 13px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #b06bff, #7d3fd0);
}
#bm-list:active { transform: scale(0.98); }
.bm-msg { font-size: 12px; color: #c6a6ff; min-height: 16px; margin-bottom: 6px; }
.bm-listings-title { font-size: 14px; font-weight: 800; color: #eef2f7; margin: 8px 0; }
.bm-listings { display: flex; flex-direction: column; gap: 8px; }
.bm-empty { font-size: 12px; color: #b9a9d4; margin: 0; }
.bm-listings:not(:empty) + .bm-empty { display: none; }
.bm-listing {
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px;
  padding: 10px 12px; background: rgba(0, 0, 0, 0.28);
}
.bm-l-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.bm-l-ic { font-size: 20px; }
.bm-l-nm { font-size: 14px; font-weight: 800; color: #eef2f7; }
.bm-l-time { margin-left: auto; font-size: 12px; font-weight: 700; color: #ffd34d; }
.bm-l-info { display: flex; justify-content: space-between; font-size: 13px; color: #dfe6ef; }
.bm-l-info b { color: #ffd34d; }
.bm-l-bids { font-weight: 800; }
.bm-l-bids.ok { color: #6ad06a; }
.bm-l-bids.no { color: #ff8a8a; }
.bm-l-seller { font-size: 11px; color: #b9a9d4; margin-top: 4px; }

/* ============================================================
   Pet combat kit (ability + skill) — char panel & reveal card
   ============================================================ */
.cpa-kit { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
.cpa-kit-it {
  font-size: 11px; font-weight: 700; color: #e6dcff;
  background: rgba(120, 90, 200, 0.25);
  border: 1px solid rgba(150, 120, 230, 0.4);
  border-radius: 8px; padding: 2px 7px;
}
.cpa-lock-note {
  margin-top: 6px;
  font-size: 12px;
  color: #ffd9a0;
  background: rgba(255, 160, 93, 0.12);
  border: 1px solid rgba(255, 160, 93, 0.35);
  border-radius: 8px;
  padding: 6px 8px;
}
.cpa-remove:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.pc-kit { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.pc-kit-row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px;
  background: rgba(0, 0, 0, 0.25); border-radius: 10px; padding: 6px 9px;
}
.pc-kit-tag {
  font-size: 10px; font-weight: 800; letter-spacing: 0.04em;
  color: #1c2230; background: #ffd34d; border-radius: 6px; padding: 1px 6px;
}
.pc-kit-row b { font-size: 13px; color: #fff7e0; }
.pc-kit-desc { flex-basis: 100%; font-size: 11px; color: #c7d0db; }

/* ============================================================
   Party squad HUD (bottom-left, above the joystick): 3 pets
   ============================================================ */
.party-hud {
  position: absolute;
  left: max(20px, env(safe-area-inset-left));
  bottom: calc(max(20px, env(safe-area-inset-bottom)) + 142px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  z-index: 6;
  pointer-events: auto;
}
.party-slot {
  --el: #888;
  position: relative;
  width: 168px;
  padding: 6px 10px 7px 8px;
  border-radius: 12px;
  background: rgba(16, 20, 30, 0.72);
  border: 2px solid var(--el);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.party-slot.lead {
  box-shadow: 0 0 0 2px #ffd34d, 0 2px 10px rgba(255, 211, 77, 0.5);
  transform: translateX(4px);
}
.party-slot.fainted {
  filter: grayscale(1) brightness(0.55);
  cursor: default;
}

/* Dungeon attack-stat panel — top-LEFT, stacked below the quest tracker (same
   left edge + width). One row per hero + its pet, with a combined total bar. */
.dmg-meter {
  position: absolute;
  top: calc(max(12px, env(safe-area-inset-top)) + 222px);
  left: calc(max(16px, env(safe-area-inset-left)) + 62px);
  width: 232px;
  display: none;
  flex-direction: column;
  padding: 8px 10px 9px;
  border-radius: 12px;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  z-index: 5;
  pointer-events: none;
}
.dmg-meter.show { display: flex; }
.dm-title {
  font-size: 10px; font-weight: 800; letter-spacing: 0.5px;
  color: rgba(238, 242, 247, 0.85); margin-bottom: 4px;
}
.dm-head, .dm-row {
  display: grid;
  grid-template-columns: 1fr 50px 50px;
  gap: 5px;
  align-items: center;
}
.dm-head {
  font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px;
  color: rgba(238, 242, 247, 0.45);
  padding-bottom: 3px; margin-bottom: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.dm-head span:nth-child(2), .dm-head span:nth-child(3) { text-align: right; }
.dm-list { position: relative; transition: height 0.32s ease; }
.dm-row {
  position: absolute;
  left: 0;
  right: 0;
  height: 21px;
  font-size: 11px;
  /* ranked by total damage; slides to its new rank instead of snapping */
  transition: transform 0.34s cubic-bezier(0.2, 0.7, 0.2, 1);
  will-change: transform;
}
.dm-hero {
  display: flex; align-items: center; gap: 3px; min-width: 0;
  color: rgba(238, 242, 247, 0.88);
}
.dm-row.lead .dm-hero { color: #ffd34d; font-weight: 700; }
.dm-hero b { font-size: 14px; font-weight: 400; flex: 0 0 auto; }
.dm-hero .dm-nm {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.dm-hero i { font-style: normal; font-weight: 800; color: #ff9d6b; margin-left: auto; flex: 0 0 auto; }
.dm-pet {
  display: flex; align-items: center; justify-content: flex-end; gap: 3px;
  color: rgba(238, 242, 247, 0.72);
}
.dm-pet i { font-style: normal; font-weight: 700; color: #ff9d6b; }
.dm-total {
  position: relative; display: flex; align-items: center; justify-content: flex-end;
  padding: 1px 5px; border-radius: 4px; overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
}
.dm-total .dm-bar {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: rgba(255, 157, 107, 0.28);
}
.dm-total b { position: relative; font-weight: 800; color: #ffd34d; font-size: 12px; }

/* Pet behaviour mode switch — a vertical strip of 3 buttons sitting just to the
   RIGHT of the party HUD slot (bottom-left), so it reads as part of the pet UI. */
.pet-mode {
  position: absolute;
  left: calc(max(20px, env(safe-area-inset-left)) + 180px);
  bottom: calc(max(20px, env(safe-area-inset-bottom)) + 142px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 6;
  pointer-events: auto;
}
.pm-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--panel-border);
  background: rgba(16, 20, 30, 0.72);
  color: rgba(238, 242, 247, 0.65);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, transform 0.08s ease;
}
.pm-btn span { font-size: 11px; }
.pm-btn:hover { background: rgba(30, 38, 56, 0.92); }
.pm-btn:active { transform: scale(0.94); }
.pm-btn.active {
  background: rgba(45, 55, 75, 0.96);
  border-color: #ffd34d;
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 211, 77, 0.5);
}
.party-slot .ps-icon { font-size: 26px; line-height: 1; flex: 0 0 auto; }
.party-slot .ps-info {
  display: flex; flex-direction: column; align-items: stretch;
  gap: 2px; flex: 1 1 auto; min-width: 0;
}
.party-slot .ps-name {
  font-size: 12px; font-weight: 800; color: #f3f6fb;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.party-slot .ps-sub {
  display: flex; align-items: center; gap: 6px;
}
.party-slot .ps-lv {
  font-size: 10px; font-weight: 800; color: #ffe6b0;
}
.party-slot .ps-el {
  font-size: 9px; font-weight: 800; color: var(--el);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.party-slot .ps-power {
  font-size: 10px; font-weight: 700; color: #cfe0f5;
}
.party-slot .ps-power b { color: #ffd34d; font-weight: 900; }
.party-slot .ps-hp {
  width: 100%; height: 5px; border-radius: 3px; margin-top: 1px;
  background: rgba(255, 255, 255, 0.16); overflow: hidden;
}
.party-slot .ps-hp-fill {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, #5fd86a, #8af090);
  transition: width 0.2s ease;
}
.party-slot .ps-hp-fill.low { background: linear-gradient(90deg, #ff5d5d, #ffa05d); }
.party-slot .ps-down {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 20px; color: #ff6b6b; font-weight: 900;
  text-shadow: 0 1px 2px #000;
}

/* ============================================================
   Turn-based 3v3 battle overlay (battle.js)
   ============================================================ */
.battle-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: none; flex-direction: column;
  background: radial-gradient(circle at 50% 30%, #2a3550, #131722 70%);
  color: #eef2f7;
  padding: max(14px, env(safe-area-inset-top)) 14px 14px;
}
.battle-overlay.show { display: flex; }
.battle-stage {
  flex: 1; display: flex; flex-direction: column;
  justify-content: space-between; gap: 8px; min-height: 0;
}
.battle-side { display: flex; flex-direction: column; gap: 6px; }
.battle-side.enemy { align-items: flex-end; }
.battle-side.player { align-items: flex-start; }
.battle-side-name {
  font-size: 13px; font-weight: 800; letter-spacing: 0.03em;
  color: #ffd34d; padding: 0 4px;
}
.battle-row { display: flex; gap: 10px; flex-wrap: wrap; }
.battle-side.enemy .battle-row { justify-content: flex-end; }

.bc {
  --el: #888;
  width: 92px; padding: 7px 7px 8px;
  border-radius: 14px;
  background: rgba(14, 18, 28, 0.82);
  border: 2px solid var(--el);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
  position: relative; text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease;
}
.bc.acting { box-shadow: 0 0 0 2px #ffd34d, 0 4px 14px rgba(255, 211, 77, 0.5); transform: translateY(-4px); }
.bc.fainted { filter: grayscale(1) brightness(0.5); opacity: 0.7; }
.bc.targetable {
  cursor: pointer; animation: bc-pulse 0.9s ease-in-out infinite;
  box-shadow: 0 0 0 2px #ff7676, 0 4px 14px rgba(255, 118, 118, 0.55);
}
@keyframes bc-pulse { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-3px);} }
.bc-top { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 30px; }
.bc-icon { font-size: 28px; line-height: 1; }
.bc-shield { font-size: 10px; font-weight: 800; color: #8ad0ff; }
.bc-buff { font-size: 12px; }
.bc-name { font-size: 12px; font-weight: 800; color: #fff7e0; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-el { font-size: 10px; color: var(--el); font-weight: 700; }
.bc-hp { width: 100%; height: 7px; border-radius: 4px; margin-top: 5px;
  background: rgba(255, 255, 255, 0.16); overflow: hidden; }
.bc-hp-fill { display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, #5fd86a, #8af090); transition: width 0.3s ease; }
.bc-hp-fill.low { background: linear-gradient(90deg, #ff5d5d, #ffa05d); }
.bc-hp-text { font-size: 10px; color: #cfd7e2; margin-top: 2px; }
.bc-down { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 30px; color: #ff6b6b; font-weight: 900; text-shadow: 0 2px 4px #000; }

.battle-log {
  align-self: center; width: min(560px, 96%);
  min-height: 92px; max-height: 130px; overflow-y: auto;
  background: rgba(0, 0, 0, 0.4); border-radius: 12px;
  padding: 8px 12px; font-size: 13px; line-height: 1.5;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.battle-log div { color: #dfe6ef; }

.battle-actions { min-height: 86px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; }
.ba-turn { font-size: 13px; color: #cfd7e2; }
.ba-turn b { color: #fff7e0; }
.ba-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.ba-btn {
  font-size: 14px; font-weight: 800; color: #1c2230;
  padding: 11px 16px; border-radius: 12px; border: none; cursor: pointer;
  background: linear-gradient(180deg, #ffe7a0, #ffd34d);
  box-shadow: 0 3px 0 #b9952f;
}
.ba-btn.skill { background: linear-gradient(180deg, #c6b6ff, #9a7dff); color: #1a1330; box-shadow: 0 3px 0 #5e44b0; }
.ba-btn.auto { background: linear-gradient(180deg, #cfd7e2, #9fb0c4); box-shadow: 0 3px 0 #5d6b7d; }
.ba-btn:disabled { filter: grayscale(0.7); opacity: 0.5; cursor: default; box-shadow: none; }
.ba-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
.ba-hint { font-size: 12px; color: #ffd34d; min-height: 16px; }

.battle-result { display: none; position: absolute; inset: 0;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; background: rgba(8, 10, 16, 0.78); z-index: 10; }
.battle-result.show { display: flex; }
.br-title { font-size: 34px; font-weight: 900; letter-spacing: 0.03em; }
.battle-result.win .br-title { color: #ffd34d; text-shadow: 0 0 18px rgba(255, 211, 77, 0.6); }
.battle-result.lose .br-title { color: #ff7676; }
.br-sub { font-size: 15px; color: #dfe6ef; }
.br-close {
  margin-top: 8px; font-size: 16px; font-weight: 800; color: #1c2230;
  padding: 12px 28px; border-radius: 14px; border: none; cursor: pointer;
  background: linear-gradient(180deg, #ffe7a0, #ffd34d); box-shadow: 0 4px 0 #b9952f;
}
.br-close:active { transform: translateY(2px); box-shadow: none; }