/* Pixelify Sans draws "5" exactly like "S" ("50" read as "S0", Alex 2026-10-03). "Pixelify Five" is that one glyph
   redrawn with a flat top in the same pixel grid (OFL, built by tools/fix_five.py) and goes first in --display.
   Small text uses --body (Atkinson Hyperlegible); the pixel font is only for big titles (Alex 2026-10-03). */
@font-face { font-family: "Pixelify Five"; font-weight: 500; font-display: swap; unicode-range: U+0035; src: url(data:font/woff2;base64,d09GMgABAAAAAAJoAA8AAAAABRgAAAIRAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGyAcKgZgP1NUQVQqADQRCAo8VwE2AiQDCAsGAAQgBYQYByAMBxsnBAAehU3ZLRbnSedYJhPBud2i9jlCJefhv/3+t8/c+eLeBJJopGqGSBexhpdgnkVDM1v9Ubn77mfpCO3UXuUOCBUAZm3uc5uRsjN6z58+YVipMQ5YWHvweW/xaLMJbJ8G4OOD8Ahk1IFRohOv2/Y8gaJAs8A4vWH7HYusQajlAvUGVYlNu3tnkJGhLAEaxbSaWF5p9zP7UFEeg5wWoqKK9CKdx8U8Jz5Z1Ec8OJ7jG8KHFWZ2/f9fipsxBgTE677AqLgQagU6CQyK7VGaBSAJiBQVkFCgU1ygU8IokGWBFS/j/8r3AoQoSy0ggYxAJ9ANQAZE5xaRiwYN0Vg0adSkQb0rDTtuIv+mf0vv/4qoW9p2+3l7DQCB4PaK2PlYXv6XKYq/8G3EjAN+/+72rHoldaR9AKolELzFpJcKZmVIICt1xa4ewbJIOomegLF6h8VFrsMDaoR+PSTNPqKwxn8961ClP/2o1ptl2WxlNleCxjgOkq572UaBUIdBFI1Jk8ZNmiCd0ZB0hLQhF6nrkE4981nSESPwDr1i0oYGpgUMS6rRGAtZi8aMUSi+3PBi1KuAZwwidYi1jU2lI10DG5XsIk3oBFIaXM+MCaPG+eklBw4d2LHkoL3bRjB7ARkWCfgkx6SL3iB963nWK4OEmDXKIq5RAUMZc2jXnkv4/9ftQ29IgycOlA8tIv9JlKfu5EsAAA==) format("woff2"); }
@font-face { font-family: "Pixelify Five"; font-weight: 700; font-display: swap; unicode-range: U+0035; src: url(data:font/woff2;base64,d09GMgABAAAAAAJ4AA8AAAAABRQAAAIjAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGyAcKgZgP1NUQVQqADQRCAo8VwE2AiQDCAsGAAQgBYQUByAMBxsjBAAuBuyG+iISXEwK4vXVYWiMzfrpCJWcoFqrsnr6AFETv/p49ZJYsWKHDtloQKGBFZFxe7WmeyHSUZmTAWJFLevAPuF+QbjW+Y6vEmUjSyDdbvt/SQIr8DxK00A8goQDS5vH2DiLMjmL+/V/YX1t/9/bA242ge3SBsDjLcIAR30wSvSJ198e9jueRoEGqIFuir9HUSyZM1S+QLVeGWztus0NRGQoAXgs47J8tNThvWRA2rkOcprPlwbpZV7ApZoSX9T9ExUynuMHwruWVrv3/wfFgxgCAuJ9vsQgvxAqBVox9PKd3CcRgyQgcnoJEgq08gu0ChgEsiwwW/L/6sFAiBIzSCAj0Aq0A5AB0XpFddSoidqiTq06NardmjZueT3Nv/nlx/k0umHrtwAAgaD9vFa3u2Hlq2zFf8CP9cgE4O/74PZ6WvIUUC6B4CwhfXZIozZGojTV59xupJNWrCFEV7VT/CJX4SE9Qrc3JPVeobDGRzH7UKY7ulGuM2ZMvblY7wS1ce4mkVXGFQeT5ZlDJpIQrq6qroa7IUHcBdkTpJEJnnHXDgzunOswKdAJ4WY8RGJyuLgseQticfVVVIhkROI5Kjsx6SqQT0fkSeVVUarLbcRZkz1AV5DIozlw1JRV9e2Bnb2dlQHBs6tKMXgHOVwyk4EjJil+g/Rfr3OdOGQW4ipzyTRlJoeoYm9t4x7e/1NzJs2ZHyjNRvJPo9TdLwM=) format("woff2"); }
/* Battle screen styles, shared by the simulator page and the game (which links its copy).
   A handheld-style battle screen at native GBA resolution (240x160) with GBA-style white menus.
   Single dark look by design. */
