/* ===========================================================================
   portal.css — ESPYCRUX Games dashboard shell.
   Palette comes from the ESPYCRUX shared design system (--espy-* tokens served
   by services.espycrux.com/design/v1.css); the four local palettes remain as
   the fallback when that service is unavailable. GPU-friendly, no layout
   thrash. Animations use transform/opacity only. Zero JS required for paint.
   Sections:
     1. Design-system tokens (:root) + local fallback palettes ([data-theme])
     2. Base / ambient backdrop
     3. App shell: rail + stage + columns
     4. Topbar (greeting, search, design switch, account)
     5. Featured hero
     6. Section heads + game grid (cards)
     7. Right column: quick-play, stat ring, top players, recent
     8. Account widget (shared) + play.php (launcher, modal, drawer, toast)
     9. Responsive
    10. Design-system display treatment (applied last, inert without v1.css)
   =========================================================================== */

/* 1. THEME TOKENS ---------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   ESPYCRUX shared design system (services.espycrux.com/design/v1) — adopted
   per "ESPYCRUX shared design system v1".

   How this file consumes the contract
   -----------------------------------
   v1.css declares --espy-* variables and nothing else. This block is the whole
   of our adoption: every local token below reads through to an --espy-* token,
   so a design chosen anywhere on the network paints this portal too. No
   selector in v1.css touches our markup and none of ours depends on it.

   Colours arrive as UNWRAPPED HSL triples ("344 53% 8%", not "hsl(...)"), which
   is what lets us take alpha variants off a single token — hsl(var(--espy-fg)
   / .62) is our secondary text, no second token needed. The doc calls this out
   explicitly; we lean on it for hairlines, muted text, glow and the ambient
   backdrop, which is why several --espy-* tokens (--espy-muted-fg) go unused:
   an alpha of --espy-fg tracks light and dark designs more reliably than a
   second opaque colour does.

   Fallbacks
   ---------
   Every var() here carries the Crux Red value as its fallback, so if
   services.espycrux.com is unreachable the portal still paints correctly. The
   belt-and-braces layer is [data-theme] below: when v1.js is absent entirely,
   the inline pre-paint script in index.php sets data-theme and the four local
   palettes take over verbatim — the page is then byte-for-byte what it was
   before this integration.
   --------------------------------------------------------------------------- */
:root{
  --radius:var(--espy-radius,16px);
  --radius-sm:var(--espy-radius,12px);
  --radius-lg:var(--espy-radius,22px);
  --rail-w:76px; --side-w:340px; --wrap:1320px;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* the six colours the doc says carry most of the effect */
  --bg:hsl(var(--espy-bg,344 53% 8%));
  --ink:hsl(var(--espy-fg,352 79% 96%));
  --panel:hsl(var(--espy-card,345 47% 15%));
  --bg2:hsl(var(--espy-muted,345 62% 5%));
  --brand:hsl(var(--espy-signal,354 100% 67%));
  --on-brand:hsl(var(--espy-signal-fg,347 65% 10%));

  /* raised/recessed steps the design system has no token for: mixed off the
     card colour toward the text colour, so they stay correct on light designs
     (where "raised" must get darker, not lighter) */
  --panel2:color-mix(in oklab,hsl(var(--espy-card,345 47% 15%)) 88%,hsl(var(--espy-fg,352 79% 96%)));
  --chip:color-mix(in oklab,hsl(var(--espy-card,345 47% 15%)) 80%,hsl(var(--espy-fg,352 79% 96%)));

  /* two hairline strengths off one border token */
  --line:hsl(var(--espy-border,0 0% 100%) / .55);
  --line2:hsl(var(--espy-border,0 0% 100%));
  --card-line:hsl(var(--espy-border,0 0% 100%) / .5);

  /* secondary text as alpha of body text — the technique the doc recommends */
  --muted:hsl(var(--espy-fg,352 79% 96%) / .62);
  /* .55 not .40: at .40 this lands around 2.4:1 on a pale design, which is
     below the 3:1 floor for incidental text. The old value was tuned against
     four dark palettes where it read fine. */
  --faint:hsl(var(--espy-fg,352 79% 96%) / .55);

  /* Podium silver. Gold and bronze ride --accent / --brand2, but silver had no
     token and was a literal #cfd6e6 — a pale blue-grey that only worked
     because every local palette was dark. On a light design it measured
     1.4:1 against the panel: not dim, invisible. Mixing fg toward bg gives a
     neutral that stays legible whichever way the design goes. */
  --silver:color-mix(in oklab,hsl(var(--espy-fg,352 79% 96%)) 72%,hsl(var(--espy-bg,344 53% 8%)));

  /* accent family: one signal colour, plus a lighter tint so the existing
     brand gradients still read as gradients rather than flat fills */
  --brand2:color-mix(in oklab,hsl(var(--espy-signal,354 100% 67%)) 72%,hsl(var(--espy-fg,352 79% 96%)));
  --accent:hsl(var(--espy-signal,354 100% 67%));
  --violet:color-mix(in oklab,hsl(var(--espy-signal,354 100% 67%)) 60%,hsl(var(--espy-fg,352 79% 96%)));
  --card-hover:hsl(var(--espy-signal,354 100% 67%) / .5);
  --glow:hsl(var(--espy-signal,354 100% 67%) / .35);

  /* --good stays literal on purpose: it is semantic (a win, a positive delta),
     not decorative. Green must not become the design's accent colour. */
  --good:#00e08a;

  /* shadow follows the page background, so dark designs get a real drop shadow
     and pale/paper designs go flat — which is what those designs want anyway */
  --shadow:hsl(var(--espy-bg,344 53% 8%) / .55);

  /* ambient drift backdrop, derived rather than hand-picked per design */
  --amb1:hsl(var(--espy-signal,354 100% 67%) / .16);
  --amb2:hsl(var(--espy-fg,352 79% 96%) / .06);
  --amb3:hsl(var(--espy-signal,354 100% 67%) / .10);
}

/* Local palettes. Only reachable when v1.js did not load: index.php sets
   data-theme in that case and these win over the derived values above. */
