:root {
  --color-bg: #0b0c10;
  --color-panel: rgba(21, 23, 30, 0.94);
  --color-panel-solid: #15171e;
  --color-panel-border: rgba(255, 255, 255, 0.08);
  --color-accent: #f5a623;
  --color-accent-text: #2a1a00;
  --color-accent-2: #4fc3f7;
  --color-danger: #ef476f;
  --color-success: #3ecf6e;
  --color-text: #f1f1f6;
  --color-text-dim: #8b93a7;
  --hp-color: #3ecf6e;
  --hp-low-color: #ef476f;
  --exp-color: #4fc3f7;
  --gold-color: #f5c542;
  --diamond-color: #8ecae6;
  --radius-panel: 14px;
  --radius-card: 10px;
  --radius-btn: 8px;
  --radius-pill: 999px;
  font-family: -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #000;
  color: var(--color-text);
  font-family: inherit;
  overflow: hidden;
}

#app {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

/* Always fills the actual browser window at whatever size/aspect ratio it
   is — portrait, landscape, ultrawide, doesn't matter — instead of a fixed
   960x540 box scaled to fit (which left letterbox bars on non-16:9
   windows). main.js keeps #game-canvas's drawing-buffer resolution (its
   width/height *attributes*) in sync with this on load and on resize, and
   Renderer's camera/hospital-layout math is keyed off that live size rather
   than a hardcoded resolution, so every HUD panel here (all absolutely
   positioned, edge-anchored via top/left/right/bottom or 50% centering)
   naturally follows any resize without needing its own recalculation. */
#game-viewport {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: var(--color-bg);
  image-rendering: pixelated;
}

#game-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  display: block;
}

/* Generic panel look: dark glass card, rounded, soft elevation shadow. */
.panel {
  background: var(--color-panel);
  border: 1px solid var(--color-panel-border);
  border-radius: var(--radius-panel);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
}

button {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--color-panel-border);
  border-radius: var(--radius-btn);
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.05s ease;
}

button:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--color-accent);
}

button:active {
  transform: translateY(1px);
}

button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

select, input[type="number"], input[type="text"] {
  font-family: inherit;
  font-size: 12px;
  color: var(--color-text);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--color-panel-border);
  border-radius: var(--radius-btn);
  padding: 5px 8px;
}

input[type="number"] {
  width: 54px;
}

select:focus, input[type="number"]:focus, input[type="text"]:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* ---------- HUD ---------- */
.hud {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  padding: 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  z-index: 10;
  pointer-events: none;
}

.hud .hud-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Trainer level/EXP strip — sits directly above the active-POKE row so the
   Trainer's own progression (systems/ProgressionSystem.js#grantTrainerExp)
   reads as a separate, secondary line rather than competing with the POKE's
   own name/level. */
.hud .trainer-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--color-text-dim, #b8bcc8);
  pointer-events: auto;
}

.hud .trainer-name {
  font-weight: 600;
}

.hud .trainer-bar-track {
  width: 90px;
  height: 5px;
}

.hud .hud-poke {
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}

.hud .poke-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  /* Base neutral ring — overridden per-POKE to its rarity color via inline
     style (see HUD.js#renderHud). */
  border: 2px solid var(--color-panel-border);
  flex-shrink: 0;
}

.hud .poke-icon-sprite {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--color-panel-border);
  image-rendering: pixelated;
  transform: scaleX(-1); /* sheet sprites face left; mirror so POKE faces right */
}

.bar-track {
  width: 120px;
  height: 8px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: var(--radius-pill);
  position: relative;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width 0.15s linear;
}

.bar-fill.hp { background: var(--hp-color); }
.bar-fill.hp.low { background: var(--hp-low-color); }
.bar-fill.exp { background: var(--exp-color); }

.hud .wallet {
  margin-left: auto;
  display: flex;
  gap: 14px;
  pointer-events: auto;
  font-weight: 600;
}

.hud .wallet span.gold { color: var(--gold-color); }
.hud .wallet span.diamond { color: var(--diamond-color); }

/* ---------- Ability HUD ---------- */
#ability-hud {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 10;
  pointer-events: none;
}

