/* pokemonarena2d.com: the official page. Night arena: deep navy, the pitch's greens, one accent (--go) for actions. Phones first:
   notice, title bar, the battle and the list's box all on one phone screen. The battle's own styles are battle.css (vendor/);
   the rules marked "battle:" fit its box to this page. */
@font-face{font-family:"Inter";font-weight:600;font-display:swap;src:url(/fonts/Inter-SemiBold.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:700;font-display:swap;src:url(/fonts/Inter-Bold.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:900;font-display:swap;src:url(/fonts/Inter-Black.woff2) format("woff2")}
:root{--night:#080c18;--night2:#10172a;--line:#2a3550;--ink:#f5f7fc;--soft:#b9c3d9;--go:#ffd84a;--go-ink:#14161f;--turf:#123a1c;--turf2:#0c2614;--turf-line:#49b35e;--leaf:#8fe39f;--link:#8fd8ff;--cyan:#48d0ff;--bg:#080c18;--bg2:#10172a;--soft-b:#b9c3d9}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--night);color:var(--ink);font:600 1rem/1.5 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
button,input{font:inherit}
button{cursor:pointer}
a{color:var(--link)}
h1,h2,h3,p{margin:0}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}

/* the notice: one quiet line (two on a phone) */
.notice{padding:5px 12px;font-size:.75rem;line-height:1.35;text-align:center;color:var(--soft);background:#050811;border-bottom:1px solid #182039}

/* the title bar: a floodlit scoreboard */
.bar{display:flex;align-items:center;gap:10px;padding:7px 12px;background:linear-gradient(#141d36,#0a0f1e);border-bottom:2px solid #1c3a24}
.bar h1{font-size:1.3rem;font-weight:900;letter-spacing:-.02em;line-height:1.1;white-space:nowrap}
.bar p{font-size:.72rem;font-weight:700;line-height:1.25;color:var(--leaf)}
.bar-title{min-width:0}
.jump{flex:none;margin-left:auto;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:10px;background:var(--go);color:var(--go-ink);font-weight:900;font-size:.88rem;text-decoration:none;white-space:nowrap}
.jump:hover,.go:hover{background:#ffe47a}
@media (max-width:370px){.bar h1{font-size:1.14rem}.jump{padding:0 10px;font-size:.82rem}.bar p{font-size:.68rem}}

/* the heroes: the game's own sprites, whole-number scales, on a strip of pitch */
.spr{display:block;image-rendering:pixelated;image-rendering:crisp-edges;image-rendering:pixelated;width:calc(var(--w)*var(--k)*1px);height:calc(var(--h)*var(--k)*1px)}
.s0025{--w:21;--h:32}.s0006{--w:31;--h:29}.s0150{--w:33;--h:36}.s0094{--w:27;--h:26}.s0658{--w:29;--h:32}
.lineup{--k:2}
.lineup-row{display:flex;justify-content:center;align-items:flex-end;gap:14px;padding:0 8px}
.rail-lineup{padding-top:18px}
.rail-lineup::after{content:"";display:block;height:10px;background:repeating-linear-gradient(90deg,#2f7d3b 0 16px,#2a7235 16px 32px);border-top:2px solid var(--turf-line)}
.bar-lineup{display:none}

/* battle: what it takes from bigkidnation's page styles (style.css, not copied), at no specificity so battle.css always wins;
   the actions in this page's one accent colour */
:where(.bb){font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
:where(.bb) img{max-width:100%;height:auto;display:block}
:where(.bb) button{font:inherit;font-weight:900;cursor:pointer;color:var(--go-ink);background:var(--go);border:0;border-radius:12px;padding:15px 24px;text-decoration:none;display:inline-block;transition:background .15s}
@media (hover:hover){:where(.bb) button:hover{background:#fff;color:var(--go-ink)}}
:where(.bb) button:disabled{opacity:.6;cursor:wait}
:where(.bb) .ghost{background:transparent;color:var(--ink);border:2px solid var(--line)}
@media (hover:hover){:where(.bb) .ghost:hover{background:var(--night);color:var(--go);border-color:var(--go)}}
.bb .bb-again,.bb .bb-share{min-height:44px}
/* battle: its box is the page here, edge to edge, its top row one tidy strip */
.bb{margin:0;max-width:none;border:0;border-radius:0;background:transparent;padding:0;scroll-margin-top:var(--pa-above,0px)}
.bb-top{margin:0;padding:3px 8px;align-items:center;gap:0 8px}
.bb .bb-h{display:none}
.bb .bb-label{flex:1 1 100%;font-size:.75rem;font-weight:600;line-height:1.3;color:var(--soft)}
.bb-record{flex:1 1 0;min-width:0;font-size:.76rem;line-height:1.2;color:var(--leaf)}
.bb-best{color:var(--soft)}
.bb-start{gap:4px 8px}
.bb .bb-ctl .bb-pill,.bb .bb-ctl .bb-pill:has(svg){min-height:44px;min-width:44px;justify-content:center;padding:4px 8px}
.bb-ctl{flex:none;gap:3px;flex-wrap:nowrap}
.bb-again,.bb button{font-family:inherit}

/* its place is kept before it mounts, so nothing under it jumps: about its height (battle.js nsHeight less page.js fit) */
#battle{min-height:min(calc(210vw + 81px),max(calc(125vw + 81px),calc(100svh - 247px)))}
@media (min-width:600px){#battle{min-height:500px}}
@media (max-height:480px){#battle{min-height:0}}

/* the list's box: a band of turf right under the battle */
.join{padding:10px 12px 12px;background:linear-gradient(var(--turf),var(--turf2));border-top:3px solid var(--turf-line);scroll-margin-top:0}
.join h2{margin:0 0 7px;font-size:1.08rem;font-weight:900;line-height:1.2;color:#fff}
.field{display:flex;gap:8px}
.field input[type=email]{flex:1 1 auto;min-width:0;height:48px;padding:0 13px;border-radius:10px;border:2px solid #5f7188;background:#0a0f1e;color:var(--ink);font-size:1rem}
.field input[type=email]::placeholder{color:#a3aec5}
.go{display:inline-flex;align-items:center;justify-content:center;flex:none;min-height:48px;padding:0 16px;border:0;border-radius:10px;background:var(--go);color:var(--go-ink);font-size:1rem;font-weight:900;white-space:nowrap;text-decoration:none}
.go:disabled{opacity:.65;cursor:default}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.join-msg{font-size:.88rem;line-height:1.35;color:#fff}
.join-msg:not(:empty){margin-top:8px}
.join-msg.err{color:#ffc9c2}
.fine{margin-top:6px;font-size:.76rem;line-height:1.35;color:#c6d6c9}
.join.done .field,.join.done .fine{display:none}

/* after a win: the box lights up with "You won!" if it's on screen, else a second one in the battle's result panel */
.join.won{box-shadow:inset 0 0 0 2px var(--go)}
.bb-rank:has(.win-join){flex:1 1 100%;min-width:0}
.win-join{min-width:0;padding:8px 10px;border-radius:10px;background:rgba(12,38,20,.96);border:2px solid var(--turf-line);text-align:left}
.win-join h4{margin:0 0 6px;font-size:.98rem;font-weight:900;line-height:1.2;color:#fff}
.win-join .field input[type=email]{height:44px;width:100%}
.win-join .field{min-width:0}
.win-join .go{min-height:44px;padding:0 12px;font-size:.95rem}

/* Big Kid Nation, the trailer */
.rail{display:flex;flex-direction:column}
.bkn-go{display:block;margin:16px 12px 0;padding:13px 16px;border:2px solid #4c5a80;border-radius:12px;background:var(--night2);color:#fff;font-weight:700;font-size:.98rem;line-height:1.35;text-decoration:none;text-align:center}
.bkn-go:hover{border-color:var(--go)}
.reel{display:flex;gap:12px;align-items:center;margin:12px 12px 0;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--night2);color:var(--ink);text-decoration:none}
.reel:hover{border-color:#4c5a80}
.reel-thumb{position:relative;flex:0 0 42%;display:block;border-radius:8px;overflow:hidden;background:#000;line-height:0}
.reel-thumb img{display:block;width:100%;height:auto}
.reel-play{position:absolute;left:50%;top:50%;width:0;height:0;margin:-12px 0 0 -7px;border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent #fff;filter:drop-shadow(0 1px 3px rgba(0,0,0,.8))}
.reel-text{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:.95rem;line-height:1.3}
.reel-text strong{font-weight:900}
.reel-go{font-size:.86rem;color:var(--link)}

/* what Google reads, and anyone checking who we are */
.about{max-width:1120px;margin:0 auto;padding:30px 16px 8px;font-size:.98rem;line-height:1.55;color:#d7dded}
.about h2{margin-bottom:8px;font-size:1.3rem;font-weight:900;line-height:1.2;color:#fff}
.about h3{margin:20px 0 6px;font-size:1.02rem;font-weight:900;color:#fff}
.about p{margin-bottom:10px}
.nojs{padding:16px;text-align:center}
.channels{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.channels a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 13px;border:1px solid var(--line);border-radius:10px;background:var(--night2);color:#fff;font-weight:700;font-size:.92rem;text-decoration:none}
.channels a:hover{border-color:var(--go)}
.foot{max-width:1120px;margin:0 auto;padding:18px 16px 28px;font-size:.8rem;line-height:1.5;color:#aeb8ce;border-top:1px solid #1c2540}
.foot p{margin-bottom:8px}
.foot a.tap{display:inline-flex;align-items:center;min-height:44px}

/* the 404 */
.lost-box{max-width:520px;margin:0 auto;padding:64px 20px 40px;text-align:center}
.lost-box .spr{--k:4;margin:0 auto 16px}
.lost-box h1{margin-bottom:10px;font-size:1.9rem;font-weight:900;line-height:1.15}
.lost-box p{margin-bottom:22px;color:var(--soft)}

@media (min-width:500px){.lineup{--k:3}}
@media (max-width:359px){.lineup-row{gap:6px;padding:0}}

/* a tablet or a small laptop: the same order, with room */
@media (min-width:640px){
  .bar{padding:10px 20px}
  .bar h1{font-size:1.7rem}
  .bar p{font-size:.82rem}
  .notice{font-size:.78rem}
  .arena{max-width:940px;margin:0 auto}
  .join{padding:14px 20px 16px}
  .bkn-go,.reel{margin-left:20px;margin-right:20px}
}
/* a laptop: everything on one screen. The bar carries the name and the heroes; the battle beside the list */
@media (min-width:1100px){
  .bar{position:relative;gap:24px;min-height:112px;padding:14px max(24px,calc((100vw - 1320px)/2 + 24px)) 0;align-items:flex-end;overflow:hidden;
    background:radial-gradient(60% 150% at 22% 0,#2a4372 0,rgba(42,67,114,0) 70%),linear-gradient(#141d36,#0a0f1e)}
  .bar-title{padding-bottom:14px}
  .bar h1{font-size:3rem;letter-spacing:-.03em;line-height:1.02}
  .bar p{margin-top:4px;font-size:.95rem}
  .jump{display:none}
  .bar-lineup{display:block;margin-left:auto;--k:3}
  .bar-lineup .lineup-row{gap:16px;padding:0}
  .rail-lineup{display:none}
  .arena{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start;max-width:1320px;padding:12px 24px 0}
  .bb-top{padding:0 0 6px}
  .join{padding:14px 16px 14px;border:1px solid #2f6c3d;border-top:3px solid var(--turf-line);border-radius:12px}
  .join h2{font-size:1.14rem}
  .bkn-go{margin:12px 0 0}
  .reel{margin:12px 0 0}
  .about{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:40px;max-width:1320px;padding:32px 24px 8px}
  .about-side h3{margin-top:0}
  .foot{max-width:1320px;padding-left:24px;padding-right:24px}
}