/* EVE: The Second Genesis — digital board. Dark sci-fi theme. */
:root{
  /* EVE "Photon" retune: warm charcoal glass, not navy. The neutral ramp is
     biased warm (R >= B) so it reads clean against the Capsuleer Gold accent —
     a cool/blue-biased grey looks tinted next to warm gold. --cyan is kept as
     the accent token name but now holds the gold. */
  --bg:#0a0908; --bg2:#100e0c; --panel:#161310; --panel2:#1d1915;
  --line:#2a2620; --line2:#3d372e;
  --gold:#c9a24a; --amarr:#c9a24a; --caldari:#8aa0b8; --gallente:#4f9d69; --minmatar:#b0563a;
  --cyan:#e0a94a; --text:#e2ddd2; --dim:#938a7b; --danger:#c0433a; --shield:#2f6fd0; --attack:#c0433a;
  --ok:#3d8f5b; --warn:#d8a13a;
  /* faint warm top-edge highlight — the Photon glass cue */
  --edge:rgba(224,169,74,.14);
  /* card sizing (user-adjustable via the Cards: S/M/L/XL toggle) */
  --card-w:84px; --card-h:118px;
  /* deck builder / store thumbnails (bigger + independent of the in-game card toggle) */
  --mtw:132px; --mth:185px;
}
:root[data-cards="s"]{--card-w:62px; --card-h:87px}
:root[data-cards="m"]{--card-w:84px; --card-h:118px}
:root[data-cards="l"]{--card-w:120px; --card-h:168px}
:root[data-cards="xl"]{--card-w:156px; --card-h:218px}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);
  font-family:"Segoe UI",system-ui,sans-serif;font-size:14px;overflow:hidden}
/* The top bar spans the FULL width; the sidebar starts below it. It used to sit only in the
   left column ("top side"), so the dark sidebar ran floor-to-ceiling immediately beside the
   bar — reading as a black vertical stripe crowding the right-hand nav buttons, worst on
   narrow-desktop widths (a landscape phone or small tablet at 821-1100px, where the bar gets
   just 640px). A full-width app bar also gives the nav room instead of squeezing it. */
#app{display:grid;grid-template-columns:minmax(0,1fr) 320px;grid-template-rows:44px 1fr auto;
  grid-template-areas:"top top" "table side" "hand side";height:100vh}