.ability-slot {
  position: relative;
  width: 38px;
  height: 38px;
  border: 4px solid var(--color-panel-border);
  border-radius: var(--radius-card);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--color-text);
  pointer-events: auto;
}

/* Border color reflects the move's category (physical/special, set inline
   per-slot in AbilityHUD.js) — the ready state only adds a glow on top of
   that, it must never override which category color is showing. */
.ability-slot.ready {
  box-shadow: 0 0 0 1px var(--color-accent), 0 4px 10px rgba(0, 0, 0, 0.35);
}

/* AOE moves get a small green corner marker on top of the physical/special
   border color, instead of replacing it. */
.ability-slot.aoe::after {
  content: '';
  position: absolute;
  top: -5px;
  right: -5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #4ade80;
  border: 2px solid #1a1200;
}

.ability-slot .cooldown-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  border-radius: var(--radius-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #fff;
}

/* Damage preview vs. the current/nearest target — sits in a strip below the
   move label, layered above the cooldown-overlay (z-index) so it stays
   readable even while the ability is on cooldown. */
.ability-slot .dmg-badge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 1;
  font-size: 9px;
  line-height: 1;
  padding: 2px 0;
  text-align: center;
  color: var(--color-accent);
  background: rgba(0, 0, 0, 0.65);
  border-bottom-left-radius: var(--radius-card);
  border-bottom-right-radius: var(--radius-card);
}

/* ---------- Bottom nav (moved to top, below the .hud strip) ---------- */
#bottom-nav {
  position: absolute;
  top: 72px;
  left: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
  padding: 6px;
  /* Above #overlay-root's dimmed backdrop (z-index 30, spans the full
     viewport whenever a screen is open) so nav buttons stay clickable and
     switching screens works in a single click instead of the first click
     just closing whatever's open. */
  z-index: 35;
}

#bottom-nav button {
  flex: 1;
  border-radius: var(--radius-pill);
}

#bottom-nav button.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-text);
}

#zoom-control {
  position: absolute;
  top: 116px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  z-index: 35; /* same reasoning as #bottom-nav above */
  font-size: 10px;
}

#zoom-control button {
  padding: 2px 8px;
  font-size: 12px;
}

#zoom-level {
  min-width: 32px;
  text-align: center;
  color: var(--color-text-dim);
}

.tabs {
  gap: 6px;
}

.tabs button {
  flex: 1;
  border-radius: var(--radius-pill);
}

.tabs button.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-text);
}

/* ---------- Toasts ---------- */
#toasts {
  position: absolute;
  top: 116px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 20;
  pointer-events: none;
  align-items: center;
}

