@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@600;700&display=swap');
@import url('https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.7.0/dist/tabler-icons.min.css');
/* ===================== TroveDrops · gamification layer (UI redesign spec) ===================== */
:root{
  --g-gold:#EF9F27; --g-gold2:#FFD27A; --g-purple:#7F77DD; --g-purple2:#AFA9EC;
  --g-teal:#1D9E75; --g-teal2:#5DCAA5; --g-blue:#378ADD; --g-red:#E24B4A; --g-gray:#888780;
  --g-card:#16121f; --g-card2:#0c0a14; --g-line:rgba(255,255,255,.08);
}

/* ---- logged-in transform: marketing recedes, boxes become the hero (gam-auth = logged in; gam-on = shell present) ---- */
body.gam-auth .hero, body.gam-auth #how, body.gam-auth #fair, body.gam-auth #faq, body.gam-auth #winners,
body.gam-auth .cta-strip, body.gam-auth #apps, body.gam-auth #battles, body.gam-auth .marquee{ display:none !important; }
body.gam-auth #boxes{ padding-top:10px; }
/* logged-out shell: the nav rail + the top-right chip area (now holds Login/Sign up) show; home strip+events + chat stay hidden */
body:not(.gam-auth) #gamHome, body:not(.gam-auth) .gam-chat{ display:none !important; }
/* the gam chip is the single Trove Coins balance display — hide the legacy homepage header wallet to avoid a duplicate */
body.gam-on #walletLink{ display:none !important; }
@media(max-width:767px){ body.gam-on{ padding-bottom:60px; } }

/* ---- resource chips (header, logged-in) ---- */
.gam-chips{ display:flex; align-items:center; gap:7px; }
.gam-chip{ display:inline-flex; align-items:center; gap:5px; background:var(--g-card); border:1px solid var(--g-line); border-radius:16px; padding:5px 10px; font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; line-height:1; }
.gam-chip.gold{ color:var(--g-gold2); } .gam-chip.purple{ color:var(--g-purple2); }
.gam-chip .ci{ font-size:14px; }
.gam-av{ width:30px; height:30px; border-radius:50%; background:var(--panel); border:1px solid var(--g-line); display:grid; place-items:center; font-size:17px; cursor:pointer; }
@media(max-width:600px){ .gam-chip.hide-sm{ display:none; } }