:root {
  --ground: #1b1f2e;
  --panel: #262c41;
  --panel-2: #313853;
  --line: #424b6b;
  --ink: #ece9f5;
  --muted: #a3a8c3;
  --player: #5fb0ff;
  --enemy: #ff7468;
  --gold: #f2c14e;
  --good: #7ed98b;
  /* Ability and held-item names get their own colors wherever both appear (playtester idea, Alex 2026-10-04). */
  --ability: #c7a6ff;
  --item: #5fd4c4;
  --menu-bg: #f8f8f0;
  --menu-ink: #303040;
  --menu-sub: #707088;
  --menu-off: #b4b4c0;
  --menu-edge: #485070;
  --menu-inner: #a8b8d8;
  --menu-hi: #dfe7f7;
  --menu-player: #2f6fc0;
  --menu-enemy: #c8402f;
  --menu-track: #d8dce8;
  --hp-good: #48c060;
  --hp-range: #f0a030;
  --hp-loss: #e05040;
  --display: "Pixelify Five", "Pixelify Sans", "Courier New", monospace;
  --body: "Atkinson Hyperlegible", system-ui, sans-serif;
  color-scheme: dark;
}
.screen { background: #0e1019; border: 1px solid var(--line); border-radius: 10px; padding: 10px; min-width: 0; }
canvas { display: block; width: 100%; image-rendering: pixelated; border-radius: 4px; cursor: pointer; height: auto; max-width: 100%; }
.bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 2px 0; }
.phase { font: 700 16px var(--body); letter-spacing: .04em; }
.phase.player { color: var(--player); } .phase.enemy { color: var(--enemy); }
.side { display: grid; gap: 12px; min-width: 0; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px; min-width: 0; }
.label { font: 700 11px var(--body); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 8px; }
.unit { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: center; }
.unit img { width: 64px; height: 64px; image-rendering: pixelated; background: var(--panel-2); border-radius: 8px; }
.uname { font: 700 18px var(--body); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.uname.player { color: var(--player); } .uname.enemy { color: var(--enemy); }
.types { display: flex; gap: 4px; flex-wrap: wrap; margin: 2px 0 6px; }
.type { font: 700 10px var(--body); text-transform: uppercase; letter-spacing: .06em; padding: 2px 6px; border-radius: 4px; color: #fff; }
.hp { height: 7px; background: var(--panel-2); border-radius: 4px; overflow: hidden; }
.hp > i { display: block; height: 100%; background: var(--good); }
.nums { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; margin-top: 3px; }
.stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: 10px; font-size: 12px; text-align: center; font-variant-numeric: tabular-nums; }
.stats b { display: block; font-size: 10px; color: var(--muted); letter-spacing: .05em; }
.stats .up { color: var(--good); } .stats .down { color: var(--enemy); }
.chip { font: 700 10px var(--body); padding: 2px 6px; border-radius: 4px; background: var(--gold); color: #241d07; letter-spacing: .05em; }
.moves { display: grid; gap: 6px; }
.move { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; text-align: left; padding: 8px 10px; border-left: 4px solid var(--line); }
.move .mn { font-weight: 700; }
.move .meta { grid-column: 1 / -1; font-size: 12px; color: var(--muted); font-weight: 400; }
.move .pp { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--muted); font-weight: 400; }
.move.sel { border-color: var(--gold); background: var(--line); }
/* Move rows in the Inspect panel are buttons: tapping one shows that move's card. */
button.move { width: 100%; font: 14px var(--body); color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 6px; cursor: pointer; }
button.move:hover, button.move:focus-visible { border-color: var(--gold); outline: none; }

/* Detail cards: a move's or a Pokémon's card, in the Inspect panel and the team builder's Details
   panel (playtester idea, Alex picked option B, 2026-10-04). Same light card as the battle menus. */
.dc-wrap { display: grid; gap: 8px; }
.dc-back { justify-self: start; font: 600 12px var(--body); color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px; padding: 3px 9px; cursor: pointer; }
.dc-back:hover, .dc-back:focus-visible { border-color: var(--gold); outline: none; }
.dcard { background: var(--menu-bg); color: var(--menu-ink); border: 3px solid var(--menu-edge); border-radius: 8px; padding: 10px; display: grid; gap: 8px; font: 13px/1.4 var(--body); min-width: 0; }
.dcard .dc-h { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.dcard .dc-h b { font-size: 16px; }
.dcard .dc-h .type { vertical-align: 1px; }
.dcard .dc-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; text-align: center; font-variant-numeric: tabular-nums; }
.dcard .dc-nums div { background: var(--menu-track); border-radius: 4px; padding: 3px 0; }
.dcard .dc-nums small { display: block; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--menu-sub); }
.dcard .dc-rng { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center; }
.dcard .dc-rng .mi-ic { width: 38px; height: 38px; }
.dcard .dc-rng small { color: var(--menu-sub); }
.dcard ul { margin: 0; padding-left: 16px; display: grid; gap: 3px; }
.dcard .dc-todo { color: var(--menu-sub); font-style: italic; }
.dcard .dc-mon { display: flex; gap: 8px; align-items: center; }
.dcard .dc-mon .types { margin: 0; }
.dcard .dc-stats { display: grid; grid-template-columns: 34px 30px minmax(0, 1fr); gap: 2px 6px; align-items: center; font-variant-numeric: tabular-nums; font-size: 12px; }
.dcard .dc-stats span:nth-child(3n+1) { color: var(--menu-sub); font-weight: 700; font-size: 10px; letter-spacing: .06em; }
.dcard .dc-stats i { display: block; height: 7px; border-radius: 4px; background: var(--hp-good); }
.dcard .dc-facts { font-size: 12px; color: var(--menu-ink); display: grid; gap: 3px; }
/* On the light card the name colors need more contrast. */
.dcard .ab-n { color: #6b3fb8; }
.dcard .it-n { color: #127a6c; }
.actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.fc { display: grid; gap: 6px; font-variant-numeric: tabular-nums; }
.fc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 10px; align-items: baseline; font-size: 13px; }
.fc-row .n { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-row .ko { color: var(--gold); }
.log { max-height: 260px; overflow-y: auto; font-size: 13px; display: grid; gap: 2px; }
.log div { padding: 2px 0; border-bottom: 1px solid #2d3349; }
.log .ph { font: 700 13px var(--body); color: var(--gold); padding-top: 6px; }
.log .ai { color: var(--muted); font-style: italic; }
.hint { color: var(--muted); font-size: 13px; margin: 0; }
[hidden] { display: none !important; }
.toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; margin-right: 4px; }
.toggle input { accent-color: var(--gold); }
.stage { position: relative; container-type: inline-size; }
/* On-map menus, styled after the GBA games' white message boxes. */
.gmenu { position: absolute; z-index: 2; background: var(--menu-bg); color: var(--menu-ink); border: 3px solid var(--menu-edge);
  border-radius: 6px; box-shadow: inset 0 0 0 2px var(--menu-inner), 0 4px 12px rgba(0,0,0,.45); padding: 5px; display: grid; gap: 1px;
  font: 600 clamp(11px, 2.3cqw, 15px)/1.15 var(--body); font-size: round(clamp(11px, 2.3cqw, 15px), 1px); min-width: 7.5em; max-width: calc(100% - 8px); }
.gmenu button { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: .45em; padding: .28em .5em .28em 1.25em; border-radius: 3px; cursor: pointer; position: relative; white-space: nowrap; }
.gmenu button:hover:not([disabled]), .gmenu button:focus-visible { background: var(--menu-hi); }
.gmenu button:hover:not([disabled])::before, .gmenu button:focus-visible::before { content: "▶"; position: absolute; left: 4px; font-size: 10px; color: var(--menu-ink); }
.gmenu button[disabled] { color: var(--menu-off); cursor: default; }
.gmenu button i { width: 7px; height: 7px; border-radius: 2px; flex: none; }
.gmenu button[disabled] i { opacity: .4; }
.gmenu button.dim { color: var(--menu-sub); }
.gmenu button .n { margin-left: auto; padding-left: 12px; color: var(--menu-sub); font-variant-numeric: tabular-nums; }
.gmenu hr { border: 0; border-top: 2px dotted var(--menu-inner); margin: 3px 4px; }
.gmenu.fc { min-width: 15em; font-size: clamp(11px, 2.1cqw, 14px); font-size: round(clamp(11px, 2.1cqw, 14px), 1px); }
.fc-title { font-weight: 700; padding: 2px 6px 4px; }
.fc-hint { padding: 0 6px 4px; color: var(--menu-sub); }
.fc-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 8px; padding: 2px 6px; font-variant-numeric: tabular-nums; }
.fc-line .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-line .who.player { color: var(--menu-player); } .fc-line .who.enemy { color: var(--menu-enemy); }
.fc-line .ko { color: var(--menu-enemy); font-weight: 700; }
.fc-unit { padding: 3px 6px; display: grid; gap: 2px; }
.fc-head { display: flex; align-items: baseline; gap: 6px; }
.fc-head .who { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-head .who.player { color: var(--menu-player); } .fc-head .who.enemy { color: var(--menu-enemy); }
.fc-tag { color: var(--menu-sub); }
.fc-tag.dbl, .fc-nums .dbl { color: var(--menu-ink); font-weight: 700; }
.fc-hp { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fc-bar { display: flex; height: 6px; background: var(--menu-track); border: 1px solid var(--menu-edge); border-radius: 2px; overflow: hidden; }
.fc-bar i { display: block; height: 100%; }
.fc-bar .left { background: var(--hp-good); }
.fc-bar .range { background: var(--hp-range); animation: blink 0.8s steps(2) infinite; }
.fc-bar .sure { background: var(--hp-loss); }
@keyframes blink { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .fc-bar .range { animation: none; } }
.fc-nums { display: flex; flex-wrap: wrap; gap: 2px 10px; color: var(--menu-sub); font-variant-numeric: tabular-nums; }
.fc-nums b { color: var(--menu-ink); font-weight: 500; }
.fc-nums .ko { color: var(--menu-enemy); font-weight: 700; }
.fc-sep { margin: 4px 6px 0; padding-top: 4px; border-top: 2px dotted var(--menu-inner); color: var(--menu-sub); }
.fc-btns { display: flex; gap: 4px; margin-top: 4px; }
.fc-btns button { padding-left: 1.25em; }
.gmenu button.go { font-weight: 700; }
.stage .callout { position: absolute; top: 2.5%; left: 50%; transform: translateX(-50%); z-index: 3; pointer-events: none; max-width: 92%;
  padding: 6px 14px; border: 3px solid var(--menu-edge); border-radius: 6px; background: var(--menu-bg); color: var(--menu-ink);
  font: 600 15px var(--body); text-align: center; box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.stage .callout.enemy b { color: var(--menu-enemy); } .stage .callout.player b { color: var(--menu-player); }
.stage .callout .se { display: block; font-size: 13px; color: var(--menu-ink); animation: se-pop .35s ease-out; }
@keyframes se-pop { from { transform: scale(1.4); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .stage .callout .se { animation: none; } }
.stage .banner { position: absolute; inset: 35% 15% auto; z-index: 3; border: 3px solid var(--menu-edge); background: var(--menu-bg); color: var(--menu-ink); }
.stage .banner div.player { color: var(--menu-player); } .stage .banner div.enemy { color: var(--menu-enemy); }
.stage .banner span { display: block; font: 400 13px var(--body); color: var(--menu-sub); }
.banner { font: 700 22px var(--display); text-align: center; padding: 10px; border-radius: 8px; background: var(--panel-2); }
.fp { display: inline-block; flex: none; background-repeat: no-repeat; image-rendering: pixelated; }
.abil { margin: 10px 0 0; font-size: 12px; line-height: 1.4; display: grid; gap: 4px; }
.abil b { color: var(--fg, inherit); }
.ab-n, .abil b.ab-n { color: var(--ability); }
.it-n, .abil b.it-n { color: var(--item); }
select[data-f="ability"] { color: var(--ability); }
select[data-f="item"] { color: var(--item); }
select[data-f] option { color: var(--ink, #ece9f5); }
.abil .no { color: var(--muted); font-style: italic; }
.effects { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.effects .chip { background: var(--panel-2); color: inherit; border: 1px solid var(--line); font-weight: 600; }
.effects .chip.bad { border-color: var(--enemy); } .effects .chip.good { border-color: var(--good); }

/* Team summary: one button per Pokémon on your side (Alex, 2026-10-03). */
.team { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 0 8px; }
.team .tm { display: flex; align-items: center; gap: 6px; flex: 1 1 130px; max-width: 200px; min-width: 0; padding: 3px 8px 3px 3px; text-align: left; font: inherit; cursor: pointer; }
.team .tm .fp { flex: none; image-rendering: pixelated; }
.team .tm-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.team .tm-name { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team .tm-name .chip { font-size: 9px; padding: 0 4px; }
.team .tm-hp { display: block; height: 5px; border-radius: 3px; background: rgba(127,127,127,.3); overflow: hidden; }
.team .tm-hp i { display: block; height: 100%; }
.team .tm-num { font-size: 10px; opacity: .75; font-variant-numeric: tabular-nums; }
.team .tm.done { opacity: .55; }
.team .tm.out { opacity: .35; filter: grayscale(1); }
.team .tm.sel { outline: 2px solid #fc3; outline-offset: 1px; }
.team .tm-name .tm-ally { background: var(--panel-2); color: inherit; border: 1px solid var(--line); }

/* Move legibility (Alex's "Combined" design, 2026-10-03): mini-tile icons, reach, friendly-fire badge. */
.gmenu .mi-ic { flex: none; width: 19px; height: 19px; }
.gmenu .mi-nm { flex: 1 1 auto; }
.gmenu .mi-rg { margin-left: .6em; font-size: .78em; color: var(--menu-sub); font-variant-numeric: tabular-nums; }
.gmenu .mi-ff { flex: none; margin-left: .2em; }
.gmenu button.on { background: var(--menu-hi); }
.gmenu button.noreach { color: var(--menu-off); }
.gmenu button.noreach .mi-ic { opacity: .5; }
.h-f { color: #ff7a6a; font-weight: 600; } .h-a { color: #ffa64d; font-weight: 600; } .h-s { color: #7ed98b; font-weight: 600; }
.fc-yours { color: #c85a10; font-weight: 700; }
/* Move card */
.mcard .mc { display: flex; gap: 10px; align-items: flex-start; }
.mcard canvas { width: 108px; height: 108px; flex: none; border-radius: 6px; image-rendering: pixelated; }
.mcard .mc-nm { font-weight: 700; font-size: 15px; }
.mcard .mc-fam { display: flex; align-items: center; gap: 6px; margin: 4px 0; font-weight: 600; }
.mcard .mc-meta { font-size: 12px; opacity: .8; line-height: 1.5; }
.mcard .mc-rule { margin: 8px 0 6px; font-size: 13px; line-height: 1.45; }
.mcard .mc-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.mcard .mc-chips span { font-size: 11px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--line); background: var(--panel-2); }
.mcard .mc-chips .warn { border-color: #e07a2a; color: #ffb070; }
.mcard .mc-chips .safe { border-color: var(--good); }

/* Link to the playtester FAQ (faq.html, written by the "Simulator FAQ page" thread). */
.faq-link { align-self: center; font: 600 14px var(--body); color: var(--gold); text-decoration: none; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; }
.faq-link:hover, .faq-link:focus-visible { border-color: var(--gold); outline: none; }
.infocard { position: absolute; z-index: 6; width: min(340px, calc(100% - 8px)); max-height: calc(100% - 8px); overflow-y: auto; background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px 10px; box-shadow: 0 6px 20px rgba(0,0,0,.45); font: 14px/1.4 var(--body); }
.infocard .ic-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.infocard .ic-top .label { margin: 0; }
.infocard .ic-top button { font: 600 12px var(--body); color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px; padding: 3px 8px; cursor: pointer; }
.infocard .unit img { width: 56px; height: 56px; }
.infocard .ic-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 12px; }
.infocard .ic-when { display: inline-block; min-width: 2.6em; color: var(--muted); font-variant-numeric: tabular-nums; }
.fc-lv { font-weight: 400; font-size: .85em; color: var(--menu-sub); }
/* Combat log under the map (Alex, 2026-10-03). */
.clog { margin-top: 8px; background: #121522; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px 8px; font: 13px/1.45 var(--body); }
.clog-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.clog-head .label { margin: 0; }
.clog-hint { color: var(--muted); font-size: 12px; margin-right: auto; }
.clog-btn { font: 600 12px var(--body); color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px; padding: 3px 9px; cursor: pointer; }
.clog-list { list-style: none; margin: 6px 0 0; padding: 0; max-height: 5.9em; overflow-y: auto; display: grid; gap: 1px; }
.clog.open .clog-list { max-height: 40vh; }
.clog-list li { padding: 1px 4px; border-radius: 4px; overflow-wrap: anywhere; }
.clog-list .c-when { display: inline-block; min-width: 2.4em; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; }
.clog-list .c-phase { color: var(--gold); font-weight: 700; padding-top: 4px; }
.clog-list .c-damage { color: var(--ink); }
.clog-list .c-miss, .clog-list .c-info, .clog-list .ai { color: var(--muted); }
.clog-list .c-ability, .clog-list .c-item { color: #f0d68a; }
.clog-list .c-faint { color: #ff8a7a; font-weight: 700; }
.clog-list li.tip { cursor: help; text-decoration: underline dotted rgba(255,255,255,.45); text-underline-offset: 3px; }
.clog-list li.tip:hover, .clog-list li.tip:focus-visible { background: var(--panel-2); outline: none; }
.clog-tip { position: fixed; z-index: 50; max-width: min(380px, calc(100vw - 16px)); background: #0d0f18; color: var(--ink); border: 1px solid #5a6488; border-radius: 8px;
  padding: 8px 10px; font: 13px/1.45 var(--body); box-shadow: 0 8px 24px rgba(0,0,0,.5); pointer-events: none; display: grid; gap: 3px; }
.clog-tip .ct-title { font-weight: 700; color: var(--gold); }
.clog-tip .ct-title span { color: var(--muted); font-weight: 400; margin-left: 4px; }
.clog-tip .ct-row { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 8px; font-variant-numeric: tabular-nums; }
.clog-tip .ct-row b { color: var(--muted); font-weight: 600; }
.clog-tip em { font-style: normal; font-weight: 700; } .clog-tip em.good { color: #7ed98b; } .clog-tip em.bad { color: #ff8a7a; }

/* Attack preview docked under the map (Alex, 2026-10-04: "at the bottom of the screen or somewhere it
   will be less likely to interfere"). The strip is always reserved so nothing jumps when it appears. */
.stage.fc-dock { --dock-h: 128px; padding-bottom: calc(var(--dock-h) + 8px); }
.stage.fc-dock::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: var(--cvw, 100%);
  height: var(--dock-h); border: 1px dashed var(--line); border-radius: 6px; box-sizing: border-box; pointer-events: none; }
.stage.fc-dock #fcbox, .stage.fc-dock .gmenu.fc { left: 50%; top: auto; bottom: 0; transform: translateX(-50%); width: var(--cvw, 100%); max-width: 100%;
  box-sizing: border-box; height: var(--dock-h); overflow-y: auto; z-index: 4; font-size: 13px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; align-content: start; }
.stage.fc-dock .gmenu.fc[hidden] { display: none; }
.stage.fc-dock .gmenu.fc > * { grid-column: 1; }
.stage.fc-dock .gmenu.fc > .fc-title { grid-row: 1; }
.stage.fc-dock .gmenu.fc > .fc-title + .fc-unit { grid-row: 2 / span 2; }
.stage.fc-dock .gmenu.fc > .fc-sep { grid-column: 2; grid-row: 2; margin-top: 0; }
.stage.fc-dock .gmenu.fc > .fc-sep ~ * { grid-column: 2; }
.stage.fc-dock .gmenu.fc > .fc-btns { grid-column: 2; grid-row: 1; justify-self: end; margin-top: 0; }
@media (max-width: 560px) { .stage.fc-dock { --dock-h: 190px; } .stage.fc-dock .gmenu.fc { grid-template-columns: minmax(0, 1fr); }
  .stage.fc-dock .gmenu.fc > * { grid-column: 1 !important; grid-row: auto !important; } }
/* In-battle cutscene lines (playBeat say steps, 2026-10-04): a text box along the bottom of the stage. */
.stage .beat-line { position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); z-index: 4; width: min(92%, 640px); box-sizing: border-box;
  padding: 10px 16px 12px; border: 3px solid var(--menu-edge); border-radius: 6px; background: var(--menu-bg); color: var(--menu-ink);
  font: 500 16px/1.4 var(--body); box-shadow: 0 2px 0 rgba(0,0,0,.25); cursor: pointer; }
.stage .beat-line b { display: block; font-size: 13px; color: var(--menu-enemy); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 2px; }
.stage .beat-line i { position: absolute; right: 10px; bottom: 6px; font-style: normal; font-size: 11px; animation: beat-bob .8s ease-in-out infinite; }
@keyframes beat-bob { 50% { transform: translateY(2px); } }
@media (prefers-reduced-motion: reduce) { .stage .beat-line i { animation: none; } }

/* Terrain readout (Alex, 2026-10-04): the hovered or tapped tile's terrain and what it does. It sits in the
   docked strip under the map, behind the attack preview, so it never covers the battlefield. */
.terrain-tip { position: absolute; z-index: 3; left: 50%; transform: translateX(-50%); top: calc(100% - var(--dock-h, 128px)); width: var(--cvw, 100%); max-width: 100%; box-sizing: border-box;
  padding: 8px 12px; font: 13px/1.45 var(--body); color: var(--ink); pointer-events: none; }
.terrain-tip b { color: var(--gold); margin-right: 4px; }
.terrain-tip .tt-who { display: block; color: var(--muted); }
.stage:not(.fc-dock) .terrain-tip { top: 6px; left: 6px; transform: none; width: auto; max-width: min(360px, calc(100% - 12px));
  background: rgba(14,16,25,.88); border: 1px solid var(--line); border-radius: 6px; }

/* Minimap (Alex, 2026-10-04): bottom-right of the strip under the map, beside the attack preview and the
   terrain readout, so it never covers the battlefield. Blue circles = your side, teal circles = allies, red diamonds = foes. */
.stage.has-minimap .minimap { position: absolute; z-index: 5; bottom: 6px; right: calc((100% - var(--cvw, 100%)) / 2 + 6px);
  height: calc(var(--dock-h, 128px) - 12px); width: auto; max-width: 40%; image-rendering: pixelated; border: 1px solid var(--line); border-radius: 4px; background: #0b0d14; cursor: default; }
.stage.has-minimap .gmenu.fc, .stage.has-minimap .terrain-tip { padding-right: calc(var(--mini-w, 190px) + 12px); }

/* Paloma's windsock (gym prototypes): top-right of the battle view, above the map, never over menus. */
.stage .windsock { position: absolute; top: 8px; right: 8px; z-index: 3; display: grid; justify-items: center; gap: 2px; pointer-events: none; }
.stage .windsock canvas { width: 96px; height: 96px; image-rendering: pixelated; }
.stage .windsock span { font: 600 12px/1.2 system-ui, sans-serif; color: #fff; background: rgba(20,28,40,.7); padding: 2px 6px; border-radius: 4px; }

/* Moves that also move the user: a small green pill after the name (dash →N, pivot ↱3). */
.mv-tag { display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 8px; background: #2f9e55; color: #fff; font: 700 11px/16px system-ui, sans-serif; vertical-align: middle; white-space: nowrap; }
button:disabled .mv-tag, button.noreach .mv-tag { opacity: .45; }

/* ---------- Duel card: the attack preview for damage moves (Alex approved 2026-10-05 22:18) ----------
   Attacker left, defender right, split by a VS rule; only the stats in play, green ▲ / red ▼ for the
   owner. On a wide dock each column lays its stats beside its header so the strip stays short. */
.gmenu.fc.duelmode { container: duel / inline-size; display: block; padding: 0; width: min(600px, calc(100% - 8px)); font-weight: 500; }
/* The duel card sits over the battlefield (Alex, 2026-10-05 23:15), in the map corner farthest from the
   target (placeCorner), not in the strip under the map. */
.stage.fc-dock #fcbox.duelmode { display: block; padding: 0; bottom: auto; transform: none; height: auto; overflow-y: auto;
  width: min(600px, calc(var(--cvw, 100%) - 12px)); box-shadow: inset 0 0 0 2px var(--menu-inner), 0 6px 18px rgba(0,0,0,.5); }
.duel { display: grid; font-variant-numeric: tabular-nums; }
.du-cols { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); padding: 6px 8px 4px; }
.du-cols[hidden] { display: none; }
.du-vs { width: 2px; background: var(--menu-inner); margin: 2px 8px; position: relative; }
.du-vs span { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); background: var(--menu-bg); color: var(--menu-sub); font: 700 11px/1 var(--display, var(--body)); padding: 3px 0; }
.du-col { display: grid; gap: 3px; align-content: start; min-width: 0; }
.du-top { display: flex; gap: 8px; align-items: center; }
.du-col.def .du-top { flex-direction: row-reverse; text-align: right; }
.du-top .fp { flex: none; border-radius: 4px; background-color: #e9ecf3; box-shadow: inset 0 0 0 1px var(--menu-inner); }
.du-name { display: grid; gap: 2px; min-width: 0; }
.du-name .nm { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.du-name .nm.player { color: var(--menu-player); } .du-name .nm.enemy { color: var(--menu-enemy); }
.du-types { display: flex; gap: 3px; flex-wrap: wrap; align-items: center; }
.du-col.def .du-types { justify-content: flex-end; }
.du-types .type { font: 700 9.5px/1 var(--body); color: #fff; padding: 3px 4px; border-radius: 3px; text-transform: uppercase; }
.du-lv, .du-lbl { color: var(--menu-sub); font-weight: 400; font-size: 12px; }
.du-lbl { margin-right: 4px; }
.du-hp { display: grid; gap: 2px; font-size: 12.5px; }
.du-hp .row { display: flex; justify-content: space-between; gap: 6px; }
.du-move { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; font-weight: 700; padding-top: 2px; border-top: 1px solid var(--menu-track); }
.du-move .power { font-weight: 400; color: var(--menu-sub); }
.du-cat { display: inline-flex; align-items: center; gap: 3px; font: 700 9.5px/1 var(--body); color: #fff; padding: 2px 5px; border-radius: 3px; text-transform: uppercase; }
.du-cat.phys { background: #d8642a; } .du-cat.spec { background: #3b6fc4; }
.du-match { font-size: 11.5px; color: var(--menu-sub); font-weight: 400; }
.du-stats, .du-res { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; font-size: 12.5px; margin: 0; }
.du-res { padding-top: 2px; border-top: 1px solid var(--menu-track); }
.du-stats dt, .du-res dt { color: var(--menu-sub); font-weight: 400; }
.du-stats dd, .du-res dd { margin: 0; text-align: right; font-weight: 700; white-space: nowrap; }
.du-res dd.ko { color: var(--menu-enemy); }
.duel .vsn { font-weight: 400; color: var(--menu-sub); font-size: 11.5px; margin-right: 4px; }
.duel .up { color: #1f8a3a; } .duel .down { color: #c8402f; } .duel .even { color: var(--menu-ink); }
.du-hits { font-weight: 700; color: #94620a; font-size: 12.5px; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.du-hits .x { background: var(--gold); color: #3a2a00; border-radius: 3px; padding: 1px 6px; }
.du-note { font-size: 11.5px; color: var(--menu-sub); font-weight: 400; }
.du-pager { display: flex; align-items: center; gap: 4px; justify-content: flex-end; font-size: 12.5px; color: var(--menu-sub); }
.gmenu .du-pager button { padding: 0 5px; color: var(--menu-ink); font-size: 11px; }
.gmenu .du-pager button::before { content: none !important; }
.gmenu .du-pager button:focus-visible { outline: 2px solid var(--menu-player); }
.du-foot { position: sticky; bottom: 0; z-index: 1; display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; padding: 4px 8px; background: var(--menu-hi); border-top: 2px solid var(--menu-inner); }
.du-foot .keys { font-size: 11.5px; color: var(--menu-sub); font-weight: 400; }
.du-btns { display: flex; gap: 4px; }
.gmenu .du-btns button.go { background: var(--gold); color: #3a2a00; padding: .28em 1.1em .28em 1.25em; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
/* Wide card (sized on the card itself, not the stage): each column puts its header, HP, move and matchup on the left and the numbers on the right. */
@container duel (min-width: 820px) {
  .du-col { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 10px; }
  .du-col > * { grid-column: 1; }
  .du-col > .du-stats { grid-column: 2; grid-row: 1; align-self: start; }
  .du-col > .du-res { grid-column: 2; grid-row: 2 / span 4; align-self: start; }
  .du-col.def { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
  .du-col.def > * { grid-column: 2; }
  .du-col.def > .du-stats, .du-col.def > .du-res { grid-column: 1; }
  .du-col > .du-hits, .du-col > .du-note { grid-column: 1 / -1; }
}

@container duel (max-width: 460px) {
  .du-top .fp { zoom: .72; }
  .du-cols { padding: 5px 8px 3px; } .du-vs { margin: 2px 5px; } .du-name .nm { font-size: 14px; }
}
/* Copy battle log (battlelog.js) */
.clog-save { font: 600 12px var(--body); color: var(--ink); background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px; padding: 3px 9px; cursor: pointer; margin-left: auto; }
.clog-save + .clog-btn { margin-left: 0; }
.clog-copy { display: block; width: 100%; height: 90px; margin-top: 6px; font: 11px ui-monospace, monospace; }
/* Zoom button (beside End phase) */
.zoom-btn { margin-right: 6px; }