/* ========= Evony War Room — Table UI (sitewide) ========= */
/* Load this AFTER site.css (site.css owns all color tokens) */

/* -------- Defaults (override per-table with inline CSS vars) -------- */
.ewr-table{
  /* Column widths */
  --ewr-rankW: 3ch;                          /* rank col (set 0 via .no-rank) */
  --ewr-nameW: clamp(15ch, 30vw, 28ch);      /* NAME col width (global policy) */
  --ewr-totalW: 7.5ch;                       /* total/score col */
  --ewr-statW: 6ch;                          /* each stat col */
  --cols: 5;                                 /* # of STAT cols (NOT counting rank+name+total) */

  /* Sticky styling */
  --ewr-sticky-bg: rgba(23,23,23,.98);
  --ewr-sticky-blur: 2px;
}

/* Helper: tables with NO rank column (e.g., compare.html) */
.ewr-table.no-rank{ --ewr-rankW: 0ch; }

/* -------- Base table look -------- */
.ewr-table{
  width:100%;
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:0;
  font-size:.95rem;
}
.ewr-table th,
.ewr-table td{
  padding:.5rem .625rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Column sizing */
.ewr-table .col-rank  { width: var(--ewr-rankW);  text-align:left;  }
.ewr-table .col-name  { width: var(--ewr-nameW);  text-align:left;  }
.ewr-table .col-total { width: var(--ewr-totalW); text-align:center; }
.ewr-table .col-stat  { width: var(--ewr-statW);  text-align:center; }

/* Rank column: never ellipsize, use tabular numerals for alignment */
.ewr-table th.col-rank,
.ewr-table td.col-rank{
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  font-variant-numeric: tabular-nums; /* nice 1..50 alignment */
}

/* Mobile: give rank enough room for two digits (and future 3-digit) */
@media (max-width: 700px){
  .ewr-table { --ewr-rankW: 5ch; } /* was 3ch */
}


/* Ensure enough intrinsic width so horizontal scroll kicks in */
.ewr-table{
  min-width: calc(
    var(--ewr-rankW) +
    var(--ewr-nameW) +
    var(--ewr-totalW) +
    (var(--cols) * var(--ewr-statW)) +
    6ch /* breathing room */
  );
}

/* -------- Sticky behavior -------- */
/* Make header sticky on all pages (unified rule) */
.ewr-table thead th{
  position: sticky;
  top: 0;
  z-index: 6; /* above body cells */
  background-color: var(--ewr-sticky-bg); /* base layer lives here */
  backdrop-filter: blur(var(--ewr-sticky-blur));
}

/* Sticky first columns (opt-in by class) */
.ewr-table.sticky-cols th,
.ewr-table.sticky-cols td{
  position: static;
  background: transparent;
  backdrop-filter: none;
  z-index: auto;
}
.ewr-table.sticky-cols th.col-rank,
.ewr-table.sticky-cols td.col-rank{
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: var(--ewr-sticky-bg);
  backdrop-filter: blur(var(--ewr-sticky-blur));
}
.ewr-table.sticky-cols.has-rank th.col-name,
.ewr-table.sticky-cols.has-rank td.col-name{
  position: sticky;
  left: var(--ewr-rankW);
  z-index: 4;
  background-color: var(--ewr-sticky-bg);
  backdrop-filter: blur(var(--ewr-sticky-blur));
}

/* Name-only stickiness (use on compare.html) */
.ewr-table.sticky-name-only th.col-name,
.ewr-table.sticky-name-only td.col-name{
  position: sticky;
  left: 0;
  z-index: 5;
  background-color: var(--ewr-sticky-bg);
  backdrop-filter: blur(var(--ewr-sticky-blur));
}

/* Edge treatment so scrolled cells visually disappear under the sticky name */
.ewr-table th.col-name,
.ewr-table td.col-name{
  box-shadow:
    8px 0 12px -8px rgba(0,0,0,.6) inset,
    1px 0 0 rgba(255,255,255,.08) inset;
}

/* -------- Vertical stat headers (read bottom->top) -------- */
.ewr-table .vhead{
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl; /* iOS Safari */
  transform: rotate(180deg); /* IMPORTANT: header backgrounds appear mirrored */
  text-orientation: mixed;
  line-height: 1.1;
  text-align: center;
}
@media (max-width:640px){
  .ewr-table .vhead{ font-size:.9rem; }
}

/* -------- Zebra + hover (stronger, uses background-color to preserve column tints) -------- */
.ewr-table tbody tr:nth-child(odd)  td{ background-color: rgba(255,255,255,.09);  } /* was .03  */
.ewr-table tbody tr:nth-child(even) td{ background-color: rgba(255,255,255,.045); } /* was .015 */
.ewr-table tbody tr:hover td{              background-color: rgba(255,255,255,.15); } /* was .05  */


/* -------- Scroll container + drag affordance -------- */
.ewr-scroll-x{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  cursor: grab;
}
.ewr-scroll-x.dragging{ cursor: grabbing; }

/* Optional: prettier scrollbar */
.ewr-scroll-x::-webkit-scrollbar{ height:12px; }
.ewr-scroll-x::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.2); border-radius:8px; }
.ewr-scroll-x::-webkit-scrollbar-track{ background:rgba(255,255,255,.06); }

