/* 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)}
.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)}
.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)}
.bb-is-champ{border-color:#ffd60a}

/* wide box: stage and controls side by side */
@container (min-width:640px){
  .bb-fight{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}
}
/* 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 */
@media (max-height:480px) and (min-width:520px){
  .bb{padding:12px 14px}
  .bb-top{margin-bottom:8px}
  .bb-fight{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}
}
/* 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{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 .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{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}
.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}
}
@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)} }
/* 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}
.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}
.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}
.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)}
.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}
/* (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)}
.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}
.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} }