[data-theme="crux"]{
  --silver:#cfd6e6;
  --bg:#210a10; --bg2:#150509; --panel:#38141d; --panel2:#48202b; --chip:#521f2b;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.16);
  --ink:#fdeef0; --muted:rgba(253,238,240,.62); --faint:rgba(253,238,240,.4);
  --brand:#ff5566; --brand2:#ff8a5c; --accent:#ffcf5c; --violet:#a06bff; --good:#00e08a;
  --on-brand:#2a0910;
  --glow:rgba(255,85,102,.35); --shadow:rgba(0,0,0,.5);
  --amb1:rgba(255,85,102,.16); --amb2:rgba(160,107,255,.14); --amb3:rgba(255,138,92,.12);
  --card-line:rgba(255,255,255,.08); --card-hover:rgba(255,85,102,.5);
}
[data-theme="neon"]{
  --silver:#cfe0ff;
  --bg:#05060f; --bg2:#03040a; --panel:#0b1020; --panel2:#111a34; --chip:#132043;
  --line:rgba(0,229,255,.14); --line2:rgba(0,229,255,.28);
  --ink:#eaf6ff; --muted:rgba(234,246,255,.6); --faint:rgba(234,246,255,.38);
  --brand:#00e5ff; --brand2:#8a5cff; --accent:#ffd54a; --violet:#8a5cff; --good:#00ff9d;
  --on-brand:#04121a;
  --glow:rgba(0,229,255,.35); --shadow:rgba(0,0,0,.55);
  --amb1:rgba(0,229,255,.12); --amb2:rgba(255,45,149,.10); --amb3:rgba(138,92,255,.10);
  --card-line:rgba(0,229,255,.14); --card-hover:rgba(0,229,255,.5);
}
[data-theme="violet"]{
  --silver:#d8d2f5;
  --bg:#0c0a1e; --bg2:#070515; --panel:#161235; --panel2:#201a47; --chip:#271f52;
  --line:rgba(160,120,255,.15); --line2:rgba(160,120,255,.3);
  --ink:#efeaff; --muted:rgba(239,234,255,.6); --faint:rgba(239,234,255,.38);
  --brand:#a06bff; --brand2:#5c8bff; --accent:#ffcf5c; --violet:#a06bff; --good:#00e0a0;
  --on-brand:#0b0720;
  --glow:rgba(160,107,255,.4); --shadow:rgba(0,0,0,.55);
  --amb1:rgba(160,107,255,.16); --amb2:rgba(92,139,255,.13); --amb3:rgba(255,207,92,.08);
  --card-line:rgba(160,120,255,.15); --card-hover:rgba(160,107,255,.55);
}
[data-theme="light"]{
  --silver:#7b8494;
  --bg:#eef1f8; --bg2:#e3e8f2; --panel:#ffffff; --panel2:#f5f7fc; --chip:#eef1f8;
  --line:rgba(20,24,44,.1); --line2:rgba(20,24,44,.2);
  --ink:#161a2b; --muted:rgba(22,26,44,.6); --faint:rgba(22,26,44,.42);
  --brand:#e5384d; --brand2:#ff7a59; --accent:#d99400; --violet:#7a5cff; --good:#12b886;
  --on-brand:#ffffff;
  --glow:rgba(229,56,77,.22); --shadow:rgba(30,40,80,.14);
  --amb1:rgba(229,56,77,.08); --amb2:rgba(122,92,255,.07); --amb3:rgba(255,122,89,.06);
  --card-line:rgba(20,24,44,.1); --card-hover:rgba(229,56,77,.45);
}

/* 2. BASE ------------------------------------------------------------------ */
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{background:var(--bg);color:var(--ink);
  font-family:var(--espy-font-body,-apple-system,"Segoe UI",system-ui,"Inter",sans-serif);
  -webkit-tap-highlight-color:transparent;overscroll-behavior:none;
  transition:background-color .35s var(--ease),color .35s var(--ease);}
/* Display + mono faces. Fallback is `inherit`, i.e. exactly today's stack, so
   with no design loaded these two rules are no-ops. The rest of the display
   treatment (weight/tracking/transform) is applied per-component at the end of
   this file, where each fallback is that component's own current value. */
h1,h2,h3,.feat-title,.hero{font-family:var(--espy-font-display,inherit);}
/* fallback is `monospace`, i.e. exactly the UA default this rule replaces —
   naming a richer stack here would change <code> rendering even with no design
   loaded, which is the one thing this integration must not do */
code,kbd{font-family:var(--espy-font-mono,monospace);}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
::selection{background:var(--brand);color:var(--on-brand);}
/* ambient animated backdrop — pure CSS, composited, cheap */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(55vw 42vw at 12% -8%, var(--amb1), transparent 60%),
    radial-gradient(50vw 40vw at 100% 4%, var(--amb2), transparent 58%),
    radial-gradient(46vw 42vw at 50% 118%, var(--amb3), transparent 60%);
  animation:drift 20s ease-in-out infinite alternate;}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-16px,0)}}
/* thin, themed scrollbars */
*{scrollbar-width:thin;scrollbar-color:var(--line2) transparent;}
*::-webkit-scrollbar{width:9px;height:9px;}
*::-webkit-scrollbar-thumb{background:var(--line2);border-radius:9px;}

/* 3. APP SHELL ------------------------------------------------------------- */
.app{display:grid;grid-template-columns:var(--rail-w) 1fr;min-height:100vh;
  width:100%;margin:0;}

/* left icon rail */
.rail{position:sticky;top:0;align-self:start;height:100vh;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:calc(16px + env(safe-area-inset-top)) 0 20px;
  background:linear-gradient(180deg,var(--panel),var(--bg2));
  border-right:1px solid var(--line);z-index:20;}
.rail .logo{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  font-weight:900;font-size:20px;color:var(--on-brand);margin-bottom:14px;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  box-shadow:0 8px 22px var(--glow);}
.rnav{display:flex;flex-direction:column;gap:4px;flex:1;}
.rbtn{width:46px;height:46px;border:none;background:transparent;color:var(--muted);
  border-radius:14px;display:grid;place-items:center;cursor:pointer;position:relative;
  transition:color .18s var(--ease),background .18s var(--ease),transform .1s var(--ease);}
