/* ========================================================================== Evony War Room – site.css Purpose: Single source of truth for theme tokens, layout utilities, stat-selection blocks (Buffs/Debuffs), buttons, and footer. HOW TO TUNE (quick knobs): - Stat block sizes (Buffs/Debuffs): --stat-* variables (see §0 and §2) - Compute button size: --compute-* variables (see §0 and §3) - Footer height/fade/image: --footer-* variables (see §0 and §5) ========================================================================== */ /* ========== 0) GLOBAL TOKENS & KNOBS (edit these first) =================== */ :root{ /* ---- Theme colors (safe to tweak) ---- */ --bg:#171717; /* page background */ --text:#fff; /* default text color */ --muted:rgba(255,255,255,.7); --border:rgba(255,255,255,.10); --card:rgba(255,255,255,.04); --cardBorder:rgba(255,255,255,.08); --stickyBg:rgba(23,23,23,.98); /* sticky table/headers background */ --blue:#3b82f6; /* ---- Class hues (used by chips & blends) ---- */ --ground:#3a5c3a; /* green */ --mounted:#5c432c; /* brown */ --range:#2c3e5c; /* blue */ --siege:#4a4a4a; /* steel */ --defense:#b35c2c; /* orange for Other/March/RallyCap */ /* Debuff accent baseline (soft pink family) */ --debuff-pink: rgba(255,111,163,.34); /* (Convenience aliases some components expect) */ --ewr-col-debuff: var(--debuff-pink); --ewr-col-debuff-dark: color-mix(in lab, var(--debuff-pink), black 32%); /* ---- TABLE TINT KNOBS (headers/body backgrounds in ewr-tables.css) ---- */ /* Class base hues (match chips) */ --ewr-col-ground-base: var(--ground); --ewr-col-mounted-base: var(--mounted); --ewr-col-ranged-base: var(--range); --ewr-col-siege-base: var(--siege); --ewr-col-defense-base: var(--defense); --ewr-col-march-base: var(--defense); --ewr-col-mixed-base: #7c5ea8; /* Muted/Dark variants (used in header gradients and debuff blends) */ --ewr-col-ground-muted: color-mix(in lab, var(--ground), black 20%); --ewr-col-mounted-muted: color-mix(in lab, var(--mounted), black 18%); --ewr-col-ranged-muted: color-mix(in lab, var(--range), black 18%); --ewr-col-siege-muted: color-mix(in lab, var(--siege), black 18%); --ewr-col-march-muted: color-mix(in lab, var(--defense), black 18%); --ewr-col-ground-dark: color-mix(in lab, var(--ground), black 35%); --ewr-col-mounted-dark: color-mix(in lab, var(--mounted), black 35%); --ewr-col-ranged-dark: color-mix(in lab, var(--range), black 35%); --ewr-col-siege-dark: color-mix(in lab, var(--siege), black 35%); --ewr-col-march-dark: color-mix(in lab, var(--defense), black 35%); /* Header gradient strength & black-tail */ --ewr-head-class-tint: 81%; /* more = stronger class tint in header left */ --ewr-head-black-alpha: 0.22; /* right-edge black darkness */ --ewr-head-black-start: 82%; /* where black fade begins */ /* Body cell hint (subtle column stripe) */ --ewr-col-hint-alpha: .30; /* lower = more subtle */ /* Debuff column tint split (data cells) — pick a balance */ --ewr-debuff-class-tint: 70%; /* class hue portion (higher = more class) */ --ewr-debuff-pink-tint: 30%; /* pink portion (higher = pinker) */ /* Debuff header tint split (row 1) */ --ewr-debuff-head-class-tint: 81%; --ewr-debuff-head-pink-tint: 18%; /* Choose base tone for debuff blends */ --ewr-col-ground-debuff-base: var(--ewr-col-ground-muted); --ewr-col-mounted-debuff-base: var(--ewr-col-mounted-muted); --ewr-col-ranged-debuff-base: var(--ewr-col-ranged-muted); --ewr-col-siege-debuff-base: var(--ewr-col-siege-muted); --ewr-col-march-debuff-base: var(--ewr-col-march-muted); --ewr-col-rallycap-debuff-base: var(--ewr-col-march-muted); /* Some themes/components (e.g., older table styles) reference these directly */ --ewr-col-ground: #3a5c3a; --ewr-col-mounted: #5c432c; --ewr-col-ranged: #2c3e5c; --ewr-col-siege: #4a4a4a; --ewr-col-march: #b35c2c; --ewr-col-rallycap: #b35c2c; /* ---- STAT-BLOCK SIZE KNOBS (Buffs/Debuffs) ----------------------------- Change these to affect BOTH pages at once. You can override per block with .stat-compact or .stat-lg (see §2), or per page (e.g., body.poweruser). --------------------------------------------------------------------- */ --stat-title-fs: clamp(1.25rem, 2.4vw, 1.6rem); /* “Buffs/Debuffs” heading */ --stat-chip-fs: 1.5rem; /* ATK/DEF/HP chip text */ --stat-chip-px: .80rem; /* chip horizontal padding */ --stat-chip-py: .54rem; /* chip vertical padding */ --stat-row-gap-x: .60rem; /* spacing between chips */ --stat-row-gap-y: .50rem; /* spacing between rows */ --stat-controls-gap:.60rem; /* space: title ↔ “All …” */ --stat-label-width: 20.5rem; /* width of row title col */ /* ---- COMPUTE BUTTON KNOBS (both pages) -------------------------------- */ --compute-fs: clamp(1.05rem, 1.1vw + 1rem, 1.35rem); /* font-size */ --compute-px: 2.5rem; /* x padding */ --compute-py: 1.25rem; /* y padding */ --compute-radius: 1rem; /* corners */ /* ---- FOOTER KNOBS ----------------------------------------------------- */ --footer-art-url: url("../images/footer-bg.webp"); /* bg image */ --footer-h: 400px; /* min-height */ --footer-fade-top-start: 0%; /* fade start */ --footer-fade-top-end: 28%; /* fade end */ } /* ========================================================================== 1) BASE ELEMENTS & UTILITIES ========================================================================== */ body{ background:var(--bg); color:var(--text); font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; } header, header nav{ position:relative; z-index:20; } /* Dimensional button utility (used by scenario tiles, compute, CTAs) */ .btn-dim{ --btn:#444; --btn-dark: color-mix(in srgb, var(--btn), black 14%); --btn-light: color-mix(in srgb, var(--btn), white 10%); background: linear-gradient(90deg, var(--btn-dark), var(--btn-light)); border:1px solid rgba(255,255,255,.18); position:relative; overflow:hidden; color:#fff; } .btn-dim::after{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(120% 100% at 0% 0%, rgba(255,255,255,.14), rgba(255,255,255,0) 60%), linear-gradient(to bottom, rgba(255,255,255,.05), rgba(255,255,255,0) 45%); mix-blend-mode:screen; } /* Scenario tiles */ .scenario-btn{ display:block; width:100%; border-radius:1rem; padding:1.5rem; text-align:center; font-size:1.25rem; font-weight:600; color:#fff; box-shadow:0 6px 16px rgba(0,0,0,.25); outline:1px solid rgba(255,255,255,.06); transition:transform .15s,filter .15s,box-shadow .15s; position:relative; overflow:hidden; } .scenario-btn:hover{ transform:translateY(-2px); filter:brightness(1.06); box-shadow:0 12px 28px rgba(0,0,0,.35) } .scenario-btn.active{ outline:2px solid rgba(255,255,255,.6) } .scenario-btn::after{ content:""; position:absolute; inset:0; pointer-events:none; background: radial-gradient(120% 100% at 0% 0%, rgba(255,255,255,.14), rgba(255,255,255,0) 60%), linear-gradient(to bottom, rgba(255,255,255,.05), rgba(255,255,255,0) 45%); mix-blend-mode:screen; } .scenario-sub{ display:block; margin-top:.25rem; font-size:.875rem; line-height:1.1; font-weight:400; color:rgba(255,255,255,.9) } .scenario-attack { --btn:#5c2c2c; } .scenario-defend { --btn:#2c3e5c; } .scenario-reinforceC { --btn:#4b3a5c; } .scenario-reinforceB { --btn:#2c5c3a; } .scenario-outcity { --btn:#5c432c; } .scenario-custom { --btn:#5c3a5c; } .scenario-power { --btn:#8c7c3a; } /* Class dropdown chips */ .dd-item{ display:block; padding:.5rem .75rem; border-radius:.65rem; font-weight:600; color:#fff; transition:transform .15s, filter .15s; } .dd-item:hover{ transform:translateX(1px); filter:brightness(1.08); } .dd-item.active{ outline:2px solid rgba(255,255,255,.7); } .title-chip{ border:1px solid rgba(255,255,255,.15); border-radius:9999px; padding:.35rem .65rem; } .chip-ground { --btn:#3a5c3a; } .chip-mounted { --btn:#5c432c; } .chip-range { --btn:#2c3e5c; } .chip-siege { --btn:#4a4a4a; } .chip-defense { --btn:#b35c2c; } .chip-debuff { --btn: var(--debuff-pink); } .chip-mixed { --btn: #7c5ea8; /* muted violet */ } /* Class dropdown color hooks (pre-JS paint for the items) */ .class-ground { --btn: var(--ewr-col-ground-base, #3a5c3a); } .class-mounted { --btn: var(--ewr-col-mounted-base, #5c432c); } .class-range { --btn: var(--ewr-col-ranged-base, #2c3e5c); } .class-siege { --btn: var(--ewr-col-siege-base, #4a4a4a); } /* These two rely on tokens we added earlier */ .class-defense { --btn: var(--ewr-col-defense-base, #b35c2c); } .class-debuff { --btn: var(--debuff-pink); } /* unified muted pink */ .class-mixed { --btn: var(--ewr-col-mixed-base, #7c5ea8); } /* muted violet fallback */ /* Home page category tile hues (reuse .btn-dim) */ .scenario-ground { --btn:#3a5c3a; } .scenario-mounted { --btn:#5c432c; } .scenario-range { --btn:#2c3e5c; } .scenario-siege { --btn:#4a4a4a; } .scenario-defense { --btn:#b35c2c; } .scenario-debuff { --btn:#2c7c7c; } .cta-narrow { max-width: 520px; display:block; margin-inline:auto; } /* === Centered page wrapper (desktop) === */ :root{ /* tune these if you want the site narrower/wider */ --page-max: clamp(960px, 88vw, 1280px); --page-pad: clamp(16px, 3vw, 32px); } /* drop this around your main page content */ .page-wrap{ max-width: var(--page-max); margin-inline: auto; /* centers the block */ padding-inline: var(--page-pad); } /* If you have a hero or a full-bleed section, opt-in to edge-to-edge */ .page-wrap.wide{ max-width: none; padding-inline: 0; } /* Keep our mobile “no overflow” safety working inside the wrapper */ .page-wrap, .page-wrap *{ min-width: 0; } .buff-matrix th:not(:first-child), .buff-matrix td:not(:first-child) { text-align: center; } .buff-matrix th:first-child, .buff-matrix td:first-child { text-align: left; } /* ========================================================================== 2) STAT SELECTION (Buffs & Debuffs) — DROP-IN REPLACEMENT - No :has() selectors (better Firefox/mobile support) - Header row centered via `.row-head` - All sizes/spacing use the --stat-* knobs from :root ========================================================================== */ /* Per-row color variable mapping (Buffs & Debuffs share the same hue) */ .row-wrap[data-row="Ground"], .row-wrap[data-row="EnemyGround"] { --row: var(--ground); } .row-wrap[data-row="Cav"], .row-wrap[data-row="EnemyCav"] { --row: var(--mounted); } .row-wrap[data-row="Range"], .row-wrap[data-row="EnemyRange"] { --row: var(--range); } .row-wrap[data-row="Siege"], .row-wrap[data-row="EnemySiege"] { --row: var(--siege); } .row-wrap[data-row="Other"] { --row: var(--defense); } /* Base chip styles (row title, stat chips, section “All …” chip) */ .row-label, .stat-chip, .all-chip{ display:inline-flex; align-items:center; gap:.45rem; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:.6rem; padding: var(--stat-chip-py) var(--stat-chip-px); /* knob */ font-size: var(--stat-chip-fs); /* knob */ color:#fff; cursor:pointer; user-select:none; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, filter .15s ease; } /* Subtle class-colored outline on row titles */ .row-wrap .row-label{ border-color: color-mix(in srgb, var(--row), rgba(255,255,255,.22) 60%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--row), transparent 75%) inset; } /* Hide native checkbox chrome (we style the label) */ .row-label input[type="checkbox"], .stat-chip input[type="checkbox"], .all-chip input[type="checkbox"]{ appearance:none; width:0; height:0; position:absolute; margin:0; padding:0; border:0; } /* Hover affordance */ .row-label:hover, .stat-chip:hover, .all-chip:hover{ filter:brightness(1.06); transform:translateY(-1px); } /* ---------------- Selected / idle states (class-based, set by JS) --------- */ /* Buff stat chips (selected) – use the row’s class color */ .row-wrap:not([data-row^="Enemy"]) .stat-chip.is-checked{ background:linear-gradient( 90deg, color-mix(in srgb, var(--row), white 18%), color-mix(in srgb, var(--row), black 8%) ); border-color:color-mix(in srgb, var(--row), white 35%); box-shadow:0 0 0 1px color-mix(in srgb, var(--row), white 22%) inset, 0 6px 18px rgba(0,0,0,.28); } /* Debuff stat chips — idle (unselected) baseline */ .row-wrap[data-row^="Enemy"] .stat-chip{ background: rgba(255,111,163,.12); border-color: rgba(255,111,163,.35); } /* Debuff stat chips — selected: class hue → soft pink blend */ .row-wrap[data-row^="Enemy"] .stat-chip.is-checked{ background: linear-gradient( 90deg, color-mix(in srgb, var(--row), white 10%) 0%, color-mix(in srgb, var(--row), black 8%) 50%, color-mix(in srgb, rgba(255,111,163,.34), var(--row) 28%) 75%, rgba(255,111,163,.34) 100% ); border-color: color-mix(in srgb, var(--row), rgba(255,111,163,.50) 40%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--row), rgba(255,111,163,.40) 35%) inset, 0 6px 18px rgba(0,0,0,.28); } /* Row titles — idle ramp with class hue (overridden by the “checked/partial” styles below) */ .row-label{ background: linear-gradient( 90deg, transparent 0 50%, color-mix(in srgb, var(--row), transparent 30%) 88%, var(--row) 97% ), rgba(255,255,255,.06); border-color: color-mix(in srgb, var(--row), white 50%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--row), white 65%) inset; } /* Row master — fully selected */ .row-label.is-row-checked{ background:linear-gradient( 90deg, color-mix(in srgb, var(--row), white 10%), color-mix(in srgb, var(--row), black 10%) ); border-color:color-mix(in srgb, var(--row), white 40%); box-shadow:0 8px 22px rgba(0,0,0,.35), 0 0 0 1px color-mix(in srgb, var(--row), white 24%) inset; transform:translateY(-1px); } /* Row master — partial (indeterminate) */ .row-label.is-row-partial{ background:linear-gradient( 90deg, color-mix(in srgb, var(--row), white 20%), rgba(255,255,255,.06) ); border-color:color-mix(in srgb, var(--row), white 35%); box-shadow:0 0 0 1px color-mix(in srgb, var(--row), white 18%) inset; } /* Section titles (“Buffs” / “Debuffs”) */ .section-title{ font-weight: 900; line-height: 1.1; font-size: var(--stat-title-fs); /* knob */ } .section-title.debuff{ color: rgba(255,111,163,.50); text-shadow: 0 1px 0 rgba(0,0,0,.35), 0 0 12px rgba(255,111,163,.28); } /* Keep row labels aligned (left column width) for NON-centered blocks */ :root{ --rowLabelW: var(--stat-label-width); } /* knob */ .row-label{ width: var(--rowLabelW); } /* ===== Centered header row via `.row-head` (no :has) ======================= */ /* Use this in your markup:
…
*/ .row-head{ display:flex; justify-content:center; align-items:center; gap: var(--stat-controls-gap); /* knob: spacing between title and “All …” */ flex-wrap:wrap; /* wrap gracefully on narrow screens */ } .stat-block{ text-align:center; } /* center headings visually within the block */ .stat-block .row-wrap{ justify-content:center; gap: var(--stat-row-gap-y) var(--stat-row-gap-x); /* knobs: row/column gaps */ } .stat-block .row-label{ width:auto; } /* don’t lock the label width in centered blocks */ /* Section-level “Select all” chips (Buffs/Debuffs headers) */ #allBuffsChip.is-checked, #allDebuffsChip.is-checked{ background:linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.06)); border-color:rgba(255,255,255,.38); box-shadow:0 0 0 1px rgba(255,255,255,.18) inset, 0 6px 18px rgba(0,0,0,.28); } #allBuffsChip.is-partial, #allDebuffsChip.is-partial{ background:linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,.06)); border-color:rgba(255,255,255,.32); box-shadow:0 0 0 1px rgba(255,255,255,.14) inset; } /* ---------------- Responsive tightening ----------------------------------- */ /* Contain any accidental horizontal overflow on small screens */ @media (max-width: 640px){ html, body { overflow-x: hidden; } .ewr-scroll-x, .scroll-top { max-width: 100%; overflow-x: auto; } main, .ewr-card { overflow-x: hidden; } } /* Prevent min-content overflow from grid/flex items on small screens (Firefox) */ @media (max-width: 700px){ .grid, .flex { min-width: 0 !important; } .grid > *, .flex > * { min-width: 0 !important; } .ewr-card, main, #header, #footer { min-width: 0 !important; overflow-x: hidden; } } /* MOBILE: one-row layout (Label + ATK/DEF/HP) without wrapping */ @media (max-width: 480.98px){ /* Tighten the knobs for small phones (iPhone SE = 375px) */ :root{ /* narrower label, smaller chips, smaller gaps */ --rowLabelW: 6.6rem; --stat-chip-fs: .86rem; --stat-chip-px: .50rem; --stat-chip-py: .45rem; --stat-row-gap-x: .40rem; --stat-row-gap-y: .40rem; } /* keep everything on a single line & allow shrink */ .row-wrap{ display:flex; flex-wrap:nowrap; /* ← force single row */ align-items:center; gap: var(--stat-row-gap-x); /* horizontal spacing only */ max-width:100%; overflow-x:hidden; } .row-label{ flex: 0 0 var(--rowLabelW); inline-size: var(--rowLabelW); white-space: nowrap; min-width:0; /* allow tiny shrink if needed */ } .stat-chip{ /* 3 equal chips sharing the remaining space */ flex: 1 1 0%; min-width:0; /* allow text to shrink before wrapping */ box-sizing:border-box; /* include padding in width calc */ justify-content:center; white-space:nowrap; /* “ATK/DEF/HP” won’t wrap */ } } /* Ultra-narrow Androids (~360px) */ @media (max-width: 360px){ :root{ --rowLabelW: 6.0rem; --stat-chip-fs: .80rem; --stat-chip-px: .45rem; --stat-chip-py: .40rem; --stat-row-gap-x:.36rem; } } @media (max-width:360px){ :root{ --rowLabelW: 7.4rem; --chipMin: 2.9rem; } .stat-chip{ font-size:.82rem; } } /* ---------------- Optional variants (respect knobs) ------------------------ */ .stat-compact{ --stat-title-fs: clamp(1.15rem, 2.1vw, 1.4rem); --stat-chip-fs: .94rem; --stat-chip-px: .52rem; --stat-chip-py: .34rem; --stat-row-gap-x: .50rem; --stat-row-gap-y: .40rem; --stat-label-width: 8.8rem; } .stat-lg{ --stat-title-fs: clamp(1.5rem, 3.2vw, 2.1rem); --stat-chip-fs: 1.06rem; --stat-chip-px: .82rem; --stat-chip-py: .52rem; --stat-row-gap-x: .70rem; --stat-row-gap-y: .60rem; } /* ========================================================================== 3) COMPUTE BUTTON (shared) - Sizing is driven purely by the --compute-* knobs. ========================================================================== */ .btn-compute{ --btn:#2b3442; /* color only; sizing via knobs below */ font-weight:800; font-size:var(--compute-fs); line-height:1; border-radius:var(--compute-radius); padding:var(--compute-py) var(--compute-px); box-shadow:0 6px 20px rgba(0,0,0,.35); transition:transform .15s, filter .15s, box-shadow .15s; } .btn-compute:hover{ transform:translateY(-2px); filter:brightness(1.06); box-shadow:0 12px 28px rgba(0,0,0,.35); } /* Keep any per-page ID hook from overriding sizing */ #btnCompute{ --btn:#2b3442; } #btnCompute:hover{ transform:translateY(-2px); filter:brightness(1.05); box-shadow:0 10px 28px rgba(0,0,0,.45) } /* === Status line should be on its own row under the Compute button === */ #status{ display: block; /* not inline */ width: 100%; /* occupy full row */ flex-basis: 100%; /* if parent is flex, force a wrap */ min-width: 0; /* allow shrink in flex/grid */ margin-top: .75rem; text-align: center; } /* If the container is a flex row, allow wrapping so #status can drop */ #btnCompute, #status{ box-sizing: border-box; /* padding won't push beyond 100% */ } @media (max-width: 1024px){ /* Nudge order if the row uses flex ordering */ #status{ order: 2; } } /* ========================================================================== 4) SELECTS (General roster dropdowns) ========================================================================== */ .ewr-select{ width:100%; background:#1f2937; color:#fff; border:1px solid rgba(255,255,255,.12); border-radius:.75rem; padding:.5rem .75rem; } .ewr-select:focus{ outline:none; border-color:rgba(59,130,246,.45); box-shadow:0 0 0 2px rgba(59,130,246,.35); } /* Larger optgroup labels */ .ewr-select optgroup{ font-weight:800; color:#22c55e; font-size:calc(1.05rem + 2pt); } .ewr-select option{ color:#fff; font-size:.95rem; } /* ---- Footer (image optional, never blocks) ---- */ .site-footer{ width:100%; min-height: var(--footer-h); position:relative; display:flex; align-items:flex-end; justify-content:center; overflow:hidden; /* keep the footer reserving space, but don't force paint work */ content-visibility: auto; contain-intrinsic-size: var(--footer-h); /* Always have a color; image is purely optional */ background-color:#171717; background-image: none; /* was: var(--footer-art-url) */ background-position: center; background-size: cover; background-repeat: no-repeat; } /* JS will add .has-bg when footer is near viewport */ .site-footer.has-bg{ background-image: var(--footer-art-url); } /* (optional) If you want a tiny placeholder gradient so it doesn't look empty pre-load */ .site-footer{ background-image: linear-gradient(180deg, #191919, #111); } .site-footer.has-bg{ background-image: var(--footer-art-url), linear-gradient(180deg, #191919, #111); } /* Hide only the text/content layer while loading; keep the box & background visible */ #footer[data-status="loading"] .footer-content { opacity: 0; pointer-events: none; } /* Top fade */ .site-footer::before{ content:""; position:absolute; inset:0; background: linear-gradient( to bottom, rgba(23,23,23,1) var(--footer-fade-top-start), rgba(23,23,23,0) var(--footer-fade-top-end) ); z-index:1; pointer-events:none; } /* Text layer */ .footer-content{ position:relative; z-index:2; text-align:center; } /* ========================================================================== 6) SAFARI (iOS) – vertical header tweak ========================================================================== */ @supports (-webkit-touch-callout: none) { @media (max-width: 640px) { .vhead { transform: none; text-orientation: mixed; } } } /* ===== Mobile/Firefox width containment (drop-in) ======================= */ /* Allow flex children to actually shrink inside the flex column body */ body > main { min-width: 0; } /* Most common wide wrappers: let them shrink too */ .ewr-card, .ewr-card > .grid, .stat-block, .row-wrap, .ewr-scroll-x, .scroll-top { min-width: 0; max-width: 100%; } /* The synced top scrollbar should never expand the page */ .scroll-top { width: 100%; overflow-x: auto; /* always clip, all breakpoints */ -webkit-overflow-scrolling: touch; } .scroll-top .inner { display:block; height: 1px; } /* keeps a thin track */ /* Nice-to-have: prevent any long label from forcing overflow */ .col-name, .row-label span { overflow-wrap: anywhere; } /* == MOBILE RESCUE (TEMP) — place at the very end of site.css ================= */ @media (max-width: 480.98px) { html, body { max-width: 100%; overflow-x: hidden; } /* Prevent flex/grid children from forcing overflow in Firefox */ .flex > *, .flex *[class*="flex-"], .grid > * { min-width: 0; } /* Media scale down */ img, svg, video, canvas, iframe { max-width: 100%; height: auto; } /* Long words & code wrap instead of pushing layout wider than the viewport */ :where(h1,h2,h3,h4,h5,h6,p,li,td,th) { overflow-wrap: anywhere; word-break: break-word; } pre, code, .code, .pre { white-space: pre-wrap; word-break: break-word; } /* Table containment for small screens */ .ewr-table-wrap, .table-wrap, .scroll-x { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* If you have sticky first columns, they need a background on mobile */ th[style*="position: sticky"], td[style*="position: sticky"] { background: inherit; } } /* Global guards (outside media query): common overflow culprits */ .page, .section, .container, .content, main { width: 100%; max-width: 100%; } /* If any component uses 100vw, neutralize it unless explicitly opted-in */ [class*="w-100vw"], [style*="width: 100vw"] { width: 100%; max-width: 100%; } /* ===== General picker category chips ===== */ .cat-chip{ --chip-color: rgba(255,255,255,.65); /* per-cat will override this */ --chip-bg: color-mix(in lab, var(--chip-color) 16%, transparent); --chip-bg-hover: color-mix(in lab, var(--chip-color) 22%, transparent); --chip-ring: color-mix(in lab, var(--chip-color) 34%, rgba(255,255,255,.14)); color:#fff; background: var(--chip-bg); border: 1px solid var(--chip-ring); transition: background .15s ease, border-color .15s ease, box-shadow .15s ease; } .cat-chip:hover{ background: var(--chip-bg-hover); } .cat-chip.is-active{ --chip-bg: color-mix(in lab, var(--chip-color) 28%, transparent); --chip-ring: color-mix(in lab, var(--chip-color) 54%, rgba(255,255,255,.18)); box-shadow: 0 0 0 1px var(--chip-ring) inset; } /* Map categories → brand colors (fallbacks keep it robust) */ .cat-chip[data-cat="ground"] { --chip-color: var(--ewr-col-ground-base, #22c55e); } .cat-chip[data-cat="mounted"] { --chip-color: var(--ewr-col-mounted-base, #f59e0b); } .cat-chip[data-cat="range"] { --chip-color: var(--ewr-col-ranged-base, #60a5fa); } /* note: 'ranged' token */ .cat-chip[data-cat="siege"] { --chip-color: var(--ewr-col-siege-base, #a78bfa); } .cat-chip[data-cat="defense"] { --chip-color: var(--ewr-col-defense-base, #38bdf8); } .cat-chip[data-cat="mixed"] { --chip-color: var(--ewr-col-mixed-base, #7c5ea8); } .cat-chip[data-cat="debuff"] { --chip-color: var(--debuff-pink); } /* Keep the neutral “All” chip subtle */ .cat-chip[data-cat="all"]{ --chip-color: rgba(255,255,255,.6); } /* Reserve header space so content doesn't jump when the partial injects */ #header { min-height: 64px; } @media (min-width: 640px) { #header { min-height: 72px; } } /* Only apply hide if JS explicitly enabled it */ html.js body:not([data-ready="1"]) main { opacity: 0; } html.js body[data-ready="1"] main { opacity: 1; transition: opacity .12s ease; } /* === Incompatibility badge === */ .badge-warn { display: inline-flex; align-items: center; gap: .25rem; padding: .125rem .375rem; border-radius: .375rem; font-size: .75rem; font-weight: 600; background: rgba(245,158,11,.15); /* amber-500/15 */ color: #F59E0B; /* amber-500 */ } .badge-warn .dot { width: .5rem; height: .5rem; border-radius: 9999px; background: currentColor; display: inline-block; } /* Clickable headers */ th[data-key] { cursor: pointer; position: relative; } /* Vertical headers already use writing-mode; put the chevron at the top */ th[data-key].is-sorted-asc::after, th[data-key].is-sorted-desc::after { content: ''; position: absolute; top: 4px; /* ⬅ at the top of the header */ left: 50%; transform: translateX(-50%); width: 0; height: 0; /* draw triangles via borders */ border-left: 5px solid transparent; border-right: 5px solid transparent; } /* ▲ asc */ th[data-key].is-sorted-asc::after { border-bottom: 7px solid currentColor; } /* Ensure vertical header cell is a positioning context and not clipping */ table.ewr-table thead th.vhead { position: relative; /* keep ::after positioned to the th */ padding-top: 12px; /* reserve room above vertical text */ overflow: visible; /* don't clip the triangle */ } /* Stronger selector so nothing overrides the chevrons */ table.ewr-table thead th[data-key].is-sorted-asc::after, table.ewr-table thead th[data-key].is-sorted-desc::after { content: ""; position: absolute; top: 4px; /* at the very top */ left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; z-index: 2; /* above sticky backgrounds, etc. */ } /* ▲ asc */ table.ewr-table thead th[data-key].is-sorted-asc::after { border-bottom: 7px solid rgba(255,255,255,.95); } /* ▼ desc */ table.ewr-table thead th[data-key].is-sorted-desc::after { border-top: 7px solid rgba(255,255,255,.95); } /* ▼ desc */ th[data-key].is-sorted-desc::after { border-top: 7px solid currentColor; } /* Neutral "sortable" hint: double chevrons (outline only, transparent fill) */ table.ewr-table thead th[data-key]::before{ content: ""; position: absolute; top: 4px; left: 50%; transform: translateX(-50%); /* counter-rotate below for vertical headers */ width: 14px; /* same visual footprint as active chevron */ height: 16px; /* 2 chevrons stacked */ pointer-events: none; opacity: .55; /* visible but not overpowering */ background-repeat: no-repeat; background-position: center; background-size: 100% 100%; /* inline SVG: two chevrons with white stroke, transparent fill */ background-image: url("data:image/svg+xml;utf8,\ \ \ \ \ \ "); } /* If vertical headers are rotated, counter-rotate the neutral SVG so it stays ↑↓ */ table.ewr-table thead th.vhead::before{ transform: translateX(-50%) rotate(180deg); /* matches your .vhead rotation */ } /* When actively sorted, dim the neutral hint so the solid chevron stands out */ table.ewr-table thead th[data-key].is-sorted-asc::before, table.ewr-table thead th[data-key].is-sorted-desc::before{ opacity: .18; } /* Give vertical headers more breathing room for icons */ table.ewr-table thead th.vhead { position: relative; padding-top: 26px; /* bump from 18 → 26px to push text further down */ overflow: visible; } /* Position the neutral double-chevron icons (inactive columns) */ table.ewr-table thead th[data-key]::before { top: 6px; /* stay near the top of that new padding */ } /* Active chevron should sit in the same "lane" */ table.ewr-table thead th[data-key].is-sorted-asc::after, table.ewr-table thead th[data-key].is-sorted-desc::after { top: 6px; } /* Hide the neutral hint entirely when a column is sorted */ table.ewr-table thead th[data-key].is-sorted-asc::before, table.ewr-table thead th[data-key].is-sorted-desc::before { content: none; }