.toast {
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(15, 16, 22, 0.92);
  border: 1px solid var(--color-panel-border);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  animation: toast-in-out 2.4s ease forwards;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.toast.levelup { border-color: var(--color-accent); color: var(--color-accent); }
.toast.capture-success, .toast.success { border-color: var(--color-success); color: var(--color-success); }
.toast.capture-fail, .toast.error { border-color: var(--color-danger); color: var(--color-danger); }
.toast.gold { border-color: var(--gold-color); color: var(--gold-color); }

@keyframes toast-in-out {
  0% { opacity: 0; transform: translateY(-6px); }
  10% { opacity: 1; transform: translateY(0); }
  85% { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------- Overlay screens (menus) ---------- */
#overlay-root {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}

/* Dims the game behind any open menu, like the reference site's modal
   backdrop — #overlay-root is emptied (innerHTML = '') whenever no screen is
   open, so :empty cleanly toggles this without extra JS state. No blur
   anymore (explicit user request) — the battlefield stays sharp, just
   darkened, behind whatever menu is open. */
#overlay-root:not(:empty) {
  background: rgba(4, 5, 8, 0.45);
  pointer-events: auto;
}

.screen {
  position: absolute;
  inset: 36px 8px 44px 8px;
  padding: 14px;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  /* Own content (topbar + body below) manages scrolling itself now — the
     wrapper never scrolls, so the topbar (close button) never moves. */
  overflow: hidden;
}

.screen h2 {
  margin: 0 0 4px 0;
  font-size: 15px;
  color: var(--color-accent);
  border-bottom: 1px solid var(--color-panel-border);
  padding-bottom: 8px;
}

/* Non-scrolling strip above #screen-body — just the close button by
   default, but also the window's drag handle (see ui/draggable.js). */
.screen-topbar {
  display: flex;
  justify-content: flex-end;
  flex: 0 0 auto;
  cursor: move;
}

.screen .close-btn {
  border-radius: 50%;
  width: 26px;
  height: 26px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The only part of a .screen that actually scrolls. No top padding of its
   own — .screen-sticky-header (see below) supplies that inset itself, so it
   can sit flush at scrollTop 0 and still stick cleanly at top:0 once the
   user scrolls past it. */
.screen-body {
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Sticky per-panel title/tabs/filters (see TeamMenu.js/BagMenu.js/
   HuntMenu.js/ShopMenu.js/SettingsScreen.js) — pinned to the top of
   #screen-body as it scrolls, with a solid background so list content
   doesn't show through underneath it. */
.screen-sticky-header {
  position: sticky;
  top: 0;
  padding-top: 10px;
  z-index: 2;
  background: var(--color-panel);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.start-screen {
  inset: 16px;
}

/* Compact variant applied to every remaining .screen (see
   UIManager.js#_renderScreen) — centered card instead of near-fullscreen, so
   the battlefield stays visible around the edges. */
.screen.compact {
  inset: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(480px, calc(100vw - 32px));
  max-height: min(78vh, 640px);
}

button.confirm-danger {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-panel-border);
  border-radius: var(--radius-card);
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}

.card .card-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.card .card-title {
  font-weight: 700;
  color: var(--color-text);
}

.card-sub {
  color: var(--color-text-dim);
  font-size: 11px;
}

.card .col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.card .swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  /* Base neutral ring — overridden per-POKE to its rarity color via inline
     style (see swatchHtml.js), so every icon reads its owner's rarity. */
  border: 2px solid var(--color-panel-border);
  flex-shrink: 0;
}

.card .item-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.card .card-sprite {
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
  flex-shrink: 0;
}

.qty-control {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.qty-control .qty-slider {
  width: 70px;
}

.qty-control .qty-input {
  width: 46px;
  font-family: inherit;
  font-size: 11px;
  background: rgba(0, 0, 0, 0.35);
  color: var(--color-text);
  border: 1px solid var(--color-panel-border);
  border-radius: var(--radius-btn);
  padding: 3px 5px;
}

.evolve-tag {
  color: var(--color-accent-text);
  font-weight: 700;
  background: var(--color-accent);
  border: none;
  border-radius: var(--radius-pill);
  box-shadow: none;
  padding: 2px 8px;
  font-size: 10px;
  font-family: inherit;
  cursor: pointer;
}

.evolve-tag:hover {
  background: #ffc04d;
}

.shiny-tag {
  color: #ffd700;
  font-weight: bold;
}

.shiny-name {
  color: #b366ff;
}

.swatch-wrap {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.poke-hover {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  cursor: help;
}

.poke-hover:hover .tooltip,
.poke-hover:focus .tooltip {
  visibility: visible;
  opacity: 1;
}

.shiny-badge {
  position: absolute;
  top: -4px;
  left: -4px;
  font-size: 12px;
  line-height: 1;
  text-shadow: 0 0 2px #000, 0 0 2px #000;
}

.grid-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Shop's Itens tab: sell column sits to the right of buy (explicit user
   request) instead of stacked underneath it. Each column's own cards
   (.card) keep their normal row layout — they just wrap onto more lines at
   this width, which is fine at the compact screen's size. */
.shop-columns {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.shop-column {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shop-column .card {
  flex-wrap: wrap;
}

/* Reserves the same width as .sell-select-box on shiny cards (which have no
   checkbox — see ShopMenu.js#renderPokemonsTab) so the swatch/name/button
   columns stay aligned across the whole list. */
.checkbox-spacer {
  width: 14px;
  flex-shrink: 0;
}

.lock-btn {
  padding: 6px 8px;
  flex-shrink: 0;
}

.row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.stat-row {
  justify-content: space-between;
  width: 100%;
  color: var(--color-text-dim);
}

.stat-row span:last-child {
  color: var(--color-text);
  font-weight: 600;
}

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-panel-border);
  border-radius: var(--radius-card);
  padding: 10px 12px;
  font-size: 12px;
}

.switch {
  position: relative;
  width: 40px;
  height: 22px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--color-panel-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  flex-shrink: 0;
}

.switch.on {
  border-color: var(--color-success);
  background: rgba(62, 207, 110, 0.25);
}

.switch .knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-text-dim);
  transition: left 0.15s ease, background 0.15s ease;
}

.switch.on .knob {
  left: 20px;
  background: var(--color-success);
}

.hint {
  font-size: 10px;
  color: var(--color-text-dim);
}

.dialogue-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-panel-border);
  border-radius: var(--radius-card);
  padding: 12px;
  font-size: 12px;
  line-height: 1.5;
}

