/* Mini battler (battle.js). Same look as the vote page: navy cards, cyan accents, Inter, no text below .85rem.
   Folds by its own width (container query), and for short, wide windows (zoomed-in browsers, e.g. 587x370) stage + controls
   sit side by side so both fit on screen. Sprites are drawn on the canvas at whole-number scales (crisp). */
.bb{scroll-margin-top:8px;container:bb/inline-size;background:var(--bg2,#161b2c);border:1px solid var(--line,#2a3250);border-radius:16px;padding:18px;margin-top:18px;max-width:46em}
.bb-top{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:0 0 12px}
.bb .bb-h{font-size:.85rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan,#48d0ff);margin:0}
.bb-label{margin:0;color:var(--soft,#b9c2d9);font-weight:700;font-size:.9rem;line-height:1.35}
.bb p{margin:0}

/* before a battle */
.bb-start{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.bb-record{flex:1 1 auto;font-weight:900;font-size:.95rem;color:var(--cyan,#48d0ff)}
/* ((bkn-t T11) "140 wins all time · win streak 3 · best 41" is ~60 px longer than before: on narrow phones "win " goes
   ("· streak 3") and, narrower still, the line a little smaller, so it stays one row and the battle keeps its height
   (two rows took 24 px from the stage: the Zoom pill did nothing at 320 px) */
@media (max-width:400px){.bb-record .bb-wn{display:none}}
@media (max-width:340px){.bb-record{font-size:.86rem}}
.bb-best{color:var(--soft,#b9c2d9)}
/* sound on / off and 1x / 2x (bkn_battle remembers them) */
.bb-ctl{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.bb .bb-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;min-height:32px;border-radius:999px;background:transparent;color:var(--ink,#f4f6fb);
  border:2px solid var(--line,#2a3250);font-size:.85rem;font-weight:900;line-height:1.3;white-space:nowrap}
.bb .bb-pill:hover{background:var(--bg,#0f121e);color:var(--cyan,#48d0ff);border-color:var(--cyan,#48d0ff)}
.bb .bb-pill svg{width:16px;height:16px;flex:none}
.bb .bb-snd[data-on="0"]{color:var(--soft,#b9c2d9)}
/* ((bkn-j7 K8b) Music, beside Sound: off = the soft colour; greyed while Sound is off (no music either) */
.bb .bb-mus[data-on="0"]{color:var(--soft,#b9c2d9)}
.bb .bb-mus[aria-disabled="true"],.bb .bb-mus[aria-disabled="true"]:hover{opacity:.55;cursor:default;background:transparent;color:var(--soft,#b9c2d9);border-color:var(--line,#2a3250)}
.bb .bb-spd[data-speed="2"]{border-color:var(--cyan,#48d0ff)}
.bb-sr,.fo-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bb-go{padding:13px 28px;font-size:1.1rem}
.bb-hint{flex:1 1 14em;color:var(--soft,#b9c2d9);font-weight:700;font-size:.95rem;line-height:1.4}
.bb-champ,.bb-shiny{display:inline-block;padding:1px 10px;border-radius:999px;background:#ffd60a;color:#0f121e;font-weight:900;font-size:.85rem;line-height:1.6;vertical-align:middle}
.bb-shiny{background:transparent;color:#ffd60a;border:2px solid #ffd60a;padding:0 8px}

/* the fight */
.bb-fight{display:grid;gap:12px;grid-template-columns:minmax(0,1fr);scroll-margin-top:8px}
.bb-fight:focus{outline:none}
.bb-field{min-width:0}
/* the HP boxes, a row above the stage (round 2b: over the far stands they squeezed the pitch into a strip): name, type
   chips, then the HP bar + numbers. Every row is one line whatever it holds (long names end in an ellipsis, chips never
   wrap), so their height never changes */
.bb-huds{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;margin:0 0 6px;line-height:normal;pointer-events:none}
.bb-hud{min-width:0;background:#0a0d17;border:1px solid var(--line,#2a3250);border-radius:9px;padding:4px 8px 5px}
.bb-hud.foe{text-align:right}
.bb-hh{min-width:0}
.bb-nm{font-weight:900;font-size:.9rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center}
/* the name shortens with an ellipsis; the level (phase 3) and the Shiny badge never do */
.bb-nmt{min-width:0;overflow:hidden;text-overflow:ellipsis}.bb-nm .bb-lv,.bb-nm .bb-shiny{flex:none}.bb-nm .bb-shiny{margin-left:6px}
/* type chips under each name (the wild one's teach what to use; Transform changes them) */
.bb-tys{display:flex;flex-wrap:nowrap;gap:4px;margin:3px 0 0;overflow:hidden}
.bb-hud.foe .bb-tys{justify-content:flex-end}
.bb-tc{flex:none;display:inline-flex;align-items:center;gap:4px;padding:0 8px 0 3px;border-radius:999px;background:var(--tc,#a8a77a);color:var(--tci,#0f121e);font-weight:900;font-size:.85rem;line-height:1.45}
.bb-tc:not(:has(img)){padding-left:8px}
.bb-tc .bb-ti{width:16px;height:16px}
/* HP: the bar runs down smoothly (green, yellow under half, red under a fifth); the part just lost stays lit behind it
   for a beat (b), then follows. The numbers sit beside it; the foe's box is the mirror image */
.bb-hpr{display:flex;align-items:center;gap:6px;margin:4px 0 0}
.bb-hud.foe .bb-hpr{flex-direction:row-reverse}
.bb-hpbar{position:relative;flex:1 1 auto;min-width:24px;height:7px;border-radius:999px;background:#232a44;overflow:hidden;box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.bb-hud.foe .bb-hpbar b,.bb-hud.foe .bb-hpbar i{margin-left:auto}
.bb-hpbar b{position:absolute;top:0;bottom:0;left:0;width:0;border-radius:inherit;background:#ffe8a8}
.bb-hud.foe .bb-hpbar b{left:auto;right:0}
.bb-hpbar i{position:relative;display:block;height:100%;width:100%;border-radius:inherit;background:var(--ok,#7ee787);transition:background .2s}
.bb-hpbar i.mid{background:#ffc94a}
.bb-hpbar i.low{background:var(--bad,#ff8a8a)}
.bb-hpn{flex:none;font-size:.85rem;font-weight:700;color:var(--ink,#f4f6fb);line-height:1.3;white-space:nowrap;font-variant-numeric:tabular-nums}
/* the move being used, on the attacker's box (the game's orange tag) while it plays. A wide box: in the type chips'
   place, one line. A narrow one (phones): over the name and the chips, so a long move name can take two lines */
.bb-hh{position:relative}
.bb-mtag{display:none}
.bb-tagged .bb-mtag{display:flex}
.bb:not(.bb-wide) .bb-mtag{position:absolute;inset:0;margin:0;align-items:center}
.bb:not(.bb-wide) .bb-hud.foe .bb-mtag{justify-content:flex-end}
.bb:not(.bb-wide) .bb-tagged .bb-nm,.bb:not(.bb-wide) .bb-tagged .bb-tys:not(.bb-mtag){visibility:hidden}
.bb-wide .bb-tagged .bb-tys:not(.bb-mtag){display:none}
.bb-wide .bb-tagfull .bb-mtag{position:absolute;inset:0;margin:0;align-items:center}
.bb-wide .bb-hud.foe.bb-tagfull .bb-mtag{justify-content:flex-end}
.bb-wide .bb-tagfull .bb-nm{visibility:hidden}
.bb-mtg{flex:0 1 auto;min-width:0;max-height:100%;padding:1px 8px;border-radius:4px;background:#c2501a;color:#fff3dc;box-shadow:inset 0 0 0 1px #ffb46a;font-weight:900;font-size:.85rem;line-height:1.2;
  overflow:hidden;hyphens:manual;overflow-wrap:break-word;animation:bb-tagin .16s ease-out}
.bb-hud.foe .bb-mtg{text-align:right}
.bb-wide .bb-mtg{padding:0 8px;line-height:1.45;white-space:nowrap;text-overflow:ellipsis}
@keyframes bb-tagin{from{transform:translateY(3px);opacity:0}}
/* phase 3: the level after the name (battle.js paints it once fighters have one) */
.bb-lv{margin-left:6px;font-size:.85rem;font-weight:700;color:var(--soft,#b9c2d9)}
/* (bkn-p3a-fix F1) a long name beside a 3-digit level that would be cut: a little tighter (battle.js fitName) */
.bb-nm.bb-tight .bb-nmt{font-size:.86em;letter-spacing:-.01em}.bb-nm.bb-tight .bb-lv{margin-left:4px;font-size:.75rem}
.bb-lv:empty{display:none}
/* a super-effective or critical hit jolts the HP box that takes it */
.bb-hud.bb-jolt{animation:bb-jolt .42s ease-out}
@keyframes bb-jolt{0%{transform:translateX(0);box-shadow:0 0 0 2px #fff}20%{transform:translateX(-3px)}40%{transform:translateX(3px);box-shadow:0 0 0 2px #ffe8a8}60%{transform:translateX(-2px)}80%{transform:translateX(1px)}100%{transform:none;box-shadow:0 0 0 2px transparent}}
/* "K.O.!" over the pitch when one faints (the game's red stamp); battle.js sets its top and how long it shows */
.bb-ko{position:absolute;z-index:2;left:50%;top:50%;margin:0;transform:translate(-50%,-50%);pointer-events:none;white-space:nowrap;
  font-weight:900;font-size:2.1rem;line-height:1;letter-spacing:.02em;color:#ff4a3a;-webkit-text-stroke:2px #3b0703;paint-order:stroke fill;text-shadow:0 3px 0 #3b0703}
.bb-wide .bb-ko{font-size:2.8rem}
.bb-ko.go{animation:bb-ko var(--ko-ms,1300ms) ease-out both}
@keyframes bb-ko{0%{transform:translate(-50%,-50%) scale(1.9);opacity:0}12%{transform:translate(-50%,-50%) scale(.92);opacity:1}20%{transform:translate(-50%,-50%) scale(1)}78%{opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:0}}
/* a wide stage: name and types on one line */
.bb-wide .bb-hh{display:flex;align-items:center;gap:8px}
.bb-wide .bb-nm{flex:0 1 auto;min-width:0;font-size:1rem}
.bb-wide .bb-tys{flex:none;margin:0}
.bb-wide .bb-hud.foe .bb-hh{flex-direction:row-reverse}
.bb-wide .bb-mtag{flex:0 1 auto;min-width:0}
.bb-wide .bb-tagged .bb-nm{flex-shrink:0}
.bb-stagebox{position:relative;border-radius:8px;border:1px solid var(--line,#2a3250);overflow:hidden;line-height:0;background:#282c36}
/* a phone: the stage runs to the screen's edges (battle.js sets the negative margins from where the column sits) */
.bb-stagebox.bb-bleed{border-left:0;border-right:0;border-radius:0}
.bb-stage{display:block;max-width:none;border:0}

.bb-side{display:flex;flex-direction:column;gap:10px;min-width:0}
.bb-text{min-height:3.2em;padding:9px 14px;background:#0a0d17;border:2px solid var(--line,#2a3250);border-radius:12px;font-weight:700;line-height:1.4}
/* the four moves: always a 2 x 2 grid (like the games); name, then the type chip + a tiny hint ("can miss" ...) */
.bb-moves{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.bb-move{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:5px;min-width:0;min-height:3.6em;padding:9px 12px;text-align:left;
  color:var(--ink,#f4f6fb);background:#0a0d17;border:2px solid var(--tc,var(--line,#2a3250));border-radius:12px}
.bb-move:hover{background:#1c2236;color:#fff}
.bb-move:disabled{opacity:.55;cursor:default}
.bb-move:disabled:hover{background:#0a0d17}
.bb-move:empty{visibility:hidden}
.bb-mn{font-weight:900;font-size:1rem;line-height:1.2;hyphens:manual;overflow-wrap:break-word}
.bb-mrow{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;min-width:0}
.bb-mh{font-weight:700;font-size:.85rem;line-height:1.3;color:var(--soft,#b9c2d9)}
.bb-mt{display:inline-flex;align-items:center;gap:5px;padding:1px 9px 1px 4px;border-radius:999px;background:var(--tc,#a8a77a);color:var(--tci,#0f121e);font-weight:900;font-size:.85rem;line-height:1.5}
.bb-mt:not(:has(img)){padding-left:9px}
.bb-ti{width:20px;height:20px;border-radius:50%}
/* against the foe on the field: words + a shape, the colour only helps */
.bb-eff{display:inline-block;padding:1px 7px;border-radius:6px;font-weight:900;font-size:.85rem;line-height:1.35}
.bb-move[hidden]{display:none}
.bb-eff.super{background:#7ee787;color:#0f121e}
.bb-eff.weak{background:#ffc94a;color:#0f121e}
.bb-eff.none{background:#3a4260;color:#f4f6fb}
.bb-effg{margin-right:4px}
/* round 2f (Brian: "the RUN AWAY button is still there. The game doesn't need it. Then the buttons can take up less
   space"): east-west each move is two lines, not three: its name, then its type chip, how it does against the foe and
   the hint on one line (they wrap only in a narrow column; each layout keeps its own padding and line gap); north-south
   has its own one-line buttons (.bb-ns below) */
.bb:not(.bb-ns) .bb-move{flex-direction:row;flex-wrap:wrap;align-items:center;align-content:flex-start;column-gap:6px;min-height:0}
.bb:not(.bb-ns) .bb-mn{flex:1 0 100%}
.bb:not(.bb-ns) .bb-mrow{display:contents}
.bb:not(.bb-ns) .bb-mt{order:1}
.bb:not(.bb-ns) .bb-eff{order:2}
.bb:not(.bb-ns) .bb-mh{order:3}
/* 1-4 picks a move: the number shows where there is a keyboard and a mouse */
.bb-key{display:none;position:absolute;top:6px;right:8px;font-size:.85rem;font-weight:700;line-height:1;color:var(--soft,#b9c2d9);opacity:.75}
@media (hover:hover) and (pointer:fine){ .bb-key{display:block} .bb-mn{padding-right:12px} }
/* the team (round 2e, Sitting 2, north-south; round 2g, Brian: "switching your Pokemon should be done by tapping the
   pokemon, rather than having the space taken up by their name at the bottom of the buttons": east-west too). No chips:
   each teammate waiting on the grass is itself the switch (battle.js placeSwitches): a see-through button over it, at
   least 44 x 44 (two side by side that would overlap split the overlap between them), its name and HP in its label for
   screen readers; one off the view waits at the edge as a round chip
   with its HP ring (bb-edge). The list lies over the overlay north-south and over the whole fight box east-west (it
   stays after the moves in reading order); only the buttons that can be pressed take pointer events */
.bb-fight{position:relative}
.bb-roster{list-style:none;position:absolute;inset:0;z-index:1;margin:0;padding:0;pointer-events:none;display:block}
.bb-roster li{display:contents}
.bb-roster li.on .bb-sw{display:none}
.bb .bb-sw,.bb .bb-sw:not(:disabled){position:absolute;left:0;top:0;width:44px;height:44px;min-width:0;min-height:0;margin:0;padding:0;
  border:0;border-radius:14px;background:transparent;pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:none}  /* (round 2g: the page's buttons fade their background; an edge chip coming back on view left a dark box fading over the Pokémon) */
.bb .bb-sw:disabled{pointer-events:none;cursor:default}
.bb .bb-sw:disabled:hover,.bb .bb-sw:not(:disabled):hover{background:transparent}
.bb .bb-sw>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bb .bb-sw:focus-visible{outline:2px solid var(--cyan,#48d0ff);outline-offset:-2px}
@media (hover:hover) and (pointer:fine){ .bb .bb-sw:not(:disabled):hover{box-shadow:inset 0 0 0 2px rgba(72,208,255,.5)} }
.bb .bb-sw.bb-gone{width:1px!important;height:1px!important;min-width:0;min-height:0;overflow:hidden;clip-path:inset(50%)}
.bb .bb-sw.bb-edge{border-radius:50%;background:rgba(10,13,23,.82)}
.bb .bb-sw.bb-edge::before{content:"";position:absolute;inset:7px;border-radius:50%;
  background:conic-gradient(from 180deg,var(--rc,#7ee787) calc(var(--p,1) * 180deg),#232a44 0 calc(360deg - var(--p,1) * 180deg),var(--rc,#7ee787) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px))}
.bb .bb-sw.bb-edge:not(:disabled)::after{content:"⇄";position:absolute;inset:0;display:grid;place-items:center;font-size:.95rem;font-weight:900;color:#fff}
/* (bkn-switch sitting 2, Brian: "If Pokemon go off screen where it shows the switch button, it should show their
   portrait instead otherwise they dont know who they are tapping at first if its multiple."): the chip is that
   Pokémon's face, the site's 40 px portrait (battle.js --face) at its own size, whole pixels, never smoothed, in the
   44 px circle; its HP ring a thin band round the edge; the ⇄ a small badge on its corner, as on the grass */
/* (and under a finger or the mouse: the page's hover rule made it see-through, and the face went the moment it was
   tapped) */
.bb .bb-sw.bb-edge,.bb .bb-sw.bb-edge:not(:disabled):hover{background:var(--face,none) 50% 50%/40px 40px no-repeat,#2a3250;image-rendering:pixelated}
.bb .bb-sw.bb-edge{box-shadow:0 1px 4px rgba(0,0,0,.5)}
.bb .bb-sw.bb-edge::before{inset:0;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3.5px))}
.bb .bb-sw.bb-edge:not(:disabled)::after{inset:auto;right:-2px;bottom:-2px;min-width:16px;height:16px;padding:0 2px;border-radius:8px;font-size:.7rem;line-height:1;background:rgba(10,13,23,.85)}
/* (cheap win, 2e: a small swap badge on each one you can switch to, while you choose, so the first tap is not a guess) */
.bb .bb-sw:not(:disabled):not(.bb-edge):not(.bb-gone)::after{content:"⇄";position:absolute;right:0;top:0;min-width:20px;height:20px;padding:0 3px;
  display:grid;place-items:center;border-radius:10px;font-size:.85rem;font-weight:900;line-height:1;color:#fff;background:rgba(10,13,23,.72)}
/* (bkn-switch; bkn-bench B2) the one picked to switch to stands still, its HP ring on the grass glowing the site's yellow
   (battle.js drawGauges) and its swap badge yellow; one off the view, its chip ringed yellow; the switch panel over the
   moves asks (below). No double-tap zoom on the buttons */
.bb .bb-sw{touch-action:manipulation}
/* (phase 3) a held item on the chip: its 12 px pixel icon on the bottom-left corner, on a dark round */
.bb .bb-sw>img.bb-swi{position:absolute;left:-3px;bottom:-3px;width:16px;height:16px;padding:2px;border-radius:50%;background:rgba(10,13,23,.82);image-rendering:pixelated;pointer-events:none}
.bb .bb-sw.bb-edge.bb-pick:not(:disabled){box-shadow:0 0 0 3px #ffd60a,0 0 12px 3px rgba(255,214,10,.55)}
.bb .bb-sw.bb-pick:not(:disabled):not(.bb-gone)::after{background:#ffd60a;color:#0f121e}
/* (bkn-bench B2, Brian 2026-10-21: "the attack hud section covers up with Left side of it X Cancel.. and right side Mons
   portrait with Switch panel"): the switch panel lies over the four moves, exactly their box (bb-mvw holds both; the
   moves keep their room, unseen): Cancel on the left (dark, as a move), the one picked on the right: its portrait (the
   site's 40 px one, whole pixels; 80 px where the panel is tall enough) and "Switch" over its name, in the site's yellow;
   Evolve (white, the evolution's glow, as F1's) under Switch when it can evolve now */
.bb-mvw{position:relative;min-width:0}
.bb-mvw:has(>.bb-moves[hidden]):not(.bb-swon){display:none}   /* (the Bag or the after box in the moves' place: no empty gap) */
.bb-mvw.bb-swon>.bb-moves{visibility:hidden}
.bb-swp{position:absolute;inset:0;z-index:1;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);grid-template-rows:minmax(0,1fr);gap:8px;container:bbswp / size}
.bb-swp[hidden]{display:none}
.bb-swp.bb-swp3{grid-template-rows:minmax(0,1fr) minmax(0,1fr)}
.bb .bb-swp>button{min-width:0;min-height:0;height:auto;margin:0;padding:2px 10px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:8px;
  line-height:1.15;touch-action:manipulation;overflow:hidden;transition:none}
.bb .bb-swp>button:focus-visible{outline:3px solid var(--cyan,#48d0ff);outline-offset:2px}
.bb .bb-swx{grid-row:1 / -1;background:#0a0d17;color:var(--ink,#f4f6fb);border:2px solid var(--line,#2a3250);font-size:1.05rem}
.bb .bb-swx:hover{background:#1c2236;color:#fff}
.bb-swxi{font-size:1.2em;line-height:1}
.bb .bb-swgo{grid-column:2;background:#ffd60a;color:#0f121e;border:0;justify-content:flex-start;padding-left:6px;box-shadow:0 0 14px 2px rgba(255,214,10,.35)}
.bb .bb-swgo:hover{background:#ffe352;color:#0f121e}
.bb-swf{flex:none;width:40px;height:40px;image-rendering:pixelated;border-radius:8px;background:rgba(15,18,30,.14)}
@container bbswp (min-height:92px){ .bb-swp:not(.bb-swp3) .bb-swf{width:80px;height:80px;border-radius:12px} }
@container bbswp (min-height:190px){ .bb-swp3 .bb-swf{width:80px;height:80px;border-radius:12px} }
/* (a narrow, tall panel: a computer's column, a phone on its side: the portrait over the words) */
/* (a narrow, short panel: a phone in a page's gutters: Cancel's mark over its word, the picture over Switch, 40 px) */
@container bbswp (max-width:299px) and (max-height:149px){
  .bb .bb-swp>.bb-swx{flex-direction:column;gap:0;padding:2px 4px;font-size:.95rem}
  .bb .bb-swp>.bb-swgo{padding:2px 6px;gap:6px}
  .bb-swgt{font-size:1rem}
  .bb .bb-swp:not(.bb-swp3)>.bb-swgo{flex-direction:column;justify-content:center;gap:0}
  .bb-swp:not(.bb-swp3) .bb-swf{width:40px;height:40px;border-radius:8px}
  .bb-swp:not(.bb-swp3) .bb-sww{align-items:center;text-align:center}
}
@container bbswp (max-width:300px) and (min-height:150px){ .bb .bb-swp:not(.bb-swp3)>.bb-swgo{flex-direction:column;justify-content:center;padding-left:10px} .bb-swp:not(.bb-swp3) .bb-sww{align-items:center;text-align:center} }
.bb-sww{display:flex;flex-direction:column;align-items:flex-start;min-width:0;text-align:left}
.bb-swgt{max-width:100%;font-size:1.15rem;font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bb-swnm{max-width:100%;font-size:.85rem;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bb .bb-swe{grid-column:2;background:#fff;color:#0f121e;border:0;font-size:1rem;font-weight:900;box-shadow:inset 0 0 0 2px #ffd60a,0 0 12px 2px rgba(255,236,160,.6)}
.bb .bb-swe:hover{background:#fff8d6;color:#0f121e}
.bb .bb-swe[hidden]{display:none}
/* (bkn-p3a-fix F1) the Evolve button by a tapped team member that can evolve: a real button, 44 px to tap, white
   with the evolution's glow (the after box's Evolve! is gold; this one sits on the grass) */
.bb .bb-evot{position:absolute;left:0;top:0;z-index:3;pointer-events:auto;margin:0;min-width:44px;min-height:40px;padding:0 16px;border:0;border-radius:999px;
  background:#fff;color:#0f121e;font-size:.95rem;font-weight:900;line-height:1;white-space:nowrap;cursor:pointer;touch-action:manipulation;
  box-shadow:0 0 0 2px #ffd60a,0 0 14px 3px rgba(255,236,160,.75),0 2px 5px rgba(0,0,0,.5)}
.bb .bb-evot:hover{background:#fff8d6}
.bb .bb-evot:focus-visible{outline:2px solid var(--cyan,#48d0ff);outline-offset:2px}
.bb .bb-evot[hidden]{display:none}
.bb-after{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.bb-again{padding:12px 22px}
.bb-share{padding:10px 20px}
.bb-share-msg{flex:1 1 100%;font-weight:700;color:var(--ok,#7ee787);overflow-wrap:anywhere}
/* (bkn-panel sitting 3) a win's brand line: the site's wordmark (Inter Black, yellow, a red drop shadow) and the vote
   page's address, beside the buttons where they leave room, else on a line of its own. Still: nothing animates */
.bb-brand{margin:0;font-size:.95rem;flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-end;gap:0 .5em;line-height:1.25}
.bb-brand[hidden]{display:none}
.bb-wm{font-weight:900;text-transform:uppercase;letter-spacing:.02em;color:#ffd60a;text-shadow:0 2px 0 #d62828,0 3px 0 #000;white-space:nowrap}
.bb-url{font-weight:800;color:var(--ink,#eef2ff);white-space:nowrap}
.bb-share-msg:empty{display:none}
.bb .linkish{background:none;color:var(--cyan,#48d0ff);border-radius:4px;font-weight:700;text-decoration:underline}
.bb .linkish:hover{background:none;color:#fff}
.bb .ghost{background:transparent;color:var(--ink,#f4f6fb);border:2px solid var(--line,#2a3250)}
.bb .ghost:hover{background:var(--bg,#0f121e);color:var(--cyan,#48d0ff);border-color:var(--cyan,#48d0ff)}
/* (bkn-t T9, K6-14) "← Back" at the top of Moves / Box / Pokédex: small, on the left, as the walk-back button */
.bb .jr-top{justify-self:start;width:auto;min-height:44px;padding:8px 14px;border-radius:12px;font-weight:900;font-size:.95rem}
.bb-is-champ{border-color:#ffd60a}

/* wide box: stage and controls side by side */
@container (min-width:640px){
  .bb-fight,.jr-pntop{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}   /* ((bkn-j7 K7f) .jr-pntop: the Moves screen's panel, the moves' column as in battle) */
}
/* a narrow HP box: type chips without their symbols (two fit on one line) */
.bb-hud{container:bbhud/inline-size}
@container bbhud (max-width:210px){
  .bb-tc .bb-ti{display:none}
  .bb-tc,.bb-tc:not(:has(img)){padding:0 7px}
}
@container bbhud (max-width:140px){
  .bb-tys{gap:3px}
  .bb-tc,.bb-tc:not(:has(img)){padding:0 5px}
}
/* (Sitting 3) an HP box under 200 px (a 320 phone; a corner beside the clock): the Shiny badge is a gold star, so a
   Champion's name keeps its room (it was "P… Lv 20 Shiny" at 320); the word stays for screen readers */
@container bbhud (max-width:199px){
  .bb-nm .bb-shiny{font-size:0;padding:0 4px;margin-left:5px;line-height:1.2}
  .bb-nm .bb-shiny::before{content:"\2605" / "";font-size:.8rem;line-height:1.4}
}
/* narrow box (small phones): still 2 x 2, a little tighter; long names break at a soft hyphen (battle.js BREAK) */
@container (max-width:300px){
  .bb-moves,.bb-swp{gap:6px}
  .bb-move{padding:7px 8px;gap:4px}
  .bb-mn{font-size:.95rem}
  .bb-mt{padding-right:7px}
  .bb-ti{width:16px;height:16px}
}
/* short, wide window (zoomed in): fold side by side so the stage and the moves are both on screen
   ((bkn-j7 K7c, the GPT audit's K6-5) from 480 px wide, was 520: the adventure's frame at Brian's 300 % zoom (587x370) is
   517 px wide on /play and ~501 on /vote, and the frame is the window its battle sees, so the moves sat under the stage,
   off the screen. 853x445 and every taller size as before) */
@media (max-height:480px) and (min-width:480px){
  .bb{padding:12px 14px}
  .bb-top{margin-bottom:8px}
  .bb-fight,.jr-pntop{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}
  .bb-text{min-height:0;padding:7px 12px}
  .bb-side{gap:8px}
  .bb-moves{gap:6px}
  .bb-move{min-height:0;padding:6px 8px;gap:3px}
  .bb-mn{font-size:.95rem}
  .bb-mt{padding-right:7px}
  .bb-ti{width:16px;height:16px}
}
/* ((bkn-j7 K7c) and under 560 px wide (the adventure's frame at about 300 % zoom): the moves' column half the box (at 1.35 :
   1 it was 215 px in /play's 517 px frame: the journey's four buttons wrapped to three lines and the second row ended 20 px
   under the screen), at least 200 px, so the stage's column keeps the 200 px battle.js draws it at least (the blind second
   reader: a 250 px least left a 480 px box's stage under it, cut); TYPE's favourites chip without its star, as at 320; how
   a move does against the foe as its shape only ("▼"; the button's label keeps the words for screen readers), as on a
   phone upright; a move's hint ("can miss" ...) left to its label, as on a phone upright. 560 px and up as before; full
   screen keeps its own rule (520 px and up, stacked below as before). (The stage's column never under the canvas's 200 px
   and its border: in a page with gutters a 480 px window's box is ~410 px, where half left the stage 191 px, cut) */
@media (max-height:480px) and (min-width:480px) and (max-width:559px){
  .bb-fight,.jr-pntop{grid-template-columns:minmax(0,1fr) min(clamp(200px,50%,400px),calc(100% - 214px))}
  .bb-tystar{display:none}
  .bb .bb-tyc,.bb .bb-tyc:not(:has(img)){padding:1px 8px 1px 3px;gap:3px;font-size:.85rem}   /* (.bb: over the chip's own rules below) */
  .bb-eff{font-size:0;padding:0 4px;line-height:1.3;white-space:nowrap}
  .bb-effg{font-size:.85rem;margin:0}
  .bb-mh{display:none}
  /* the HP boxes are narrower here: a long name beside a 3-digit level (F1's tight style, .77 / .75rem) stays at .85rem,
     the site's smallest, and its name ends in an ellipsis instead (the blind second reader) */
  .bb-nm.bb-tight .bb-nmt,.bb-nm.bb-tight .bb-lv{font-size:.85rem}
}
/* ((bkn-j7 K7c) full screen under 520 px wide stays stacked, as before: its own short-window rule starts at 520) */
@media (max-height:480px) and (min-width:480px) and (max-width:519px){ .bb-full .bb-fight,.bb-full .jr-pntop{grid-template-columns:minmax(0,1fr)} }
/* full screen (the Full screen button): the battle box fills the screen, through the Fullscreen API or, where there is
   none (iPhone Safari), fixed over the whole window; the same look both ways. The page behind can't scroll. The top row
   is one line (the label goes to screen readers only); the fight sits in the middle of what is left, the stage as big
   as battle.js finds room for (layout(): fullRoom). Safe-area insets (a notch) are kept clear */
.bb.bb-full{position:fixed;inset:0;z-index:1000;margin:0;max-width:none;width:auto;height:auto;border:0;border-radius:0;
  display:flex;flex-direction:column;overflow:auto;overscroll-behavior:contain;
  padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
.bb.bb-full::backdrop{background:var(--bg2,#161b2c)}
.bb-full .bb-top{flex:none;align-items:center;margin-bottom:8px}
.bb-full .bb-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bb-full .bb-fight,.bb-full .bb-start{margin:auto 0}
.bb-full .bb-fs{border-color:var(--cyan,#48d0ff)}
/* a narrow screen: the record and the three buttons, no heading (it stays for screen readers), slimmer buttons */
@container (max-width:700px){
  .bb-full .bb-h{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .bb-full .bb-ctl{gap:5px;margin-left:0}
  .bb-full .bb-pill{padding:4px 10px;gap:5px}
}
html.bb-locked,html.bb-locked body{overflow:hidden;overscroll-behavior:none}
/* beside the stage, the moves take what they need and the stage the rest */
@container (min-width:640px){
  .bb-full .bb-fight,.bb-full .jr-pntop{grid-template-columns:minmax(0,1fr) clamp(260px,32%,400px)}
}
/* a phone on its side: one line on top, the stage the screen's height, the
   moves column a little tighter; if it still runs out of room (a small phone, Safari's bars) it scrolls on its own and
   the stage and the moves stay put */
@media (max-height:480px) and (min-width:520px){
  .bb.bb-full{padding-top:max(6px,env(safe-area-inset-top));padding-bottom:max(6px,env(safe-area-inset-bottom))}
  .bb-full .bb-top{margin-bottom:4px}
  .bb-full .bb-huds{margin-bottom:4px}
  .bb-full .bb-fight{flex:1 1 0;min-height:0;margin:0;grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr) clamp(250px,34%,400px)}
  .bb-full .bb-side{max-height:100%;overflow-y:auto;overscroll-behavior:contain;overflow-anchor:none;gap:6px}
  .bb-full .jr-pntop{grid-template-columns:minmax(0,1fr) clamp(250px,34%,400px)}
  .bb-full .bb-text{padding:5px 12px}
}
/* ---------- panel (bkn-panel sitting 2, battle.js opts.panel; Brian, 2026-10-18: "A battle button. Bright and across the
   screen. Not in two rows"): the page's box holds the battle, so it has no card of its own. Shut: only the Battle! row,
   the button across the whole box (one line, big, the site's gold), the hint under it. Battle! glows (a soft pulse)
   until this device has played a battle to the end (bb-glow); reduced motion: a still gold ring instead. Open: the top
   row starts with "Back to your team"; on a wide box the stage gets the room and the moves a column beside it (as in
   full screen), so a computer shows more pitch at the same sprite scale ---------- */
.bb.bb-panel:not(.bb-full){background:none;border:0;border-radius:0;padding:0;max-width:none}
.bb-panel.bb-shut > .bb-top,.bb-panel.bb-shut > .bb-fight{display:none}
.bb-panel .bb-start{display:block}
.bb.bb-panel .bb-go{display:block;width:100%;min-width:0;min-height:60px;margin:0;padding:12px 16px;border-radius:14px;background:#ffd60a;color:#0f121e;
  font-size:1.6rem;line-height:1.25;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 6px 22px rgba(255,214,10,.2)}
@media (hover:hover){ .bb.bb-panel .bb-go:hover{background:#fff;color:#0f121e} }   /* (a phone's tap leaves :hover on: back from the battle, it would be white) */
.bb.bb-panel .bb-go:focus-visible{outline:3px solid #fff;outline-offset:3px}
.bb-panel .bb-hint{margin:10px 0 0;text-align:center}
.bb.bb-panel .bb-go.bb-glow{animation:bb-glow 2s ease-in-out infinite}
@keyframes bb-glow{0%,100%{box-shadow:0 0 0 0 rgba(255,214,10,0),0 0 14px 2px rgba(255,214,10,.3)}50%{box-shadow:0 0 0 6px rgba(255,214,10,.28),0 0 36px 10px rgba(255,214,10,.6)}}
@media (prefers-reduced-motion:reduce){ .bb.bb-panel .bb-go.bb-glow{animation:none;box-shadow:0 0 0 3px var(--bg2,#161b2c),0 0 0 6px #ffd60a,0 0 24px 6px rgba(255,214,10,.45)} }
.bb .bb-back{color:var(--cyan,#48d0ff);border-color:var(--cyan,#48d0ff);min-height:40px;padding:4px 14px}
.bb .bb-back:hover{color:#fff;border-color:#fff}
.bb-panel .bb-top{align-items:center}
@container bb (min-width:900px){
  .bb-panel:not(.bb-full) .bb-fight,.bb-panel:not(.bb-full) .jr-pntop{grid-template-columns:minmax(0,1fr) clamp(260px,32%,400px)}
}

/* Zoom close / wide (round 2d, Sitting 2): a pill like Sound and Speed; lit while the wide view is on */
.bb .bb-zm[data-wide="1"]{border-color:var(--cyan,#48d0ff)}
.bb .bb-zm[hidden]{display:none}

/* North-south (round 2d, Sitting 2; battle.js layout(), setDom()): an upright phone. The stage is the whole width and
   about the screen's height; the HP boxes float over its top corners (the stadium clock between them, or over them
   where the corners would be too narrow: bb-clock-low), and a dock floats over its bottom: the battle text on one line
   and the four moves (2 x 2, one line each, 44 px tall; round 2e, Sitting 2: no team row or Run away). Only what can be pressed takes
   pointer events, so a tap on the pitch still reaches it. Translucent dark plates keep the words readable over the grass */
.bb-ns .bb-fight{gap:0}
.bb-ns .bb-side{display:none}
.bb-over{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;line-height:normal}
.bb-ns .bb-huds{margin:0;padding:6px 6px 0;gap:6px;grid-template-columns:minmax(0,1fr) var(--bb-clockw,0px) minmax(0,1fr)}
.bb-ns .bb-hud.foe{grid-column:3}
.bb-ns.bb-clock-low .bb-huds{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding-top:calc(var(--bb-clockh,0px) + 4px)}
.bb-ns.bb-clock-low .bb-hud.foe{grid-column:2}
.bb-ns .bb-hud{background:rgba(10,13,23,.84);border-color:rgba(42,50,80,.9);padding:3px 7px 4px}
.bb-ns .bb-nm{font-size:.85rem}
.bb-ns .bb-tys{margin-top:2px}
.bb-ns .bb-hpr{margin-top:3px}
.bb-dock{display:flex;flex-direction:column;gap:5px;padding:0 6px 6px}
.bb-dock>*{pointer-events:auto}
.bb-dock>[hidden]{display:none}
/* ((bkn-t V2) a small phone after a win (320 x 568 / 640, 360 x 640): the Top Trainers line and the evolve card made the
   dock taller than the stage: the battle text sat over the HP numbers and Battle again / Share your win were cut off at
   the box's bottom. Now the dock never takes more than the stage below the HP boxes (and the room the battle text grows up
   into, --bb-up: battle.js fitText): only the box after a battle shrinks, and scrolls inside. Where it all fits (390 and
   up) nothing moves: the HP boxes' margin sits in the free space between them and the dock) */
.bb-ns .bb-huds{flex:none;margin-bottom:calc(var(--bb-up,0px) + 4px)}
.bb-ns .bb-dock{min-height:0}
.bb-ns .bb-dock>*{flex:none}
.bb-ns .bb-dock>.bb-after{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ffd60a rgba(10,13,23,.9)}
/* ((bkn-t V2) and at 320 (the box's inside under 290 px) the page's Top Trainers line (vote.js rankLine, vote.css) a little
   tighter, so less of the box needs a scroll */
@container bb (max-width:290px){
  .bb-ns .bb-rank .rankline{padding:6px 10px;gap:6px;font-size:.9rem;line-height:1.25}
  .bb-ns .bb-rank .rankline small{font-size:.8rem}
}
.bb-ns .bb-text{min-height:0;padding:3px 10px;border-width:1px;border-radius:8px;background:rgba(10,13,23,.86);font-size:.9rem;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* (Sitting 3, battle.js fitText) a line too long for that one line wraps and grows up over the grass by its extra lines
   (a negative top margin, so the dock keeps its height): "Charmander evolved into Charmeleon!" read whole at 390 / 320 */
.bb-ns .bb-text.bb-text2{white-space:normal;text-overflow:clip;align-self:flex-end}
.bb-ns .bb-moves{gap:5px}
.bb-ns .bb-swp{gap:5px}
.bb-ns .bb-swx{background:rgba(10,13,23,.9);border-width:1px;border-radius:10px}
.bb-ns .bb-swgo,.bb-ns .bb-swe{border-radius:10px}
/* each move one small button: its type's symbol, its name (two short lines at most), how it does as a shape (the
   button's label keeps the type, the hint and the words for screen readers); 44 px tall */
.bb-ns .bb-move{flex-direction:row;align-items:center;min-height:44px;padding:3px 8px;gap:6px;background:rgba(10,13,23,.9);border-radius:10px}
.bb-ns .bb-move:disabled{opacity:.7}
.bb-ns .bb-move:disabled:hover{background:rgba(10,13,23,.9)}
.bb-ns .bb-mn{order:2;flex:1 1 auto;min-width:0;font-size:.95rem;line-height:1.1;padding-right:0;overflow:hidden;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.bb-ns .bb-mrow{order:1;flex:none;flex-wrap:nowrap;gap:5px;overflow:hidden}
/* the type chip as its symbol only (the button's label still says the type); a word chip where there are no symbols */
.bb-ns .bb-mt:has(img){flex:none;font-size:0;padding:0;gap:0;background:none}
.bb-ns .bb-mt .bb-ti{width:18px;height:18px}
.bb-ns .bb-mh{display:none}
.bb-ns .bb-eff{order:3;flex:none;font-size:0;padding:0 4px;line-height:1.3;white-space:nowrap}
.bb-ns .bb-effg{font-size:.85rem;margin:0}
/* (Sitting 3) a move it knows: its energy cost under the type's symbol, so the name has the button's middle (at 320 the
   symbol, the name, the effect and the cost in one row broke "Thunderbolt" mid-word: "Thund / erbolt") */
.bb-ns .bb-move:has(.bb-mc){display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;align-content:center;align-items:center;column-gap:6px;row-gap:0}
.bb-ns .bb-move:has(.bb-mc) .bb-mrow{grid-column:1;grid-row:1;justify-self:center;align-self:end}
.bb-ns .bb-move:has(.bb-mc) .bb-mc{grid-column:1;grid-row:2;margin:0;justify-self:center;align-self:start}
.bb-ns .bb-move:has(.bb-mc) .bb-mn{grid-column:2;grid-row:1 / 3}
.bb-ns .bb-move:has(.bb-mc) .bb-eff{grid-column:3;grid-row:1 / 3}
@media (hover:hover) and (pointer:fine){ .bb-ns .bb-move{padding-right:18px} }
/* the hint (round 2g, battle.js placeTip): "Tap your Pokémon to switch" ("Click" with a mouse) by the team on the grass
   while you choose, in the first 3 battles with a team (battle.js TIP_BATTLES); a small dark plate that pulses gently (under 1 a second, no
   flashing in the WCAG sense); reduced motion: still */
.bb-tip{position:absolute;left:0;top:0;z-index:1;pointer-events:none;margin:0;padding:2px 10px;border-radius:999px;background:rgba(10,13,23,.8);
  color:#fff;font-size:.85rem;font-weight:800;line-height:1.45;white-space:nowrap;animation:bb-tip 1.8s ease-in-out infinite}
.bb-tip[hidden]{display:none}
@keyframes bb-tip{0%,100%{opacity:.45}50%{opacity:1}}
.bb-tip.bb-tip-still{animation:none}
.bb-tip.bb-tip-wait{visibility:hidden}
@media (prefers-reduced-motion:reduce){ .bb-tip{animation:none} }
/* round 2e, Sitting 2 (Brian: "a circle health hud at their feet instead of listing their name and health at the bottom
   ... and Run away button not needed either. Then you get the attack s lower and more field space"): no team row and no
   Run away in the dock; each teammate waiting on the grass is itself the switch (the team rules above, both layouts) */
.bb-ns .bb-after{padding:8px;border-radius:12px;background:rgba(10,13,23,.9)}
.bb-ns .bb-again{padding:10px 18px}
.bb-ns .bb-share{padding:8px 16px}
.bb-ns .bb-brand{font-size:.8rem;justify-content:center}   /* (one line under the buttons on a phone: the dock stays low) */
.bb-ns .bb-ko{font-size:1.8rem}
/* a small phone (320 px: the box's inside under 290 px): the HP boxes without their type chips */
@container bb (max-width:290px){
  .bb-ns .bb-swp{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}      /* (B2: Switch the wider side) */
  .bb-ns .bb-hud .bb-tys:not(.bb-mtag){display:none}
  .bb-ns .bb-move{padding:3px 6px;gap:5px}
  .bb-ns .bb-mn{font-size:.9rem}
  .bb-ns .bb-text{font-size:.85rem}
  /* (bkn-panel sitting 3) Battle again and Share your win on one row at 320 (289 of 292 px); a bigger font wraps them */
  .bb-ns .bb-again{padding:10px}
  .bb-ns .bb-share{padding:8px 9px}
  .bb-ns .bb-after{gap:8px 6px}
}
/* the top row on a phone or in a narrow column (round 2d, Sitting 2: the Zoom pill made it two lines there), and on a
   phone on its side in full screen: Sound, Zoom and Full screen as their symbols (their names stay for screen readers),
   so the four buttons take one line and the stage the height */
@container bb (max-width:519px){
  .bb .bb-pill:has(svg){justify-content:center;min-width:44px;min-height:40px;padding:4px 10px}
  .bb .bb-pill:has(svg) span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .bb .bb-spd{min-height:40px}
  .bb .bb-pill svg{width:18px;height:18px}
}
/* ((bkn-j7 K8b) room for Music, the fifth pill, without the row ever taking more room than the four did (so the battle starts
   where it did, at every width): a box up to 519 px (a phone): Speed as "1x" alone (its word for screen readers) and the
   pills 4 px apart (5 x 44 + 16 = 236 px; the four took 238); 520-999 px: Sound and Music as their symbols (their words for
   screen readers: 453 px; the four took 473); from 1,000 px every word (595 px: room to spare there) */
.bb .bb-spd{gap:0}
.bb .bb-spdw{white-space:pre}
@container bb (max-width:519px){
  .bb .bb-ctl{gap:4px}
  .bb .bb-spd{justify-content:center;min-width:44px;padding:4px 8px}
  .bb .bb-spdw{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@container bb (min-width:520px) and (max-width:999px){
  .bb .bb-ctl .bb-snd,.bb .bb-ctl .bb-mus{justify-content:center;min-width:44px;padding:4px 10px}
  .bb .bb-ctl .bb-snd span,.bb .bb-ctl .bb-mus span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* ((bkn-j7 K8b) and a short window (a phone on its side, 853x445; a zoomed-in browser, 587x370), where the top row shares
   its line with the record: the pills as their symbols and Speed as "1x" (the words for screen readers, as full screen
   has them there), so with Music the row is no wider than the four were and the battle starts where it did */
@media (max-height:480px){
  .bb .bb-ctl{gap:4px}
  .bb .bb-ctl .bb-pill:has(svg){justify-content:center;min-width:42px;padding:4px 9px}
  .bb .bb-ctl .bb-pill:has(svg) span,.bb .bb-spdw{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .bb .bb-spd{justify-content:center;min-width:42px;padding:4px 8px}
}
@media (max-height:480px){
  .bb-full .bb-pill:has(svg){justify-content:center;min-width:40px;padding:4px 9px}
  .bb-full .bb-pill:has(svg) span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* full screen north-south: the stage takes all the screen under the top row */
.bb-full.bb-ns .bb-fight{margin:0}
@media (prefers-reduced-motion:reduce){
  .bb-hpbar i{transition:none}
  .bb-ko.go,.bb-mtg{animation:none}
}

/* Leaderboard face-off banner (faceoff.js + arena.js): a small top-down stadium drawn on the canvas. #1 (gold) and #2
   (silver) on plates over the far stands, #3 (bronze) on the near stands at the bottom (faceoff.js sets its top).
   The plates keep the names readable over the crowd. Text never below .85rem. */
.fo{position:relative;max-width:40em;margin:0 0 14px;background:#0a0d17;border:2px solid var(--line,#2a3250);border-radius:14px;padding:10px 12px 8px}
.fo-labels{position:absolute;z-index:1;top:14px;left:16px;right:16px;pointer-events:none;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;gap:6px}
.fo p{margin:0}
.fo-side{display:flex;flex-wrap:wrap;align-items:center;gap:1px 6px;min-width:0;max-width:100%;justify-self:start;line-height:1.25;padding:4px 9px 5px;border-radius:9px;background:rgba(10,13,23,.84)}
.fo-side.r{justify-self:end;justify-content:flex-end;text-align:right}
.fo-side[hidden]{display:none}
.fo-rank{flex:none;min-width:2.2em;padding:0 7px;border-radius:999px;background:#ffd60a;color:#0f121e;font-weight:900;font-size:.85rem;line-height:1.6;text-align:center}
.fo-side.r .fo-rank{background:#d3dbea}
.fo-nm{min-width:0;font-weight:900;font-size:1.05rem;overflow-wrap:anywhere}
.fo-ct{flex-basis:100%;font-weight:700;font-size:.85rem;color:var(--soft,#b9c2d9)}
.fo-wide .fo-ct{flex-basis:auto}
/* a phone-narrow banner: slimmer plates so a long name keeps to one line */
.fo-narrow .fo-labels{left:9px;right:9px;gap:4px}
.fo-narrow .fo-side{padding:3px 6px 4px}
.fo-narrow .fo-nm{font-size:.88rem}
.fo-narrow .fo-vs{padding:1px 5px;letter-spacing:.06em}
.fo-side{line-height:1.2}
/* #3: one line on the near stands, centred */
.fo-side.t{position:absolute;z-index:1;left:50%;transform:translateX(-50%);flex-wrap:nowrap;white-space:nowrap;max-width:calc(100% - 32px);overflow:hidden;pointer-events:none;padding:2px 9px 2px 3px}
.fo-side.t .fo-rank{background:#e7a568}
.fo-side.t .fo-nm{font-size:.9rem;overflow:hidden;text-overflow:ellipsis}
.fo-side.t .fo-ct{flex-basis:auto}
.fo-vs{align-self:start;margin-top:5px;padding:1px 8px;border-radius:999px;background:rgba(10,13,23,.84);font-weight:900;font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan,#48d0ff)}
.fo-stage{display:block;max-width:none;border:0;border-radius:4px}
/* what just happened ("Greninja used Water Gun!"): always the same height (no jumps); two lines on a narrow banner, so
   "Since your last visit: Gengar kicked Pikachu down to #3!" fits a phone */
.fo-cap{height:1.45em;margin:2px 0 0;font-size:.9rem;font-weight:700;line-height:1.45;color:var(--soft,#b9c2d9);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fo-cap.two{height:2.9em;white-space:normal;display:flex;align-items:center;justify-content:center;text-overflow:clip}
/* ---------- phase 3 (Sitting 1): energy, held items, moves by level, the Bag, evolutions ---------- */
/* the energy bar: thin, under the HP bar in the same row (the HP box keeps its height); its first 30 % a red zone (a
   move ending there leaves it exhausted next turn: battle.js / rules.js EN.red); red when in it, pulsing when exhausted */
.bb-bars{flex:1 1 auto;min-width:24px;display:flex;flex-direction:column;gap:2px}
.bb-bars>.bb-hpbar{flex:none;width:100%}
.bb-enbar{position:relative;display:block;height:4px;border-radius:999px;overflow:hidden;
  background:linear-gradient(90deg,rgba(255,110,110,.42) 0 30%,#232a44 30% 100%);box-shadow:0 0 0 1px rgba(0,0,0,.4)}
.bb-enbar[hidden]{display:none}
.bb-enbar i{display:block;height:100%;width:100%;border-radius:inherit;background:#59c8ff;transition:width .35s ease-out,background .2s}
.bb-hud.foe .bb-enbar{background:linear-gradient(270deg,rgba(255,110,110,.42) 0 30%,#232a44 30% 100%)}
.bb-hud.foe .bb-enbar i{margin-left:auto}
.bb-enbar i.red{background:#ff6b6b}
.bb-hud.bb-tired .bb-enbar i{animation:bb-tired 1s ease-in-out infinite}
@keyframes bb-tired{0%,100%{opacity:1}50%{opacity:.45}}
/* the held item's icon after the HP numbers (none: no room taken) */
.bb-held{flex:none;display:inline-flex;align-items:center}
.bb-held:empty{display:none}
.bb-held img{width:16px;height:16px;image-rendering:pixelated}
/* a move's energy cost: a small bolt and the number in the button's corner (red: it would leave it exhausted) */
.bb-mc{order:4;flex:none;margin-left:auto;display:inline-flex;align-items:center;gap:2px;font-size:.8rem;font-weight:900;line-height:1.3;color:#9fdcff}
.bb-mc::before{content:"";width:7px;height:10px;background:currentColor;clip-path:polygon(60% 0,0 58%,45% 58%,30% 100%,100% 38%,55% 38%,80% 0)}
.bb-mc.red{color:#ff8a8a}
.bb-move[data-locked="1"]{border-style:dashed;border-color:#3a4260}
.bb-move[data-locked="1"] .bb-mn{color:var(--soft,#b9c2d9)}
.bb-ml{color:#ffd27a}
.bb-ns .bb-move[data-locked="1"] .bb-ml{display:inline;order:3;font-size:.8rem}
/* a move just learned: a soft gold glow that fades out (reduced motion: a steady one) */
.bb-move.bb-learn{animation:bb-learn 1.4s ease-out}
@keyframes bb-learn{0%{box-shadow:0 0 0 2px #ffd60a,0 0 18px 6px rgba(255,214,10,.7)}100%{box-shadow:0 0 0 2px rgba(255,214,10,0),0 0 18px 6px rgba(255,214,10,0)}}
@media (prefers-reduced-motion:reduce){ .bb-move.bb-learn{animation:none;box-shadow:0 0 0 2px #ffd60a,0 0 14px 4px rgba(255,214,10,.45)} }
/* (bkn-j7 K2b) the journey's panel (battle.js paintType / paintBrace): two of the 2 x 2's cells, a move's size. TYPE (top
   right) flips the move buttons through every move it has learned, by type, its favourites first: "TYPE ▸" and the page
   ("1/2") over the type's chip, its symbol and name (the moves' chip; the favourites a gold "★ Favourites"), the border
   in the type's colour. BRACE (top left): a shield, its name, "+40" as the energy it gets back (the energy's colour) */
.bb .bb-move.bb-typeb{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-content:center;align-items:center;gap:3px 6px}
.bb-tyl{grid-column:1;grid-row:1;min-width:0;font-size:.75rem;font-weight:900;letter-spacing:.1em;line-height:1.2;color:var(--soft,#b9c2d9);white-space:nowrap}
.bb-tya{margin-left:5px;letter-spacing:0;color:var(--tc,#ffd60a)}
.bb-typg{grid-column:2;grid-row:1;font-size:.8rem;font-weight:900;line-height:1.2;color:var(--soft,#b9c2d9)}
.bb-typg:empty{display:none}
.bb-tyc{grid-column:1 / 3;grid-row:2;justify-self:start;max-width:100%;min-width:0;display:inline-flex;align-items:center;gap:5px;padding:1px 10px 1px 4px;border-radius:999px;
  background:var(--tc,#a8a77a);color:var(--tci,#0f121e);font-weight:900;font-size:.9rem;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bb-tyc:not(:has(img)){padding-left:10px}
.bb-tyc .bb-ti{flex:none}
@media (hover:hover) and (pointer:fine){ .bb .bb-move.bb-typeb{padding-right:24px} }
.bb .bb-move.bb-typeb.bb-flip{animation:bb-flip .25s ease-out}
@keyframes bb-flip{0%{transform:scale(.95)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){ .bb .bb-move.bb-typeb.bb-flip{animation:none} }
.bb-ns .bb-move.bb-typeb{gap:1px 6px}
.bb-ns .bb-tyl{font-size:.7rem}
.bb-ns .bb-tyc{font-size:.85rem;line-height:1.35}
.bb-ns .bb-tyc .bb-ti{width:16px;height:16px}
/* (a 320 px phone: the chip a little smaller, the favourites' star dropped, so "Fighting" and "Favourites" are whole) */
@container bb (max-width:290px){ .bb-ns .bb-tyc{font-size:.78rem;padding:1px 7px 1px 3px;gap:3px} .bb-ns .bb-tyc:not(:has(img)){padding-left:7px} .bb-ns .bb-tystar{display:none} }
.bb-bri{display:inline-flex;flex:none;width:18px;height:18px;color:#9fdcff}
.bb-bri svg{width:100%;height:100%}
.bb-mc.bb-mcb{color:#9fdcff}
/* the battle text and the Bag button beside it */
.bb-textrow{display:flex;align-items:stretch;gap:8px;min-width:0}
.bb-textrow>.bb-text{flex:1 1 auto;min-width:0;margin:0}
.bb .bb-bagb{flex:none;align-self:center;position:relative}
.bb .bb-bagb.bb-pill span{position:static;width:auto;height:auto;overflow:visible;clip:auto}   /* (its word stays on phones too) */
.bb .bb-bagb[hidden]{display:none}
.bb .bb-bagb:disabled{opacity:.5;cursor:default}
.bb .bb-bagb:disabled:hover{background:transparent;color:var(--ink,#f4f6fb);border-color:var(--line,#2a3250)}
.bb .bb-bagb[data-n]:not([data-n="0"])::after{content:attr(data-n);position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;padding:0 3px;border-radius:999px;
  background:#ffd60a;color:#0f121e;font-size:.7rem;line-height:16px;text-align:center}
.bb .bb-bagb.bb-bagnew{border-color:#ffd60a;box-shadow:0 0 10px rgba(255,214,10,.55)}
.bb-ns .bb-textrow{gap:5px}
.bb-ns .bb-bagb{min-height:26px;padding:1px 9px}
.bb-ns .bb-bagb::before{content:"";position:absolute;inset:-9px -4px}      /* (a bigger place to tap than it looks) */
/* the Bag: its items in the moves' place (a 2-column grid; it scrolls if long), then who gets one */
.bb-bag{display:flex;flex-direction:column;gap:6px;min-width:0;padding:6px;border:2px solid var(--line,#2a3250);border-radius:12px;background:#0a0d17}
.bb-bag[hidden]{display:none}
.bb-bagh{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bb-bagt{margin:0;font-weight:900;font-size:.9rem}
.bb .bb-bagx{padding:4px 12px;min-height:30px;font-size:.85rem}
.bb-bagl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;max-height:9.5em;overflow-y:auto}
.bb-bagi{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;column-gap:6px;align-items:center;min-height:44px;padding:4px 8px;text-align:left;
  color:var(--ink,#f4f6fb);background:#141a2b;border:2px solid var(--line,#2a3250);border-radius:10px}
.bb-bagi:hover:not(:disabled),.bb-bagi:focus{background:#1c2236;color:var(--ink,#f4f6fb)}
.bb-bagi:disabled:hover{background:#141a2b;color:var(--ink,#f4f6fb)}
.bb-bagi:disabled{opacity:.5;cursor:default}
.bb-bagic{grid-row:1 / span 2;width:24px;height:24px;image-rendering:pixelated}
.bb-bagn{font-weight:900;font-size:.9rem;line-height:1.2;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bb-bagc{font-weight:900;font-size:.85rem;color:#ffd60a}
.bb-baga{grid-column:2 / span 2;font-size:.75rem;font-weight:700;line-height:1.25;color:var(--soft,#b9c2d9)}
.bb-bagw{grid-template-columns:1fr}
.bb-bagw .bb-baga{grid-column:1}
.bb-ns .bb-bag{padding:5px;border-width:1px;background:rgba(10,13,23,.92)}
.bb-ns .bb-bagl{max-height:94px;gap:5px}          /* (two rows, as the moves: the pitch keeps its size; it scrolls) */
.bb-ns .bb-bagh .bb-bagx{min-height:26px;padding:1px 10px}
.bb-ns .bb-bag{gap:4px}
@container bb (max-width:290px){ .bb-ns .bb-baga{display:none} .bb-ns .bb-bagw .bb-baga{display:block} }
/* evolutions after a battle: the question with Evolve! and Not now; "Evolve X" for one you said Not now to */
.bb-evo{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:6px 10px;border:2px solid #ffd60a;border-radius:12px;background:rgba(255,214,10,.08)}
.bb-evo[hidden],.bb-evol[hidden]{display:none}
.bb-evoq{flex:1 1 100%;margin:0;font-weight:900}
.bb-evoy{padding:10px 20px;font-weight:900;background:#ffd60a;color:#0f121e;border-radius:999px}
.bb-evon{padding:8px 16px}
.bb-evol{display:flex;flex-wrap:wrap;gap:6px}
.bb-evob{padding:6px 12px;font-size:.85rem}
/* ((bkn-t V4) the stones: one button a stone (its icon, "Use the Thunder Stone" / Eevee's "Water Stone → Vaporeon") */
.bb-evos{display:flex;flex-wrap:wrap;gap:6px 8px}
.bb-evos[hidden]{display:none}
.bb-evost{display:inline-flex;align-items:center;gap:6px;padding:6px 14px 6px 8px}
.bb-evost .bb-bagic{width:24px;height:24px;image-rendering:pixelated}
.bb-ns .bb-evost{padding:5px 10px 5px 6px}
.bb-ns .bb-evo{padding:5px 8px;gap:5px 8px}
.bb-ns .bb-evoy{padding:8px 16px}
@media (prefers-reduced-motion:reduce){ .bb-hud.bb-tired .bb-enbar i{animation:none} .bb-enbar i{transition:none} }

/* (phase 3 Sitting 2) the streak rule's notice under the hint: left mid-battle / a vote swapped mid-battle */
.bb-note{margin:6px 0 0;font-weight:700;color:#ffd60a;line-height:1.35}
.bb-note[hidden]{display:none}

/* ---------- the Kanto journey (phase 3 part 2, J1; journey.js draws .bb-jr's screens): "Start a new adventure" under
   Battle! (Battle! keeps its row across the box: Brian's "Not in two rows"), the adventure's screens in the box (the map
   strip, the place, the team, the Box, the Pokédex, the starter pick, a badge), and in battle the trainer's portrait in
   the foe's corner (4 moods: it pops in, and pops again at each change of face; reduced motion: no movement) ---------- */
.bb .bb-adv{display:block;width:100%;min-height:48px;margin:10px 0 0;padding:10px 16px;border-radius:14px;background:transparent;color:var(--cyan,#48d0ff);
  border:2px solid var(--cyan,#48d0ff);font-size:1.05rem;font-weight:900;line-height:1.3}
.bb .bb-adv:hover{background:var(--bg,#0f121e);color:#fff;border-color:#fff}
.bb-adv-on > .bb-start{display:none}
/* (J6, found re-reading: since J1 "Back to your team" from the adventure left the shut box empty on /vote, the rule
   above outranking the panel's) shut, the box is its Battle! row, whatever was open in it */
.bb-panel.bb-shut > .bb-start{display:block}
/* (J6) the adventure on its own site (battle.js openFrame): its frame fills the box, as tall as the screen (the battle in
   it fits the screen as the box's own does); the box keeps "Back to your team", the heading and the record, the frame its
   own sound / speed / zoom / full screen. Until the frame says it's ready: no height (the "Getting your adventure ready…"
   line). The kill switch's button ("The adventure is resting right now."): plain, not a press */
.bb-advf{display:block;width:100%;height:0;border:0;margin:0;padding:0;background:transparent;visibility:hidden}
.bb-advf.on{height:100vh;height:100dvh;visibility:visible}
.bb-advf-on > .bb-top > .bb-ctl{display:none}
.bb .bb-adv:disabled{color:var(--soft,#b9c2d9);border-color:var(--line,#2a3250);background:transparent;cursor:default}
/* (J6) the adventure site's page (battle.js opts.only "journey"): the journey alone, no card of its own (as the panel on
   /vote), only the controls in its top row */
.bb.bb-only-j:not(.bb-full){background:none;border:0;border-radius:0;padding:0;margin:0;max-width:none}
.bb-only-j > .bb-start{display:none !important}
.bb-only-j > .bb-top > .bb-h,.bb-only-j > .bb-top > .bb-label,.bb-only-j > .bb-top > .bb-record{display:none}
.bb-jr{display:grid;gap:12px;grid-template-columns:minmax(0,1fr);margin-top:4px}
.bb-jr[hidden]{display:none}
.bb-jload{padding:24px 0;text-align:center;color:var(--soft,#b9c2d9);font-weight:700}
.bb-jr h4,.bb-jr h5,.bb-jr h6{margin:0}
.jr-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.jr-title{flex:1 1 auto;font-size:1.05rem;font-weight:900;color:#fff}
.bb .jr-dex{min-height:44px;padding:4px 12px;border-radius:999px;background:transparent;color:var(--ink,#f4f6fb);border:2px solid var(--line,#2a3250);font-size:.85rem;font-weight:900}
.bb .jr-dex:hover{border-color:var(--cyan,#48d0ff);color:var(--cyan,#48d0ff);background:var(--bg,#0f121e)}
.jr-badges{display:inline-flex;gap:4px}
.jr-bd{width:14px;height:14px;border-radius:50%;border:2px solid var(--line,#2a3250)}
.jr-bd.on{border-color:transparent;background:radial-gradient(circle at 35% 30%,#fff 0 12%,var(--bd,#b9bfcc) 40%,var(--bd2,#5d6270) 100%);box-shadow:0 0 6px rgba(255,255,255,.35)}
/* each Gym badge's colour (--bd, and --bd2 its shade): the header's dots, the big badge, the map strip's badge stops
   (journey.js sets data-n on li.jr-stop.badge); 4 (Rainbow) is a rainbow in the dots */
.jr-bd[data-n="1"],.jr-bigbadge[data-n="1"],.jr-stop.badge[data-n="1"]{--bd:#a9adb8;--bd2:#5d6270}
.jr-bd[data-n="2"],.jr-bigbadge[data-n="2"],.jr-stop.badge[data-n="2"]{--bd:#4aa8ff;--bd2:#1a4f9a}
.jr-bd[data-n="3"],.jr-bigbadge[data-n="3"],.jr-stop.badge[data-n="3"]{--bd:#ffb52e;--bd2:#a35a08}
.jr-bd[data-n="4"],.jr-bigbadge[data-n="4"],.jr-stop.badge[data-n="4"]{--bd:#b07cff;--bd2:#5a2fa8}
.jr-bd[data-n="5"],.jr-bigbadge[data-n="5"],.jr-stop.badge[data-n="5"]{--bd:#ff6fae;--bd2:#9a2a5e}
.jr-bd[data-n="6"],.jr-bigbadge[data-n="6"],.jr-stop.badge[data-n="6"]{--bd:#f2c14e;--bd2:#8a5e10}
.jr-bd[data-n="7"],.jr-bigbadge[data-n="7"],.jr-stop.badge[data-n="7"]{--bd:#ff5a2a;--bd2:#8e1a0c}
.jr-bd[data-n="8"],.jr-bigbadge[data-n="8"],.jr-stop.badge[data-n="8"]{--bd:#4cc35a;--bd2:#1d6a2c}
.jr-bd.on[data-n="4"]{background:radial-gradient(circle at 35% 30%,#fff 0 12%,rgba(255,255,255,0) 45%),conic-gradient(#ff5a5a,#ffa53a,#ffe14a,#62d36b,#3fc6e8,#4a7dff,#a46bff,#ff6fc8,#ff5a5a)}
/* the map strip: the road so far, where you are, what's ahead (scrolls sideways on a phone; "here" kept in view) */
.jr-map{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding:2px 0 4px;-webkit-mask:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent);mask:linear-gradient(90deg,transparent,#000 12px,#000 calc(100% - 12px),transparent)}
.jr-road{display:flex;margin:0;padding:0 12px;list-style:none;min-width:max-content}
.jr-stop{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:76px;padding:2px 4px;text-align:center}
.jr-stop::before{content:"";position:absolute;top:10px;left:-50%;width:100%;height:4px;border-radius:2px;background:var(--line,#2a3250);z-index:0}
.jr-stop:first-child::before{display:none}
.jr-stop.done::before,.jr-stop.here::before{background:linear-gradient(90deg,var(--cyan,#48d0ff),#7fe0ff)}
.jr-dot{position:relative;z-index:1;width:16px;height:16px;margin:2px 0;border-radius:50%;background:var(--bg2,#161b2c);border:3px solid var(--line,#2a3250)}
.jr-stop.town .jr-dot{border-radius:5px}
.jr-stop.gym .jr-dot{border-radius:3px;transform:rotate(45deg) scale(.9)}
.jr-stop.done .jr-dot{background:var(--cyan,#48d0ff);border-color:var(--cyan,#48d0ff)}
.jr-stop.badge .jr-dot{background:radial-gradient(circle at 35% 30%,#fff 0 12%,var(--bd,#a9adb8) 45%,var(--bd2,#5d6270));border-color:#ffd60a}
.jr-stop.badge:where([data-n="4"]) .jr-dot{background:radial-gradient(circle at 35% 30%,#fff 0 12%,rgba(255,255,255,0) 45%),conic-gradient(#ff5a5a,#ffa53a,#ffe14a,#62d36b,#3fc6e8,#4a7dff,#a46bff,#ff6fc8,#ff5a5a)}
.jr-stop.here .jr-dot{width:20px;height:20px;margin:0;background:#ffd60a;border-color:#fff;box-shadow:0 0 0 4px rgba(255,214,10,.3),0 0 12px 3px rgba(255,214,10,.55)}
.jr-stop.soon .jr-dot{border-style:dashed}
.jr-sn{max-width:76px;font-size:.85rem;font-weight:800;line-height:1.2;color:var(--soft,#b9c2d9);text-wrap:balance}
.jr-stop.here .jr-sn{color:#fff;font-weight:900}
.jr-stop.soon .jr-sn{opacity:.75}
/* the place */
.jr-place{display:grid;gap:10px;padding:14px;border-radius:14px;background:var(--bg,#0f121e);border:1px solid var(--line,#2a3250);
  background-image:linear-gradient(180deg,var(--jr-tint,rgba(72,208,255,.10)),transparent 70%)}
.jr-place.route{--jr-tint:rgba(90,190,90,.16)}
.jr-place.forest{--jr-tint:rgba(40,130,70,.24)}
.jr-place.gym{--jr-tint:rgba(170,140,100,.22)}
.jr-place.town{--jr-tint:rgba(255,214,10,.10)}
.jr-pn{font-size:1.25rem;font-weight:900;color:#fff}
.jr-story{color:var(--soft,#b9c2d9);font-weight:600;font-size:.95rem;line-height:1.45}
.jr-msg{padding:8px 12px;border-radius:10px;background:rgba(72,208,255,.12);color:#fff;font-weight:800;line-height:1.4}
/* ((bkn-t V4) a FireRed stone found on arriving: its icon (24 px, shown 2x crisp), "You found a Moon Stone!", where it went */
.jr-find{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 12px;margin:8px 0;padding:10px 14px;border:2px solid #ffd60a;border-radius:12px;background:rgba(255,214,10,.08)}
.jr-findi{width:48px;height:48px;image-rendering:pixelated}
.jr-findt{margin:0;font-weight:900;font-size:1.05rem}
.jr-findn{grid-column:1/-1;margin:0;font-size:.9rem;opacity:.85}
.jr-acts{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.bb .jr-acts button,.bb .jr-start .jr-go,.bb .jr-boxv .jr-go,.bb .jr-dexv .jr-go,.bb .jr-badgev .jr-go{min-height:48px;width:100%;border-radius:12px;font-weight:900;font-size:1rem}
.bb .jr-heal{background:#ff8fa8;color:#0f121e}
.bb .jr-heal:hover{background:#fff}
.bb .jr-wild{background:#5cc46e;color:#0f121e}
.bb .jr-wild:hover{background:#fff}
.bb .jr-go{background:#ffd60a;color:#0f121e}
.bb .jr-go:hover{background:#fff}
.bb .jr-go:disabled,.bb .jr-fight:disabled,.bb .jr-wild:disabled{opacity:.45;cursor:not-allowed;background:var(--line,#2a3250);color:var(--soft,#b9c2d9)}
.jr-nav{display:flex;gap:10px}
.jr-nav > *{min-width:0}         /* (J3, fresh eyes) a long place name wraps instead of pushing the buttons past the card (320) */
.bb .jr-nav .jr-back{flex:0 1 auto;width:auto;padding:8px 14px;font-size:.95rem}
.bb .jr-nav .jr-go{flex:1 1 auto}
.jr-block{color:#ffb37a;font-weight:800;font-size:.9rem;line-height:1.4}
.jr-done{color:#ffd60a;font-weight:900}
.jr-foe{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:8px 12px;padding:10px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--line,#2a3250)}
.jr-foe .jr-tp{width:64px;height:64px;border-radius:12px;background:#0a0d17;object-fit:cover}
.jr-foe.gym .jr-tp{box-shadow:0 0 0 2px #ffd60a}
/* (J2) the big moments on the road: Blue, Team Rocket, Snorlax (a ring in the site's red; their opening line in quotes) */
.jr-foe.big .jr-tp{box-shadow:0 0 0 2px #ff6b5e}
.jr-say{display:block;margin-top:4px;font-style:italic;color:var(--soft,#b9c2d9)}
.jr-ft{color:var(--ink,#f4f6fb);font-weight:700;line-height:1.4}
.jr-party{color:var(--soft,#b9c2d9)}
.bb .jr-foe .jr-fight{grid-column:1/-1;background:#ff6b5e;color:#0f121e}
.bb .jr-foe .jr-fight:hover{background:#fff}
/* (J4) a place's trainers: how many beaten, the need; then the warm-up choice (a quieter card: optional) */
.jr-need{margin:2px 0;font-size:.92rem;line-height:1.4;color:var(--soft,#b9c2d9)}
.jr-foe.jr-warm{grid-template-columns:40px minmax(0,1fr);padding:8px 10px;background:rgba(255,255,255,.02);border-style:dashed}
.jr-foe.jr-warm .jr-tp{width:40px;height:40px}
.bb .jr-foe.jr-warm .jr-fight{background:transparent;color:var(--ink,#fff);border:1px solid #ff6b5e}
.bb .jr-foe.jr-warm .jr-fight:hover{background:#ff6b5e;color:#0f121e}
/* (J5, Brian's card 1: "The Portraits dont need a black background and square added ... the Circule portrait is perfect as
   they were") the trainers' and Leaders' portraits are round pictures on clear corners (the webp keeps them): drawn as they
   are, no dark square, no square ring; a soft shadow under the circle only (filter follows the picture's own shape) */
.jr-foe .jr-tp.jr-trp,.jr-foe.gym .jr-tp.jr-trp,.jr-foe.big .jr-tp.jr-trp{background:none;border-radius:0;box-shadow:none;object-fit:contain;filter:drop-shadow(0 2px 4px rgba(0,0,0,.55))}
/* (J5, card 8) after a loss, at the Center: try that battle again at once, or train first; a rematch: the warm-up's card */
.jr-foe.jr-retry{border-color:#ff6b5e;background:rgba(255,107,94,.08)}
.bb .jr-foe .jr-train{grid-column:1/-1;min-height:44px;border-radius:10px;font-weight:900}
@container bb (max-width:299px){ .bb .jr-foe .jr-train{display:block;width:100%;margin-top:8px} }
/* (J3, fresh eyes) on the smallest phones (a battle box under 300 px: 320-360) the card's words wrap round the portrait
   and then use the whole width: in the portrait's column a line ran 9-10 lines and pushed "Battle …!" off the screen */
@container bb (max-width:299px){
  .jr-foe{display:block}
  .jr-foe .jr-tp{float:left;margin:2px 10px 4px 0}
  .bb .jr-foe .jr-fight{clear:both;display:block;width:100%;margin-top:10px}
}
.jr-credit{color:var(--soft,#b9c2d9);font-size:.85rem;line-height:1.35}
/* the team, the Box, the Pokédex */
.jr-team,.jr-boxv,.jr-dexv,.jr-start,.jr-badgev{display:grid;gap:10px}
.jr-th{font-size:1rem;font-weight:900;color:var(--cyan,#48d0ff)}
.jr-mons{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;margin:0;padding:0;list-style:none}
.bb .jr-monb{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) auto;grid-template-rows:auto auto auto;align-items:center;gap:0 8px;width:100%;min-height:60px;padding:8px 10px;
  border-radius:12px;background:rgba(255,255,255,.04);border:2px solid var(--line,#2a3250);color:var(--ink,#f4f6fb);text-align:left;font-weight:700}
.bb button.jr-monb:hover{border-color:var(--cyan,#48d0ff);background:var(--bg,#0f121e)}
.jr-mon.sel .jr-monb{border-color:#ffd60a}
.jr-mon.out .jr-monb{opacity:.6}
.jr-monb .jr-face{grid-row:1/4;width:40px;height:40px;image-rendering:pixelated;border-radius:8px;background:#0a0d17}
.jr-mn{font-weight:900;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jr-ml{font-size:.85rem;font-weight:800;color:var(--soft,#b9c2d9);justify-self:end}
.jr-hp{grid-column:2/4;display:block;height:6px;border-radius:3px;background:#2a3250;overflow:hidden}
.jr-hp i{display:block;height:100%;border-radius:3px;background:#5cdb6b}
.jr-hp i[data-c="mid"]{background:#ffd60a}
.jr-hp i[data-c="low"],.jr-hp i[data-c="out"]{background:#ff5a4e}
.jr-mh{grid-column:2/4;font-size:.85rem;font-weight:800;color:var(--soft,#b9c2d9)}
/* (Brian: "If you box one of your main Pokemon they could just have a tiny Portrait top left so you dont forget your vote") */
.jr-monb .jr-vote{position:absolute;left:-6px;top:-6px;width:22px;height:22px;padding:1px;border-radius:50%;background:#0a0d17;border:2px solid #ffd60a;image-rendering:pixelated;box-shadow:0 1px 4px rgba(0,0,0,.6)}
.jr-sel{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.jr-seln{font-weight:900}
.bb .jr-sel button{min-height:40px;padding:6px 14px;border-radius:10px;font-weight:900}
/* ((bkn-u U3) a Pokémon's story (journey.js storyOf): under its buttons on the team, "Story" on a Box card; review30's picture */
.jr-tale{display:grid;gap:8px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.05);border:2px solid rgba(255,214,10,.55)}
.jr-tale-h{margin:0;font-size:1.05rem;font-weight:900;color:#ffd60a}
.jr-tale p{margin:0;line-height:1.4;font-weight:700}
.jr-tale-n{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.jr-tale-c{display:grid;justify-items:center;gap:2px;padding:8px 4px;border-radius:10px;background:rgba(255,255,255,.07);text-align:center}
.jr-tale-c b{font-size:1.35rem;font-weight:900;line-height:1.1}
.jr-tale-c span{font-size:.78rem;font-weight:700;color:var(--soft,#b9c2d9);line-height:1.2}
.jr-tale-since{font-size:.85rem;color:var(--soft,#b9c2d9)}
.jr-tale-bd,.jr-tale-lg{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.jr-tale-none{color:var(--soft,#b9c2d9)}
.jr-tale-cup{padding:1px 10px;border-radius:999px;background:rgba(255,214,10,.16);color:#ffd60a;font-weight:900}
.jr-tale-cup.won{background:#ffd60a;color:#0f121e}
.bb .jr-tale-x{justify-self:start;min-height:40px;padding:6px 14px;border-radius:10px;font-weight:900}
/* ((bkn-t V3) a team member's Size: the picture to judge by, the slider (50-200%), its %, Normal size */
.bb .jr-sel button.jr-sizeb.on{background:rgba(72,208,255,.18);border-color:#48d0ff}
.jr-size{display:grid;gap:8px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.05);border:2px solid rgba(72,208,255,.55)}
.jr-size-h{margin:0;font-size:1.05rem;font-weight:900;color:#48d0ff}
.jr-size-pic{display:block;width:100%;height:170px;border-radius:10px;background:linear-gradient(#1b2a3c,#20341f 88%);image-rendering:pixelated}
.jr-size-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.jr-size-l{font-weight:900}
.jr-size-in{flex:1 1 140px;min-width:0;height:40px;margin:0;accent-color:#48d0ff;cursor:pointer}
.jr-size-pct{min-width:3.4em;font-weight:900;font-size:1.15rem;font-variant-numeric:tabular-nums;text-align:right}
.bb .jr-size-back{min-height:40px;padding:6px 14px;border-radius:10px;font-weight:900}
.jr-size-note{margin:0;font-size:.85rem;line-height:1.4;font-weight:700;color:var(--soft,#b9c2d9)}
@media (min-width:700px){.jr-size-pic{height:210px}}
.bb .jr-storyb{margin-top:4px;min-height:36px;padding:2px 14px;border-radius:999px;font-size:.8rem;font-weight:900}
.bb .jr-storyb.on{border-color:#ffd60a;color:#ffd60a}
/* (bkn-j7 K2) a member's moves: the 4 it takes into battle (slots), then every move it has learned (never forgotten); a tap
   equips, swaps or takes one out. One column at every width; each row: type chip, name, what it is (category, power,
   accuracy, energy, the level learned), what it does */
.jr-movesv{display:grid;gap:10px}
.jr-mvhead{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:10px}
.jr-mvhead .jr-face{width:48px;height:48px;image-rendering:pixelated;border-radius:10px;background:#0a0d17}
.jr-mvhead .jr-mvface{display:block;overflow:hidden}   /* (bkn-j7 K3b) its Determined face: the strip's second 40 px cell */
.jr-mvhead .jr-mvface>img{display:block;width:500%;max-width:none;height:100%;margin-left:-100%;image-rendering:pixelated}
.jr-mvrow .jr-mvstab{display:block;color:#ffd60a;font-weight:800;font-size:.85rem;line-height:1.35}   /* (bkn-j7 K3b) STAB, said plainly */
.jr-mvhead .jr-th{font-size:1.1rem;color:#fff;overflow-wrap:anywhere}
.jr-mvslots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
/* a slot: the move's name on its own line (whole words), its type chip under it */
.jr-mvslot{display:grid;grid-template-columns:minmax(0,1fr);justify-items:start;align-content:center;gap:4px;width:100%;min-height:44px;padding:6px 8px;border-radius:10px;background:rgba(255,255,255,.05);border:2px solid var(--line,#2a3250);color:var(--ink,#f4f6fb);font-weight:800;text-align:left}
.jr-mvslot b{order:-1;line-height:1.2;min-width:0;max-width:100%;overflow-wrap:break-word}
.jr-mvslot .bb-mt,.jr-mvtop .bb-mt{white-space:nowrap;font-size:.78rem}
.jr-mvslot.empty{justify-items:center;border-style:dashed;color:var(--soft,#b9c2d9);font-weight:700}
.bb button.jr-mvslot{cursor:pointer;border-color:#ffd60a;background:rgba(255,214,10,.10)}
.bb button.jr-mvslot:hover,.bb button.jr-mvslot:focus-visible{background:#ffd60a;color:#0f121e}
.jr-mvlist{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.bb .jr-mvrow{display:grid;gap:3px;width:100%;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.03);border:2px solid var(--line,#2a3250);color:var(--ink,#f4f6fb);text-align:left;font-weight:700}
.bb .jr-mvrow:hover{border-color:var(--cyan,#48d0ff);background:var(--bg,#0f121e)}
.bb .jr-mvrow.on{border-color:#5cdb6b;background:rgba(92,219,107,.08)}
.bb .jr-mvrow.pick{border-color:#ffd60a;background:rgba(255,214,10,.12)}
.jr-mvtop{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.jr-mvn{font-size:1rem;font-weight:900}
.jr-mvst{margin-left:auto;padding:2px 8px;border-radius:999px;font-size:.8rem;font-weight:900;white-space:nowrap;background:var(--line,#2a3250);color:var(--soft,#b9c2d9)}
.jr-mvrow.on .jr-mvst{background:#5cdb6b;color:#0f121e}
.jr-mvrow.pick .jr-mvst{background:#ffd60a;color:#0f121e}
.jr-mvfacts{font-size:.82rem;font-weight:800;color:var(--soft,#b9c2d9)}
.jr-mvabout{font-size:.88rem;font-weight:600;line-height:1.35;color:var(--ink,#f4f6fb)}
.jr-mvnext{font-size:.88rem}
.bb .jr-movesv .jr-go{min-height:48px;width:100%;border-radius:12px;font-weight:900;font-size:1rem}
.bb .jr-mvcancel{justify-self:start;min-height:40px;padding:6px 14px;border-radius:10px;font-weight:900}
/* the smallest phones (a battle box under 300 px: 320-360): the 4 in battle one under another (a long name whole) */
@container bb (max-width:299px){ .jr-mvslots{grid-template-columns:minmax(0,1fr)} }
/* a short window (a phone on its side: 587 x 370, 853 x 445): the 4 in battle in one row when there is room */
@container bb (min-width:560px){ .jr-mvslots{grid-template-columns:repeat(4,minmax(0,1fr))} .jr-mvlist{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* (bkn-j7 K7f) the Moves screen as the battle's panel (journey.js panelMovesView; battle.js panelView paints the four
   buttons with the battle's own code, so every rule for .bb-move / .bb-typeb / .bb-brace above applies as in battle, and
   the box takes the battle's layout: north-south on an upright phone). Its top row is the battle's two columns (the
   .bb-fight rules above list .jr-pntop): the face and words where the stage is, the panel where the moves are, at the
   moves' width; one column (a phone) the panel under the words, the dock's full width. A picked button: a gold ring; the
   tip under the panel points at its column; the list's "Tap to swap" chips gold; Brace shown, not pressable */
.jr-pntop{display:grid;gap:10px 12px;align-items:start}   /* (its columns: the .bb-fight rules above; one column by default) */
.jr-pnl,.jr-pnr{display:grid;gap:8px;min-width:0;align-content:start}
.bb .jr-pn .bb-move.jr-pnpick{box-shadow:0 0 0 3px #ffd60a,0 0 14px 3px rgba(255,214,10,.55)}
.bb .jr-pn .bb-move.jr-pnbr{cursor:default}
.bb .jr-pn .bb-move.jr-pnbr:hover{background:#0a0d17}
.bb-ns .jr-pn .bb-move.jr-pnbr:hover{background:rgba(10,13,23,.9)}
.bb .jr-pn .bb-move.jr-pnempty{border-style:dashed;border-color:#ffd60a;color:#ffd60a}
.bb .jr-pn .bb-move.jr-pnhint{animation:jr-pnhint 1.4s ease-out}
@keyframes jr-pnhint{0%,60%{box-shadow:0 0 0 3px #ffd60a,0 0 16px 4px rgba(255,214,10,.6)}100%{box-shadow:0 0 0 3px rgba(255,214,10,0),0 0 16px 4px rgba(255,214,10,0)}}
@media (prefers-reduced-motion:reduce){ .bb .jr-pn .bb-move.jr-pnhint{animation:none;box-shadow:0 0 0 3px #ffd60a} }
.jr-pntiprow{position:relative;display:flex;align-items:center;gap:8px;min-width:0}
.jr-pntip{flex:1 1 auto;min-width:0;margin:0}
.jr-pntiprow.on{margin-top:3px;padding:4px 4px 4px 10px;border-radius:10px;background:#ffd60a;color:#0f121e}
.jr-pntiprow.on .jr-pntip{padding:2px 0;background:none;color:#0f121e;font-weight:900}
.jr-pntiprow.on::before{content:"";position:absolute;top:-7px;left:22%;border:7px solid transparent;border-top:0;border-bottom-color:#ffd60a}
.jr-pntiprow.on[data-at="r"]::before{left:auto;right:22%}
.bb .jr-pncancel,.bb .jr-pnftb{flex:none;min-height:44px;padding:6px 14px;border-radius:10px;font-weight:900}
.bb .jr-pntiprow.on .jr-pncancel{background:#0f121e;color:#fff;border-color:#0f121e}
.bb .jr-pnftb{justify-self:start}
.jr-pnnote{margin:0;color:var(--soft,#b9c2d9);font-weight:700;font-size:.88rem;line-height:1.4}
.jr-pnft{color:#ffd60a}
.bb .jr-mvrow.cand{border-color:rgba(255,214,10,.7)}
.jr-mvrow.cand .jr-mvst{background:#ffd60a;color:#0f121e}
.jr-pnv .jr-mvst{font-size:.85rem}   /* ("Tap to swap" is what to do here: the site's smallest label size, not K2's .8rem) */
.jr-bag{color:var(--soft,#b9c2d9);font-weight:700;line-height:1.4}
.jr-bag b{color:var(--ink,#f4f6fb)}
.jr-foot{display:grid;gap:6px;justify-items:start}
.bb .jr-new{min-height:44px;font-size:.9rem;padding:4px 0}
/* the starter pick: every generation's starters (and the first forms of your vote team) */
.jr-gen{font-size:.85rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--soft,#b9c2d9)}
/* (bkn-t T2) a Hall of Fame finish's better shiny roll waiting for the starter: the shiny star's gold */
.jr-boost{margin:0;padding:8px 12px;border-radius:12px;border:1px solid rgba(255,214,10,.55);background:rgba(255,214,10,.1);color:#ffd60a;font-weight:800;font-size:.95rem;line-height:1.4}
.jr-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:6px;margin:0;padding:0;list-style:none}
.bb .jr-pk{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;min-height:96px;padding:6px 4px;border-radius:12px;background:rgba(255,255,255,.04);
  border:2px solid var(--line,#2a3250);color:var(--ink,#f4f6fb)}
.bb .jr-pk:hover{border-color:#ffd60a;background:var(--bg,#0f121e)}
.jr-pick.vote .jr-pk{border-color:rgba(255,214,10,.55)}
.jr-pk .jr-face{width:48px;height:48px;image-rendering:pixelated}
.jr-pk .jr-mn{font-size:.85rem;max-width:100%}
.jr-pk .jr-ml{justify-self:auto}
.jr-confirm{display:grid;justify-items:center;gap:10px;padding:14px;border-radius:14px;background:var(--bg,#0f121e);border:1px solid var(--line,#2a3250);text-align:center}
.jr-confirm .jr-face.big{width:96px;height:96px;image-rendering:pixelated;border-radius:16px;background:#0a0d17}
.bb .jr-confirm .ghost{min-height:44px;width:100%;border-radius:12px}
/* a badge won: it lands on the shelf (and on the vote page's). The Kanto badges, CSS only, lit from the top left: 1 Boulder
   (grey octagon), 2 Cascade (raindrop), 3 Thunder (eight-point sun), 4 Rainbow (flower), 5 Soul (heart), 6 Marsh (two
   gold rings), 7 Volcano (flame), 8 Earth (leaf). The shape is drawn on ::before (--shape: its clip-path, --face: its
   paint, --mask: holes), so the glow, a drop-shadow on the badge itself, follows the shape instead of being clipped
   off. vote.css's .gym-badge (the shelf's, 48 px) has the same shapes: keep the two in step */
.jr-badgev{justify-items:center;text-align:center;padding:10px 0}
.jr-bigbadge{position:relative;width:96px;height:96px;filter:drop-shadow(0 0 14px rgba(255,214,10,.6));animation:jr-badge .7s cubic-bezier(.2,1.6,.4,1) both;
  --shape:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);--face:radial-gradient(circle at 34% 28%,#fff 0 8%,var(--bd,#a9adb8) 34%,#6a6f7c 72%,#3c404a 100%)}
.jr-bigbadge::before{content:"";position:absolute;inset:0;clip-path:var(--shape);background:var(--face);-webkit-mask:var(--mask,none);mask:var(--mask,none)}
.jr-bigbadge[data-n="2"]{--shape:polygon(50% 2%,50.8% 2.9%,53.3% 5.7%,57.4% 10.3%,62.8% 16.4%,68.9% 23.8%,75.2% 32.2%,80.9% 41.4%,85.5% 51%,88.4% 60.6%,89.2% 69.8%,87.7% 78.2%,83.7% 85.6%,77.5% 91.7%,69.5% 96.3%,60.1% 99.1%,50% 100%,39.9% 99.1%,30.5% 96.3%,22.5% 91.7%,16.3% 85.6%,12.3% 78.2%,10.8% 69.8%,11.6% 60.6%,14.5% 51%,19.1% 41.4%,24.8% 32.2%,31.1% 23.8%,37.2% 16.4%,42.6% 10.3%,46.7% 5.7%,49.2% 2.9%);--face:radial-gradient(circle at 40% 54%,#fff 0 7%,#a8dcff 22%,#3d9be8 50%,#1d5fb4 76%,#123a78 100%)}
.jr-bigbadge[data-n="3"]{--shape:polygon(50% 0%,61.9% 21.4%,85.4% 14.6%,78.6% 38.1%,100% 50%,78.6% 61.9%,85.4% 85.4%,61.9% 78.6%,50% 100%,38.1% 78.6%,14.6% 85.4%,21.4% 61.9%,0% 50%,21.4% 38.1%,14.6% 14.6%,38.1% 21.4%);--face:radial-gradient(circle at 50% 50%,transparent 0 15%,rgba(140,60,0,.5) 18% 21%,transparent 24%),radial-gradient(circle at 36% 32%,#fff 0 7%,#ffe77a 22%,#ffb12b 48%,#e0700f 74%,#9a4306 100%)}
.jr-bigbadge[data-n="4"]{--shape:polygon(61.1% 23.2%,71.7% 12.5%,79.5% 11.6%,85.4% 14.6%,88.4% 20.5%,87.5% 28.3%,76.8% 38.9%,91.9% 38.8%,98% 43.7%,100% 50%,98% 56.3%,91.9% 61.2%,76.8% 61.1%,87.5% 71.7%,88.4% 79.5%,85.4% 85.4%,79.5% 88.4%,71.7% 87.5%,61.1% 76.8%,61.2% 91.9%,56.3% 98%,50% 100%,43.7% 98%,38.8% 91.9%,38.9% 76.8%,28.3% 87.5%,20.5% 88.4%,14.6% 85.4%,11.6% 79.5%,12.5% 71.7%,23.2% 61.1%,8.1% 61.2%,2% 56.3%,0% 50%,2% 43.7%,8.1% 38.8%,23.2% 38.9%,12.5% 28.3%,11.6% 20.5%,14.6% 14.6%,20.5% 11.6%,28.3% 12.5%,38.9% 23.2%,38.8% 8.1%,43.7% 2%,50% 0%,56.3% 2%,61.2% 8.1%);--face:radial-gradient(circle at 34% 28%,rgba(255,255,255,.9) 0 5%,rgba(255,255,255,0) 24%),radial-gradient(circle closest-side,#fff6c4 0 14%,#f5c542 26%,#c07a14 33%,transparent 37%),radial-gradient(circle at 38% 34%,transparent 28%,rgba(0,0,0,.4) 100%),conic-gradient(from -22.5deg,#ff5a5a 0 45deg,#ffa53a 0 90deg,#ffe14a 0 135deg,#62d36b 0 180deg,#3fc6e8 0 225deg,#4a7dff 0 270deg,#a46bff 0 315deg,#ff6fc8 0)}
.jr-bigbadge[data-n="5"]{--shape:polygon(50% 26.8%,50.3% 24.9%,51.9% 20%,56% 13.8%,62.7% 8.4%,71.6% 5.7%,81.2% 6.9%,89.8% 12%,95.8% 20.1%,98% 29.8%,95.8% 39.9%,89.8% 49.7%,81.2% 58.8%,71.6% 67.3%,62.7% 75.2%,56% 82.4%,51.9% 88.4%,50.3% 92.4%,50% 93.8%,49.7% 92.4%,48.1% 88.4%,44% 82.4%,37.3% 75.2%,28.4% 67.3%,18.8% 58.8%,10.2% 49.7%,4.2% 39.9%,2% 29.8%,4.2% 20.1%,10.2% 12%,18.8% 6.9%,28.4% 5.7%,37.3% 8.4%,44% 13.8%,48.1% 20%,49.7% 24.9%);--face:radial-gradient(circle at 30% 24%,#fff 0 5%,#ffaccd 14%,#f2589b 38%,#c42f72 68%,#7e1747 100%)}
.jr-bigbadge[data-n="6"]{--shape:circle(50%);--mask:radial-gradient(closest-side,transparent 0 28%,#000 30% 54%,transparent 56% 68%,#000 70%);--face:radial-gradient(circle at 34% 28%,#fff 0 8%,#ffe28a 24%,#e3ac2e 52%,#a56c10 78%,#5e3d06 100%)}
.jr-bigbadge[data-n="7"]{--shape:polygon(54% 0%,60% 8%,65% 16%,68% 24%,70% 33%,74% 25%,79% 16%,83% 10%,86% 19%,89% 30%,92% 42%,94% 55%,92% 69%,87% 80%,79% 89%,68% 95%,56% 98.5%,44% 98.5%,32% 95%,22% 89%,14% 80%,9% 69%,7% 57%,8% 45%,11% 33%,15% 22%,19% 29%,24% 37%,28% 27%,34% 17%,41% 9%,48% 3%);--face:radial-gradient(circle at 38% 44%,rgba(255,255,255,.6) 0 4%,rgba(255,255,255,0) 16%),radial-gradient(ellipse 62% 58% at 50% 72%,#fff6c0 0 10%,#ffd04a 30%,#ff7a1e 58%,#e0361a 84%,#a3170c 100%)}
.jr-bigbadge[data-n="8"]{--shape:polygon(82.1% 11.7%,86.9% 21.6%,89.4% 32.2%,89.8% 43.2%,87.8% 53.9%,83.7% 64.1%,77.6% 73.1%,69.7% 80.8%,60.4% 86.6%,50.2% 90.4%,39.3% 91.9%,28.4% 91.2%,17.9% 88.3%,13.1% 78.4%,10.6% 67.8%,10.2% 56.8%,12.2% 46.1%,16.3% 35.9%,22.4% 26.9%,30.3% 19.2%,39.6% 13.4%,49.8% 9.6%,60.7% 8.1%,71.6% 8.8%);--face:linear-gradient(130deg,transparent 48%,rgba(14,70,30,.55) 49.3% 50.7%,transparent 52%),radial-gradient(circle at 36% 30%,#fff 0 7%,#b4f59a 22%,#4cbd57 50%,#228a3a 76%,#0f5223 100%)}
@keyframes jr-badge{from{transform:scale(.2) rotate(-40deg);opacity:0}to{transform:none;opacity:1}}
/* in battle: the trainer's portrait in the foe's corner, the name under it */
.bb-tp{position:absolute;right:8px;top:8px;z-index:3;display:grid;justify-items:center;gap:2px;pointer-events:none}
.bb-tp[hidden]{display:none}
/* (J5, Brian's card 1) the round portrait as it is: no dark square, no white square border; the shadow follows the circle */
.bb-tpi{width:84px;height:84px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.6))}
.bb-tpn{padding:1px 8px;border-radius:999px;background:rgba(10,13,23,.85);color:#fff;font-size:.85rem;font-weight:900;white-space:nowrap}
.bb-tp.in{animation:bb-tp-in .45s cubic-bezier(.2,1.4,.4,1) both}
.bb-tp.pop .bb-tpi{animation:bb-tp-pop .35s ease-out}
@keyframes bb-tp-in{from{transform:translateX(120%) scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes bb-tp-pop{0%{transform:scale(1)}40%{transform:scale(1.14) rotate(-3deg)}100%{transform:none}}
@container bb (max-width:520px){ .bb-tpi{width:64px;height:64px} }
.bb-credit{color:var(--soft,#b9c2d9);font-size:.85rem;line-height:1.35}
.bb-credit[hidden]{display:none}
@media (prefers-reduced-motion:reduce){ .bb-tp.in,.bb-tp.pop .bb-tpi,.jr-bigbadge{animation:none} }
/* (J3) the League and after: an Elite Four room's stop (a square, gold once won), the room's card in the League's purple,
   a legend's card in gold, the header's Hall of Fame chip, a shiny member's star */
.jr-place.league{--jr-tint:rgba(150,90,255,.2)}
.jr-stop.league .jr-dot{border-radius:3px}
.jr-stop.league.won .jr-dot{background:#ffd60a;border-color:#ffd60a}
.jr-foe.legend{border-color:rgba(255,214,10,.6);background:linear-gradient(135deg,rgba(255,214,10,.12),rgba(255,255,255,.03) 60%)}
.jr-foe.legend .jr-tp{box-shadow:0 0 0 2px #ffd60a,0 0 14px 2px rgba(255,214,10,.45);image-rendering:pixelated}
.bb .jr-foe.legend .jr-fight{background:#ffd60a}
.bb .jr-hof{min-height:44px;padding:4px 12px;border-radius:999px;background:rgba(255,214,10,.14);color:#ffd60a;border:2px solid #ffd60a;font-size:.85rem;font-weight:900}
.bb .jr-hof:hover{background:#ffd60a;color:#0f121e}
.jr-monb .jr-shiny{position:absolute;right:6px;top:2px;color:#ffd60a;font-size:.85rem;font-weight:900;text-shadow:0 0 6px rgba(255,214,10,.8)}
.bb .jr-monb.shiny{border-color:rgba(255,214,10,.55)}
/* (J5, Brian's card 15) a legend's card: the try it was caught on */
.jr-monb .jr-try{grid-column:2/4;justify-self:start;margin-top:3px;padding:0 8px;border-radius:999px;background:#ffd60a;color:#0f121e;font-size:.72rem;font-weight:900;line-height:1.5;white-space:nowrap}
/* (bkn-j7 K4) a gift from Big Kid Nation: a pink ribbon in the same place; a rare visitor's Pokédex card */
.jr-monb .jr-try.jr-gift{background:#ff8fd1}
.jr-mon.rare .jr-mn{color:#d9b8ff}
/* (bkn-j7 K7d) a Pokédex card's home region, small plain words under the name ("Unova") */
.jr-monb .jr-mr{grid-column:2/4;justify-self:start;font-size:.85rem;font-weight:700;color:var(--soft,#b9c2d9);white-space:nowrap}
/* (J3, Brian's extra) the Hall of Fame: a gold banner, the team stepping up one by one, the day */
.jr-famev{display:grid;gap:12px;justify-items:center;text-align:center;padding:16px 12px;border-radius:16px;border:2px solid #ffd60a;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,214,10,.28),rgba(255,214,10,0) 70%),var(--bg,#0f121e);box-shadow:0 0 24px rgba(255,214,10,.25)}
/* (bkn-j7 K7e) the PIN card (journey.js pinView): a small gold-edged card like the Hall of Fame's, a padlock, two buttons
   side by side (one above the other in a very narrow frame) */
.jr-pinv{display:grid;gap:10px;justify-items:center;text-align:center;max-width:440px;margin:6px auto;padding:14px 14px 16px;border-radius:16px;border:2px solid #ffd60a;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,214,10,.22),rgba(255,214,10,0) 70%),var(--bg,#0f121e);box-shadow:0 0 18px rgba(255,214,10,.2)}
.jr-pinart{color:#ffd60a;line-height:0}
.jr-pinv .jr-th{color:#fff;font-size:1.1rem;line-height:1.3}
.jr-pinrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;width:100%}
.bb .jr-pinrow button{min-height:48px;width:100%;border-radius:12px;font-weight:900;font-size:1rem}
/* a short frame (Brian's 300 % zoom: 517x370 in /play's frame): no padlock, tighter, so the whole card fits under the top row */
@media (max-height:480px){ .jr-pinv{gap:6px;padding:10px 12px 12px;margin:4px auto} .jr-pinart{display:none} .jr-pinv .jr-th{font-size:1rem}
  .bb .jr-pinrow button{padding-top:6px;padding-bottom:6px} }
.jr-fame-hd{padding:4px 16px;border-radius:999px;background:#ffd60a;color:#0f121e;font-weight:900;letter-spacing:.12em;text-transform:uppercase;font-size:.85rem}
.jr-famev .jr-th{color:#fff;font-size:1.25rem}
/* (J5, Brian's card 27) every team kept, the newest first: the first "kept forever", a star on the rest; the warning line */
.jr-fame-all{display:grid;gap:8px;width:100%;text-align:left}
.jr-fame-line{margin:0;padding:8px 10px;border-radius:10px;background:rgba(255,214,10,.12);border:1px solid rgba(255,214,10,.5);color:#ffe27a;font-weight:800;font-size:.9rem;line-height:1.4}
.jr-fame-rows{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.jr-fame-row{display:grid;gap:6px;padding:8px 10px;border-radius:12px;border:1px solid rgba(255,214,10,.35);background:rgba(255,255,255,.03)}
.jr-fame-row.first,.jr-fame-row.on{border-color:#ffd60a;background:rgba(255,214,10,.08)}
.jr-fame-day{font-size:.8rem;font-weight:900;color:#ffd60a}
.jr-fame-mini{display:flex;flex-wrap:wrap;gap:4px}
.jr-fm{display:flex;flex-direction:column;align-items:center;min-width:38px;font-size:.7rem;font-weight:800;color:var(--soft,#b9c2d9)}
.jr-fm .jr-face{width:32px;height:32px;image-rendering:pixelated}
.jr-fm.shiny .jr-face{border-radius:50%;box-shadow:0 0 0 2px #ffd60a}
.jr-fame-first{justify-self:start;padding:2px 10px;border-radius:999px;background:#ffd60a;color:#0f121e;font-size:.8rem;font-weight:900}
.bb .jr-star{justify-self:stretch;min-height:44px;padding:6px 12px;border-radius:10px;background:transparent;color:#ffd60a;border:1px solid #ffd60a;font-weight:900;font-size:.9rem;line-height:1.25}
.bb .jr-star.on{background:#ffd60a;color:#0f121e}
.bb .jr-star.ask{background:#ff6b5e;border-color:#ff6b5e;color:#0f121e}
.bb .jr-star:disabled{opacity:.55}
.jr-famev > .jr-star{width:100%}
.jr-fame-team{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:100%;margin:0;padding:0;list-style:none}
.jr-fame-team > li{flex:0 0 calc((100% - 16px) / 3);min-width:0}
@container bb (min-width:640px){ .jr-fame-team > li{flex-basis:calc((100% - 40px) / 6)} }
@container bb (max-width:359px){ .jr-fame-team > li{flex-basis:calc((100% - 8px) / 2)} }
.jr-fame-mon{display:grid;justify-items:center;gap:2px;padding:8px 2px;border-radius:12px;background:rgba(255,214,10,.08);border:1px solid rgba(255,214,10,.4);
  animation:jr-fame .6s cubic-bezier(.2,1.5,.4,1) both;animation-delay:calc(var(--i,0) * .35s)}
.jr-fame-mon .jr-face.big{width:72px;height:72px;image-rendering:pixelated}
/* ((bkn-t V2) its knock-outs on a gold tag at the face's lower right (journey.js fameView: o) */
.jr-fame-pic{position:relative;display:block;line-height:0}
.jr-fko{position:absolute;right:-12px;bottom:-2px;padding:2px 6px;border-radius:999px;background:#ffd60a;color:#0f121e;font-size:.7rem;font-weight:900;line-height:1.2;white-space:nowrap;box-shadow:0 0 0 2px #0f121e}
.jr-fame-mon .jr-mn{max-width:100%;font-size:.72rem;line-height:1.15;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.jr-fame-mon .jr-ml{justify-self:center}
.jr-fame-mon.shiny{border-color:#ffd60a;box-shadow:0 0 10px rgba(255,214,10,.5)}
.bb .jr-famev .jr-go{min-height:48px;width:100%;border-radius:12px;font-weight:900;font-size:1rem}
@keyframes jr-fame{from{transform:translateY(16px) scale(.6);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){ .jr-fame-mon{animation:none} }

/* (bkn-j7 K3a) an evolution's moment (battle.js evoMoment): the HP boxes, the moves and the switch panel, the Bag, the
   team's buttons, the tags, the portraits and the after box fade away (their room kept: nothing moves); the battle text
   stays, and the stage dims itself round the one evolving (arena.js) */
.bb-evomo :is(.bb-huds,.bb-mvw,.bb-bag,.bb-bagb,.bb-after){opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s,visibility 0s .3s}
.bb-evomo :is(.bb-roster,.bb-tip,.bb-evot,.bb-tp,.bb-ko){visibility:hidden;pointer-events:none}   /* (on the grass: away at once, never over it) */
/* ((bkn-u U1) evolving in the adventure gives all its HP back (rules.js evoHeal): its HP box stays on (the other's away),
   the bar white and glowing while it fills up (battle.js evoMoment: bb-evohp, bb-hpglow); its colours come back with the
   new form's. Reduced motion: a steady glow */
.bb-evomo.bb-evohp .bb-huds{opacity:1;visibility:visible;transition:none}
.bb-evomo.bb-evohp .bb-hud.foe{visibility:hidden}
.bb-hpglow .bb-hpbar{background:#4a5274;animation:bb-hpglow .7s ease-in-out infinite alternate;box-shadow:0 0 0 1px #fff,0 0 14px 5px rgba(255,255,255,.85)}
.bb-hpglow .bb-hpbar i,.bb-hpglow .bb-hpbar i.mid,.bb-hpglow .bb-hpbar i.low{background:#fff;box-shadow:0 0 8px 2px #fff}
.bb-hpglow .bb-hpbar b{opacity:0}
.bb-hpglow .bb-hpn{color:#fff;text-shadow:0 0 6px #fff,0 0 12px rgba(255,255,255,.7)}
@keyframes bb-hpglow{from{box-shadow:0 0 0 1px #fff,0 0 8px 3px rgba(255,255,255,.7)}to{box-shadow:0 0 0 2px #fff,0 0 20px 8px rgba(255,255,255,1)}}
@media (prefers-reduced-motion:reduce){ .bb-hpglow .bb-hpbar{animation:none} }
/* (bkn-j7 K3a) each fighter's portrait (battle.js paintFace): a round 40 px face (the strip's 40 px cells, crisp), its
   cell chosen by background-position. "in" (PP_AT): inside its HP box, on the outer side, beside the name and HP rows;
   "hang" (the layout trial's other): under its HP box, over the stage's top corner */
.bb-pp{display:none}
.bb-hasp .bb-pp{display:block;flex:none;width:40px;height:40px;border-radius:50%;background:#1d2238 no-repeat 0 0;background-size:500% 100%;image-rendering:pixelated;box-shadow:0 0 0 2px #2a3250}
.bb-pp-in .bb-hud{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:7px;align-items:center}
.bb-pp-in .bb-hud>.bb-pp{grid-row:1/span 2;grid-column:1}
.bb-pp-in .bb-hud>.bb-hh,.bb-pp-in .bb-hud>.bb-hpr{grid-column:2}
.bb-pp-in .bb-hud.foe{grid-template-columns:minmax(0,1fr) auto}
.bb-pp-in .bb-hud.foe>.bb-pp{grid-column:2}
.bb-pp-in .bb-hud.foe>.bb-hh,.bb-pp-in .bb-hud.foe>.bb-hpr{grid-column:1}
/* a narrow HP box (names and types on two lines: phones, 587 px windows): the name keeps the whole width (it is never cut
   for the face); the face sits beside the types and the HP rows, as tall as they are; the move tag over the name and
   types as before (an abspos grid item: rows 1-2) */
.bb-pp-in:not(.bb-wide) .bb-hud{position:relative;grid-template-rows:auto auto auto;align-items:stretch}
.bb-pp-in:not(.bb-wide) .bb-hud>.bb-hh{display:contents}
.bb-pp-in:not(.bb-wide) .bb-hud .bb-nm{grid-row:1;grid-column:1/-1}
.bb-pp-in:not(.bb-wide) .bb-hud .bb-tys:not(.bb-mtag){grid-row:2;grid-column:2}
.bb-pp-in:not(.bb-wide) .bb-hud.foe .bb-tys:not(.bb-mtag){grid-column:1}
.bb-pp-in:not(.bb-wide) .bb-hud>.bb-hpr{grid-row:3}
.bb-pp-in:not(.bb-wide) .bb-hud>.bb-pp{grid-row:2/span 2;align-self:center;width:var(--bb-ppn,34px);height:var(--bb-ppn,34px);image-rendering:auto}
.bb-pp-in:not(.bb-wide) .bb-hud .bb-mtag{grid-row:1/3;grid-column:2}
.bb-pp-in:not(.bb-wide) .bb-hud.foe .bb-mtag{grid-column:1}
/* a small phone (320 px: the box's inside under 290 px) drops the HP boxes' type chips for room, and the faces with them
   (beside a name and an HP row alone a face made the box 13 px taller and moved the camera's band) */
@container bb (max-width:290px){
  .bb-ns.bb-pp-in .bb-hud,.bb-ns.bb-pp-in .bb-hud>.bb-hh{display:block}
  .bb-ns .bb-hud>.bb-pp{display:none}
}
/* a box where its face would cut the name, its level or the type chips (battle.js fitFace), and while the layout measures
   them (hudsFit): the box exactly as before, no face. A species with no strip: the site's own portrait, one face */
.bb-pp-in .bb-hud.bb-noface,.bb-pp-in:not(.bb-wide) .bb-hud.bb-noface>.bb-hh{display:block}
.bb-hasp .bb-hud.bb-noface>.bb-pp{display:none}
.bb-pp.bb-pp1{background-size:100% 100%}
.bb-pp-hang .bb-hud{position:relative}
.bb-pp-hang .bb-hud>.bb-pp{position:absolute;top:calc(100% + 5px);left:2px;z-index:1}
.bb-pp-hang .bb-hud.foe>.bb-pp{left:auto;right:2px}

/* (bkn-j7 K3b) a face popping in beside the battle text (battle.js facePop) where its HP box has no room for it: inside
   the text's own box, on its side (yours left, the foe's right), the words making room for it; a quick pop, a fade.
   Never over the fighters, the moves or the switch panel. Reduced motion: a plain show / hide */
.bb-textrow{position:relative}
.bb-fpop{position:absolute;z-index:2;border-radius:50%;background:#1d2238 no-repeat 0 0;background-size:500% 100%;box-shadow:0 0 0 2px #2a3250;pointer-events:none}
.bb-fpop[hidden]{display:none}
.bb-text.bb-talk-l{padding-left:calc(var(--bb-fp,24px) + 12px)}
.bb-text.bb-talk-r{padding-right:calc(var(--bb-fp,24px) + 12px)}
.bb-fpop.bb-fpop-in{animation:bb-fpop .26s cubic-bezier(.2,1.5,.4,1)}
@keyframes bb-fpop{from{transform:scale(.35);opacity:0}to{transform:scale(1);opacity:1}}
.bb-fpop.bb-fpop-out{opacity:0;transition:opacity .25s}
.bb-evomo .bb-fpop{visibility:hidden}
@media (prefers-reduced-motion:reduce){ .bb-fpop.bb-fpop-in{animation:none} .bb-fpop.bb-fpop-out{transition:none} }
/* (bkn-j7 K3b, players asked for STAB) a move of the user's own type hits x1.5: a gold "STAB" tag on the button's top edge,
   right, at the site's smallest label size (.85rem: test-battle section 11), line-height 1 so it stays in the gap between
   the rows (absolute at every size: no button changes size or place; clear of the 1-4 key number); "x1.5" and "same type"
   are in its label, its tip and the Moves screen */
.bb-stab{position:absolute;top:-8px;right:26px;z-index:1;padding:0 5px;border:1px solid rgba(255,214,10,.65);border-radius:5px;background:#2b260d;color:#ffd60a;font-size:.85rem;font-weight:900;line-height:1;white-space:nowrap;letter-spacing:.03em;pointer-events:none}
.bb-ns .bb-stab{top:-5px;right:10px;padding:0 4px}
/* (bkn-j7 K3b) Continue / Battle again while an evolution's new-move lines play (battle.js evolveAfter): off, and looks it */
.bb .bb-again:disabled{opacity:.55;cursor:default}
/* ((bkn-t T7) the Kanto map (journey.js mapView): full screen over the adventure (its frame is the screen's height and
   its top is brought to the screen's on open), the art lit along your road and fogged elsewhere, pins in CSS px */
.bb .jr-mapb{min-height:44px;padding:4px 14px;border-radius:999px;background:rgba(72,208,255,.12);color:var(--cyan,#48d0ff);border:2px solid var(--cyan,#48d0ff);font-size:.85rem;font-weight:900}
.bb .jr-mapb::before{content:"";display:inline-block;width:14px;height:12px;margin-right:6px;vertical-align:-1px;background:linear-gradient(90deg,currentColor 0 30%,transparent 30% 35%,currentColor 35% 65%,transparent 65% 70%,currentColor 70%);opacity:.85;border-radius:2px}
.bb .jr-mapb:hover{background:var(--cyan,#48d0ff);color:#0f121e}
.km{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;background:#0b0e18;color:var(--ink,#f4f6fb)}
.km-bar{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;padding:6px 10px;padding-top:max(6px,env(safe-area-inset-top));border-bottom:1px solid var(--line,#2a3250)}
.km-t{font-size:1.1rem;font-weight:900;color:#fff;letter-spacing:.02em}
.km-sum{flex:1 1 auto;font-size:.8rem;font-weight:800;color:var(--soft,#b9c2d9)}
.bb .km .km-replay,.bb .km .km-x{min-height:40px;padding:2px 12px;border-radius:999px;font-size:.85rem;font-weight:900}
.bb .km .km-x{background:#fff;color:#0f121e;border:2px solid #fff}
.km-scroll{position:relative;flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:#123}
.km-world{position:relative;margin:auto}
.km-fog,.km-svg{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-select:none}
.km-fog{filter:grayscale(.85) brightness(.5) contrast(.9)}
.km-road{fill:none;stroke:#fff6c8;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:2 22;opacity:.95}
.km-ahead{fill:none;stroke:#ffd60a;stroke-width:6;stroke-linecap:round;stroke-dasharray:1 20;opacity:.75}
.bb .km .km-pin{position:absolute;width:30px;height:30px;min-height:0;margin:-15px 0 0 -15px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;display:grid;place-items:center}
.km-pin::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff;border:2px solid #ff3d6e;box-shadow:0 0 0 2px rgba(0,0,0,.3)}
.km-pin.center::after{border-color:#36d27a}
.km-pin.gym::after,.km-pin.leg::after,.km-pin.fame::after,.km-pin.goal::after{display:none}
.km-pin.gym .jr-bd{position:relative;width:22px;height:22px}
.km-pin.gym .jr-bd:not(.on){background:rgba(15,18,30,.8);border:2px dashed #aab2cc}
.km-pin.gym .jr-bd:not(.on)::after{content:attr(data-n);position:absolute;inset:0;display:grid;place-items:center;font-size:.7rem;font-weight:900;color:#dfe5f5}
.km-pin.gym.won .jr-bd{border:2px solid #fff;box-shadow:0 0 10px rgba(255,255,255,.7)}
.bb .km .km-pin.leg{width:34px;height:34px;margin:-36px 0 0 2px;background:rgba(20,10,40,.88);border:2px solid #b48cff;box-shadow:0 0 12px rgba(180,140,255,.7)}
.km-pin.leg.later{opacity:.6}
.km-pin.leg.caught{border-color:#ffd60a;box-shadow:0 0 12px rgba(255,214,10,.8)}
.km-q{font-size:1.2rem;font-weight:900;color:#e6d8ff;line-height:1}
.km-lf{width:30px;height:30px;border-radius:50%}
.bb .km .km-pin.fame{width:auto;height:26px;margin:-40px 0 0 14px;padding:0 8px;border-radius:999px;background:#ffd60a;color:#0f121e;font-weight:900;font-size:.8rem}
.bb .km .km-pin.goal{width:44px;height:44px;margin:-22px 0 0 -22px;border:3px solid #ffd60a;animation:km-pulse 1.4s ease-out infinite}
.km-pin.goal.legend{border-color:#b48cff}
.km-pin.goal.here .km-chip{bottom:auto;top:100%;transform:translate(-50%,8px)}
@keyframes km-pulse{0%{box-shadow:0 0 0 0 rgba(255,214,10,.75)}100%{box-shadow:0 0 0 22px rgba(255,214,10,0)}}
.km-chip{position:absolute;left:50%;bottom:100%;transform:translate(-50%,-6px);display:flex;align-items:center;gap:6px;white-space:nowrap;padding:3px 10px 3px 4px;border-radius:999px;background:#ffd60a;color:#0f121e;font-size:.78rem;font-weight:800;box-shadow:0 2px 8px rgba(0,0,0,.4);pointer-events:none}
.km-chip b{font-weight:900}
.km-cf{width:28px;height:28px;border-radius:50%;background:#fff;object-fit:cover}
.km-pin.on::after{background:#ffd60a}
.km-me{position:absolute;width:72px;height:72px;margin:-64px 0 0 -36px;pointer-events:none;z-index:2}
.km-me::before{content:"";position:absolute;left:50%;bottom:4px;width:30px;height:9px;margin-left:-15px;border-radius:50%;background:rgba(0,0,0,.35)}
.km-cv{position:absolute;inset:0;width:72px;height:72px;image-rendering:pixelated}
.km-you{position:absolute;left:50%;bottom:100%;transform:translate(-50%,2px);white-space:nowrap;padding:2px 8px;border-radius:999px;background:#fff;color:#0f121e;font-size:.72rem;font-weight:900;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.km-me.walking .km-you{opacity:.85}
.km-card{position:absolute;left:50%;bottom:calc(52px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(440px,calc(100% - 20px));max-height:55%;overflow:auto;display:grid;gap:6px;padding:12px 14px;border-radius:14px;background:rgba(15,18,30,.97);border:2px solid var(--line,#2a3250);box-shadow:0 8px 24px rgba(0,0,0,.5);z-index:3}
.km-card[hidden]{display:none}
.km-cn{font-size:1.05rem;font-weight:900;color:#fff;padding-right:40px}
.km-cs{margin:0;font-size:.82rem;font-weight:800;color:#ffd60a}
.km-cx{margin:0;font-size:.85rem;color:var(--soft,#b9c2d9)}
.km-nofly{color:var(--soft,#b9c2d9)}
.bb .km .km-fly{min-height:46px;width:100%;border-radius:12px;font-weight:900}
.bb .km .km-cx0{position:absolute;top:8px;right:8px;min-height:36px;width:36px;padding:0;border-radius:50%}
.km-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;padding:6px 10px;padding-bottom:max(6px,env(safe-area-inset-bottom));border-top:1px solid var(--line,#2a3250);font-size:.75rem;color:var(--soft,#b9c2d9)}
.km-shy{display:inline-flex;align-items:center;gap:2px;color:#ffd60a}
.km-sf{width:24px;height:24px}
.km-credit a{color:var(--cyan,#48d0ff)}
@media (prefers-reduced-motion:reduce){.bb .km .km-pin.goal{animation:none;box-shadow:0 0 0 6px rgba(255,214,10,.35)}}
/* ((bkn-t T3) "Choose your next Pokémon" after a K.O. (battle.js nextPanel): over the whole fight, a dim veil on the pitch
   behind it; the team as cards (face, name, level, HP bar, types), the fainted ones greyed and not pressable. Scrolls when
   the screen is short (a phone on its side, 300 % zoom) */
.bb-next{position:absolute;inset:0;z-index:6;display:flex;overflow-y:auto;overscroll-behavior:contain;padding:8px;background:rgba(6,8,15,.72)}
.bb-next[hidden]{display:none}
.bb-nxc{margin:auto;width:100%;max-width:780px;padding:10px;border:2px solid #ffd60a;border-radius:14px;background:#0a0d17;box-shadow:0 8px 30px rgba(0,0,0,.5)}
.bb-nxh{margin:0 0 8px;font-weight:900;font-size:1.05rem;line-height:1.3;text-align:center;color:#ffd60a}
.bb-nxl{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:6px}
.bb .bb-nxb{display:flex;align-items:center;gap:8px;min-width:0;min-height:44px;margin:0;padding:5px 8px;text-align:left;font:inherit;line-height:normal;
  color:var(--ink,#f4f6fb);background:#141a2b;border:2px solid var(--line,#2a3250);border-radius:10px;cursor:pointer}
.bb .bb-nxb:hover:not(:disabled),.bb .bb-nxb:focus-visible{background:#1c2236;border-color:#ffd60a}
.bb .bb-nxb:focus-visible{outline:2px solid #ffd60a;outline-offset:2px}
.bb .bb-nxb:disabled{opacity:.45;filter:grayscale(1);cursor:default}
.bb-nxf{flex:none;width:40px;height:40px;border-radius:50%;background:#1d2238;image-rendering:pixelated}
.bb-nxw{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.bb-nxr{display:flex;align-items:baseline;gap:6px;min-width:0}
.bb-nxn{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:900;font-size:.95rem;line-height:1.2}
.bb-nxlv{flex:none;font-weight:800;font-size:.8rem;color:var(--soft,#b9c2d9)}
.bb-nxhr{display:flex;align-items:center;gap:6px}
.bb-nxbar{flex:1;min-width:40px;height:7px;border-radius:4px;overflow:hidden;background:#0d1018;box-shadow:inset 0 0 0 1px #2a3250}
.bb-nxbar i{display:block;height:100%;border-radius:inherit}
.bb-nxht{flex:none;font-size:.75rem;font-weight:800;color:var(--soft,#b9c2d9);font-variant-numeric:tabular-nums}
.bb-nxt{display:flex;flex-wrap:wrap;gap:3px 4px}
.bb-nxt .bb-tc{font-size:.75rem}
/* ((bkn-u U2) the wild one's run-away mark in its HP box: "!" nervous (yellow), "!!" looking for a way out (red, pulsing) */
.bb-flee{flex:none;display:inline-flex;align-items:center;justify-content:center;min-width:1.35em;height:1.35em;padding:0 .3em;border-radius:.7em;font-weight:900;font-size:.8rem;line-height:1;color:#1c1e26;background:#ffd23a;box-shadow:0 0 0 2px #1c1e26}
.bb-flee[hidden]{display:none}
.bb-flee[data-lv="2"]{background:#ff4a3a;color:#fff;animation:bb-flee .7s ease-in-out infinite alternate}
@keyframes bb-flee{from{transform:scale(1)}to{transform:scale(1.18)}}
@media (prefers-reduced-motion:reduce){ .bb-flee[data-lv="2"]{animation:none} }
/* ((bkn-u U2) the note on the first ball thrown: over the whole battle; its Okay! only after 3 s */
.bb-bnote{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:safe center;justify-content:center;padding:16px;overflow-y:auto;overscroll-behavior:contain;background:rgba(6,8,16,.78)}
.bb-bnotec{max-width:420px;width:100%;padding:22px 20px 18px;border-radius:16px;background:#161b2c;color:#f2f5ff;box-shadow:0 0 0 3px #ffd23a,0 12px 40px rgba(0,0,0,.6);text-align:center}
.bb-bnotec:focus{outline:none}
.bb-bnotec:focus-visible{outline:3px solid #ffd23a;outline-offset:3px}
.bb-bnoteh{margin:0 0 12px;font-size:1.45rem;font-weight:900;line-height:1.2;color:#ffd23a}
.bb-bnotep{margin:0 0 10px;font-size:1rem;line-height:1.45}
.bb-bnotew{font-weight:800;color:#ffb0a8}
.bb-bnotet{margin:14px 0 0;min-height:48px;display:flex;align-items:center;justify-content:center;font-weight:800;color:#8d97b5}
.bb-bnoteok{margin:14px auto 0;display:block;min-width:160px;min-height:48px;padding:10px 24px;border:0;border-radius:12px;background:#ffd23a;color:#1c1e26;font-size:1.15rem;font-weight:900;cursor:pointer}
.bb-bnoteok:focus-visible{outline:3px solid #fff;outline-offset:3px}
/* (Grok's High) a short screen (a phone on its side, 300 % zoom): smaller, and the layer scrolls, so Okay! is always reachable */
@media (max-height:560px){ .bb-bnote{padding:8px} .bb-bnotec{padding:12px 14px} .bb-bnoteh{font-size:1.15rem;margin-bottom:6px} .bb-bnotep{font-size:.9rem;margin-bottom:6px} .bb-bnotet{margin-top:6px;min-height:44px} .bb-bnoteok{margin-top:6px;min-height:44px} }
/* ((bkn-u U4) the Safari Zone: the gate card, the visit (Safari Balls, steps, the area, the grass / water / other areas), and
   the battle's four Safari buttons (Ball with FireRed's green Safari Ball, Bait, Rock, Run) */
.jr-foe.jr-safari{border-color:#5f9b3c;background:rgba(95,155,60,.10)}
.jr-foe.jr-safari .jr-tp{object-fit:contain;image-rendering:pixelated;padding:6px;box-shadow:0 0 0 2px #7fbf4d}
.bb .jr-foe.jr-safari .jr-fight{background:#7fbf4d}
.bb .jr-foe.jr-safari .jr-fight:hover{background:#fff}
.jr-sball{image-rendering:pixelated;vertical-align:-4px}
.jr-zone{display:grid;gap:8px;padding:10px 12px;border-radius:12px;border:1px solid #5f9b3c;background:rgba(95,155,60,.10)}
.jr-zone p{margin:0}
.jr-zn{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-weight:700}
.jr-zballs{display:inline-flex;align-items:center;gap:6px}
.jr-zballs b{font-size:1.25rem;color:#b6e48a}
.jr-zsteps{color:var(--soft,#b9c2d9)}
.jr-zarea{font-weight:700}
.jr-zgot{font-size:.9rem;color:#b6e48a}
.jr-zacts{display:flex;flex-wrap:wrap;gap:8px}
.bb .jr-zacts .jr-zfish{background:#5aa9e6}
.bb .jr-zacts .jr-zfish:hover{background:#fff}
.jr-zareas{display:flex;flex-wrap:wrap;gap:6px}
.bb .jr-zareas .jr-zgo{padding:6px 10px;font-size:.9rem}
.bb .jr-zout{justify-self:start}
.bb-move.bb-zb{border-color:#5f9b3c}
.bb-move.bb-zb[data-z="ball"]{background:#16301a}
.bb-move.bb-zb[data-z="ball"]:hover:not(:disabled){background:#21492a}
.bb .bb-move.bb-zb{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px}
.bb-zrow{display:flex;align-items:center;gap:6px;min-width:0}
.bb .bb-zb .bb-mn{order:0;flex:none;padding-right:0}
.bb-zi{width:20px;height:20px;image-rendering:pixelated}
.bb-zs{font-weight:700;font-size:.85rem;line-height:1.25;color:var(--soft,#b9c2d9)}
.bb-zone .bb-roster,.bb-zone .bb-bagb,.bb-zone .bb-tip{display:none!important}