/* Summit — congreszaal-navy, papieren kaarten met landstrepen.
   Tokens */
:root{
  --navy:#22303F;        /* de congreszaal / tafel */
  --navy-deep:#19232E;   /* panelen, vijandelijke zijde */
  --paper:#EFE7D8;       /* kaartpapier */
  --paper-dim:#DDD2BC;
  --ink:#26221C;         /* tekst op papier */
  --chalk:#DCE3E9;       /* tekst op navy */
  --chalk-dim:#93A3B1;
  --brass:#C9A227;       /* Invloed */
  --attack:#B4452F;
  --nl:#E8630A; --be:#F2C700; --fr:#2B5FAD; --int:#6C8B8B;
  --ok:#5F8F5A;
  --radius:6px;
  --shadow:0 2px 6px rgba(10,16,22,.45);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--navy);
  color:var(--chalk);
  font-family:"Jost",system-ui,sans-serif;
  font-size:16px;
  min-height:100vh;
}
button{font-family:inherit;cursor:pointer}
button:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- topbar / wordmark ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:.7rem 1rem;background:var(--navy-deep);
}
.wordmark{
  background:none;border:0;color:var(--chalk);
  font-weight:700;font-size:1.35rem;letter-spacing:.14em;
  padding:0;line-height:1.1;text-align:left;
}
.stripes{display:flex;height:4px;margin-top:3px;border-radius:2px;overflow:hidden}
.stripes i{flex:1}
.s-nl{background:var(--nl)}.s-be{background:var(--be)}.s-fr{background:var(--fr)}.s-int{background:var(--int)}
.topbar-right{font-weight:500;color:var(--chalk-dim);font-size:.95rem}

main{max-width:1100px;margin:0 auto;padding:1.2rem 1rem 4rem}
.loading{color:var(--chalk-dim);padding:3rem 0;text-align:center}

h1{font-size:1.5rem;font-weight:600;margin:0 0 .3rem}
h2{font-size:1.15rem;font-weight:600;margin:1.6rem 0 .6rem}
p.lead{color:var(--chalk-dim);margin:0 0 1.2rem;max-width:60ch}