/* -------- Soft copy prevention (opt-in) -------- */
.no-copy, .no-copy *{
  user-select:none;
  -webkit-user-select:none;       /* Safari/iOS */
  -ms-user-select:none;           /* old Edge */
  -webkit-touch-callout:none;     /* iOS copy/lookup popup */
}
.ewr-table.no-copy ::selection{ background:transparent; }

/* mobile names column 15% shorter */
@media (max-width: 640px){
  .ewr-table{ --ewr-nameW: clamp(16ch, 38vw, 30ch); }
}

/* ================== Column theming for headers & cells ======================= */
/* Uses tokens from site.css:
   --ewr-col-*-base, --ewr-col-*-muted, --ewr-col-*-dark,
   --ewr-col-debuff, --ewr-col-debuff-dark, --ewr-col-hint-alpha,
   --ewr-head-class-tint, --ewr-head-black-alpha, --ewr-head-black-start,
   --ewr-debuff-class-tint, --ewr-debuff-pink-tint,
   --ewr-debuff-head-class-tint, --ewr-debuff-head-pink-tint
   Classes: ground | mounted | ranged | siege | march | rallycap
*/

/* --- Headers (BUFF): class-dark tint → black tail (appears left→right) ------ */
/* NOTE: headers are rotated 180° via .vhead, so we use 'to left' for visual L→R */
.ewr-table thead th[data-class="ground"]:not(.is-debuff){
  background-image:
    linear-gradient(to right,
      color-mix(in lab, var(--ewr-col-ground-dark) var(--ewr-head-class-tint, 42%), transparent),
      transparent
    ),
    linear-gradient(to right,
      transparent var(--ewr-head-black-start, 82%),
      rgba(0,0,0,var(--ewr-head-black-alpha, .22))
    );
}
.ewr-table thead th[data-class="mounted"]:not(.is-debuff){
  background-image:
    linear-gradient(to right,
      color-mix(in lab, var(--ewr-col-mounted-dark) var(--ewr-head-class-tint, 42%), transparent),
      transparent
    ),
    linear-gradient(to right,
      transparent var(--ewr-head-black-start, 82%),
      rgba(0,0,0,var(--ewr-head-black-alpha, .22))
    );
}
.ewr-table thead th[data-class="ranged"]:not(.is-debuff){
  background-image:
    linear-gradient(to right,
      color-mix(in lab, var(--ewr-col-ranged-dark) var(--ewr-head-class-tint, 42%), transparent),
      transparent
    ),
    linear-gradient(to right,
      transparent var(--ewr-head-black-start, 82%),
      rgba(0,0,0,var(--ewr-head-black-alpha, .22))
    );
}
.ewr-table thead th[data-class="siege"]:not(.is-debuff){
  background-image:
    linear-gradient(to right,
      color-mix(in lab, var(--ewr-col-siege-dark) var(--ewr-head-class-tint, 42%), transparent),
      transparent
    ),
    linear-gradient(to right,
      transparent var(--ewr-head-black-start, 82%),
      rgba(0,0,0,var(--ewr-head-black-alpha, .22))
    );
}
.ewr-table thead th[data-class="march"]:not(.is-debuff),
.ewr-table thead th[data-class="rallycap"]:not(.is-debuff){
  background-image:
    linear-gradient(to right,
      color-mix(in lab, var(--ewr-col-march-dark) var(--ewr-head-class-tint, 42%), transparent),
      transparent
    ),
    linear-gradient(to right,
      transparent var(--ewr-head-black-start, 82%),
      rgba(0,0,0,var(--ewr-head-black-alpha, .22))
    );
}