.rbtn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;}
.rbtn:hover{color:var(--ink);background:var(--panel2);}
.rbtn:active{transform:scale(.92);}
.rbtn.active{color:var(--on-brand);background:linear-gradient(135deg,var(--brand),var(--brand2));
  box-shadow:0 6px 18px var(--glow);}
.rbtn .tip{position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%) scale(.9);
  background:var(--panel2);color:var(--ink);border:1px solid var(--line);
  padding:6px 10px;border-radius:9px;font-size:12px;font-weight:700;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .14s,transform .14s;z-index:40;box-shadow:0 8px 20px var(--shadow);}
.rbtn:hover .tip{opacity:1;transform:translateY(-50%) scale(1);}
.rbtn.add{color:var(--brand);border:1.5px dashed var(--line2);border-radius:14px;}

/* main scroll stage */
.stage{min-width:0;padding:0 clamp(14px,2.4vw,30px) 46px;}

/* 4. TOPBAR ---------------------------------------------------------------- */
.topbar{position:sticky;top:0;z-index:15;display:flex;align-items:center;gap:16px;
  padding:calc(18px + env(safe-area-inset-top)) 2px 14px;
  background:linear-gradient(180deg,var(--bg) 60%,transparent);}
.greet{min-width:0;}
.greet .hi{font-size:clamp(17px,2vw,23px);font-weight:800;letter-spacing:.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.greet .hi b{background:linear-gradient(90deg,var(--brand),var(--brand2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.greet .sub{font-size:12.5px;color:var(--muted);margin-top:2px;}
.search{flex:1;max-width:440px;margin-left:auto;position:relative;display:flex;align-items:center;}
.search svg{position:absolute;left:14px;width:17px;height:17px;stroke:var(--muted);fill:none;
  stroke-width:2;pointer-events:none;}
.search input{width:100%;height:44px;border-radius:999px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink);padding:0 16px 0 40px;font-size:14px;outline:none;
  transition:border-color .18s,box-shadow .18s;}
.search input::placeholder{color:var(--faint);}
.search input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--glow);}
.tbtn{width:44px;height:44px;flex:0 0 auto;border:1px solid var(--line);background:var(--panel);
  color:var(--ink);border-radius:50%;display:grid;place-items:center;cursor:pointer;position:relative;
  transition:transform .1s var(--ease),border-color .18s,background .18s;}
.tbtn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;}
.tbtn:hover{border-color:var(--line2);background:var(--panel2);}
.tbtn:active{transform:scale(.93);}
.tbtn .dot{position:absolute;top:9px;right:10px;width:8px;height:8px;border-radius:50%;
  background:var(--brand);box-shadow:0 0 0 2px var(--panel);}

/* design switcher popover (network designs via EspyDesign; falls back to the
   four local palettes when v1.js is absent) */
.theme-wrap{position:relative;flex:0 0 auto;}
.theme-pop{position:absolute;right:0;top:calc(100% + 10px);z-index:50;width:206px;
  max-height:min(60vh,420px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--panel2);border:1px solid var(--line);border-radius:var(--radius);padding:8px;
  box-shadow:0 20px 50px var(--shadow);
  opacity:0;transform:translateY(-8px) scale(.98);pointer-events:none;transform-origin:top right;
  transition:opacity .16s var(--ease),transform .16s var(--ease);}
.theme-wrap.open .theme-pop{opacity:1;transform:translateY(0) scale(1);pointer-events:auto;}
.theme-pop h6{font-size:11px;color:var(--faint);padding:6px 8px 8px;font-weight:800;
  text-transform:var(--espy-meta-transform,uppercase);
  letter-spacing:var(--espy-meta-tracking,.8px);}
.theme-opt{display:flex;align-items:center;gap:10px;width:100%;border:none;background:transparent;
  color:var(--ink);padding:9px 8px;border-radius:var(--radius-sm);cursor:pointer;
  font-weight:700;font-size:13.5px;text-align:left;
  transition:background .14s;}
.theme-opt:hover{background:var(--panel);}
.theme-opt .lbl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.theme-opt .ck{margin-left:auto;width:16px;height:16px;stroke:var(--brand);fill:none;stroke-width:2.6;
  opacity:0;flex:0 0 auto;transition:opacity .14s;}
.theme-opt.sel .ck{opacity:1;}
/* One swatch rule for every design, painted from live tokens rather than a
   hardcoded gradient per id — we cannot know eleven palettes ahead of time.
   Each swatch also carries its own data-design: if v1.css scopes its tokens to
   any [data-design] element (rather than :root only), every swatch previews its
   own design for free. If it scopes to :root, they all show the current one —
   still correct, just less informative. */
.theme-opt .sw{width:22px;height:22px;border-radius:calc(var(--radius-sm) / 2);flex:0 0 auto;
  background:linear-gradient(135deg,
    hsl(var(--espy-signal,354 100% 67%)),
    hsl(var(--espy-card,345 47% 15%)));
  box-shadow:inset 0 0 0 1.5px hsl(var(--espy-fg,352 79% 96%) / .25);}
/* Local-palette swatches, used only in the fallback. These MUST match the
   specificity of `.theme-opt .sw` above (0,2,0) and come after it — as bare
   `.sw-crux` (0,1,0) the generic token gradient outranks them regardless of
   order, and all four swatches render identically. */
