/* A dark-fantasy-tabletop palette (warm near-blacks, bronze/gold trim, a
   parchment off-white for text) crossed with the Pokédex's own signature
   fire-red, instead of the cool neutral grays this started as -- see
   --gold/--gold-dim below, the ::before corner brackets on .card, and the
   Cinzel display font used for headings/nav/buttons throughout this file. */
:root {
  --bg: #ddc79e;
  --panel: #efe2c2;
  --panel-alt: #e6d5ab;
  --border: #b39962;
  --text: #2a2116;
  --text-dim: #5c4a30;
  --accent: #b3301a;
  --accent-dim: #f0d3c4;
  --accent-2: #3d6fa8;
  --gold: #9c7a2e;
  --gold-dim: #e4d5ab;
  --good: #3f7d3a;
  --warn: #b06a1e;
  --bad: #a5291c;
  --radius: 8px;
  --sidenav-w: 226px;
  --topbar-h: 58px;
  --font-display: "Cinzel", Georgia, "Segoe UI", serif;
  --font-body: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Battle text box only (see .battle-textbox) -- a blocky pixel font in
     the spirit of the in-game Pokémon text box, not a rip of the actual
     (unlicensed) game font. */
  --font-pixel: "Silkscreen", "Press Start 2P", monospace;
  font-family: var(--font-body);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14100a;
    --panel: #1e170f;
    --panel-alt: #261e13;
    --border: #4a3a22;
    --text: #ece2cc;
    --text-dim: #a8987a;
    --accent: #e2461f;
    --accent-dim: #3d2015;
    --accent-2: #6fa2e0;
    --gold: #c9a24a;
    --gold-dim: #453a20;
  }
}
:root[data-theme="dark"] {
  --bg: #14100a;
  --panel: #1e170f;
  --panel-alt: #261e13;
  --border: #4a3a22;
  --text: #ece2cc;
  --text-dim: #a8987a;
  --accent: #e2461f;
  --accent-dim: #3d2015;
  --accent-2: #6fa2e0;
  --gold: #c9a24a;
  --gold-dim: #453a20;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

/* Scrollbars -- thin and theme-matched instead of the OS default, on
   every scrollable element (the side nav, tables, panels, ...). Firefox
   gets the standard properties; WebView2 (Chromium) and WKWebView (Mac)
   both support the older ::-webkit-scrollbar pseudo-elements, which is
   what actually renders in the desktop app either way. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background-color: var(--border); border-radius: 999px;
  border: 2px solid transparent; background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--text-dim); }
*::-webkit-scrollbar-corner { background: transparent; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-size: 22px;
  line-height: 1.5;
  /* A faint vignette instead of a flat fill -- there's no texture image
     bundled with the app, so this is the whole "worn parchment / dim
     tavern lighting" effect: pure CSS, no extra asset to ship. */
  background-image: radial-gradient(ellipse at 50% -10%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 60%);
}

#app {
  display: grid;
  grid-template-columns: var(--sidenav-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas: "top top" "nav main";
  height: 100vh;
}
/* Campaign-select screen (js/views/campaignSelect.js) -- shown before the
   sidebar/nav mean anything, since every page needs a campaign selected
   first. */
#app.gate-mode {
  grid-template-columns: 1fr;
  grid-template-areas: "top" "main";
}
#app.gate-mode .sidenav, #app.gate-mode .nav-toggle, #app.gate-mode .lan-hint { display: none; }

.topbar {
  grid-area: top;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  background: var(--panel);
  border-bottom: 2px solid var(--gold-dim);
  position: relative;
  z-index: 5;
}
.brand { font-weight: 700; display: flex; align-items: center; gap: 10px; }
.brand-logo { height: 34px; width: auto; display: block; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--gold) 45%, transparent)); }
.brand-text {
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  letter-spacing: .03em; white-space: nowrap; color: var(--text);
}
@media (max-width: 480px) { .brand-text { display: none; } }
.lan-hint { margin-left: auto; font-size: 16.5px; color: var(--text-dim); text-align: right; }
.nav-toggle {
  display: none;
  background: none; border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font-size: 24.5px; padding: 5px 11px; cursor: pointer;
}

