/* ============================================================
ROCComboFinder.com — v39 Deep Navy + Ice Cyan
Dark, glassy, premium. One clean stylesheet.
Legacy --gold* names are kept as aliases (now cyan/ice) so
inline references in the HTML keep resolving.
============================================================ */
:root{
/* ---- base surfaces (deep navy) ---- */
--bg:#08111f;
--bg-2:#0a1526;
--panel:#0f1d33;
--panel-2:#0c1830;
--text:#e6f6ff;
--muted:#93b4cf;
--soft:#5f7f9c;
/* ---- lines / borders ---- */
--line:rgba(56,189,248,.16);
--line-strong:rgba(56,189,248,.40);
/* ---- accent system (ice cyan) ---- */
--accent:#22d3ee; /* cyan — primary */
--accent-2:#38bdf8; /* sky/ice blue */
--accent-deep:#0e7490;
--ice:#a5f0ff;
--silver:#c4d7e6;
--ink:#032430; /* dark text on bright accents */
--glow:rgba(34,211,238,.28);
/* ---- legacy aliases (repointed to cyan) ---- */
--gold:var(--accent);
--gold-2:var(--accent-2);
--gold-deep:var(--accent-deep);
/* ---- semantic ---- */
--red:#fb7185;
--green:#34d399;
--blue:#60a5fa;
--purple:#c084fc;
--radius:20px;
--radius-lg:26px;
--shadow:0 24px 70px rgba(1,6,16,.65);
--shadow-soft:0 14px 40px rgba(1,6,16,.45);
--container:1180px;
--font-display:"Cinzel", "Times New Roman", serif;
--font-body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
/* ---------- Base ---------- */
*{box-sizing:border-box}
html{
scroll-behavior:smooth;
/* THE CANVAS COLOUR. Without this, has no background — so when you
rubber-band past the bottom of the page on a phone you scroll straight past
and see the browser's default canvas, which is WHITE. That was the
white strip at the bottom on mobile. */
background:#08111f;
/* Tells the browser this is a dark page. It then uses dark defaults for the
overscroll area, form controls, scrollbars and the mobile UI — instead of
assuming light and flashing white. */
color-scheme:dark;
}
body{
margin:0;
min-height:100vh;
color:var(--text);
font-family:var(--font-body);
line-height:1.6;
background:
radial-gradient(1200px 560px at 12% -6%, rgba(34,211,238,.16), transparent 66%),
radial-gradient(900px 500px at 92% 3%, rgba(56,189,248,.12), transparent 70%),
radial-gradient(700px 500px at 50% 108%, rgba(14,116,144,.16), transparent 70%),
linear-gradient(165deg,#08111f 0%,#060d18 48%,#0a1526 100%);
background-attachment:fixed;
background-color:var(--bg); /* AFTER the shorthand — the shorthand resets it */
}
/* background-attachment:fixed is broken on phones. The background gets sized to
the viewport at load, but the address bar collapses as you scroll, the viewport
GROWS, and the fixed background does not grow with it — leaving an unpainted
strip at the bottom. It is also a known scroll-performance killer on mobile.
Scroll-attached instead: identical look, no gap. */
@media (max-width:900px), (hover:none){
body{background-attachment:scroll}
}
/* height:auto is critical: hero ![]()
tags carry width/height attributes,
and without this the attribute height (768px) wins over aspect-ratio. */
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,.brand strong{font-family:var(--font-display);font-weight:700}
.skip-link{position:absolute;left:-999px;top:auto}
.skip-link:focus{left:1rem;top:1rem;background:#fff;color:#000;padding:.6rem 1rem;border-radius:999px;z-index:99}
/* Visible to screen readers, not to the eye. Used for form labels that would be
redundant sighted (the field has a placeholder and an icon) but are required
for a control to be announced at all. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0}
::selection{background:rgba(34,211,238,.32);color:#fff}
/* Subtle entrance animation */
@keyframes riseIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero-copy,.hero-panel{animation:riseIn .6s ease both}
.hero-panel{animation-delay:.12s}
/* ---------- Navigation ---------- */
.site-header{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.site-header::before{
content:"";position:absolute;inset:-38% -18% auto auto;width:56rem;height:56rem;
background:radial-gradient(circle,rgba(34,211,238,.20),transparent 62%);pointer-events:none;
}
.nav{
width:min(var(--container),calc(100% - 2rem));margin:.85rem auto 0;
display:flex;justify-content:space-between;align-items:center;gap:1rem;
position:relative;z-index:5;
padding:.68rem .85rem;border:1px solid rgba(56,189,248,.16);border-radius:22px;
background:linear-gradient(180deg,rgba(14,29,51,.92),rgba(10,20,36,.62));
backdrop-filter:blur(14px);
}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;flex:0 0 auto}
.brand-mark{
display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
border:1px solid var(--accent-2);color:var(--accent-2);font-weight:900;
background:linear-gradient(160deg,#10263f,#0a1830);
box-shadow:0 10px 26px rgba(34,211,238,.28), inset 0 0 18px rgba(34,211,238,.12);
font-family:var(--font-display);
transition:transform .2s ease, box-shadow .2s ease;
}
.brand:hover .brand-mark{transform:translateY(-2px);box-shadow:0 14px 32px rgba(34,211,238,.42), inset 0 0 20px rgba(34,211,238,.2)}
/* The mark itself: three blocks, middle raised. Same shape as the favicon. */
.bm-glyph{width:26px;height:26px;display:block;overflow:visible}
.bm-side{fill:var(--accent);opacity:.72}
.bm-top{fill:var(--accent-2)}
/* The #1 block lifts on hover — a small nod to what the site does. */
.bm-top{transition:transform .22s cubic-bezier(.34,1.56,.64,1);transform-origin:center bottom}
.brand:hover .bm-top{transform:translateY(-2.5px)}
.brand:hover .bm-side{opacity:.9}
/* "ROC" picked out in cyan so the wordmark has a hierarchy instead of being one
long undifferentiated string. */
.bm-hi{color:var(--accent-2)}
@media (prefers-reduced-motion:reduce){
.brand-mark,.bm-top,.bm-side{transition:none}
.brand:hover .brand-mark,.brand:hover .bm-top{transform:none}
}
.brand strong{letter-spacing:.01em;white-space:nowrap}
/* The tagline must never wrap — a 2-line brand is what made the old header
feel cramped. Below 1150px there isn't room for it, so it drops out; the
full tagline still lives in the , the H1 area and the footer. */
.brand small{display:block;color:var(--muted);font-size:.76rem;margin-top:-.05rem;white-space:nowrap}
@media (max-width:1150px){ .brand small{display:none} }
/* The links keep their natural width; the search form is the only flexible
child, so it absorbs whatever space is left over at any viewport. */
.nav-links{display:flex;align-items:center;gap:.3rem;flex:1 1 auto;justify-content:flex-end;min-width:0}
.nav-links a{
flex:0 0 auto;
padding:.62rem .9rem;text-decoration:none;color:var(--muted);border-radius:999px;
font-weight:650;font-size:.95rem;white-space:nowrap;transition:background .16s ease,color .16s ease;
}
.nav-links a:hover,.nav-links a:focus{background:rgba(255,255,255,.08);color:#fff}
.nav-links a[aria-current="page"]{background:rgba(34,211,238,.18);color:var(--accent-2)}
.nav-toggle{display:none;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:999px;padding:.62rem 1rem;font-weight:700;cursor:pointer}
/* ---------- Hero ---------- */
.hero-section{
width:min(var(--container),calc(100% - 2rem));margin:auto;
display:grid;grid-template-columns:1.08fr .92fr;gap:2.6rem;align-items:center;
padding:4.4rem 0 5rem;position:relative;
}
.hero-section-plus{position:relative;overflow:visible}
.eyebrow{margin:0 0 .7rem;color:var(--accent-2);font-size:.76rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.hero-copy h1{
font-size:clamp(2.3rem,5.4vw,4.4rem);line-height:1.04;margin:.25rem 0 1.05rem;letter-spacing:.005em;
}
.hero-copy h1 em{
font-style:normal;
background:linear-gradient(100deg,var(--accent) 8%,var(--ice) 50%,var(--accent-2) 92%);
-webkit-background-clip:text;background-clip:text;color:transparent;
filter:drop-shadow(0 2px 18px rgba(34,211,238,.35));
}
.hero-lede{font-size:clamp(1.02rem,1.8vw,1.2rem);color:var(--muted);max-width:60ch}
.update-pill{
display:inline-flex;align-items:center;gap:.5rem;margin:.3rem 0 1.05rem;
padding:.55rem .9rem;border:1px solid var(--line);border-radius:999px;
background:rgba(255,255,255,.05);color:var(--accent-2);font-size:.86rem;font-weight:750;
}
.update-pill::before{
content:"✓";display:inline-grid;place-items:center;width:1.2rem;height:1.2rem;border-radius:50%;
background:rgba(52,211,153,.20);color:#8ef2c4;font-weight:900;font-size:.8rem;
}
.top-stat-bar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem;margin:1.2rem 0;max-width:740px}
.top-stat-bar div{
padding:.9rem .95rem;border:1px solid rgba(56,189,248,.20);border-radius:18px;
background:linear-gradient(180deg,rgba(56,189,248,.08),rgba(255,255,255,.02));
box-shadow:var(--shadow-soft);
}
.top-stat-bar strong{display:block;font-size:clamp(1.25rem,2.8vw,1.85rem);line-height:1;color:var(--accent-2);font-family:var(--font-display)}
.top-stat-bar span{display:block;margin-top:.4rem;font-size:.74rem;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.07em}
.hero-actions,.toolbar-actions,.quick-actions,.results-controls,.pill-row{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center}
.btn{
border:1px solid var(--line);background:var(--panel-2);color:var(--text);
border-radius:999px;padding:.8rem 1.15rem;font-weight:800;cursor:pointer;text-decoration:none;
transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;font-size:.98rem;
display:inline-flex;align-items:center;gap:.45rem;
}
.btn:hover,.btn:focus{transform:translateY(-2px);border-color:var(--line-strong)}
.btn.primary{
background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--ink);border-color:transparent;
box-shadow:0 14px 34px rgba(34,211,238,.38);
}
.btn.primary:hover{box-shadow:0 18px 46px rgba(34,211,238,.5)}
.btn.ghost{background:transparent}
.btn.small{font-size:.88rem;padding:.56rem .85rem}
.trust-strip{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:1.3rem}
.trust-strip span,.mini-chip{
font-size:.8rem;color:#cfe8fb;border:1px solid rgba(56,189,248,.24);
background:rgba(255,255,255,.05);border-radius:999px;padding:.42rem .72rem;font-weight:650;
}
/* Hero showcase panel */
.hero-panel{
background:linear-gradient(180deg,rgba(15,32,58,.92),rgba(9,20,38,.92));
border:1px solid var(--line);box-shadow:var(--shadow);border-radius:30px;padding:1.1rem;position:relative;
}
.hero-panel::before{
content:"";position:absolute;inset:0;border-radius:30px;pointer-events:none;
background:radial-gradient(420px 220px at 85% -10%,rgba(34,211,238,.22),transparent 70%);
}
.showcase-head{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.15rem .3rem .75rem}
.showcase-head strong{font-size:.92rem;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-2)}
.showcase-live{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;color:#8ef2c4;font-weight:800}
.showcase-live::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--green);box-shadow:0 0 10px rgba(52,211,153,.9)}
.showcase-combo{
border:1px solid rgba(56,189,248,.22);border-radius:22px;padding:1rem;
background:radial-gradient(circle at top right,rgba(34,211,238,.20),transparent 16rem),#0d1e33;
}
.showcase-combo + .showcase-combo{margin-top:.8rem}
.showcase-combo.alt{background:radial-gradient(circle at top right,rgba(56,189,248,.18),transparent 16rem),#0b1a2e}
.showcase-row{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-bottom:.7rem}
.showcase-row h2{margin:0;font-size:1.14rem;line-height:1.2;font-family:var(--font-body);font-weight:800}
.showcase-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.showcase-slot{
border:1px solid var(--line);border-radius:16px;overflow:hidden;background:rgba(255,255,255,.04);
}
.showcase-slot img{width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.showcase-slot span{display:block;padding:.4rem .5rem;font-size:.74rem;font-weight:800;color:#cfe8fb;text-align:center}
.showcase-note{margin:.8rem .2rem 0;color:var(--muted);font-size:.86rem}
.rank-badge{
display:inline-flex;align-items:center;gap:.35rem;background:linear-gradient(135deg,var(--accent-2),var(--ice));
color:var(--ink);border-radius:999px;padding:.36rem .72rem;font-weight:900;font-size:.85rem;
box-shadow:0 8px 18px rgba(34,211,238,.3);
}
/* ---------- Sections ---------- */
.section{width:min(var(--container),calc(100% - 2rem));margin:0 auto;padding:4.2rem 0}
.section-heading{max-width:800px;margin-bottom:1.4rem}
.section-heading h2,.intro-content h2,.seo-section h2,.faq-section h2,.rank-page h2{
font-size:clamp(1.7rem,3.4vw,2.55rem);line-height:1.1;margin:.2rem 0 .6rem;letter-spacing:.005em;
}
.section-heading p,.intro-content p,.seo-section>p,.faq-section>p{color:var(--muted)}
/* How it works */
.intro-content{display:grid;grid-template-columns:.75fr 1.25fr;gap:2rem}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.card-surface,.steps article,.control-panel,.hero-browser,.combo-card,.seo-card,.faq-section details,.empty-state,.wish-card,.insight-card,.stat{
background:linear-gradient(180deg,rgba(56,189,248,.05),rgba(255,255,255,.02));
border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-soft);
}
.steps article{padding:1.15rem;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.steps article:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:0 16px 40px rgba(34,211,238,.14)}
.steps span{
display:grid;place-items:center;width:36px;height:36px;border-radius:12px;
background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--ink);font-weight:900;font-family:var(--font-display);
}
.steps h3{margin:.8rem 0 .35rem}
.steps p{color:var(--muted);margin:0}
/* ---------- Finder ---------- */
.finder-section{background:linear-gradient(180deg,rgba(56,189,248,.03),rgba(255,255,255,0));border-block:1px solid var(--line)}
.finder-grid{display:grid;grid-template-columns:330px 1fr;gap:1rem;align-items:start}
.control-panel{padding:1.05rem;border-radius:var(--radius-lg)}
@media (min-width:980px){.control-panel{position:sticky;top:1rem;align-self:start}}
.data-status{
border-radius:16px;padding:.75rem .85rem;margin-bottom:1rem;
background:linear-gradient(90deg,rgba(34,211,238,.16),rgba(56,189,248,.10));
border:1px solid rgba(34,211,238,.30);color:#d3f2ff;font-weight:750;font-size:.92rem;
}
.field-label,legend{display:block;font-size:.76rem;color:var(--accent-2);text-transform:uppercase;letter-spacing:.1em;font-weight:900;margin-bottom:.45rem}
fieldset{border:0;padding:0;margin:1rem 0}
.search-wrap{position:relative}
.search-wrap input{
width:100%;border:1px solid rgba(56,189,248,.24);background:#0a1930;color:var(--text);
border-radius:16px;padding:.85rem 2.5rem .85rem .95rem;font-size:1rem;font-family:inherit;
transition:border-color .16s ease,box-shadow .16s ease;
}
.search-wrap input:focus{outline:none;border-color:var(--line-strong);box-shadow:0 0 0 4px rgba(34,211,238,.18)}
.search-wrap button{
position:absolute;right:.38rem;top:.36rem;width:34px;height:34px;border-radius:50%;border:0;
background:rgba(255,255,255,.08);color:#fff;font-size:1.2rem;cursor:pointer;
}
.pill{
border:1px solid var(--line);background:#0b1a30;color:var(--muted);border-radius:999px;
padding:.55rem .78rem;cursor:pointer;font-weight:800;font-size:.9rem;
transition:transform .14s ease,background .14s ease,color .14s ease;
}
/* NEVER use opacity to mute text. opacity:.65 kept the colour at a healthy
8.03:1 on paper, but blended the pixels toward the #0b1a30 background and the
REAL contrast came out at 4.11:1 — under the 4.5 minimum. This was the only
remaining Lighthouse accessibility failure. Mute with an explicit colour
instead, which is measurable: #8296ae = 5.8:1 here. */
.pill em{font-style:normal;color:#8296ae;font-size:.8rem;margin-left:.25rem}
.pill[aria-pressed="true"]{
background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--ink);border-color:transparent;
box-shadow:0 10px 22px rgba(34,211,238,.3);transform:translateY(-1px);
}
/* Selected pill: dark ink on the cyan gradient. A muted grey would be unreadable
here, so inherit the pill's own high-contrast ink colour. */
.pill[aria-pressed="true"] em{color:inherit;opacity:.85}
.selected-box{margin-top:1rem;border-top:1px solid var(--line);padding-top:1rem}
.selected-box-head{display:flex;justify-content:space-between;align-items:center}
.selected-box h3{margin:0}
.selected-box-head span{
display:grid;place-items:center;min-width:34px;height:34px;border-radius:999px;padding:0 .5rem;
background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--ink);font-weight:900;
}
.type-summary{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.75rem}
.summary-pill{
display:inline-flex;align-items:center;gap:.35rem;padding:.36rem .64rem;border-radius:999px;
background:rgba(255,255,255,.06);border:1px solid var(--line);font-size:.8rem;color:#d3e9fb;
}
.selected-list{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem;max-height:260px;overflow:auto}
.selected-list button{
border:1px solid rgba(56,189,248,.28);background:rgba(255,255,255,.06);color:#fff;
border-radius:999px;padding:.45rem .65rem;cursor:pointer;font-size:.88rem;transition:background .14s ease;
}
.selected-list button:hover{background:rgba(251,113,133,.22);border-color:rgba(251,113,133,.5)}
/* Hero browser */
.hero-browser{padding:1.05rem;border-radius:var(--radius-lg)}
.toolbar{display:flex;justify-content:space-between;gap:1rem;align-items:center;margin-bottom:1rem}
.toolbar p{margin:0;color:var(--muted);font-size:.94rem}
.hero-cards{
display:grid;grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:.85rem;
content-visibility:auto;contain-intrinsic-size:1200px;
}
.hero-card{
border:1px solid var(--line);border-radius:18px;overflow:hidden;cursor:pointer;text-align:left;
color:#fff;padding:0;position:relative;
background:linear-gradient(180deg,rgba(56,189,248,.06),rgba(255,255,255,.02));
transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.hero-card:hover,.hero-card:focus-visible{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:0 16px 40px rgba(34,211,238,.16)}
.hero-card .image-wrap{aspect-ratio:1;background:radial-gradient(circle at top,rgba(56,189,248,.10),transparent 70%),#0a1a30;overflow:hidden}
.hero-card img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.hero-card:hover img{transform:scale(1.05)}
.hero-card-body{padding:.7rem .75rem}
.hero-card h3{margin:0;font-size:.98rem;line-height:1.15;font-family:var(--font-body);font-weight:750}
.meta-row{display:flex;justify-content:space-between;gap:.5rem;margin-top:.4rem;color:var(--muted);font-size:.76rem}
.hero-card.selected{
outline:2px solid var(--accent);outline-offset:-2px;
background:linear-gradient(180deg,rgba(34,211,238,.20),rgba(255,255,255,.04));
box-shadow:0 0 0 4px rgba(34,211,238,.18),0 12px 36px rgba(1,6,16,.5);
}
.hero-card.selected::after{
content:"✓";position:absolute;top:.5rem;right:.5rem;width:26px;height:26px;border-radius:50%;
display:grid;place-items:center;background:var(--accent);color:var(--ink);font-weight:900;font-size:.9rem;
box-shadow:0 6px 14px rgba(1,6,16,.55);
}
.type-dot{display:inline-flex;align-items:center;gap:.35rem}
.type-dot::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--accent)}
.type-dot.cavalry::before{background:var(--red)}
.type-dot.archer::before{background:var(--green)}
.type-dot.footmen::before{background:var(--blue)}
.type-dot.mixed::before{background:var(--purple)}
/* Compact view */
.compact .hero-cards{grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:.6rem}
.compact .hero-card{display:grid;grid-template-columns:52px 1fr;align-items:center}
.compact .hero-card .image-wrap{aspect-ratio:1;width:52px;height:52px}
.compact .hero-card:hover img{transform:none}
.compact .hero-card-body{padding:.5rem .6rem}
.compact .hero-card.selected::after{top:50%;transform:translateY(-50%);right:.55rem;width:22px;height:22px;font-size:.8rem}
.compact .meta-row span:last-child{display:none}
/* ---------- Results ---------- */
.results-section{padding-top:4rem}
.results-head{display:flex;justify-content:space-between;gap:1rem;align-items:end;max-width:none}
.results-controls{gap:.6rem}
.results-controls label{
color:var(--muted);font-weight:700;background:rgba(255,255,255,.055);
border:1px solid var(--line);border-radius:999px;padding:.6rem .85rem;font-size:.92rem;
}
.results-controls select{
border:1px solid rgba(56,189,248,.24);background:rgba(10,22,42,.92);color:var(--text);
border-radius:999px;padding:.66rem .85rem;font-size:.94rem;font-family:inherit;
}
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75rem;margin:1rem 0}
.stat{padding:.95rem;border-radius:18px}
.stat strong{display:block;font-size:1.7rem;font-family:var(--font-display);color:var(--accent-2)}
.stat span{color:var(--muted);font-size:.8rem;font-weight:700}
button.stat{cursor:pointer;text-align:left;color:inherit;font:inherit;transition:transform .15s ease,border-color .15s ease}
button.stat:hover{transform:translateY(-2px);border-color:var(--line-strong)}
button.stat[aria-pressed="true"]{border-color:var(--accent);background:linear-gradient(180deg,rgba(34,211,238,.20),rgba(255,255,255,.04));box-shadow:0 0 0 3px rgba(34,211,238,.16)}
button.stat[aria-pressed="true"]::after{content:"✕ clear filter";display:block;margin-top:.3rem;font-size:.7rem;font-weight:800;color:var(--accent-2);text-transform:uppercase;letter-spacing:.06em}
.stat-hint{grid-column:1/-1;margin:-.3rem 0 0;color:var(--soft);font-size:.8rem}
.load-more-wrap{grid-column:1/-1;display:grid;place-items:center;padding:.6rem 0 .2rem}
.result-count-note{grid-column:1/-1;color:var(--muted);font-size:.9rem;margin:0 0 .2rem}
.insight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1rem 0 1.2rem}
.insight-card{padding:1.05rem;border-radius:22px}
.insight-card.alt{background:linear-gradient(180deg,rgba(56,189,248,.12),rgba(255,255,255,.02))}
.insight-card.slim{background:linear-gradient(180deg,rgba(34,211,238,.12),rgba(255,255,255,.02))}
.insight-card h3{margin:.35rem 0;font-size:1.22rem;line-height:1.15}
.insight-card p{margin:0;color:var(--muted)}
.mini-eyebrow{display:inline-block;font-size:.74rem;text-transform:uppercase;letter-spacing:.11em;color:var(--accent-2);font-weight:900}
.wishlist-shell{margin:1rem 0 1.3rem}
.section-mini-head h3{margin:.2rem 0;font-size:1.3rem}
.section-mini-head p{margin:.25rem 0 1rem;color:var(--muted)}
.wishlist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.85rem}
.wish-card{display:grid;grid-template-columns:64px 1fr;gap:.8rem;align-items:center;padding:.8rem;border-radius:20px;transition:transform .16s ease,border-color .16s ease}
.wish-card:hover{transform:translateY(-2px);border-color:var(--line-strong)}
.wish-card img{width:64px;height:64px;border-radius:14px;object-fit:cover;box-shadow:0 6px 18px rgba(1,6,16,.5)}
.wish-card h4{margin:0 0 .2rem}
.wish-card p{margin:0;color:var(--text);font-size:.9rem}
.wish-card small{color:var(--muted)}
/* Combo cards */
.combo-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem;align-items:stretch}
@media (min-width:980px){.combo-results{grid-template-columns:repeat(auto-fill,minmax(360px,1fr))}}
.combo-card{padding:1.05rem;overflow:hidden;position:relative;border-radius:22px}
.combo-card::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--accent),rgba(56,189,248,.35));opacity:.95}
.combo-card.complete{border-color:rgba(52,211,153,.45)}
.combo-card.complete::before{background:linear-gradient(90deg,var(--green),var(--accent))}
.combo-card.missing{opacity:.94}
.combo-head{display:flex;justify-content:space-between;gap:1rem;align-items:start}
.combo-head h3{margin:.45rem 0 .15rem;font-size:1.14rem;font-family:var(--font-body);font-weight:800}
.combo-meta{color:var(--muted);font-size:.85rem}
.tier{display:inline-grid;place-items:center;min-width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,var(--accent-2),var(--ice));color:var(--ink);font-weight:900;font-size:.8rem;padding:0 .4rem}
.progress{height:7px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;width:100%;margin-top:.7rem}
.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--green));transition:width .4s ease}
.lineup{display:grid;gap:.6rem;margin:1rem 0}
.lineup-slot{
display:grid;grid-template-columns:50px 1fr auto;gap:.7rem;align-items:center;
background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:16px;padding:.5rem;
}
.lineup-slot img{width:50px;height:50px;border-radius:12px;object-fit:cover;box-shadow:0 6px 16px rgba(1,6,16,.5)}
.lineup-slot small{display:block;color:var(--soft);text-transform:uppercase;font-weight:900;font-size:.66rem;letter-spacing:.08em}
.lineup-slot strong{display:block;font-size:.96rem}
.availability{font-size:.76rem;border-radius:999px;padding:.32rem .58rem;background:rgba(255,255,255,.07);color:var(--muted);font-weight:900}
.availability.owned{background:rgba(52,211,153,.18);color:#9df0c6}
.availability.need{background:rgba(34,211,238,.16);color:#a5f0ff}
.combo-foot{display:flex;justify-content:space-between;gap:.75rem;align-items:center;color:var(--muted);font-size:.87rem}
/* ---------- Tips / SEO cards ---------- */
.seo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.seo-card{padding:1.1rem;border-radius:22px;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.seo-card:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:0 16px 40px rgba(34,211,238,.14)}
.seo-card h3{margin:0 0 .4rem}
.seo-card p{color:var(--muted);margin:0}
/* ---------- FAQ ---------- */
.faq-section details{padding:1rem 1.1rem;margin:.75rem 0;border-radius:20px;transition:border-color .18s ease,background .18s ease}
.faq-section details:hover{border-color:var(--line-strong);background:rgba(56,189,248,.05)}
.faq-section summary{cursor:pointer;font-weight:800;font-size:1.02rem}
.faq-section details p{color:var(--muted)}
/* ---------- Ranking pages ---------- */
.rank-page-hero{padding:3rem 0 2.4rem}
.breadcrumbs{margin:0 0 1rem;font-size:.88rem;color:var(--muted)}
.breadcrumbs a{color:var(--accent-2);text-decoration:none}
.breadcrumbs a:hover{text-decoration:underline}
.rank-cat-nav{display:flex;gap:.55rem;flex-wrap:wrap;margin:1.1rem 0 0}
.rank-cat-nav a{
text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:.5rem .85rem;
color:var(--muted);font-weight:750;font-size:.9rem;transition:all .15s ease;
}
.rank-cat-nav a:hover{border-color:var(--line-strong);color:#fff}
.rank-cat-nav a[aria-current="page"]{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--ink);border-color:transparent}
.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.6rem 0}
.podium article{
padding:1rem;border-radius:22px;text-align:center;position:relative;
background:linear-gradient(180deg,rgba(34,211,238,.12),rgba(255,255,255,.02));
border:1px solid rgba(56,189,248,.28);box-shadow:var(--shadow-soft);
}
.podium .medal{
position:absolute;top:-.7rem;left:50%;transform:translateX(-50%);
background:linear-gradient(135deg,var(--accent-2),var(--ice));color:var(--ink);font-weight:900;
border-radius:999px;padding:.3rem .8rem;font-size:.82rem;box-shadow:0 8px 20px rgba(34,211,238,.34);
}
.podium .trio{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:1rem 0 .7rem}
.podium .trio img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:14px;border:1px solid var(--line)}
.podium h3{margin:.2rem 0;font-size:1rem;font-family:var(--font-body);font-weight:800}
.rank-list{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.6rem}
.rank-list li{
display:grid;grid-template-columns:56px 1fr auto;gap:.9rem;align-items:center;
background:linear-gradient(180deg,rgba(56,189,248,.05),rgba(255,255,255,.02));
border:1px solid var(--line);border-radius:18px;padding:.65rem .8rem;
}
.rank-list .rk{
display:grid;place-items:center;width:46px;height:46px;border-radius:14px;font-weight:900;
background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--accent-2);font-family:var(--font-display);
}
.rank-list li:nth-child(-n+3) .rk{background:linear-gradient(135deg,var(--accent-2),var(--ice));color:var(--ink);border-color:transparent}
.rank-list .combo-names{font-weight:750;font-size:1rem}
.rank-list .combo-pos{display:block;color:var(--muted);font-size:.82rem;margin-top:.15rem;font-weight:500}
.rank-list .faces{display:flex;gap:.4rem}
.rank-list .faces img{width:44px;height:44px;border-radius:12px;object-fit:cover;border:1px solid var(--line)}
.rank-cta{margin:2.2rem 0 0;padding:1.4rem;border-radius:24px;text-align:center;
background:linear-gradient(135deg,rgba(34,211,238,.15),rgba(255,255,255,.03));
border:1px solid rgba(56,189,248,.3);}
.rank-cta h2{margin:.2rem 0 .5rem}
.rank-cta p{color:var(--muted);margin:0 0 1rem}
/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line);padding:2.4rem 0;background:linear-gradient(180deg,#060c16,#04090f)}
.footer-inner{
width:min(var(--container),calc(100% - 2rem));margin:auto;
display:grid;grid-template-columns:1.2fr .8fr .8fr auto;gap:2rem;align-items:start;
}
@media (max-width:1000px){ .footer-inner{grid-template-columns:1fr 1fr;gap:1.6rem} }
.footer-inner p{color:var(--muted);margin:.35rem 0 0;font-size:.92rem}
.footer-note{margin-top:.5rem!important;font-size:.8rem;color:var(--soft)!important}
.footer-links{display:grid;gap:.35rem}
.footer-links strong{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent-2)}
.footer-links a{color:var(--muted);text-decoration:none;font-size:.92rem;padding:.15rem 0}
.footer-links a:hover{color:#fff;text-decoration:underline}
.footer-actions{display:grid;gap:.6rem}
/* ---------- Empty states ---------- */
.empty-state{padding:1.5rem;color:var(--muted);grid-column:1/-1;border-radius:20px;text-align:center}
.empty-state strong{color:var(--text)}
/* ---------- Contact page ---------- */
.contact-hero{padding-top:3rem;padding-bottom:3.5rem}
.contact-panel{align-self:stretch;display:grid;align-items:center}
.contact-card{padding:1.25rem;border-radius:24px;background:linear-gradient(180deg,rgba(56,189,248,.08),rgba(255,255,255,.02));border:1px solid rgba(56,189,248,.2)}
.contact-card h2{font-size:clamp(1.3rem,3vw,1.9rem);line-height:1.1;margin:.55rem 0;word-break:break-word}
.contact-card p{color:var(--muted)}
.contact-section{padding-top:3.5rem}
.contact-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:1rem;align-items:start}
.contact-form,.contact-help article,.contact-result{background:linear-gradient(180deg,rgba(14,29,51,.95),rgba(9,20,38,.92));border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow-soft)}
.contact-form{padding:1.1rem}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
.contact-form label{display:grid;gap:.4rem;color:var(--accent-2);font-weight:900;font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.85rem}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;border:1px solid var(--line);background:#0a1930;color:var(--text);border-radius:16px;padding:.85rem .95rem;font-size:1rem;font:inherit;text-transform:none;letter-spacing:normal;font-weight:600}
.contact-form textarea{resize:vertical;min-height:170px}
.checkbox-line{display:flex!important;align-items:flex-start;color:var(--muted)!important;text-transform:none!important;letter-spacing:normal!important;font-weight:700!important;gap:.65rem}
.checkbox-line input{width:auto;margin-top:.18rem}
.hp-field{position:absolute!important;left:-9999px!important;opacity:0!important}
.form-actions{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;margin-top:.8rem}
.form-note{color:var(--muted);font-size:.88rem;margin:.85rem 0 0}
.contact-help{display:grid;gap:1rem}
.contact-help article{padding:1rem}
.contact-help h3{margin:0 0 .45rem}
.contact-help p{margin:0;color:var(--muted)}
.contact-result{max-width:760px;margin:5rem auto;padding:2rem}
.contact-result h1{font-size:clamp(2rem,5vw,3.2rem);margin:.3rem 0}
.contact-result p{color:var(--muted)}
.contact-result.success{border-color:rgba(52,211,153,.45)}
.contact-result.error{border-color:rgba(251,113,133,.45)}
.contact-status{margin:.2rem 0 0;padding:.8rem .95rem;border-radius:14px;font-weight:700;border:1px solid var(--line);background:rgba(56,189,248,.08);color:var(--muted)}
.contact-status.success{border-color:rgba(52,211,153,.5);background:rgba(52,211,153,.12);color:#9df0c6}
.contact-status.error{border-color:rgba(251,113,133,.5);background:rgba(251,113,133,.12);color:#ffb1bd}
.q-badge{display:inline-block;margin-left:.4rem;padding:.16rem .55rem;border-radius:999px;background:rgba(56,189,248,.16);border:1px solid rgba(56,189,248,.3);color:var(--accent-2);font-weight:800;text-transform:none;letter-spacing:normal;font-size:.82rem}
/* ============================================================
HERO PAGES (/heroes/)
============================================================ */
.hero-mug{width:100%;max-width:230px;aspect-ratio:1;object-fit:cover;border-radius:22px;border:1px solid var(--line);box-shadow:var(--shadow);margin:0 auto;background:#0a1a30;display:block}
.hero-panel .hero-mug-wrap{text-align:center}
.hero-type-badges{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin:.9rem 0 .2rem}
.hero-type-badge{display:inline-flex;align-items:center;gap:.4rem;padding:.32rem .72rem;border-radius:999px;background:rgba(56,189,248,.14);border:1px solid rgba(56,189,248,.3);color:var(--accent-2);font-weight:800;font-size:.82rem;text-transform:capitalize}
.hero-pairs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.85rem}
.hero-pair{display:grid;grid-template-columns:56px 1fr;gap:.7rem;align-items:center;text-decoration:none;color:inherit;padding:.6rem;border-radius:16px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(56,189,248,.05),rgba(255,255,255,.02));transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.hero-pair:hover{transform:translateY(-2px);border-color:var(--line-strong);box-shadow:0 14px 34px rgba(34,211,238,.14)}
.hero-pair img{width:56px;height:56px;border-radius:12px;object-fit:cover;background:#0a1a30;border:1px solid var(--line)}
.hero-pair h4{margin:0;font-size:.98rem;font-weight:750}
.hero-pair small{color:var(--muted)}
/* ============================================================
/heroes DIRECTORY — search, type filters, sort, card grid
============================================================ */
/* ---------------- 404 ---------------- */
.nf-wrap{padding-top:3rem;max-width:840px}
.nf-code{font-family:var(--font-display);font-size:clamp(4rem,14vw,8rem);line-height:.9;margin:0;
background:linear-gradient(135deg,var(--accent),var(--accent-2));-webkit-background-clip:text;
background-clip:text;color:transparent;opacity:.55}
.nf-wrap h1{font-size:clamp(1.8rem,4.4vw,2.8rem);margin:.4rem 0 .8rem}
.nf-lede{max-width:58ch}
.nf-path{background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:7px;
padding:.1rem .4rem;font-size:.92em;color:var(--accent-2);word-break:break-all}
.nf-guess{margin-top:2rem}
.nf-guess .mini-eyebrow{display:block;margin-bottom:.7rem}
.nf-search{display:flex;gap:.6rem;margin:2rem 0 0;flex-wrap:wrap}
.nf-search input{flex:1 1 260px;min-width:0;border:1px solid var(--line);background:#0a1930;
color:var(--text);border-radius:999px;padding:.8rem 1.1rem;font:inherit}
.nf-search input:focus{outline:none;border-color:var(--accent-2);box-shadow:0 0 0 3px rgba(34,211,238,.14)}
.nf-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.8rem;margin-top:2.2rem}
.nf-link{display:block;text-decoration:none;color:inherit;border:1px solid var(--line);border-radius:16px;
padding:1rem 1.1rem;background:linear-gradient(180deg,rgba(56,189,248,.05),rgba(255,255,255,.02));
transition:transform .16s ease,border-color .16s ease}
.nf-link:hover{transform:translateY(-2px);border-color:var(--line-strong)}
.nf-link strong{display:block;color:var(--accent-2);margin-bottom:.25rem}
.nf-link span{color:var(--muted);font-size:.88rem;line-height:1.5}
@media (max-width:680px){ .nf-search .btn{width:100%;justify-content:center} }
/* ============================================================
CONTACT — intent-first. Instead of one eight-field wall shown to everybody,
the reader picks WHY they came and only the relevant fields appear.
============================================================ */
.ct-hero{padding-top:2.4rem;padding-bottom:1.4rem}
.ct-hero h1{font-size:clamp(2rem,5vw,3.3rem);line-height:1.06;margin:.25rem 0 .9rem;max-width:18ch}
.ct-hero .hero-lede{max-width:60ch}
.ct-meta{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:1.3rem}
.ct-meta span{display:inline-flex;align-items:center;gap:.45rem;color:var(--muted);font-size:.92rem}
.ct-meta svg{color:var(--accent-2)}
.ct-meta a{color:var(--accent-2);text-decoration:none}
.ct-meta a:hover{text-decoration:underline}
.ct-section{padding-top:1rem}
.ct-layout{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:1.6rem;align-items:start}
.ct-main{min-width:0}
.ct-step{margin-bottom:1.6rem}
.ct-step[hidden]{display:none !important}
.ct-step-head{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap}
.ct-step-n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;flex:0 0 auto;
background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--ink);
font-weight:900;font-size:.9rem}
.ct-step-head h2{margin:0;font-size:clamp(1.2rem,2.6vw,1.6rem)}
.ct-back{margin-left:auto;border:1px solid var(--line);background:#0b1a30;color:var(--muted);
border-radius:999px;padding:.4rem .8rem;font:inherit;font-size:.84rem;font-weight:700;cursor:pointer}
.ct-back:hover{border-color:var(--line-strong);color:var(--text)}
/* ---- Step 1: the four reasons anyone actually writes in ---- */
.intent-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));gap:.8rem}
.intent-card{
display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;text-align:left;
border:1px solid var(--line);border-radius:18px;padding:1.1rem 1.05rem;cursor:pointer;
background:linear-gradient(180deg,rgba(56,189,248,.05),rgba(255,255,255,.02));
font-family:inherit;color:inherit;
transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.intent-card:hover{transform:translateY(-3px);border-color:var(--line-strong);
box-shadow:0 16px 40px rgba(34,211,238,.14)}
.intent-card .ic-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
margin-bottom:.65rem;border:1px solid currentColor;background:rgba(255,255,255,.05)}
.intent-card .ic-icon svg{width:20px;height:20px}
.intent-card .ic-title{font-weight:800;font-size:1rem;color:var(--text)}
.intent-card .ic-blurb{color:var(--muted);font-size:.85rem;line-height:1.5;margin-top:.25rem}
/* Colour separates the four at a glance without shouting. */
.intent-card.i-combo .ic-icon{color:#fb7185}
.intent-card.i-ranking .ic-icon{color:#4ade80}
.intent-card.i-hero .ic-icon{color:#c084fc}
.intent-card.i-other .ic-icon{color:var(--accent-2)}
.intent-card[aria-pressed="true"]{
border-color:var(--accent-2);background:linear-gradient(180deg,rgba(34,211,238,.13),rgba(255,255,255,.03));
box-shadow:0 0 0 1px var(--accent-2) inset;
}
/* ---- Step 2: the form ---- */
#contactForm{border:1px solid var(--line);border-radius:22px;padding:1.4rem;
background:linear-gradient(180deg,rgba(56,189,248,.045),rgba(255,255,255,.02))}
.fld{display:flex;flex-direction:column;margin-bottom:1rem;min-width:0}
.fld[hidden],.fld-row[hidden]{display:none !important}
.fld label{font-size:.78rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
color:var(--accent-2);margin-bottom:.4rem}
.fld input,.fld select,.fld textarea{
width:100%;border:1px solid var(--line);background:#0a1930;color:var(--text);
border-radius:13px;padding:.75rem .9rem;font:inherit;font-size:.98rem;
transition:border-color .16s ease,box-shadow .16s ease}
.fld textarea{resize:vertical;min-height:130px;line-height:1.6}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--accent-2);
box-shadow:0 0 0 3px rgba(34,211,238,.14)}
.fld-hint{margin-top:.35rem;font-size:.78rem;color:var(--soft)}
.fld-row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
.ct-verify{align-items:start;margin-top:.4rem}
.ct-consent{display:flex;align-items:flex-start;gap:.6rem;padding:.75rem .9rem;border-radius:13px;
border:1px solid var(--line);background:rgba(255,255,255,.03);cursor:pointer;
font-size:.86rem;color:var(--muted);line-height:1.5;align-self:end;margin-bottom:1rem}
.ct-consent input{width:22px;height:22px;flex:0 0 auto;accent-color:var(--accent-2);cursor:pointer}
#fQuestion{color:var(--text);text-transform:none;letter-spacing:0;font-weight:750}
.ct-actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:.4rem}
/* ---- Success: replaces the form outright. A one-line status under a form the
reader has stopped looking at is far too easy to miss. ---- */
.ct-done{border:1px solid rgba(34,197,94,.3);border-radius:22px;padding:2.2rem 1.6rem;text-align:center;
background:linear-gradient(180deg,rgba(34,197,94,.10),rgba(255,255,255,.02))}
.ct-done[hidden]{display:none !important}
.ct-done-ic{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;margin:0 auto 1rem;
background:rgba(34,197,94,.16);border:1px solid rgba(34,197,94,.4);color:#4ade80}
.ct-done-ic svg{width:28px;height:28px}
.ct-done h2{margin:0 0 .5rem;font-size:1.6rem}
.ct-done p{color:var(--muted);max-width:46ch;margin:0 auto 1.4rem;line-height:1.65}
.ct-done .ct-actions{justify-content:center}
/* ---- Sidebar: the first tip rewrites itself per intent, so it is advice, not decoration ---- */
.ct-side{display:grid;gap:.8rem;position:sticky;top:1rem}
.ct-tip{border:1px solid var(--line);border-radius:18px;padding:1rem 1.1rem;
background:linear-gradient(180deg,rgba(56,189,248,.05),rgba(255,255,255,.02))}
.ct-tip p{margin:.4rem 0 0;color:var(--muted);font-size:.9rem;line-height:1.6}
#ctTip{border-color:rgba(56,189,248,.28);background:linear-gradient(180deg,rgba(34,211,238,.09),rgba(255,255,255,.02))}
#ctTip p{color:var(--text)}
@media (max-width:940px){
.ct-layout{grid-template-columns:1fr}
.ct-side{position:static;order:2}
}
@media (max-width:680px){
.intent-grid{grid-template-columns:1fr;gap:.6rem}
.intent-card{flex-direction:row;align-items:center;gap:.85rem;padding:.9rem}
.intent-card .ic-icon{margin-bottom:0;flex:0 0 auto}
.intent-card .ic-blurb{display:none} /* on a phone the title is enough */
.fld-row{grid-template-columns:1fr;gap:0}
#contactForm{padding:1rem;border-radius:18px}
.ct-actions .btn{flex:1;justify-content:center;text-align:center}
.ct-consent{margin-bottom:0}
}
/* "Welcome back" strip. A quiet inline row, never a modal — it shows on arrival,
and anything that covers content on arrival is an intrusive interstitial that
Google demotes. */
.roster-note{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
margin:.9rem 0 0;padding:.6rem .9rem;border-radius:14px;font-size:.92rem;
background:rgba(34,197,94,.10);border:1px solid rgba(34,197,94,.28);color:#86efac}
.roster-note[hidden]{display:none !important}
.roster-note strong{color:#bbf7d0}
/* Same strip, different meaning: you're looking at someone else's roster. */
.roster-note.is-share{background:rgba(34,211,238,.10);border-color:rgba(56,189,248,.32);color:var(--accent-2)}
.roster-note.is-share strong{color:#cffafe}
.hx-toolbar{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin-bottom:.9rem}
.hx-search{position:relative;flex:1 1 240px;min-width:0}
.hx-search-ic{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);font-size:.85rem;opacity:.55;pointer-events:none}
.hx-search input{width:100%;border:1px solid var(--line);background:#0a1930;color:var(--text);
border-radius:999px;padding:.65rem 1rem .65rem 2.35rem;font:inherit;font-size:.95rem;
transition:border-color .16s ease,box-shadow .16s ease}
.hx-search input:focus{outline:none;border-color:var(--line-strong);box-shadow:0 0 0 3px rgba(34,211,238,.14)}
.hx-sort select{border:1px solid var(--line);background:#0a1930;color:var(--text);
border-radius:999px;padding:.65rem 1rem;font:inherit;font-size:.9rem;cursor:pointer}
.hx-filters{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:.8rem}
.hx-chip{display:inline-flex;align-items:center;gap:.45rem;border:1px solid var(--line);
background:#0b1a30;color:var(--muted);border-radius:999px;padding:.55rem .9rem;
font-weight:800;font-size:.9rem;font-family:inherit;cursor:pointer;
transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease}
.hx-chip:hover{border-color:var(--line-strong);transform:translateY(-1px)}
.hx-chip em{font-style:normal;color:#8296ae;font-size:.8rem} /* explicit colour, never opacity */
.hx-chip[aria-pressed="true"]{background:linear-gradient(135deg,var(--accent),var(--accent-2));
color:var(--ink);border-color:transparent}
.hx-chip[aria-pressed="true"] em{color:inherit;opacity:.75}
.hx-count{color:var(--muted);font-size:.9rem;margin:0 0 1rem}
.hx-empty{margin:2rem 0;text-align:center;color:var(--muted);display:flex;gap:.7rem;
align-items:center;justify-content:center;flex-wrap:wrap}
.hx-empty[hidden]{display:none !important} /* author CSS must beat the UA rule */
.hero-index-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:.85rem}
.hero-index-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;
border:1px solid var(--line);border-radius:16px;overflow:hidden;
background:linear-gradient(180deg,rgba(56,189,248,.06),rgba(255,255,255,.02));
transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.hero-index-card:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:0 16px 40px rgba(34,211,238,.16)}
.hero-index-card.is-hidden{display:none}
.hero-index-card .hi-img{aspect-ratio:1;overflow:hidden;background:radial-gradient(circle at top,rgba(56,189,248,.10),transparent 70%),#0a1a30}
.hero-index-card img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.hero-index-card:hover img{transform:scale(1.05)}
/* The card body is a flex COLUMN. That is the whole trick behind the badge
sitting in the same place on every card: .hi-foot takes margin-top:auto, so it
is pinned to the bottom edge no matter whether the hero's name runs to one
line or three. Without it, the flag floats directly under the name and lands
at a different height on every card. */
.hero-index-card .hi-body{padding:.6rem .7rem;display:flex;flex-direction:column;flex:1;min-width:0}
.hero-index-card h3{margin:0 0 .4rem;font-size:.95rem;font-weight:750;font-family:var(--font-body);line-height:1.3}
.hi-types{display:flex;gap:.3rem;flex-wrap:wrap;margin-bottom:.5rem}
.hi-type{display:inline-flex;align-items:center;gap:.3rem;font-size:.68rem;font-weight:800;
padding:.16rem .42rem;border-radius:7px;border:1px solid var(--line);
background:rgba(255,255,255,.04);color:var(--muted);white-space:nowrap}
.hi-type .type-dot::before{width:.4rem;height:.4rem}
.hi-type.t-cavalry{color:#fca5a5;border-color:rgba(248,113,113,.28);background:rgba(248,113,113,.10)}
.hi-type.t-archer {color:#86efac;border-color:rgba(74,222,128,.28); background:rgba(74,222,128,.10)}
.hi-type.t-footmen{color:#93c5fd;border-color:rgba(96,165,250,.28); background:rgba(96,165,250,.10)}
.hi-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;
gap:.4rem;padding-top:.5rem;border-top:1px solid var(--line)}
.hi-combos{color:var(--muted);font-size:.75rem;font-weight:650;white-space:nowrap}
.hero-letter{margin:1.4rem 0 .2rem;color:var(--accent-2);font-family:var(--font-display);font-size:1.2rem}
@media (max-width:680px){
.hero-index-grid{grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:.6rem}
.hx-toolbar{gap:.5rem}
.hx-sort,.hx-sort select{width:100%}
.hx-chip{font-size:.84rem;padding:.5rem .75rem}
.hi-type{font-size:.62rem}
}
.combo-names a{color:inherit;text-decoration:none}
.combo-names a:hover{color:var(--accent-2);text-decoration:underline}
/* ============================================================
SEARCH · SHARE · FILTERS
============================================================ */
/* Fluid search. Rather than a fixed width that truncates its own placeholder,
the form is the flex-grow child of .nav-links: it takes the leftover space,
clamped so it never gets uselessly narrow or absurdly wide. On focus the
clamp lifts, so it expands into the room it has instead of a hardcoded px. */
.nav-search{position:relative;display:flex;align-items:center;margin-left:.5rem;
flex:1 1 auto;min-width:9rem;max-width:15rem;transition:max-width .22s ease}
.nav-search:focus-within{max-width:22rem}
.nav-search-icon{position:absolute;left:.75rem;font-size:.8rem;opacity:.55;pointer-events:none;line-height:1}
.nav-search input{width:100%;min-width:0;border:1px solid var(--line);background:#0a1930;color:var(--text);
border-radius:999px;padding:.5rem .9rem .5rem 2.1rem;font:inherit;font-size:.88rem;
text-overflow:ellipsis;transition:border-color .16s ease,box-shadow .16s ease}
/* WCAG AA needs 4.5:1 for placeholder text. On the #0a1930 field background,
var(--soft) measures 4.19 and the browser's default gray 3.82 — both fail,
and Lighthouse drops Accessibility from 100 to 96 for it. #8296ae = 5.78:1. */
input::placeholder,textarea::placeholder{color:#8296ae;opacity:1}
/* ============================================================
HERO ATTRIBUTES — Might / HP / Damage / Resistance / Combat Speed.
Each is optional in the markup: an attribute left at 0 is skipped, and a
hero with none of them renders no section at all rather than an empty shell.
============================================================ */
.ic{width:1.15em;height:1.15em;flex:0 0 auto;vertical-align:-.18em}
.ic-lg{width:1.9rem;height:1.9rem}
/* "Stats" flag — lives in .hi-foot, which is pinned to the card's bottom edge,
so it appears in exactly the same spot on every card. No margin-top here: the
flex row positions it. */
.hi-flag{display:inline-flex;align-items:center;gap:.28rem;flex:0 0 auto;
font-size:.64rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
padding:.18rem .42rem;border-radius:999px;white-space:nowrap;
background:rgba(34,211,238,.14);color:var(--accent-2);border:1px solid rgba(56,189,248,.28)}
.hi-flag svg{width:.85em;height:.85em}
.kit-section{padding-top:2.2rem}
.kit-lede{color:var(--muted);margin:.2rem 0 1.4rem;max-width:75ch;line-height:1.65}
/* Auto-fit: 5 attributes today, any number tomorrow — no column count to keep
in sync with roc_stats_def(). */
.attr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.9rem}
.attr-card{
border:1px solid var(--line);border-radius:18px;padding:1rem 1.05rem;
background:linear-gradient(180deg,rgba(56,189,248,.06),rgba(255,255,255,.02));
transition:border-color .16s ease,transform .16s ease;
}
.attr-card:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.ac-top{display:flex;align-items:center;gap:.5rem}
.ac-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;flex:0 0 auto;
border:1px solid currentColor;background:rgba(255,255,255,.05)}
.ac-icon svg{width:16px;height:16px}
.ac-label{font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ac-val{display:block;margin:.55rem 0 .6rem;font-size:1.9rem;line-height:1;font-weight:800;
color:var(--text);font-variant-numeric:tabular-nums}
.ac-bar{height:7px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.ac-bar span{display:block;height:100%;border-radius:999px;
background:linear-gradient(90deg,var(--accent),var(--accent-2))}
/* Colour carries meaning: offence warm, defence cool, speed electric. */
.attr-card.a-might .ac-icon{color:var(--accent-2)}
.attr-card.a-hp .ac-icon{color:#4ade80}
.attr-card.a-damage .ac-icon{color:#fb7185}
.attr-card.a-damage .ac-bar span{background:linear-gradient(90deg,#f43f5e,#fb7185)}
.attr-card.a-resistance .ac-icon{color:#60a5fa}
.attr-card.a-resistance .ac-bar span{background:linear-gradient(90deg,#3b82f6,#60a5fa)}
.attr-card.a-hp .ac-bar span{background:linear-gradient(90deg,#22c55e,#4ade80)}
.attr-card.a-speed .ac-icon{color:#fbbf24}
.attr-card.a-speed .ac-bar span{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
@media (max-width:680px){
.attr-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.7rem}
.attr-card{padding:.85rem .9rem;border-radius:15px}
.ac-val{font-size:1.5rem}
}
.id-row{display:flex;gap:.5rem;align-items:center}
.id-row input{flex:1 1 auto;min-width:0}
.id-row .btn{flex:0 0 auto;white-space:nowrap}
/* ---- Admin: attribute inputs + progress ---- */
.modal-sep{display:flex;align-items:center;gap:.7rem;margin:1.4rem 0 .9rem;color:var(--soft);
font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.modal-sep::after{content:"";flex:1;height:1px;background:var(--line)}
/* Auto-fit rather than a fixed column count, so adding a sixth attribute later
needs no CSS change — it just wraps. */
.stat-inputs{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:.7rem}
.content-progress{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line)}
.cp-head{margin-bottom:.6rem}
.cp-head strong{display:block;margin-bottom:.2rem}
.cp-bar{height:8px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.cp-bar span{display:block;height:100%;border-radius:999px;transition:width .4s ease;
background:linear-gradient(90deg,var(--accent),var(--accent-2))}
/* The gap list: WHO is missing WHAT, clickable straight into the editor. */
.cp-gaps[hidden]{display:none !important}
.cp-gap-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.5rem;
max-height:320px;overflow:auto;padding:.15rem}
.cp-gap{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;text-align:left;
border:1px solid var(--line);border-radius:12px;padding:.55rem .7rem;cursor:pointer;
background:rgba(255,255,255,.03);font-family:inherit;color:inherit;
transition:border-color .14s ease,transform .14s ease}
.cp-gap:hover{border-color:var(--line-strong);transform:translateY(-1px)}
.cp-gap .cg-name{font-weight:800;font-size:.92rem;color:var(--text)}
.cp-gap .cg-miss{font-size:.75rem;color:var(--soft);line-height:1.4}
/* A hero with nothing at all is a different problem from one missing a field. */
.cp-gap.is-empty{border-color:rgba(251,113,133,.35);background:rgba(251,113,133,.07)}
.cp-gap.is-empty .cg-miss{color:#fca5a5}
@media (max-width:480px){ .stat-inputs{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* ---- Touch targets (WCAG 2.2 / Lighthouse: min 24x24 CSS px) ----
These inline prose links measure 16-23px tall and were failing.
Vertical padding on an INLINE element enlarges its hit box WITHOUT pushing
the surrounding text lines apart — so the tap area grows and the layout does
not move. The underline is nudged back onto the text to compensate. */
.showcase-note a,.seo-card h3 a,.seo-card p a,.faq-section p a,.hero-lede a,.footer-inner p a,.combo-meta a{
padding-block:5px;
}
.hero-lede a,.faq-section p a,.showcase-note a,.seo-card p a,.footer-inner p a,.combo-meta a{
background-position:0 calc(100% - 5px);
}
.results-controls input[type="checkbox"]{
width:24px;height:24px;accent-color:var(--accent-2);cursor:pointer;flex:0 0 auto;
}
.nav-search input:focus{outline:none;border-color:var(--line-strong);box-shadow:0 0 0 3px rgba(34,211,238,.14)}
.nav-search:focus-within .nav-search-icon{opacity:1}
/* share button on ranked rows (4th column) */
.rank-list li{grid-template-columns:56px 1fr auto auto}
.share-btn{border:1px solid var(--line);background:#0b1a30;color:var(--accent-2);border-radius:10px;
width:36px;height:36px;display:grid;place-items:center;cursor:pointer;font-size:1rem;transition:all .14s ease}
.share-btn:hover{border-color:var(--line-strong);background:rgba(34,211,238,.14);transform:translateY(-1px)}
.share-btn.copied{background:var(--green);color:var(--ink);border-color:transparent}
.combo-filter-bar{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;margin:1.2rem 0 .2rem}
.combo-filter-bar input{flex:1;min-width:220px;border:1px solid rgba(56,189,248,.24);background:#0a1930;color:var(--text);
border-radius:14px;padding:.75rem .95rem;font:inherit}
.combo-filter-bar input:focus{outline:none;border-color:var(--line-strong);box-shadow:0 0 0 3px rgba(34,211,238,.14)}
.filter-count{color:var(--muted);font-weight:700;font-size:.9rem}
.search-page-form{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:.6rem;max-width:640px}
.search-page-form input{flex:1;min-width:240px;border:1px solid rgba(56,189,248,.24);background:#0a1930;color:var(--text);
border-radius:16px;padding:.9rem 1.1rem;font:inherit;font-size:1.02rem}
.search-page-form input:focus{outline:none;border-color:var(--line-strong);box-shadow:0 0 0 4px rgba(34,211,238,.16)}
/* ---------- Subscribe pop-up ---------- */
/* CRITICAL: author CSS beats the UA's [hidden]{display:none}, so we must
re-assert it — otherwise this fixed, full-viewport overlay stays in the
DOM at opacity:0 and silently eats every click on the site. */
.sub-pop[hidden]{display:none !important}
.sub-pop{position:fixed;inset:0;z-index:400;display:grid;place-items:center;padding:1.2rem;
background:rgba(2,6,14,.72);backdrop-filter:blur(4px);opacity:0;pointer-events:none;
transition:opacity .25s ease}
.sub-pop.open{opacity:1;pointer-events:auto}
.sub-pop-card{position:relative;width:min(460px,100%);padding:1.6rem;border-radius:24px;
background:linear-gradient(180deg,rgba(15,32,58,.98),rgba(9,20,40,.98));
border:1px solid var(--line);box-shadow:var(--shadow);transform:translateY(14px);transition:transform .25s ease}
.sub-pop.open .sub-pop-card{transform:none}
.sub-pop-card h3{margin:.5rem 0 .4rem;font-size:1.35rem;line-height:1.2}
.sub-pop-card p{margin:0 0 1rem;color:var(--muted);font-size:.94rem}
.sub-close{position:absolute;top:.7rem;right:.8rem;width:32px;height:32px;border-radius:50%;
border:1px solid var(--line);background:#0b1a30;color:var(--muted);font-size:1.1rem;cursor:pointer}
.sub-close:hover{color:#fff;border-color:var(--line-strong)}
.sub-pop-card input[type=email]{width:100%;border:1px solid rgba(56,189,248,.28);background:#0a1930;color:var(--text);
border-radius:14px;padding:.85rem 1rem;font:inherit;margin-bottom:.7rem}
.sub-pop-card input[type=email]:focus{outline:none;border-color:var(--line-strong);box-shadow:0 0 0 4px rgba(34,211,238,.16)}
.sub-consent{display:flex;gap:.6rem;align-items:flex-start;color:var(--muted);font-size:.86rem;margin-bottom:.9rem}
.sub-consent input{accent-color:var(--accent);margin-top:.2rem}
.sub-pop-card .btn{width:100%;justify-content:center}
.sub-msg{margin:.7rem 0 0;font-size:.88rem;font-weight:700;min-height:1.1rem}
.sub-msg.ok{color:#9df0c6}
.sub-msg.err{color:#ffb1bd}
/* ============================================================
ADS (AdSense in-content units)
The wrapper RESERVES height before the ad loads. Without this the ad
pops in and shoves the page down — that's cumulative layout shift (CLS),
a Core Web Vitals ranking signal. Never let an ad ship without it.
============================================================ */
.ad-slot{display:block;width:min(var(--container),calc(100% - 2rem));margin:2.6rem auto;
min-height:300px;text-align:center;contain:layout}
.ad-slot .ad-label{display:block;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
color:var(--soft);font-weight:800;margin-bottom:.5rem}
.ad-slot ins{display:block;min-height:250px;border-radius:14px;overflow:hidden}
@media (max-width:680px){
.ad-slot{margin:1.9rem auto;min-height:280px}
}
/* Unfilled ad = collapse it. AdSense stamps data-ad-status="unfilled" on the
<ins> when it has no ad to serve (very common during review and on low-fill
geos). Without this, the reserved 300px leaves an empty grey hole on every
page — which reviewers see, and users bounce off. */
.ad-slot:has(ins[data-ad-status="unfilled"]){min-height:0;margin:0;display:none}
.ad-slot ins[data-ad-status="unfilled"]{display:none!important}
/* "Get update alerts" — moved out of the nav and parked next to the combo-count
pill. It converts better there: the reader has just been told the database
holds N ranked combos and is actively maintained, which is the whole pitch
for subscribing. The footer button remains as the site-wide fallback. */
.pill-row{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin:.9rem 0 0}
.pill-row .update-pill{margin:0}
.alert-chip{display:inline-flex;align-items:center;gap:.35rem;border:1px solid rgba(56,189,248,.4);
background:rgba(34,211,238,.12);color:var(--accent-2);border-radius:999px;padding:.42rem .8rem;
font-weight:800;font-size:.82rem;font-family:inherit;cursor:pointer;white-space:nowrap;
transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease}
.alert-chip:hover{background:rgba(34,211,238,.22);border-color:var(--line-strong);color:#fff;transform:translateY(-1px)}
/* MOBILE: render the prompt as a slim bottom bar instead of a modal.
Google demotes interstitials that cover content on mobile; a small banner
like this is explicitly allowed — same component, no ranking risk. */
@media (max-width:680px){
.pill-row{gap:.45rem}
.sub-pop{position:fixed;inset:auto 0 0 0;display:block;padding:.55rem;
background:none;backdrop-filter:none}
.sub-pop-card{width:100%;padding:.95rem 1rem;border-radius:18px;
transform:translateY(120%);box-shadow:0 -10px 40px rgba(1,6,16,.6)}
.sub-pop.open .sub-pop-card{transform:none}
.sub-pop-card .mini-eyebrow,.sub-pop-card p{display:none}
.sub-pop-card h3{font-size:1.02rem;margin:.1rem 0 .6rem;padding-right:2rem}
.sub-consent{font-size:.76rem;margin-bottom:.6rem}
.sub-close{top:.45rem;right:.5rem;width:28px;height:28px}
}
@media (max-width:680px){
.rank-list li{grid-template-columns:44px 1fr auto}
}
/* ---------- Responsive ---------- */
@media (max-width:940px){
.hero-section,.intro-content,.finder-grid,.results-head{grid-template-columns:1fr;display:grid}
.control-panel{position:static}
.steps,.stats-row,.seo-grid,.podium{grid-template-columns:1fr 1fr}
.results-head{align-items:start}
.hero-panel{order:2}
.insight-grid{grid-template-columns:1fr}
.top-stat-bar{grid-template-columns:repeat(2,minmax(0,1fr));max-width:100%}
.footer-inner{grid-template-columns:1fr;gap:1.4rem}
.contact-layout{grid-template-columns:1fr}
.contact-help{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:680px){
.nav{align-items:center;border-radius:18px}
.nav-toggle{display:block}
.nav-links{display:none;position:absolute;right:0;top:64px;background:rgba(9,18,33,.98);border:1px solid var(--line);border-radius:20px;padding:.55rem;flex-direction:column;align-items:stretch;min-width:230px;z-index:20}
.nav-links.open{display:flex}
.hero-section{padding:2.5rem 0 3rem}
.hero-copy h1{font-size:clamp(2rem,9.5vw,2.9rem)}
.hero-actions{display:grid;grid-template-columns:1fr;width:100%}
.hero-actions .btn{text-align:center;justify-content:center}
.trust-strip{gap:.45rem}
.trust-strip span{font-size:.76rem}
.steps,.stats-row,.seo-grid{grid-template-columns:1fr}
.stats-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.toolbar{align-items:flex-start;flex-direction:column}
.hero-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
.compact .hero-cards{grid-template-columns:1fr}
.combo-results{grid-template-columns:1fr}
.results-controls{display:grid;grid-template-columns:1fr;width:100%}
.results-controls select,.results-controls label{width:100%}
.quick-actions .btn,.quick-actions a{flex:1;justify-content:center}
.section{padding:3rem 0}
.finder-section{padding-top:2.4rem}
.selected-box{position:sticky;top:.5rem;z-index:8;background:linear-gradient(180deg,rgba(13,26,46,.98),rgba(9,18,33,.96));border:1px solid rgba(56,189,248,.2);border-radius:20px;padding:.75rem;margin-top:.75rem}
.top-stat-bar{gap:.55rem}
.top-stat-bar div{padding:.75rem .7rem;border-radius:16px}
.top-stat-bar span{font-size:.66rem}
.podium{grid-template-columns:1fr}
/* rank · names · share. Must stay 3 columns: .faces is hidden below, but the
share button is still a grid child — with only 2 columns it wrapped onto a
second row under the rank badge. */
.rank-list li{grid-template-columns:44px 1fr auto;gap:.7rem}
.rank-list .rk{width:38px;height:38px;border-radius:12px}
.rank-list .faces{display:none}
.contact-hero{padding-top:2.1rem;padding-bottom:2.6rem}
.form-grid,.contact-help{grid-template-columns:1fr}
.form-actions .btn{width:100%;text-align:center;justify-content:center}
.contact-form{padding:.9rem}
.contact-result{margin:2rem auto;padding:1.2rem}
.showcase-slots{gap:.45rem}
.site-footer .footer-inner{gap:1rem}
}
/* The nav needs to collapse EARLIER than the rest of the layout. At 768px
(iPad portrait) the brand + 4 links + search do not fit on one line, so the
burger has to appear well before the 680px phone breakpoint. */
@media (max-width:820px){
.nav-toggle{display:block}
.nav-links{display:none;position:absolute;right:0;top:64px;background:rgba(9,18,33,.98);
border:1px solid var(--line);border-radius:20px;padding:.55rem;flex-direction:column;
align-items:stretch;min-width:230px;z-index:20;flex:none}
.nav-links.open{display:flex}
/* Inside the dropdown the search is a full-width row — release the desktop clamp. */
.nav-search,.nav-search:focus-within{margin:.4rem 0 0;flex:none;min-width:0;max-width:none;width:100%}
}
@media (max-width:380px){
.hero-cards{grid-template-columns:1fr}
.top-stat-bar,.stats-row{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
*{scroll-behavior:auto;transition:none!important;animation:none!important}
}
/* ============================================================
ADMIN CONSOLE (admin/)
============================================================ */
.admin-body{min-height:100vh}
.admin-gate{position:fixed;inset:0;display:grid;place-items:center;padding:1.2rem;z-index:100;
background:radial-gradient(1000px 520px at 50% -10%,rgba(34,211,238,.24),transparent 68%),linear-gradient(160deg,#08111f,#060d18);}
.admin-gate-card{width:min(430px,100%);padding:1.7rem;border-radius:24px;text-align:center;
background:linear-gradient(180deg,rgba(15,32,58,.96),rgba(9,20,38,.96));border:1px solid var(--line);box-shadow:var(--shadow)}
.admin-gate-card .brand-mark{margin:0 auto 1rem}
.admin-gate-card h1{font-size:1.5rem;margin:.2rem 0 .3rem}
.admin-gate-card p{color:var(--muted);margin:0 0 1.1rem;font-size:.92rem}
.admin-gate-card input{width:100%;border:1px solid rgba(56,189,248,.28);background:#0a1930;color:var(--text);
border-radius:14px;padding:.85rem 1rem;font-size:1rem;font:inherit;text-align:center;letter-spacing:.04em;margin-bottom:.35rem}
.admin-gate-card input:focus{outline:none;border-color:var(--line-strong);box-shadow:0 0 0 4px rgba(34,211,238,.18)}
.admin-gate-card .gate-error{color:#ffb1bd;font-size:.86rem;margin:.55rem 0 0;min-height:1.1rem}
.admin-gate-card .gate-note{color:var(--soft);font-size:.78rem;margin:.9rem 0 0}
.admin-shell{display:none}
.admin-shell.ready{display:block}
.admin-topbar{position:sticky;top:0;z-index:30;border-bottom:1px solid var(--line);
background:linear-gradient(180deg,rgba(11,22,40,.96),rgba(8,17,31,.82));backdrop-filter:blur(14px)}
.admin-topbar-inner{width:min(1240px,calc(100% - 2rem));margin:auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 0;flex-wrap:wrap}
.admin-tabs{display:flex;gap:.35rem;flex-wrap:wrap}
.admin-tab{border:1px solid var(--line);background:#0b1a30;color:var(--muted);border-radius:999px;
padding:.55rem .95rem;font-weight:800;cursor:pointer;font-size:.92rem;transition:all .15s ease}
.admin-tab:hover{color:#fff;border-color:var(--line-strong)}
.admin-tab[aria-selected="true"]{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--ink);border-color:transparent;box-shadow:0 10px 22px rgba(34,211,238,.32)}
.save-status{display:inline-flex;align-items:center;gap:.4rem;font-size:.84rem;font-weight:800;color:var(--muted)}
.save-status::before{content:"";width:.6rem;height:.6rem;border-radius:50%;background:var(--soft)}
.save-status.saving{color:#ffe08a}.save-status.saving::before{background:#ffcf5a;box-shadow:0 0 8px #ffcf5a}
.save-status.saved{color:#8ef2c4}.save-status.saved::before{background:var(--green);box-shadow:0 0 8px rgba(52,211,153,.8)}
.save-status.error{color:#ffb1bd}.save-status.error::before{background:var(--red);box-shadow:0 0 8px var(--red)}
.admin-main{width:min(1240px,calc(100% - 2rem));margin:1.4rem auto 4rem}
.admin-panel{display:none}
.admin-panel.active{display:block;animation:riseIn .35s ease both}
.admin-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem}
.admin-head h2{margin:0 0 .25rem;font-size:clamp(1.4rem,3vw,2rem)}
.admin-head p{margin:0;color:var(--muted);max-width:70ch}
.admin-card{background:linear-gradient(180deg,rgba(56,189,248,.05),rgba(255,255,255,.02));
border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-soft);padding:1.1rem}
.admin-grid{display:grid;grid-template-columns:360px 1fr;gap:1.1rem;align-items:start}
@media (max-width:900px){.admin-grid{grid-template-columns:1fr}}
.admin-field{display:grid;gap:.4rem;margin-bottom:.9rem}
.admin-field label{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-2);font-weight:900}
.admin-field input[type=text],.admin-field input[type=search],.admin-field input[type=password],.admin-field select{
width:100%;border:1px solid rgba(56,189,248,.24);background:#0a1930;color:var(--text);
border-radius:12px;padding:.72rem .85rem;font-size:.98rem;font:inherit}
.admin-field input:focus,.admin-field select:focus{outline:none;border-color:var(--line-strong);box-shadow:0 0 0 3px rgba(34,211,238,.16)}
.admin-hint{color:var(--soft);font-size:.8rem}
.type-check-row{display:flex;gap:.5rem;flex-wrap:wrap}
.type-check{display:inline-flex;align-items:center;gap:.45rem;border:1px solid var(--line);background:#0b1a30;
border-radius:999px;padding:.5rem .8rem;cursor:pointer;font-weight:750;font-size:.9rem;color:var(--muted);user-select:none}
.type-check input{accent-color:var(--accent);width:1rem;height:1rem}
.type-check.on{background:linear-gradient(135deg,rgba(34,211,238,.3),rgba(56,189,248,.18));color:#fff;border-color:transparent}
.img-drop{border:1.5px dashed rgba(56,189,248,.4);border-radius:16px;padding:1rem;text-align:center;
background:rgba(10,22,44,.5);cursor:pointer;transition:border-color .15s ease,background .15s ease}
.img-drop:hover,.img-drop.drag{border-color:var(--accent-2);background:rgba(34,211,238,.12)}
.img-drop img{width:96px;height:96px;object-fit:cover;border-radius:14px;margin:0 auto .6rem;border:1px solid var(--line)}
.img-drop p{margin:.2rem 0;color:var(--muted);font-size:.86rem}
.admin-toolbar{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-bottom:1rem}
.admin-toolbar input[type=search]{flex:1;min-width:180px}
.admin-count{color:var(--muted);font-size:.9rem;font-weight:700}
.hero-admin-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.7rem;max-height:70vh;overflow:auto;padding:.15rem}
.hero-admin-row{display:grid;grid-template-columns:48px 1fr auto;gap:.65rem;align-items:center;
border:1px solid var(--line);border-radius:14px;padding:.5rem;background:rgba(56,189,248,.04)}
.hero-admin-row img{width:48px;height:48px;border-radius:10px;object-fit:cover;background:#0a1a30;border:1px solid var(--line)}
.hero-admin-row h4{margin:0;font-size:.94rem;font-weight:750}
.hero-admin-row .types{color:var(--muted);font-size:.76rem;margin-top:.1rem}
.row-actions{display:flex;gap:.3rem}
.icon-btn{border:1px solid var(--line);background:#0b1a30;color:var(--text);border-radius:9px;
width:30px;height:30px;display:grid;place-items:center;cursor:pointer;font-size:.9rem;transition:all .14s ease}
.icon-btn:hover{border-color:var(--line-strong)}
.icon-btn.danger:hover{background:rgba(251,113,133,.2);border-color:rgba(251,113,133,.5);color:#ffb1bd}
/* Rankings */
.rank-tabs{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1rem}
.rank-tab{border:1px solid var(--line);background:#0b1a30;color:var(--muted);border-radius:999px;
padding:.5rem .9rem;font-weight:800;cursor:pointer;font-size:.9rem}
.rank-tab[aria-selected="true"]{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--ink);border-color:transparent}
.rank-tab .n{opacity:.7;font-weight:700;margin-left:.3rem;font-size:.82rem}
.rank-admin-list{display:grid;gap:.5rem;max-height:66vh;overflow:auto;padding:.2rem}
.rank-admin-row{display:grid;grid-template-columns:auto 46px 1fr auto;gap:.7rem;align-items:center;
border:1px solid var(--line);border-radius:14px;padding:.5rem .6rem;background:rgba(56,189,248,.04);
transition:border-color .14s ease,box-shadow .14s ease}
.rank-admin-row.dragging{opacity:.55;border-color:var(--accent-2);box-shadow:0 10px 26px rgba(1,6,16,.6)}
.rank-admin-row.drop-target{border-color:var(--accent-2);box-shadow:0 0 0 2px rgba(56,189,248,.4) inset}
.drag-handle{cursor:grab;color:var(--soft);font-size:1.1rem;padding:0 .2rem;user-select:none}
.drag-handle:active{cursor:grabbing}
.rank-num{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;font-weight:900;
background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--accent-2);font-family:var(--font-display)}
.rank-admin-row:nth-child(-n+3) .rank-num{background:linear-gradient(135deg,var(--accent-2),var(--ice));color:var(--ink);border-color:transparent}
.rank-combo-faces{display:flex;gap:.4rem;align-items:center}
.rank-combo-faces img{width:38px;height:38px;border-radius:9px;object-fit:cover;border:1px solid var(--line);background:#0a1a30}
.rank-combo-info{min-width:0}
.rank-combo-info .names{font-weight:750;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-combo-info .pos{color:var(--muted);font-size:.76rem;margin-top:.1rem}
/* Modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(2,6,14,.74);backdrop-filter:blur(4px);display:none;place-items:center;z-index:200;padding:1.2rem}
.modal-backdrop.open{display:grid}
.modal{width:min(560px,100%);max-height:88vh;overflow:auto;border-radius:22px;padding:1.3rem;
background:linear-gradient(180deg,rgba(15,32,58,.98),rgba(9,20,40,.98));border:1px solid var(--line);box-shadow:var(--shadow)}
.modal h3{margin:.1rem 0 1rem;font-size:1.3rem}
.modal .modal-actions{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1.2rem;flex-wrap:wrap}
.combo-pick{display:grid;grid-template-columns:1fr;gap:.7rem}
.combo-pick .slot-pick{display:grid;grid-template-columns:64px 1fr;gap:.7rem;align-items:center;
border:1px solid var(--line);border-radius:14px;padding:.55rem;background:rgba(56,189,248,.04)}
.combo-pick .slot-pick img{width:64px;height:64px;border-radius:11px;object-fit:cover;background:#0a1a30;border:1px solid var(--line)}
.combo-pick .slot-pick label{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--accent-2);font-weight:900;display:block;margin-bottom:.3rem}
.toast{position:fixed;left:50%;bottom:1.3rem;transform:translateX(-50%) translateY(20px);opacity:0;
background:linear-gradient(135deg,var(--accent),var(--accent-2));color:var(--ink);font-weight:800;border-radius:999px;
padding:.7rem 1.2rem;box-shadow:0 14px 34px rgba(34,211,238,.44);z-index:300;transition:all .25s ease;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.warn{background:linear-gradient(135deg,#f5b942,#f2c14e);color:#2a1c04}
.toast.err{background:linear-gradient(135deg,#e0553f,#fb7185);color:#fff}
.badge-soft{display:inline-block;font-size:.72rem;font-weight:800;padding:.25rem .55rem;border-radius:999px;
background:rgba(34,211,238,.18);color:var(--accent-2);border:1px solid rgba(56,189,248,.24)}
/* ---------------- Admin: Security panel ----------------
Built to be READ AT A GLANCE. If everything is green you close the tab; if
anything is red you look. A wall of log lines nobody reads is not a control. */
.tab-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-left:.35rem;
background:#fb7185;box-shadow:0 0 0 3px rgba(251,113,133,.25);vertical-align:middle}
.tab-dot[hidden]{display:none !important}
.sec-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.7rem;margin-bottom:1rem}
.sec-card{border:1px solid var(--line);border-radius:16px;padding:1rem 1.1rem;
background:linear-gradient(180deg,rgba(56,189,248,.05),rgba(255,255,255,.02))}
.sec-card .sc-n{display:block;font-size:2rem;font-weight:800;line-height:1;color:var(--text);
font-variant-numeric:tabular-nums}
.sec-card .sc-l{display:block;margin-top:.4rem;font-size:.78rem;color:var(--muted);line-height:1.45}
.sec-card.good{border-color:rgba(34,197,94,.3);background:rgba(34,197,94,.07)}
.sec-card.good .sc-n{color:#4ade80}
.sec-card.warn{border-color:rgba(250,204,21,.32);background:rgba(250,204,21,.07)}
.sec-card.warn .sc-n{color:#fbbf24}
.sec-card.bad{border-color:rgba(251,113,133,.4);background:rgba(251,113,133,.09)}
.sec-card.bad .sc-n{color:#fca5a5}
.sec-locked{display:grid;gap:.5rem;margin-top:.9rem}
.sec-lock-row{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
border:1px solid rgba(251,113,133,.3);background:rgba(251,113,133,.07);
border-radius:12px;padding:.55rem .7rem;font-size:.88rem}
.sec-lock-row code{color:#fca5a5}
.sec-lock-t{margin-left:auto;color:var(--muted);font-size:.82rem;white-space:nowrap}
.sec-log{display:grid;gap:.3rem;max-height:60vh;overflow:auto;padding:.15rem}
.sec-row{display:grid;grid-template-columns:20px 108px auto 34px minmax(0,1fr);gap:.5rem;align-items:center;
border:1px solid var(--line);border-radius:10px;padding:.45rem .6rem;font-size:.82rem}
.sec-row.fail{border-color:rgba(251,113,133,.24);background:rgba(251,113,133,.05)}
.sec-row.ok{border-color:rgba(34,197,94,.24);background:rgba(34,197,94,.05)}
.sec-row .sr-k{font-weight:900}
.sec-row.fail .sr-k{color:#fca5a5}
.sec-row.ok .sr-k{color:#4ade80}
.sec-row .sr-when{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.sec-row .sr-ip{color:var(--accent-2);white-space:nowrap}
.sec-row .sr-x{color:var(--soft);font-weight:800}
.sec-row .sr-ua{color:var(--soft);font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sec-offenders{display:grid;gap:.4rem}
.sec-off{display:flex;justify-content:space-between;align-items:center;gap:.6rem;
border:1px solid var(--line);border-radius:10px;padding:.45rem .65rem;font-size:.85rem}
.sec-off code{color:var(--accent-2)}
.sec-off span{color:var(--muted)}
.sec-off.bad{border-color:rgba(251,113,133,.35);background:rgba(251,113,133,.07)}
.sec-off.bad span{color:#fca5a5;font-weight:800}
.sec-errors{display:grid;gap:.35rem;max-height:220px;overflow:auto}
.sec-err{border:1px solid rgba(250,204,21,.25);background:rgba(250,204,21,.06);
border-radius:9px;padding:.45rem .6rem;font-size:.76rem;color:#fde68a;
font-family:var(--font-mono,monospace);word-break:break-word;line-height:1.5}
@media (max-width:680px){
.sec-row{grid-template-columns:18px 1fr auto;row-gap:.25rem}
.sec-row .sr-ua{display:none}
}
/* Subscribers: the one-reminder control + its "already nudged" marker */
.sub-remind{margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--line)}
.sub-remind[hidden]{display:none !important}
.sub-flag{display:inline-flex;align-items:center;font-size:.68rem;font-weight:800;letter-spacing:.05em;
text-transform:uppercase;padding:.22rem .5rem;border-radius:999px;white-space:nowrap;
background:rgba(148,163,184,.14);color:var(--soft);border:1px solid rgba(148,163,184,.24)}
.stat-mini{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:.4rem}
.stat-mini span{font-size:.82rem;color:var(--muted)}
.stat-mini strong{color:var(--accent-2)}
/* ---- Admin: ads master switch ---- */
.ads-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1.2rem;flex-wrap:wrap}
.ads-pill{display:inline-block;margin-left:.5rem;font-size:.7rem;font-weight:800;letter-spacing:.06em;
text-transform:uppercase;padding:.24rem .55rem;border-radius:999px;vertical-align:middle;
background:rgba(148,163,184,.16);color:var(--muted);border:1px solid rgba(148,163,184,.22)}
.ads-pill.on{background:rgba(34,197,94,.16);color:#4ade80;border-color:rgba(34,197,94,.3)}
.ads-pill.off{background:rgba(248,113,113,.14);color:#fca5a5;border-color:rgba(248,113,113,.28)}
.ads-switch{flex:0 0 auto;width:62px;height:34px;border-radius:999px;cursor:pointer;position:relative;
border:1px solid rgba(148,163,184,.28);background:rgba(148,163,184,.16);
transition:background .2s ease,border-color .2s ease}
.ads-switch[aria-checked="true"]{background:linear-gradient(90deg,rgba(34,211,238,.85),rgba(56,189,248,.85));
border-color:rgba(56,189,248,.5)}
.ads-switch:disabled{opacity:.45;cursor:not-allowed}
.ads-knob{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#e2e8f0;
box-shadow:0 2px 6px rgba(2,6,14,.5);transition:transform .2s ease}
.ads-switch[aria-checked="true"] .ads-knob{transform:translateX(28px);background:#08111f}
/* ============================================================
POLISH — micro-interactions & finishing (v39)
============================================================ */
/* Anchor targets clear the header */
#finder,#rankings,#toplists,#faq,#top,#ranked-list{scroll-margin-top:2rem}
/* Accessible focus ring */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,.hero-card:focus-visible,.pill:focus-visible{
outline:2px solid var(--accent);outline-offset:2px;
}
/* Custom scrollbar */
html{scrollbar-color:var(--accent-deep) transparent}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--accent-deep),#0b2a3d);border-radius:999px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--accent),var(--accent-2))}
/* Primary button sheen sweep */
.btn.primary{position:relative;overflow:hidden}
.btn.primary::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.5) 50%,transparent 75%);transform:translateX(-130%);transition:transform .65s ease}
.btn.primary:hover::after{transform:translateX(130%)}
/* Eyebrow leading line */
.eyebrow{display:inline-flex;align-items:center;gap:.55rem}
.eyebrow::before{content:"";width:1.6rem;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent),transparent)}
/* Animated hero glow */
@keyframes glowPulse{0%,100%{opacity:.82}50%{opacity:1}}
.hero-panel::before{animation:glowPulse 6s ease-in-out infinite}
/* Section heading kicker underline */
.section-heading h2::after,.intro-content h2::after{content:"";display:block;width:54px;height:3px;margin-top:.7rem;border-radius:3px;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
/* Animated prose-link underline */
.hero-lede a,.faq-section p a,.showcase-note a,.seo-card p a,.footer-inner p a,.combo-meta a{
text-decoration:none;color:var(--accent-2);
background-image:linear-gradient(var(--accent-2),var(--accent-2));
background-size:0% 2px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .25s ease;
}
.hero-lede a:hover,.faq-section p a:hover,.showcase-note a:hover,.seo-card p a:hover,.footer-inner p a:hover{background-size:100% 2px}
/* Subtle top highlight on cards */
.combo-card::after,.podium article::after{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);pointer-events:none}
.podium article{position:relative}
/* Nicer FAQ markers */
.faq-section summary{list-style:none;display:flex;align-items:center}
.faq-section summary::-webkit-details-marker{display:none}
.faq-section summary::before{content:"＋";color:var(--accent);font-weight:900;margin-right:.6rem;display:inline-block;width:1rem}
.faq-section details[open] summary::before{content:"－"}
/* Consistent dark backdrop while images load */
.hero-card .image-wrap,.podium .trio img,.showcase-slot img,.rank-list .faces img{background-color:#0a1a30}