.theme-opt .sw-crux{background:linear-gradient(135deg,#ff5566,#ff8a5c);}
.theme-opt .sw-neon{background:linear-gradient(135deg,#00e5ff,#8a5cff);}
.theme-opt .sw-violet{background:linear-gradient(135deg,#a06bff,#5c8bff);}
.theme-opt .sw-light{background:linear-gradient(135deg,#e5384d,#ff7a59);}

/* 5. FEATURED HERO --------------------------------------------------------- */
.cols{display:grid;grid-template-columns:1fr var(--side-w);gap:22px;align-items:start;}
.main{min-width:0;display:flex;flex-direction:column;gap:26px;}
.side{display:flex;flex-direction:column;gap:18px;position:sticky;top:84px;}

.featured{position:relative;overflow:hidden;border-radius:var(--radius-lg);
  border:1px solid var(--line);min-height:290px;display:flex;
  background:linear-gradient(115deg,var(--panel) 0%,var(--panel2) 46%,transparent 100%),
             var(--feat-art,radial-gradient(120% 120% at 100% 0%,var(--brand2),transparent 55%));
  background-size:cover;background-position:right center;background-repeat:no-repeat;
  box-shadow:0 24px 60px var(--shadow);}
.featured::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--panel) 6%,transparent 62%);}
.feat-body{position:relative;z-index:2;padding:clamp(20px,3vw,34px);max-width:min(62%,540px);
  display:flex;flex-direction:column;gap:12px;justify-content:center;}
.badges{display:flex;gap:8px;flex-wrap:wrap;}
.pill-badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;
  padding:5px 11px;border-radius:999px;letter-spacing:.3px;}
.pb-pop{background:linear-gradient(135deg,var(--brand),var(--brand2));color:var(--on-brand);
  box-shadow:0 6px 16px var(--glow);}
.pb-tag{background:var(--chip);color:var(--muted);}
.feat-title{font-size:clamp(30px,4.4vw,52px);font-weight:900;line-height:1.02;letter-spacing:.3px;}
.feat-desc{color:var(--muted);font-size:14px;line-height:1.55;max-width:46ch;}
.feat-cta{display:flex;align-items:center;gap:14px;margin-top:6px;flex-wrap:wrap;}
.btn-play{display:inline-flex;align-items:center;gap:9px;font-weight:900;font-size:15px;
  padding:13px 26px;border-radius:14px;border:none;cursor:pointer;color:var(--on-brand);
  background:linear-gradient(135deg,var(--brand),var(--brand2));box-shadow:0 10px 26px var(--glow);
  transition:transform .1s var(--ease),box-shadow .2s var(--ease);}
.btn-play:hover{box-shadow:0 14px 34px var(--glow);transform:translateY(-1px);}
.btn-play:active{transform:scale(.97);}
.btn-play svg{width:17px;height:17px;fill:currentColor;}
.feat-social{display:inline-flex;align-items:center;gap:9px;color:var(--muted);font-size:13px;font-weight:700;}
.avstack{display:flex;}
.avstack span{width:28px;height:28px;border-radius:50%;margin-left:-9px;border:2px solid var(--panel);
  display:grid;place-items:center;font-size:11px;font-weight:800;color:var(--on-brand);
  background:linear-gradient(135deg,var(--brand2),var(--violet));}
.avstack span:first-child{margin-left:0;}

/* 6. SECTION HEADS + GRID -------------------------------------------------- */
.sec-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px;}
.sec-head h2{font-size:19px;font-weight:800;letter-spacing:.2px;}
.sec-head a,.sec-head .more{color:var(--muted);font-size:13px;font-weight:700;cursor:pointer;
  transition:color .15s;}
.sec-head a:hover,.sec-head .more:hover{color:var(--brand);}

.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));margin-top:14px;}
.gcard{position:relative;background:var(--panel);border:1px solid var(--card-line);
  border-radius:var(--radius);overflow:hidden;cursor:pointer;
  transition:transform .14s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease);
  will-change:transform;}
.gcard:hover{transform:translateY(-5px);border-color:var(--card-hover);
  box-shadow:0 18px 40px var(--shadow);}
.gcard .thumb{aspect-ratio:16/10;background:var(--panel2) center/cover no-repeat;
  position:relative;overflow:hidden;display:grid;place-items:center;}
.gcard .thumb .ph{font-size:46px;font-weight:900;color:var(--faint);}
.gcard .thumb::after{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);
  transform:skewX(-18deg);transition:left .55s var(--ease);}
.gcard:hover .thumb::after{left:130%;}
.play-orb{position:absolute;z-index:2;width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:var(--on-brand);box-shadow:0 8px 22px var(--glow);opacity:0;transform:scale(.7);
  transition:opacity .18s var(--ease),transform .18s var(--ease);}
.play-orb svg{width:20px;height:20px;fill:currentColor;margin-left:2px;}
.gcard:hover .play-orb{opacity:1;transform:scale(1);}
.gcard .meta{padding:12px 14px 15px;}
.gcard .title{font-weight:800;font-size:15.5px;}
.gcard .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;}
.tagchip{font-size:10.5px;font-weight:700;color:var(--muted);background:var(--chip);
  padding:3px 8px;border-radius:7px;letter-spacing:.2px;}
.badge-corner{position:absolute;top:10px;right:10px;z-index:3;font-size:10.5px;font-weight:800;
  padding:4px 9px;border-radius:8px;letter-spacing:.3px;color:#fff;
  background:linear-gradient(135deg,var(--violet),var(--brand2));box-shadow:0 6px 16px var(--shadow);}
/* locked / under-dev card */
.gcard.locked{cursor:default;}
.gcard.locked:hover{transform:none;box-shadow:none;border-color:var(--card-line);}
.gcard.locked .thumb{filter:grayscale(.5) brightness(.7);}
.gcard.locked:hover .play-orb{opacity:0;transform:scale(.7);}
.gcard.locked:hover .thumb::after{left:-60%;}
.lock-badge{position:absolute;bottom:10px;left:10px;z-index:3;background:rgba(0,0,0,.6);
  border:1px solid var(--line2);color:var(--accent);font-size:10.5px;font-weight:800;
  padding:4px 9px;border-radius:8px;}
/* search: hidden non-matches */
.gcard.hide{display:none;}
.grid-empty{grid-column:1/-1;padding:30px;text-align:center;color:var(--muted);
  border:1px dashed var(--line2);border-radius:var(--radius);font-weight:600;}

/* 7. RIGHT COLUMN ---------------------------------------------------------- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;box-shadow:0 12px 30px var(--shadow);}
.panel > .ph{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.panel > .ph h3{font-size:15px;font-weight:800;}
.panel > .ph .more{color:var(--muted);font-size:12px;font-weight:700;cursor:pointer;}
.panel > .ph .more:hover{color:var(--brand);}

/* quick-play rows */
.qrow{display:flex;align-items:center;gap:12px;padding:9px 8px;border-radius:12px;cursor:pointer;
  transition:background .14s var(--ease);}