/* ---------- Info tooltip ("?") ---------- */
.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  font-size: 10px;
  cursor: help;
  position: relative;
  margin-left: 6px;
  flex-shrink: 0;
}

.info-icon .tooltip,
.poke-hover .tooltip {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10, 11, 16, 0.97);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-card);
  color: var(--color-text);
  padding: 8px 10px;
  font-size: 10px;
  line-height: 1.4;
  width: 190px;
  z-index: 50;
  transition: opacity 0.15s ease;
  text-align: left;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}

.info-icon:hover .tooltip,
.info-icon:focus .tooltip {
  visibility: visible;
  opacity: 1;
}

.tooltip.hunt-tooltip, .tooltip.poke-tooltip {
  width: 230px;
  /* These run taller than the generic "?" tooltip — anchoring above the icon
     (the .info-icon default) can push their top past a scrolled-to-top
     list's y=0, where there's no negative scroll to reveal it. Growing
     downward instead stays inside the scrollable area. */
  top: 130%;
  bottom: auto;
}

.tooltip.poke-tooltip {
  /* swatchHtml's icon is the first thing in a card, hugging the panel's left
     edge — centering (the .info-icon default) pushes half the tooltip past
     x=0. Growing rightward from the icon instead keeps it on screen. */
  left: 0;
  transform: none;
}

.hunt-tooltip-title {
  color: var(--color-accent);
  font-weight: bold;
  margin: 6px 0 2px 0;
}

.hunt-tooltip-title:first-child {
  margin-top: 0;
}

.hunt-tooltip-row {
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.hunt-row-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}

.hunt-detail {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.hunt-detail .hunt-tooltip-row {
  white-space: normal;
}

.type-chip {
  display: inline-block;
  padding: 2px 7px;
  color: #000;
  font-size: 8px;
  font-weight: 700;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

/* Rarity badge (COMUM/INCOMUM/RARO/ULTRA/LEGENDARY/MYTHIC) — outlined rather
   than filled like .type-chip, since it sits right next to the shiny star
   and the name in most rows and a solid block of color there would be too
   loud (see pokeNameTagHtml in swatchHtml.js). Color/border set inline per
   rarity. */
.rarity-tag {
  display: inline-block;
  padding: 1px 6px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.3px;
  border: 1px solid;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
}

#hunt-search {
  width: 100%;
  margin-bottom: 4px;
}

.card.hunt-match {
  border-color: var(--color-accent);
  background: rgba(245, 166, 35, 0.1);
}

/* ---------- Bottom-left perf stats panel ---------- */
#bottom-left-stack {
  position: absolute;
  left: 8px;
  bottom: 54px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  z-index: 35; /* same reasoning as #bottom-nav above */
}

/* 2x the size of a regular button — explicit user request to make the Auto
   toggle stand out more next to the perf-stats panel below it. */
#auto-toggle-btn {
  font-size: 20px;
  padding: 10px 20px;
}

.perf-stats {
  width: 130px;
  padding: 8px 10px;
  font-size: 10px;
}

.perf-stats .stat-row {
  padding: 1px 0;
}

.perf-reset-btn {
  width: 100%;
  margin-top: 4px;
  padding: 3px 0;
  font-size: 9px;
  border-radius: var(--radius-pill);
}

