/* ==========================================================================
   PICK SCREENS · CHOOSE YOUR FIGHTER and SQUAD BATTLE (owner, 2026-10-05)
   One look for both screens: comic paper, an ink header and footer, the same
   side cards and the same fighter tiles, every fighter on paper tinted with
   their main clothes colour. SQUAD BATTLE keeps its own parts (team slots,
   canonical trio, team bond line) inside the same frame. Loaded last, so it
   wins over the older dark (v2.css) and comic (comic-online.css) skins.
   ========================================================================== */

/* ---------- the screen ---------- */
body .screen.pick:is(#scr-select,#scr-squad){
  background:radial-gradient(rgba(20,18,15,.10) 1.1px,transparent 1.3px) 0 0/8px 8px,
    linear-gradient(180deg,#f7efd8,#e9ddbe);
  color:#14120f;border:0;box-shadow:none}
body .screen.pick:is(#scr-select,#scr-squad)::before,
body .screen.pick:is(#scr-select,#scr-squad)::after{display:none}

/* ---------- header ---------- */
body .screen.pick:is(#scr-select,#scr-squad) > .bar{position:relative;flex-shrink:0;background:#14120f;border-bottom:0;
  box-shadow:0 4px 0 rgba(20,18,15,.22);color:#f7efd8}
body .screen.pick:is(#scr-select,#scr-squad) > .bar h2{font-family:'Comic Sans MS','Comic Neue','Chalkboard SE',cursive;
  font-weight:900;font-size:22px;letter-spacing:.22em;color:#f7efd8;text-shadow:none}
body .screen.pick:is(#scr-select,#scr-squad) > .bar .back{background:#f7efd8;color:#14120f;border:2px solid #f7efd8;
  border-radius:2px;box-shadow:none;opacity:1;font-weight:900}
body .screen.pick:is(#scr-select,#scr-squad) > .bar .back:hover{background:#efc86d;border-color:#efc86d}
body .screen.pick:is(#scr-select,#scr-squad) > .bar .mode-tag{background:#f7efd8;color:#14120f;border:2px solid #f7efd8;
  border-radius:2px;box-shadow:none;font-weight:900}

/* ---------- body: two side cards around the fighter grid ---------- */
body .screen.pick:is(#scr-select,#scr-squad) .select-body{background:transparent;
  grid-template-columns:clamp(240px,19vw,400px) minmax(0,1fr) clamp(240px,19vw,400px);
  gap:18px;padding:18px 20px 12px}

/* ---------- side cards (the fighter card and the team boards) ---------- */
body .screen.pick:is(#scr-select,#scr-squad) .fighter-card{
  background:radial-gradient(rgba(20,18,15,.12) 1.1px,transparent 1.3px) 0 0/6px 6px,
    linear-gradient(180deg,#fdf6e3,#efe1bf);
  border:3px solid #14120f;border-radius:2px;box-shadow:6px 6px 0 rgba(20,18,15,.3);
  color:#14120f;padding:14px}

/* the versus card: portrait, name, stats, role and specials */
body .screen.pick#scr-select .fighter-card .portrait{background:#fdf6e3;border:3px solid #14120f;border-radius:0;
  box-shadow:3px 3px 0 rgba(20,18,15,.25);margin:0 0 10px}
body .screen.pick#scr-select .fighter-card .portrait:hover{box-shadow:3px 3px 0 rgba(20,18,15,.25)}
body .screen.pick#scr-select .sname{color:#14120f;white-space:normal}
body .screen.pick#scr-select .sname b{font-family:'Comic Sans MS','Comic Neue','Chalkboard SE',cursive;font-weight:900;
  font-size:clamp(22px,1.5vw,32px);line-height:1.05;color:#14120f;text-shadow:none}
body .screen.pick#scr-select .sname i{display:inline-block;align-self:flex-start;margin-top:5px;padding:2px 9px;font-size:11px;
  font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:#f7efd8!important;background:#14120f}
body .screen.pick#scr-select .bars{margin-top:10px}
body .screen.pick#scr-select .statrow{color:#3a3226;margin:5px 0}
body .screen.pick#scr-select .statrow span{width:64px;font-size:10px;font-weight:900;letter-spacing:.16em}
body .screen.pick#scr-select .statbar{height:9px;background:#fdf6e3;border:2px solid #14120f;border-radius:0}
body .screen.pick#scr-select .statbar i{background:linear-gradient(180deg,#efc86d,#d99a38);border-radius:0}
body .screen.pick#scr-select #card-p2 .statbar i{background:linear-gradient(180deg,#e0634f,#b8322a)}
body .screen.pick#scr-select .balchip{color:#14120f;margin-top:10px}
body .screen.pick#scr-select .balchip .role{color:#f7efd8;background:#c8402f;border:2px solid #14120f;border-radius:0;
  padding:3px 9px;font-size:10px;box-shadow:2px 2px 0 rgba(20,18,15,.3)}
body .screen.pick#scr-select .balchip .ttl{color:#3a3226;font-weight:900}
body .screen.pick#scr-select .sp-head{font-family:'Comic Sans MS','Comic Neue','Chalkboard SE',cursive;font-weight:900;
  font-size:14px;letter-spacing:.24em;color:#14120f;border-bottom:3px double #14120f;margin:12px 0 6px;padding-bottom:3px}
body .screen.pick#scr-select .sp-row{color:#14120f;font-size:13px;line-height:2}
body .screen.pick#scr-select .sp-in{color:#3a3226}
body .screen.pick#scr-select .sp-in kbd{color:#f7efd8;background:#14120f;border:2px solid #14120f;border-radius:2px;box-shadow:1px 1px 0 rgba(20,18,15,.35)}
body .screen.pick#scr-select .sp-nm{color:#14120f;font-weight:900;font-family:'Comic Sans MS','Comic Neue','Chalkboard SE',cursive}

/* the squad boards: a team title, three slots, the canonical trio button */
body .screen.pick#scr-squad .fighter-card.sq-board{gap:12px}
body .screen.pick#scr-squad .sq-board-title{display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  font-family:'Comic Sans MS','Comic Neue','Chalkboard SE',cursive;font-size:18px;font-weight:900;letter-spacing:.16em;
  color:#14120f;padding:0 0 8px;border-bottom:3px double #14120f;white-space:nowrap}
body .screen.pick#scr-squad .sq-board-title::after{font-size:10px;letter-spacing:.16em;color:rgba(20,18,15,.6)}
body .screen.pick#scr-squad .sq-board.sel{box-shadow:0 0 0 4px #c8402f,6px 6px 0 rgba(20,18,15,.3)}
body .screen.pick#scr-squad .sq-slots{gap:10px}
body .screen.pick#scr-squad .sq-slot{min-height:clamp(64px,8vh,96px);gap:12px;padding:8px 10px;flex-wrap:wrap;align-content:center}
body .screen.pick#scr-squad .sq-slot canvas{width:clamp(64px,5.2vw,96px);height:auto;aspect-ratio:4/3;border:2px solid #14120f;border-radius:0;background:#fdf6e3}
body .screen.pick#scr-squad .sq-slot.empty{flex-direction:column;align-items:flex-start;justify-content:center;gap:4px}
body .screen.pick#scr-squad .sq-slot.empty em{font-weight:900;font-size:13px;letter-spacing:.12em;color:#14120f}
body .screen.pick#scr-squad .sq-slot .sq-owner{font-size:10px;font-weight:800}
body .screen.pick#scr-squad .sq-slot .sq-names b{font-size:clamp(14px,1vw,18px)}
body .screen.pick#scr-squad .sq-canon{margin-top:auto}
body .screen.pick#scr-squad .sq-syn{width:auto;margin:0 20px 10px;padding:8px 14px}

/* ---------- the fighter grid ---------- */
body .screen.pick:is(#scr-select,#scr-squad) :is(#style-grid,#sq-grid){
  grid-template-columns:repeat(auto-fill,minmax(clamp(150px,9.6vw,220px),1fr));
  grid-auto-rows:max-content;align-content:start;gap:14px;
  overflow-y:auto;overflow-x:hidden;padding:4px 10px 14px 4px;min-height:0}
body .screen.pick:is(#scr-select,#scr-squad) :is(#style-grid,#sq-grid) .tile.char{
  position:relative;display:flex;flex-direction:column;aspect-ratio:auto;height:auto;min-height:0;padding:0;gap:0;
  background:#fdf6e3;border:3px solid #14120f;border-radius:2px;box-shadow:4px 4px 0 rgba(20,18,15,.3);
  overflow:hidden;transform:none;transition:transform .12s ease,box-shadow .12s ease}
body .screen.pick:is(#scr-select,#scr-squad) :is(#style-grid,#sq-grid) .tile.char canvas.face{
  position:static;inset:auto;flex:0 0 auto;display:block;width:100%;height:auto;aspect-ratio:4/3;min-height:0;
  border:0;border-bottom:3px solid #14120f;border-radius:0;transform:none}
body .screen.pick:is(#scr-select,#scr-squad) :is(#style-grid,#sq-grid) .tile.char .cn{
  width:100%;padding:6px 8px 2px;font-family:'Comic Sans MS','Comic Neue','Chalkboard SE',cursive;
  font-size:clamp(13px,.9vw,17px);font-weight:900;letter-spacing:.03em;line-height:1.2;text-align:left;
  color:#14120f;background:transparent;border-top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body .screen.pick:is(#scr-select,#scr-squad) :is(#style-grid,#sq-grid) .tile.char .cs{
  width:100%;margin-top:auto;padding:3px 8px 5px;font-size:10px;font-weight:900;letter-spacing:.14em;text-align:left;
  text-transform:uppercase;background:#14120f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body .screen.pick:is(#scr-select,#scr-squad) :is(#style-grid,#sq-grid) .tile.char:hover{
  transform:translate(-2px,-3px);box-shadow:7px 7px 0 rgba(20,18,15,.34);border-color:#14120f}
/* the pick cursors: player 1 gold, player 2 red, the pad cursor red */
body .screen.pick:is(#scr-select,#scr-squad) :is(#style-grid,#sq-grid) .tile.char.h1{
  box-shadow:0 0 0 4px #e8b04b,6px 6px 0 rgba(20,18,15,.34);background:#fdf6e3}
body .screen.pick:is(#scr-select,#scr-squad) :is(#style-grid,#sq-grid) .tile.char.h2{
  box-shadow:0 0 0 4px #c8402f,6px 6px 0 rgba(20,18,15,.34);background:#fdf6e3}
body .screen.pick:is(#scr-select,#scr-squad) :is(#style-grid,#sq-grid) .tile.char.h1.h2{
  box-shadow:0 0 0 4px #e8b04b,0 0 0 8px #c8402f,6px 6px 0 rgba(20,18,15,.34)}
body .screen.pick:is(#scr-select,#scr-squad) :is(#style-grid,#sq-grid) .tile.char:is(.cur,:focus-visible){
  outline:none;box-shadow:0 0 0 4px #c8402f,6px 6px 0 rgba(20,18,15,.34)}
body .screen.pick:is(#scr-select,#scr-squad) :is(#style-grid,#sq-grid) .tile.char .lock{
  top:6px;padding:1px 6px;font-size:11px;font-weight:900;letter-spacing:.12em;text-shadow:none;border-radius:0}
body .screen.pick:is(#scr-select,#scr-squad) :is(#style-grid,#sq-grid) .tile.char .lock:empty{display:none}
body .screen.pick:is(#scr-select,#scr-squad) :is(#style-grid,#sq-grid) .tile.char .lock.l1{left:6px;color:#14120f;background:#e8b04b;border:2px solid #14120f}
body .screen.pick:is(#scr-select,#scr-squad) :is(#style-grid,#sq-grid) .tile.char .lock.l2{right:6px;color:#f7efd8;background:#c8402f;border:2px solid #14120f}
body .screen.pick:is(#scr-select,#scr-squad) :is(#style-grid,#sq-grid) .tile.char.locked{filter:grayscale(.9);opacity:.75}
body .screen.pick:is(#scr-select,#scr-squad) :is(#style-grid,#sq-grid) .tile.char .sp-lock{
  position:absolute;left:6px;right:6px;top:6px;padding:3px 6px;font-size:9px;font-weight:900;letter-spacing:.1em;
  color:#f7efd8;background:#14120f;text-align:center}
body .screen.pick:is(#scr-select,#scr-squad) :is(#style-grid,#sq-grid) .tile.char.rnd{border-style:dashed;background:#fdf6e3}
body .screen.pick:is(#scr-select,#scr-squad) :is(#style-grid,#sq-grid) .tile.char.rnd .rnd-q{display:none}
body .screen.pick:is(#scr-select,#scr-squad) :is(#style-grid,#sq-grid) .tile.char.rnd .cs{color:#f7efd8}
body .screen.pick:is(#scr-select,#scr-squad) :is(#style-grid,#sq-grid) .tile.char.rec{box-shadow:0 0 0 4px #3fb08a,4px 4px 0 rgba(20,18,15,.3)}

/* ---------- footer ---------- */
body .screen.pick:is(#scr-select,#scr-squad) .selfoot{background:#14120f;border-top:0;box-shadow:0 -4px 0 rgba(20,18,15,.22);
  color:#f7efd8}
body .screen.pick:is(#scr-select,#scr-squad) .selfoot :is(.hint,#sq-hint){color:rgba(247,239,216,.8)}
body .screen.pick:is(#scr-select,#scr-squad) .selfoot .hint b{color:#efc86d}
body .screen.pick:is(#scr-select,#scr-squad) .selfoot .mbtn{font-family:'Comic Sans MS','Comic Neue','Chalkboard SE',cursive;
  font-weight:900;letter-spacing:.14em;color:#14120f;background:#f7efd8;border:2px solid #f7efd8;border-radius:2px;
  box-shadow:none;text-shadow:none}
body .screen.pick:is(#scr-select,#scr-squad) .selfoot .mbtn b{color:#14120f}
body .screen.pick:is(#scr-select,#scr-squad) .selfoot .mbtn:hover:not(:disabled){background:#efc86d;border-color:#efc86d}
body .screen.pick:is(#scr-select,#scr-squad) .selfoot :is(#btn-fight,#sq-fight){background:linear-gradient(180deg,#efc86d,#d99a38);
  border-color:#efc86d;color:#14120f}
body .screen.pick:is(#scr-select,#scr-squad) .selfoot :is(#btn-fight,#sq-fight):disabled{background:#3a3226;border-color:#3a3226;color:rgba(247,239,216,.45)}