.sidenav {
  grid-area: nav;
  background: var(--panel);
  border-right: 2px solid var(--gold-dim);
  padding: 14px 11px;
  overflow-y: auto;
}
.nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: 1px solid transparent; color: var(--text);
  padding: 13px 15px; margin: 2px 0; border-radius: 7px;
  font-family: var(--font-display); font-size: 18.5px; font-weight: 600;
  letter-spacing: .015em; cursor: pointer;
}
.nav-item:hover { background: var(--panel-alt); border-color: var(--gold-dim); }
.nav-item.active {
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000));
  border-color: var(--gold); color: #fff; box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 40%, transparent);
}
.nav-icon { width: 28px; height: 28px; flex-shrink: 0; object-fit: contain; image-rendering: pixelated; }
.nav-icon svg { width: 100%; height: 100%; display: block; }
.nav-sep {
  font-family: var(--font-display); font-size: 15px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--gold); margin: 16px 12px 7px; padding-bottom: 4px;
  border-bottom: 1px solid var(--gold-dim);
}
.nav-item.nav-hidden, .nav-sep.nav-hidden { display: none; }

.main {
  grid-area: main;
  overflow-y: auto;
  padding: 22px 26px 60px;
}

.loading { color: var(--text-dim); padding: 40px; text-align: center; }

h1.view-title {
  margin: 0 0 5px; font-size: 34.5px; font-family: var(--font-display); font-weight: 700;
  letter-spacing: .015em; color: var(--text);
}
.view-sub { color: var(--text-dim); margin: 0 0 20px; font-size: 18.5px; }

h4 { font-family: var(--font-display); letter-spacing: .01em; }

/* Small gold corner brackets on every card -- like an inventory-slot frame
   -- instead of a plain flat-bordered box. Pure CSS (two tiny gradient
   pseudo-elements), no image asset needed. */