.qrow + .qrow{margin-top:2px;}
.qrow:hover{background:var(--panel2);}
.qrow .qthumb{width:46px;height:46px;border-radius:12px;flex:0 0 auto;background:var(--panel2) center/cover no-repeat;
  box-shadow:inset 0 0 0 1px var(--line);}
.qrow .qmeta{min-width:0;flex:1;}
.qrow .qt{font-weight:800;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.qrow .qs{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.qrow .qgo{width:26px;height:26px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  color:var(--muted);transition:color .14s,transform .14s;}
.qrow:hover .qgo{color:var(--brand);transform:translateX(2px);}
.qrow .qgo svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;}

/* stat ring */
.stat .ring-wrap{display:grid;place-items:center;padding:6px 0 16px;}
.ring{--p:0;width:172px;height:172px;border-radius:50%;display:grid;place-items:center;position:relative;
  background:conic-gradient(var(--brand) calc(var(--p)*1%),var(--line) 0);
  transition:background .6s var(--ease);}
.ring::before{content:"";position:absolute;inset:12px;border-radius:50%;
  background:radial-gradient(120% 120% at 30% 20%,var(--panel2),var(--panel));
  box-shadow:inset 0 4px 20px var(--shadow);}
.ring .rc{position:relative;z-index:2;text-align:center;}
.ring .rc .big{font-size:30px;font-weight:900;letter-spacing:.5px;font-variant-numeric:tabular-nums;}
.ring .rc .lab{font-size:11px;color:var(--muted);margin-top:2px;font-weight:700;
  text-transform:uppercase;letter-spacing:.6px;}
.pills{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.spill{background:var(--panel2);border:1px solid var(--line);border-radius:14px;padding:12px 8px;
  text-align:center;}
.spill .pv{font-size:17px;font-weight:900;font-variant-numeric:tabular-nums;}
.spill .pl{font-size:10.5px;color:var(--muted);margin-top:3px;font-weight:700;
  text-transform:uppercase;letter-spacing:.4px;}
.spill.g1 .pv{color:var(--brand);} .spill.g2 .pv{color:var(--accent);} .spill.g3 .pv{color:var(--violet);}
.stat-signin{text-align:center;color:var(--muted);font-size:13px;padding:20px 6px;line-height:1.5;}
.stat-signin a{color:var(--brand);font-weight:800;}

/* top players board */
.board{list-style:none;}
.board li{display:flex;align-items:center;gap:11px;padding:9px 4px;
  border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;}
.board li:last-child{border-bottom:none;}
.board .rk{width:26px;text-align:center;font-weight:900;color:var(--faint);flex:0 0 auto;}
.board .pav{width:32px;height:32px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  font-size:13px;font-weight:800;color:var(--on-brand);
  background:linear-gradient(135deg,var(--brand2),var(--violet));}
.board .pn{flex:1;min-width:0;font-weight:700;font-size:13.5px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.board .psc{font-weight:900;font-size:13.5px;}
.board li:nth-child(1) .rk{color:var(--accent);}
.board li:nth-child(2) .rk{color:var(--silver);}
.board li:nth-child(3) .rk{color:var(--brand2);}
.board .me{color:var(--brand);}
.board-loading{color:var(--faint);font-size:12.5px;text-align:center;padding:14px;}

/* recent / continue */
.recent-row{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:12px 14px;cursor:pointer;
  transition:border-color .16s var(--ease),transform .12s var(--ease);}
.recent-row:hover{border-color:var(--card-hover);transform:translateY(-2px);}
.recent-row .rthumb{width:56px;height:56px;border-radius:12px;flex:0 0 auto;background:var(--panel2) center/cover no-repeat;box-shadow:inset 0 0 0 1px var(--line);}
.recent-row .rmeta{flex:1;min-width:0;}
.recent-row .rt{font-weight:800;font-size:15px;}
.recent-row .rs{font-size:12px;color:var(--muted);margin-top:2px;}
.recent-row .rbtn{width:42px;height:42px;flex:0 0 auto;border-radius:50%;border:none;cursor:pointer;
  color:var(--on-brand);background:linear-gradient(135deg,var(--brand),var(--brand2));
  display:grid;place-items:center;box-shadow:0 8px 20px var(--glow);transition:transform .1s var(--ease);}
.recent-row .rbtn:active{transform:scale(.92);}
.recent-row .rbtn svg{width:16px;height:16px;fill:currentColor;margin-left:2px;}
#recent-list{display:flex;flex-direction:column;gap:12px;margin-top:14px;}
#recent-sec.empty{display:none;}

/* 8. ACCOUNT WIDGET (shared) ---------------------------------------------- */
.account{font-weight:600;font-size:14px;flex:0 0 auto;}
.acct{display:flex;align-items:center;min-height:44px;}
.acct-signin{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  padding:9px 16px 9px 9px;border-radius:999px;font-weight:800;font-size:14px;color:#1a1d29;
  background:#fff;box-shadow:0 4px 14px var(--shadow);transition:transform .08s,box-shadow .2s;}
.acct-signin:hover{box-shadow:0 6px 20px var(--glow);}
.acct-signin:active{transform:scale(.97);}
.g-badge{width:24px;height:24px;border-radius:50%;background:conic-gradient(#ea4335,#fbbc05,#34a853,#4285f4,#ea4335);
  color:#fff;font-weight:900;display:grid;place-items:center;font-size:13px;box-shadow:inset 0 0 0 2px #fff;}
.acct-wrap{position:relative;}
.acct-chip{position:relative;width:44px;height:44px;padding:2px;border:none;cursor:pointer;
  border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--violet) 60%,var(--brand2));
  transition:transform .1s,box-shadow .2s;}
.acct-chip:hover{box-shadow:0 0 0 4px var(--glow);}
.acct-chip:active{transform:scale(.94);}
.acct-wrap.open .acct-chip{box-shadow:0 0 0 4px var(--glow);}
.acct-av{display:grid;width:100%;height:100%;border-radius:50%;overflow:hidden;place-items:center;
  background:var(--panel);color:var(--ink);font-weight:800;font-size:16px;}
.acct-av img{width:100%;height:100%;object-fit:cover;}
.acct-chip::after{content:"";position:absolute;right:1px;bottom:1px;width:11px;height:11px;
  border-radius:50%;background:var(--good);border:2.5px solid var(--bg);box-shadow:0 0 6px var(--good);}
.acct-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:210px;z-index:30;
  background:var(--panel2);border:1px solid var(--line2);border-radius:14px;
  box-shadow:0 16px 44px var(--shadow);overflow:hidden;
  opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .16s,transform .16s;}
.acct-wrap.open .acct-menu{opacity:1;transform:translateY(0);pointer-events:auto;}
.acct-head{padding:14px 16px;border-bottom:1px solid var(--line);}
.acct-gamer{font-weight:800;font-size:15px;color:var(--accent);}
.acct-email{font-size:12px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.acct-item{display:block;padding:12px 16px;font-weight:700;font-size:14px;cursor:pointer;transition:background .15s;}
.acct-item:hover{background:var(--panel);}
.acct-item.danger{color:var(--brand);}
.acct-item.acct-sep{border-top:1px solid var(--line);}
.acct:empty{width:44px;height:44px;border-radius:50%;
  background:linear-gradient(90deg,var(--panel),var(--panel2),var(--panel));
  background-size:200% 100%;animation:sk 1.2s linear infinite;}
@keyframes sk{to{background-position:-200% 0}}

/* play.php launcher / modal / drawer / toast (kept, re-themed) ------------- */
body.play{overflow:hidden;}
#frame-wrap{position:fixed;inset:0;background:#000;}
#game-frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
#play-bar{position:fixed;top:0;left:0;right:0;z-index:20;height:calc(52px + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) calc(12px + env(safe-area-inset-right)) 0 calc(12px + env(safe-area-inset-left));
  display:flex;align-items:center;gap:12px;
  background:linear-gradient(180deg,rgba(0,0,0,.7),transparent);pointer-events:none;}
#play-bar>*{pointer-events:auto;}
.pb-btn{width:40px;height:40px;border-radius:10px;border:1px solid var(--line2);
  background:rgba(0,0,0,.5);color:#fff;font-size:18px;display:grid;place-items:center;cursor:pointer;flex:0 0 auto;}
.pb-btn:active{transform:scale(.94);}
.pb-title{font-weight:700;font-size:15px;color:#fff;text-shadow:0 1px 8px #000;}
#play-bar .account{margin-left:auto;}
.modal{position:fixed;inset:0;z-index:40;display:grid;place-items:center;
  background:rgba(0,0,0,.72);backdrop-filter:blur(4px);}
.modal.hidden,.drawer.hidden{display:none;}
.modal-box{width:min(90vw,360px);background:var(--panel);border:1px solid var(--line2);
  border-radius:16px;padding:24px;text-align:center;}
.modal-box h3{font-size:20px;margin-bottom:6px;}
.modal-sub{color:var(--muted);font-size:13px;margin-bottom:16px;line-height:1.4;}
#uname-input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--line2);
  background:var(--bg2);color:var(--ink);font-size:16px;text-align:center;}
.modal-err{color:var(--brand);font-size:13px;min-height:18px;margin:8px 0;}
.btn{cursor:pointer;border:none;border-radius:12px;padding:12px 26px;font-size:16px;font-weight:800;
  color:var(--on-brand);background:linear-gradient(135deg,var(--brand),var(--brand2));}
.btn:active{transform:scale(.97);}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:30;width:min(88vw,340px);
  background:var(--panel);border-left:1px solid var(--line2);
  padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;box-shadow:-12px 0 40px var(--shadow);}
.drawer-head{display:flex;align-items:center;justify-content:space-between;font-weight:800;font-size:18px;margin-bottom:12px;}
.drawer-head button{background:none;border:none;color:var(--ink);font-size:18px;cursor:pointer;}
.board-list{list-style:none;overflow:auto;flex:1;}
.board-list li{display:flex;align-items:center;gap:10px;padding:10px 6px;
  border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;}
.bl-rank{width:38px;color:var(--brand);font-weight:800;}
.bl-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bl-score{font-weight:800;}
.board-me{padding-top:10px;color:var(--brand);font-weight:700;min-height:20px;}
.board-list li:nth-child(1) .bl-rank{color:var(--accent);}
.board-list li:nth-child(2) .bl-rank{color:var(--silver);}
.board-list li:nth-child(3) .bl-rank{color:var(--brand2);}
.toast{position:fixed;left:50%;bottom:calc(26px + env(safe-area-inset-bottom));transform:translate(-50%,20px);z-index:60;
  background:var(--panel2);border:1px solid var(--line2);color:var(--ink);padding:12px 20px;border-radius:14px;
  font-weight:800;box-shadow:0 12px 40px var(--shadow);opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s;max-width:90vw;text-align:center;}
.toast.show{opacity:1;transform:translate(-50%,0);}

/* 9. RESPONSIVE ------------------------------------------------------------ */
@media(max-width:1080px){
  .cols{grid-template-columns:1fr;}
  .side{position:static;flex-direction:column;}
}
@media(max-width:760px){
  :root{--rail-w:0px;}
  .app{grid-template-columns:1fr;}
  .rail{position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;flex-direction:row;
    justify-content:space-around;padding:8px calc(8px + env(safe-area-inset-right))
      calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));
    border-right:none;border-top:1px solid var(--line);
    background:linear-gradient(0deg,var(--panel),var(--bg2));backdrop-filter:blur(8px);z-index:40;}
  .rail .logo{display:none;}
  .rnav{flex-direction:row;flex:1;justify-content:space-around;gap:0;}
  .rbtn .tip{display:none;}
  .rbtn.add{display:none;}
  .stage{padding-bottom:calc(72px + env(safe-area-inset-bottom));}
  .topbar{flex-wrap:wrap;gap:10px;}
  .greet{order:1;flex:1;}
  .theme-wrap{order:2;} .account{order:3;}
  .search{order:4;flex-basis:100%;max-width:none;margin-left:0;}
  .feat-body{max-width:100%;}
  .featured::after{background:linear-gradient(0deg,var(--panel) 12%,transparent 78%);}
}
@media(max-width:520px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;}
  .pills{gap:8px;}
}
@media(prefers-reduced-motion:reduce){
  body::before{animation:none;}
  *{transition-duration:.01ms !important;}
}

