/* FlashNics — vanilla CSS. No frameworks, no external assets. */

:root{
  --arena:#2b5cff;
  --ink:#f4f7ff;
  --dim:#93a3c9;
  --panel:rgba(12,20,48,.72);
  --edge:rgba(120,160,255,.28);
  --water:#2b7fff; --fire:#e8322b; --earth:#28a745;
  --disc:#2b5cff; --brains:#e01b24; --str:#27a844; --agi:#f2c200;
}
/* Two roles, both from stacks that exist locally — the CSP blocks font CDNs and
   a silent fallback would be worse than choosing deliberately.
   Display: heavy grotesque, tight and shouty, to match the card lettering.
   Body/UI: humanist sans. Data: tabular figures wherever numbers line up. */
:root{
  --display:"Arial Black","Helvetica Neue Bold",Impact,"Segoe UI Black",system-ui,sans-serif;
  --body:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:16px/1.55 var(--body);
  color:var(--ink); background:#060a1c; min-height:100vh;
  background-image:
    radial-gradient(1100px 700px at 12% -8%, rgba(43,127,255,.30), transparent 60%),
    radial-gradient(900px 600px at 88% 0%,  rgba(232,50,43,.20),  transparent 60%),
    radial-gradient(900px 700px at 50% 110%,rgba(40,167,69,.20),  transparent 60%),
    linear-gradient(#060a1c,#04060f);
  background-attachment:fixed;
}
h1,h2,h3{line-height:1.12;margin:0 0 .5em;text-wrap:balance}
h2{font-size:1.7rem;letter-spacing:.4px;font-family:var(--display)}
h1{font-family:var(--display)}
a{color:#8fd0ff}

/* numbers that sit in columns or swap in place shouldn't jitter */
.pts,.av-badge,.slot,#deck-count,#round-no{font-variant-numeric:tabular-nums}

/* keyboard users get the same affordances as mouse users */
:focus-visible{outline:3px solid #ffd54a;outline-offset:3px;border-radius:6px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .hero-cards img:hover,.in-hand:hover,.gal-card img:hover{transform:none}
}

/* ------------------------------------------------------------- chrome */
header{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:10px 20px; backdrop-filter:blur(10px);
  background:linear-gradient(180deg,rgba(6,10,28,.95),rgba(6,10,28,.72));
  border-bottom:2px solid var(--arena); transition:border-color .4s;
}
.brand{
  font-family:var(--display);
  font-weight:900; font-size:1.5rem; letter-spacing:2px; white-space:nowrap;
  background:linear-gradient(92deg,#4ea8ff 0%,#f2c200 45%,#ff5a4e 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 26px rgba(120,180,255,.35);
}
.brand span{font-size:.62rem;letter-spacing:3px;color:var(--dim);display:block;
  -webkit-text-fill-color:var(--dim); margin-top:-4px}
nav{display:flex; gap:8px; flex-wrap:wrap; margin-left:auto}
nav button{
  font:inherit; font-weight:700; font-size:.86rem; letter-spacing:.6px;
  color:var(--dim); background:transparent; border:1px solid transparent;
  padding:8px 14px; border-radius:999px; cursor:pointer; transition:.18s;
}
nav button:hover{color:#fff; background:rgba(255,255,255,.07)}
nav button.on{color:#04060f; background:var(--arena); border-color:transparent}

.view{display:none; max-width:1240px; margin:0 auto; padding:26px 20px 70px}
.view.on{display:block}

/* ------------------------------------------------------------ buttons */
.btn{
  font:inherit; font-weight:800; letter-spacing:.4px; cursor:pointer;
  color:#04060f; background:linear-gradient(180deg,#eef4ff,#c7d8ff);
  border:0; border-radius:12px; padding:12px 20px;
  box-shadow:0 5px 0 rgba(0,0,0,.35), 0 10px 24px rgba(0,0,0,.35);
  transition:transform .08s, box-shadow .08s, filter .15s;
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(4px); box-shadow:0 1px 0 rgba(0,0,0,.35)}
.btn:disabled{opacity:.32; cursor:not-allowed; filter:grayscale(.7)}
.btn.primary{background:linear-gradient(180deg,#ffe486,#f2b500); }
.btn.ghost{background:transparent;color:var(--ink);box-shadow:none;border:2px solid var(--edge)}
.btn.a-disc{background:linear-gradient(180deg,#8fb0ff,#2b5cff);color:#fff}
.btn.a-brains{background:linear-gradient(180deg,#ff8f95,#e01b24);color:#fff}
.btn.a-str{background:linear-gradient(180deg,#8ee6a3,#27a844);color:#052}
.btn.a-agi{background:linear-gradient(180deg,#ffe98a,#f2c200);color:#3a2b00}

/* --------------------------------------------------------------- home */
.hero{text-align:center; padding:40px 10px 26px}
.hero h1{
  font-family:var(--display);
  font-size:clamp(2.6rem,8vw,5rem); font-weight:900; letter-spacing:3px; margin:0;
  background:linear-gradient(92deg,#4ea8ff,#f2c200 48%,#ff5a4e);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 6px 30px rgba(80,150,255,.45));
}
.hero p.tag{font-size:1.15rem;color:var(--dim);max-width:620px;margin:14px auto 26px}
.hero-cards{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:28px 0 6px;perspective:900px}
.hero-cards img{
  width:150px;border-radius:10px;box-shadow:0 18px 40px rgba(0,0,0,.6);
  transition:.35s; transform-origin:bottom center;
}
.hero-cards img:nth-child(1){transform:rotate(-9deg) translateY(10px)}
.hero-cards img:nth-child(2){transform:rotate(-3deg)}
.hero-cards img:nth-child(3){transform:rotate(3deg)}
.hero-cards img:nth-child(4){transform:rotate(9deg) translateY(10px)}
.hero-cards img:hover{transform:rotate(0) translateY(-14px) scale(1.06); z-index:2}

.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:34px}
.tile{
  background:var(--panel); border:1px solid var(--edge); border-radius:16px; padding:20px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.tile h3{color:#fff;font-size:1.15rem}
.tile p{color:var(--dim);margin:0}
.tile .k{display:inline-block;font-weight:900;font-size:1.7rem;color:var(--arena)}

/* --------------------------------------------------------------- game */
.board{display:grid; grid-template-columns:1fr 320px; gap:18px; align-items:start}
@media (max-width:1000px){ .board{grid-template-columns:1fr} }

.side{background:var(--panel);border:1px solid var(--edge);border-radius:16px;padding:14px}
.playerbar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--edge);border-radius:14px;padding:10px 14px;margin-bottom:12px;
}
.playerbar .name{font-weight:900;letter-spacing:1.5px}
.playerbar .pts{font-family:var(--display);font-size:1.9rem;font-weight:900;color:var(--arena);line-height:1}
.playerbar .pts small{font-size:.6rem;color:var(--dim);display:block;letter-spacing:2px}
.arenas{display:flex;gap:6px}
.slot{
  width:34px;height:34px;border-radius:8px;display:grid;place-items:center;
  font-weight:900;font-size:.8rem;color:rgba(255,255,255,.5);
  border:2px dashed rgba(255,255,255,.22); background:rgba(255,255,255,.04);
}
.slot.filled{border-style:solid;color:#fff;box-shadow:0 0 14px currentColor}
.slot-disc.filled{background:var(--disc);border-color:#9dbaff}
.slot-brains.filled{background:var(--brains);border-color:#ffa0a5}
.slot-str.filled{background:var(--str);border-color:#8fe6a4}
.slot-agi.filled{background:var(--agi);border-color:#ffe98a;color:#3a2b00}
.prot{font-size:.82rem;color:var(--dim)}
.mini-hand{display:flex;gap:3px;margin-left:auto}

.arena-strip{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  border-radius:16px;padding:12px 18px;margin-bottom:12px;
  background:linear-gradient(100deg,var(--arena),rgba(6,10,28,.15));
  box-shadow:0 0 34px -6px var(--arena); transition:background .45s;
}
.arena-strip .lbl{font-size:.66rem;letter-spacing:3px;opacity:.85}
.arena-strip .big{font-family:var(--display);font-size:1.7rem;font-weight:900;letter-spacing:2px;line-height:1}
.arena-strip .meta{margin-left:auto;font-size:.82rem;opacity:.9;text-align:right}

.turn-banner{
  font-weight:900;letter-spacing:2px;font-size:.82rem;padding:6px 14px;border-radius:999px;
}
.turn-banner.mine{background:#26d07c;color:#04220f}
.turn-banner.theirs{background:rgba(255,255,255,.14);color:var(--dim)}

#table-area{
  min-height:330px;display:flex;gap:26px;flex-wrap:wrap;align-items:flex-start;justify-content:center;
  background:rgba(4,8,22,.5);border:1px solid var(--edge);border-radius:16px;padding:18px;
}
.empty-table{color:var(--dim);align-self:center;text-align:center;padding:60px 20px}
.play{display:flex;flex-direction:column;align-items:center;gap:8px;transition:.3s}
.play.beaten{opacity:.42;filter:grayscale(.55)}
.play-who{font-size:.68rem;letter-spacing:3px;color:var(--dim);font-weight:800}
.play-cards{display:flex;gap:8px;align-items:flex-start}
.play-tag{
  font-size:.68rem;letter-spacing:2px;font-weight:900;color:#04220f;
  background:#26d07c;border-radius:999px;padding:3px 12px;
}

/* ------------------------------------------------------------- cards */
.card{position:relative;border-radius:9px;flex:0 0 auto}
.card img{display:block;width:100%;height:auto;border-radius:9px}
.play .card{width:170px;box-shadow:0 12px 30px rgba(0,0,0,.6)}
.play .card.mini{width:132px}
.card.big{width:190px}
.av-badge{
  position:absolute;top:-10px;left:50%;transform:translateX(-50%);
  background:#04060f;color:#fff;border:2px solid var(--arena);
  border-radius:999px;padding:2px 12px;font-weight:900;font-size:1rem;
  box-shadow:0 0 16px var(--arena);
}
.av-badge.boosted{background:#f2c200;color:#2a2000;border-color:#fff}
.card.facedown{
  width:34px;height:48px;border-radius:5px;
  background:repeating-linear-gradient(45deg,#123,#123 5px,#1b3358 5px,#1b3358 10px);
  border:1px solid rgba(140,180,255,.4);
}

.card.support{
  width:150px;min-height:196px;padding:10px;color:#08111f;
  display:flex;flex-direction:column;gap:4px;
  box-shadow:0 10px 26px rgba(0,0,0,.5);
}
.card.support.mcard{background:linear-gradient(160deg,#ffe89a,#f0b400)}
.card.support.acard{background:linear-gradient(160deg,#c9e2ff,#6fa6ff)}
.card.support.mini{width:118px;min-height:150px;font-size:.72rem}
.sup-code{font-size:.66rem;font-weight:900;letter-spacing:2px;opacity:.65}
.sup-name{font-size:1.15rem;font-weight:900;line-height:1}
.card.support.mini .sup-name{font-size:.95rem}
.sup-pair{font-size:.7rem;font-weight:800;opacity:.75}
.sup-body{font-size:.72rem;line-height:1.35}
.card.support.mini .sup-body{font-size:.62rem}
.sup-line{display:flex;align-items:center;gap:5px;margin-top:3px;font-weight:700}
.chip{font-size:.6rem;font-weight:900;color:#fff;border-radius:999px;padding:1px 7px;letter-spacing:.5px}
.chip-water{background:var(--water)} .chip-fire{background:var(--fire)} .chip-earth{background:var(--earth)}

/* hand */
#your-hand{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;min-height:210px;align-items:flex-start}
.in-hand{width:126px;cursor:pointer;transition:transform .16s, box-shadow .16s, filter .16s}
.in-hand.support{width:126px;min-height:168px}
.in-hand:hover{transform:translateY(-10px)}
.in-hand.picked{
  transform:translateY(-16px);
  box-shadow:0 0 0 3px #26d07c, 0 16px 34px rgba(0,0,0,.6);
  border-radius:11px;
}
.in-hand.disabled{filter:grayscale(.85) brightness(.55);cursor:not-allowed}
.in-hand.disabled:hover{transform:none}

.controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:14px;justify-content:center}
#sel-info{color:var(--dim);font-size:.9rem;min-height:1.4em;text-align:center;flex-basis:100%}

/* log */
#log{height:420px;overflow-y:auto;font-size:.84rem;display:flex;flex-direction:column;gap:5px}
.log-line{padding:5px 9px;border-radius:8px;background:rgba(255,255,255,.04);border-left:3px solid transparent}
.log-round{background:var(--arena);color:#fff;font-weight:900;letter-spacing:1px;text-align:center;border:0}
.log-you{border-left-color:#26d07c}
.log-cpu{border-left-color:#ff6b6b}
.log-act{border-left-color:#f2c200;background:rgba(242,194,0,.13);font-weight:700}
.log-win{border-left-color:#26d07c;background:rgba(38,208,124,.16);font-weight:800}
.log-score{border-left-color:#8fd0ff;background:rgba(143,208,255,.12)}
.log-lead{color:var(--dim)}
.log-phrase{font-style:italic;color:#ffd97a;background:transparent}
.log-sys{color:var(--dim);font-style:italic}

/* ------------------------------------------------------------- modals */
.modal-back{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;
  background:rgba(2,4,12,.78);backdrop-filter:blur(5px);
}
.modal{
  background:linear-gradient(180deg,#121c3d,#0a1128);
  border:1px solid var(--edge);border-radius:18px;padding:26px;max-width:600px;
  box-shadow:0 30px 80px rgba(0,0,0,.7);
}
.modal h3{font-size:1.5rem;color:#fff}
.modal p{color:var(--dim)}
.modal-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.end-choice{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.end-text{flex:1;min-width:220px}

/* -------------------------------------------------------------- rules */
.prose{max-width:860px}
.prose p,.prose li{color:#d7e0f5}
.prose h2{margin-top:34px;color:#fff;border-bottom:2px solid var(--edge);padding-bottom:8px}
.prose h3{margin-top:24px;color:var(--arena)}
.callout{
  background:rgba(242,194,0,.12);border-left:4px solid #f2c200;
  border-radius:0 12px 12px 0;padding:12px 16px;margin:16px 0;
}
.callout.blue{background:rgba(43,127,255,.14);border-left-color:#4ea8ff}
table.rules{width:100%;border-collapse:collapse;margin:14px 0;font-size:.92rem}
table.rules th,table.rules td{border:1px solid var(--edge);padding:8px 10px;text-align:left;vertical-align:top}
table.rules th{background:rgba(255,255,255,.07);font-size:.78rem;letter-spacing:1px;text-transform:uppercase}
.nicwheel{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
.nicwheel div{
  flex:1;min-width:180px;border-radius:12px;padding:12px 14px;font-weight:700;color:#fff;
}
.nw-water{background:linear-gradient(120deg,var(--water),#0b3f8f)}
.nw-fire{background:linear-gradient(120deg,var(--fire),#7a1410)}
.nw-earth{background:linear-gradient(120deg,var(--earth),#0d5423)}
.band{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.band div{flex:1;min-width:150px;border-radius:12px;padding:10px 14px;font-weight:800;color:#fff}
.b-disc{background:var(--disc)} .b-brains{background:var(--brains)}
.b-str{background:var(--str)} .b-agi{background:var(--agi);color:#3a2b00}

/* ------------------------------------------------------------- sample */
.step{
  display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--edge);border-left:4px solid var(--arena);
  border-radius:0 14px 14px 0;padding:16px;margin:16px 0;
}
.step img{width:132px;border-radius:9px;box-shadow:0 10px 24px rgba(0,0,0,.55)}
/* a Combo is a mercenary plus its support card — show both */
.step-cards{display:flex;gap:10px;flex:0 0 auto;align-items:flex-start;flex-wrap:wrap}
.step-cards .card.support{width:132px;min-height:0;font-size:.7rem}
.step-cards .card.support .sup-name{font-size:1rem}
.step-cards .card.support .sup-body{font-size:.66rem}
.step .txt{flex:1;min-width:260px}
.step .n{
  display:inline-block;font-weight:900;font-size:.7rem;letter-spacing:2px;
  background:var(--arena);color:#fff;border-radius:999px;padding:3px 11px;margin-bottom:8px;
}
.step h4{margin:0 0 6px;font-size:1.1rem;color:#fff}
.step p{margin:0;color:var(--dim);font-size:.93rem}

/* ------------------------------------------------------------ gallery */
#gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
.gal-card{text-align:center}
.gal-card img{width:100%;border-radius:9px;box-shadow:0 8px 20px rgba(0,0,0,.5);transition:.2s}
.gal-card img:hover{transform:translateY(-6px) scale(1.04);box-shadow:0 16px 34px rgba(0,0,0,.7)}
.gal-name{font-weight:800;font-size:.86rem;margin-top:6px}
.gal-meta{font-size:.72rem;color:var(--dim)}

footer{text-align:center;color:var(--dim);font-size:.8rem;padding:30px 20px 50px}

/* ------------------------------------------------------------- the forge */
.forge-wrap{display:grid;grid-template-columns:minmax(260px,430px) 1fr;gap:28px;align-items:start;margin-top:20px}
@media (max-width:860px){ .forge-wrap{grid-template-columns:1fr} }
.forge-preview{position:sticky;top:80px}
#forge-canvas{
  width:100%;max-width:430px;height:auto;border-radius:12px;cursor:grab;touch-action:none;
  box-shadow:0 20px 50px rgba(0,0,0,.65);background:#04060f;
}
#forge-canvas:active{cursor:grabbing}
.forge-readout{display:flex;gap:26px;margin-top:14px}
.forge-readout div{text-align:center}
.forge-readout small{display:block;font-size:.58rem;letter-spacing:2px;color:var(--dim)}
.forge-stat{font-family:var(--display);font-size:2rem;font-weight:900;color:var(--arena);
  font-variant-numeric:tabular-nums}
.forge-stat.bad{color:#ff6b6b}
.forge-form{display:flex;flex-direction:column;gap:12px;max-width:520px}
.fl{display:block;font-weight:700;font-size:.82rem;letter-spacing:1px;color:var(--dim);
  text-transform:uppercase}
.fl input[type=text],.fl input[type=file]{
  display:block;width:100%;margin-top:5px;padding:9px 11px;border-radius:9px;
  border:1px solid var(--edge);background:rgba(4,8,22,.7);color:var(--ink);
  font:400 15px/1.4 var(--body);text-transform:none;letter-spacing:0;
}
.fl input[type=range]{display:block;width:100%;margin-top:6px;accent-color:var(--arena)}
.fl output{float:right;font-family:var(--display);font-size:1.05rem;color:var(--ink);
  font-variant-numeric:tabular-nums}
.nicpick{display:flex;gap:8px;margin-top:6px}
.nicpick button{
  flex:1;font:inherit;font-weight:800;font-size:.8rem;letter-spacing:1px;cursor:pointer;
  padding:9px;border-radius:9px;border:2px solid var(--edge);background:transparent;color:var(--dim);
}
.nicpick button[data-nic=water].on{background:var(--water);border-color:#7fb6ff;color:#fff}
.nicpick button[data-nic=fire].on{background:var(--fire);border-color:#ff9b95;color:#fff}
.nicpick button[data-nic=earth].on{background:var(--earth);border-color:#8fe6a4;color:#04220f}
.forge-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.forge-note{font-size:.85rem;color:var(--dim);min-height:1.3em;margin:0}
.forge-note.bad{color:#ff9b95}
.muted{color:var(--dim);font-size:.88rem}
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
.gal-actions{display:flex;gap:6px;justify-content:center;margin-top:6px}
.mini-btn{
  font:inherit;font-size:.7rem;font-weight:800;letter-spacing:.5px;cursor:pointer;
  padding:4px 9px;border-radius:7px;border:1px solid var(--edge);
  background:rgba(255,255,255,.06);color:var(--ink);
}
.mini-btn:hover{background:rgba(255,255,255,.14)}
.mini-btn.danger,.btn.danger{border-color:#ff6b6b;color:#ff9b95}
.btn.danger{background:transparent}
.checkline{display:flex;align-items:center;gap:9px;text-transform:none;letter-spacing:0;
  font-size:.95rem;color:var(--ink);cursor:pointer}
.checkline input{width:18px;height:18px;accent-color:var(--arena);cursor:pointer}
.page-view img{width:100%;max-width:760px;height:auto;border-radius:10px;
  box-shadow:0 18px 44px rgba(0,0,0,.6);display:block}
.modal:has(.page-view){max-width:820px}