/* --- Headers (DEBUFF/ENEMY): class → dark pink, with black tail -------------- */
.ewr-table thead th.is-debuff[data-class="ground"]{
  background-image:
    linear-gradient(to right,
      color-mix(in lab,
        var(--ewr-col-ground-debuff-base, var(--ewr-col-ground-dark))
        var(--ewr-debuff-head-class-tint, var(--ewr-debuff-class-tint, 30%)), transparent),
      color-mix(in lab,
        var(--ewr-col-debuff-dark)
        var(--ewr-debuff-head-pink-tint,  var(--ewr-debuff-pink-tint, 70%)),  transparent)
    ),
    linear-gradient(to right,
      transparent var(--ewr-head-black-start, 82%),
      rgba(0,0,0,var(--ewr-head-black-alpha, .22))
    );
}
.ewr-table thead th.is-debuff[data-class="mounted"]{
  background-image:
    linear-gradient(to right,
      color-mix(in lab,
        var(--ewr-col-mounted-debuff-base, var(--ewr-col-mounted-dark))
        var(--ewr-debuff-head-class-tint, var(--ewr-debuff-class-tint, 30%)), transparent),
      color-mix(in lab,
        var(--ewr-col-debuff-dark)
        var(--ewr-debuff-head-pink-tint,  var(--ewr-debuff-pink-tint, 70%)),  transparent)
    ),
    linear-gradient(to right,
      transparent var(--ewr-head-black-start, 82%),
      rgba(0,0,0,var(--ewr-head-black-alpha, .22))
    );
}
.ewr-table thead th.is-debuff[data-class="ranged"]{
  background-image:
    linear-gradient(to right,
      color-mix(in lab,
        var(--ewr-col-ranged-debuff-base, var(--ewr-col-ranged-dark))
        var(--ewr-debuff-head-class-tint, var(--ewr-debuff-class-tint, 30%)), transparent),
      color-mix(in lab,
        var(--ewr-col-debuff-dark)
        var(--ewr-debuff-head-pink-tint,  var(--ewr-debuff-pink-tint, 70%)),  transparent)
    ),
    linear-gradient(to right,
      transparent var(--ewr-head-black-start, 82%),
      rgba(0,0,0,var(--ewr-head-black-alpha, .22))
    );
}
.ewr-table thead th.is-debuff[data-class="siege"]{
  background-image:
    linear-gradient(to right,
      color-mix(in lab,
        var(--ewr-col-siege-debuff-base, var(--ewr-col-siege-dark))
        var(--ewr-debuff-head-class-tint, var(--ewr-debuff-class-tint, 30%)), transparent),
      color-mix(in lab,
        var(--ewr-col-debuff-dark)
        var(--ewr-debuff-head-pink-tint,  var(--ewr-debuff-pink-tint, 70%)),  transparent)
    ),
    linear-gradient(to right,
      transparent var(--ewr-head-black-start, 82%),
      rgba(0,0,0,var(--ewr-head-black-alpha, .22))
    );
}
.ewr-table thead th.is-debuff[data-class="march"],
.ewr-table thead th.is-debuff[data-class="rallycap"]{
  background-image:
    linear-gradient(to right,
      color-mix(in lab,
        var(--ewr-col-march-debuff-base, var(--ewr-col-march-dark))
        var(--ewr-debuff-head-class-tint, var(--ewr-debuff-class-tint, 30%)), transparent),
      color-mix(in lab,
        var(--ewr-col-debuff-dark)
        var(--ewr-debuff-head-pink-tint,  var(--ewr-debuff-pink-tint, 70%)),  transparent)
    ),
    linear-gradient(to right,
      transparent var(--ewr-head-black-start, 82%),
      rgba(0,0,0,var(--ewr-head-black-alpha, .22))
    );
}