/* ===========================================================================
   10. SOCIAL LAYER — modal (profile · friends · clans)
   Added 2026-08-13. Theme-aware (reuses tokens). GPU-only animations
   (opacity/transform). One overlay, reused; no layout thrash.
   =========================================================================== */
.ecx-noscroll{overflow:hidden;}

.ecx-ov{position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  padding:max(16px,env(safe-area-inset-top)) 16px 16px;
  background:rgba(6,4,10,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .22s var(--ease),visibility .22s var(--ease);}
[data-theme="light"] .ecx-ov{background:rgba(30,40,80,.34);}
.ecx-ov.open{opacity:1;visibility:visible;}
.ecx-ov.busy{cursor:progress;}
.ecx-ov.busy .ecx-mbody{opacity:.55;pointer-events:none;transition:opacity .15s var(--ease);}

.ecx-modal{width:min(560px,96vw);max-height:88vh;display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line2);border-radius:var(--radius-lg);
  box-shadow:0 30px 80px var(--shadow),0 0 0 1px var(--line);
  transform:translateY(14px) scale(.985);opacity:.6;
  transition:transform .26s var(--ease),opacity .26s var(--ease);overflow:hidden;}
.ecx-ov.open .ecx-modal{transform:translateY(0) scale(1);opacity:1;}

