/* Darwin Arena — battle simulator styling
   bone+ink identity for selection; charcoal battlefield for the fight */
:root{
  --bone:#E8E0CC; --bone-2:#DED4BB; --paper:#F2ECDC; --ink:#16170F; --ink-2:#3A3A2C;
  --brass:#C2992E; --clay:#B5462B; --moss:#5A6B3B;
  --team-a:#E2632E; --team-b:#3FA7B5;
  --field:#14150E; --line:rgba(22,23,15,0.18);
}
*{box-sizing:border-box}
body{
  margin:0; min-height:100vh; color:var(--ink); background:var(--bone);
  background-image:radial-gradient(circle at 50% -10%,rgba(194,153,46,.10),transparent 55%),
    repeating-linear-gradient(0deg,transparent 0 38px,rgba(22,23,15,.025) 38px 39px);
  font-family:"Space Mono",ui-monospace,monospace;
}
.masthead{display:flex;gap:1.1rem;align-items:center;justify-content:center;
  padding:1.8rem 1rem 1.2rem;border-bottom:2px solid var(--ink);background:var(--paper)}
.emblem{width:84px;height:84px;display:inline-block;filter:drop-shadow(0 2px 0 rgba(22,23,15,.12))}
.emblem svg{width:100%;height:100%;display:block}
h1{font-family:"Anton",sans-serif;font-weight:400;margin:0;text-transform:uppercase;
  font-size:clamp(2.3rem,6.5vw,3.8rem);letter-spacing:.02em;line-height:.95}
.tagline{margin:.3rem 0 0;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--clay)}
main{width:min(980px,100%);margin:0 auto;padding:1.4rem 1.1rem 3rem}
.pit{display:grid;grid-template-columns:1fr auto 1fr;gap:.8rem;align-items:start;margin-bottom:2rem}
.corner{display:flex;flex-direction:column;align-items:center;gap:.55rem}
.podium{width:100%;appearance:none;font-family:inherit;color:inherit;cursor:pointer;
  background:var(--paper);border:2px solid var(--ink);border-radius:2px;box-shadow:5px 5px 0 var(--ink);
  padding:1.2rem .8rem;display:flex;flex-direction:column;align-items:center;gap:.35rem;text-align:center;
  min-height:158px;justify-content:center;transition:transform .08s,box-shadow .08s}
.podium:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.podium.active{border-color:var(--clay);box-shadow:5px 5px 0 var(--clay)}
.podium-label{font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-2)}
.podium-icon{font-size:2.4rem;line-height:1;color:var(--line)}
.podium.filled .podium-icon{font-size:3rem;color:var(--ink)}
.podium-name{font-family:"Anton",sans-serif;font-size:1.4rem;text-transform:uppercase}
.podium-class{font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--moss)}
.stepper{display:flex;align-items:center;gap:.5rem}
.step{appearance:none;font-family:inherit;cursor:pointer;background:var(--ink);color:var(--bone);
  border:none;border-radius:2px;width:34px;height:34px;font-size:.9rem;line-height:1}
.step:hover{background:var(--clay)}
.step-val{font-family:"Anton",sans-serif;font-size:1.7rem;min-width:3.4rem;text-align:center}
.step-cap{font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)}
.versus{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;padding-top:2.4rem}
.vs-mark{font-family:"Anton",sans-serif;font-size:1.5rem;color:var(--clay)}
#fight-btn{font-family:"Anton",sans-serif;text-transform:uppercase;letter-spacing:.05em;font-size:1.15rem;
  padding:.75rem 1.1rem;border:2px solid var(--ink);border-radius:2px;cursor:pointer;
  background:var(--clay);color:var(--paper);box-shadow:4px 4px 0 var(--ink);transition:transform .08s,box-shadow .08s}
#fight-btn:hover:not(:disabled){transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
#fight-btn:disabled{background:var(--bone-2);color:var(--line);border-color:var(--line);box-shadow:4px 4px 0 var(--line);cursor:not-allowed}
.section-eyebrow{font-weight:700;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-2);
  border-bottom:1px solid var(--line);padding-bottom:.5rem;margin:0 0 1rem}
.roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:.65rem}
.card{background:var(--paper);border:1.5px solid var(--ink);border-radius:2px;padding:.75rem .65rem;cursor:pointer;
  text-align:left;font-family:inherit;color:inherit;position:relative;transition:transform .08s,box-shadow .08s,background .12s}
.card:hover{transform:translateY(-3px);box-shadow:0 4px 0 var(--ink);background:#fff}
.card.chosen{background:var(--bone-2);border-color:var(--brass)}
.card.chosen::after{content:"PICKED";position:absolute;top:6px;right:6px;font-size:.48rem;letter-spacing:.12em;
  background:var(--brass);color:var(--ink);padding:2px 4px;border-radius:2px}
.card-top{display:flex;align-items:center;gap:.45rem}
.card-icon{font-size:1.6rem;line-height:1}
.card-name{font-family:"Anton",sans-serif;font-size:1rem;text-transform:uppercase;line-height:1.05}
.card-class{font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;color:var(--moss);margin-top:.4rem}
.card-weapon{font-size:.62rem;color:var(--ink-2);margin-top:.3rem;line-height:1.35;min-height:2.5em}
#battle-screen{padding-top:.4rem}
#hud{display:grid;grid-template-columns:1fr auto 1fr;gap:.6rem;align-items:center;
  border:2px solid var(--ink);background:var(--ink);color:var(--bone);padding:.7rem 1rem;border-radius:2px 2px 0 0}
.hud-side{min-width:0}
.hud-right{text-align:right}
.hud-name{font-family:"Anton",sans-serif;font-size:1.15rem;text-transform:uppercase;line-height:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud-count{font-size:1.5rem;font-weight:700;font-variant-numeric:tabular-nums}
.hud-mid{display:flex;flex-direction:column;align-items:center;gap:.4rem}
.hud-timer{font-size:.8rem;letter-spacing:.12em;color:var(--brass);font-variant-numeric:tabular-nums}
.hud-controls{display:flex;gap:.3rem}
.spd,.ctrl{appearance:none;font-family:inherit;cursor:pointer;border:1px solid var(--bone-2);
  background:transparent;color:var(--bone);border-radius:2px;padding:.25rem .5rem;font-size:.66rem;letter-spacing:.06em}
.spd.on{background:var(--brass);color:var(--ink);border-color:var(--brass)}
.ctrl:hover,.spd:hover{background:rgba(232,224,204,.15)}
.field-wrap{position:relative;height:min(66vh,560px);border:2px solid var(--ink);border-top:none;border-radius:0 0 2px 2px;overflow:hidden}
#field{width:100%;height:100%;display:block;background:var(--field)}
.winner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
  background:rgba(20,21,14,.82);color:var(--bone);text-align:center;padding:1.5rem;backdrop-filter:blur(2px)}
.winner[hidden]{display:none}
.win-label{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--brass)}
.win-name{font-family:"Anton",sans-serif;font-size:clamp(2rem,7vw,3.4rem);text-transform:uppercase;line-height:1}
.win-sub{font-family:"Newsreader",Georgia,serif;font-style:italic;font-size:1rem;color:var(--bone-2);max-width:30ch}
.btn-dark{margin-top:.8rem;font-family:"Anton",sans-serif;text-transform:uppercase;letter-spacing:.05em;font-size:1.1rem;
  padding:.6rem 1.3rem;border:2px solid var(--bone);background:var(--bone);color:var(--ink);border-radius:2px;cursor:pointer}
.btn-dark:hover{background:var(--brass);border-color:var(--brass)}
footer{border-top:2px solid var(--ink);text-align:center;padding:1rem;font-size:.6rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
footer .dot{margin:0 .5rem;color:var(--clay)}
@media (max-width:640px){
  .pit{grid-template-columns:1fr}
  .versus{flex-direction:row;flex-wrap:wrap;padding-top:.4rem}
  .hud-name{font-size:.95rem}.hud-count{font-size:1.2rem}
}
:focus-visible{outline:3px solid var(--moss);outline-offset:2px}