.card {
  position: relative;
  background: linear-gradient(160deg, var(--panel), color-mix(in srgb, var(--panel) 92%, var(--gold) 8%));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.card::before, .card::after {
  content: ""; position: absolute; width: 16px; height: 16px; pointer-events: none; opacity: .8;
}
.card::before {
  top: -1px; left: -1px; border-top: 2px solid var(--gold); border-left: 2px solid var(--gold);
  border-radius: var(--radius) 0 0 0;
}
.card::after {
  bottom: -1px; right: -1px; border-bottom: 2px solid var(--gold); border-right: 2px solid var(--gold);
  border-radius: 0 0 var(--radius) 0;
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
/* Grid items default to a content-based min-width (not 0), so a wide
   nowrap table sitting inside one (Pokédex/Move Dex's list column) can
   force the whole grid -- and everything above it up to the page -- wider
   than the viewport. Zeroing it lets .table-wrap's own overflow:auto
   scroll internally instead, the same way it already behaves outside a
   grid (e.g. Type Chart, which has never had this problem). */
.grid-2 > *, .grid-3 > * { min-width: 0; }
@media (max-width: 900px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

label.field { display: block; margin-bottom: 13px; font-size: 18px; color: var(--text-dim); }
label.field > span { display: block; margin-bottom: 4px; }
input, select {
  width: 100%; padding: 13px 15px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text);
  font-size: 20px; font-family: var(--font-body);
}
input:focus, select:focus { outline: 2px solid var(--accent-2); outline-offset: 1px; }

button.btn {
  background: linear-gradient(160deg, color-mix(in srgb, var(--accent), #fff 18%), var(--accent));
  color: #fff; border: 1px solid color-mix(in srgb, var(--accent) 60%, #000);
  border-radius: 7px; padding: 14px 22px; font-size: 19.5px; font-weight: 600; cursor: pointer;
  font-family: var(--font-display); letter-spacing: .01em;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--gold) 50%, transparent) inset;
}
button.btn:hover { border-color: var(--gold); }
button.btn.secondary {
  background: var(--panel-alt); color: var(--text); border: 1px solid var(--border);
  box-shadow: none;
}
button.btn.secondary:hover { border-color: var(--gold); }
button.btn:active { transform: translateY(1px); }
button.btn:disabled { opacity: .45; cursor: not-allowed; }

table.data-table { width: 100%; border-collapse: collapse; font-size: 18.5px; }
table.data-table th, table.data-table td {
  text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
table.data-table th {
  color: var(--gold); font-weight: 700; position: sticky; top: 0; background: var(--panel);
  font-family: var(--font-display); font-size: 16px; text-transform: uppercase; letter-spacing: .06em;
}
table.data-table tr:hover td { background: var(--panel-alt); }
table.data-table tr.hi td { background: var(--accent-dim); font-weight: 700; }
.table-wrap { overflow: auto; max-height: 65vh; border: 1px solid var(--border); border-radius: var(--radius); }

.combo { position: relative; }
.combo-list {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 260px; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  display: none;
}
.combo-list.open { display: block; }
.combo-opt { padding: 8px 11px; cursor: pointer; font-size: 19.5px; }
.combo-opt:hover, .combo-opt.hi { background: var(--accent); color: #fff; }

.trainer-sprite-picker { display: flex; align-items: center; gap: 12px; }
.trainer-sprite-preview {
  width: 108px; height: 108px; object-fit: contain; image-rendering: pixelated;
  background: var(--panel-alt); border: 1px solid var(--border); border-radius: 8px; padding: 4px; flex-shrink: 0;
}
.trainer-sprite-picker-controls { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; flex-wrap: wrap; }
.trainer-sprite-name { font-size: 17px; color: var(--text-dim); text-transform: capitalize; margin-right: auto; }
.trainer-portrait-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.trainer-portrait-item img { width: 120px; height: 120px; }
.trainer-portrait-item.selected { border-color: var(--good); box-shadow: 0 0 0 2px var(--good); }

.type-pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 16px; font-weight: 700; color: #fff; text-transform: uppercase;
  letter-spacing: .03em; margin-right: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.stat-bars .row { display: grid; grid-template-columns: 78px 1fr 44px; align-items: center; gap: 9px; margin: 5px 0; font-size: 18px; }
.stat-bars .bar-bg { background: var(--panel-alt); border-radius: 5px; height: 11px; overflow: hidden; border: 1px solid var(--border); }
.stat-bars .bar-fill { height: 100%; background: linear-gradient(90deg, var(--accent-2), color-mix(in srgb, var(--accent-2) 70%, var(--gold))); }
.team-stats-block { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--border); }

.result-banner {
  font-family: var(--font-display); font-size: 28px; font-weight: 700; text-align: center; padding: 17px;
  border-radius: var(--radius); margin: 11px 0; border: 1px solid transparent;
}
.result-banner.good { background: color-mix(in srgb, var(--good) 15%, transparent); color: var(--good); border-color: color-mix(in srgb, var(--good) 35%, transparent); }
.result-banner.bad { background: color-mix(in srgb, var(--bad) 15%, transparent); color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.result-banner.neutral { background: var(--panel-alt); color: var(--text); border-color: var(--border); }

/* Ability score rows -- modeled on Baldur's Gate 3's character creation
   screen: a name, a score, two single-checkbox "assign bonus" columns
   (+2 / +1), and the resulting modifier, all in one aligned grid so the
   bonus columns actually line up under their header like BG3's do. */
.ability-grid {
  display: grid; grid-template-columns: 1fr 90px 60px 60px 90px;
  align-items: center; gap: 8px 14px;
}
.ability-grid-header {
  padding: 0 4px 8px; font-family: var(--font-display); font-size: 13px;
  text-transform: uppercase; letter-spacing: .08em; color: var(--gold); text-align: center;
}
.ability-grid-header span:first-child, .ability-grid-header span:nth-child(2) { text-align: left; }
.ability-bonus-head { font-size: 12px; }
.ability-row-wrap {
  background: var(--panel-alt); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 10px;
}
.ability-name { font-weight: 700; font-family: var(--font-display); }
.ability-bonus-cell {
  display: flex; justify-content: center; align-items: center; cursor: pointer;
}
.ability-bonus-cell input[type="checkbox"] {
  width: 22px; height: 22px; padding: 0; accent-color: var(--gold); cursor: pointer;
}
.ability-mod-badge { padding: 6px 14px !important; font-size: 17px !important; margin: 0 !important; text-align: center; }
.ability-row-foot { display: flex; align-items: center; gap: 12px; margin-top: 10px; }

.kv-table { width: 100%; border-collapse: collapse; font-size: 18.5px; }
.kv-table td { padding: 6px 9px; border-bottom: 1px solid var(--border); }
.kv-table td:first-child { color: var(--gold); width: 45%; font-weight: 600; }

.tc-table { border-collapse: collapse; font-size: 16.5px; }
.tc-table th, .tc-table td { border: 1px solid var(--border); padding: 5px 7px; text-align: center; min-width: 36px; }
.tc-table th { background: var(--panel-alt); position: sticky; top: 0; }
.tc-table th:first-child, .tc-table td:first-child { position: sticky; left: 0; background: var(--panel-alt); text-align: left; }
.tc-0 { background: #3b0a0a; color: #ff9b9b; }
.tc-0\.5 { background: rgba(201,42,42,.12); }
.tc-1 { color: var(--text-dim); }
.tc-2 { background: rgba(47,158,68,.18); font-weight: 700; }
.tc-4 { background: rgba(47,158,68,.35); font-weight: 800; }
.tc-0\.25 { background: #3b0a0a; color: #ff9b9b; }

.pill-btn {
  display: inline-block; padding: 6px 13px; margin: 3px 4px 3px 0; border-radius: 999px;
  border: 1px solid var(--border); background: var(--panel-alt); color: var(--text);
  font-family: var(--font-display); font-size: 17px; cursor: pointer;
}
.pill-btn.active { background: var(--accent); color: #fff; border-color: var(--gold); }

.detail-header { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
.detail-header .name { font-family: var(--font-display); font-size: 33.5px; font-weight: 700; }
.detail-header .dex { color: var(--gold); font-weight: 700; }
.dex-sprite { width: 108px; height: 108px; object-fit: contain; image-rendering: pixelated; }
.dex-row-sprite { width: 46px; height: 46px; object-fit: contain; image-rendering: pixelated; display: block; }

.moveset-group h4 { margin: 17px 0 7px; font-size: 17px; text-transform: uppercase; letter-spacing: .06em; color: var(--gold); }
.moveset-chip { display: inline-block; padding: 5px 10px; margin: 2px 3px 2px 0; border-radius: 6px; background: var(--panel-alt); font-size: 17px; border: 1px solid var(--border); cursor: pointer; }
.moveset-chip .lvl { color: var(--text-dim); margin-right: 5px; font-weight: 700; }
.moveset-chip.stub { opacity: .55; font-style: italic; }
.moveset-chip.clickable:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.moveset-chip.clickable:hover .lvl { color: rgba(255,255,255,.8); }

.formula-note { font-size: 17px; color: var(--text-dim); background: var(--panel-alt); border-radius: 8px; padding: 9px 11px; margin-top: 11px; border-left: 3px solid var(--gold); }

/* Evolution box (Pokédex detail panel) -- a small "family tree" strip:
   pre-evolution, current species (highlighted), evolutions, each clickable
   to jump straight to that entry. */
.evo-chain { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 6px; }
.evo-node {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel-alt);
  cursor: pointer; min-width: 76px; text-align: center;
}
.evo-node:hover { border-color: var(--gold); }
.evo-node.current { border-color: var(--accent); background: var(--accent-dim); cursor: default; }
.evo-node img { width: 44px; height: 44px; object-fit: contain; image-rendering: pixelated; }
.evo-node .evo-name { font-size: 15.5px; font-weight: 600; }
.evo-node .evo-method { font-size: 14px; color: var(--text-dim); }
.evo-arrow { color: var(--gold); font-size: 23px; }

/* ---------------- Battle view ---------------- */

/* Positioning context for the text box overlaying the bottom of the scene
   (see .battle-textbox) -- js/views/battleview.js wraps sceneEl+dialogEl
   in this instead of stacking them as separate blocks. */
.battle-stage { position: relative; }

.battle-scene {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 320px;
  padding: 18px;
  /* Extra clearance at the bottom so the overlaid text box (roughly
     140px tall) never covers the ally row's sprite/HUD. */
  padding-bottom: 152px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  background:
    linear-gradient(to bottom, #8fb8d8 0%, #bcd8ea 45%, #cfe8b8 45%, #a9d488 100%);
  border: 1px solid var(--border);
  /* A DM-picked background (js/views/battleview.js sets background-image
     inline) is small pixel art stretched to fill the scene — nearest-
     neighbor scaling keeps it crisp instead of the browser's default
     blurry bilinear smoothing. */
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .battle-scene {
    background: linear-gradient(to bottom, #2c3f57 0%, #3d5878 45%, #33472f 45%, #2a3d24 100%);
  }
}
:root[data-theme="dark"] .battle-scene {
  background: linear-gradient(to bottom, #2c3f57 0%, #3d5878 45%, #33472f 45%, #2a3d24 100%);
}

.battle-enemies { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; gap: 10px 16px; }
.battle-allies { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-end; gap: 10px 16px; margin-top: auto; }

.battle-combatant-slot { display: flex; flex-direction: column; align-items: center; gap: 2px; transition: opacity .2s ease; }
.battle-combatant-slot.fainted { opacity: .4; }
.battle-combatant-slot.selectable { cursor: pointer; }
.battle-combatant-slot.selectable .battle-platform::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%;
  border: 3px dashed var(--accent-2); animation: battle-target-pulse 1.1s ease-in-out infinite;
}
.battle-combatant-slot.selected .battle-platform::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%;
  border: 3px solid var(--good); animation: none;
}
@keyframes battle-target-pulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.battle-combatant-slot.active-turn { filter: drop-shadow(0 0 7px var(--good)); }
.battle-combatant-slot.mine .battle-hud { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim); }
.enemy-hud { min-width: 130px; padding: 6px 10px; }

.battle-platform {
  width: 130px; height: 130px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  flex-shrink: 0;
}
.battle-platform::before {
  content: ""; position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  width: 100px; height: 28px; border-radius: 50%;
  background: rgba(0,0,0,.18);
}
.battle-sprite {
  position: relative; z-index: 1;
  width: 110px; height: 110px; object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 4px rgba(0,0,0,.25));
}

.battle-hud {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  min-width: 190px;
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
}
.battle-hud-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.battle-name { font-weight: 700; font-size: 18.5px; }
.battle-level { color: var(--text-dim); font-size: 16px; }
.battle-hpbar-bg { background: var(--panel-alt); border-radius: 5px; height: 9px; overflow: hidden; border: 1px solid var(--border); }
.battle-hpbar-fill { height: 100%; transition: width .4s ease; }
.battle-hpbar-fill.good { background: #2f9e44; }
.battle-hpbar-fill.warn { background: #e8b800; }
.battle-hpbar-fill.bad { background: #c92a2a; }
.battle-hp-numbers { text-align: right; font-size: 15px; color: var(--text-dim); margin-top: 3px; }
.battle-status { display: inline-block; margin-top: 5px; padding: 1px 7px; border-radius: 999px; background: var(--accent-dim); color: var(--accent); font-size: 14px; font-weight: 700; text-transform: uppercase; }
.battle-opp-switch { margin: 4px 0; font-size: 15.5px; padding: 3px 6px; }

/* The classic Pokémon dialogue box -- overlaid on the bottom of the scene
   (see .battle-stage/.battle-scene's padding-bottom above), always the
   same light "paper" look regardless of the app's own dark/light theme
   (the real games' text box doesn't reskin for that either), double-
   bordered like the games' own, and set in a pixel font that's ONLY used
   in here -- var(--font-pixel), never applied to the rest of the UI. */
.battle-textbox {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  background: #fefaf0;
  color: #202020;
  border: 3px solid #24242e;
  border-radius: 10px;
  outline: 2px solid #24242e;
  outline-offset: 4px;
  padding: 14px 18px;
  min-height: 110px;
  box-shadow: 0 10px 26px rgba(0,0,0,.4);
  font-family: var(--font-pixel);
  z-index: 2;
}
.battle-prompt { font-weight: 700; margin-bottom: 12px; line-height: 1.5; }
.battle-message { font-weight: 700; text-align: center; padding: 20px 0; line-height: 1.5; color: #1a1a1a; }

.battle-menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.battle-menu-grid.moves { grid-template-columns: 1fr 1fr; margin-bottom: 10px; }
.battle-menu-btn {
  border: none; border-radius: 8px; padding: 12px; font-weight: 700; font-size: 15px;
  cursor: pointer; color: #fff; letter-spacing: .02em; font-family: var(--font-pixel);
}
.battle-menu-btn:active { transform: translateY(1px); }
.battle-menu-btn.fight { background: #e3350d; }
.battle-menu-btn.bag { background: #e8940c; }
.battle-menu-btn.pokemon { background: #2f9e44; }
.battle-menu-btn.run { background: #2f6fed; }
.battle-menu-btn.move { background: var(--accent-2); }
.battle-back { margin-top: 4px; }

.battle-party-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.battle-party-btn { text-align: left; font-family: var(--font-pixel) !important; font-size: 14px !important; }

/* ---------------- VS Screen (Battle Control's "vs" phase, Battle screen) ---------------- */

.vs-screen {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; min-height: 320px; padding: 28px 16px; border-radius: var(--radius);
  border: 1px solid var(--border); text-align: center;
  background: linear-gradient(to bottom, #8fb8d8 0%, #bcd8ea 45%, #cfe8b8 45%, #a9d488 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .vs-screen { background: linear-gradient(to bottom, #2c3f57 0%, #3d5878 45%, #33472f 45%, #2a3d24 100%); }
}
:root[data-theme="dark"] .vs-screen { background: linear-gradient(to bottom, #2c3f57 0%, #3d5878 45%, #33472f 45%, #2a3d24 100%); }
.vs-symbol {
  font-size: 2.2em; font-weight: 800; letter-spacing: .08em; color: var(--accent);
  text-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.vs-sides { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; gap: 14px; }
.vs-side { display: flex; flex-wrap: wrap; gap: 10px; flex: 1; }
.vs-side-a { justify-content: flex-start; }
.vs-side-b { justify-content: flex-end; }
.vs-portrait {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; min-width: 150px; box-shadow: 0 4px 10px rgba(0,0,0,.15);
}
.vs-portrait-sprite { width: 130px; height: 130px; object-fit: contain; image-rendering: pixelated; }
.vs-portrait-name { font-weight: 700; font-size: 19px; text-align: center; }
.vs-portrait-trainer { font-size: 16px; color: var(--text-dim); text-align: center; }
@media (max-width: 700px) {
  .vs-sides { flex-direction: column; }
  .vs-side-a, .vs-side-b { justify-content: center; }
}

/* ---------------- Generic modal (level-up move swap, ...) ---------------- */

.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 20px;
}
.modal-box {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; max-width: 420px; width: 100%; box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.modal-slot-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.modal-slot-btn { text-align: left; }

/* ---------------- Turn order strip (Battle screen) ---------------- */

.turn-order-box {
  display: flex; gap: 8px; overflow-x: auto; padding: 8px 10px; margin-bottom: 10px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
}
.turn-order-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  flex-shrink: 0; width: 76px; padding: 4px; border-radius: 8px; opacity: .6;
}
.turn-order-item.active { opacity: 1; background: var(--accent-dim); box-shadow: 0 0 0 2px var(--accent); }
.turn-order-item.mine .turn-order-name { color: var(--accent); font-weight: 700; }
.turn-order-sprite { width: 50px; height: 50px; object-fit: contain; image-rendering: pixelated; }
.turn-order-name { font-size: 13.5px; text-align: center; line-height: 1.2; max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.has-info { cursor: help; }

/* Generic hover/tap info popover (js/infoTooltip.js) -- the Battle screen's
   combatant popover, and the Pokédex/Move Dex/Bag's item descriptions. */
.info-tooltip {
  position: fixed; z-index: 1000; max-width: 280px;
  background: var(--panel); border: 1px solid var(--gold); border-radius: 8px;
  padding: 12px 14px; box-shadow: 0 12px 34px rgba(0,0,0,.5); font-size: 19.5px;
}
.info-tooltip-title { font-family: var(--font-display); font-weight: 700; font-size: 22px; margin-bottom: 5px; color: var(--gold); }
.info-tooltip-row { color: var(--text-dim); margin-top: 3px; line-height: 1.4; }

/* ---------------- Dice roll FX (Battle screen) ---------------- */

.dice-fx-card {
  position: fixed; bottom: 20px; left: 20px; z-index: 950;
  display: flex; align-items: center; gap: 10px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 16px 10px 12px; box-shadow: 0 8px 28px rgba(0,0,0,.35);
  animation: dice-fx-in .2s ease-out;
}
.dice-fx-card.fade-out { animation: dice-fx-out .4s ease-in forwards; }
@keyframes dice-fx-in { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes dice-fx-out { to { transform: translateY(12px); opacity: 0; } }
.dice-fx-die {
  font-size: 33.5px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--panel-alt); border: 2px solid var(--border); flex-shrink: 0;
}
.dice-fx-die.rolling { animation: dice-fx-spin .6s linear infinite; }
@keyframes dice-fx-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.dice-fx-die.hit { border-color: var(--good); color: var(--good); font-size: 23px; font-weight: 800; }
.dice-fx-die.miss { border-color: var(--bad); color: var(--bad); font-size: 23px; font-weight: 800; }
.dice-fx-label { font-weight: 700; font-size: 17px; }
.dice-fx-roll { font-size: 16px; color: var(--text-dim); }

/* ---------------- Bag page ---------------- */

.bag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.bag-item-card {
  position: relative;
  background: var(--panel); border: 2px solid var(--border); border-radius: var(--radius);
  padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
}
.bag-item-rarity-tag {
  position: absolute; top: -8px; right: -6px; font-size: 11.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .03em; color: #fff; padding: 2px 6px; border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.bag-item-icon { width: 68px; height: 68px; object-fit: contain; image-rendering: pixelated; margin-top: 4px; }
.bag-item-name { font-size: 16px; font-weight: 600; line-height: 1.25; }
.bag-item-count { font-size: 15.5px; color: var(--text-dim); }
.bag-item-actions { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; justify-content: center; }
.bag-item-mini-btn { padding: 3px 8px !important; font-size: 15px !important; }

/* ---------------- Icon picker modal ---------------- */
/* Sized off the viewport (not a fixed px cap) so it actually fills most of
   the current window instead of sitting small in the middle of it, with
   much larger icon tiles than the generic modal box defaults to. */

.icon-picker-box { width: min(94vw, 1000px); max-width: none; max-height: 88vh; display: flex; flex-direction: column; }
.icon-picker-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 12px;
  overflow-y: auto; max-height: 68vh; margin: 8px 0 14px; padding: 4px;
}
.icon-picker-item {
  cursor: pointer; border: 1px solid var(--border); border-radius: 10px; background: var(--panel-alt);
  padding: 10px; display: flex; align-items: center; justify-content: center;
}
.icon-picker-item:hover { border-color: var(--accent); background: var(--accent-dim); }
.icon-picker-item img { width: 76px; height: 76px; object-fit: contain; image-rendering: pixelated; }

/* ---------------- Log drawer (Battle screen, My Team) ---------------- */

.log-drawer-toggle {
  position: fixed; top: 50%; right: 0; transform: translateY(-50%);
  z-index: 880; background: var(--panel); color: var(--text-dim);
  border: 1px solid var(--border); border-right: none; border-radius: 8px 0 0 8px;
  padding: 14px 7px; cursor: pointer; box-shadow: -4px 0 12px rgba(0,0,0,.15);
  font-size: 14.5px; font-weight: 800; letter-spacing: .08em;
}
.log-drawer-toggle.open { background: var(--accent); color: #fff; border-color: var(--accent); }
.log-drawer-panel {
  position: fixed; top: 10%; right: 0; bottom: 10%; z-index: 879;
  width: 320px; max-width: calc(100vw - 20px);
  background: var(--panel); border: 1px solid var(--border); border-right: none;
  border-radius: 10px 0 0 10px; box-shadow: -8px 0 28px rgba(0,0,0,.3);
  flex-direction: column; overflow: hidden;
}
.log-drawer-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.log-drawer-tabs { display: flex; gap: 6px; }
.log-drawer-body { flex: 1; overflow-y: auto; padding: 12px 14px; }
.log-drawer-entry { background: var(--panel-alt); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; font-size: 16.5px; }

@media (max-width: 480px) {
  .log-drawer-panel { top: 5%; bottom: 5%; width: calc(100vw - 40px); }
}

/* ---------------- Dice widget ---------------- */

.dice-widget-btn {
  position: fixed; bottom: 20px; right: 84px; width: 54px; height: 54px;
  border-radius: 50%; background: var(--panel); color: var(--text); border: 1px solid var(--border);
  font-size: 33.5px; box-shadow: 0 6px 18px rgba(0,0,0,.3); cursor: pointer; z-index: 900;
}
.dice-widget-btn.open { background: var(--accent); color: #fff; border-color: var(--accent); }
.dice-widget-btn:active { transform: translateY(1px); }
.dice-widget-panel {
  position: fixed; bottom: 84px; right: 84px; z-index: 900;
  grid-template-columns: repeat(3, 1fr); gap: 10px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0,0,0,.35); padding: 14px;
}
.dice-widget-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dice-widget-die {
  width: 56px; height: 56px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--panel-alt); color: var(--text); font-weight: 800; font-size: 19.5px; cursor: pointer;
}
.dice-widget-die:active { transform: translateY(1px); }
.dice-widget-die.rolling { animation: dice-fx-spin .55s linear infinite; background: var(--accent-dim); }
.dice-widget-result { font-size: 19.5px; font-weight: 800; min-height: 18px; color: var(--accent); }

@media (max-width: 480px) {
  .dice-widget-btn { right: 78px; }
  .dice-widget-panel { right: 12px; bottom: 78px; }
}

/* ---------------- Trainer presence toasts ---------------- */

.presence-toast-stack {
  position: fixed; top: calc(var(--topbar-h) + 12px); left: 50%; transform: translateX(-50%);
  z-index: 960; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none;
}
.presence-toast {
  background: var(--panel); border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 18px; font-size: 17px; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.3);
  opacity: 0; transform: translateY(-10px); transition: opacity .25s ease, transform .25s ease;
}
.presence-toast.show { opacity: 1; transform: translateY(0); }
.presence-toast.online { border-color: var(--good); color: var(--good); }
.presence-toast.offline { border-color: var(--text-dim); color: var(--text-dim); }

/* ---------------- Floating Quick Console ---------------- */

.quick-console-btn {
  position: fixed; bottom: 20px; right: 20px; width: 54px; height: 54px;
  border-radius: 50%; background: var(--accent); color: #fff; border: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.3); cursor: pointer; z-index: 900;
  font-size: 15.5px; font-weight: 800; letter-spacing: .04em;
}
.quick-console-btn:active { transform: translateY(1px); }
.quick-console-panel {
  position: fixed; bottom: 84px; right: 20px; width: 320px; max-width: calc(100vw - 32px);
  max-height: 70vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 12px 40px rgba(0,0,0,.35); padding: 14px; z-index: 900;
}
.quick-console-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.quick-console-close { background: none; border: none; font-size: 19.5px; cursor: pointer; color: var(--text-dim); }
.quick-console-tabs { margin-bottom: 10px; }
.quick-console-bag-list { display: flex; flex-direction: column; gap: 6px; }
.quick-console-bag-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 16.5px; background: var(--panel-alt); padding: 6px 9px; border-radius: 6px;
}
.quick-console-mini-btn { padding: 2px 9px !important; font-size: 15.5px !important; }
.quick-console-bag-link { display: block; margin-top: 10px; font-size: 16px; color: var(--accent-2); text-align: right; }

@media (max-width: 480px) {
  /* padding-bottom stays large (not reset by the shorthand above) so the
     overlaid .battle-textbox still clears the ally row at phone width. */
  .battle-scene { min-height: 260px; padding: 12px; padding-bottom: 140px; }
  .battle-textbox { left: 8px; right: 8px; bottom: 8px; padding: 11px 13px; }
  .battle-platform { width: 92px; height: 92px; }
  .battle-sprite { width: 80px; height: 80px; }
  .battle-hud { min-width: 140px; padding: 6px 9px; }
  .battle-menu-btn { padding: 14px 10px; font-size: 13.5px; }
  .enemy-hud { min-width: 100px; }
  .battle-enemies { justify-content: center; }
  .quick-console-panel { right: 12px; bottom: 78px; width: calc(100vw - 24px); }
  .quick-console-btn { right: 14px; bottom: 14px; }
}

@media (max-width: 780px) {
  :root { --sidenav-w: 200px; }
  .nav-toggle { display: inline-block; }
  #app { grid-template-columns: 1fr; }
  .sidenav {
    position: fixed; top: var(--topbar-h); left: 0; bottom: 0; width: var(--sidenav-w);
    transform: translateX(-100%); transition: transform .18s ease; z-index: 15;
  }
  .sidenav.open { transform: translateX(0); box-shadow: 4px 0 18px rgba(0,0,0,.25); }
  .main { padding: 14px 14px 50px; }
  .lan-hint { display: none; }
}

/* Phone-sized touchscreens: bigger tap targets, no accidental iOS zoom,
   tighter spacing so more fits without horizontal scrolling. One size
   step larger across the board than a typical mobile stylesheet, since
   everything here otherwise ends up feeling cramped on an actual phone. */
@media (max-width: 480px) {
  html { -webkit-text-size-adjust: 100%; }
  body { font-size: 16px; }

  h1.view-title { font-size: 21px; }
  .view-sub { font-size: 14px; margin-bottom: 15px; }
  .main { padding: 11px 11px 58px; }
  .card { padding: 14px; margin-bottom: 13px; }

  /* Inputs stay well above 16px regardless, which is what actually stops
     Mobile Safari from auto-zooming the page on focus. */
  input, select {
    font-size: 17px; padding: 12px 13px; min-height: 47px;
  }
  label.field { margin-bottom: 15px; }

  button.btn {
    padding: 13px 19px; font-size: 16px; width: 100%; min-height: 48px;
  }
  button.btn + button.btn { margin-top: 8px; }

  .nav-toggle { min-width: 46px; min-height: 46px; font-size: 21px; }
  .nav-item { padding: 14px 15px; font-size: 16px; min-height: 46px; }

  .combo-opt { padding: 13px 15px; font-size: 16px; min-height: 46px; display: flex; align-items: center; }
  .combo-list { -webkit-overflow-scrolling: touch; max-height: 45vh; }

  table.data-table { font-size: 12.5px; }
  table.data-table th, table.data-table td { padding: 8px 6px; }
  .table-wrap { -webkit-overflow-scrolling: touch; max-height: 55vh; }
  .hide-mobile { display: none; }
  /* These two got noticeably bigger in an earlier "make icons/fields
     bigger" pass, sized for desktop -- fine there, but a 46px sprite plus
     full-size type pills is what was actually forcing Pokédex/Move Dex's
     table wider than a phone screen (Type Chart doesn't use .type-pill or
     row sprites at all, which is why it never had this problem). Pulled
     back down for phone width specifically; desktop is untouched. */
  .dex-row-sprite { width: 26px; height: 26px; }
  .type-pill { font-size: 11px; padding: 2px 7px; margin-right: 3px; }

  .kv-table { font-size: 14px; }
  .kv-table td { padding: 9px; }

  .grid-2, .grid-3 { gap: 11px; }

  .result-banner { font-size: 19px; padding: 15px; }

  .moveset-chip { padding: 8px 12px; font-size: 14px; }
  .pill-btn { padding: 9px 14px; font-size: 14px; }
}

/* ---------------- Settings page ---------------- */

.settings-page-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.settings-page-row:last-child { border-bottom: none; }

.toggle-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.toggle-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-switch .slider {
  position: absolute; inset: 0; background: var(--panel-alt); border: 1px solid var(--border);
  border-radius: 999px; cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.toggle-switch .slider::before {
  content: ""; position: absolute; width: 16px; height: 16px; left: 2px; top: 2px;
  background: var(--text-dim); border-radius: 50%; transition: transform .15s ease, background .15s ease;
}
.toggle-switch input:checked + .slider { background: var(--accent-dim); border-color: var(--accent); }
.toggle-switch input:checked + .slider::before { transform: translateX(18px); background: var(--accent); }
.toggle-switch input:focus-visible + .slider { outline: 2px solid var(--accent-2); outline-offset: 2px; }