#topbar{grid-area:top;display:flex;align-items:center;gap:16px;padding:0 16px;min-width:0;
  background:linear-gradient(90deg,#100e0b,#13110d);border-bottom:1px solid var(--line2)}
.brand{font-weight:700;letter-spacing:2px;color:#fff}
.brand span{color:var(--gold);font-weight:400;letter-spacing:1px}
#phase-indicator{margin-left:auto;color:var(--cyan);font-variant:small-caps;letter-spacing:1px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.online-stat{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--dim);cursor:pointer;user-select:none;
  padding:5px 10px;border:1px solid var(--line2);border-radius:14px;background:var(--panel2);white-space:nowrap;transition:border-color .12s}
.online-stat:hover{border-color:var(--cyan)}
.online-stat .dot{width:7px;height:7px;border-radius:50%;background:var(--gallente);animation:onlinePulse 2s infinite}
#online-n{color:var(--text);font-weight:700}
.online-games{color:var(--cyan);font-weight:600}
/* Center of Operations status HUD, docked in the top bar */
.coo-hud{display:flex;align-items:center;gap:12px;font-size:12px;min-width:0}
.hud-stat{white-space:nowrap;color:var(--ink);letter-spacing:.3px}
.hud-plex{color:var(--gold);font-weight:700}
.hud-char{color:var(--cyan);max-width:150px;overflow:hidden;text-overflow:ellipsis}
.hud-click{cursor:pointer;transition:color .12s}
.hud-click:hover{color:#fff}
.hud-login{background:var(--panel2);color:var(--cyan);border:1px solid var(--line2);border-radius:6px;
  padding:4px 10px;font-size:12px;cursor:pointer;white-space:nowrap;transition:border-color .12s,color .12s}
.hud-login:hover{border-color:var(--cyan);color:#fff}
/* top-bar navigation: clickable brand + New Game / Cards dropdown buttons & menus */
.brand-click{cursor:pointer;transition:filter .12s}
.brand-click:hover{filter:brightness(1.3)}
.nav-btn{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.nav-btn .nb-caret{color:var(--dim);font-size:11px}
.top-menu{position:fixed;z-index:70;min-width:210px;background:var(--panel);border:1px solid var(--cyan);
  border-radius:10px;padding:6px;box-shadow:0 16px 46px #000d;display:flex;flex-direction:column;gap:2px}
.tm-item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:transparent;border:none;
  color:var(--text);border-radius:7px;padding:9px 10px;cursor:pointer;font-size:14px}
.tm-item:hover{background:var(--panel2)}
.tm-ico{width:18px;flex:0 0 auto;text-align:center}
.tm-lab{display:flex;flex-direction:column;line-height:1.25}
.tm-sub{color:var(--dim);font-size:11px}
.tm-sep{height:1px;background:var(--line2);margin:4px 8px}
/* PvP panel: online players to challenge */
.pvp-list{display:flex;flex-direction:column;gap:6px;margin:12px 0;max-height:52vh;overflow:auto}
.pvp-row{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--panel2);border:1px solid var(--line2);border-radius:8px}
.pvp-row .op-name{flex:1;color:var(--cyan);font-weight:600}
.pvp-row .op-sub{color:var(--dim);font-size:12px}
.pvp-row .op-chal{background:var(--cyan);color:#02121a;border:none;border-radius:6px;padding:6px 13px;font-weight:700;cursor:pointer}
.pvp-row .op-chal:hover{filter:brightness(1.1)}
@keyframes onlinePulse{0%{box-shadow:0 0 0 0 rgba(79,157,105,.5)}70%{box-shadow:0 0 0 6px rgba(79,157,105,0)}100%{box-shadow:0 0 0 0 rgba(79,157,105,0)}}

/* online member roster popover */
.online-panel{position:fixed;z-index:130;min-width:190px;max-width:280px;max-height:60vh;overflow:auto;
  background:var(--panel);border:1px solid var(--line2);border-radius:9px;box-shadow:0 12px 36px rgba(0,0,0,.55);padding:8px}
.op-head{font-size:12px;font-weight:700;color:var(--cyan);letter-spacing:.3px;padding:2px 6px 8px;border-bottom:1px solid var(--line2);margin-bottom:6px}
.op-list{display:flex;flex-direction:column;gap:1px}
.op-row{display:flex;align-items:center;gap:7px;padding:5px 6px;border-radius:5px;font-size:13px;color:var(--text)}
.op-row .op-dot{width:6px;height:6px;border-radius:50%;background:var(--gallente);flex:0 0 auto}
.op-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-you{color:var(--cyan);font-size:11px}
.op-guest{color:var(--dim)} .op-guest .op-sub{font-size:11px;opacity:.8}
.op-row .op-sub{font-size:11px;color:var(--dim)}
.op-empty{color:var(--dim);font-size:13px;padding:6px}
.op-chal{margin-left:auto;font-size:11px;font-weight:700;color:#fff;background:linear-gradient(180deg,#1a5c86,#0e3f5f);
  border:1px solid var(--cyan);border-radius:5px;padding:2px 7px;cursor:pointer;white-space:nowrap;flex:0 0 auto}
.op-chal:hover{background:linear-gradient(180deg,#2472a6,#124e73)}

/* ---- PvP challenge overlays ---- */
.pvp-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
  background:rgba(4,8,14,.72);backdrop-filter:blur(3px);padding:20px}
.pvp-card{background:var(--panel);border:1px solid var(--cyan);border-radius:12px;box-shadow:0 18px 60px rgba(0,0,0,.6);
  padding:20px 22px;max-width:380px;text-align:center;animation:pvpPop .18s ease}
.pvp-card h3{margin:0 0 8px;color:var(--cyan);font-size:18px}
.pvp-card p{color:var(--text);font-size:14px;margin:0 0 14px}
@keyframes pvpPop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}
.pvp-spin{font-size:26px;color:var(--cyan);margin:6px 0 14px;animation:pvpBlink 1s steps(2) infinite}
@keyframes pvpBlink{50%{opacity:.25}}
.pvp-setup{max-width:600px}
.pvp-status{display:flex;gap:16px;justify-content:center;margin:14px 0 10px;font-size:13px;color:var(--dim)}
.pvp-status .ok{color:var(--gallente);font-weight:700}
/* PvP per-turn countdown pill (top-center) */
.pvp-timer{position:fixed;top:38px;left:50%;transform:translateX(-50%);z-index:75;font-weight:800;font-size:15px;
  padding:4px 14px;border-radius:14px;background:#161309e6;border:1px solid var(--line2);color:#f0e3c6;
  letter-spacing:.5px;box-shadow:0 4px 16px rgba(0,0,0,.4);pointer-events:none}
.pvp-timer.mine{border-color:var(--gold);color:#f0d79a}
.pvp-timer.low{border-color:var(--danger);color:#f6b0a6;animation:timerPulse .8s ease-in-out infinite}
@keyframes timerPulse{50%{background:#3a1616e6}}

/* dismiss the setup/menu overlay to view the board + top bar behind it */
.overlay-close{position:absolute;top:14px;right:16px;z-index:5;cursor:pointer;
  background:var(--panel2);color:var(--dim);border:1px solid var(--line2);border-radius:6px;
  padding:7px 12px;font-size:13px;transition:border-color .12s,color .12s}
.overlay-close:hover{border-color:var(--cyan);color:#fff}
@media (max-width:820px), (pointer:coarse){ .overlay-close{top:8px;right:8px;padding:5px 9px;font-size:12px} }
.topbtns button,#sidebar button{background:var(--panel2);color:var(--text);border:1px solid var(--line2);
  padding:6px 12px;border-radius:4px;cursor:pointer;font-size:13px}
.topbtns button:hover,#sidebar button:hover{border-color:var(--cyan);color:#fff}

#table{grid-area:table;display:flex;flex-direction:column;gap:6px;padding:8px 10px;overflow:auto;min-height:0}
.player-area{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:8px 10px;flex:0 0 auto;
  box-shadow:inset 0 1px 0 var(--edge)}
.player-area.opp{border-color:#3a2230}
.player-area.me{border-color:#2f2a22}
.pa-head{display:flex;align-items:center;gap:14px;margin-bottom:6px;font-size:13px}
.pa-name{font-weight:700;letter-spacing:.5px}
.stat{display:inline-flex;align-items:center;gap:4px;background:var(--bg2);border:1px solid var(--line);
  padding:2px 8px;border-radius:12px;font-variant-numeric:tabular-nums}
.stat b{color:#fff}
.wallet b{color:var(--gold)}
.pa-rows{display:flex;gap:18px;flex-wrap:wrap}
.zone{min-width:calc(var(--card-w) + 12px)}
.zone-label{font-size:10px;letter-spacing:1px;color:var(--dim);text-transform:uppercase;margin-bottom:3px}
.row-cards{display:flex;gap:5px;flex-wrap:wrap;min-height:calc(var(--card-h) + 4px)}

#board{background:linear-gradient(180deg,#0a0908,#0d0c0a);border:1px solid var(--line);
  border-radius:6px;padding:6px 10px;flex:1 1 auto;display:flex;flex-direction:column;min-height:150px;
  position:relative;overflow:hidden;box-shadow:inset 0 1px 0 var(--edge)}
/* board content rides above the rotating backdrop */
#board > .board-label,#board > #outer-regions{position:relative;z-index:2}
.board-label{font-size:10px;letter-spacing:2px;color:var(--dim);margin-bottom:4px;
  text-shadow:0 1px 3px #000a}
#outer-regions{display:flex;gap:10px;flex-wrap:wrap;flex:1;align-content:flex-start}

/* ---- rotating official-EVE backdrop (see js/gallery.js) ------------------ */
#board-gallery{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;border-radius:6px}
#board-gallery .bg-slide{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transform:scale(1.06);transition:opacity 2.2s ease-in-out;will-change:opacity,transform;
  /* warm grade so blue-toned art doesn't tint the playmat cold */
  filter:saturate(.52) sepia(.16) brightness(.92)}
#board-gallery .bg-slide.show{opacity:1}
#board-gallery .bg-slide.kb{animation:boardKenBurns 16s ease-out forwards}
#board-gallery .bg-slide.kb-alt{animation:boardKenBurnsAlt 16s ease-out forwards}
/* scrim keeps the art subtle so region cards + text stay legible */
#board-gallery .bg-scrim{position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(16,12,8,.74),rgba(11,9,6,.85)),
    radial-gradient(ellipse at 50% 35%,rgba(224,169,74,.06),rgba(6,5,4,.82));
  box-shadow:inset 0 0 90px 20px rgba(6,5,4,.85)}
@keyframes boardKenBurns{
  from{transform:scale(1.05) translate(0,0)}
  to{transform:scale(1.16) translate(-1.5%,-1.2%)}}
@keyframes boardKenBurnsAlt{
  from{transform:scale(1.16) translate(1.5%,1%)}
  to{transform:scale(1.05) translate(0,0)}}
@media (prefers-reduced-motion:reduce){
  #board-gallery .bg-slide,#setup-gallery .bg-slide{transition:opacity .8s ease-in-out;transform:none}
  #board-gallery .bg-slide.kb,#board-gallery .bg-slide.kb-alt,
  #setup-gallery .bg-slide.kb,#setup-gallery .bg-slide.kb-alt{animation:none}}
#outer-regions .hint{margin:auto;color:var(--dim);font-style:italic;opacity:.7}
.region{background:var(--panel);border:1px solid var(--line2);border-radius:6px;padding:6px;min-width:150px;
  box-shadow:inset 0 1px 0 var(--edge)}
.region.mine{border-color:var(--gallente)}
.region.enemy{border-color:var(--minmatar)}
.region.neutral{border-color:var(--line2)}
.drop-hot{outline:2px dashed var(--cyan);outline-offset:2px;background:#1e1809}
.zone[data-rid]{border-radius:6px;transition:background .1s}
/* legal drop targets highlighted while dragging a card */
.drop-legal{outline:2px solid var(--ok);outline-offset:2px;border-radius:6px;
  box-shadow:0 0 8px -1px var(--ok);animation:legalPulse 1.1s ease-in-out infinite}
@keyframes legalPulse{0%,100%{box-shadow:0 0 5px -2px var(--ok)}50%{box-shadow:0 0 15px 0 var(--ok)}}
.drop-hint{color:var(--dim);font-size:11px;font-style:italic;align-self:center;padding:0 6px;pointer-events:none;min-height:var(--card-h)}
.region-head{display:flex;align-items:center;gap:6px;font-size:12px;margin-bottom:4px}
.region-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.region-ctrl{font-size:10px;color:var(--dim)}
.region-warpblock{font-size:10px;color:#f0a54a;background:rgba(200,110,40,.12);border:1px solid rgba(200,110,40,.4);
  border-radius:4px;padding:2px 5px;margin:3px 0;line-height:1.3}
.region-zoom{flex:0 0 auto;background:var(--panel2);border:1px solid var(--line2);border-radius:5px;
  color:var(--cyan);cursor:pointer;font-size:12px;line-height:1;padding:3px 6px}
.region-zoom:hover{border-color:var(--cyan)}
@media (max-width:820px), (pointer:coarse){ .region-zoom{padding:6px 9px;font-size:14px} }   /* bigger touch target */
/* outer region: enemy ships (top) → region card + locations (middle) → your ships (bottom) */
.region-enemy,.region-mine{display:flex;gap:4px;flex-wrap:wrap;align-items:center;border-radius:4px;
  padding:3px 4px;min-height:26px;position:relative}
.region-enemy{background:rgba(176,86,58,.12);border:1px solid rgba(176,86,58,.28)}
.region-mine{background:rgba(79,157,105,.12);border:1px solid rgba(79,157,105,.28)}
.region-side-lbl{font-size:8px;letter-spacing:1px;text-transform:uppercase;color:var(--dim);
  flex:0 0 auto;opacity:.7;margin-right:2px}
.region-core{display:flex;gap:6px;align-items:flex-start;flex-wrap:wrap;margin:4px 0}
.region-card{flex:0 0 auto;box-shadow:0 0 0 1px var(--line2)}
.region-locs{display:flex;gap:4px;flex-wrap:wrap;align-items:flex-start}

/* ---- offset stacking: overlap ships/locations to shrink horizontal scope ----
   Outer-region ships (top/bottom rows) and locations always overlap into a peek
   strip; hovering raises a card clear of the pile so it reads/clicks in full.
   (No gap when overlapping — the negative margin supplies the offset.) */
.region-enemy,.region-mine,.region-locs{flex-wrap:nowrap;gap:0}
.region-enemy > .card + .card,.region-mine > .card + .card{margin-left:calc(var(--card-w) * -0.60)}
.region-locs > .card + .card{margin-left:calc(var(--card-w) * -0.44)}   /* .small (.72×) cards */
.region-enemy > .card:hover,.region-mine > .card:hover,.region-locs > .card:hover{
  z-index:15;transform:translateY(-3px);box-shadow:0 6px 16px -4px #000c}

/* Player hand: offset stacking is opt-in via the Stack toggle (Off / Price / Stats).
   Off leaves the existing flat layout untouched. */
:root[data-hand-stack="price"] #hand > .card + .card,
:root[data-hand-stack="stats"] #hand > .card + .card{margin-left:calc(var(--card-w) * 1.3 * -0.46)}  /* .big cards */
:root[data-hand-stack="price"] #hand > .card:hover,
:root[data-hand-stack="stats"] #hand > .card:hover{z-index:15;transform:translateY(-6px);
  box-shadow:0 10px 22px -6px #000d}

/* corner badge so a stacked hand card is identifiable from its peek strip */
.stack-info{position:absolute;top:2px;left:2px;z-index:4;display:flex;align-items:center;
  pointer-events:none;background:#000b;border:1px solid var(--line2);border-radius:4px;
  padding:1px 4px;font-size:11px;font-weight:800;line-height:1.3;font-variant-numeric:tabular-nums}
.stack-info .si-isk{color:var(--gold)}
.stack-info .si-a{color:#f0a072}                                   /* attack — warm */
.stack-info .si-s{color:var(--shield)}                             /* shield — EVE blue */
.stack-info .si-a + .si-s::before{content:"/";color:var(--dim);margin:0 1px;font-weight:600}

/* hand-stack toggle button, docked in the hand tray */
#btn-handstack{flex:0 0 auto;background:var(--panel2);color:var(--text);border:1px solid var(--line2);
  border-radius:5px;padding:8px 12px;cursor:pointer;font-size:12px;font-weight:600;white-space:nowrap;
  transition:border-color .12s,color .12s}
#btn-handstack:hover{border-color:var(--cyan);color:#fff}

/* bucket separator between starbase / locations / ships groups in a card row */
.row-sep{flex:0 0 auto;align-self:stretch;display:flex;align-items:center;margin:0 3px;
  border-left:1px dashed var(--line2)}
/* attackers divider in a home row + fresh-deploy pop-in (FLIP partner) */
.row-sep.atk span{color:var(--attack)}
.card-arrive{animation:cardArrive .4s cubic-bezier(.2,.8,.25,1)}
@keyframes cardArrive{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.06);opacity:1}100%{transform:scale(1)}}
.row-sep span{writing-mode:vertical-rl;transform:rotate(180deg);font-size:8px;letter-spacing:1px;
  text-transform:uppercase;color:var(--dim);padding:2px 1px;opacity:.7}

/* read-only hand shown while it's the opponent's turn */
.hand-wait{width:100%;color:var(--dim);font-style:italic;margin-bottom:4px}
.card.inactive{filter:brightness(.72) saturate(.85);cursor:zoom-in}

/* freshly drawn cards slide/scale in and glow until you next act, so they read as
   separate from the hand you already had (transition effect for the draw step) */
@keyframes cardDrawIn{0%{transform:translateY(22px) scale(.8);opacity:0}
  60%{opacity:1}100%{transform:none;opacity:1}}
.card.drawn{animation:cardDrawIn .5s cubic-bezier(.2,.85,.3,1.15) both;
  box-shadow:0 0 0 2px var(--cyan),0 0 16px -1px var(--cyan);z-index:3}
.card.drawn::before{content:"✦ new";position:absolute;top:0;left:0;right:0;z-index:4;
  font-size:9px;font-weight:700;letter-spacing:.5px;text-align:center;color:#04121a;
  background:var(--cyan);padding:1px 0;pointer-events:none}
@media (prefers-reduced-motion:reduce){ .card.drawn{animation-duration:.01s} }

/* command popup anchored below the clicked ship (falls back to a modal off-screen) */
.cmd-popup{position:fixed;z-index:60;background:var(--panel);border:1px solid var(--line2);
  border-radius:7px;box-shadow:0 12px 32px rgba(0,0,0,.6);padding:6px;min-width:170px;max-width:260px;
  max-height:70vh;overflow-y:auto}
.cmd-pop-title{font-size:11px;color:var(--cyan);letter-spacing:.4px;text-transform:uppercase;
  padding:2px 4px 6px;border-bottom:1px solid var(--line2);margin-bottom:5px;position:sticky;top:0;background:var(--panel)}
.cmd-pop-btn{display:block;width:100%;text-align:left;background:var(--panel2);color:var(--text);
  border:1px solid var(--line2);border-radius:4px;padding:8px 10px;margin:3px 0;cursor:pointer;
  font-size:12px;transition:border-color .1s,background .1s}
.cmd-pop-btn:hover:not(:disabled){border-color:var(--cyan);background:#1f1a0c}
.cmd-pop-btn:disabled{opacity:.5;cursor:default;font-style:italic}

/* cards */
.card{position:relative;width:var(--card-w);height:var(--card-h);border-radius:5px;overflow:hidden;
  border:1px solid var(--line2);background-color:#14110c;background-size:cover;background-position:center;background-repeat:no-repeat;
  cursor:pointer;flex:0 0 auto;touch-action:manipulation;transition:outline-color .1s,filter .12s,box-shadow .12s,transform .1s}
button,.opt,.menu-card,.mthumb{touch-action:manipulation}
.card img{width:100%;height:100%;object-fit:cover;display:block}
.card.big{width:calc(var(--card-w)*1.3);height:calc(var(--card-h)*1.3)}
.card.small{width:calc(var(--card-w)*.72);height:calc(var(--card-h)*.72)}
/* landscape orientation for region + starbase art (wider than tall) */
.card.landscape{width:var(--card-h);height:var(--card-w)}
.card.sel{outline:2px solid var(--cyan);outline-offset:1px}
.card.playable{border-color:var(--ok)}
/* Outer-region cards shown in the mobile hand strip (tap to play): tag + cost overlay */
.card.region-hand.rh-ok{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan)}
.card.region-hand.rh-no{filter:grayscale(.55) brightness(.66)}
.card.region-hand .rh-tag{position:absolute;top:0;left:0;right:0;background:#161309d9;color:var(--cyan);
  font-size:8px;font-weight:800;letter-spacing:1.5px;text-align:center;padding:2px 0;pointer-events:none}
.card.region-hand .rh-cost{position:absolute;bottom:2px;right:2px;background:#000a;color:#ffd54a;
  font-size:10px;font-weight:800;padding:1px 5px;border-radius:3px;pointer-events:none}
.card.attacking{outline:2px solid var(--attack)}
.card.docked{filter:brightness(.6) grayscale(.3)}
.card.has-ability{box-shadow:0 0 0 2px var(--gold,#e8b84b),0 0 8px -1px var(--gold,#e8b84b)}
.card.has-ability::after{content:"\26A1";position:absolute;top:1px;left:2px;font-size:13px;text-shadow:0 0 3px #000;pointer-events:none}
/* the enemy's copy of a SHARED structure (SCC Global Market) — distinct teal glow + 🌐, you may use it */
.card.shared-struct{cursor:pointer;box-shadow:0 0 0 2px #3fb6d8,0 0 9px -1px #3fb6d8}
.card.shared-struct::after{content:"\1F310";left:auto;right:2px;color:#bfe6ff}
/* Attack / shield live in the bottom-right corner as a compact chip, in front of
   anything else on the card (notably a pilot's banner) so the numbers always read. */
.card .badge{position:absolute;bottom:0;right:0;z-index:5;display:flex;gap:5px;align-items:center;
  font-size:13px;font-weight:700;padding:1px 5px 1px 8px;border-top-left-radius:6px;
  background:linear-gradient(100deg,transparent,#000b 24%,#000e);pointer-events:none}
.card .cmd{position:absolute;top:0;left:0;background:var(--gold);color:#000;font-size:11px;padding:0 3px;font-weight:700}
.card .asm{position:absolute;top:0;right:0;background:#000c;color:var(--cyan);font-size:11px;padding:0 3px;font-weight:700}
/* WARD — prevented damage sitting on a ship (Mercenary Base and friends). Bottom-LEFT so it
   never collides with the assembly counter (top-right), the command tag (top-left) or the
   attack/shield badge (bottom-right). The ring echoes the shield colour: it is durability. */
.card .ward{position:absolute;bottom:0;left:0;z-index:5;background:#0b1a24e6;color:var(--shield,#7fc8e8);
  font-size:11px;font-weight:700;padding:0 4px;border-top-right-radius:6px;
  border-top:1px solid #7fc8e855;border-right:1px solid #7fc8e855;pointer-events:none}
.card.warded{box-shadow:inset 0 0 0 1px #7fc8e866, 0 0 10px #7fc8e822}
.card-back{background:repeating-linear-gradient(45deg,#0c1424,#0c1424 4px,#101a30 4px,#101a30 8px);
  display:flex;align-items:center;justify-content:center;color:#33507a;font-size:9px}
.atk{color:var(--attack);font-weight:700}
.shd{color:#5b9be6;font-weight:700}
/* active stat modifier: a buffed/debuffed stat glows + shows a ±delta superscript */
.badge .buff{color:#5fe08a;text-shadow:0 0 5px #2ecc7188}
.badge .debuff{color:#ff8a7a;text-shadow:0 0 5px #e74c3c88}
.badge .delta{font-size:8px;font-weight:800;vertical-align:super;margin-left:1px}
/* hand-card cost modifier badge (top-left corner) */
.card .cost-mod{position:absolute;top:0;left:0;font-size:12px;font-weight:800;padding:1px 5px 1px 3px;
  border-bottom-right-radius:5px;line-height:1.2;pointer-events:none;box-shadow:0 1px 4px #000a}
.card .cost-mod .ci{font-size:8px;font-weight:700;opacity:.85;margin:0 1px}
.card .cost-mod sup{font-size:8px;vertical-align:super;margin-left:1px}
.card .cost-mod.cheaper{background:#123d24;color:#7bf0a6;border:1px solid #2ecc71}
.card .cost-mod.pricier{background:#3d1616;color:#ffb3a6;border:1px solid var(--danger)}

/* sidebar */
@media(min-width:821px) and (max-width:1100px) and (pointer:fine){ #app{grid-template-columns:minmax(0,1fr) 260px} }
#sidebar{grid-area:side;background:var(--bg2);border-left:1px solid var(--line2);min-width:0;
  display:flex;flex-direction:column;padding:10px;gap:8px;overflow:hidden}
#turn-banner{font-weight:700;letter-spacing:.5px;padding:6px 8px;border-radius:4px;text-align:center;
  background:var(--panel2);border:1px solid var(--line2)}
#action-bar{display:flex;flex-direction:column;gap:5px;min-height:30px}
#action-bar button{text-align:left}
#sidebar .primary{background:#123a2a;border-color:var(--ok);color:#cfeeda;font-weight:700}
#sidebar .primary:disabled{opacity:.4;cursor:default}
#log{flex:1;overflow:auto;font-size:12px;line-height:1.5;background:#0b0a08;border:1px solid var(--line);
  border-radius:4px;padding:6px;color:#b3aa98}
#log .l{padding:1px 0;border-bottom:1px solid #1a1610}
#log .turn{color:var(--gold);font-weight:700;margin-top:4px;display:flex;align-items:center;gap:6px}
/* Flag a turn as buggy. Faint until the row is hovered so it never competes with the log. */
#log .log-bug{margin-left:auto;background:none;border:0;padding:0 2px;cursor:pointer;
  font-size:12px;line-height:1;opacity:.25;transition:opacity .12s,transform .12s}
#log .turn:hover .log-bug{opacity:.85}
#log .log-bug:hover{opacity:1;transform:scale(1.2)}
#log .win{color:var(--cyan);font-weight:700}
#log .note{color:#c99}

/* hand */
#hand-tray{grid-area:hand;background:linear-gradient(0deg,#100e0b,#0a0908);border-top:1px solid var(--line2);
  padding:6px 10px}
#hand{display:flex;gap:5px;justify-content:center;flex-wrap:wrap;min-height:calc(var(--card-h) + 8px)}
/* hand cards use .big (scales with the S/M/L card-size variable) */
/* End Phase keeps its green "primary" look wherever it's docked (sidebar removed it) */
#btn-end{background:#123a2a;border:1px solid var(--ok);color:#cfeeda;font-weight:700;border-radius:5px;
  cursor:pointer;padding:8px 14px}
#btn-end:hover:not(:disabled){border-color:#3fd08a;color:#eafff2}
#btn-end:disabled{opacity:.4;cursor:default}
/* desktop: a compact single-row hand (scrolls horizontally) with End Phase at its
   right, so the hand never wraps into several rows and eats the board above it */
@media (min-width:821px) and (pointer:fine){
  #hand-tray{display:flex;align-items:center;gap:14px}
  #hand-tray #hand{flex:1;min-width:0;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    justify-content:flex-start;scrollbar-width:thin}
  #hand-tray #hand > .card{flex:0 0 auto}
  #hand-tray #btn-end{flex:0 0 auto;padding:13px 26px;font-size:15px;white-space:nowrap;letter-spacing:.3px}
}

/* preview */
#card-preview{position:fixed;pointer-events:none;z-index:50;box-shadow:0 8px 30px #000d}
#card-preview img{width:300px;border-radius:8px;display:block;border:1px solid var(--line2)}
#card-preview #preview-hr{width:300px;box-sizing:border-box;margin-top:6px;font-size:12px;line-height:1.4;
  color:#f0d79a;background:rgba(20,16,10,.96);border:1px solid var(--gold);border-radius:8px;padding:7px 10px}
#card-preview #preview-hr b{color:var(--gold)}

/* modal + setup */
#modal,#setup-screen{position:fixed;inset:0;background:#050403aa;backdrop-filter:blur(3px);
  align-items:center;justify-content:center;z-index:60}
#setup-screen{overflow:auto;padding:16px}
/* Landing/menu overlay backdrop: a full-bleed rotating gallery so the setup
   screen never sits on black — on mobile #board (and its backdrop) is hidden. */
#setup-gallery{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
#setup-gallery .bg-slide{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transform:scale(1.06);transition:opacity 2.2s ease-in-out;will-change:opacity,transform;
  filter:saturate(.52) sepia(.16) brightness(.92)}
#setup-gallery .bg-slide.show{opacity:1}
#setup-gallery .bg-slide.kb{animation:boardKenBurns 16s ease-out forwards}
#setup-gallery .bg-slide.kb-alt{animation:boardKenBurnsAlt 16s ease-out forwards}
#setup-gallery .bg-scrim{position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(14,11,7,.78),rgba(9,7,5,.88)),
    radial-gradient(ellipse at 50% 30%,rgba(224,169,74,.05),rgba(5,4,3,.87));
  box-shadow:inset 0 0 130px 34px rgba(5,4,3,.9)}
/* keep menu / landing / dismiss content above the backdrop */
#setup-screen > :not(#setup-gallery){position:relative;z-index:1}

/* ===== meta screens (menu / store / deck builder / game over) ===== */
.menu-box,.store-box,.builder-box{background:var(--panel);border:1px solid var(--line2);border-radius:10px;
  padding:22px;box-shadow:0 12px 48px #000;max-height:94vh;overflow:auto;width:100%}
.menu-box{max-width:640px} .store-box{max-width:860px}
/* deck builder: full-height flex column with larger, easier-to-read cards */
.builder-box{max-width:1360px;height:94vh;overflow:hidden;display:flex;flex-direction:column;--mtw:170px;--mth:238px}
.builder-box h2,.builder-box .b-top{flex:0 0 auto}
.menu-box h2,.store-box h2,.builder-box h2{margin:0 0 12px}
.menu-stats{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;margin-bottom:14px;align-items:center}
.menu-stats .plex{color:var(--gold);font-weight:700} .menu-stats .rec{color:var(--dim)}
.menu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.menu-grid .menu-card:last-child{grid-column:1/-1}
.menu-card{background:var(--panel2);border:1px solid var(--line2);border-radius:8px;padding:16px;cursor:pointer;transition:border-color .1s}
.menu-card:hover{border-color:var(--cyan)}
.mc-title{font-size:16px;font-weight:700;color:var(--cyan);margin-bottom:6px}
.mc-blurb{font-size:12px;color:var(--dim);line-height:1.4}

/* in-game changelog / "What's New" panel */
.changelog-box{max-width:680px}
.cl-intro{margin-bottom:14px}
.changelog{display:flex;flex-direction:column;gap:18px}
.cl-entry{border-left:2px solid var(--line2);padding-left:14px}
.cl-entry:first-child{border-left-color:var(--gold)}
.cl-head{display:flex;align-items:baseline;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.cl-date{font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--dim);
  border:1px solid var(--line2);border-radius:10px;padding:2px 9px}
.cl-entry:first-child .cl-date{color:#f0d79a;border-color:var(--gold)}
.cl-title{font-size:15px;font-weight:700;color:var(--cyan)}
.cl-list{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.cl-list li{font-size:13px;line-height:1.5;color:var(--text)}
.cl-list li::marker{color:var(--gold)}

/* Menu header: title left, optional sign-in / character top-right */
.menu-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.menu-head h2{margin:0}
.menu-auth{display:inline-flex;align-items:center;gap:10px}
.eve-login{cursor:pointer;background:linear-gradient(180deg,#1b1d20,#0b0c0e);color:#f4c14e;
  border:1px solid #c9962f;border-radius:6px;padding:7px 13px;font-size:13px;font-weight:700;
  letter-spacing:.2px;white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.05);transition:filter .12s,border-color .12s}
.eve-login:hover{filter:brightness(1.15);border-color:#f4c14e}
.me-char{color:var(--gold);font-weight:700;font-size:14px}
.auth-hint{color:var(--dim);font-size:12px}

/* landing "center of operations" */
.landing{max-width:720px}
.landing-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.lh-title h2{margin:0}
.lh-sub{color:var(--cyan);font-size:11px;letter-spacing:3px;text-transform:uppercase;margin-top:2px;opacity:.85}
.landing-showcase{display:flex;justify-content:center;align-items:flex-end;
  height:calc(var(--card-h)*.9 + 18px);margin:4px 0 16px;overflow:hidden}
.ls-fan{display:flex;align-items:flex-end;padding-top:16px}
.ls-card{width:calc(var(--card-w)*.9);height:calc(var(--card-h)*.9);border-radius:6px;border:1px solid var(--line2);
  background-size:cover;background-position:center;background-color:#14110c;box-shadow:0 6px 18px rgba(0,0,0,.5);cursor:zoom-in;
  transform:rotate(var(--rot)) translateY(var(--dy));transform-origin:bottom center;
  margin:0 calc(var(--card-w)*-.34);transition:transform .16s,box-shadow .16s}
.ls-card:hover{transform:translateY(-12px) rotate(0deg) scale(1.06);box-shadow:0 14px 32px rgba(0,0,0,.7);z-index:5}
.landing-stats{justify-content:center;gap:18px;font-size:13px;margin-bottom:14px}
@media (max-width:820px), (pointer:coarse){
  .landing-showcase{height:126px} .ls-card{width:76px;height:106px;margin:0 -26px}
}

/* My Collection browser */
.collection-box{max-width:960px}
.coll-toggle{display:flex;gap:8px;margin:6px 0 10px}
.mini.sel{border-color:var(--cyan);color:#fff;background:#2a2213}
.coll-grid{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;align-content:flex-start;
  max-height:62vh;overflow-y:auto;padding:4px 2px}
.coll-cat{flex:0 0 100%;margin:8px 0 0;color:var(--cyan);font-size:12px;letter-spacing:1px;text-transform:uppercase}
.mthumb.unowned .card{filter:grayscale(1) brightness(.42)}
.mthumb.unowned .mt-sub{opacity:.6}
.b-note{font-size:11px;color:var(--dim);margin:-2px 0 8px}

/* Booster / collection card zoom (with gallery scrolling) */
.sr-cards .mthumb{cursor:zoom-in}
.meta-zoom{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;background:rgba(2,5,10,.86);backdrop-filter:blur(3px);cursor:zoom-out;padding:20px}
.mz-stage{display:flex;align-items:center;justify-content:center;gap:14px;max-width:100%}
.meta-zoom img{max-width:min(90vw,500px);max-height:84vh;border-radius:12px;border:1px solid var(--line2);
  box-shadow:0 24px 70px rgba(0,0,0,.7);animation:zoomPop .16s ease-out;cursor:pointer}
.meta-zoom.solo img{cursor:zoom-out}
@keyframes zoomPop{from{transform:scale(.92);opacity:.4}to{transform:scale(1);opacity:1}}
.mz-nav{flex:0 0 auto;width:48px;height:48px;border-radius:50%;border:1px solid var(--line2);
  background:#161309cc;color:#fff;font-size:26px;line-height:1;cursor:pointer;transition:background .12s,transform .12s}
.mz-nav:hover{background:var(--cyan);color:#02121a;transform:scale(1.08)}
.mz-cap{color:var(--text);font-size:14px;font-weight:600;letter-spacing:.3px;text-shadow:0 1px 4px #000}
.mz-houserule{max-width:min(460px,92vw);text-align:center;font-size:13px;line-height:1.45;margin-top:2px;
  color:#f0d79a;background:rgba(224,169,74,.12);border:1px solid var(--gold);border-radius:8px;padding:8px 14px}
.mz-houserule b{color:var(--gold)}
.mz-x{position:fixed;top:16px;right:18px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);
  background:#161309cc;color:#fff;font-size:18px;cursor:pointer}
.mz-x:hover{background:var(--danger);color:#fff}
@media (max-width:820px), (pointer:coarse){ .mz-nav{width:40px;height:40px;font-size:22px} .meta-zoom img{max-width:82vw} }

/* larger, more legible collection thumbnails */
.collection-box{--mtw:164px;--mth:230px}
@media (max-width:820px), (pointer:coarse){ .collection-box{--mtw:120px;--mth:168px} }

/* transient toast (login result, etc.) */
.eve-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:9999;
  background:var(--panel);border:1px solid var(--line2);border-left:3px solid var(--cyan);
  color:var(--text);padding:11px 16px;border-radius:7px;font-size:13px;max-width:80vw;
  box-shadow:0 8px 30px rgba(0,0,0,.5);opacity:0;transition:opacity .35s,transform .35s;pointer-events:none}
.eve-toast.show{opacity:1;transform:translate(-50%,0)}
.eve-toast.ok{border-left-color:var(--gallente)}
.eve-toast.err{border-left-color:var(--danger)}

/* thumbnails used across store + builder */
.mthumb{display:flex;flex-direction:column;align-items:center;gap:2px;width:var(--mtw)}
.mthumb .card{width:var(--mtw);height:var(--mth);position:relative}
.mthumb.chosen .card{outline:2px solid var(--cyan);outline-offset:1px}
.mt-count{position:absolute;bottom:0;right:0;background:#000c;color:#fff;font-size:12px;padding:0 5px;font-weight:700}
.mt-badge{position:absolute;top:0;left:0;background:var(--cyan);color:#02121a;font-size:11px;padding:0 4px;font-weight:700}
.mt-zoom{position:absolute;top:0;right:0;background:#000b;color:#f0e3c6;border:none;font-size:12px;line-height:1;padding:3px 5px;cursor:pointer;border-bottom-left-radius:5px;z-index:3}
.mt-zoom:hover{background:#332815;color:#fff}
/* landscape thumbnails for outer-region / starbase cards (art isn't cut off) */
.mthumb.landscape .card{height:calc(var(--mtw) * .70)}
.mt-sub{font-size:11px;color:var(--dim);text-align:center;line-height:1.15;max-width:100%;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;width:var(--mtw)}

/* ---- card rarity: ring on the thumbnail + a corner gem ---- */
:root{--r-common:#8291a6;--r-uncommon:#43a6e6;--r-rare:#e9b23c;--r-ultra:#a97bf0}
.mthumb.r-common .card{box-shadow:0 0 0 2px var(--r-common) inset}
.mthumb.r-uncommon .card{box-shadow:0 0 0 2px var(--r-uncommon) inset}
.mthumb.r-rare .card{box-shadow:0 0 0 2px var(--r-rare) inset, 0 0 10px -1px #e9b23c99}
/* ultra rare: characters only — violet, matching the character ring, and a stronger halo */
.mthumb.r-ultra .card{box-shadow:0 0 0 2px var(--r-ultra) inset, 0 0 14px -1px #a97bf0bb}
.mt-gem{position:absolute;top:3px;right:3px;width:9px;height:9px;border-radius:2px;transform:rotate(45deg);
  border:1px solid #0007;box-shadow:0 0 3px #0008}
.r-common .mt-gem{background:var(--r-common)}
.r-uncommon .mt-gem{background:var(--r-uncommon)}
.r-ultra .mt-gem{background:var(--r-ultra)}
.r-rare .mt-gem{background:var(--r-rare)}
.mthumb.unowned .mt-gem{opacity:.5}
.sr-cards .mthumb.r-rare .card{animation:rareGlow 1.6s ease-in-out infinite}
@keyframes rareGlow{0%,100%{box-shadow:0 0 0 2px var(--r-rare) inset,0 0 8px -1px #e9b23c88}50%{box-shadow:0 0 0 2px var(--r-rare) inset,0 0 16px 1px #e9b23cdd}}

/* rarity summary rows (collection progress + store odds) */
.coll-rarity,.store-odds{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:2px 0 10px;font-size:12.5px;color:var(--text)}
.coll-rarity .rr,.store-odds .rr{display:inline-flex;align-items:center;gap:5px}
.rr .rgem{width:9px;height:9px;border-radius:2px;transform:rotate(45deg);display:inline-block;border:1px solid #0006}
.rr.r-common .rgem{background:var(--r-common)} .rr.r-uncommon .rgem{background:var(--r-uncommon)} .rr.r-rare .rgem{background:var(--r-rare)}
.rr.r-common{color:var(--r-common)} .rr.r-uncommon{color:var(--r-uncommon)} .rr.r-rare{color:var(--r-rare)}
.rr b{color:var(--text)}
.odds-note{color:var(--dim);font-size:11px}

/* store */
.store-reveal{min-height:60px;margin:12px 0}
.sr-label{font-size:12px;color:var(--dim);margin-bottom:8px}
.sr-cards{display:flex;gap:10px;flex-wrap:wrap}
.sr-pop{opacity:0;animation:pop .35s ease-out forwards}
@keyframes pop{0%{opacity:0;transform:translateY(8px) scale(.9)}100%{opacity:1;transform:none}}

/* deck list */
.deck-list{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.deck-row{display:flex;align-items:center;gap:12px;background:var(--panel2);border:1px solid var(--line);
  border-radius:6px;padding:8px 12px;flex-wrap:wrap}
.dr-name{flex:1;min-width:160px} .dr-meta{color:var(--dim);font-size:12px}
.dr-status{font-size:12px} .dr-status.ok{color:var(--ok)} .dr-status.bad{color:var(--warn)}
.dr-acts{display:flex;gap:6px}
.mini{background:var(--panel2);border:1px solid var(--line2);color:var(--text);padding:5px 12px;border-radius:5px;cursor:pointer;font-size:13px}
.mini:hover{border-color:var(--cyan)} .mini:disabled{opacity:.4;cursor:not-allowed}
.mini.danger{border-color:var(--danger);color:#e6a19a}

/* deck builder */
.b-top{display:flex;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.b-name{flex:1;min-width:160px;background:var(--bg2);border:1px solid var(--line2);color:var(--text);
  border-radius:5px;padding:8px 10px;font-size:14px}
.b-race{background:var(--bg2);border:1px solid var(--line2);color:var(--text);border-radius:5px;padding:8px 10px}
.b-body{display:flex;gap:18px;align-items:stretch;flex:1 1 auto;min-height:0}
.b-col{flex:0 0 auto} .b-col.grow{flex:1;min-width:280px}
.b-regions{overflow-y:auto;max-height:100%;padding-right:8px}
.b-market{display:flex;flex-direction:column;min-height:0;min-width:0}
.b-h{font-size:11px;letter-spacing:1px;color:var(--dim);text-transform:uppercase;margin:10px 0 5px}
.b-market-h{margin-top:0}
.b-thumbs{display:flex;gap:8px;flex-wrap:wrap;max-width:calc(var(--mtw)*2 + 20px)}
.b-cat{width:100%;font-size:12px;color:var(--cyan);text-transform:uppercase;letter-spacing:1px;margin:10px 0 3px;font-weight:700}
.b-subcat{width:100%;font-size:11px;color:var(--dim);letter-spacing:.5px;margin:5px 0 2px;padding-left:7px;border-left:2px solid var(--line2)}
.b-pool{display:flex;gap:8px;flex-wrap:wrap;align-content:flex-start;max-height:48vh;overflow:auto;padding:6px;
  background:var(--bg2);border:1px solid var(--line);border-radius:6px}
.b-market .b-pool{flex:1 1 auto;max-height:none;min-height:0}
/* deck-builder filter bar */
.b-filters{flex:0 0 auto;display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.b-frow{display:flex;gap:8px;align-items:center}
.b-search{flex:1;background:var(--bg2);border:1px solid var(--line2);color:var(--text);border-radius:5px;padding:7px 10px;font-size:13px}
.b-clear{background:var(--panel2);border:1px solid var(--line2);color:var(--dim);border-radius:5px;padding:6px 12px;cursor:pointer;font-size:12px}
.b-clear:hover{border-color:var(--cyan);color:var(--text)}
.b-chips{display:flex;flex-wrap:wrap;gap:5px 12px;align-items:center;max-height:32vh;overflow-y:auto;padding:6px;background:var(--bg2);border:1px solid var(--line);border-radius:6px}
.b-chips.collapsed{display:none}
.b-ftoggle.open{border-color:var(--cyan);color:var(--text)}
.b-ftoggle.active{border-color:var(--cyan);color:#f0e3c6;background:#2a2213}
.b-fgroup{display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.b-flabel{font-size:9.5px;letter-spacing:.5px;color:var(--dim);text-transform:uppercase;margin-right:1px}
.b-chip{background:var(--panel2);border:1px solid var(--line2);color:var(--dim);border-radius:11px;padding:2px 9px;cursor:pointer;font-size:11.5px;line-height:1.55}
.b-chip:hover{border-color:var(--cyan);color:var(--text)}
.b-chip.on{background:#2a2213;border-color:var(--cyan);color:#f0e3c6;font-weight:600}
/* deck-builder: prominent primary filters (faction emblems + category icons) */
.b-primary{flex:0 0 auto;display:flex;flex-direction:column;gap:7px;margin-bottom:7px}
.b-facfilter{display:flex;gap:8px;flex-wrap:wrap}
.b-emblem-btn{width:42px;height:42px;padding:3px;border-radius:8px;border:1px solid var(--line2);background:var(--panel2);
  cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .1s,background .1s}
.b-emblem-btn img{width:100%;height:100%;object-fit:contain;filter:grayscale(.75) opacity(.65);transition:filter .1s}
.b-emblem-btn:hover{border-color:var(--cyan)}
.b-emblem-btn:hover img{filter:grayscale(.3) opacity(.9)}
.b-emblem-btn.on{border-color:var(--gold,#e0a94a);background:#2a2213;box-shadow:0 0 8px -2px var(--gold,#e0a94a)}
.b-emblem-btn.on img{filter:none}
.b-catfilter{display:flex;gap:6px;flex-wrap:wrap}
.b-cat-btn{background:var(--panel2);border:1px solid var(--line2);color:var(--dim);border-radius:16px;
  padding:6px 13px;cursor:pointer;font-size:12.5px;font-weight:600;white-space:nowrap}
.b-cat-btn:hover{border-color:var(--cyan);color:var(--text)}
.b-cat-btn.on{background:#2a2213;border-color:var(--gold,#e0a94a);color:#f0e3c6}
/* deck-builder: hover-preview column (desktop only) — image + readable stats/text */
.b-preview{flex:0 0 300px;align-self:stretch;display:flex;flex-direction:column;align-items:center;
  gap:10px;background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:14px;overflow-y:auto;overflow-x:hidden}
.b-preview-img{width:100%;max-width:272px;max-height:46vh;object-fit:contain;border-radius:10px;border:1px solid var(--line2);
  box-shadow:0 10px 34px #000b;display:none;flex:0 0 auto}
.b-preview-img.show{display:block}
.b-preview-hint{color:var(--dim);font-size:13px;text-align:center;line-height:1.4;margin:auto 0}
.b-preview-info{width:100%;display:flex;flex-direction:column;gap:5px}
.b-preview-info:empty{display:none}
.pi-name{font-size:15px;font-weight:700;color:var(--text);line-height:1.2}
.pi-sub{font-size:11px;letter-spacing:.5px;color:var(--cyan);text-transform:uppercase}
.pi-chips{display:flex;flex-wrap:wrap;gap:4px;margin:2px 0}
.pi-chips span{font-size:11.5px;font-weight:600;color:#f0e3c6;background:var(--panel2);border:1px solid var(--line2);
  border-radius:10px;padding:2px 8px;white-space:nowrap}
.pi-text{font-size:12.5px;line-height:1.5;color:var(--text);background:var(--panel);border:1px solid var(--line2);
  border-radius:6px;padding:8px 10px}
.pi-fac{font-size:11px;color:var(--dim);letter-spacing:.5px}
.b-clickadd .card{cursor:pointer}
@media (max-width:1100px), (pointer:coarse){ .b-preview{display:none} }   /* no hover preview on touch */
/* deck-builder: tap-to-preview overlay (compact/touch) — image + stats/text + add/remove */
.b-mpreview{position:fixed;inset:0;z-index:80;background:#03060cf2;backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:16px}
.b-mpreview-inner{position:relative;width:100%;max-width:420px;max-height:92vh;overflow-y:auto;display:flex;flex-direction:column;
  align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:16px}
.b-mpreview-img{width:100%;max-width:320px;border-radius:10px;border:1px solid var(--line2);box-shadow:0 10px 34px #000b}
.b-mpi{width:100%}
.b-mpreview-acts{display:flex;gap:10px;width:100%;justify-content:center;flex-wrap:wrap;margin-top:2px}
.b-mpreview-btn{flex:1 1 auto;min-width:130px;max-width:210px;padding:13px 16px;border-radius:8px;border:1px solid var(--line2);
  background:var(--panel2);color:var(--text);font-size:15px;font-weight:700;cursor:pointer}
.b-mpreview-btn.primary{background:#123a2a;border-color:var(--ok);color:#cfeeda}
.b-mpreview-btn:disabled{opacity:.45;cursor:not-allowed}
.b-mpreview-x{position:absolute;top:8px;right:10px;background:var(--panel2);border:1px solid var(--line2);color:var(--text);
  border-radius:6px;width:34px;height:34px;font-size:16px;cursor:pointer;z-index:1}
.b-qty{display:flex;align-items:center;gap:4px;margin-top:2px}
.qbtn{width:22px;height:22px;border-radius:4px;border:1px solid var(--line2);background:var(--panel2);
  color:var(--text);cursor:pointer;font-weight:700;line-height:1}
.qbtn:hover{border-color:var(--cyan)} .qbtn:disabled{opacity:.35;cursor:not-allowed}
.qn{font-size:12px;min-width:12px;text-align:center;font-variant-numeric:tabular-nums}
.b-footer{flex:0 0 auto;margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.b-status{font-size:13px;margin-bottom:10px} .b-status.ok{color:var(--ok)} .b-status.bad{color:var(--warn)}
/* deck builder on phones: stack the columns and let the box scroll (no fixed full-height) */
@media (max-width:820px), (pointer:coarse){
  .builder-box{height:auto;max-height:94vh;overflow:auto;--mtw:140px;--mth:196px}
  .b-body{flex-direction:column;min-height:0}
  .b-regions{max-height:none;overflow:visible}
  .b-market .b-pool{max-height:56vh}
  .b-chips{max-height:none}
}
.b-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.b-actions .start-btn{margin-top:0}

/* game over */
.over-box{max-width:420px;text-align:center}
.over-win{color:var(--cyan)} .over-lose{color:var(--danger)}
.over-plex{font-size:18px;color:var(--gold);font-weight:700;margin-bottom:12px}
.over-box .menu-stats{justify-content:center}
.over-box .b-actions,.menu-box .b-actions{justify-content:center}
.over-battle{font-size:13px;color:var(--dim);margin:-4px 0 10px}
/* ===== campaign ===== */
.campaign-box{max-width:920px}
.camp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:12px;margin:8px 0}
/* Empires / Pirate Factions dividers in the campaign picker. */
.camp-section-label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  font-weight:700;margin:16px 0 2px;padding-bottom:5px;border-bottom:1px solid var(--line)}
.camp-section-label:first-of-type{margin-top:4px}
/* Pirate campaigns lean on their own accent for the crest, with no empire emblem behind it. */
.camp-card.camp-pirate .camp-crest{background:color-mix(in srgb,var(--acc,#b0563a) 14%,transparent);
  border-radius:8px;box-shadow:0 0 0 1px color-mix(in srgb,var(--acc,#b0563a) 40%,transparent) inset}
.camp-card{display:flex;gap:14px;background:var(--panel2);border:1px solid var(--line2);border-left:4px solid var(--acc,var(--cyan));
  border-radius:8px;padding:14px;cursor:pointer;transition:border-color .12s,background .12s}
.camp-card:hover{background:#2a2213;border-color:var(--acc,var(--cyan))}
.camp-crest{flex:0 0 auto;width:60px;height:60px;display:flex;align-items:center;justify-content:center;
  font-size:34px;line-height:1;color:var(--acc,var(--cyan));filter:drop-shadow(0 0 8px color-mix(in srgb,var(--acc,#3aa0d8) 55%,transparent))}
.camp-emblem{width:100%;height:100%;object-fit:cover;border-radius:8px;display:block;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--acc,#3aa0d8) 45%,transparent) inset}
.camp-info{min-width:0}
.camp-race{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--acc,var(--cyan));font-weight:700}
.camp-title{font-size:17px;font-weight:700;color:var(--text);margin:1px 0 4px}
.camp-blurb{font-size:12px;color:var(--dim);line-height:1.4}
.camp-prog{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--dim);margin-top:8px}
.camp-bar{flex:0 0 120px;height:6px;border-radius:3px;background:var(--line2);overflow:hidden}
.camp-bar span{display:block;height:100%;background:var(--acc,var(--cyan))}
.battle-list{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.battle-row{display:flex;gap:12px;align-items:stretch;background:var(--panel2);border:1px solid var(--line);
  border-left:3px solid var(--acc,var(--cyan));border-radius:8px;padding:10px}
.battle-row.won{border-color:#2ecc71}
.battle-art{flex:0 0 64px;width:64px;min-height:64px;border-radius:5px;background:#14110c center/cover;
  display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--acc,var(--cyan));border:1px solid var(--line2)}
.battle-art.has-img{color:transparent}
.battle-art.has-emblem{background-size:78%;background-repeat:no-repeat;background-position:center;color:transparent}
.battle-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.battle-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.battle-head b{font-size:15px;color:var(--text)}
.battle-num{font-size:11px;font-weight:800;background:var(--acc,var(--cyan));color:#02121a;border-radius:9px;padding:1px 8px}
.battle-era{font-size:11px;color:var(--acc,var(--cyan));font-style:italic}
.battle-wontag{font-size:11px;color:#5fe08a;font-weight:700}
.battle-lore{font-size:12.5px;color:var(--ink);line-height:1.45}
.battle-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:11px;margin-top:2px}
.battle-foe{color:var(--dim);font-weight:600}
.battle-src{color:var(--cyan);text-decoration:none;font-weight:700}
.battle-src:hover{text-decoration:underline}
.battle-srcnote{color:var(--dim);opacity:.8}
.battle-fight{flex:0 0 auto;align-self:center;background:var(--acc,var(--cyan));color:#02121a;border:none;
  border-radius:6px;padding:8px 16px;font-weight:800;cursor:pointer}
.battle-fight:hover{filter:brightness(1.12)}
.battle-fight.again{background:var(--panel);color:var(--text);border:1px solid var(--line2)}
.battle-row.locked{border-left-color:var(--line2);opacity:.72}
.battle-row.locked .battle-art{border-style:dashed}
.battle-art.locked-art{position:relative}
.battle-art.locked-art::after{content:"";position:absolute;inset:0;border-radius:inherit;background:rgba(6,10,18,.4)}
.battle-art .lock-badge{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;
  font-size:20px;color:#fff;filter:drop-shadow(0 1px 3px #000) drop-shadow(0 0 2px #000)}
.battle-row.locked .battle-head b{color:var(--dim);letter-spacing:2px}
.battle-lore.locked-note{color:var(--dim);font-style:italic}
.battle-fight.locked{background:var(--panel);color:var(--dim);border:1px solid var(--line2);cursor:not-allowed;filter:none}
@media (max-width:820px), (pointer:coarse){
  .camp-grid{grid-template-columns:1fr}
  .battle-row{flex-wrap:wrap}
  .battle-fight{width:100%;margin-top:6px}
}
/* pre-battle briefing */
.battle-intro{max-width:560px;border-top:3px solid var(--acc,var(--cyan))}
.bi-era{font-size:12px;color:var(--acc,var(--cyan));font-style:italic;margin:-6px 0 10px}
.bi-art{height:130px;border-radius:8px;background:#14110c center/cover;border:1px solid var(--line2);margin-bottom:12px}
.bi-lore{font-size:14px;line-height:1.55;color:var(--ink);margin-bottom:12px}
.bi-orders{font-size:13px;color:var(--dim);line-height:1.5;margin-bottom:8px}
.bi-orders b{color:var(--text)}
.bi-orders b.bi-off{color:#e79a8f}   /* offensive → attack red */
.bi-orders b.bi-def{color:#7fd0e6}   /* defensive → shield cyan */
.bi-theatre{font-size:12px;color:var(--dim);margin-bottom:12px;letter-spacing:.2px}
.bi-reward{font-size:13px;color:var(--gold);background:#1c1608;border:1px solid #7a5c12;border-radius:6px;padding:8px 12px;margin-bottom:10px}
.bi-reward b{color:#ffdf7e}
.bi-claimed{color:var(--dim);font-weight:400;font-style:italic}
.bi-src{display:inline-block;margin-bottom:14px;font-size:11.5px}
/* campaign reward on the victory screen */
.over-complete{font-size:15px;font-weight:800;color:var(--gold);margin:2px 0 8px;text-shadow:0 0 10px #e9b23c66}
.over-reward{background:#2a2213;border:1px solid var(--line2);border-radius:8px;padding:10px;margin-bottom:12px}
.or-head{font-size:13px;color:var(--gold);font-weight:700;margin-bottom:8px}
.or-cards{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.over-reward .mthumb{--mtw:64px;--mth:90px}
#modal{display:none}                 /* hidden by default — the [hidden] attr alone was overridden */
#modal:not([hidden]){display:flex}   /* only show when JS clears [hidden] */
#setup-screen{display:none;flex-direction:column;gap:16px}
#modal-box,.setup-box{background:var(--panel);border:1px solid var(--line2);border-radius:8px;padding:20px;
  max-width:560px;box-shadow:0 10px 40px #000}
#modal-box h3,.setup-box h2{margin:0 0 12px}
.opt-row{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.opt{background:var(--panel2);border:1px solid var(--line2);border-radius:4px;padding:8px 12px;cursor:pointer}
.opt:hover{border-color:var(--cyan)}
.opt-disabled{opacity:.5;cursor:not-allowed;color:var(--dim)}
.opt-disabled:hover{border-color:var(--line2)}
.opt.sel{border-color:var(--cyan);box-shadow:0 0 0 1px var(--cyan) inset;background:#1f1a0c}
/* A custom deck fixes its own race and ignores the archetype, so those rows read as
   inactive while one is selected (they still work if you switch back to Curated). */
.opt.dim{opacity:.42}
.opt.dim.sel{box-shadow:none;border-color:var(--line2);background:var(--panel2)}
.race-Amarr{color:var(--amarr)} .race-Caldari{color:var(--caldari)}
.race-Gallente{color:var(--gallente)} .race-Minmatar{color:var(--minmatar)}
.hint{color:var(--dim);font-size:12px}
.setup-label{font-size:12px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em;margin-top:6px}
.arch-row .arch-opt{display:flex;flex-direction:column;gap:3px;max-width:170px;min-width:150px}
.arch-opt b{color:var(--cyan)} .arch-blurb{font-size:11px;color:var(--dim);line-height:1.3}
/* AI difficulty: same card shape as the archetype options, but the heading colour climbs
   the ladder so the four rungs read as an ordered scale rather than four flavours. */
.diff-row .diff-opt{display:flex;flex-direction:column;gap:3px;max-width:170px;min-width:150px}
.diff-opt b{color:var(--cyan)}
.diff-rookie b{color:#7fb27f}
.diff-capsuleer b{color:var(--cyan)}
.diff-veteran b{color:var(--gold)}
.diff-admiral b{color:#d9705a}
.diff-opt.sel{border-color:currentColor}
.diff-admiral.sel{box-shadow:0 0 0 1px #d9705a55, 0 0 14px #d9705a22}
/* Handicaps: multi-select, so they read as toggles rather than a one-of-N row. */
.hcap-row .hcap-opt{display:flex;flex-direction:column;gap:3px;max-width:170px;min-width:150px}
.hcap-opt b{color:#d9705a;display:flex;justify-content:space-between;gap:6px;align-items:baseline}
.hcap-bonus{color:var(--gold);font-size:11px;font-weight:700}
.hcap-opt.sel{border-color:#d9705a;background:#2a17138c}
.payout-line{margin:10px 0 2px;font-size:13px;color:var(--dim)}
.payout-line b{color:var(--gold)}
.payout-sub{color:var(--dim);font-size:11px}
/* Warp Restricted toggle (setup screens) */
.wr-opt{display:flex;flex-direction:column;gap:3px;max-width:360px}
.wr-opt b{color:var(--text);display:flex;align-items:center;gap:8px}
.wr-opt.sel b{color:var(--cyan)}
.wr-state{font-size:10px;font-weight:700;letter-spacing:.5px;padding:1px 8px;border-radius:9px;
  background:var(--line2);color:var(--dim)}
.wr-opt.sel .wr-state{background:var(--cyan);color:#02121a}
/* Quick Play: launch a saved custom deck */
.qp-divider{display:flex;align-items:center;justify-content:center;gap:10px;margin:16px 0 8px;font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.qp-divider::before,.qp-divider::after{content:"";flex:1;height:1px;background:var(--line2)}
.qp-divider.qp-nodecks{text-transform:none;letter-spacing:0}
.qp-divider.qp-nodecks::before,.qp-divider.qp-nodecks::after{display:none}
.qp-decks{display:flex;flex-wrap:wrap;gap:8px}
.qp-deck{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;min-width:150px;
  background:var(--panel2);border:1px solid var(--line2);border-radius:6px;padding:8px 12px;cursor:pointer}
.qp-deck:hover:not(:disabled){border-color:var(--cyan);background:#2a2213}
.qp-deck b{color:var(--text);font-size:13px}
.qp-deck-meta{font-size:10.5px;color:var(--dim)}
.qp-deck.bad{opacity:.55;cursor:not-allowed}
.wr-readonly{padding:2px 2px 4px}
/* in-game "Warp Restricted" badge in the topbar */
#rules-badge{font-size:11px;font-weight:700;letter-spacing:.3px;color:#f0d79a;background:#241d0c;
  border:1px solid var(--gold);border-radius:12px;padding:3px 10px;white-space:nowrap;flex:0 0 auto}
#rules-badge[hidden]{display:none}
@media (max-width:820px), (pointer:coarse){ #rules-badge{display:none} }   /* keep the mobile topbar compact */
.start-btn{margin-top:14px;padding:10px 18px;font-size:14px;font-weight:600;background:var(--cyan);
  color:#02121a;border:none;border-radius:5px;cursor:pointer}
.start-btn:disabled{background:var(--line2);color:var(--dim);cursor:not-allowed}
.opt.disabled{opacity:.45;cursor:not-allowed;pointer-events:none}

/* starbase upgrade preview */
.upg-wrap{display:flex;gap:14px;margin:6px 0 12px;align-items:flex-start}
.upg-art{width:150px;border-radius:6px;border:1px solid var(--line2);flex:0 0 auto}
.upg-info{display:flex;flex-direction:column;gap:8px;font-size:13px;min-width:0}
.upg-row{display:flex;justify-content:space-between;gap:14px;background:var(--bg2);
  border:1px solid var(--line);border-radius:4px;padding:5px 10px}
.upg-lbl{color:var(--dim)} .upg-val{font-variant-numeric:tabular-nums}
.upg-arrow.up{color:var(--ok)} .upg-arrow.down{color:var(--danger)} .upg-arrow.same{color:var(--dim)}
.upg-abil{color:var(--text);line-height:1.4;background:var(--bg2);border:1px solid var(--line);
  border-radius:4px;padding:7px 10px;font-size:12px}
.upg-abil b{color:var(--cyan)}

/* rival activity feed (sidebar strip — never overlaps the board) */
#rival-feed{flex:0 0 auto;background:#0d0b08;border:1px solid var(--line2);border-radius:6px;padding:6px 7px}
.rf-title{font-size:9px;letter-spacing:1px;color:var(--minmatar);text-transform:uppercase;margin-bottom:4px}
.rf-strip{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px}
.rf-item{display:flex;flex-direction:column;align-items:center;gap:1px;flex:0 0 auto}
.rf-meta{font-size:9px;color:var(--dim)}

/* destruction FX toasts */
#fx-layer{position:fixed;inset:0;pointer-events:none;z-index:70;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px}
.fx-kill{display:flex;align-items:center;gap:8px;padding:6px 14px;border-radius:20px;font-weight:700;
  font-size:15px;background:#12060699;border:1px solid var(--danger);color:#ffd3cf;opacity:0;
  animation:killpop 2.1s ease-out forwards;text-shadow:0 1px 3px #000}
.fx-kill.mine{border-color:var(--danger)} .fx-kill.foe{border-color:var(--ok);color:#d6ffe0}
/* News reveal: a played news card resolves straight to the scrapheap, so show the real
   card long enough to read it. Sits above the board, click-through except the card itself. */
#news-layer{position:fixed;inset:0;pointer-events:none;z-index:72;display:flex;
  align-items:center;justify-content:center;gap:18px}
.news-reveal{pointer-events:auto;cursor:pointer;display:flex;flex-direction:column;align-items:center;
  gap:6px;padding:12px 14px;border-radius:12px;background:#0c0a08ee;border:1px solid var(--line2);
  box-shadow:0 14px 44px #000c;opacity:0;animation:newspop 4.2s ease-out forwards}
.news-reveal.foe{border-color:var(--danger);box-shadow:0 14px 44px #000c,0 0 0 1px #c0433a55 inset}
.news-reveal.mine{border-color:var(--cyan)}
.news-reveal .card{width:150px;height:210px}
.nr-who{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:700}
.nr-name{font-size:13px;font-weight:700;color:var(--text);max-width:170px;text-align:center}
@keyframes newspop{
  0%{opacity:0;transform:scale(.82) translateY(10px)}
  8%{opacity:1;transform:scale(1.04)}
  14%{transform:scale(1)}
  86%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(.96) translateY(-8px)}
}
@media (prefers-reduced-motion:reduce){ .news-reveal{animation:newsfade 4.2s linear forwards} }
@keyframes newsfade{0%{opacity:0}4%{opacity:1}90%{opacity:1}100%{opacity:0}}
.fx-boom{font-size:20px}
@keyframes killpop{
  0%{opacity:0;transform:scale(.6)}
  15%{opacity:1;transform:scale(1.12)}
  30%{transform:scale(1)}
  80%{opacity:1}
  100%{opacity:0;transform:translateY(-24px) scale(.95)}
}

/* discard-to-7 prompt */
#discard-prompt{display:flex;gap:14px;align-items:center;justify-content:center;padding:6px 8px;
  color:var(--warn);font-size:13px;flex-wrap:wrap}
#discard-prompt .dp-btn{background:#3a1616;border:1px solid var(--danger);color:#f0c9c4;
  padding:8px 16px;border-radius:6px;font-weight:700;cursor:pointer}
#discard-prompt .dp-btn:disabled{opacity:.45;cursor:default}
.card.discarding{outline:3px solid var(--danger);outline-offset:1px;filter:brightness(.7)}

/* optional "may" reaction actions (Investment Bank / Crystal Boulevard / Precognition) */
#opt-actions{display:flex;gap:8px;align-items:center;justify-content:center;padding:5px 8px;flex-wrap:wrap}
#opt-actions .opt-btn{background:#2a2213;border:1px solid var(--cyan);color:#f0e3c6;
  padding:6px 12px;border-radius:6px;font-weight:600;font-size:12.5px;cursor:pointer}
#opt-actions .opt-btn:hover{background:#332815}
/* name-a-card modal: search box + scrollable filtered list */
.name-card-search{width:100%;box-sizing:border-box;background:var(--panel2);border:1px solid var(--line2);
  border-radius:4px;padding:8px 10px;color:var(--ink);margin-bottom:8px;font-size:14px}
.name-card-list{display:flex;flex-direction:column;gap:4px;max-height:min(46vh,360px);overflow-y:auto;margin-bottom:8px}
.name-card-list .name-card-opt{padding:6px 10px}

/* opening-hand mulligan prompt */
#mulligan-prompt{display:flex;gap:12px;align-items:center;justify-content:center;padding:6px 8px;
  color:var(--cyan);font-size:13px;flex-wrap:wrap}
#mulligan-prompt .mp-btn{background:var(--panel2);border:1px solid var(--line2);color:var(--text);
  padding:8px 16px;border-radius:6px;font-weight:700;cursor:pointer}
#mulligan-prompt .mp-btn:hover{border-color:var(--cyan)}
#mulligan-prompt .mp-btn.alt{background:#2a2213;border-color:var(--cyan);color:#f0e3c6}

/* interactive combat panel */
#combat-panel{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:65;
  background:var(--panel);border:2px solid var(--attack);border-radius:10px;padding:12px 16px;
  box-shadow:0 12px 44px #000e;max-width:min(700px,94vw);max-height:82vh;overflow:auto}
.cp-title{font-weight:700;color:#e79a8f;letter-spacing:.5px;margin-bottom:3px}
.cp-sub{font-size:12px;color:var(--dim);margin-bottom:6px;max-width:640px}
.cp-label{font-size:10px;letter-spacing:1px;color:var(--dim);text-transform:uppercase;margin:8px 0 3px}
.cp-ships{display:flex;gap:8px;flex-wrap:wrap}
.cp-ship{display:flex;flex-direction:column;align-items:center;gap:2px}
.cp-tgt{font-size:10px;color:var(--cyan)}
.cp-tgt.warn{color:var(--warn)}
.card.no-sb{outline:2px solid var(--warn);outline-offset:1px}
.card.targeted{outline:2px dashed var(--attack);outline-offset:1px}
.card.withdrawing{outline:3px dashed var(--gold);outline-offset:2px;filter:brightness(.8)}
.cp-sub.cp-defend{color:#f0c9a0;font-size:13px}
.cp-sub.cp-defend b{color:#e79a8f}
.cp-actions{display:flex;gap:10px}
.cp-btn{background:var(--panel2);border:1px solid var(--line2);color:var(--text);padding:10px 18px;
  border-radius:6px;font-weight:700;cursor:pointer;margin-top:10px}
.cp-btn.confirm{background:#3a1616;border-color:var(--attack);color:#f6d7d2}
.cp-btn.alt{background:#2a2213;border-color:var(--cyan);color:#f0e3c6}
.cp-btn:hover{filter:brightness(1.25)}
.cp-abils{display:flex;gap:6px;flex-wrap:wrap}
.cp-abil{background:#241d0c;border:1px solid var(--gold);color:#f0d79a;padding:6px 10px;border-radius:5px;
  font-size:12px;font-weight:600;cursor:pointer}
.cp-abil:hover{filter:brightness(1.2)}
/* guided board tour: spotlight hole + positioned callout */
#board-tour{position:fixed;inset:0;z-index:80}
.bt-hole{position:fixed;border:2px solid var(--cyan);border-radius:8px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(2,6,12,.4),0 0 0 3px rgba(67,198,224,.9),0 0 36px 8px rgba(67,198,224,.45)}
.bt-tip{position:fixed;z-index:81;max-width:min(340px,92vw);background:var(--panel);border:1px solid var(--cyan);
  border-radius:10px;padding:12px 14px;box-shadow:0 12px 44px #000e}
.bt-title{font-weight:800;color:var(--cyan);letter-spacing:.4px;margin-bottom:4px}
.bt-text{font-size:13px;color:var(--ink);line-height:1.5}
.bt-text b{color:var(--text)}
.bt-row{display:flex;align-items:center;justify-content:space-between;margin-top:10px;gap:10px}
.bt-dots{font-size:10px;color:var(--dim);letter-spacing:2px}
.bt-btns{display:flex;gap:8px}
.bt-btns button{border-radius:6px;padding:7px 14px;font-weight:700;cursor:pointer}
.bt-skip{background:var(--panel2);border:1px solid var(--line2);color:var(--dim)}
.bt-next{background:var(--cyan);border:none;color:#02121a}

/* new-player onboarding: welcome panel + how-to-play guide */
.welcome{max-width:560px}
.welcome .wc-sub{color:var(--cyan);font-size:13px;margin:-4px 0 12px;letter-spacing:.3px}
.welcome .wc-body{font-size:13.5px;color:var(--ink);line-height:1.6}
.welcome .wc-body ul{margin:10px 0 4px;padding-left:4px;list-style:none;display:flex;flex-direction:column;gap:7px}
.welcome .wc-body b{color:var(--text)}
.start-btn.wc-alt{background:var(--panel2);color:var(--text);border:1px solid var(--line2)}
.howto{max-width:640px}
.howto h3{font-size:13px;color:var(--cyan);letter-spacing:.6px;margin:14px 0 4px}
.howto .ht-body{font-size:13px;color:var(--ink);line-height:1.6}
.howto .ht-body b{color:var(--text)}

/* PvP parity ask panels (opening mulligan / Depleted reaction) */
.pvp-ask{position:fixed;left:50%;bottom:120px;transform:translateX(-50%);z-index:66;max-width:min(480px,92vw);
  background:var(--panel);border:2px solid var(--cyan);border-radius:10px;padding:12px 16px;
  font-size:13px;color:var(--ink);line-height:1.5;box-shadow:0 12px 44px #000e}
.pvp-ask b{color:var(--text)}
.pvp-ask .pa-row{display:flex;gap:10px;justify-content:center;margin-top:8px}
/* combat targeting cues */
#combat-panel .card{position:relative}
#combat-panel .card.sel{outline:3px solid var(--cyan);outline-offset:2px;box-shadow:0 0 14px -2px var(--cyan)}
#combat-panel .card.attacking{outline:2px solid var(--attack);outline-offset:1px}
.cp-ships.targeting .card{cursor:crosshair}
.cp-ships.targeting .card:not(.sel){animation:tgtPulse 1.15s ease-in-out infinite}
@keyframes tgtPulse{0%,100%{box-shadow:0 0 0 0 rgba(211,74,58,0)}50%{box-shadow:0 0 0 3px rgba(211,74,58,.55)}}
.cp-tgt.ok{color:var(--gallente)} .cp-tgt.none{color:var(--dim)}
.cp-zoom{position:absolute;top:2px;left:2px;z-index:2;width:21px;height:21px;line-height:19px;text-align:center;padding:0;
  border-radius:5px;border:1px solid var(--line2);background:#14110cee;color:#f0e3c6;font-size:11px;cursor:zoom-in}
.cp-zoom:hover{background:var(--cyan);color:#02121a}
.cp-hits{position:absolute;bottom:0;left:0;background:var(--attack);color:#fff;font-size:11px;font-weight:700;padding:0 4px;border-radius:0 5px 0 5px}
.cp-abil:disabled{opacity:.4;cursor:not-allowed;filter:none}

/* mobile tap-to-zoom card viewer */
#card-zoom{position:fixed;inset:0;background:#050403f2;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;z-index:70;padding:18px}
#card-zoom img{max-height:66vh;max-width:92vw;border-radius:12px;border:1px solid var(--line2);
  box-shadow:0 12px 48px #000}
#card-zoom .cz-name{font-weight:700;font-size:16px;text-align:center}
#card-zoom .cz-houserule{max-width:min(440px,92vw);text-align:center;font-size:13px;line-height:1.45;
  color:#f0d79a;background:rgba(224,169,74,.12);border:1px solid var(--gold);border-radius:8px;padding:9px 14px}
#card-zoom .cz-houserule b{color:var(--gold)}
#card-zoom .cz-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:92vw}
#card-zoom .cz-actions button{background:#123a2a;border:1px solid var(--ok);color:#cfeeda;
  padding:12px 20px;border-radius:8px;font-size:15px;font-weight:700;cursor:pointer}
#card-zoom .cz-actions button:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.5)}
#card-zoom .cz-close{color:var(--dim);font-size:13px}

/* ---- mobile / narrow screens: stack to a single column ---- */
/* mobile chrome (tab bar + fixed bottom stack) — created/removed by JS; hidden on desktop */
#mtabs,#m-bottom{display:none}

@media (max-width:820px), (pointer:coarse){
  :root{--mtw:104px; --mth:146px}   /* builder/store thumbnails: a touch smaller on phones */
  html,body{height:auto;overflow-y:auto;overflow-x:hidden}
  /* single column; only the active tab's section is shown */
  #app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto;
    grid-template-areas:"top" "tabs" "table" "side";height:auto;min-height:100vh;overflow-x:hidden}
  #topbar,#table,#sidebar{min-width:0;max-width:100vw}
  #topbar{position:sticky;top:0;z-index:48;flex-wrap:nowrap;height:44px;min-height:44px;padding:6px 10px;gap:8px;overflow:hidden}
  .brand{font-size:14px;white-space:nowrap} .brand span{display:none}   /* hide subtitle on mobile */
  #phase-indicator{order:0;flex-basis:auto;font-size:11px;margin-left:auto;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;max-width:42vw}
  .topbtns{display:flex;gap:6px;flex:0 0 auto;align-items:center}
  .topbtns button{padding:8px 11px;font-size:12px}   /* bigger touch target within the 44px bar */
  .online-stat{padding:3px 7px;font-size:11px} .online-stat .online-label{display:none}
  /* The 44px bar is overflow:hidden and .topbtns never shrinks, so anything that does not
     fit is CLIPPED at the right edge — which cut the New Game button in half on a 375px
     phone (the row measured 379px wide). "· N in game" alone is ~55px of that; dropping it
     brings the row well inside even a 320px screen. The dot + count stay, so tapping the
     indicator still opens the roster (the way in to Challenge and Watch). */
  #online-games{display:none}
  /* Center of Operations HUD: compact on mobile; collection stays on its menu card */
  .coo-hud{gap:7px;font-size:11px;min-width:0;overflow:hidden}
  .hud-coll{display:none}
  .hud-rec{display:none}                 /* keep PLEX + sign-in on the tight mobile bar */
  .hud-char{max-width:60px}
  .hud-login{padding:3px 8px;font-size:11px}
  /* nav dropdown buttons: icon-only on mobile so both fit the 44px bar */
  .nav-btn{gap:3px;padding:8px 9px}
  .nav-btn .nb-lab{display:none}
  .top-menu{min-width:200px}

  /* tab bar */
  #mtabs{grid-area:tabs;display:flex;position:sticky;top:44px;z-index:47;background:var(--bg2);border-bottom:1px solid var(--line2)}
  .mtab{flex:1;padding:11px 4px;background:transparent;border:none;border-bottom:2px solid transparent;
    color:var(--dim);font-size:13px;font-weight:700;letter-spacing:.3px;cursor:pointer}
  .mtab.active{color:var(--cyan);border-bottom-color:var(--cyan);background:#161309}

  /* "Board" shows the whole battlefield: enemy → outer regions → you */
  #opp-area,#board,#me-area,#sidebar{display:none}
  :root[data-mtab="board"] #opp-area,:root[data-mtab="board"] #me-area{display:block}
  :root[data-mtab="board"] #board{display:flex}
  :root[data-mtab="log"] #sidebar{display:flex}
  :root[data-mtab="board"] #opp-area,:root[data-mtab="board"] #board{border-bottom:2px solid var(--line2);padding-bottom:8px;margin-bottom:4px}
  #table{overflow:visible;gap:8px;padding-bottom:8px}
  #board{min-height:180px}
  #sidebar{border-left:none;overflow:visible;gap:10px}
  #log{word-break:break-word;max-height:none;flex:none}
  .pa-rows{gap:10px}
  #card-preview{display:none!important}   /* no hover on touch */
  #modal{padding:14px}                    /* keep choice/upgrade modals inside the viewport */
  #modal-box{max-width:100%;max-height:86vh;overflow:auto}

  /* fixed bottom stack: controls over the swipeable hand */
  #m-bottom{display:flex;flex-direction:column;position:fixed;left:0;right:0;bottom:0;z-index:47}
  #m-controls{display:flex;flex-direction:column;gap:6px;background:#0d0b08f2;border-top:1px solid var(--line2);
    padding:6px 8px 0;box-shadow:0 -3px 12px #0006}
  #m-controls #action-bar{display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:6px;padding-bottom:2px}
  #m-controls #action-bar:empty{display:none}
  #m-controls #action-bar button{flex:0 0 auto;padding:9px 12px;font-size:13px;white-space:nowrap}
  #m-controls #btn-end{width:100%;padding:11px;font-size:15px}
  /* #hand-tray is grid-area:hand — an area this single-column template does NOT define.
     A grid item naming a missing area gets placed in an IMPLICIT column, which is what
     opened a second track beside the layout: a dead black bar down the right edge that
     squeezed #topbar to 280px (clipping New Game) and stranded "Stack: Off" against it.
     In a game the tray is moved into the fixed #m-bottom stack and leaves the grid, so
     the bug only ever showed on the landing screen. Pin it to the one real column. */
  #hand-tray{grid-area:auto;grid-column:1;background:#0d0b08f2;border-top:1px solid var(--line2);box-shadow:none;
    padding:6px 6px calc(6px + env(safe-area-inset-bottom));max-height:40vh;overflow-y:auto}
  /* Landing screen: no game is bound, so there is no hand to lay out and no phase to
     end. Drop the game-only furniture rather than showing an empty tray with a lone
     Stack toggle in it. display:none also takes it out of the grid entirely. */
  :root:not([data-game="live"]) #hand-tray{display:none}
  #hand{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;justify-content:flex-start;gap:6px;
    min-height:0;padding-bottom:2px;-webkit-overflow-scrolling:touch}
  #hand .card,#hand .card.big{width:70px;height:98px;flex:0 0 auto}
  #hand::after{content:"";flex:0 0 4px}
  /* room for the fixed bottom stack (controls ~90 + hand ~120) */
  #app{padding-bottom:220px}
  .cz-actions button{padding:12px 20px;font-size:15px}

  /* Combat panel: ships tiled compactly (3-across) instead of stacking one-per-row,
     with the action buttons pinned so they stay reachable. Tap 🔍 to read a card. */
  #combat-panel{width:96vw;max-width:96vw;max-height:82vh;padding:10px 12px 8px;bottom:6px}
  #combat-panel .cp-ships{gap:6px;justify-content:center}
  #combat-panel .card,#combat-panel .card.big{width:96px;height:135px}
  #combat-panel .cp-sub{font-size:12px;margin-bottom:4px}
  #combat-panel .cp-label{margin:6px 0 2px}
  #combat-panel .cp-tgt{font-size:9px}
  #combat-panel .cp-actions{position:sticky;bottom:0;background:var(--panel);padding-top:8px;
    margin-top:2px;justify-content:center;flex-wrap:wrap}
  #combat-panel .cp-btn{flex:1 1 auto;min-width:120px;max-width:230px;text-align:center;margin-top:0}
}

/* =========================================================================
   Leaderboard, faction boosters, trading, and roster win/loss.
   Photon palette: warm charcoal glass + Capsuleer Gold. Faction hues are the
   canonical --amarr/--caldari/--gallente/--minmatar tokens, never re-invented.
   ========================================================================= */

/* ---- roster: win rate + total wins beside each player ----
   Rate leads (gold, as on the leaderboard) with wins as the supporting figure;
   the full W-L breakdown is the leaderboard's job, not this row's. */
.op-rec{margin-left:6px;font-size:11px;color:var(--dim);white-space:nowrap;letter-spacing:.3px;
  font-variant-numeric:tabular-nums}
.op-rec .op-rate{color:var(--gold);font-weight:700}
.op-rec .op-w{color:var(--ok);font-weight:700}
.op-rec .op-slash{opacity:.45;margin:0 3px}

/* ---- leaderboard ---- */
.lb-box{max-width:720px}
.lb-tabs{display:flex;gap:6px;margin:10px 0 12px}
.lb-tab{background:var(--panel);color:var(--dim);border:1px solid var(--line2);border-radius:6px;
  padding:6px 14px;cursor:pointer;font-size:12px;letter-spacing:.4px}
.lb-tab:hover{color:var(--text);border-color:var(--gold)}
.lb-tab.sel{background:rgba(224,169,74,.14);color:#f0d79a;border-color:var(--gold)}
.lb-list{max-height:min(58vh,520px);overflow-y:auto;border:1px solid var(--line);border-radius:8px;background:var(--bg2)}
.lb-row{display:grid;grid-template-columns:44px minmax(0,1fr) 44px 44px 58px 76px;align-items:center;
  gap:6px;padding:7px 12px;border-bottom:1px solid var(--line)}
.lb-row:last-child{border-bottom:0}
.lb-head{position:sticky;top:0;background:var(--panel2);color:var(--dim);font-size:11px;
  text-transform:uppercase;letter-spacing:1px;z-index:1}
.lb-rank{font-weight:700;color:var(--dim);text-align:center}
.lb-top .lb-rank{font-size:16px}
.lb-name{min-width:0;display:flex;align-items:center;gap:7px}
.lb-name .lb-face,.lb-name .lb-face-fb{flex:0 0 auto}
.lb-who{min-width:0;display:flex;flex-direction:column;justify-content:center;line-height:1.18}
.lb-nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-fav{display:inline-flex;align-items:center;margin-top:3px;cursor:zoom-in}
.lb-fav-art{width:22px;height:30px;object-fit:cover;border-radius:3px;border:1px solid var(--line2);display:block;
  transition:border-color .12s,transform .12s}
.lb-fav:hover .lb-fav-art{border-color:var(--gold);transform:scale(1.08)}
.lb-n,.lb-rate{text-align:right;font-variant-numeric:tabular-nums}
.lb-w{color:var(--ok);font-weight:700}
.lb-l{color:var(--danger)}
.lb-rate{color:var(--gold);font-weight:700}
.lb-me{background:rgba(224,169,74,.10);box-shadow:inset 3px 0 0 var(--gold)}
.lb-row:not(.lb-head):hover{background:rgba(255,255,255,.03)}
/* community stats panel above the standings */
.lb-stats{margin:2px 0 12px}
.lb-stat-row{display:flex;flex-wrap:wrap;gap:8px}
.lb-stat{flex:1 1 auto;min-width:92px;background:var(--panel2,#131c30);border:1px solid var(--line2);
  border-radius:7px;padding:8px 12px;display:flex;flex-direction:column;gap:1px}
.lb-stat b{font-size:19px;color:var(--gold);font-variant-numeric:tabular-nums;line-height:1.1}
.lb-stat i{font-style:normal;font-size:10.5px;color:var(--dim);letter-spacing:.04em;text-transform:uppercase}
.lb-stat-me{background:rgba(224,169,74,.13);border-color:var(--gold)}
.lb-stat-me b{color:#f0d79a}
.lb-fleet{margin-top:8px;padding:7px 12px;background:var(--bg2);border:1px solid var(--line);border-radius:7px;
  font-size:12.5px;color:var(--text);display:flex;flex-wrap:wrap;align-items:center;gap:2px}
.lb-fleet b{color:var(--gold);font-weight:700}
.lb-dot{margin:0 8px;color:var(--line2)}

/* ---- booster store sections ---- */
.store-sec{margin:16px 0 6px;color:var(--gold);font-size:12px;letter-spacing:1.2px;text-transform:uppercase}
.store-fachint{margin-top:0}
/* Standard pack: the real printed card back stands in for the sealed booster,
   with the copy and buy button beside it. The art is itself a buy control. */
.store-standard{display:flex;gap:16px;align-items:center;margin-bottom:4px}
.pack-btn{padding:0;border:0;background:none;cursor:pointer;line-height:0;border-radius:7px;flex:none;
  transition:transform .12s ease,box-shadow .12s ease}
.pack-img{width:104px;height:auto;display:block;border-radius:7px;
  border:1px solid var(--line2);box-shadow:0 5px 16px rgba(0,0,0,.6)}
.pack-btn:hover:not(:disabled){transform:translateY(-3px) rotate(-1.2deg)}
.pack-btn:hover:not(:disabled) .pack-img{box-shadow:0 10px 24px rgba(0,0,0,.7);border-color:var(--gold)}
.pack-btn:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.pack-btn:disabled{cursor:not-allowed}
.pack-btn:disabled .pack-img{filter:grayscale(.55) brightness(.62)}
.std-body{display:flex;flex-direction:column;gap:9px;min-width:0;flex:1}
.std-hint{margin:0}
.store-buy{display:block;width:100%;margin:0}
@media (prefers-reduced-motion:reduce){.pack-btn{transition:none}.pack-btn:hover:not(:disabled){transform:none}}
@media (max-width:560px){
  .store-standard{gap:12px}
  .pack-img{width:82px}
}
.store-factions{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:8px;margin-bottom:6px}
.fac-btn{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 8px;cursor:pointer;
  background:var(--panel);border:1px solid var(--line2);border-radius:8px;color:var(--text);
  transition:border-color .15s,transform .1s,background .15s}
.fac-btn:hover:not(:disabled){transform:translateY(-2px);background:var(--panel2)}
.fac-btn:disabled{opacity:.42;cursor:not-allowed}
.fac-emblem{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.fac-name{font-weight:700;font-size:12px;letter-spacing:.5px}
.fac-cost{font-size:11px;color:var(--gold);font-weight:700}
.fac-amarr:hover:not(:disabled){border-color:var(--amarr)}
.fac-caldari:hover:not(:disabled){border-color:var(--caldari)}
.fac-gallente:hover:not(:disabled){border-color:var(--gallente)}
.fac-minmatar:hover:not(:disabled){border-color:var(--minmatar)}
.sr-label.err{color:var(--danger)}

/* ---- trading ---- */
.trade-box,.trade-build{max-width:820px}
.trade-panel{display:flex;flex-direction:column;gap:10px;max-height:min(52vh,480px);overflow-y:auto}
.trade-sec{color:var(--gold);font-size:12px;letter-spacing:1.1px;text-transform:uppercase;margin-top:4px}
.trade-row{display:grid;grid-template-columns:minmax(96px,150px) 1fr 1fr auto;gap:10px;align-items:center;
  padding:10px;background:var(--panel);border:1px solid var(--line2);border-radius:8px}
.tr-peer{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-side{min-width:0}
.tr-lab{display:block;font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--dim);margin-bottom:3px}
.tr-get .tr-lab{color:var(--ok)}
.tr-give .tr-lab{color:var(--danger)}
.tr-cards{display:flex;flex-wrap:wrap;gap:4px}
.tr-cards .mthumb{--mtw:52px;--mth:73px}
.tr-none{color:var(--dim);font-style:italic;font-size:11px}
.tr-acts{display:flex;flex-direction:column;gap:5px}

/* trading locked until the games threshold (server-enforced; this explains it) */
.trade-lock{background:var(--panel);border:1px solid var(--line2);border-radius:8px;padding:18px 20px;
  display:flex;flex-direction:column;gap:9px;text-align:center;align-items:center}
.tl-head{color:var(--gold);font-weight:700;font-size:15px;letter-spacing:.3px}
.tl-sub{color:var(--dim);font-size:13px;max-width:52ch;line-height:1.5}
.tl-sub b{color:var(--text)}
.tl-bar{width:min(320px,100%);height:7px;border-radius:4px;background:var(--bg2);
  border:1px solid var(--line);overflow:hidden}
.tl-fill{height:100%;background:linear-gradient(90deg,rgba(224,169,74,.55),var(--gold));
  transition:width .4s ease}
.tl-count{color:var(--dim);font-size:11.5px;letter-spacing:.6px;text-transform:uppercase}

/* offer builder */
.tb-who{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.tb-peer{background:var(--panel);border:1px solid var(--line2);border-radius:6px;color:var(--text);
  padding:6px 11px;cursor:pointer;font-size:12px}
.tb-peer:hover{border-color:var(--gold)}
.tb-peer.sel{background:rgba(224,169,74,.16);border-color:var(--gold);color:#f0d79a}
.tb-pick{border:1px solid var(--line);border-radius:8px;padding:8px;background:var(--bg2);margin-bottom:4px}
.tb-search{width:100%;padding:6px 9px;margin-bottom:7px;background:var(--panel);color:var(--text);
  border:1px solid var(--line2);border-radius:6px;font-size:12px}
.tb-search:focus{outline:none;border-color:var(--gold)}
.tb-chosen{display:flex;flex-wrap:wrap;gap:5px;min-height:26px;margin-bottom:7px}
.tb-chip{background:rgba(224,169,74,.14);border:1px solid var(--gold);color:#f0d79a;border-radius:5px;
  padding:3px 8px;font-size:11px;cursor:pointer}
.tb-chip:hover{background:rgba(192,67,58,.2);border-color:var(--danger);color:#f0b0aa}
.tb-grid{display:flex;flex-wrap:wrap;gap:6px;max-height:210px;overflow-y:auto}
.tb-grid .mthumb{--mtw:64px;--mth:90px;cursor:pointer}
.tb-opt:hover{outline:2px solid var(--gold);outline-offset:1px}
.tb-status{color:var(--dim);font-size:12px;margin:8px 0 2px;min-height:17px}

@media (max-width:860px), (pointer:coarse){
  .trade-row{grid-template-columns:1fr;gap:7px}
  .tr-acts{flex-direction:row}
  /* Drop the Games column on phones so the capsuleer name + favorite ship stay legible
     (W / L / win rate carry the record). The 5th cell is Games in both header and data rows. */
  .lb-row{grid-template-columns:34px minmax(0,1fr) 30px 30px 54px;padding:7px 8px;font-size:12px}
  .lb-row > :nth-child(5){display:none}
}

/* ---- Exiled characters -------------------------------------------------- */
/* A docked character is an AGENT and sits in the dock row beside ships; one that
   is flying is drawn on its ship instead, so these two states never both show. */
.card.character{box-shadow:0 0 0 2px #7d5bd6,0 0 10px -2px #7d5bd6}
.card.character .char-mode{position:absolute;top:0;left:0;background:#7d5bd6;color:#fff;
  font-size:9px;letter-spacing:.5px;padding:0 3px;font-weight:700}
.card.piloted{box-shadow:0 0 0 2px #7d5bd6,0 0 12px -2px #7d5bd6}
.card.piloted .pilot-tag{position:absolute;bottom:0;left:0;right:0;z-index:3;padding-right:46px;background:rgba(125,91,214,.92);
  color:#fff;font-size:9px;line-height:1.35;text-align:center;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* SENTRY — a hull that can never attack (every CONCORD ship, plus anything deployed
   under a Sentry rider). Sits at the TOP of the card so it never fights the pilot
   banner along the bottom or the attack/shield badge in the bottom-right corner. */
.card.sentry .sentry-tag{position:absolute;top:0;left:0;right:0;z-index:4;
  background:rgba(58,122,168,.92);color:#dbeaf5;font-size:8px;line-height:1.4;
  letter-spacing:.06em;text-align:center;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.card.sentry{outline:1px solid rgba(58,122,168,.55)}

/* =========================================================================
   FOIL FINISH — "Capsuleer refractor" (approved variant C).
   Foil is cosmetic and orthogonal to rarity: any collectible card can be foil.
   Built from the game's own palette (Capsuleer Gold -> cyan -> violet) over a
   fine diagonal refraction grain, rather than a generic rainbow, so it sits
   with the Photon theme. Pure CSS with no per-frame JS, so a full collection
   grid of foils renders no slower than plain cards.
   ========================================================================= */
.card.foil::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    repeating-linear-gradient(72deg, rgba(255,255,255,.07) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(118deg,
      rgba(224,169,74,.48) 0%, rgba(63,182,216,.44) 11%, rgba(125,91,214,.44) 22%,
      rgba(224,169,74,.48) 33%);
  background-size:auto, 260% 100%;
  mix-blend-mode:color-dodge;opacity:.5;
  animation:foilRefract 9s linear infinite}
@keyframes foilRefract{from{background-position:0 0,0% 0}to{background-position:0 0,260% 0}}
/* a warm edge so a foil is identifiable even when perfectly still (screenshots) */
.card.foil{border-color:#c9a24a;box-shadow:0 0 10px -3px rgba(224,169,74,.75)}
/* foil count on a collection thumbnail */
.mt-foil{position:absolute;bottom:0;left:0;background:rgba(201,162,74,.92);color:#1a1206;
  font-size:11px;font-weight:800;padding:0 4px;letter-spacing:.3px}
/* "✦ 2 foil!" callout on the booster reveal */
.sr-foil{color:var(--gold);font-weight:700;margin-left:8px}
/* pirate booster buttons: skull mark instead of a faction emblem */
.fac-btn.pirate .pi-mark{font-size:26px;line-height:1;color:#b0563a;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.fac-btn.pirate:hover:not(:disabled){border-color:#b0563a}

@media (prefers-reduced-motion:reduce){
  .card.foil::after{animation:none;background-position:0 0,40% 0}
}


/* =========================================================================
   CHARACTER PORTRAITS
   CCP serves these from a public CDN, so a signed-in capsuleer shows the same
   face they see in the game client. Everything degrades to the ◈ diamond: a
   guest has no character, and the CDN can be unreachable.
   ========================================================================= */
.op-face,.lb-face{width:22px;height:22px;border-radius:3px;object-fit:cover;
  border:1px solid var(--line2);background:#0a1020;flex:0 0 22px;display:inline-block;
  vertical-align:middle;margin-right:7px}
.op-face-fb,.lb-face-fb{display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--gold);border-style:dashed}
.op-row{display:flex;align-items:center;gap:0}
.op-row .op-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* In-match portrait: bigger, and framed to read as a pilot headshot. */
.pa-face{width:34px;height:34px;border-radius:4px;object-fit:cover;
  border:1px solid var(--line2);background:#0a1020;flex:0 0 34px}
.pa-face-fb{display:inline-flex;align-items:center;justify-content:center;
  font-size:17px;color:var(--gold);border-style:dashed}
.pa-ident{display:flex;align-items:center;gap:9px;min-width:0}
.pa-ident .pa-who{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


/* =========================================================================
   CAREER PROFILE
   ========================================================================= */
.pf-head{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.pf-face{width:72px;height:72px;border-radius:6px;object-fit:cover;flex:0 0 72px;
  border:1px solid var(--line2);background:#0a1020}
.pf-face-fb{display:inline-flex;align-items:center;justify-content:center;
  font-size:34px;color:var(--gold);border-style:dashed}
.pf-id{min-width:0}
.pf-name{font-size:19px;font-weight:600;color:#e8eefb;letter-spacing:.01em}
.pf-sub{color:var(--dim);font-size:12.5px;margin-top:2px}
.pf-record{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.pf-r{background:var(--panel2,#131c30);border:1px solid var(--line2);border-radius:6px;
  padding:7px 12px;display:flex;flex-direction:column;align-items:center;min-width:74px}
.pf-r b{font-size:18px;color:var(--gold);font-variant-numeric:tabular-nums;line-height:1.1}
.pf-r i{font-style:normal;font-size:10.5px;color:var(--dim);letter-spacing:.05em;
  text-transform:uppercase;margin-top:2px}
.pf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;
  margin-bottom:4px}
.pf-cell{background:#0a1020;border:1px solid var(--line);border-radius:6px;padding:9px 11px;
  display:flex;flex-direction:column}
.pf-n{font-size:20px;color:#e8eefb;font-variant-numeric:tabular-nums;line-height:1.15}
.pf-l{font-size:12px;color:var(--text);margin-top:1px}
/* Favorites (favorite ship w/ art + favorite race) */
.pf-fav{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px}
.pf-fav-cell{display:flex;align-items:center;gap:11px;background:#0a1020;border:1px solid var(--line);
  border-radius:8px;padding:10px 12px;flex:1 1 220px;min-width:200px}
.pf-fav-textcell{padding:14px 12px}
.pf-fav .mthumb{width:60px;margin:0;flex:0 0 auto;cursor:zoom-in}
.pf-fav .mthumb .card{width:60px;height:84px}
.pf-fav .mthumb .card img{width:100%;height:100%;object-fit:cover;border-radius:4px}
.pf-fav-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.pf-fav-k{font-size:10.5px;color:var(--dim);letter-spacing:.05em;text-transform:uppercase}
.pf-fav-v{font-size:16px;color:#e8eefb;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-fav-n{font-size:12px;color:var(--gold);font-variant-numeric:tabular-nums}
.pf-h{font-size:11px;color:var(--dim);margin-top:2px;line-height:1.35}
@media (max-width:820px), (pointer:coarse){
  .pf-face{width:56px;height:56px;flex:0 0 56px}
  .pf-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
}


/* =========================================================================
   SPECTATOR MODE
   A viewer sees the board and the log. Hands are face-down backs — their
   contents were stripped before the snapshot ever left the host.
   ========================================================================= */
.watch-badge{position:absolute;right:12px;bottom:-9px;background:#132437;color:var(--gold);
  border:1px solid var(--line2);border-radius:11px;padding:2px 10px;font-size:11.5px;
  letter-spacing:.03em;white-space:nowrap;z-index:6;pointer-events:none}
:root.spectating #btn-end,
:root.spectating #action-bar,
:root.spectating #hand-tray .discard-prompt,
:root.spectating .opt-actions{display:none !important}
:root.spectating .card{cursor:default}
.spec-hand-row{display:flex;align-items:center;gap:5px;padding:3px 6px;flex-wrap:wrap}
.spec-hand-who{font-size:11.5px;color:var(--dim);min-width:104px;letter-spacing:.03em}
.spec-hand-empty{font-size:11.5px;color:var(--dim);font-style:italic}
.spec-back{width:26px !important;height:37px !important;border-radius:3px;
  background:linear-gradient(160deg,#152238,#0a1120);border:1px solid var(--line2);
  box-shadow:none !important;flex:0 0 26px}
.op-watch{background:#132437;color:var(--cyan,#43c6e0);border:1px solid var(--line2);
  border-radius:4px;padding:2px 8px;font:inherit;font-size:11.5px;cursor:pointer;
  white-space:nowrap;margin-left:6px}
.op-watch:hover{background:#1a3350}