.ecx-mhead{display:flex;align-items:center;gap:10px;padding:16px 16px 12px;
  border-bottom:1px solid var(--line);}
.ecx-mtitle{font-size:18px;font-weight:800;letter-spacing:.2px;}
.ecx-mspacer{flex:1;}
.ecx-iconbtn{width:34px;height:34px;border:none;background:var(--chip);color:var(--muted);
  border-radius:11px;display:grid;place-items:center;cursor:pointer;
  transition:color .15s var(--ease),background .15s var(--ease),transform .1s var(--ease);}
.ecx-iconbtn:hover{color:var(--ink);background:var(--panel2);}
.ecx-iconbtn:active{transform:scale(.92);}
.ecx-iconbtn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}

.ecx-tabs{display:flex;gap:6px;padding:12px 16px 0;flex-wrap:wrap;}
.ecx-tab{position:relative;border:1px solid var(--line);background:transparent;color:var(--muted);
  padding:8px 14px;border-radius:999px;font-size:13px;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;
  transition:color .15s var(--ease),background .15s var(--ease),border-color .15s var(--ease);}
.ecx-tab:hover{color:var(--ink);background:var(--chip);}
.ecx-tab.on{color:var(--on-brand);background:linear-gradient(135deg,var(--brand),var(--brand2));
  border-color:transparent;box-shadow:0 6px 16px var(--glow);}
.ecx-tbadge{min-width:18px;height:18px;padding:0 5px;border-radius:9px;font-size:11px;font-weight:800;
  display:grid;place-items:center;background:var(--accent);color:#211;}
.ecx-tab.on .ecx-tbadge{background:rgba(255,255,255,.85);color:#211;}

.ecx-mbody{padding:16px;overflow-y:auto;flex:1;}
.ecx-loading,.ecx-hintline{color:var(--faint);font-size:14px;text-align:center;padding:22px 8px;}
.ecx-subhead{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.8px;
  color:var(--faint);margin:14px 2px 8px;}
.ecx-subhead:first-child{margin-top:2px;}

/* forms */
.ecx-form{display:flex;flex-direction:column;gap:14px;}
.ecx-field{display:flex;flex-direction:column;gap:6px;}
.ecx-flabel{font-size:13px;font-weight:700;color:var(--ink);}
.ecx-fhint{font-size:12px;color:var(--faint);}
.ecx-input{width:100%;background:var(--bg2);color:var(--ink);border:1px solid var(--line2);
  border-radius:var(--radius-sm);padding:11px 13px;font-size:14px;font-family:inherit;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease);outline:none;}
.ecx-input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--glow);}
select.ecx-input{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px;}
.ecx-textarea{resize:vertical;min-height:74px;line-height:1.45;}
.ecx-region{font-size:13px;font-weight:700;color:var(--brand);
  background:var(--chip);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:9px 13px;display:inline-block;}

.ecx-msg{font-size:13px;font-weight:700;min-height:0;transition:color .15s var(--ease);}
.ecx-msg.ok{color:var(--good);}
.ecx-msg.err{color:var(--brand);}
.ecx-actionbar{display:flex;justify-content:flex-end;gap:10px;padding-top:2px;}

/* buttons */
.ecx-btn{border:1px solid var(--line2);background:var(--chip);color:var(--ink);
  padding:10px 16px;border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;
  font-family:inherit;white-space:nowrap;position:relative;overflow:hidden;
  transition:transform .1s var(--ease),background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease),box-shadow .15s var(--ease);}
.ecx-btn:active{transform:scale(.96);}
.ecx-btn-sm{padding:7px 12px;font-size:13px;border-radius:10px;}
.ecx-btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand2));color:var(--on-brand);
  border-color:transparent;box-shadow:0 6px 18px var(--glow);}
.ecx-btn-primary:hover{filter:brightness(1.05);}
.ecx-btn-soft{background:var(--panel2);color:var(--ink);}
.ecx-btn-ghost{background:transparent;color:var(--muted);}
.ecx-btn-ghost:hover{color:var(--ink);background:var(--chip);}
.ecx-btn-danger{background:transparent;color:#ff5f6e;border-color:rgba(255,95,110,.5);}
.ecx-btn-danger:hover{background:rgba(255,95,110,.12);}
.ecx-disabled{opacity:.55;cursor:default;pointer-events:none;}
.ecx-file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none;}

/* people + clan rows */
.ecx-list{display:flex;flex-direction:column;gap:8px;}
.ecx-person{display:flex;align-items:center;gap:12px;padding:10px 12px;
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius-sm);
  transition:border-color .15s var(--ease),transform .12s var(--ease);}
.ecx-person:hover{border-color:var(--line2);}
.ecx-pav,.ecx-avpic{flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
  font-weight:800;color:var(--on-brand);overflow:hidden;
  background:linear-gradient(135deg,var(--brand),var(--brand2));}