/* --- Body cells (BUFF): subtle class hint from left edge --------------------- */
.ewr-table td[data-class="ground"]:not(.is-debuff){
  background-image: linear-gradient(to right,
    color-mix(in lab, var(--ewr-col-ground-base)  calc(var(--ewr-col-hint-alpha, .12) * 100%), transparent),
    transparent
  );
}
.ewr-table td[data-class="mounted"]:not(.is-debuff){
  background-image: linear-gradient(to right,
    color-mix(in lab, var(--ewr-col-mounted-base) calc(var(--ewr-col-hint-alpha, .12) * 100%), transparent),
    transparent
  );
}
.ewr-table td[data-class="ranged"]:not(.is-debuff){
  background-image: linear-gradient(to right,
    color-mix(in lab, var(--ewr-col-ranged-base)  calc(var(--ewr-col-hint-alpha, .12) * 100%), transparent),
    transparent
  );
}
.ewr-table td[data-class="siege"]:not(.is-debuff){
  background-image: linear-gradient(to right,
    color-mix(in lab, var(--ewr-col-siege-base)   calc(var(--ewr-col-hint-alpha, .12) * 100%), transparent),
    transparent
  );
}
.ewr-table td[data-class="march"]:not(.is-debuff),
.ewr-table td[data-class="rallycap"]:not(.is-debuff){
  background-image: linear-gradient(to right,
    color-mix(in lab, var(--ewr-col-march-base)   calc(var(--ewr-col-hint-alpha, .12) * 100%), transparent),
    transparent
  );
}

/* --- Body cells (DEBUFF): class hint → pink dominant (tunables with fallback) */
.ewr-table td.is-debuff[data-class="ground"]{
  background-image: linear-gradient(to right,
    color-mix(in lab, var(--ewr-col-ground-debuff-base,  var(--ewr-col-ground-dark))  var(--ewr-debuff-class-tint, 30%), transparent),
    color-mix(in lab, var(--ewr-col-debuff-dark)                                       var(--ewr-debuff-pink-tint,  70%), transparent)
  ) !important;
}
.ewr-table td.is-debuff[data-class="mounted"]{
  background-image: linear-gradient(to right,
    color-mix(in lab, var(--ewr-col-mounted-debuff-base, var(--ewr-col-mounted-dark)) var(--ewr-debuff-class-tint, 30%), transparent),
    color-mix(in lab, var(--ewr-col-debuff-dark)                                       var(--ewr-debuff-pink-tint,  70%), transparent)
  ) !important;
}
.ewr-table td.is-debuff[data-class="ranged"]{
  background-image: linear-gradient(to right,
    color-mix(in lab, var(--ewr-col-ranged-debuff-base,  var(--ewr-col-ranged-dark))  var(--ewr-debuff-class-tint, 30%), transparent),
    color-mix(in lab, var(--ewr-col-debuff-dark)                                       var(--ewr-debuff-pink-tint,  70%), transparent)
  ) !important;
}
.ewr-table td.is-debuff[data-class="siege"]{
  background-image: linear-gradient(to right,
    color-mix(in lab, var(--ewr-col-siege-debuff-base,   var(--ewr-col-siege-dark))   var(--ewr-debuff-class-tint, 30%), transparent),
    color-mix(in lab, var(--ewr-col-debuff-dark)                                       var(--ewr-debuff-pink-tint,  70%), transparent)
  ) !important;
}
.ewr-table td.is-debuff[data-class="march"],
.ewr-table td.is-debuff[data-class="rallycap"]{
  background-image: linear-gradient(to right,
    color-mix(in lab, var(--ewr-col-march-debuff-base,   var(--ewr-col-march-dark))   var(--ewr-debuff-class-tint, 30%), transparent),
    color-mix(in lab, var(--ewr-col-debuff-dark)                                       var(--ewr-debuff-pink-tint,  70%), transparent)
  ) !important;
}