/* ---------- buttons ---------- */
.btn{
  border:0;border-radius:var(--radius);
  padding:.55rem 1.1rem;font-weight:600;font-size:1rem;
  background:var(--paper);color:var(--ink);
}
.btn:hover{background:#fff}
.btn.brass{background:var(--brass);color:#221B04}
.btn.brass:hover{background:#E0B93A}
.btn.quiet{background:transparent;color:var(--chalk);border:1px solid var(--chalk-dim)}
.btn.quiet:hover{border-color:var(--chalk);color:#fff}
.btn.danger{background:transparent;color:#D98873;border:1px solid #7A4A3C}
.btn:disabled{opacity:.45;cursor:default}
.btn-row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}

/* ---------- lobby ---------- */
.deck-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.8rem}
.deck-tile{
  background:var(--navy-deep);border-radius:var(--radius);
  padding:.9rem;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:.6rem;
}
.deck-tile .name{font-weight:600;font-size:1.05rem}
.deck-tile .meta{color:var(--chalk-dim);font-size:.9rem}
.deck-tile .meta .bad{color:#D98873}
.empty-note{
  background:var(--navy-deep);border-radius:var(--radius);
  padding:1.6rem;text-align:center;box-shadow:var(--shadow);
}
.game-row{display:flex;justify-content:space-between;align-items:center;
  background:var(--navy-deep);border-radius:var(--radius);padding:.6rem .9rem;margin-bottom:.5rem}
.game-row .meta{color:var(--chalk-dim);font-size:.92rem}

/* ---------- cards (shared) ---------- */
.card{
  position:relative;background:var(--paper);color:var(--ink);
  border-radius:var(--radius);box-shadow:var(--shadow);
  border-left:6px solid var(--int);
  padding:.45rem .55rem .5rem .65rem;
  user-select:none;
}
.card.c-NL{border-left-color:var(--nl)}
.card.c-BE{border-left-color:var(--be)}
.card.c-FR{border-left-color:var(--fr)}
.card .cost{
  position:absolute;top:-.45rem;left:-.65rem;
  width:1.7rem;height:1.7rem;border-radius:50%;
  background:var(--brass);color:#221B04;
  font-weight:700;display:flex;align-items:center;justify-content:center;
  box-shadow:0 1px 3px rgba(0,0,0,.4);font-size:.95rem;
}
.card .cname{font-weight:600;line-height:1.15;font-size:.92rem;margin-left:.7rem}
.card .ctext{font-size:.8rem;line-height:1.25;margin:.25rem 0 .2rem;color:#4A4437}
.card .stats{display:flex;justify-content:space-between;font-weight:700;font-size:.95rem}
.card .stats .pow{color:var(--attack)}
.card .stats .sup{color:#3D6B3A}
.card .spell-tag{font-size:.78rem;font-weight:600;color:#5A5348;margin-top:.15rem}

/* ---------- deck builder ---------- */
.builder{display:grid;grid-template-columns:1fr 290px;gap:1rem}
.filter-row{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.8rem}
.chip{
  border:1px solid var(--chalk-dim);background:transparent;color:var(--chalk);
  border-radius:999px;padding:.25rem .8rem;font-weight:500;font-size:.92rem;
}
.chip.on{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.catalog{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.9rem .7rem}
.catalog .card{cursor:pointer;transition:transform .08s ease}
.catalog .card:hover{transform:translateY(-2px)}
.catalog .card .incount{
  position:absolute;top:-.45rem;right:-.4rem;background:var(--ink);color:var(--paper);
  border-radius:50%;width:1.5rem;height:1.5rem;font-size:.85rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.deck-rail{
  background:var(--navy-deep);border-radius:var(--radius);padding:.8rem;
  align-self:start;position:sticky;top:1rem;box-shadow:var(--shadow);
}
.deck-rail input{
  width:100%;border:0;border-radius:var(--radius);padding:.5rem .6rem;
  font-family:inherit;font-size:1rem;margin-bottom:.6rem;background:var(--paper);color:var(--ink);
}
.deck-count{font-weight:700;font-size:1.05rem;margin-bottom:.5rem}
.deck-count.full{color:var(--ok)}
.rail-list{list-style:none;margin:0 0 .8rem;padding:0;max-height:46vh;overflow:auto}
.rail-list li{
  display:flex;justify-content:space-between;align-items:center;gap:.4rem;
  padding:.3rem .45rem;border-radius:4px;margin-bottom:2px;
  background:var(--paper);color:var(--ink);font-size:.9rem;font-weight:500;
  border-left:5px solid var(--int);
}
.rail-list li.c-NL{border-left-color:var(--nl)}
.rail-list li.c-BE{border-left-color:var(--be)}
.rail-list li.c-FR{border-left-color:var(--fr)}
.rail-list .rcost{font-weight:700;color:#6B5B1E;width:1.1rem}
.rail-list .rname{flex:1}
.rail-list button{border:0;background:none;font-weight:700;font-size:1rem;color:var(--attack);padding:0 .2rem}

/* ---------- game board ---------- */
.board{display:flex;flex-direction:column;gap:.55rem}
.side-panel{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  background:var(--navy-deep);border-radius:var(--radius);padding:.5rem .8rem;
}
.side-panel .who{font-weight:600}
.hp{font-weight:700;font-size:1.1rem}
.hp .lbl,.mana .lbl,.deckn .lbl{font-weight:500;color:var(--chalk-dim);font-size:.85rem;margin-right:.25rem}
.mana{font-weight:700;color:var(--brass)}
.pips{display:inline-flex;gap:2px;margin-left:.35rem;vertical-align:middle}
.pips i{width:9px;height:9px;border-radius:50%;background:#3A4855}
.pips i.on{background:var(--brass)}
.deckn{color:var(--chalk-dim);font-weight:500}
.row{
  min-height:96px;display:flex;gap:.5rem;align-items:stretch;justify-content:center;
  padding:.4rem;border-radius:var(--radius);flex-wrap:wrap;
}
.row.enemy{background:rgba(0,0,0,.18)}
.row.mine{background:rgba(255,255,255,.05)}
.row .placeholder{align-self:center;color:var(--chalk-dim);font-size:.9rem}
.unit{width:108px;cursor:default}
.unit.actionable{cursor:pointer;box-shadow:0 0 0 2px var(--brass),var(--shadow)}
.unit.targetable{cursor:pointer;box-shadow:0 0 0 3px var(--attack),var(--shadow)}
.unit.selected{box-shadow:0 0 0 3px #fff,var(--shadow)}
.unit .cname{font-size:.85rem;margin-left:.55rem}
.unit.asleep::after{
  content:"zzz";position:absolute;right:.35rem;top:.2rem;
  font-size:.7rem;color:#8A8172;font-weight:600;
}
.hero-target{border:2px dashed transparent;border-radius:var(--radius)}
.hero-target.targetable{border-color:var(--attack);cursor:pointer}
.midbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:.15rem .3rem;color:var(--chalk-dim);font-size:.92rem;min-height:1.6rem;
}
.midbar .hint{color:var(--brass);font-weight:500}
.hand{
  display:flex;gap:.55rem;overflow-x:auto;padding:.55rem .3rem .8rem;
  scrollbar-width:thin;
}
.hand .card{flex:0 0 138px;cursor:default}
.hand .card.playable{cursor:pointer;box-shadow:0 0 0 2px var(--brass),var(--shadow)}
.hand .card.playable:hover{transform:translateY(-4px)}
.hand .card.selected{box-shadow:0 0 0 3px #fff,var(--shadow);transform:translateY(-4px)}
.hand .card{transition:transform .1s ease}
.endturn-wrap{display:flex;justify-content:flex-end;padding:.2rem .3rem}

/* ---------- banner (AI-turn narration) ---------- */
.banner{
  position:fixed;left:50%;top:4.2rem;transform:translateX(-50%);
  background:var(--paper);color:var(--ink);font-weight:600;
  padding:.5rem 1.1rem;border-radius:999px;box-shadow:var(--shadow);
  z-index:50;max-width:92vw;text-align:center;
}
.banner.hidden{display:none}

/* ---------- overlay ---------- */
.overlay{
  position:fixed;inset:0;background:rgba(12,18,24,.78);
  display:flex;align-items:center;justify-content:center;z-index:100;padding:1rem;
}
.overlay.hidden{display:none}
.dialog{
  background:var(--paper);color:var(--ink);border-radius:var(--radius);
  padding:1.4rem;max-width:420px;width:100%;box-shadow:var(--shadow);
}
.dialog h3{margin:0 0 .5rem;font-size:1.3rem}
.dialog p{margin:.3rem 0 1rem;color:#4A4437}
.dialog .btn-row{justify-content:flex-end}
.dialog .btn.quiet{color:var(--ink);border-color:#9A8F79}
.dialog select{
  font-family:inherit;font-size:1rem;padding:.45rem;border-radius:var(--radius);
  border:1px solid #9A8F79;background:#fff;color:var(--ink);width:100%;margin-bottom:1rem;
}
.result-title{font-size:1.7rem;font-weight:700;margin:0 0 .4rem}

/* ---------- login ---------- */
.login-wrap{display:flex;justify-content:center;padding:3rem 0}
.login-wrap .dialog{max-width:360px}
.fld{display:block;font-weight:500;color:#4A4437;font-size:.92rem;margin-bottom:.7rem}
.fld input{
  display:block;width:100%;margin-top:.25rem;
  font-family:inherit;font-size:1rem;padding:.5rem .6rem;
  border:1px solid #9A8F79;border-radius:var(--radius);background:#fff;color:var(--ink);
}
.login-note{color:#7A5A2E;font-weight:500}
.btn-small{padding:.25rem .7rem;font-size:.85rem}
.tb-user{margin-right:.4rem}
.tb-ctx{margin-right:.8rem;color:var(--chalk-dim)}

/* ---------- toast ---------- */
.toast-error{
  position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);
  background:#5A2A1E;color:#F3D9D0;padding:.55rem 1rem;border-radius:var(--radius);
  z-index:120;box-shadow:var(--shadow);max-width:92vw;
}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .builder{grid-template-columns:1fr}
  .deck-rail{position:static;order:-1}
  .rail-list{max-height:30vh}
  .unit{width:88px}
  .unit .ctext{display:none}
  .hand .card{flex-basis:120px}
  .side-panel{gap:.6rem;font-size:.95rem}
}