/* ============================================================
   AI Agent v1 — arena.css
   Agent Arena game page (3 stages: pick / battle / result).
   Builds on base.css tokens, nav, buttons and footer.
   No external resources.
   ============================================================ */

.nav-links a.here{opacity:1;border-bottom:3px solid var(--term-green);}

/* arena uses a slightly narrower column than the marketing sections */
main{max-width:1100px;margin:0 auto;padding:48px clamp(1.25rem,3vw,2rem) 90px;}
.page-head h1{font-size:clamp(30px,3.6vw,46px);font-weight:600;line-height:1.1;}
.page-head p{opacity:.85;margin-top:6px;max-width:54ch;text-wrap:pretty;}

.btn.dark{background:var(--ink);color:var(--term-green);}

/* stage switching (override base.css `section` box) */
.stage{display:none;max-width:none;margin:0;padding:0;}
.stage.on{display:block;animation:stageIn .5s cubic-bezier(.2,1.4,.4,1);}
@keyframes stageIn{from{opacity:0;transform:translateY(18px) scale(.985);}to{opacity:1;transform:none;}}

/* ============ stage 1: pick ============ */
.pick-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:34px;}
.pcard{
  border:3px solid var(--ink);border-radius:20px;background:#fff;overflow:hidden;
  box-shadow:var(--card-shadow);cursor:pointer;text-align:left;padding:0;
  transition:transform .18s cubic-bezier(.2,1.6,.4,1),box-shadow .18s;
  display:flex;flex-direction:column;
}
.pcard:hover{transform:translate(-2px,-5px) rotate(-1deg);box-shadow:var(--card-shadow-lift);}
.pcard:active{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--ink);}
.pcard img{width:100%;aspect-ratio:1/1;object-fit:cover;border-bottom:3px solid var(--ink);}
.pcard .pb{padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px;flex:1;}
.pcard h3{font-size:18px;font-weight:600;line-height:1.2;}
.pcard .ep{
  font-family:var(--font-mono);font-size:9.5px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.04em;
  background:var(--fc);border:2px solid var(--ink);border-radius:999px;padding:1px 8px;
  display:inline-block;width:max-content;
}
.pcard.xai .ep{color:var(--term-green);}
.pcard .lore{font-size:12.5px;opacity:.8;line-height:1.45;flex:1;}
.pcard .stats{
  font-family:var(--font-mono);font-size:10.5px;font-weight:700;
  border-top:2px dashed rgba(43,43,51,.2);padding-top:8px;
  display:flex;justify-content:space-between;
}
.pcard .stats .wr{color:var(--ink);}
.pcard .go{
  font-family:var(--font-display);font-weight:600;font-size:13px;text-align:center;
  border:2.5px solid var(--ink);border-radius:10px;background:var(--term-green);
  padding:6px 0;box-shadow:2px 2px 0 var(--ink);
}

/* ============ stage 2: battle ============ */
.arena-shell{position:relative;margin-top:30px;}
.frame-label{
  position:absolute;top:-15px;left:22px;z-index:5;
  background:#fff;border:3px solid var(--ink);border-radius:999px;
  padding:3px 14px;font-family:var(--font-mono);font-size:12px;font-weight:700;
  box-shadow:2px 2px 0 var(--ink);
}
.arena-card{
  border:3px solid var(--ink);border-radius:26px;overflow:hidden;
  box-shadow:6px 6px 0 var(--ink);background:#fff;
}
.arena-card.flash{animation:invFlash .14s steps(2) 5;}
@keyframes invFlash{50%{filter:invert(1);}}
#field{display:block;width:100%;height:auto;touch-action:manipulation;}
.hud{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding:12px 14px;border-top:3px solid var(--ink);background:var(--cream);
}
.hchip{
  display:flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:11.5px;font-weight:700;
  border:2.5px solid var(--ink);border-radius:999px;background:#fff;
  padding:4px 11px;box-shadow:2px 2px 0 var(--ink);
}
.hchip .hd{width:10px;height:10px;border-radius:50%;border:2px solid var(--ink);background:var(--fc);}
.hchip.dead{opacity:.35;text-decoration:line-through;}
.hchip.mine{background:#E9FBF0;}
.hud .spacer{flex:1;}
.hud .ctl{
  font-family:var(--font-mono);font-size:11.5px;font-weight:700;color:var(--ink);
  border:2.5px solid var(--ink);border-radius:10px;background:#fff;
  min-height:2.5rem;padding:0 12px;cursor:pointer;box-shadow:2px 2px 0 var(--ink);
}
.ctl:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink);}
.ctl.on{background:var(--ink);color:var(--term-green);}
.arena-note{
  margin-top:16px;font-family:var(--font-hand);font-size:22px;font-weight:700;
  transform:rotate(-1deg);opacity:.85;
}

/* ============ stage 3: result ============ */
.result-wrap{display:grid;grid-template-columns:300px 1fr;gap:34px;align-items:center;margin-top:34px;}
.win-portrait{
  border:3px solid var(--ink);border-radius:24px;overflow:hidden;
  box-shadow:6px 6px 0 var(--ink);position:relative;background:#fff;
}
.win-portrait img{width:100%;aspect-ratio:1/1;object-fit:cover;}
.win-portrait .crown{
  position:absolute;top:10px;right:12px;font-size:34px;
  transform:rotate(12deg);filter:drop-shadow(2px 2px 0 var(--ink));
}
.result-side .verdict{
  font-family:var(--font-mono);font-size:13px;font-weight:700;
  color:var(--term-green);background:var(--ink);display:inline-block;
  border-radius:10px;padding:5px 13px;margin-bottom:12px;
}
.result-side h2{font-size:clamp(30px,3.4vw,44px);font-weight:600;line-height:1.08;}
.result-side .sub{margin-top:8px;opacity:.85;max-width:46ch;text-wrap:pretty;}
.result-side .champion{
  font-family:var(--font-mono);font-size:12px;font-weight:700;
  margin-top:16px;display:inline-flex;gap:8px;align-items:center;
  border:2.5px solid var(--ink);border-radius:999px;background:#fff;
  padding:5px 13px;box-shadow:2px 2px 0 var(--ink);
}
.result-side .champion .dot{width:11px;height:11px;border-radius:50%;border:2px solid var(--ink);background:var(--fc);flex:none;}
.streak-row{display:flex;gap:14px;margin:22px 0 26px;flex-wrap:wrap;}
.streak{
  border:3px solid var(--ink);border-radius:16px;background:#fff;
  box-shadow:var(--card-shadow);padding:10px 18px;text-align:center;min-width:7.5rem;
}
.streak .n{font-family:var(--font-display);font-weight:700;font-size:30px;line-height:1.1;}
.streak .l{font-family:var(--font-mono);font-size:10px;font-weight:700;opacity:.65;letter-spacing:.06em;}
.streak.hot{background:var(--tier-pro);}
.result-ctas{display:flex;gap:14px;flex-wrap:wrap;}

/* ============ responsive ============ */
@media (max-width:1024px){
  .pick-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:860px){
  .result-wrap{grid-template-columns:1fr;gap:26px;}
  .win-portrait{max-width:280px;}
}
@media (max-width:640px){
  main{padding-top:36px;}
  .pick-grid{grid-template-columns:1fr 1fr;gap:12px;}
  .pcard .lore{display:none;}
  .hud{gap:8px;padding:10px;}
  .hchip{font-size:10px;padding:4px 8px;}
  .result-ctas .btn{width:100%;}
  .arena-note{font-size:19px;}
}