.ecx-pav{width:42px;height:42px;font-size:17px;}
.ecx-pav img,.ecx-avpic img{width:100%;height:100%;object-fit:cover;}
.ecx-pmeta{flex:1;min-width:0;}
.ecx-pname{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-weight:700;font-size:14px;color:var(--ink);}
.ecx-psub{font-size:12.5px;color:var(--muted);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ecx-psub.dim{color:var(--faint);white-space:normal;}
.ecx-pact{display:flex;gap:7px;flex:0 0 auto;}
.ecx-tagchip{font-size:11px;font-weight:800;color:var(--accent);background:var(--chip);
  padding:2px 7px;border-radius:7px;letter-spacing:.4px;}
.ecx-rolechip{font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;
  padding:2px 7px;border-radius:7px;color:var(--muted);background:var(--chip);}
.ecx-rolechip.owner{color:var(--on-brand);background:linear-gradient(135deg,var(--brand),var(--brand2));}
.ecx-rolechip.officer{color:#211;background:var(--accent);}

/* avatar editor block */
.ecx-avblock{display:flex;gap:16px;align-items:center;padding:4px 0 6px;}
.ecx-avpic{width:76px;height:76px;font-size:30px;box-shadow:0 8px 22px var(--glow);}
.ecx-avactions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px;}

/* clan header */
.ecx-clanhead{display:flex;align-items:center;gap:14px;padding:4px 0 10px;}
.ecx-clantag{flex:0 0 auto;min-width:56px;height:56px;padding:0 10px;border-radius:14px;
  display:grid;place-items:center;font-weight:900;font-size:18px;letter-spacing:.5px;
  color:var(--on-brand);background:linear-gradient(135deg,var(--brand),var(--brand2));
  box-shadow:0 8px 20px var(--glow);}
.ecx-clantag.sm{min-width:44px;height:44px;font-size:15px;border-radius:12px;box-shadow:none;}
.ecx-clanname{font-size:19px;font-weight:800;}
.ecx-clandesc{font-size:14px;color:var(--muted);line-height:1.5;margin:2px 2px 12px;}

/* search box */
.ecx-search{margin-bottom:12px;}

/* empty states */
.ecx-empty{text-align:center;padding:30px 14px;}
.ecx-empty-t{font-size:15px;font-weight:800;color:var(--ink);margin-bottom:6px;}
.ecx-empty-s{font-size:13px;color:var(--muted);max-width:340px;margin:0 auto;line-height:1.5;}

/* rail social icons share .rbtn styles already; nothing extra needed */

@media (max-width:560px){
  .ecx-modal{width:100vw;max-height:92vh;border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    align-self:end;}
  .ecx-ov{padding:0;place-items:end center;}
  .ecx-ov.open .ecx-modal{transform:translateY(0);}
  .ecx-person{flex-wrap:wrap;}
  .ecx-pact{width:100%;justify-content:flex-end;}
}
@media (prefers-reduced-motion:reduce){
  .ecx-ov,.ecx-modal{transition-duration:.01ms;}
}

/* searchable country combobox (profile) --------------------------------- */
.ecx-combo{position:relative;}
.ecx-combo .ecx-combo-input{width:100%;padding-right:34px;}
.ecx-combo-clear{position:absolute;top:0;right:0;height:44px;width:34px;border:none;background:transparent;
  color:var(--faint);font-size:20px;line-height:1;cursor:pointer;display:grid;place-items:center;
  transition:color .15s var(--ease);}
.ecx-combo-clear:hover{color:var(--ink);}
.ecx-combo-list{position:absolute;z-index:6;left:0;right:0;top:calc(100% + 6px);max-height:262px;overflow-y:auto;
  background:var(--panel2);border:1px solid var(--line2);border-radius:var(--radius-sm);
  box-shadow:0 18px 44px var(--shadow);display:none;padding:4px;}
.ecx-combo-list.open{display:block;}
.ecx-combo-opt{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;cursor:pointer;
  transition:background .12s var(--ease);}
.ecx-combo-opt.hide{display:none;}
.ecx-combo-opt:hover,.ecx-combo-opt.active{background:var(--chip);}
.ecx-combo-opt.sel{background:var(--chip);}
.ecx-combo-opt.sel .ecx-combo-name{color:var(--brand);font-weight:800;}
.ecx-combo-flag{font-size:18px;line-height:1;flex:0 0 auto;}
.ecx-combo-name{flex:1;font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ecx-combo-reg{flex:0 0 auto;font-size:11px;font-weight:700;color:var(--faint);
  background:var(--bg2);border:1px solid var(--line);border-radius:7px;padding:2px 7px;}

/* 10. DESIGN-SYSTEM DISPLAY TREATMENT ---------------------------------------
   Applied last so it wins over the component rules above. Every fallback is
   that component's own existing value, so with no design loaded this whole
   section computes to exactly what section 5/6/8 already set — it is inert
   until services.espycrux.com/design/v1.css is actually present.
   Weight, tracking and case travel together on purpose: a display face
   without its intended tracking and case reads as the wrong typeface.
   --------------------------------------------------------------------------- */
.feat-title{
  font-weight:var(--espy-display-weight,900);
  letter-spacing:var(--espy-display-tracking,.3px);
  line-height:var(--espy-display-leading,1.02);
  text-transform:var(--espy-display-transform,none);}
.sec-head h2{
  font-weight:var(--espy-display-weight,800);
  letter-spacing:var(--espy-display-tracking,.2px);
  text-transform:var(--espy-display-transform,none);}
.greet .hi{
  font-weight:var(--espy-display-weight,800);
  letter-spacing:var(--espy-display-tracking,.2px);}
.ecx-subhead{
  letter-spacing:var(--espy-meta-tracking,.8px);
  text-transform:var(--espy-meta-transform,uppercase);}
.ecx-rolechip{
  letter-spacing:var(--espy-meta-tracking,.5px);
  text-transform:var(--espy-meta-transform,uppercase);}

/* Panel borders, where the design ships a complete shorthand. Each fallback is
   that component's own current border, so an absent token leaves the panel
   exactly as sections 5–7 drew it. */
.gcard{border:var(--espy-surface-border,1px solid var(--card-line));}
.featured{border:var(--espy-surface-border,1px solid var(--line));}