/* ============================================================================
   Pokemon Arena 2D — site stylesheet
   Palette is taken from the game itself (src/render.js + src/style.css) so the
   page and the embedded arena read as one product:
     base  #080d18 / panel #0e1626 / panel-2 #172236 / line #ffffff14
     gold  #ffe160 (primary CTA)  red #ee5b5b (Poke Ball top)  ink #e8ecf5
   No external font request: the game draws with a condensed system stack and
   the page uses the same one, so the wordmark matches the canvas with zero
   font swap and zero layout shift.
   ========================================================================== */
:root{
  --bg:#080d18; --bg2:#0b1220; --panel:#0e1626; --panel2:#172236; --panel3:#1f2c45;
  --line:#ffffff14; --line2:#ffffff24;
  --ink:#e8ecf5; --muted:#9299af; --dim:#6f7691;
  --gold:#ffe160; --gold-2:#f7d85e; --red:#ee5b5b; --ball:#f4f6fb;
  --green:#86c99b; --blue:#66c9ff; --violet:#bf94db;
  --heading:'Arial Narrow','Helvetica Neue Condensed','Roboto Condensed',Impact,system-ui,sans-serif;
  --body:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --r:14px; --r-sm:9px; --maxw:1120px;
  --shadow:0 18px 50px #0008;
  --safe-l:env(safe-area-inset-left,0px); --safe-r:env(safe-area-inset-right,0px);
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);
  font-size:16px;line-height:1.62;overflow-x:hidden;
  background-image:radial-gradient(1100px 520px at 50% -180px,#1b2450 0%,transparent 62%),
                   radial-gradient(700px 380px at 88% 8%,#2a1f3d 0%,transparent 60%);
  background-repeat:no-repeat;
}
img,canvas,iframe{max-width:100%}
a{color:var(--gold-2);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:6px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 calc(18px + var(--safe-r)) 0 calc(18px + var(--safe-l))}
h1,h2,h3,h4{font-family:var(--heading);text-transform:uppercase;letter-spacing:.6px;line-height:1.13;margin:0 0 .5em}
h1{font-size:clamp(30px,5.4vw,58px);letter-spacing:1.4px}
h2{font-size:clamp(22px,3.3vw,34px);letter-spacing:1.1px}
h3{font-size:clamp(16px,2vw,20px);letter-spacing:.9px}
h4{font-size:15px;letter-spacing:.8px;margin-bottom:.35em}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.25em}
li{margin:.3em 0}
strong{color:#fff}
.hl{color:var(--gold)}
.muted{color:var(--muted)}
.small{font-size:14px}
.center{text-align:center}
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:#20263a;padding:10px 16px;border-radius:0 0 8px 0;z-index:99;font-weight:700}
.skip:focus{left:0}

/* ---------------------------------------------------------------- header */
.topbar{
  position:sticky;top:0;z-index:40;backdrop-filter:blur(10px);
  background:linear-gradient(#0b1220f2,#0b1220cc);border-bottom:1px solid var(--line);
  padding-top:var(--safe-t);
}
.topbar__in{display:flex;align-items:center;gap:14px;min-height:58px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);font-family:var(--heading);text-transform:uppercase;letter-spacing:1.6px;font-size:17px;white-space:nowrap}
.brand:hover{text-decoration:none;color:#fff}
.brand b{color:var(--gold)}
.brand__ball{width:26px;height:26px;flex:0 0 26px;display:block}
.topnav{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.topnav a{
  color:var(--ink);font-family:var(--heading);text-transform:uppercase;letter-spacing:1.1px;
  font-size:13px;padding:9px 12px;border-radius:9px;border:1px solid transparent;white-space:nowrap
}
.topnav a:hover{background:#ffffff10;text-decoration:none}
.topnav a[aria-current="page"]{border-color:var(--line2);background:#ffffff0d;color:var(--gold)}
@media(max-width:720px){
  .topnav a{padding:8px 9px;font-size:12px}
  .brand{font-size:15px}.brand span{display:none}
  /* one scrollable row instead of wrapping to two — it costs ~42 px of the
     first screen on a phone, and the game should be visible without scrolling */
  .topbar__in{flex-wrap:nowrap;min-height:52px}
  .topnav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
  .topnav::-webkit-scrollbar{display:none}
}
@media(max-width:560px){
  /* the trust line moves under the game on small screens (see .player__hint) */
  .hero .rating{display:none}
  .hero{padding:12px 0 2px}
  .hero__kicker{font-size:11.5px;padding:5px 11px;margin-bottom:12px}
  .hero h1{font-size:clamp(26px,7.4vw,34px)}
  .hero__lead{margin-bottom:.75em}
  .btn{padding:12px 18px;font-size:14px}
  .player{margin:10px 0 6px}
}

/* ---------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--heading);text-transform:uppercase;letter-spacing:1.5px;font-size:16px;
  padding:14px 24px;border-radius:12px;border:1px solid var(--line2);
  background:var(--panel2);color:var(--ink);cursor:pointer;min-height:48px
}
.btn:hover{background:var(--panel3);text-decoration:none}
.btn--gold{background:linear-gradient(#ffe160,#f0c93f);color:#20263a;border-color:#00000022;font-weight:700;box-shadow:0 8px 26px #ffe16033}
.btn--gold:hover{background:linear-gradient(#fff0a6,#ffe160)}
.btn--ghost{background:#ffffff0a}
.btn--sm{padding:10px 16px;font-size:14px;min-height:40px}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}

/* pill / chip */
.chip{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--heading);
  text-transform:uppercase;letter-spacing:1.1px;font-size:11.5px;padding:4px 10px;border-radius:999px;
  border:1px solid var(--line2);background:#ffffff0d;color:var(--ink)
}
.chip--gold{color:#20263a;background:var(--gold-2);border-color:#00000022;font-weight:700}
.chip--type{color:#0d1220;font-weight:700;border-color:#00000022}

/* ---------------------------------------------------------------- hero */
.hero{padding:20px 0 4px}
.hero__kicker{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--heading);text-transform:uppercase;
  letter-spacing:2.2px;font-size:12.5px;color:var(--gold);border:1px solid #ffe16033;
  background:#ffe1600f;padding:6px 13px;border-radius:999px;margin-bottom:16px
}
.hero h1{margin-bottom:.3em;font-size:clamp(28px,4.6vw,50px)}
.hero__lead{font-size:clamp(15.5px,1.7vw,18px);color:#cfd6e6;max-width:64ch;margin-bottom:.9em}
.hero__facts{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px;padding:0;list-style:none}
.hero__facts li{margin:0}
.rating{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13.5px;margin:12px 0 0}
.stars{color:var(--gold);letter-spacing:2px}

/* ---------------------------------------------------------------- player */
.player{margin:14px 0 10px}
.player__frame{
  position:relative;width:100%;aspect-ratio:1200/760;min-height:320px;
  background:#05080f;border:1px solid var(--line2);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)
}
.player__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.player__bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:12px}
.player__hint{color:var(--muted);font-size:13.5px;margin-left:auto}
.br-mobile{display:none}
@media(max-width:560px){.br-mobile{display:inline}}
.player__loading{
  position:absolute;inset:0;display:grid;place-items:center;gap:12px;background:#05080f;color:var(--muted);
  font-family:var(--heading);text-transform:uppercase;letter-spacing:2px;font-size:13px;transition:opacity .4s
}
.player__loading.is-hidden{opacity:0;pointer-events:none}
.ballspin{width:46px;height:46px;margin:0 auto 12px;animation:ballspin 1.5s linear infinite}
@keyframes ballspin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.ballspin{animation:none}}

/* ---------------------------------------------------------------- sections */
.section{padding:44px 0}
.section--alt{background:linear-gradient(#0b1220cc,#0b122000);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section__head{max-width:78ch;margin-bottom:22px}
.section__head p{margin-bottom:0;color:#cfd6e6}
.grid{display:grid;gap:16px}
/* Grid items default to min-width:auto, so a wide child (a scroll table, a
   <pre>, a long word) would stretch the column past the viewport instead of
   scrolling inside it. That is what pushed the page 182 px wide on phones. */
.grid>*{min-width:0}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}}
.card{background:linear-gradient(#131c30f2,#0f1727f2);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.card h3{margin-bottom:.4em}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.card--accent{border-color:#ffe16033;background:linear-gradient(#1a2138f2,#131b2ef2)}
.stat{display:flex;flex-direction:column;gap:2px;text-align:center;background:#0f1727f2;border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 10px}
.stat b{font-family:var(--heading);font-size:26px;letter-spacing:1px;color:var(--gold)}
.stat span{font-size:12.5px;color:var(--muted);text-transform:uppercase;letter-spacing:1.2px}

/* tables */
.tablewrap{overflow-x:auto;max-width:100%;border:1px solid var(--line);border-radius:var(--r);background:#0f1727cc}
.tablewrap>table{min-width:520px}
table{border-collapse:collapse;width:100%;font-size:15px}
caption{text-align:left;padding:12px 14px;color:var(--muted);font-size:13.5px;border-bottom:1px solid var(--line)}
th,td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line)}
th{font-family:var(--heading);text-transform:uppercase;letter-spacing:1.1px;font-size:13px;color:var(--gold-2);background:#ffffff08}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:#ffffff08}
td.num{font-variant-numeric:tabular-nums}

/* roster */
.roster{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));list-style:none;padding:0;margin:0}
.roster li{display:flex;align-items:center;gap:9px;background:#0f1727f2;border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 11px;margin:0;font-size:14px}
.roster canvas{width:34px;height:34px;flex:0 0 34px;image-rendering:auto}
.roster b{font-weight:600}
.roster em{display:block;font-style:normal;color:var(--dim);font-size:11.5px;letter-spacing:1px;text-transform:uppercase}

/* keys */
.keys{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 1em;padding:0;list-style:none}
.keys li{margin:0;font-size:14px;color:#cfd6e6}
kbd{
  font-family:var(--heading);font-size:13px;letter-spacing:.5px;background:#1b2540;border:1px solid var(--line2);
  border-bottom-width:3px;border-radius:7px;padding:3px 9px;color:#fff;display:inline-block
}

/* FAQ */
.faq{display:grid;gap:10px}
.faq details{background:#0f1727f2;border:1px solid var(--line);border-radius:var(--r-sm);padding:0}
.faq summary{
  cursor:pointer;padding:14px 16px;font-family:var(--heading);text-transform:uppercase;letter-spacing:1px;
  font-size:15.5px;list-style:none;display:flex;gap:10px;align-items:center
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"";width:16px;height:16px;flex:0 0 16px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,var(--ball) 0 34%,var(--red) 35% 100%);border:2px solid #0b1220}
.faq details[open] summary{color:var(--gold)}
.faq .faq__a{padding:0 16px 16px;color:#cfd6e6}
.faq .faq__a p:last-child{margin-bottom:0}

/* related / footer */
.related{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.footer{margin-top:30px;border-top:1px solid var(--line);background:#070c15;padding:30px 0 calc(30px + var(--safe-b))}
.footer__grid{display:grid;gap:22px;grid-template-columns:1.4fr 1fr 1fr}
@media(max-width:760px){.footer__grid{grid-template-columns:1fr}}
.footer h2{font-size:14px;color:var(--gold-2);letter-spacing:1.4px;margin-bottom:.6em}
.footer ul{list-style:none;padding:0;margin:0}
.footer li{margin:.35em 0}
.footer a{color:#cfd6e6}
.footer__legal{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);color:var(--dim);font-size:13px}
.notice{border:1px solid var(--line2);border-left:4px solid var(--gold);background:#ffe1600d;border-radius:var(--r-sm);padding:14px 16px}

/* breadcrumbs */
.crumbs{display:flex;gap:8px;align-items:center;font-size:13.5px;color:var(--muted);margin:0 0 14px;padding:0;list-style:none;flex-wrap:wrap}
.crumbs li{margin:0}
.crumbs a{color:#cfd6e6}
.crumbs li+li::before{content:"›";margin-right:8px;color:var(--dim)}

/* compare table highlight */
.best{color:var(--green);font-weight:600}
/* a scroll wrapper used inside a card should not draw a second frame */
.card .tablewrap{border:0;background:transparent;border-radius:0;margin:0 -2px}
.card .tablewrap table{font-size:14.5px}
.card .tablewrap th,.card .tablewrap td{padding:9px 11px}