/* wowsb ship tool - theme */
:root{
  --ayanami:#454D62;            /* Ayanami blue (EVA) */
  --bg-1:#39415a;
  --bg-2:#454D62;
  --bg-3:#4f5871;
  --saber:#c3f9fc;              /* hover / focus / selected accent (user spec) */
  --green:#3ed087;              /* selection corner line */
  --black:#000;
  --card:rgba(0,0,0,.5);        /* card fill = 50% black */
  --line:rgba(255,255,255,.09);
  --line-soft:rgba(255,255,255,.28);
  --txt:#fff;
  --mut:rgba(255,255,255,.62);
  --dim:rgba(255,255,255,.40);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:linear-gradient(165deg,var(--bg-1) 0%,var(--bg-2) 55%,var(--bg-3) 100%);
  background-attachment:fixed;
  color:var(--txt);
  min-height:100dvh;
  display:flex;flex-direction:column;
}
button{font-family:inherit;cursor:pointer;color:inherit}
a{color:inherit;text-decoration:none}

/* ============ NAV (black bar, long fill) ============ */
.nav{
  background:#242424;
  position:sticky;top:0;z-index:100;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.nav-in{
  max-width:1180px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:0 18px;min-height:58px;
}
.brand{
  font-weight:700;font-size:17px;letter-spacing:.3px;color:#fff;
  white-space:nowrap;
}
/* beta marker beside the site name */
.brand .beta{
  display:inline-block;vertical-align:middle;
  margin-left:7px;padding:2px 6px;
  font-size:9.5px;font-weight:800;letter-spacing:1.1px;
  color:#ffd479;background:rgba(255,212,121,.12);
  border:1px solid rgba(255,212,121,.45);
  border-radius:0;line-height:1.35;
  transform:translateY(-1px);
}
.nav-links{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.nav-links .nl{
  display:inline-block;
  padding:8px 12px;border-radius:8px;
  color:#fff;font-size:14.5px;
  background:transparent;               /* button no fill */
}
.nav-links .nl:hover{background:var(--ayanami);color:#fff}   /* hover = Ayanami blue */
.nav-links .nl.active{position:relative}
.nav-links .nl.active::after{
  content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;
  background:var(--saber);border-radius:2px;
}
.nav-links .nl.soon{opacity:.42;pointer-events:none}

/* ============ LAYOUT ============ */
.wrap{
  width:100%;max-width:1180px;margin:0 auto;
  padding:26px 18px 56px;flex:1;
}
.topbar h1{font-size:clamp(21px,3.4vw,27px);font-weight:700;letter-spacing:.2px}
/* front-page intro. Reads well on a phone and a desktop without becoming a
   wall of text: fluid size, a comfortable line length, and a balanced wrap. */
.sub{
  color:var(--mut);
  font-size:clamp(12.5px,3.1vw,14px);
  line-height:1.55;
  margin-top:6px;
  max-width:68ch;              /* comfortable measure on wide screens */
  text-wrap:pretty;            /* avoid a lonely last word where supported */
}
.topbar .sub strong{color:#dfe8f7;font-weight:650}
.sub-link{color:#c3f9fc;text-decoration:none;border-bottom:1px solid rgba(195,249,252,.35)}
.sub-link:hover{border-bottom-color:#c3f9fc}
/* the "built by" tail is secondary: keep it on its own line if it wraps */
.sub-more{white-space:normal}

@media (max-width:600px){
  .sub{font-size:12.5px;line-height:1.5;max-width:none}
}
@media (max-width:380px){
  .sub{font-size:12px}
}

/* ============ FILTERS ============ */
.filters{
  margin-top:18px;padding:14px 16px 16px;
  background:rgba(0,0,0,.28);
  border:1px solid var(--line);
  border-radius:0;
  display:flex;flex-direction:column;gap:12px;
}
/* each filter row stacks: label on top, buttons underneath */
.frow{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.flabel{
  font-size:10.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--dim);
}
.fbtns{display:flex;gap:8px;flex-wrap:wrap}
.fbtn{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 12px;border-radius:0;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  color:#fff;font-size:13px;
  transition:border-color .15s,background .15s,box-shadow .15s;
}
.fbtn svg{width:18px;height:18px;display:block}
.fbtn img{display:block;object-fit:contain}
/* nation buttons: show the flat flag at its own landscape ratio */

.fbtn .ab{font-size:10.5px;font-weight:800;letter-spacing:1px}
.fbtn:hover{border-color:rgba(255,255,255,.38);background:rgba(255,255,255,.09)}
.fbtn.on{
  border-color:var(--saber);color:#fff;
  background:rgba(86,177,255,.14);
  box-shadow:0 0 12px -5px var(--saber);
}
.fbtn.tier{
  /* same box as the All button so the whole tier row is a neat grid.
     Width comes from the shared rule below; keep the text centred. */
  min-width:0;
  justify-content:center;font-weight:700;font-size:13.5px;
}
.fbtn.tier, .fbtn.all-btn.tier{
  width:64px;height:62px;
  padding:0 !important;
  line-height:1;
}

/* ============ COUNT / EMPTY ============ */
.count{color:var(--dim);font-size:12.5px;margin-top:18px}
/* the 'no ships match' box. Scoped so it never leaks onto the compare
   panel's empty slots, which use their own .cp-slot.empty styling. */
.main > .empty, #empty{
  margin-top:20px;padding:34px 18px;text-align:center;
  color:var(--mut);font-size:14px;
  border:1px dashed var(--line-soft);border-radius:0;
  background:rgba(0,0,0,.18);
}
.empty[hidden]{display:none}

/* ============ SHIP CARD ============ */
.grid{
  display:grid;gap:16px;margin-top:14px;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
}
.ship-card{
  position:relative;
  display:flex;align-items:stretch;gap:0;
  padding:0;
  background:var(--card);               /* rectangle fill = 50% black */
  border:1px solid var(--line);
  border-radius:0;                       /* sharp corners, no rounding */
  overflow:hidden;
  cursor:pointer;user-select:none;
  transition:border-color .16s,box-shadow .16s,transform .16s;
}
.ship-card:hover{
  border-color:rgba(255,255,255,.32);
  transform:translateY(-2px);
}
/* selected state: edge turns saber blue */
.ship-card.sel{
  border-color:var(--saber);
  box-shadow:0 0 0 1px var(--saber),0 0 18px -4px var(--saber),0 10px 24px -14px rgba(0,0,0,.9);
}

/* top-left corner: nation flag as a FULL-HEIGHT band.
   The artwork is 512x256 (2:1). The band is WIDE enough to show the whole
   flag at full card height, so nothing is cropped away. */
.flag{
  position:relative;z-index:1;
  flex:0 0 auto;
  align-self:stretch;
  line-height:0;
  margin:0;
  width:150px;                 /* leaves room for long names + the + button */
  overflow:hidden;
}
.flag .bgflag{
  display:block;
  width:100%;height:100%;
  object-fit:cover;            /* fills the band, keeps the 2:1 ratio */
  object-position:center;      /* whole flag visible, centred */
  -webkit-mask-image:linear-gradient(to right,#000 72%,transparent 100%);
          mask-image:linear-gradient(to right,#000 72%,transparent 100%);
}
.flag .bgflag.fallback{
  background:linear-gradient(to right,rgba(0,0,0,.18),rgba(0,0,0,0));
}

/* right side: text/icon, kept on the LEFT next to the flag band */
.main{
  position:relative;z-index:1;
  flex:1;min-width:0;
  display:flex;flex-direction:column;justify-content:center;
  align-items:flex-start;         /* text stays on the left side */
  text-align:left;
  align-self:stretch;
  padding:12px 62px 12px 18px;    /* right pad leaves room for the + button */
  gap:7px;
}
.head{display:flex;align-items:center;gap:9px}
/* ship class icon + tier: NO fill box, NO edge color, same size as each other
   (sized like the class icon art) */
.shipicon{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;
}
.shipicon img{width:24px;height:24px;object-fit:contain;display:block}
.tier{
  display:inline-flex;align-items:center;justify-content:center;
  height:24px;line-height:24px;
  font-size:22px;font-weight:800;color:#fff;
}
.meta{margin-top:0;width:100%;min-width:0}
.name{font-size:16px;font-weight:650;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ship-card .sub{font-size:11px;color:var(--mut);margin-top:2px;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* corner check: FILLED 45deg green triangle hugging the bottom-right card edges,
   white thick check sits slightly NEAR the outer card corner edge (per user note) */
.corner{
  position:absolute;right:0;bottom:0;z-index:2;
  width:46px;height:46px;
  display:none;pointer-events:none;
}
.ship-card.sel .corner{display:block}
.corner::before{
  content:"";
  position:absolute;inset:0;
  background:var(--green);
  clip-path:polygon(100% 0, 100% 100%, 0 100%);
}
.corner svg{
  position:absolute;
  right:8px;bottom:8px;
  width:15px;height:15px;
  stroke:#fff;stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round;
  fill:none;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.4));
}

/* ============ FOOTER ============ */
.foot{
  background:var(--black);
  border-top:2px solid rgba(86,177,255,.18);
  color:var(--mut);
  margin-top:auto;
}
.foot-in{
  max-width:1180px;margin:0 auto;padding:30px 18px 8px;
  display:grid;grid-template-columns:2fr 1fr 1.3fr;gap:26px;
}
.foot-brand{font-size:16px;font-weight:800;color:#fff;letter-spacing:.3px;margin-bottom:6px}
.foot-desc{font-size:13px;line-height:1.7;max-width:46ch}
.foot-author{font-size:13px;margin:2px 0 8px}
.foot-author strong{color:#fff}
.foot-h{
  font-size:11px;font-weight:800;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--saber);padding-bottom:6px;margin-bottom:6px;border-bottom:1px solid var(--line);
}
.foot-links{list-style:none}
.foot-links li{margin:6px 0;font-size:13.5px}
.foot-links a{color:var(--mut);text-decoration:none}
.foot-links a:hover{color:#fff;text-decoration:underline}
.foot-copy{
  text-align:center;font-size:11.5px;color:var(--dim);
  padding:16px 12px 22px;border-top:1px solid var(--line);letter-spacing:.4px;
}
.foot-copy a{color:var(--mut)}

/* ============ MOBILE ============ */
@media (max-width:600px){
  .nav-in{padding:0 12px;min-height:54px}
  .brand{font-size:15px}
  .brand .beta{font-size:8.5px;padding:1px 5px;margin-left:5px;letter-spacing:.9px}
  .nav-links .nl{font-size:13px;padding:7px 9px}
  .grid{grid-template-columns:1fr;gap:13px}
  .wrap{padding:18px 14px 44px}
  .flag{width:132px}
  .main{padding:10px 50px 10px 11px}
  .foot-in{grid-template-columns:1fr;gap:22px;padding-top:22px}
}
@media (max-width:360px){
  .nav-in{flex-direction:column;gap:2px;padding:8px 12px}
  .brand{font-size:16px}
  .nav-links{width:100%;justify-content:center}
}

/* ============ DETAIL OVERLAY (single ship stats + equipment) ============ */
.dl-overlay{
  position:fixed;inset:0;z-index:300;
  display:none;
  background:#39415a;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  /* keep the scroll inside the overlay: without this, reaching the top or the
     end of the content hands the gesture to the page behind and the homepage
     scrolls too. `none` also kills pull-to-refresh on mobile. */
  overscroll-behavior:contain;
  overscroll-behavior-y:contain;
  padding:max(18px,env(safe-area-inset-top)) 16px 40px;
}
.dl-overlay.open{display:block}
.dl-overlay .dl-content{display:none}
/* paint() fills #shipDetail directly with blocks */
#shipDetail{position:fixed}
/* inner panel */
#shipDetail > *:not(.dl-overlay-close){
  max-width:820px;margin:0 auto;
}
/* desktop: widen the panel and use two columns for the stat sections so the
   values reach the right edge instead of sitting mid-screen */
@media (min-width:1000px){
  #shipDetail > *:not(.dl-overlay-close){max-width:1120px}
  .stat-groups-2col{
    /* row-gap gives each section real vertical space so a tall section can
       never spill into the one below it */
    display:grid;grid-template-columns:1fr 1fr;gap:16px 28px;align-items:start;
  }
}
/* Exit button. It sits at the top-right of the content and scrolls away with
   it (not pinned to the screen). Fill #363b4b, white icon, square corners. */
.dl-close{
  position:absolute;top:14px;right:16px;
  display:block;
  z-index:320;
  width:38px;height:38px;border:none;border-radius:0;
  background:#363b4b;color:#fff;font-size:22px;line-height:1;
  border:1px solid var(--line-soft);
  cursor:pointer;
}
.dl-close:hover{background:#3d4356}


/* ---- ship detail sheet ---- */
#shipDetail > section,
#shipDetail > .dl-head,
#shipDetail > .eq-area,
#shipDetail > .dl-slotlabel,
#shipDetail > .dl-statslabel,
#shipDetail > .stat-group{
  max-width:820px;margin-left:auto;margin-right:auto;
}
.dl-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:12px;margin-top:6px;
}
.dl-title{font-size:clamp(22px,4.4vw,30px);font-weight:800;letter-spacing:.3px}
.dl-sub{color:var(--mut);font-size:14px;margin-top:4px}
.dl-slotlabel,.dl-statslabel{
  color:var(--dim);font-size:11px;font-weight:700;
  letter-spacing:1.6px;text-transform:uppercase;
  margin:16px 0 8px;
}

/* ====================== EQUIPMENT BAR ======================
   6 slots. Desktop: they sit in a simple grid; on narrow screens it
   wraps to 2 columns x 3 rows (mobile requirement). */
#shipDetail .eq-area{margin-bottom:4px}
.eq-bar{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.eq-box{
  display:flex;align-items:center;gap:8px;text-align:left;
  padding:8px 9px;min-height:56px;
  background:rgba(255,255,255,.04);    /* same palette as the homepage filters */
  border:1px solid var(--line);border-radius:0;color:#fff;
}
.eq-box:hover{border-color:var(--line-soft);background:rgba(0,0,0,.36)}
.eq-box.filled{border-color:rgb(62,208,135);box-shadow:0 0 12px -6px var(--green)}
.eq-left{flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.eq-ic{
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  font-size:20px;color:var(--mut);border:1px dashed var(--line-soft);
}
.eq-ic-img{width:30px;height:30px;object-fit:contain;display:block}
.eq-right{min-width:0;display:flex;flex-direction:column;gap:1px;align-items:flex-start}
.eq-nm{font-size:11.5px;line-height:1.3;display:block}
.eq-lv{font-size:10px;line-height:1;letter-spacing:1px;color:var(--saber);font-weight:700}

/* ---- I / II / III level selector, sits directly under each slot box ---- */
.eq-cell{display:flex;flex-direction:column;gap:4px;min-width:0}
.eq-cell .eq-box{width:100%}
.lv-row{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.lv-btn{
  display:block;width:100%;padding:3px 0;
  background:rgba(0,0,0,.30);border:1px solid var(--line);border-radius:0;
  color:var(--mut);font-size:10.5px;font-weight:700;letter-spacing:.8px;line-height:1.5;
  cursor:pointer;-webkit-tap-highlight-color:rgba(86,177,255,.25);touch-action:manipulation;
}
.lv-btn:hover:not(:disabled){color:#fff;border-color:var(--line-soft)}
.lv-btn.on{background:var(--saber);border-color:var(--saber);color:#05121f}
.lv-btn.dis,.lv-btn:disabled{opacity:.3;cursor:default;background:rgba(0,0,0,.18);border-color:var(--line);color:var(--mut)}

/* dropdown group headers */
.dd-head{
  padding:9px 8px 4px;margin-top:2px;
  font-size:10.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;
  color:var(--saber);border-top:1px solid var(--line);
}
.dd-head:first-child{border-top:none;margin-top:0}

/* mobile: 2 columns x 3 rows, slots paired [1][4] / [2][5] / [3][6] */
@media (max-width:600px){
  .eq-bar{grid-template-columns:repeat(2,1fr);gap:6px}
  .eq-box{min-height:50px;padding:7px 8px;gap:7px}
  .eq-ic,.eq-ic-img{width:26px;height:26px}
  .lv-row{gap:3px}
  .lv-btn{font-size:10px;padding:3px 0}
  /* explicit placement so the pairing is [1][4] / [2][5] / [3][6] */
  .eq-bar .eq-cell:nth-child(1),.cb-bar .eq-cell:nth-child(1){grid-column:1;grid-row:1}
  .eq-bar .eq-cell:nth-child(2),.cb-bar .eq-cell:nth-child(2){grid-column:1;grid-row:2}
  .eq-bar .eq-cell:nth-child(3),.cb-bar .eq-cell:nth-child(3){grid-column:1;grid-row:3}
  .eq-bar .eq-cell:nth-child(4),.cb-bar .eq-cell:nth-child(4){grid-column:2;grid-row:1}
  .eq-bar .eq-cell:nth-child(5),.cb-bar .eq-cell:nth-child(5){grid-column:2;grid-row:2}
  .eq-bar .eq-cell:nth-child(6),.cb-bar .eq-cell:nth-child(6){grid-column:2;grid-row:3}
  /* long equipment names must not spill out of the slot box */
  .eq-nm{font-size:10.5px;white-space:normal;overflow-wrap:anywhere;word-break:break-word;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .eq-box{overflow:hidden;align-items:flex-start}
  .eq-left{flex:0 0 auto}
  .eq-right{min-width:0;flex:1 1 auto}
}

/* ============ STAT GROUPS ============ */
.stat-group{
  margin-top:14px;padding:0;border:0;background:transparent;
}
/* section title = full-width bar, #3C5368 fill with white text,
   sentence case (only the first character capitalised) */
.stat-group h4{
  font-size:12.5px;font-weight:700;letter-spacing:.4px;text-transform:none;
  color:#fff;background:#3C5368;
  padding:8px 14px;margin:0;border:0;
}
/* the stat rows sit on their own #212A3E panel (values only, not the title).
   Padding keeps labels and values off the panel's edges. */
.stat-group .stat-grid{
  background:#212A3E;
  padding:8px 14px 10px;
}
/* sub-heading inside a merged section (e.g. Carrier Air Group) */
.stat-subhead{
  font-size:11px;font-weight:700;letter-spacing:.6px;
  color:#9fb6d4;background:transparent;
  padding:8px 0 3px;margin:0;
  text-transform:none;
}
.stat-subhead:first-child{padding-top:2px}
.stat-grid{display:flex;flex-direction:column;gap:2px}
.stat-pair{
  display:flex;align-items:baseline;gap:8px;
  padding:5px 0;font-size:13px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.stat-pair:last-child{border-bottom:0}
.stat-pair .lab{color:var(--mut);flex:0 0 auto;max-width:60%}
/* leader line: fills the gap between label and value */
.stat-pair .lead{
  flex:1 1 auto;min-width:12px;height:0;
  border-bottom:1px dotted rgba(255,255,255,.30);
  transform:translateY(-3px);
}
.st-right{margin-left:0;text-align:right;white-space:nowrap;display:inline-flex;align-items:baseline;gap:5px;justify-content:flex-end;flex:0 0 auto}
.st-val{color:#fff;font-variant-numeric:tabular-nums}
.st-val.up{color:#7cf2b6}
.st-val.down{color:#ff8f8f}
.st-base{color:var(--dim);font-style:normal;font-size:11px}
.stat-pair .na{color:var(--dim);font-size:11px}
.eq-hint{color:var(--dim);font-size:11px;margin-bottom:6px}

/* ============ EQUIP DROPDOWN ============ */
.eq-dd-wrap{position:fixed;inset:0;z-index:950}
.eq-dd-mask{position:absolute;inset:0;background:rgba(1,2,6,.62)}
.eq-dd-cap{
  position:relative;margin:8vh auto 0;max-width:360px;
  width:calc(100% - 32px);padding:10px 12px;
  background:var(--black);color:var(--mut);
  font-size:12px;letter-spacing:1.5px;text-transform:uppercase;
  border:1px solid var(--line);border-bottom:none;font-weight:700;
}
.eq-dd-list{
  position:relative;max-width:360px;margin:0 auto;
  width:calc(100% - 32px);
  background:var(--bg-2);border:1px solid var(--line);
  max-height:64vh;overflow-y:auto;padding:6px;
}
.eq-dd-empty{padding:18px;color:var(--mut);font-size:13px;text-align:center}
.eq-opt{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:transparent;border:none;padding:8px;color:#fff;
}
.eq-opt:hover{background:rgba(255,255,255,.06)}
.eq-opt.taken{opacity:.35;cursor:not-allowed}
.eq-opt.none{opacity:.8}
.dd-left{flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.dd-ic{width:26px;height:26px;object-fit:contain;display:block}
.dd-ic.slash{
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  font-size:18px;color:var(--mut);border:1px solid var(--line-soft);
}
.dd-txt{font-size:13px}

/* ====================== COMPARE ====================== */
/* + badge on each ship card */

/* tray — floats bottom center, hidden until something added */


/* compare full overlay (page-style), scrollable, dim scrim not needed on desktop */
.cmp-fulloverlay{
  display:none;position:fixed;inset:0;z-index:550;overflow-y:auto;
  background:#39415a;padding:20px 16px 90px;
  overscroll-behavior:contain;
  overscroll-behavior-y:contain;
  -webkit-overflow-scrolling:touch;
}
.cmp-fulloverlay.open{display:block}
.cmp-fulloverlay{max-width:1240px;margin:0 auto}
.cmp-head{max-width:1180px;margin:0 auto 8px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.cmp-head h2{font-size:clamp(19px,3vw,26px);font-weight:800}
.cmp-mini{border:1px solid var(--line-soft);background:transparent;color:#fff;padding:7px 12px;border-radius:0}
.cmp-mini:hover{border-color:var(--saber)}
/* the compare overlay's close button reuses .dl-close (fixed, top-right).
   It must NOT override that positioning, or it scrolls away with the
   content and ends up somewhere random. Only colour/behaviour is shared. */
.cq-cols{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cmp-col{background:rgba(0,0,0,.30);border:1px solid var(--line);padding:12px}
.cmp-shipname{font-size:17px;font-weight:800;color:#fff}
.cmp-shipmeta{font-size:12px;color:var(--mut);margin:2px 0 10px}
.cb-label{font-size:10px;letter-spacing:1.5px;color:var(--dim);text-transform:uppercase;margin-bottom:6px}

/* stats compare table */
.cq-stats{max-width:1180px;margin:24px auto 0}
.cmp-grouphead{font-size:12px;letter-spacing:2px;color:var(--saber);font-weight:800;margin:6px 2px}
.stat-group.cmp-grp{max-width:none}
.cmp-tbl{width:100%}
.cmp-trow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:4px 2px;border-top:1px solid var(--line);font-size:13px}
.cmp-trow:first-child{border-top:none}
.c-lab{color:var(--mut)}
.c-a,.c-b{text-align:right;color:#fff;font-variant-numeric:tabular-nums}
.cv.up{color:#7cf2b6}.cv.down{color:#ff8f8f}.cv.na{color:var(--dim)}
.cv-b{color:var(--dim);font-size:11px;font-style:normal}

/* compare equipment bars reuse .eq-bar/.eq-box from detail (2-col on small) */
.cb-bar{gap:6px}
@media (max-width:760px){ .cq-cols{grid-template-columns:1fr} }

/* hide compare tray until a ship has been chosen (still show + on cards) */

/* floating ship-name column header while the stat rows scroll */
.cq-pin{
  position:sticky;top:max(0px,env(safe-area-inset-top));z-index:15;
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;
  background:transparent;border:0;
}
.cq-pin span{padding:6px 10px;font-size:13px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cq-pin .pin-lab{content:"";padding:0}
.cq-pin .pin-a{color:#fff;text-align:center;background:#4b738c}
.cq-pin .pin-b{color:#fff;text-align:center;background:#724244}
/* the ship names inside the sticky bar follow the category colour */
.cq-pin .pin-a.cat-gold,      .cq-pin .pin-b.cat-gold      {color:#ffd479}
.cq-pin .pin-a.cat-black,     .cq-pin .pin-b.cat-black     {color:#c39bff}
.cq-pin .pin-a.cat-fictional, .cq-pin .pin-b.cat-fictional {color:#6fb3ff}
.cq-pin .pin-a.cat-silver,    .cq-pin .pin-b.cat-silver    {color:#fff}

/* compare slot dropdown sits ABOVE its own compare modal (#cmpFull=550) */
.eq-dd-wrap.cmp-picker{z-index:900}

/* hide the bottom compare tray while the single-ship detail sheet is open */

/* ====================== SEARCH BOX ====================== */
.searchbox{
  margin-top:14px;display:flex;align-items:center;gap:8px;
  background:rgba(0,0,0,.28);border:1px solid var(--line);border-radius:0;
  padding:6px 8px 6px 12px;max-width:520px;
}
.searchbox:focus-within{border-color:var(--saber);box-shadow:0 0 0 1px var(--saber)}
.search-ic{color:var(--dim);font-size:20px;line-height:1}
#shipSearch{
  flex:1;min-width:0;border:none;background:transparent;color:#fff;
  font-size:15px;outline:none;padding:4px 0;
}
#shipSearch::placeholder{color:rgba(255,255,255,.35)}
.search-clear{
  display:none;align-items:center;justify-content:center;width:24px;height:24px;
  border:none;background:transparent;color:var(--mut);font-size:18px;line-height:1;cursor:pointer;
}
.search-clear:hover{color:#fff}
/* remove default webkit clear/spinner that could double */
#shipSearch::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

/* ====================== COMPARE "CHANGE SHIP" ====================== */
.cmp-colhead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.cmp-change{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;
  padding:6px 10px;margin-top:2px;
  background:rgba(255,255,255,.05);border:1px solid var(--line-soft);color:#fff;font-size:12.5px;border-radius:0;
}
.cmp-change:hover{background:rgba(86,177,255,.16);border-color:var(--saber)}

/* the in-compare "search ship" dropdown header + input */
.eq-dd-search{
  position:relative;display:block;max-width:360px;margin:-1px auto 0;width:calc(100% - 32px);
  box-sizing:border-box;padding:9px 12px;
  background:var(--bg-2);color:#fff;border:1px solid var(--line);border-bottom:none;
  font-size:14px;outline:none;
}
.eq-dd-search:focus{border-color:var(--saber)}
.eq-dd-search + .eq-dd-list{border-top:none}

.cq-cols .cmp-col[data-slotref="0"] .cmp-shipname,
.cq-cols .cmp-col[data-slotref="1"] .cmp-shipname{box-shadow:none}

/* centered swap control (kept away from the fixed close button) */
.cmp-swapbar{max-width:1180px;margin:2px auto 4px;display:flex;justify-content:center}
.cmp-swapbar .cmp-mini{margin:0}

/* ====================== FOOTER (LAFFI style, wowsb content) ====================== */
.footer{width:100%;position:relative;background:#242424;border-top:1px solid rgba(255,255,255,.14);margin-top:auto}
.footer::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:#fff;opacity:.10}
.footer-top{max-width:1180px;margin:0 auto;padding:34px 22px 24px;text-align:center}
.footer-top h3{font-size:20px;color:#fff;letter-spacing:.6px;margin-bottom:6px}
.footer-top p{font-size:14px;color:var(--mut);max-width:500px;margin:0 auto;line-height:1.6}
.socials{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin:20px 0 18px}
.socials a{
  width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  color:var(--dim);background:rgba(255,255,255,.05);border:1px solid var(--line-soft);
  border-radius:6px;transition:all .12s ease;
}
.socials a:hover{color:#fff;border-color:var(--saber);background:#35507a;transform:translateY(-2px)}
.socials svg{width:19px;height:19px}
.contact{font-size:13px}
.contact strong{color:#fff}
.contact a{color:#3e8ed0;text-decoration:none}
.contact a:hover{color:#fff;text-decoration:underline}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:12px 20px;text-align:center;color:var(--dim);font-size:13px}

/* ====================== THEMED SCROLLBARS (no default white slider) ====================== */
html{scrollbar-color:#46547a #0d0f16;scrollbar-width:auto}
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-track{background:#0d0f16}
*::-webkit-scrollbar-thumb{background:#46547a;border:2px solid #0d0f16}
*::-webkit-scrollbar-thumb:hover{background:#c3f9fc}

/* ====================== COPY TOAST ====================== */
#toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);
  z-index:2000;display:flex;align-items:center;gap:8px;
  background:var(--black);color:#fff;border:1px solid var(--saber);
  padding:10px 16px;font-size:13.5px;border-radius:0;
  opacity:0;pointer-events:none;transition:opacity .18s ease,transform .18s ease;
  box-shadow:0 6px 18px rgba(0,0,0,.45);
}
#toast.show{opacity:1;transform:translate(-50%,0)}
#toast .dot{width:8px;height:8px;background:#3ed087}

/* ====================== TOTAL EQUIPMENT CHANGE ====================== */
.eq-total{
  background:rgba(0,0,0,.28);border:1px solid var(--line);
  border-left:3px solid var(--line-soft);
  padding:12px 14px;margin:12px 0 4px;max-width:820px;
}
.eq-total.up{border-left-color:#3ed087}
.eq-total.down{border-left-color:#ff5c66}
.eq-total.empty{color:var(--dim);font-size:13px;border-left-color:var(--line);text-align:center}
.te-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.te-title{font-size:13px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#fff}
.te-count{font-size:12px;color:var(--mut)}
.te-up{color:#3ed087;font-style:normal;font-weight:700}
.te-down{color:#ff5c66;font-style:normal;font-weight:700}
.te-chips{display:flex;flex-wrap:wrap;gap:6px}
.te-chip{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;padding:4px 9px;border:1px solid var(--line-soft);
  background:rgba(255,255,255,.03);color:var(--mut);
}
.te-chip b{font-weight:800}
.te-chip.up b{color:#3ed087}
.te-chip.down b{color:#ff5c66}

/* compare column: compact total change */
.cq-total{background:rgba(0,0,0,.30);border:1px solid var(--line);border-top:none;padding:9px 10px}
.cq-total.empty{color:var(--dim);font-size:12px;text-align:center}

/* aggregate total value headline */
.te-total{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;margin-bottom:10px;
  padding-bottom:10px;border-bottom:1px solid var(--line)}
.te-total-lab{font-size:11.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--saber)}
.te-total-val{font-size:22px;font-weight:800;color:#fff;line-height:1}
.te-total-val.up{color:#3ed087}
.te-total-val.down{color:#ff5c66}
.te-total-delta{font-size:13px;font-weight:700;color:var(--mut)}
.te-total-delta.up{color:#3ed087}
.te-total-delta.down{color:#ff5c66}
.te-total-delta em{color:var(--dim);font-style:normal;font-weight:400}
.eq-total-hint{font-size:12.5px;color:var(--dim)}

/* compare column total headline */

/* equipment dropdown: make taps register reliably on touch devices */
.eq-opt{touch-action:manipulation;cursor:pointer;-webkit-tap-highlight-color:rgba(86,177,255,.25)}
.eq-dd-list{touch-action:pan-y}
.eq-dd-mask{touch-action:none}

/* improved-equipment marker (red) */
.imp-tag{font-style:normal;font-size:9px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
  color:#ff6b6b;background:rgba(255,107,107,.12);border:1px solid rgba(255,107,107,.40);
  padding:0 4px;margin-left:4px;vertical-align:middle}
.eq-opt.imp .dd-txt{color:#ffb3b3}

/* ---- loadout bar ---- */
.lo-bar{margin:0 0 10px;padding:8px 10px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.08)}
.lo-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.lo-lab{font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:#9fb0cc}
.lo-sel{background:#2c3444;color:#e8eefc;border:1px solid rgba(255,255,255,.14);padding:6px 8px;font-size:12px;border-radius:0}
.lo-btn{background:transparent;color:#cfe0ff;border:1px solid rgba(255,255,255,.18);padding:6px 10px;font-size:12px;font-weight:700;cursor:pointer;border-radius:0}
.lo-btn:hover{border-color:var(--saber);color:var(--saber)}
.lo-quickrow{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.lo-quick{background:rgba(86,177,255,.10);color:#cfe4ff;border:1px solid rgba(86,177,255,.35);
  padding:5px 9px;font-size:11px;font-weight:700;cursor:pointer;border-radius:0}
.lo-quick:hover{background:rgba(86,177,255,.20);color:#fff}

/* loadout row inside a compare column */
.cmp-loadorrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0 2px}
.cmp-loadorrow .lo-quickrow{margin-top:0}
.cmp-losave{font-size:11px;padding:5px 9px}

/* saved-loadout chips: name loads, × deletes */
.lo-savedrow,.cmp-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cmp-chips{margin:6px 0 2px}
.lo-chip{display:inline-flex;align-items:stretch;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04)}
.lo-chip.fits{border-color:rgba(86,177,255,.45);background:rgba(86,177,255,.10)}
.lo-chip.nofit{opacity:.5}
.lo-chipname{background:transparent;border:0;color:#cfe4ff;font-size:11px;font-weight:700;
  padding:5px 7px;cursor:pointer;font-family:inherit}
.lo-chip.fits .lo-chipname:hover{color:#fff;background:rgba(86,177,255,.18)}
.lo-chipname.dis{cursor:default;color:#9fb0cc}
.lo-chipx{background:transparent;border:0;border-left:1px solid rgba(255,255,255,.16);
  color:#ff8b8b;font-size:13px;line-height:1;font-weight:800;padding:4px 7px;cursor:pointer;font-family:inherit}
.lo-chipx:hover{background:rgba(255,107,107,.22);color:#fff}

/* unload-all button */
.lo-btn.lo-clear{border-color:rgba(255,107,107,.40);color:#ffa8a8}
.lo-btn.lo-clear:hover{border-color:#ff6b6b;color:#fff;background:rgba(255,107,107,.16)}

/* build marker in the footer bottom line */
.footer-bottom .build{color:#7d8aa3;font-size:11px;letter-spacing:.6px;margin-left:6px;white-space:nowrap}

/* data source note under the intro */
.srcnote{margin:10px 0 0;font-size:12.5px;line-height:1.6;color:#9fb0cc;
  padding:7px 11px;background:rgba(0,0,0,.24);border-left:2px solid rgba(255,212,121,.55)}
.srcnote strong{color:#e8eefc}

/* data credit line in the footer */
.credit{margin:6px 0 0;font-size:12px;color:#9fb0cc}
.credit strong{color:#dbe6f7}

/* ---------- ship category colours ----------
   gold  = premium (金币船)
   black = premium (黑船)      -> purple
   fictional = 架空船          -> blue
   silver = tech tree (银币船) -> default white, no override
*/
.name.cat-gold,.dl-title.cat-gold{color:#ffd479}
.name.cat-black,.dl-title.cat-black{color:#c39bff}
.name.cat-fictional,.dl-title.cat-fictional{color:#6fb3ff}
.name.cat-silver,.dl-title.cat-silver{color:#fff}

/* keep the tier badge in step with the name colour */
.ship-card.cat-gold .tier{color:#ffd479;border-color:rgba(255,212,121,.55)}
.ship-card.cat-black .tier{color:#c39bff;border-color:rgba(195,155,255,.55)}
.ship-card.cat-fictional .tier{color:#6fb3ff;border-color:rgba(111,179,255,.55)}

/* faint category tint on the card edge so premium ships stand out at a glance */
.ship-card.cat-gold{box-shadow:inset 3px 0 0 rgba(255,212,121,.75)}
.ship-card.cat-black{box-shadow:inset 3px 0 0 rgba(195,155,255,.75)}
.ship-card.cat-fictional{box-shadow:inset 3px 0 0 rgba(111,179,255,.60)}

/* ---------- category colours: card name, detail title, compare names ---------- */

/* Type filter: icons only, no text label */
.fbtn.cat{gap:0;padding:8px 11px}
.fbtn.cat .ab{display:none}
/* the ship-type icons are small artwork, so show them larger than the
   default 20px filter glyph */
.fbtn.cat img{width:44px;height:44px}
@media (max-width:600px){
  .fbtn.cat{padding:7px 9px}
  .fbtn.tier, .fbtn.all-btn.tier{width:56px;height:52px}
  .fbtn.cat img{width:38px;height:38px}
}

/* category stripe removed from ship cards - colour lives on the tier badge
   and the ship name only */
.ship-card.cat-gold,
.ship-card.cat-black,
.ship-card.cat-fictional{box-shadow:none}

/* header subtitle contact link */
.sub-link{color:var(--saber);border-bottom:1px dotted var(--saber);text-decoration:none}
.sub-link:hover{color:#fff;border-bottom-color:#fff}

/* compare stat groups follow the same blue-bar layout as the detail panel */
/* match the ship-stats design: #3C5368 title bar, white text, sentence case,
   and the #212A3E value panel behind the rows */
.cmp-grp h4{
  background:#3C5368;color:#fff;
  font-size:12.5px;font-weight:700;letter-spacing:.4px;text-transform:none;
  padding:8px 14px;margin:0;border:0;
}
.cmp-grp .cmp-tbl{background:#212A3E;padding:8px 14px 10px}

/* author byline in the footer: sits directly under the heading so it is seen
   straight away without scrolling through the description */
.footer-top .byline{
  margin:2px auto 12px;font-size:13px;letter-spacing:.3px;color:#aab8d0;
  text-align:center;
}
.footer-top .byline strong{color:#ff76be;font-weight:800}
.footer-top .byline-ver{
  display:inline-block;margin-left:7px;padding:1px 6px;
  font-size:10.5px;font-weight:700;letter-spacing:.8px;color:#9fb0cc;
  border:1px solid rgba(159,176,204,.4);
}
/* the data-source credit reads as a footnote, quieter than the rest */
.footer-top .src-credit{
  margin-top:14px;padding-top:10px;font-size:12px;color:#93a3bd;
  border-top:1px solid rgba(255,255,255,.10);
}
.footer-top .src-credit strong{color:#c9d7ee}

.cmp-shipname.cat-gold     {color:#ffd479}
.cmp-shipname.cat-black    {color:#c39bff}
.cmp-shipname.cat-fictional{color:#6fb3ff}
.cmp-shipname.cat-silver   {color:#fff}

/* ====================== FILTER TOGGLE ======================
   Sits immediately to the right of the search box. Filters are visible by
   default on first visit; this button hides/shows them. */
.searchrow{
  display:flex;align-items:center;gap:10px;
  margin-top:14px;max-width:600px;
}
.searchrow .searchbox{margin-top:0;flex:1 1 auto;min-width:0}

.filter-toggle{
  flex:0 0 auto;
  width:46px;height:46px;padding:5px;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
  background:rgba(0,0,0,.28);
  border:1px solid var(--line);
  border-radius:0;
  transition:border-color .15s,background .15s,box-shadow .15s;
}
.filter-toggle img{
  width:100%;height:100%;object-fit:contain;display:block;
  opacity:.9;transition:opacity .15s;
}
.filter-toggle:hover{border-color:var(--saber);background:rgba(0,0,0,.45)}
.filter-toggle:hover img{opacity:1}
.filter-toggle:focus-visible{outline:2px solid var(--saber);outline-offset:2px}
/* when the filters are hidden the button reads as "off" */
.filter-toggle.collapsed{border-color:var(--saber);box-shadow:inset 0 0 0 1px var(--saber)}
.filter-toggle.collapsed img{opacity:.5}

/* hidden state for the filter panel */
.filters.collapsed{display:none}

/* a small badge on the count line telling you filters are hidden */
.filters-hidden-note{
  display:none;margin:0 0 10px;font-size:12px;color:var(--mut);
}
.filters-hidden-note.on{display:block}
.filters-hidden-note button{
  background:none;border:none;padding:0;cursor:pointer;
  color:var(--saber);font:inherit;text-decoration:underline;
}

@media (max-width:600px){
  .searchrow{max-width:none;gap:8px}
  .filter-toggle{width:42px;height:42px;padding:4px}
}

/* ============ LARGER ICONS, NO TEXT ============
   The Class and Nation rows showed a text label next to a small glyph.
   The labels are gone and the artwork is enlarged so it is legible. */
.fbtn.cls, .fbtn.nat{
  position:relative;
  padding:6px 8px;
  gap:0;
}
.fbtn.cls img{width:40px;height:40px}
.fbtn.nat img{width:52px;height:auto;border-radius:2px}
/* the nation flags are wider than tall, so cap the height too */
.fbtn.nat img{max-height:34px}

@media (max-width:600px){
  .fbtn.cls{padding:5px 7px}
  .fbtn.cls img{width:34px;height:34px}
  .fbtn.nat{padding:5px 7px}
  .fbtn.nat img{width:44px;max-height:29px}
}

/* ================= CIRCULAR COMPARE BUTTON =================
   First step of the compare system: the round "+" button.
     fill   : #363b4b
     border : #313746
   Pinned to the bottom-right, above the tray/overlays. */
.cmp-fab{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:620;                 /* above the compare overlay (550) */

  width:72px;height:72px;
  padding:0;
  display:inline-flex;align-items:center;justify-content:center;

  cursor:pointer;
  border-radius:50%;           /* the circle */
  background:#363b4b;          /* fill */
  border:0;                    /* no border */
  color:#e8eefc;               /* the "+" glyph */
  box-shadow:0 6px 18px rgba(0,0,0,.38);
  transition:background .15s,transform .15s,box-shadow .15s;

  /* Hidden until the reader scrolls down to the ship cards. It then slides
     up into place. Kept out of the way (and unclickable) while hidden. */
  opacity:0;
  visibility:hidden;
  transform:translateY(14px);
  transition:opacity .26s ease,transform .26s ease,
             background .15s,box-shadow .15s;
}
.cmp-fab.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
/* the mini compare panel follows the button: same slide, same show/hide.
   When no ship is selected it is compact (no tall empty slots). */
.cmp-panel{
  opacity:0;
  visibility:hidden;
  transform:translateY(14px);
  transition:opacity .26s ease,transform .26s ease;
}
.cmp-panel.show{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.cmp-fab.show:hover{
  background:#3d4356;
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,.46);
}
.cmp-fab:active{transform:translateY(0) scale(.96)}
.cmp-fab:focus-visible{outline:2px solid var(--saber);outline-offset:3px}

.cmp-fab-plus{
  width:26px;height:26px;display:block;
  transition:transform .18s;
}
.cmp-fab:hover .cmp-fab-plus{transform:rotate(90deg)}

@media (max-width:600px){
  .cmp-fab{right:14px;bottom:14px;width:64px;height:64px}
  .cmp-fab-plus{width:27px;height:27px}
}

/* ================= COMPARE PANEL =================
   Mobile-first: compact and narrow, sits above the round button on phones.
   Never taller than half the screen. */
.cmp-panel{
  position:fixed;
  right:14px;
  bottom:78px;                       /* clears the round button */
  z-index:615;
  width:196px;
  max-height:50vh;                   /* never cover more than half the screen */
  display:none;
  flex-direction:column;
  background:#363b4b;
  border:1px solid #313746;
  border-radius:0;
  box-shadow:0 8px 22px rgba(0,0,0,.45);
  overflow:hidden;
}
.cmp-panel.open{display:flex}

/* header: title + count on one line */
.cp-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:6px;padding:6px 8px 5px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.cp-title{font-size:11.5px;font-weight:700;letter-spacing:.3px;color:#e8eefc}
.cp-count{
  font-size:10.5px;font-weight:700;color:#c3f9fc;
  background:rgba(195,249,252,.10);
  border:1px solid rgba(195,249,252,.22);
  border-radius:0;padding:1px 6px;
}

/* selected ships */
.cp-list{padding:5px;display:flex;flex-direction:column;gap:4px;overflow-y:auto;flex:0 0 auto;min-height:0}
.cp-slot{
  display:flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
  border-radius:0;padding:5px 6px;
  min-width:0;
}
/* an empty slot is a slim placeholder, not a tall row */
.cp-slot.empty{opacity:.5;padding:2px 6px;min-height:0}
.cp-slot.empty .cp-name{font-size:10.5px;line-height:1.2}
.cp-flag{width:26px;height:15px;object-fit:cover;border-radius:0;flex:0 0 auto}
.cp-name{
  flex:1 1 auto;min-width:0;
  font-size:11.5px;font-weight:650;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cp-name.cat-gold{color:#ffd479}
.cp-name.cat-black{color:#c39bff}
.cp-name.cat-fictional{color:#6fb3ff}
.cp-x{
  flex:0 0 auto;width:17px;height:17px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  border-radius:0;color:#c9d7ee;font-size:12px;line-height:1;cursor:pointer;
}
.cp-x:hover{background:rgba(255,120,120,.22);border-color:rgba(255,120,120,.4);color:#fff}

/* actions: short buttons */
.cp-actions{display:flex;gap:5px;padding:6px 6px 6px;border-top:1px solid rgba(255,255,255,.07)}
.cp-clear,.cp-run{
  flex:1 1 0;padding:6px 4px;border-radius:0;
  font-size:11px;font-weight:700;cursor:pointer;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);color:#dbe4f3;
  transition:background .15s,border-color .15s,color .15s;
}
.cp-clear:hover{background:rgba(255,120,120,.18);border-color:rgba(255,120,120,.38);color:#fff}
.cp-run{
  background:rgba(195,249,252,.13);
  border-color:rgba(195,249,252,.35);color:#c3f9fc;
}
.cp-run:hover:not(:disabled){background:rgba(195,249,252,.22)}
.cp-run:disabled{opacity:.4;cursor:not-allowed}

/* ============ compare add-mode affordances ============ */
/* the round button reads as "active" while add-mode is on */
.cmp-fab.on{
  /* active (add-mode) state: a slightly lighter fill only.
     No border and no ring - the circle stays clean. */
  background:#3d4356;
  border:0;
  box-shadow:0 8px 22px rgba(0,0,0,.45);
}
.cmp-fab.on .cmp-fab-plus{transform:rotate(45deg)}
.cmp-fab.on:hover .cmp-fab-plus{transform:rotate(45deg)}

/* in add-mode the cards advertise that they can be tapped */
body.cmp-addmode .ship-card{cursor:crosshair}
body.cmp-addmode .ship-card:hover{border-color:rgba(195,249,252,.5)}

/* a ship already in the compare panel: blue ring + the ORIGINAL
   bottom-right green corner with a white tick (same as before). */
.ship-card.cmp-picked{
  border-color:var(--saber);
  box-shadow:0 0 0 1px var(--saber) inset,0 0 0 3px rgba(86,177,255,.18);
}
.ship-card.cmp-picked .corner{display:block}

/* ============ back-to-top button (ship + compare stats) ============
   Round-ish is NOT wanted: sharp rectangle. Fill #363b4b, white up arrow.
   Appears only once you have scrolled past the equipment section, and sits
   in the middle of the bottom of the screen. */
/* ============ BACK TO TOP ============
   Two presentations:
     .to-top        (front page)  - round button sitting beside the add button
     .to-top-cmp    (stats views) - no fill, no border, just a cyan double
                                    chevron pointing up
   Both keep the same show/hide behaviour wired in app.js. */
.to-top{
  position:fixed;
  /* mirror the add button so both centres sit on the same line by
     construction: same size, same bottom, shifted left */
  right:110px;
  bottom:22px;
  z-index:330;
  width:72px;height:72px;padding:0;
  display:none;align-items:center;justify-content:center;
  background:#363b4b;
  border:0;                    /* no border */
  border-radius:50%;           /* circle */
  color:#fff;
  cursor:pointer;
  opacity:0;
  transition:opacity .2s ease,background .15s,transform .2s ease;
}
.to-top.on{display:inline-flex;opacity:1}
.to-top:hover{background:#3d4356;transform:translateY(-2px)}
.to-top:focus-visible{outline:2px solid #c3f9fc;outline-offset:3px}
.to-top svg{width:30px;height:30px;display:block}
.to-top svg path{stroke:#c3f9fc;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;fill:none}

/* The stats back-to-top sits in the same place for BOTH stats views:
   centred at the bottom of the screen. No fill, no shape, just the mark. */
.to-top.chevron,
.to-top-cmp{
  /* bottom-centre of the screen, for BOTH stats views. right:auto is needed
     because the shared button inherits right:88px/110px from the front-page
     rules above. */
  left:0 !important;
  right:0 !important;
  margin-left:auto !important;
  margin-right:auto !important;
  transform:none !important;
  bottom:18px;
  width:auto;height:auto;
  min-width:0;
  padding:6px 4px;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  color:#c3f9fc;
  text-align:center;
}
.to-top.chevron.on,
.to-top-cmp.on{display:block;opacity:1}
.to-top.chevron:hover,
.to-top-cmp:hover{background:transparent;transform:translateY(-2px)}
.to-top.chevron svg,
.to-top-cmp svg{width:30px;height:30px;display:block;margin:0 auto}
.to-top.chevron svg path,
.to-top-cmp svg path{
  stroke:#c3f9fc;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
}
@media (max-width:600px){
  .to-top.chevron,
  .to-top-cmp{bottom:16px}
  .to-top.chevron svg,
  .to-top-cmp svg{width:27px;height:27px}
}
@media (max-width:600px){
  .to-top.chevron,
  .to-top-cmp{bottom:16px}
  .to-top.chevron svg,
  .to-top-cmp svg{width:27px;height:27px}
}

/* Phones: both front-page buttons grow to a comfortable touch target and
   stay level with each other (same size, same bottom). */
@media (max-width:600px){
  .to-top:not(.to-top-cmp){
    right:88px;
    bottom:14px;
    width:64px !important;
    height:64px !important;
  }
  .to-top svg{width:27px !important;height:27px !important}
}

/* The compare button also carries .to-top, so state its centring explicitly:
   left/right 0 + auto margins = dead centre, immune to the front-page rules
   that set right:88px. */
.to-top-cmp{
  left:0 !important;
  right:0 !important;
  margin-left:auto !important;
  margin-right:auto !important;
  transform:none !important;
}

/* ============ hide the floating controls inside the overlays ============
   The stats views cover the screen, so the add button and its compare panel
   have nothing to do there and would sit on top of the content. app.js puts
   .dl-open / .cmp-open on <body> whenever an overlay is showing. */
body.dl-open .cmp-fab,
body.dl-open .cmp-panel,
body.cmp-open .cmp-fab,
body.cmp-open .cmp-panel{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}
/* The shared #toTop is the back-to-top button for the SHIP STATS view, so it
   must stay visible there. Only the compare view hides it, because that view
   has its own button (#toTopCmp) rendered inside the overlay. */
body.cmp-open #toTop:not(.to-top-cmp){
  display:none !important;
}

/* ============ lock the page behind an open overlay ============
   The overlays are fixed and scroll on their own. Without this the page
   underneath can still scroll, so reaching the overlay's top or end let the
   homepage drift with it. app.js already puts .dl-open / .cmp-open on <body>
   whenever a stats view is showing, so we only need the styling.

   overflow:hidden is the part that actually stops the page; overscroll-behavior
   on the overlays (above) stops the gesture leaking at the edges. */
body.dl-open,
body.cmp-open{
  /* Pin the page while an overlay is open.
     `overflow:hidden` alone CLAMPS the scroll offset - opening the overlay
     snapped the page from its real position to the maximum, so the content
     behind jumped. Pinning with position:fixed at the saved offset keeps it
     exactly where it was; app.js sets `top` and restores on close. */
  position:fixed;
  left:0;right:0;
  width:100%;
  overflow:hidden;
  overscroll-behavior:none;
}

/* ============ the "All" button is the same size in every filter row ============
   Each section sizes its icons differently (Tier is text, Class 40px, Type 44px,
   Nation a 34px flag), so the All button came out 24/54/62/48px tall and the
   four rows looked ragged. Pin them all to one box. `!important` is needed
   because the per-section rules above are more specific. */
.fbtn.all-btn{
  width:64px;
  height:62px;
  padding:0 !important;
  gap:0;
  justify-content:center;
  align-items:center;
  font-weight:700;
  font-size:13.5px;
  line-height:1;
}
@media (max-width:720px){
  .fbtn.all-btn{width:56px;height:52px;font-size:13px}
}

/* ============ breathing room after the last ship card ============
   The back-to-top and add buttons hide as soon as the footer enters the
   viewport, which happened while the last row of cards was still on screen.
   Reserving extra space after the grid keeps those buttons available until the
   reader has genuinely scrolled past the ships.
   Sized in card-heights so it works for the single-column phone grid and the
   multi-column desktop grid alike. */
.grid{
  /* 5 rows of cards + their gaps, sized from the measured card height */
  padding-bottom:0;
  margin-bottom:calc(5 * 97px + 5 * 16px);
}
@media (max-width:720px){
  /* phones show one card per row, so 5 rows is 5 cards tall */
  .grid{margin-bottom:calc(5 * 93px + 5 * 13px)}
}

/* ============ ship art over the nation flag ============
   The card's left band holds two layers: the nation flag behind, the ship
   silhouette in front. Both are absolutely positioned inside .flag so the
   ship image sits exactly on top of the flag and they scale together.

   The flag keeps its right-hand fade; the ship art is NOT masked, so the
   silhouette stays crisp and reads as sitting in front of the flag. */
.flag .bgflag{
  position:absolute;inset:0;
}
.flag .shipart{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:contain;              /* never stretch the silhouette */
  object-position:center bottom;   /* sit it on the band's base */
  pointer-events:none;             /* clicks go to the card, not the image */
  z-index:1;                       /* above the flag */
  /* a soft shadow so pale hulls stay legible against a pale flag */
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.55));
}
@media (max-width:720px){
  .flag .shipart{object-position:center bottom}
}