/* ---------- Bottom-right collapsible chat/log window ---------- */
.chat-log {
  position: absolute;
  right: 8px;
  bottom: 54px;
  width: 240px;
  z-index: 10;
  font-size: 11px;
}

.chat-log-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border-bottom: 1px solid var(--color-panel-border);
}

.chat-log-header .tabs {
  flex: 1;
}

.chat-log-header button {
  padding: 3px 6px;
  font-size: 10px;
}

#chat-collapse-btn {
  flex-shrink: 0;
  width: 22px;
  border-radius: 50%;
}

.chat-log-lines {
  max-height: 110px;
  overflow-y: auto;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ---------- Screen transition (fade-in on hunt/Hospital change) ---------- */
/* Sits transparent at rest. main.js snaps it to opaque black (transition
   disabled) right before swapping the world, then re-enables the transition
   and drops opacity back to 0 a frame later — see triggerScreenTransition in
   main.js — so the new hunt is revealed by a fade instead of an instant cut. */
#screen-transition {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 50;
}

.chat-line {
  font-size: 10px;
  line-height: 1.4;
  color: var(--color-text);
}

.chat-line.levelup { color: var(--color-accent); }
.chat-line.success, .chat-line.gold, .chat-line.capture-success { color: var(--color-success); }
.chat-line.error, .chat-line.capture-fail { color: var(--color-danger); }

/* ---------- Auto-Revive countdown modal ---------- */
.revive-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 16px 22px;
  text-align: center;
  z-index: 15;
  display: none;
}

.revive-modal.visible {
  display: block;
}

.revive-modal .revive-modal-title {
  color: var(--color-danger);
  font-size: 12px;
  margin-bottom: 6px;
}

.revive-modal .revive-modal-count {
  font-size: 22px;
  color: var(--color-accent);
  font-weight: 700;
}

/* ---------- BOSS-hunt defeat warning (no auto-pot/auto-revive there) ---------- */
.boss-defeat-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px 26px;
  text-align: center;
  z-index: 16;
  display: none;
  border: 2px solid var(--color-danger);
  box-shadow: 0 0 24px rgba(214, 40, 40, 0.5);
}

.boss-defeat-modal.visible {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.boss-defeat-modal .boss-defeat-title {
  color: var(--color-danger);
  font-size: 16px;
  font-weight: 700;
}

.boss-defeat-modal .boss-defeat-btn {
  background: var(--color-danger);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 16px;
  font-weight: 700;
  cursor: pointer;
}

/* ---------- Confirm modal (shiny sell guard) ---------- */
.confirm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.confirm-modal {
  width: 260px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.confirm-modal-title {
  font-size: 13px;
  color: var(--color-accent);
  font-weight: bold;
}

.confirm-modal-msg {
  font-size: 12px;
  line-height: 1.5;
}

/* Compact floating "Auto" panel (see ui/panels/autoFloatingPanel.js) — opens
   beside the bottom-left stat stack instead of a full-screen .screen, so the
   battlefield stays visible while automation toggles are open. */
.auto-floating-panel {
  position: fixed;
  left: 150px;
  bottom: 54px;
  width: 280px;
  max-height: 65vh;
  padding: 14px;
  z-index: 95;
  display: flex;
  flex-direction: column;
}

/* Non-scrolling — also the drag handle (see ui/draggable.js). Close button
   always stays put instead of scrolling away with .auto-floating-body. */
.auto-floating-topbar {
  display: flex;
  justify-content: flex-end;
  flex: 0 0 auto;
  cursor: move;
}

.auto-floating-panel .close-btn {
  border-radius: 50%;
  width: 24px;
  height: 24px;
  padding: 0;
}

.auto-floating-body {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
}

/* ---------- LVL UP! splash (POKE evolution / Trainer level-up) ---------- */
/* No real pixel-art asset for this yet — the "pixel art" look is faked with
   a chunky monospace font plus stepped text-shadow layers standing in for a
   pixelated outline (see levelUpSplash.js). Sits above every other overlay
   (confirm modals included) since it's a celebratory, self-dismissing
   interrupt, not a UI a player interacts with. */
.level-up-splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: level-up-splash-fade 2s ease-out forwards;
}

.level-up-splash-text {
  font-family: 'Courier New', monospace;
  font-weight: 900;
  font-size: clamp(40px, 9vw, 88px);
  letter-spacing: 4px;
  color: #ffd23f;
  -webkit-text-stroke: 3px #1a1200;
  text-shadow:
    3px 3px 0 #1a1200,
    -3px 3px 0 #1a1200,
    3px -3px 0 #1a1200,
    -3px -3px 0 #1a1200,
    6px 6px 0 rgba(0, 0, 0, 0.35),
    0 0 24px rgba(255, 210, 63, 0.6);
  animation: level-up-splash-pop 2s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}

@keyframes level-up-splash-pop {
  0% { transform: scale(0.3); opacity: 0; }
  15% { transform: scale(1.15); opacity: 1; }
  25% { transform: scale(1); opacity: 1; }
  75% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.05); opacity: 0; }
}