/* ---- redesigned header account cluster ---- */
.gam-authl{ display:flex; align-items:center; gap:9px; }
.gam-chips{ gap:10px; }
.gam-addc{ padding:9px 15px !important; font-size:14px; }
.gam-user{ display:flex; align-items:center; gap:10px; background:linear-gradient(145deg,#17132a,#120f1f); border:1px solid rgba(127,119,221,.30); border-radius:13px; padding:6px 12px 6px 7px; cursor:pointer; color:var(--text); font-family:inherit; transition:border-color .15s; }
.gam-user:hover{ border-color:rgba(127,119,221,.6); }
.gu-av{ width:34px; height:34px; border-radius:10px; flex:none; background:linear-gradient(145deg,#8b5cff,#5a3fd6); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; color:#fff; box-shadow:inset 0 2px 5px rgba(255,255,255,.22); }
.gu-info{ display:flex; flex-direction:column; line-height:1.15; text-align:left; }
.gu-name{ font-weight:700; font-size:13px; }
.gu-coins{ display:flex; align-items:center; gap:4px; color:var(--g-gold2); font-weight:800; font-size:12.5px; margin-top:1px; }
.gu-chev{ color:#8b84c9; font-size:10px; margin-left:2px; transition:transform .15s; }
.gam-acct.open .gu-chev{ transform:rotate(180deg); }
.gam-acct.open .gam-menu{ display:block; }
.gam-menu{ min-width:212px; }
.gam-menu a{ display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:9px; color:var(--text); font-size:14px; font-weight:600; text-decoration:none; cursor:pointer; }
.gam-menu a:hover{ background:var(--g-card2); }
.gam-menu a img{ width:30px; height:30px; object-fit:contain; filter:drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
.gam-menu .gm-emoji{ width:30px; text-align:center; font-size:18px; line-height:30px; display:inline-block; }
.gam-menu a.out{ color:#ff9a8b; }
.gm-sep{ height:1px; background:var(--g-line); margin:6px 4px; }

/* ---- header: coins+add pill (visible frame) + profile-avatar button ---- */
.gam-coins{ display:inline-flex; align-items:center; gap:6px; background:linear-gradient(150deg,#1b1636,#100d1e); border:1.5px solid rgba(150,110,255,.6); border-radius:13px; padding:6px 11px; font-family:Outfit,sans-serif; font-weight:800; font-size:13.5px; color:#fff; white-space:nowrap; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.3); transition:border-color .15s; }
.gam-coins:hover{ border-color:rgba(150,110,255,.9); }
.gam-cd{ width:15px; height:15px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#ffe6a6,#e0a63a 60%,#b9791f); box-shadow:0 0 5px rgba(255,200,90,.5); flex:none; }
.gam-plus{ margin-left:1px; padding-left:8px; border-left:1px solid rgba(255,255,255,.22); color:var(--g-gold2); font-size:17px; line-height:1; font-weight:700; }
.gam-ib{ width:36px; height:36px; border-radius:10px; background:var(--g-card2); border:1px solid var(--g-line); color:var(--text); display:flex; align-items:center; justify-content:center; font-size:19px; line-height:1; cursor:pointer; padding:0; flex:none; position:relative; }
.gam-ib:hover{ border-color:rgba(127,119,221,.55); }
.gam-ib img{ width:22px; height:22px; object-fit:contain; }
.gam-ib .gam-cb{ position:absolute; top:-5px; right:-5px; background:var(--g-gold2); color:#1a1205; font-size:9px; font-weight:800; border-radius:99px; min-width:15px; height:15px; display:flex; align-items:center; justify-content:center; padding:0 3px; }
/* header profile picture: an exact echo of the profile-page avatar — round photo that FILLS the circle,
   wrapped in the same conic rainbow ring (drawn by ::before so it isn't clipped). */
.gam-prof{ position:relative; width:56px; height:56px; border-radius:50%; border:none; padding:0; overflow:visible;
  background:radial-gradient(circle at 40% 35%,#2a2350,#141024); box-shadow:0 2px 9px rgba(0,0,0,.45); }
.gam-prof::before{ content:''; position:absolute; inset:-3px; border-radius:50%; pointer-events:none;
  background:conic-gradient(from 0deg,#ffd98a,#ff8a3d,#8b5cff,#34e3d0,#ffd98a);
  -webkit-mask:radial-gradient(circle,transparent 58%,#000 60%); mask:radial-gradient(circle,transparent 58%,#000 60%); }
.gam-prof:hover{ filter:brightness(1.08); }
.gam-prof.has-photo{ padding:0; }
/* beat .gam-ib img (which forces 22px/contain and made the photo look like a tiny framed thumbnail) */
.gam-prof .gam-pph{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; position:relative; }
.gam-prof .gam-pav{ position:relative; font-family:Outfit,sans-serif; font-weight:800; font-size:25px; line-height:1; color:#fff; }
/* MOBILE HEADER — must FIT the viewport so the coin balance is never clipped by overflow-x:clip.
   Collapse "＋ Add coins" to a "＋" icon-button, drop @username, tighten gaps, and keep the account
   cluster (avatar + coins) unshrinkable so the balance always shows. */
@media(max-width:600px){
  .hdr .hdr-in{ gap:9px; }
  .hdr .brand{ font-size:18px; flex:none; }
  .hdr-right{ gap:7px; flex:none; }
  .gam-chips{ gap:6px; flex:none; }
  .gam-coins{ font-size:12.5px; padding:5px 9px; }
  .gam-cd{ width:13px; height:13px; }
  .gam-plus{ font-size:15px; padding-left:7px; }
  .gam-ib{ width:32px; height:32px; }
  .gam-prof{ width:52px; height:52px; }   /* profile pic nearly fills the 68px header — the focal point */
  .gam-prof .gam-pav{ font-size:23px; }
  .gam-pav{ font-size:16px; }
}
/* dedupe: the gam cluster is the single account UI in gam mode */
body.gam-on .hdr #signinBtn, body.gam-on .hdr #signupBtn{ display:none !important; }
body.gam-on .acct-pill{ display:none !important; }

/* ---- feature strip ---- */
.gam-strip{ display:flex; gap:12px; overflow-x:auto; padding:12px 0 6px; scrollbar-width:none; }
.gam-strip::-webkit-scrollbar{ display:none; }
.gam-ico{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:6px; background:none; border:0; cursor:pointer; width:64px; padding:0; }
.gam-ico .ring{ position:relative; width:54px; height:54px; border-radius:50%; display:grid; place-items:center; font-size:23px; background:var(--g-card) center/cover no-repeat; border:2px solid var(--c,var(--g-line)); transition:transform .12s, box-shadow .12s; box-shadow:0 0 0 0 transparent; }
.gam-ico:hover .ring{ transform:translateY(-3px); box-shadow:0 8px 22px -6px var(--c); }
.gam-ico .lbl{ font-size:10.5px; color:var(--muted); font-weight:600; }
.gam-ico .bdg{ position:absolute; top:-4px; right:-4px; background:var(--g-red); color:#fff; font-size:10px; font-weight:800; border-radius:99px; min-width:18px; height:18px; display:grid; place-items:center; padding:0 4px; box-shadow:0 0 0 2px var(--bg); }
.gam-ico .bdg.green{ background:var(--green); color:#06210f; }

/* ---- events strip ---- */
.gam-events{ display:grid; gap:10px; grid-template-columns:1fr; margin:4px 0 8px; }
@media(min-width:760px){ .gam-events{ grid-template-columns:1fr 1fr; } }
.gam-ev{ background:linear-gradient(120deg,var(--g-card),var(--g-card2)); border:1px solid var(--g-line); border-radius:14px; padding:13px 15px; display:flex; align-items:center; gap:13px; }
.gam-ev .evic{ font-size:26px; line-height:1; }
.gam-ev .evt{ flex:1; min-width:0; } .gam-ev .evt b{ display:block; color:var(--text); font-size:14px; font-weight:600; } .gam-ev .evt span{ color:var(--muted); font-size:12px; }
.gam-ev .evb{ flex:0 0 auto; }

/* ---- home above-the-fold: slim Daily bar + compact Featured-Drop row (real box art), boxes pulled up ---- */
.gam-strip:empty{ display:none; }                 /* Alliance Hall / Trove Shop tiles removed → no empty gap */
.gam-hero{ display:block; margin:2px 0 12px; }
.gh-dbar{ display:flex; align-items:center; gap:10px; background:linear-gradient(100deg,#241d10,#191307); border:1px solid #5f4c1c; border-radius:12px; padding:10px 12px; margin-bottom:10px; }
.gh-dbar.done{ opacity:.85; }
.gh-fire{ font-size:17px; line-height:1; }
.gh-dt{ flex:1; min-width:0; } .gh-dt b{ font-family:Outfit,sans-serif; font-weight:800; font-size:13.5px; display:block; } .gh-dt span{ color:var(--muted); font-size:11px; }
.gh-dgo{ flex:none; padding:8px 14px !important; font-size:13px !important; }
.gh-fdrop{ display:flex; align-items:center; gap:11px; background:linear-gradient(110deg,#1a1430,#231a44); border:1px solid rgba(139,92,255,.4); border-radius:13px; padding:9px 11px; }
.gh-fdrop img{ width:52px; height:52px; border-radius:11px; object-fit:cover; flex:none; background:var(--g-card2); box-shadow:0 0 18px rgba(139,92,255,.4); }
.gh-fi{ flex:1; min-width:0; }
.gh-fk{ font-size:9.5px; font-weight:800; letter-spacing:.12em; color:var(--g-purple2); }
.gh-fn{ font-family:Outfit,sans-serif; font-weight:800; font-size:15px; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gh-fp{ color:var(--g-gold2); font-weight:700; font-size:11.5px; }
.gh-op{ flex:none; padding:9px 15px !important; font-size:13px !important; }
@media(min-width:760px){ .gam-hero{ display:flex; gap:12px; align-items:stretch; } .gh-dbar{ flex:1 1 300px; margin-bottom:0; } .gh-fdrop{ flex:2 1 360px; } }

/* ---- chat dock ---- */
.gam-chat{ position:fixed; z-index:95; background:#181c33; border:1px solid rgba(139,92,255,.30); display:flex; flex-direction:column; box-shadow:0 -6px 24px rgba(0,0,0,.45); }
@media(max-width:759px){ .gam-chat{ left:0; right:0; bottom:0; border-radius:14px 14px 0 0; max-height:78vh; } .gam-chat:not(.open){ } }
@media(min-width:760px){ .gam-chat{ right:18px; bottom:18px; width:330px; border-radius:14px; max-height:62vh; } }
.gam-chat-bar{ display:flex; align-items:center; gap:8px; padding:11px 14px; cursor:pointer; background:linear-gradient(180deg,#232850,#181c33); }
.gam-chat-bar .gct{ flex:1; font-weight:800; font-size:14.5px; color:#fff; } .gam-chat-bar .gcm{ color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:150px; }
/* chat opens as a bottom SHEET that takes over up to the header; grabber + ▾ minimize it back down to the dock */
.gam-chat-grab{ display:none; }
.gam-chat.open .gam-chat-grab{ display:block; width:38px; height:4px; border-radius:99px; background:var(--g-line); margin:9px auto 1px; cursor:pointer; }
.gam-chat-x{ display:none; flex:none; margin-left:6px; align-items:center; justify-content:center; width:28px; height:28px; background:var(--panel); border:1px solid var(--g-line); color:#cdd2ea; border-radius:7px; font-size:15px; line-height:1; cursor:pointer; }
.gam-chat.open .gam-chat-x{ display:flex; }
@media(max-width:759px){
  .gam-chat.open{ top:var(--gam-hdr,68px) !important; left:0 !important; right:0 !important; bottom:0 !important; width:100% !important; max-height:none !important; border-radius:18px 18px 0 0 !important; border:1px solid rgba(139,92,255,.5) !important; border-top:3px solid var(--g-gold2) !important; border-bottom:none !important; transform:none !important; z-index:310; box-shadow:0 -14px 50px rgba(0,0,0,.62); }
  .gam-chat.open .gam-chat-body{ flex:1; min-height:0; }
  .gam-chat.open .gam-chat-msgs{ max-height:none; flex:1; }
}
.gam-chat-body{ display:none; flex-direction:column; border-top:1px solid var(--g-line); min-height:0; }
.gam-chat.open .gam-chat-body{ display:flex; }
.gam-chat.open .gam-chat-bar .gcm{ display:none; }
.gam-chat-tabs{ display:flex; gap:6px; padding:8px 12px; }
.gam-chat-tabs button{ border:0; cursor:pointer; border-radius:7px; padding:5px 10px; font-size:11.5px; font-weight:700; background:var(--panel); color:var(--muted); }
.gam-chat-tabs button.on{ background:var(--g-purple); color:#fff; }
.gam-chat-msgs{ flex:1; overflow-y:auto; padding:11px 12px; display:flex; flex-direction:column; gap:9px; min-height:120px; max-height:38vh; }
/* each message: avatar chip on the left, then a bubble with the name + text after it (wrapped lines align under the text) */
.gam-msg{ display:flex; gap:9px; align-items:flex-start; }
/* chat avatar — the border is the frame-ready ring (a purchased frame will style it); photos fill it */
/* chat avatars mirror the header: round photo that fills, wrapped in the conic ring — so photos/frames read big in chat */
.gam-msg .gmav{ position:relative; flex:none; width:46px; height:46px; border-radius:50%; border:none; overflow:visible; background:radial-gradient(circle at 40% 35%,#2a2350,#141024); display:flex; align-items:center; justify-content:center; font-size:21px; }
.gam-msg .gmav::before{ content:''; position:absolute; inset:-3px; border-radius:50%; pointer-events:none; background:conic-gradient(from 0deg,#ffd98a,#ff8a3d,#8b5cff,#34e3d0,#ffd98a); -webkit-mask:radial-gradient(circle,transparent 58%,#000 60%); mask:radial-gradient(circle,transparent 58%,#000 60%); }
.gam-msg .gmav.gmav-photo{ background:#0c0f22; }
.gam-msg .gmav img{ width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; position:relative; }
.gam-msg .gmc{ flex:1; min-width:0; background:rgba(35,40,74,.55); border:1px solid rgba(139,92,255,.28); border-radius:4px 13px 13px 13px; padding:7px 11px; }
.gam-msg .gu{ display:block; color:#8fc4ff; font-weight:800; font-size:12px; margin-bottom:2px; cursor:pointer; } .gam-msg .gu:hover{ text-decoration:underline; }
.gam-msg .gmb{ font-size:13.5px; line-height:1.4; color:var(--text); word-break:break-word; }
.gam-chat-form{ display:flex; gap:8px; padding:11px 12px; border-top:1px solid rgba(139,92,255,.2); background:#15182c; }
.gam-chat-form input{ flex:1; min-width:0; background:#0e1130; border:1.5px solid rgba(139,92,255,.5); color:#fff; border-radius:11px; padding:12px; font-size:14px; outline:none; }
.gam-chat-form input::placeholder{ color:#9aa0d4; }
.gam-chat-form input:focus{ border-color:var(--g-gold2); box-shadow:0 0 0 3px rgba(255,194,75,.16); }

/* ---- Alliance Hall: slim banner + tappable 3D room grid (mobile-first, scales up on desktop) ---- */
.hall-hero{ position:relative; border-radius:16px; overflow:hidden; aspect-ratio:16/6.6; border:1px solid var(--g-line); }
.hall-bg{ width:100%; height:100%; object-fit:cover; display:block; }
.hall-ov{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(6,7,14,.05),rgba(6,7,14,.82)); }
.hall-live{ position:absolute; top:11px; right:12px; display:flex; align-items:center; gap:5px; background:rgba(6,8,16,.6); border:1px solid rgba(57,217,138,.4); border-radius:99px; padding:4px 9px; font-size:10.5px; font-weight:700; color:#8ff0c0; }
.hall-live .d{ width:7px; height:7px; border-radius:50%; background:#39d98a; box-shadow:0 0 8px #39d98a; }
.hall-ht{ position:absolute; left:15px; right:15px; bottom:11px; }
.hall-ht b{ font-family:Outfit,sans-serif; font-weight:900; font-size:23px; display:block; letter-spacing:-.01em; color:#fff; }
.hall-ht span{ color:#dfe3ff; font-size:12.5px; font-weight:600; }
.hall-rooms{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; }
/* elevated blue-gradient buttons (like the Battle Arena icon bg) — no per-room colour edge */
.hall-room{ display:flex; align-items:center; gap:11px; background:linear-gradient(160deg,#2a4884,#131f3a); border:1px solid rgba(120,170,240,.35); border-radius:15px; padding:12px; text-decoration:none; color:var(--text); cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.09); transition:transform .1s, box-shadow .15s, filter .15s; }
.hall-room:hover{ filter:brightness(1.08); box-shadow:0 9px 22px rgba(30,60,130,.5), inset 0 1px 0 rgba(255,255,255,.12); }
.hall-room:active{ transform:translateY(2px); box-shadow:0 2px 8px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06); }
.hall-ri{ width:44px; height:44px; border-radius:11px; object-fit:cover; flex:none; box-shadow:0 4px 12px rgba(0,0,0,.4); background:var(--g-card2); }
.hall-rtx{ display:flex; flex-direction:column; min-width:0; }
.hall-rt{ font-family:Outfit,sans-serif; font-weight:700; font-size:13.5px; line-height:1.15; }
.hall-rs{ color:var(--muted); font-size:10.5px; }
.hall-ar{ margin-left:auto; flex:none; color:var(--muted2); font-size:15px; }
@media(min-width:760px){ .hall-rooms{ grid-template-columns:repeat(3,1fr); } .hall-hero{ aspect-ratio:16/5; } }

/* ---- hub overlay ---- */
.hub{ position:fixed; inset:0; z-index:150; background:#0a0810; display:none; flex-direction:column; }
/* keep the persistent chrome (chat dock + bottom nav) visible on mobile: the hub stops above that band */
@media(max-width:767px){ .hub{ bottom:112px; } }
/* while a hub is open, hide the homepage behind it so its boxes/category chips don't bleed into the bottom band */
body.gam-hub-open > main, body.gam-hub-open > footer { display:none !important; }
.hub-ftr{ margin:auto -16px -16px; }
.hub-title{ margin:0 0 18px; }
.hub-title h1{ font-family:Oswald,sans-serif; font-weight:700; font-size:30px; margin:0 0 4px; }
.hub-title p{ color:var(--muted); font-size:14px; line-height:1.55; max-width:660px; }
.hub-note{ display:inline-flex; align-items:center; gap:6px; margin-top:11px; font-size:12px; font-weight:700; color:var(--g-gold2); background:var(--g-card2); border:1px solid var(--g-line); border-radius:8px; padding:6px 12px; }
.vault-why{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:0 0 18px; }
@media(max-width:760px){ .vault-why{ grid-template-columns:1fr; } }
.vault-why .vw{ display:flex; gap:11px; align-items:flex-start; background:var(--g-card); border:1px solid var(--g-line); border-radius:12px; padding:12px 14px; }
.vault-why .vw>span{ font-size:22px; line-height:1; flex:none; }
.vault-why .vw b{ display:block; font-size:13px; margin-bottom:2px; }
.vault-why .vw em{ color:var(--muted); font-size:12px; line-height:1.45; font-style:normal; }
.hub.show{ display:flex; animation:hubin .22s ease-out; }
@keyframes hubin{ from{ opacity:0; transform:scale(.99); } to{ opacity:1; transform:scale(1); } }
.hub-h{ display:flex; align-items:center; gap:12px; padding:13px 16px; border-bottom:1px solid var(--g-line); background:var(--panel); flex-shrink:0; }
.hub-h .ht{ font-family:Outfit,sans-serif; font-weight:700; font-size:18px; flex:1; }
.hub-b{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; }
.hub-b .inr{ width:100%; max-width:960px; margin:0 auto 56px; }   /* margin-bottom = breathing room before the footer */
.hub-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.hub-tab{ border:0; cursor:pointer; border-radius:9px; padding:7px 13px; font-size:13px; font-weight:600; background:var(--g-card); color:var(--muted); }
.hub-tab.on{ background:var(--g-purple); color:#fff; }

/* hub: mission cards */
.mcard{ display:flex; align-items:center; gap:14px; background:var(--g-card); border:1px solid var(--g-line); border-radius:14px; padding:13px 15px; margin-bottom:10px; }
.mcard.ready{ border-color:var(--g-gold); box-shadow:0 0 18px rgba(239,159,39,.12); }
.mcard.rec{ border-color:var(--g-teal); background:linear-gradient(110deg,rgba(29,158,117,.12),var(--g-card)); }
.mcard .mic{ width:54px; height:54px; border-radius:13px; overflow:hidden; background:var(--g-card2); flex:0 0 auto; }
.mcard .mic img{ width:100%; height:100%; object-fit:cover; display:block; }
.mcard .mb{ flex:1; min-width:0; }
.mcard .mb .mt{ font-weight:700; display:flex; align-items:center; gap:8px; }
.mcard .msub{ color:var(--muted); font-size:12px; margin-top:2px; }
.mcard .tagn{ font-weight:600; font-size:10px; color:var(--g-teal2); background:rgba(29,158,117,.14); border:1px solid var(--g-teal); border-radius:6px; padding:1px 7px; }
.mcard .mmeta{ font-size:11px; color:var(--muted); margin-top:5px; }
.mcard .mr{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.mcard .mrew{ color:var(--g-purple2); font-weight:700; font-size:13px; background:var(--g-card2); border:1px solid var(--g-line); border-radius:8px; padding:4px 9px; white-space:nowrap; }
.mcard .mclaim[disabled]{ background:transparent; border:1px solid var(--g-line); color:var(--muted); cursor:default; }
.mbar{ height:7px; background:var(--g-card2); border-radius:99px; margin-top:8px; overflow:hidden; max-width:380px; } .mbar i{ display:block; height:100%; border-radius:99px; }
/* streak ladder */
.streak{ display:flex; gap:6px; }
.streak .sd{ flex:1; text-align:center; background:var(--g-card2); border:1px solid var(--g-line); border-radius:10px; padding:8px 2px; font-size:11px; color:var(--muted); }
.streak .sd.on{ border-color:var(--g-teal); color:var(--g-teal2); } .streak .sd.today{ border-color:var(--g-gold); color:var(--g-gold2); background:rgba(239,159,39,.12); } .streak .sd.chest{ font-size:18px; }

/* hub: vaults — featured Grand Vault + large image-led cards (matches vaults.html mockup) */
.vhead{ color:var(--muted); font-size:13px; line-height:1.55; margin:0 0 16px; } .vhead b{ color:var(--text); }
.dgrand{ display:flex; gap:20px; background:var(--g-card); border:2px solid var(--g-gold); border-radius:18px; overflow:hidden; margin-bottom:18px; box-shadow:0 0 44px rgba(239,159,39,.16); cursor:pointer; }
.dgrand .gi{ flex:none; background:var(--g-card2); }
.dgrand .gi img{ width:260px; height:260px; object-fit:cover; display:block; }
.dgrand .gd{ flex:1; padding:26px; display:flex; flex-direction:column; justify-content:center; gap:8px; min-width:0; }
.dgrand .dtag{ align-self:flex-start; font-size:11px; font-weight:800; color:#1a1205; background:var(--g-gold); padding:3px 12px; border-radius:7px; letter-spacing:.04em; }
.dgrand h3{ font-family:Outfit,sans-serif; font-weight:900; font-size:clamp(26px,3vw,38px); }
.dgrand .st{ color:#f09595; font-size:14px; } .dgrand .lt{ color:var(--g-gold2); font-size:13px; max-width:480px; }
.dgrand .dbtn{ align-self:flex-start; margin-top:10px; background:var(--g-gold); color:#1a1205; border:none; font-family:Outfit,sans-serif; font-weight:800; border-radius:10px; padding:12px 28px; font-size:15px; cursor:pointer; }
.dboard{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.dcard{ background:var(--g-card); border:1px solid var(--g-line); border-top:3px solid var(--c); border-radius:16px; overflow:hidden; cursor:pointer; transition:transform .12s; }
.dcard:hover{ transform:translateY(-2px); }
.dcard .di{ height:180px; background:var(--g-card2); display:flex; align-items:center; justify-content:center; }
.dcard .di img{ height:164px; width:164px; object-fit:cover; border-radius:12px; box-shadow:0 0 22px var(--g); }
.dcard .dd{ padding:14px 16px; }
.dcard .vn{ font-family:Outfit,sans-serif; font-weight:700; font-size:17px; }
.dcard .vs{ font-size:12px; font-weight:700; color:var(--c); margin-top:2px; }
.dcard .vl{ font-size:12px; color:var(--g-gold2); margin-top:1px; }
.dcard .va{ display:block; text-align:center; margin-top:12px; font-family:Outfit,sans-serif; font-weight:800; font-size:14px; border-radius:9px; padding:10px; background:rgba(255,255,255,.06); border:1px solid var(--c); color:#fff; }
@media(max-width:600px){ .dgrand{ flex-direction:column; } .dgrand .gi img{ width:100%; height:200px; } }

/* hub: vault tiles */
.vgrid{ display:grid; gap:12px; grid-template-columns:1fr 1fr; }
@media(min-width:760px){ .vgrid{ grid-template-columns:repeat(3,1fr); } }
.vtile{ background:var(--g-card); border:1px solid var(--g-line); border-radius:14px; padding:14px; cursor:pointer; display:flex; flex-direction:column; gap:6px; position:relative; transition:transform .12s; }
.vtile:hover{ transform:translateY(-2px); }
.vtile.grand{ grid-column:1/-1; background:linear-gradient(120deg,rgba(239,159,39,.16),var(--g-card)); border-color:rgba(239,159,39,.4); }
.vtile .vic{ font-size:30px; } .vtile.grand .vic{ font-size:40px; }
.vtile .vn{ font-weight:600; font-size:14px; } .vtile .vh{ font-size:12px; color:var(--muted); }
.vchip{ position:absolute; top:12px; right:12px; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; padding:2px 7px; border-radius:7px; }
.vchip.yours{ background:rgba(29,158,117,.18); color:var(--g-teal2); } .vchip.raid{ background:rgba(226,75,74,.18); color:var(--g-red); } .vchip.open{ background:rgba(55,138,221,.18); color:var(--g-blue2); } .vchip.unclaimed{ background:rgba(136,135,128,.18); color:var(--g-gray); } .vchip.contested{ background:rgba(239,159,39,.18); color:var(--g-gold2); }
.legend{ display:flex; gap:12px; flex-wrap:wrap; margin:12px 2px 0; font-size:11.5px; color:var(--muted); }
.legend i{ width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:4px; vertical-align:middle; }

/* hub: leaderboard / rows */
.podium{ display:flex; align-items:flex-end; justify-content:center; gap:12px; margin:6px 0 18px; }
.pod{ display:flex; flex-direction:column; align-items:center; gap:5px; }
.pod .pav{ width:60px; height:60px; border-radius:50%; background:var(--g-card); display:grid; place-items:center; font-size:30px; border:2px solid var(--g-line); }
.pod.p1 .pav{ width:74px; height:74px; border-color:var(--g-gold); box-shadow:0 0 22px -4px var(--g-gold); } .pod.p2 .pav{ border-color:#c9cede; } .pod.p3 .pav{ border-color:#d08a4e; }
.pod .pn{ font-size:12.5px; font-weight:600; } .pod .pp{ font-size:12px; color:var(--g-gold2); font-weight:700; } .pod .pk{ font-size:20px; }
.lrow{ display:flex; align-items:center; gap:11px; padding:9px 10px; border-radius:10px; }
.lrow.me{ background:rgba(127,119,221,.14); } .lrow:nth-child(even){ background:rgba(255,255,255,.02); }
.lrow .lr{ width:24px; text-align:center; font-weight:700; color:var(--muted); } .lrow .lav{ font-size:18px; } .lrow .ln{ flex:1; font-size:14px; } .lrow .ltag{ color:var(--muted); font-size:12px; } .lrow .lp{ font-weight:700; color:var(--g-gold2); }

/* hub: leaderboard / rewards banner */
.lb-banner{ position:relative; width:100%; aspect-ratio:1344/270; border-radius:16px; overflow:hidden; margin-bottom:16px;
  background:#07060c url('/assets/banner-champions.jpg') center 40%/cover no-repeat; border:1px solid rgba(239,159,39,.3); }
.lb-bh{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.lb-bh h1{ font-family:'Oswald',sans-serif; font-weight:700; font-size:clamp(30px,6vw,58px); letter-spacing:.06em; color:#fff; line-height:.95;
  -webkit-text-stroke:1px rgba(0,0,0,.35); text-shadow:3px 4px 0 #1a1206,6px 9px 0 rgba(0,0,0,.55),0 0 22px #ffd98a,0 0 46px #ef9f27; margin:0; }
.lb-bh .lb-sub{ margin-top:7px; font-family:'Oswald',sans-serif; font-weight:600; font-size:clamp(9px,1.3vw,13px); letter-spacing:.34em; color:#ffe7b0; text-shadow:2px 2px 0 rgba(0,0,0,.6); }

/* hub: season rewards */
.rwd-intro{ color:var(--muted); font-size:14px; line-height:1.6; margin-bottom:14px; } .rwd-intro b{ color:var(--g-gold2); }
.rwd-h{ font-family:Outfit,sans-serif; font-weight:700; font-size:16px; margin:18px 2px 12px; }
.rwd-row{ display:flex; align-items:center; gap:16px; background:var(--g-card); border:1px solid var(--g-line); border-left:3px solid var(--g-gold); border-radius:14px; padding:13px 16px; margin-bottom:10px; }
.rwd-row.me, .rwd-row.hl{ border:1.5px solid var(--g-blue); }
.rwd-row img{ width:84px; height:84px; border-radius:12px; object-fit:cover; flex:0 0 auto; background:var(--g-card2); }
.rwd-mid{ flex:1; min-width:0; }
.rwd-rank{ font-family:Outfit,sans-serif; font-weight:700; font-size:20px; color:var(--g-gold2); } .rwd-rank small{ font-family:Inter,sans-serif; font-weight:500; font-size:11px; color:var(--muted); margin-left:6px; }
.rwd-meb{ font-size:10px; font-weight:700; background:var(--g-blue); color:#04203f; border-radius:6px; padding:2px 8px; margin-left:6px; vertical-align:middle; }
.rwl{ display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:6px; }
.rwl .r{ display:inline-flex; align-items:center; gap:5px; font-size:14px; }
.rwd-note{ font-size:12px; color:var(--muted); margin-top:12px; }

/* hub: leaderboard controls — seg (Players/Alliances) + chips + Rewards button */
.lbctrl{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:16px 0 8px; }
.lbseg{ display:flex; gap:4px; background:var(--g-card); border:1px solid var(--g-line); border-radius:10px; padding:3px; }
.lbseg button{ border:0; cursor:pointer; font-size:12px; font-weight:600; padding:6px 14px; border-radius:8px; color:var(--muted); background:transparent; }
.lbseg button.on{ background:#1e1a33; color:var(--g-purple2); }
.lbchips{ display:flex; gap:8px; flex-wrap:wrap; }
.lbchip{ font-size:11px; font-weight:600; padding:6px 12px; border-radius:20px; color:var(--muted); background:var(--g-card); border:1px solid var(--g-line); cursor:pointer; }
.lbchip.on{ background:var(--g-gold); color:#1a1205; border-color:var(--g-gold); }
.lbright{ margin-left:auto; display:flex; gap:8px; align-items:center; }
.lbrew{ font-size:12px; font-weight:700; background:#1e1a33; border:1px solid var(--g-purple); color:var(--g-purple2); border-radius:8px; padding:6px 12px; cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
.lbrew.on{ background:var(--g-purple); color:#fff; }

/* hub: leaderboard — verbatim leaderboard.html mockup (podium .pc + .lr rows + you-row + Vaults held) */
.lbx .podium{ display:flex; align-items:flex-end; justify-content:center; gap:14px; margin:6px 0 14px; }
.lbx .pc{ background:var(--g-card); border:1.5px solid var(--c); border-radius:16px; padding:14px 12px 16px; text-align:center; width:30%; box-shadow:0 0 26px var(--g); }
.lbx .pc.first{ padding-bottom:28px; border-width:2px; }
.lbx .crown{ font-size:22px; color:var(--g-gold); margin-bottom:2px; }
.lbx .pav{ border-radius:50%; border:3px solid var(--c); box-shadow:0 0 16px var(--g); display:flex; align-items:center; justify-content:center; margin:0 auto 7px; width:60px; height:60px; font-size:28px; background:var(--g-card2); }
.lbx .pc.first .pav{ width:80px; height:80px; font-size:36px; }
.lbx .pn{ font-weight:600; font-size:14px; } .lbx .ptag{ font-size:10px; color:var(--muted); }
.lbx .pos{ display:inline-block; margin-top:6px; font-family:Oswald,sans-serif; font-weight:700; font-size:11px; padding:2px 10px; border-radius:20px; background:var(--c); color:#15110a; }
.lbx .psc{ margin-top:7px; font-family:Oswald,sans-serif; font-weight:700; font-size:18px; color:var(--g-gold2); }
.lbx .lr{ display:flex; align-items:center; gap:12px; background:var(--g-card); border:1px solid rgba(255,255,255,.07); border-radius:10px; padding:8px 12px; margin-bottom:6px; }
.lbx .lr .rk{ width:24px; text-align:center; font-family:Oswald,sans-serif; font-weight:700; color:var(--muted); }
.lbx .lr .lav{ width:38px; height:38px; border-radius:50%; border:2px solid #5ad1ff; box-shadow:0 0 11px rgba(90,209,255,.7); display:flex; align-items:center; justify-content:center; font-size:18px; background:var(--g-card2); flex:none; }
.lbx .lr .info{ flex:1; min-width:0; } .lbx .lr .ln{ font-size:14px; font-weight:600; } .lbx .lr .ls{ font-size:11px; color:var(--muted); } .lbx .lr .ltag{ color:var(--muted); font-size:12px; }
.lbx .lr .sc2{ font-family:Oswald,sans-serif; font-weight:700; font-size:15px; color:var(--g-gold2); }
.lbx .lr.you{ border:1.5px solid var(--g-blue); background:#141d2b; } .lbx .lr.you .lav{ border-color:#9dbef0; box-shadow:0 0 11px rgba(55,138,221,.7); }
.lbs{ font-family:Oswald,sans-serif; font-weight:600; font-size:19px; margin:24px 2px 12px; }
.vrow{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; }
.vh{ display:flex; align-items:center; gap:11px; background:var(--g-card); border:1px solid rgba(255,255,255,.08); border-left:3px solid var(--c); border-radius:12px; padding:10px; }
.vh img{ width:46px; height:46px; border-radius:9px; object-fit:cover; } .vh .vn{ font-weight:600; font-size:13px; } .vh .vhold{ font-size:11px; } .vh .vl{ margin-left:auto; font-family:Oswald,sans-serif; font-weight:700; font-size:13px; color:var(--g-gold2); white-space:nowrap; }

/* hub: shop + cards */
.sectn2{ font-family:Outfit,sans-serif; font-weight:700; font-size:17px; margin:0 2px 4px; }
.shop-sub{ color:var(--muted); font-size:13px; margin:0 0 12px; }
.note2{ font-size:12px; color:var(--muted); margin:8px 2px 0; }
/* credit top-up packs */
.cgrid{ display:grid; gap:12px; grid-template-columns:repeat(2,1fr); }
@media(min-width:760px){ .cgrid{ grid-template-columns:repeat(5,1fr); } }
.cp{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:15px 10px; background:var(--g-card); border:1px solid var(--g-line); border-radius:14px; text-align:center; }
.cp.best{ border-color:var(--g-gold); box-shadow:0 0 18px rgba(239,159,39,.16); }
.cp img{ width:60px; height:60px; border-radius:13px; object-fit:cover; }
.cp .amt{ font-weight:800; font-size:20px; color:var(--g-gold2); line-height:1; } .cp .amt small{ display:block; font-size:11px; color:var(--muted); font-weight:500; margin-top:4px; }
.cp .bon{ font-size:12px; font-weight:700; color:var(--g-teal2); } .cp .bon.dim{ color:var(--g-gray); font-weight:500; }
.cp .ctag{ font-size:10px; font-weight:800; color:#1a1205; background:var(--g-gold); border-radius:6px; padding:2px 9px; min-height:17px; } .cp .ctag.ghost{ background:transparent; }
.cp .px{ margin-top:4px; width:100%; justify-content:center; }
.sgrid{ display:grid; gap:12px; grid-template-columns:1fr 1fr; }
@media(min-width:760px){ .sgrid{ grid-template-columns:repeat(3,1fr); } }
.sitem{ background:var(--g-card); border:1px solid var(--g-line); border-radius:14px; padding:15px; text-align:center; }
.sitem .si{ width:56px; height:56px; margin:0 auto; border-radius:13px; overflow:hidden; } .sitem .si img{ width:100%; height:100%; object-fit:cover; display:block; }
.sitem .sn{ font-weight:700; margin-top:8px; } .sitem .sd{ color:var(--muted); font-size:12px; margin:3px 0 10px; min-height:30px; }
.sitem .sbtn{ width:100%; justify-content:center; } .sitem .sbtn[disabled]{ opacity:.5; cursor:default; }
/* customisation gifts — verbatim shadow-shop.html mockup (featured bundle + boosts + cosmetics) */
.gifts .fc{ display:flex; align-items:center; gap:20px; border-radius:16px; padding:20px; background:linear-gradient(110deg,#241a4a,#2a1240 60%,#1a1430); border:1px solid rgba(127,119,221,.4); margin-bottom:8px; }
.gifts .fc img{ width:140px; height:140px; border-radius:14px; object-fit:cover; flex:none; }
.gifts .fc .ft{ font-size:11px; font-weight:700; color:#c9c4f4; letter-spacing:.12em; }
.gifts .fc h3{ font-family:Outfit,sans-serif; font-weight:800; font-size:26px; margin:5px 0; }
.gifts .fc .fd{ font-size:13px; color:#cdd2da; margin-bottom:12px; }
.gifts .fc .save{ font-size:11px; font-weight:700; color:#5dcaa5; background:#10271f; border:1px solid #2c6b52; border-radius:6px; padding:2px 8px; margin-left:8px; }
.gifts .fc .row2{ display:flex; align-items:center; gap:14px; }
.gifts .gsec{ font-family:Inter,sans-serif; font-weight:700; font-size:17px; margin:24px 2px 12px; }
.gifts .grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.gifts .it{ background:#15131f; border:1px solid rgba(255,255,255,.08); border-radius:14px; overflow:hidden; transition:border-color .15s; display:flex; flex-direction:column; }
.gifts .it:hover{ border-color:rgba(127,119,221,.5); }
.gifts .it .im{ aspect-ratio:1/1; width:100%; background:#0c0a14; flex:none; } .gifts .it .im img{ width:100%; height:100%; object-fit:cover; display:block; }
.gifts .it .b{ padding:12px 14px; flex:1; display:flex; flex-direction:column; }
.gifts .it .pl{ margin-top:auto; }
.gifts .it .nm{ font-weight:700; font-size:15px; }
.gifts .it .ds{ font-size:12px; color:#9aa0ad; margin:4px 0 12px; min-height:32px; }
.gifts .it .pl{ display:flex; align-items:center; justify-content:space-between; }
.gifts .sc{ font-weight:700; font-size:16px; color:#c9c4f4; display:inline-flex; align-items:center; gap:5px; } .gifts .sc i{ color:#7f77dd; font-size:17px; }
.gifts .buy{ font-family:Inter,sans-serif; font-weight:700; font-size:13px; background:#ef9f27; color:#1a1205; border-radius:9px; padding:7px 18px; cursor:pointer; }
@media(max-width:1100px){ .gifts .grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:760px){ .gifts .grid{ grid-template-columns:repeat(2,1fr); } .gifts .fc{ flex-wrap:wrap; } }
.cardset{ background:var(--g-card); border:1px solid var(--g-line); border-radius:14px; padding:14px; margin-bottom:10px; }
.cardset .cs-h{ display:flex; justify-content:space-between; align-items:center; margin-bottom:9px; font-size:14px; font-weight:600; }
.cardrow{ display:flex; gap:8px; flex-wrap:wrap; }
.gcard{ width:72px; text-align:center; }
.gcard .gc-art{ height:52px; border-radius:9px; display:grid; place-items:center; font-size:11px; font-weight:700; position:relative; }
.gcard .gc-q{ position:absolute; top:2px; right:4px; font-size:10px; color:var(--text); }

/* hub: alliance (matches alliance-members.html mockup) */
.ahead{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:var(--g-card); border:1px solid var(--g-line); border-radius:14px; padding:14px 16px; margin-bottom:10px; }
.aflag{ width:48px; height:48px; border-radius:12px; background:linear-gradient(135deg,var(--g-purple),var(--g-gold)); display:flex; align-items:center; justify-content:center; font-size:24px; flex:0 0 auto; }
.an{ font-family:Outfit,sans-serif; font-weight:800; font-size:20px; } .atag{ color:var(--muted); font-size:14px; font-weight:600; }
.ameta{ font-size:12px; color:var(--muted); } .ascore{ color:var(--g-purple2); font-weight:800; font-size:20px; }
.adesc{ color:var(--muted); font-size:13px; margin:0 0 8px; }
.abanner{ display:flex; gap:18px; justify-content:center; flex-wrap:wrap; background:var(--g-card2); border:1px solid var(--g-line); border-radius:10px; padding:10px; margin-bottom:8px; font-size:13px; } .abanner b{ font-family:Outfit,sans-serif; }
.asub{ display:flex; justify-content:space-between; align-items:center; font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; margin:16px 2px 8px; } .asub .atoday{ font-size:10px; color:var(--g-gold2); letter-spacing:.04em; }
.alist{ display:flex; flex-direction:column; gap:7px; }
.arow{ display:flex; align-items:center; gap:12px; background:var(--g-card); border:1px solid var(--g-line); border-radius:10px; padding:9px 12px; }
.arow.lead{ border-color:rgba(239,159,39,.5); background:#1d1710; } .arow.sup{ border-color:rgba(127,119,221,.4); }
.aav{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:18px; flex:0 0 auto; background:var(--g-card2); border:1px solid var(--g-line); }
.aav.leader{ background:#3a2a08; } .aav.officer{ background:#241e3f; }
.ainfo{ flex:1; min-width:0; } .anm{ font-weight:600; font-size:14px; } .alv{ font-size:11px; color:var(--muted); }
.atitle{ width:96px; flex:none; display:flex; }
.abadge{ font-size:10px; font-weight:800; font-family:Outfit,sans-serif; letter-spacing:.04em; padding:3px 9px; border-radius:20px; }
.b-lead{ background:#3a2a08; color:var(--g-gold2); } .b-sup{ background:#241e3f; color:var(--g-purple2); } .b-mem{ background:#1f2330; color:var(--muted); }
.aact{ display:flex; gap:6px; flex:none; }
.aact i{ width:30px; height:30px; border-radius:8px; background:var(--g-card2); border:1px solid var(--g-line); display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:16px; cursor:pointer; } .aact i:hover{ color:#fff; }
@media(max-width:600px){ .atitle{ width:auto; } }

/* hub: roster */
.rrow{ display:flex; align-items:center; gap:9px; background:var(--g-card2); border-radius:9px; padding:8px 11px; margin-bottom:6px; font-size:13.5px; }
.rrow .rn{ flex:1; }
.badge{ font-size:9.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; border:1px solid currentColor; border-radius:5px; padding:1px 6px; }
.gbtn{ border:1px solid var(--g-line); background:transparent; color:var(--g-blue2); border-radius:7px; padding:3px 9px; font-size:11.5px; font-weight:600; cursor:pointer; }
.gbtn.red{ color:var(--g-red); }
.ginput{ background:var(--bg2); border:1px solid var(--g-line); color:var(--text); border-radius:8px; padding:8px 11px; font-size:14px; outline:none; }
.gam-empty{ color:var(--muted2); font-size:13.5px; padding:8px 2px; }

/* ---- bottom nav (mobile) ---- */
.gam-nav{ position:fixed; left:0; right:0; bottom:0; z-index:97; background:#171922; border-top:1px solid var(--g-line); display:flex; }
@media(min-width:768px){ .gam-nav{ display:none; } }
.gn-item{ flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:7px 2px 8px; background:none; border:0; color:var(--muted); cursor:pointer; font-size:10px; font-weight:600; }
.gn-item img.gni{ width:29px; height:29px; object-fit:contain; filter:drop-shadow(0 2px 4px rgba(0,0,0,.45)); transition:transform .15s; }
.gn-item.on{ color:var(--g-gold2); }
.gn-item.on img.gni{ transform:translateY(-2px) scale(1.08); }
.gn-item:active img.gni{ transform:scale(.92); }
@media(max-width:767px){
  body.gam-on{ padding-bottom:112px; }
  body.gam-on .gam-chat{ bottom:56px; }
  body.gam-on .hdr .burger{ display:none !important; }   /* single nav = the 3D bottom tab bar; no hamburger on mobile */
  body.gam-on #langSwitch{ display:none; }               /* keep the mobile header compact */
}

/* ---- mobile drawer (header hamburger → grouped nav, mirrors the sidebar) ---- */
.gam-drawer{ position:fixed; inset:0; z-index:120; display:none; }
.gam-drawer.open{ display:block; }
.gd-back{ position:absolute; inset:0; background:rgba(4,6,14,.6); }
.gd-panel{ position:absolute; top:0; left:0; bottom:0; width:82%; max-width:300px; background:#13141b; border-right:1px solid var(--g-line); overflow-y:auto; padding:0 0 18px; box-shadow:6px 0 30px rgba(0,0,0,.5); animation:gdin .2s ease-out; }
@keyframes gdin{ from{ transform:translateX(-100%); } to{ transform:translateX(0); } }
@media(min-width:768px){ .gam-drawer{ display:none !important; } body.gam-on .hdr .burger{ display:none; } }

/* ---- desktop sidebar (app shell: brand + labeled nav; replaces the header nav on desktop) ---- */
.gam-side{ position:fixed; left:0; top:0; bottom:0; width:212px; background:#0c0a14; border-right:1px solid var(--g-line); display:none; flex-direction:column; padding:0 0 14px; overflow-y:auto; z-index:70; scrollbar-width:none; }
.gam-side::-webkit-scrollbar{ display:none; }
@media(min-width:768px){
  body.gam-on .gam-side{ display:flex; }
  body.gam-on{ padding-left:212px; }
  body.gam-on #gamStrip{ display:none; }
  body.gam-on .hdr .nav{ display:none; }      /* header nav removed on desktop — the sidebar is the nav */
  body.gam-on .hdr .brand{ display:none; }     /* brand lives at the top of the sidebar now */
  body.gam-on .hub{ left:212px; }              /* hubs open beside the rail, keeping it visible */
}
.gs-brand{ display:flex; align-items:center; gap:9px; padding:15px 16px 13px; border-bottom:1px solid var(--g-line); margin-bottom:4px; text-decoration:none; flex:0 0 auto; cursor:pointer; }
.gs-brand .gsb-txt{ font-family:Outfit,sans-serif; font-weight:800; font-size:18px; color:var(--text); letter-spacing:.2px; }
.gs-brand .gsb-txt span{ color:var(--g-gold2); }
.gs-group{ padding:11px 18px 5px; font-size:10px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:var(--g-gray); }
.gs-item{ display:flex; align-items:center; gap:11px; margin:1px 8px; padding:9px 10px; background:none; border:0; border-radius:10px; cursor:pointer; color:var(--muted); font-family:'Outfit',sans-serif; font-size:15.5px; font-weight:600; text-align:left; transition:background .12s,color .12s; position:relative; }
.gs-item:hover{ color:var(--text); background:rgba(255,255,255,.05); }
.gs-item.on{ color:var(--g-gold2); background:rgba(239,159,39,.12); }
.gs-item.on::before{ content:''; position:absolute; left:-8px; top:7px; bottom:7px; width:3px; border-radius:0 3px 3px 0; background:var(--g-gold); }
.gs-item .gsi{ width:26px; display:grid; place-items:center; flex:0 0 auto; color:var(--muted); }
.gs-item .gsi i{ font-size:20px; line-height:1; }
.gs-item:hover .gsi{ color:var(--text); }
.gs-item.on .gsi{ color:var(--g-gold2); }
.gs-item .gsl{ flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gs-item .gsb{ background:var(--g-red); color:#fff; font-size:10px; font-weight:800; border-radius:99px; min-width:18px; height:18px; display:grid; place-items:center; padding:0 5px; flex:0 0 auto; }
.gs-item .gsb.green{ background:var(--green); color:#06210f; }
.gs-links{ margin-top:auto; padding:12px 18px 2px; display:flex; flex-direction:column; gap:9px; border-top:1px solid var(--g-line); }
.gs-links a{ color:var(--muted); font-size:12.5px; text-decoration:none; } .gs-links a:hover{ color:var(--text); }
.gn-item.on{ color:var(--g-gold2); }
/* logged-out rail: locked items + sign-in CTA pinned at the bottom */
.gs-item.locked{ opacity:.6; } .gs-item.locked:hover{ opacity:1; }
.gs-lock{ font-size:11px; opacity:.7; flex:0 0 auto; }
.gs-auth{ margin-top:auto; padding:14px 14px 4px; border-top:1px solid var(--g-line); display:flex; flex-direction:column; gap:8px; }
.gs-auth .gs-cta{ width:100%; justify-content:center; }
.gs-auth .gs-cta2{ background:transparent; border:1px solid var(--g-line); color:var(--muted); border-radius:9px; padding:8px; font-weight:600; font-size:13px; cursor:pointer; } .gs-auth .gs-cta2:hover{ color:var(--text); }
/* hide Profile in the bottom-nav when logged out (no profile without an account) */
body:not(.gam-auth) #gamNav .gn-item[data-nav="profile"]{ display:none; }
/* logged-out section teaser (locked hub): what the section is + register/login CTA */
.lockwrap{ max-width:460px; margin:22px auto 0; text-align:center; }
.lockhero{ font-size:60px; line-height:1; }
.lockh{ font-family:Outfit,sans-serif; font-size:23px; margin:8px 0 4px; }
.lockblurb{ color:var(--muted); font-size:14.5px; margin:0 0 18px; }
.lockfeat{ list-style:none; padding:0; margin:0 0 20px; display:grid; gap:9px; text-align:left; }
.lockfeat li{ background:var(--g-card); border:1px solid var(--g-line); border-radius:12px; padding:11px 13px 11px 38px; font-size:14px; position:relative; }
.lockfeat li::before{ content:'✓'; position:absolute; left:14px; color:var(--g-teal2); font-weight:800; }
.lockcta{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.lockcta .btn{ min-width:150px; justify-content:center; }
.locknote{ color:var(--g-gray); font-size:12.5px; margin-top:14px; }
/* blog post: article + conversion sidebar (2-col on wide screens, stacks on narrow) */
.blog-grid{ grid-template-columns:minmax(0,1fr); }
@media(min-width:1100px){ .blog-grid{ grid-template-columns:minmax(0,1fr) 300px; } }
.vic-img{ width:56px; height:56px; border-radius:12px; background:center/cover no-repeat; }
/* open-box modal: quantity selector (×1–4), multi-open results grid, demo CTA */
.qty-sel{ display:flex; gap:6px; }
.qty-sel button{ min-width:40px; height:40px; border-radius:9px; border:1px solid var(--g-line); background:var(--g-card); color:var(--muted); font-weight:800; font-size:13px; cursor:pointer; }
.qty-sel button.on{ background:var(--g-gold); color:#1a1205; border-color:var(--g-gold); }
.multi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(108px,1fr)); gap:10px; margin:6px 0 4px; }
.mg-item{ background:var(--g-card); border:1px solid var(--g-line); border-top:3px solid var(--rc,var(--g-line)); border-radius:10px; padding:10px 8px; text-align:center; }
.mg-item img{ width:46px; height:46px; object-fit:contain; }
.mg-item .mn{ font-size:11.5px; color:var(--text); margin-top:4px; line-height:1.2; max-height:28px; overflow:hidden; }
.mg-item .mv{ color:var(--g-gold2); font-weight:700; font-size:12.5px; margin-top:2px; }
.multi-sum{ text-align:center; color:var(--muted); font-size:13.5px; margin:4px 0 10px; }
.multi-sum b{ color:var(--g-gold2); }
.rev-demo{ text-align:center; }
.rev-demo .rd-note{ color:var(--muted); font-size:13.5px; margin:0 auto 10px; max-width:420px; }
.rev-demo .rd-cta{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* ---- onboarding ---- */
.gam-onb{ position:fixed; inset:0; z-index:160; background:rgba(4,6,14,.82); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:18px; }
.gam-onb-card{ background:var(--g-card2); border:1px solid var(--g-line); border-radius:18px; padding:24px; max-width:440px; width:100%; box-shadow:0 30px 80px rgba(0,0,0,.5); }
.onb-step{ display:flex; gap:13px; align-items:flex-start; padding:11px 0; border-top:1px solid var(--g-line); }
.onb-step.first{ border-top:0; }
.onb-step .oi{ font-size:26px; flex:0 0 auto; line-height:1.1; }
.onb-step .ot{ font-weight:600; } .onb-step .od{ color:var(--muted); font-size:13px; }

/* ---- Alliance Hall (neon-lounge landing: zone shortcuts + live chat) ---- */
.hub-b .inr.inr-wide{ max-width:1320px; }
.ah-hdr{ display:flex; align-items:center; justify-content:space-between; background:var(--g-card); border:1px solid var(--g-line); border-radius:12px; padding:12px 18px; margin-bottom:14px; }
.ah-hdr .t{ font-family:Outfit,sans-serif; font-weight:800; font-size:18px; color:var(--g-teal2); letter-spacing:.02em; }
.ah-hdr .m{ font-size:12px; color:var(--muted); letter-spacing:.04em; }
.ah-hdr .m b{ color:var(--g-purple2); }
.ah-row{ display:flex; gap:14px; align-items:stretch; }
.ah-hub{ flex:1; min-width:0; position:relative; aspect-ratio:1344/768; border-radius:14px; overflow:hidden; border:1px solid rgba(120,90,200,.25); background:#07060c center/cover no-repeat; background-image:url('/assets/alliance-bg.jpg'); }
.ah-edge{ position:absolute; top:0; bottom:0; width:26%; pointer-events:none; }
.ah-edgeL{ left:0; background:linear-gradient(90deg,rgba(7,6,12,.82),rgba(7,6,12,.4) 60%,transparent); }
.ah-edgeR{ right:0; background:linear-gradient(270deg,rgba(7,6,12,.82),rgba(7,6,12,.4) 60%,transparent); }
.ah-online{ position:absolute; top:12px; left:14px; font-size:11px; font-weight:700; letter-spacing:.12em; color:var(--g-teal2); z-index:4; }
.ah-online::before{ content:""; display:inline-block; width:7px; height:7px; border-radius:50%; background:#34e3a0; margin-right:6px; vertical-align:1px; box-shadow:0 0 8px #34e3a0; }
.ah-rail{ position:absolute; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:clamp(16px,3vw,38px); z-index:4; }
.ah-railL{ left:2%; }
.ah-railR{ right:2%; }
.ah-ic{ display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; text-decoration:none; }
.ah-ic .b{ width:clamp(40px,4.4vw,58px); height:clamp(40px,4.4vw,58px); border-radius:50%; background:rgba(16,9,24,.6); border:2px solid var(--c); display:flex; align-items:center; justify-content:center; color:var(--c); font-size:clamp(19px,2.3vw,26px); box-shadow:0 0 12px rgba(0,0,0,.5),0 0 9px var(--g); transition:transform .12s, box-shadow .12s; }
.ah-ic:hover .b{ transform:translateY(-2px) scale(1.06); box-shadow:0 0 16px rgba(0,0,0,.55),0 0 16px var(--g); }
.ah-ic span{ font-size:clamp(9px,1vw,12px); font-weight:700; color:#fff; letter-spacing:.03em; text-shadow:0 1px 3px #000; }
.ah-chat{ width:352px; flex:none; background:var(--g-card); border:1px solid var(--g-line); border-radius:14px; display:flex; flex-direction:column; overflow:hidden; }
.ah-tabs{ display:flex; gap:6px; padding:10px; }
.ah-tab{ flex:1; text-align:center; font-size:12px; font-weight:700; padding:7px 0; border-radius:8px; background:transparent; color:var(--muted); border:1px solid var(--g-line); cursor:pointer; }
.ah-tab.on{ background:#1e1a33; border-color:var(--g-purple); color:var(--g-purple2); }
.ah-msgs{ flex:1; overflow-y:auto; padding:2px 12px; font-size:13px; line-height:1.55; }
.ah-msgs p{ margin:7px 0; } .ah-msgs b{ font-weight:600; }
.ahn{ color:#7fd0ff; font-weight:600; }
.ah-send{ display:flex; gap:8px; padding:10px; border-top:1px solid var(--g-line); }
.ah-send input{ flex:1; background:var(--g-card2); border:1px solid var(--g-line); border-radius:8px; color:var(--text); padding:8px 10px; font-size:13px; }
.ah-send button{ padding:0 18px; }
@media(max-width:860px){
  .ah-row{ flex-direction:column; }
  .ah-chat{ width:100%; height:320px; }
}
/* Alliance Settings panel (inline below the lounge) */
.ah-z{ margin-top:16px; background:var(--g-card); border:1px solid rgba(127,119,221,.3); border-radius:14px; overflow:hidden; }
.ah-zhead{ display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--g-card2); border-bottom:1px solid var(--g-line); }
.ah-zi{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px; border:2px solid var(--g-gold2); color:var(--g-gold2); background:rgba(16,9,24,.5); flex:none; }
.ah-zt{ font-family:Outfit,sans-serif; font-weight:800; font-size:18px; }
.ah-zsub{ font-size:12px; color:var(--muted); }
.ah-zx{ margin-left:auto; color:var(--muted); font-size:22px; cursor:pointer; }
.ah-zx:hover{ color:var(--text); }
.ah-ztabs{ display:flex; gap:8px; padding:12px 14px 0; flex-wrap:wrap; border-bottom:1px solid var(--g-line); }
.ah-ztab{ font-family:Outfit,sans-serif; font-weight:700; font-size:13.5px; padding:9px 14px; border-radius:9px 9px 0 0; cursor:pointer; color:var(--muted); display:inline-flex; align-items:center; gap:7px; border:1px solid transparent; border-bottom:none; background:transparent; }
.ah-ztab.on{ background:#1b1730; color:var(--g-purple2); border-color:rgba(127,119,221,.4); }
.ah-cnt{ background:var(--g-teal); color:#04231a; font-size:10px; font-weight:800; border-radius:10px; padding:1px 7px; }
.ah-zbody{ padding:16px; }
.aset{ background:var(--g-card2); border:1px solid var(--g-line); border-radius:12px; padding:14px 14px 4px; margin-bottom:14px; }
.aset h4{ font-family:Outfit,sans-serif; font-size:14px; font-weight:800; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.aset h4 i{ color:var(--g-purple2); }
.afld{ margin-bottom:14px; }
.afld>label{ display:block; font-size:12px; font-weight:700; color:var(--muted); letter-spacing:.03em; margin-bottom:6px; text-transform:uppercase; }
.ahint{ color:var(--muted2); font-weight:500; letter-spacing:0; text-transform:none; font-size:12px; }
.afld .ginput, .afld select{ width:100%; background:var(--g-card2); border:1px solid var(--g-line); border-radius:9px; color:var(--text); padding:10px 12px; font-size:14px; font-family:inherit; }
.afld textarea.ginput{ resize:vertical; min-height:54px; }
.aseg{ display:flex; gap:8px; flex-wrap:wrap; }
.aseg span{ flex:1; min-width:96px; text-align:center; font-size:13px; font-weight:600; padding:9px 0; border-radius:9px; border:1px solid var(--g-line); color:var(--muted); cursor:pointer; }
.aseg span.on{ border-color:var(--g-purple); background:#1e1a33; color:var(--g-purple2); }
.aseg span.lock{ cursor:not-allowed; opacity:.55; }
.asave-bar{ display:flex; align-items:center; gap:12px; margin-top:2px; flex-wrap:wrap; }
.asave-bar .ahint{ flex:1; }
/* visibility toggles for the Hall panel + its tab panes (scoped so it can't affect the rest of the page) */
.ah-z.hide{ display:none; }
.ah-zbody>[data-hp].hide{ display:none; }
/* members table — real <table> so every row shares the same column widths (Member · Lvl · VIP · This week · Cards · Role · actions) */
.mtwrap{ overflow-x:auto; }
.mtable{ width:100%; min-width:600px; border-collapse:separate; border-spacing:0 7px; }
.mtable thead th{ text-align:left; font-size:10px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--muted2); padding:0 10px 2px; white-space:nowrap; }
.mtable th.rc{ text-align:center; } .mtable th.ra{ text-align:right; }
.mtable td{ background:var(--g-card2); border-top:1px solid var(--g-line); border-bottom:1px solid var(--g-line); padding:8px 10px; vertical-align:middle; font-size:13px; }
.mtable td:first-child{ border-left:1px solid var(--g-line); border-top-left-radius:10px; border-bottom-left-radius:10px; }
.mtable td:last-child{ border-right:1px solid var(--g-line); border-top-right-radius:10px; border-bottom-right-radius:10px; }
.mrow.lead td{ border-color:rgba(239,159,39,.5); background:#1d1710; }
.mrow.sup td{ border-color:rgba(127,119,221,.4); }
.mrow.dim td{ opacity:.6; }
.mwhoin{ display:flex; align-items:center; gap:10px; }
.mnm{ font-weight:600; font-size:14px; }
.minact{ color:var(--g-red); font-size:11px; font-weight:600; }
td.mlvl{ text-align:center; width:50px; font-family:Outfit,sans-serif; font-weight:700; font-size:15px; }
td.mvip{ text-align:center; width:100px; }
.mvipb{ display:inline-block; font-size:11px; font-weight:800; font-family:Outfit,sans-serif; letter-spacing:.03em; padding:3px 9px; border-radius:20px; border:1px solid currentColor; }
td.mwk{ text-align:right; width:108px; color:var(--g-teal2); font-weight:600; }
td.msc{ text-align:right; width:84px; color:var(--g-gold2); font-weight:700; }
td.mrole{ text-align:center; width:100px; }
td.aact{ width:66px; display:table-cell; }
.aactin{ display:flex; gap:6px; justify-content:flex-end; }
/* new-user alliance explainer */
.ai-hero{ text-align:center; padding:6px 0 18px; }
.ai-emoji{ font-size:40px; line-height:1; }
.ai-title{ font-family:Outfit,sans-serif; font-weight:800; font-size:24px; margin:8px 0 4px; }
.ai-sub{ color:var(--muted); font-size:14px; line-height:1.55; max-width:560px; margin:0 auto; }
.ai-benefits{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
@media(max-width:680px){ .ai-benefits{ grid-template-columns:1fr; } }
.ai-b{ display:flex; gap:11px; align-items:flex-start; background:var(--g-card2); border:1px solid var(--g-line); border-radius:12px; padding:13px 14px; }
.ai-b>span{ font-size:22px; line-height:1; flex:none; }
.ai-b b{ display:block; font-size:13.5px; margin-bottom:2px; }
.ai-b em{ color:var(--muted); font-size:12px; line-height:1.45; font-style:normal; }
.ai-note{ display:flex; gap:8px; align-items:center; font-size:12.5px; color:var(--g-gold2); background:var(--g-card2); border:1px solid var(--g-line); border-radius:10px; padding:10px 13px; margin-bottom:16px; }
.ai-note i{ font-size:16px; flex:none; }
/* ---- new-user Alliance Hall (join/create explainer) ---- */
.hi-hdr{ display:flex; align-items:center; justify-content:space-between; background:var(--g-card); border:1px solid var(--g-line); border-radius:12px; padding:12px 18px; margin-bottom:14px; }
.hi-t{ font-family:Outfit,sans-serif; font-weight:800; font-size:18px; letter-spacing:.06em; color:var(--text); }
.hi-t b{ color:var(--g-gold); font-weight:800; }
.hi-m{ font-size:12px; color:var(--muted); }
.hi-panel{ background:var(--g-card); border:1px solid rgba(127,119,221,.3); border-radius:14px; overflow:hidden; }
.hi-banner{ display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:1344/300; overflow:hidden; background:radial-gradient(620px 280px at 50% 44%,rgba(45,75,160,.55),transparent 72%),#0b0e18; }
.hi-banner img{ height:84%; width:auto; max-width:90%; object-fit:contain; filter:drop-shadow(0 12px 30px rgba(90,120,255,.40)); }
.hi-htxt{ text-align:center; padding:18px 20px 6px; }
.hi-htxt h1{ font-family:Outfit,sans-serif; font-weight:900; font-size:30px; margin:0 0 6px; }
.hi-htxt p{ color:var(--muted); font-size:14.5px; line-height:1.5; max-width:560px; margin:0 auto; }
.hi-split{ display:grid; grid-template-columns:1fr 1.25fr; gap:14px; padding:8px 20px 22px; }
@media(max-width:780px){ .hi-split{ grid-template-columns:1fr; } }
.hi-sec{ background:var(--g-card2); border:1px solid var(--g-line); border-radius:12px; padding:16px; }
.hi-sec h3{ font-family:Outfit,sans-serif; font-weight:800; font-size:15px; margin-bottom:4px; }
.hi-d{ font-size:12.5px; color:var(--muted); margin-bottom:14px; line-height:1.5; }
.hi-crow{ display:flex; gap:8px; flex-wrap:wrap; }
.hi-in{ background:var(--g-card2); border:1px solid var(--g-line); border-radius:9px; color:var(--text); padding:11px 12px; font-size:14px; font-family:inherit; flex:1 1 160px; }
.hi-in.tg{ width:74px; flex:none; text-align:center; }
.hi-al{ display:flex; align-items:center; gap:11px; background:var(--g-card); border:1px solid var(--g-line); border-radius:10px; padding:10px 12px; margin-bottom:8px; }
.hi-fl{ width:38px; height:38px; border-radius:10px; background:linear-gradient(135deg,var(--g-purple),var(--g-gold)); display:flex; align-items:center; justify-content:center; font-size:19px; flex:none; }
.hi-inf{ flex:1; min-width:0; }
.hi-an{ font-weight:600; font-size:14px; }
.hi-tag{ color:var(--muted); font-size:12px; }
.hi-me{ font-size:12px; color:var(--muted); margin-top:1px; }
.hi-me b{ color:var(--g-teal2); }
.hi-join{ background:var(--g-gold); color:#1a1205; border:none; border-radius:8px; font-weight:700; font-size:13px; padding:8px 15px; cursor:pointer; font-family:inherit; flex:none; }
.hi-applyb{ background:transparent; border:1px solid rgba(127,119,221,.5); color:var(--g-purple2); border-radius:8px; font-weight:600; font-size:13px; padding:8px 15px; cursor:pointer; font-family:inherit; flex:none; }
/* auth modal must sit ABOVE the hub overlay (hub is z-index 150; app.js sets the modal to 120) */
#authModal{ z-index:2000 !important; }
/* account dropdown (avatar → My profile / Sign out) */
.gam-acct{ position:relative; display:inline-block; }
.gam-menu{ position:absolute; right:0; top:calc(100% + 8px); background:var(--g-card); border:1.5px solid rgba(139,92,255,.6); border-radius:12px; padding:6px; min-width:168px; display:none; z-index:300; box-shadow:0 18px 44px rgba(0,0,0,.62), 0 0 0 1px rgba(139,92,255,.14); }
.gam-menu.open{ display:block; }
.gam-menu button{ display:flex; align-items:center; gap:10px; width:100%; background:transparent; border:none; color:var(--text); font-size:13.5px; padding:9px 10px; border-radius:8px; cursor:pointer; text-align:left; font-family:inherit; }
.gam-menu button:hover{ background:var(--g-card2); }
.gam-menu button i{ font-size:17px; color:var(--muted); }