/* --- Legibility & stacking --------------------------------------------------- */
/* Keep header text white over any gradient background */
.ewr-table thead th[data-class]{
  color:#fff !important;
  text-shadow:0 1px 0 rgba(0,0,0,0.35);
}
.ewr-table th, .ewr-table td{
  background-repeat:no-repeat;
  background-blend-mode:normal;
}

/* ---------- iOS-safe vertical labels for stat headers ---------- */
th .vlabel {
  display: inline-block;
  writing-mode: vertical-rl;    /* vertical top→bottom */
  text-orientation: mixed;      /* keep Latin upright */
  transform: none !important;   /* neutralize any inherited flips */
  line-height: 1.1;
  white-space: nowrap;
}

/* Ensure the <th> itself doesn’t flip its children */
th.stat, th.is-buff, th.is-debuff {
  transform: none !important;
}

/* WebKit-specific belt-and-suspenders */
@supports (-webkit-hyphens: none) and (not (hyphens: none)) {
  th .vlabel { transform: none !important; }
}

/* Keep the Name header (2nd column) horizontal */
.ewr-table thead th.col-name,
.ewr-table thead th:nth-child(2) {
  writing-mode: horizontal-tb !important;
  text-orientation: initial !important;
  transform: none !important;
  white-space: nowrap;
}

/* Vertical labels apply ONLY to stat/total headers that have .vlabel */
.ewr-table thead th.vhead .vlabel,
.ewr-table thead th.col-total .vlabel,
.ewr-table thead th.col-stat .vlabel {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: none;
  line-height: 1.1;
  white-space: nowrap;
}

/* Subtle tooltip cue on numeric cells (pairs + singles) */
.ewr-table td.col-stat[title] {
  text-decoration: underline dotted;
  text-underline-offset: .15em;
  text-decoration-thickness: .06em;
  text-decoration-color: rgba(255,255,255,.35);
}

/* Expand the dotted-underline cue to every table's stat cell with a tooltip */
.ewr-table td.col-stat[title],
.ewr-table td.col-total[title] {
  text-decoration: underline dotted;
  text-underline-offset: .15em;
  text-decoration-thickness: .06em;
  text-decoration-color: rgba(255,255,255,.35);
}

/* Mobile tooltip bubble (shown on tap) */
.ewr-tip {
  position: fixed;
  z-index: 9999;
  max-width: min(80vw, 28rem);
  padding: .5rem .6rem;
  border-radius: .6rem;
  font-size: .85rem;
  line-height: 1.2;
  color: #fff;
  background: rgba(17,17,17,.96);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}

.ewr-tip .ewr-tip-h { display:block; font-weight:700; margin-bottom:.15rem; opacity:.95; }
.ewr-tip .ewr-tip-b { display:block; opacity:.95; }

/* little arrow */
.ewr-tip::after{
  content:"";
  position:absolute;
  left:50%;
  width:10px; height:10px;
  background: inherit;
  border-left: inherit;
  border-top: inherit;
  transform: translateX(-50%) rotate(45deg);
}
.ewr-tip.is-above::after{ bottom:-6px; }
.ewr-tip.is-below::after{ top:-6px; }

/* Helps avoid double-tap zoom jank on iOS */
.ewr-table td[title]{ touch-action: manipulation; }


/* Safety: if any global rule targeted all header vlabels, neutralize on Name */
.ewr-table thead th.col-name .vlabel {
  writing-mode: horizontal-tb !important;
  text-orientation: initial !important;
  transform: none !important;
}