@keyframes level-up-splash-fade {
  0% { background: rgba(0, 0, 0, 0); }
  15% { background: rgba(0, 0, 0, 0.35); }
  75% { background: rgba(0, 0, 0, 0.35); }
  100% { background: rgba(0, 0, 0, 0); }
}

/* ---------- POKE profile modal (Status/Golpes) ---------- */
.poke-profile-modal {
  position: relative;
  width: min(380px, 92vw);
  max-height: 85vh;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Animated gen5 sprite + name/types/HP/EXP — the dominant visual element,
   shared by both tabs (built once, see PokeProfileModal.js). */
.profile-hero {
  display: flex;
  gap: 12px;
  align-items: center;
}

.profile-sprite-box {
  width: 132px;
  height: 132px;
  flex-shrink: 0;
  border-radius: var(--radius-card);
  /* Rarity-colored ring — border-color overridden inline per-POKE, see
     buildProfileHero in PokeStatDetail.js. */
  border: 2px solid var(--color-panel-border);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 72%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.profile-sprite {
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
}

.profile-hero-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.profile-name-row {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-level {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-dim);
}

.profile-types {
  display: flex;
  gap: 4px;
}

.profile-bar-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  color: var(--color-text-dim);
}

.profile-bar-row .bar-track {
  width: auto;
  flex: 1;
}

.profile-bar-label {
  width: 22px;
  flex-shrink: 0;
  text-transform: uppercase;
  font-weight: 700;
}

.profile-bar-value {
  flex-shrink: 0;
  font-size: 10px;
}

.profile-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.mini-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-panel-border);
  border-radius: var(--radius-btn);
  padding: 6px 4px;
}

.mini-stat span {
  font-size: 9px;
  color: var(--color-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.mini-stat b {
  font-size: 14px;
  color: var(--color-text);
}

.profile-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
}

.iv-chip {
  font-size: 9px;
  color: var(--color-text-dim);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--color-panel-border);
  border-radius: var(--radius-pill);
  padding: 2px 7px;
}

.iv-chip b {
  color: var(--color-text);
  font-weight: 700;
}

.stat-detail .card-sub {
  margin-top: 8px;
}

.moveset-table {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
}

.moveset-row {
  display: grid;
  grid-template-columns: 24px 1fr 40px 56px 40px 32px;
  gap: 6px;
  align-items: center;
  padding: 4px 6px;
  border-radius: var(--radius-btn);
  color: var(--color-text-dim);
}

.moveset-row.moveset-header {
  color: var(--color-text-dim);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.03em;
}

.moveset-row.learned {
  background: rgba(255, 255, 255, 0.05);
  color: var(--color-text);
  font-weight: 600;
}

/* ---------- Farm Offline report modal ---------- */
.offline-farm-modal {
  width: min(360px, 90vw);
  max-height: 85vh;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.offline-farm-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.offline-captures-list {
  max-height: 160px;
  overflow-y: auto;
  gap: 6px;
}

.offline-capture-card {
  padding: 6px 8px;
}

.offline-capture-card .card-sprite {
  width: 36px;
  height: 36px;
}

.offline-item-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.offline-item-row {
  font-size: 11px;
  color: var(--color-text-dim);
}

.offline-item-row .item-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}