:root{
  color-scheme:dark;
  --bg:#050607;--panel:#101317;--panel2:#171b20;--panel3:#0a0c0f;--text:#f3f5f7;--muted:#a7adb5;--line:rgba(255,255,255,.14);
  --accent:#ff7a00;--accent2:#ffb260;--good:#63d471;--warn:#ffd166;--bad:#ff5d5d;--blue:#3aa0ff;--radius:18px;
  --shadow:0 24px 80px rgba(0,0,0,.48);--font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}html,body{min-height:100%}body{margin:0;font-family:var(--font);color:var(--text);background:radial-gradient(circle at 86% 0%,rgba(255,122,0,.13),transparent 26%),linear-gradient(135deg,rgba(255,255,255,.025) 25%,transparent 25%) 0 0/18px 18px,linear-gradient(180deg,#11161b 0%,#050607 62%,#020304 100%);}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 0 96%,rgba(255,255,255,.025) 96% 100%) 0 0/58px 58px,linear-gradient(0deg,transparent 0 96%,rgba(255,255,255,.02) 96% 100%) 0 0/58px 58px;opacity:.65;z-index:-1}
a{color:inherit}button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}.muted{color:var(--muted)}.eyebrow{color:var(--accent);font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;font-weight:1000}h1,h2,h3,p{margin-top:0}h1,h2,h3{text-transform:uppercase;letter-spacing:.02em}h1{font-size:clamp(2.2rem,5vw,4.4rem);line-height:.92;margin-bottom:12px}h2{font-size:clamp(1.3rem,2.2vw,2rem)}p{line-height:1.62}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.site-shell{display:grid;grid-template-columns:270px minmax(0,1fr);min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;padding:28px 14px 18px;display:grid;grid-template-rows:auto 1fr auto;gap:22px;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.018)),rgba(5,7,9,.92);border-right:1px solid var(--line);box-shadow:12px 0 44px rgba(0,0,0,.34)}.brand{display:flex;gap:12px;align-items:center;padding:0 10px 8px}.brand-mark{width:58px;height:58px;border:1px solid rgba(255,122,0,.42);background:linear-gradient(135deg,rgba(255,122,0,.28),rgba(255,255,255,.04));display:grid;place-items:center;border-radius:15px;font-weight:1000;color:#fff;overflow:hidden}.brand-mark img{width:100%;height:100%;object-fit:cover}.brand-copy strong,.top-title strong{display:block;text-transform:uppercase}.brand-copy small,.top-title small{color:var(--muted);font-size:.82rem}.nav,.sidebar-footer,.admin-subnav{display:grid;gap:8px}.nav-link,.nav-button{border:1px solid transparent;background:transparent;color:#d7dce2;text-decoration:none;border-radius:12px;padding:12px 13px;display:flex;align-items:center;gap:10px;font-weight:900;text-transform:uppercase;letter-spacing:.045em}.nav-link:hover,.nav-button:hover,.nav-link.active,.nav-button.active{background:rgba(255,122,0,.10);border-color:rgba(255,122,0,.25);color:#fff}.nav-link span,.nav-button span{width:24px;text-align:center;color:var(--accent)}.sidebar-status{border:1px solid var(--line);border-radius:14px;padding:13px;background:rgba(255,255,255,.035)}.sidebar-status strong{display:block;text-transform:uppercase;margin-bottom:8px}.status-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--good);box-shadow:0 0 15px var(--good);margin-right:6px}.main{min-width:0;padding:26px 34px 60px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px}.mobile-menu{display:none}.user-chip{display:flex;align-items:center;gap:12px;border:1px solid rgba(255,122,0,.32);border-radius:16px;padding:9px 12px;background:rgba(5,7,9,.74);box-shadow:var(--shadow)}.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),#5965f2);font-weight:1000;overflow:hidden}.avatar img{width:100%;height:100%;object-fit:cover}.page-hero{border:1px solid var(--line);border-radius:var(--radius);padding:28px;margin-bottom:22px;box-shadow:var(--shadow);background:linear-gradient(90deg,rgba(0,0,0,.74),rgba(8,10,12,.64)),radial-gradient(circle at 84% 20%,rgba(255,122,0,.14),transparent 30%),linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));position:relative;overflow:hidden}.page-hero:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(255,122,0,.22),transparent 18%,transparent 82%,rgba(255,255,255,.07));opacity:.42}.page-hero>*{position:relative;z-index:1}.grid{display:grid;gap:18px}.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}.panel,.card{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.022)),rgba(10,12,15,.92);box-shadow:0 16px 46px rgba(0,0,0,.32)}.panel{padding:22px}.card{overflow:hidden}.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:18px}.panel-head h2,.panel-head h3{margin-bottom:4px}.btn,.btn-secondary,.btn-danger,.btn-ghost,.link-btn{border-radius:8px;border:1px solid rgba(255,255,255,.18);padding:11px 15px;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;font-weight:1000;text-transform:uppercase;letter-spacing:.055em}.btn{background:linear-gradient(180deg,#fff0df,var(--accent));color:#111;border-color:rgba(255,255,255,.34)}.btn-secondary,.btn-ghost{background:rgba(255,255,255,.055);color:#f4f6f8}.btn-danger{background:rgba(255,93,93,.13);color:#ff9999;border-color:rgba(255,93,93,.32)}.link-btn{border:0;background:transparent;color:var(--accent);padding:0}.btn:disabled,.btn-secondary:disabled{opacity:.55;cursor:not-allowed}.form-grid{display:grid;gap:14px}.form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}label{display:grid;gap:7px;color:#d8dde3;font-weight:850}input,select,textarea{width:100%;border:1px solid rgba(255,255,255,.18);border-radius:10px;background:#06080a;color:var(--text);padding:12px;outline:none}textarea{min-height:96px;resize:vertical}input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,122,0,.14)}.message{min-height:1.4em;color:var(--warn);font-weight:800}.message.success{color:var(--good)}.message.error{color:var(--bad)}.empty{border:1px dashed rgba(255,255,255,.18);border-radius:14px;padding:18px;color:var(--muted);background:rgba(255,255,255,.025)}.media{height:210px;background:#050607;position:relative;overflow:hidden}.media img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.45) contrast(1.12) brightness(.8)}.card-body{padding:18px}.event-date{position:absolute;left:14px;top:14px;width:58px;height:68px;border-radius:12px;background:#091018;border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;text-align:center;font-weight:1000;color:#fff;box-shadow:0 12px 30px rgba(0,0,0,.45)}.event-date small{display:block;color:var(--accent);font-size:.72rem}.ticket-tag{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(255,122,0,.38);border-radius:999px;padding:7px 10px;margin:10px 0 0;font-weight:1000;color:#ffd3aa;background:rgba(255,122,0,.12);font-size:.8rem}.ticket-tag.good{color:#b5ffc2;border-color:rgba(99,212,113,.34);background:rgba(99,212,113,.12)}.ticket-tag.bad{color:#ffb8b8;border-color:rgba(255,93,93,.34);background:rgba(255,93,93,.12)}.ticket-tag.warn{color:#ffe2a3;border-color:rgba(255,209,102,.34);background:rgba(255,209,102,.10)}.product-card .media{height:280px}.product-card .media img{object-fit:contain;padding:18px;background:#06080a}.collection-strip{display:flex;gap:14px;overflow-x:auto;padding-bottom:10px;margin-bottom:20px}.collection-card{min-width:240px;max-width:320px;flex:1;border:1px solid var(--line);border-radius:18px;padding:18px;text-align:left;background:linear-gradient(135deg,rgba(255,122,0,.12),rgba(255,255,255,.035));color:var(--text);position:relative;overflow:hidden}.collection-card.active{outline:2px solid var(--accent);box-shadow:0 0 34px rgba(255,122,0,.16)}.collection-card[data-hero]{background-size:cover;background-position:center}.collection-card h3{margin-bottom:8px}.collection-count{color:var(--accent);font-weight:1000}.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.stat{border:1px solid var(--line);border-radius:14px;padding:14px;background:rgba(255,255,255,.035)}.stat strong{display:block;font-size:1.8rem;color:var(--accent)}.list{display:grid;gap:14px}.row-card{border:1px solid var(--line);border-radius:14px;padding:16px;background:rgba(255,255,255,.035);display:grid;gap:10px}.row-actions{display:flex;gap:10px;flex-wrap:wrap}.ticket-card{position:relative;overflow:hidden}.ticket-credentials{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}.credential{border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:12px;background:#07090b}.credential small{display:block;color:var(--muted);font-weight:900;text-transform:uppercase}.credential strong{font-size:1.15rem;letter-spacing:.08em}.ticket-card.voided,.ticket-card.cancelled{border-color:rgba(255,93,93,.45);background:repeating-linear-gradient(-45deg,rgba(255,93,93,.10) 0 12px,rgba(255,255,255,.02) 12px 24px),rgba(10,12,15,.92)}.ticket-card.voided:before,.ticket-card.cancelled:before{content:"";position:absolute;left:-20%;right:-20%;top:50%;height:8px;background:rgba(255,93,93,.82);transform:rotate(-10deg);box-shadow:0 0 24px rgba(255,93,93,.3);z-index:1}.void-stamp{position:absolute;right:18px;top:18px;border:3px solid rgba(255,93,93,.8);color:#ff7c7c;font-size:2rem;font-weight:1000;transform:rotate(-8deg);padding:6px 12px;z-index:2}.obscured{filter:blur(4px);user-select:none}.admin-sections{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.admin-section{padding:18px;text-decoration:none}.admin-section span{font-size:2rem}.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}.login-card{width:min(760px,100%);padding:30px}.login-logo{width:110px;height:110px;border-radius:24px;border:1px solid rgba(255,122,0,.42);display:grid;place-items:center;font-weight:1000;font-size:2rem;margin-bottom:18px;background:rgba(255,122,0,.12)}.loading{position:fixed;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.72);backdrop-filter:blur(8px);z-index:9999}.spinner{width:28px;height:28px;border:3px solid rgba(255,255,255,.18);border-top-color:var(--accent);border-radius:50%;animation:spin .85s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.dev-ribbon{position:fixed;right:16px;bottom:16px;z-index:20;background:rgba(255,122,0,.92);color:#111;padding:8px 12px;border-radius:999px;font-weight:1000;text-transform:uppercase;font-size:.75rem;box-shadow:0 10px 30px rgba(0,0,0,.35)}.mobile-dock{display:none}.table-wrap{overflow:auto}.simple-table{width:100%;border-collapse:collapse}.simple-table th,.simple-table td{border-bottom:1px solid var(--line);padding:10px;text-align:left}.simple-table th{color:var(--accent);text-transform:uppercase;font-size:.8rem}
@media(max-width:1040px){.site-shell{grid-template-columns:1fr}.sidebar{position:fixed;inset:0 auto 0 0;width:284px;transform:translateX(-105%);transition:.2s ease;z-index:50}.sidebar.open{transform:translateX(0)}.main{padding:18px 16px 92px}.mobile-menu{display:inline-flex}.topbar{position:sticky;top:0;z-index:30;background:rgba(5,6,7,.74);backdrop-filter:blur(10px);padding:8px;border:1px solid var(--line);border-radius:14px}.grid.two,.grid.three,.grid.four,.stat-grid,.ticket-credentials,.form-grid.two,.form-grid.three,.admin-sections{grid-template-columns:1fr}.user-chip{display:none}.mobile-dock{position:fixed;left:10px;right:10px;bottom:10px;display:grid;grid-template-columns:repeat(5,1fr);gap:6px;border:1px solid var(--line);border-radius:18px;padding:8px;background:rgba(8,10,12,.94);z-index:45;box-shadow:var(--shadow)}.mobile-dock a{display:grid;place-items:center;text-decoration:none;color:#dce1e7;font-size:.72rem;font-weight:900}.mobile-dock span{font-size:1.2rem;color:var(--accent)}}

/* ===== Build 02: modern clan-site polish + faster perceived navigation ===== */
:root{
  --bg:#070809;--panel:#11161a;--panel2:#151d23;--panel3:#080a0c;--text:#f2f5f0;--muted:#aeb7ad;--line:rgba(214,227,205,.15);
  --accent:#ff7a00;--accent2:#b6ff6b;--good:#8aff80;--warn:#ffd166;--bad:#ff6868;--blue:#6ca8ff;--radius:12px;
  --shadow:0 18px 58px rgba(0,0,0,.48);--font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
body{
  background:
    radial-gradient(circle at 85% -10%,rgba(255,122,0,.18),transparent 30%),
    radial-gradient(circle at 20% 0%,rgba(182,255,107,.08),transparent 22%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px),
    linear-gradient(180deg,#151a1e 0%,#090b0d 56%,#030405 100%) !important;
}
body::before{
  background:
    linear-gradient(90deg,rgba(255,122,0,.055) 0 1px,transparent 1px 100%) 0 0/86px 86px,
    linear-gradient(0deg,rgba(182,255,107,.032) 0 1px,transparent 1px 100%) 0 0/86px 86px,
    radial-gradient(circle at 50% 0%,rgba(255,122,0,.08),transparent 34%) !important;
  opacity:.78 !important;
}
a.brand{text-decoration:none}.brand-mark{border-radius:8px;background:linear-gradient(180deg,rgba(255,122,0,.22),rgba(0,0,0,.28));box-shadow:inset 0 1px 0 rgba(255,255,255,.13),0 0 24px rgba(255,122,0,.08)}
.brand-copy strong{letter-spacing:.08em}.sidebar{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015)),linear-gradient(90deg,rgba(255,122,0,.08),transparent 20%),rgba(6,8,10,.94);border-right:1px solid rgba(255,122,0,.22)}
.sidebar-status{border-radius:8px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(0,0,0,.12));font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9rem}.sidebar-status .status-line{display:block;margin-top:6px}.status-dot.orange{background:var(--accent);box-shadow:0 0 15px rgba(255,122,0,.8)}
.nav-link,.nav-button{border-radius:7px;border-left:3px solid transparent}.nav-link:hover,.nav-button:hover,.nav-link.active,.nav-button.active{border-left-color:var(--accent);background:linear-gradient(90deg,rgba(255,122,0,.18),rgba(255,255,255,.035));}
.topbar{border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02)),rgba(7,9,11,.72);padding:10px 12px;backdrop-filter:blur(12px)}.top-actions{display:flex;align-items:center;gap:10px}.sync-pill{border:1px solid rgba(138,255,128,.28);border-radius:999px;background:rgba(138,255,128,.08);color:#caffc5;padding:7px 10px;font-size:.78rem;font-weight:1000;text-transform:uppercase}.sync-pill.is-syncing{border-color:rgba(255,122,0,.35);background:rgba(255,122,0,.10);color:#ffd3aa}.user-chip{box-shadow:none;border-radius:10px;background:rgba(0,0,0,.26)}
.page-hero{border-radius:14px;background:linear-gradient(90deg,rgba(0,0,0,.72),rgba(8,11,13,.62)),radial-gradient(circle at 84% 20%,rgba(255,122,0,.17),transparent 34%),linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.02));box-shadow:0 20px 80px rgba(0,0,0,.42)}.page-hero:before{content:"[ FNG / COMMUNITY / NETWORK ]";position:absolute;right:18px;top:14px;color:rgba(182,255,107,.22);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.76rem;letter-spacing:.12em}.page-hero:after{background:linear-gradient(90deg,rgba(255,122,0,.25),transparent 18%,transparent 86%,rgba(182,255,107,.10)) !important}.clan-hero h1{max-width:850px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}.homepage-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.75fr);gap:18px}.home-side-stack{display:grid;gap:18px;align-content:start}
.panel,.card{border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.018)),rgba(10,13,15,.92);box-shadow:0 14px 40px rgba(0,0,0,.32);position:relative}.panel:before,.card:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(90deg,rgba(255,122,0,.12),transparent 16%,transparent 85%,rgba(182,255,107,.035));opacity:.6}.panel>*{position:relative}.card>*{position:relative}.btn,.btn-secondary,.btn-danger,.btn-ghost{border-radius:6px}.btn:hover,.btn-secondary:hover,.btn-danger:hover,.btn-ghost:hover,.card:hover{transform:translateY(-2px);transition:.15s ease}.card:hover{box-shadow:0 20px 58px rgba(0,0,0,.44)}
.media{background:linear-gradient(135deg,#050607,#111820)}.media-fallback{display:grid;place-items:center;width:100%;height:100%;font-size:2rem;font-weight:1000;color:rgba(255,255,255,.3);letter-spacing:.12em}.media-fallback.large{font-size:4rem}.product-card{cursor:pointer}.product-card .media img{filter:none}.product-desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.event-card .media img{filter:grayscale(.25) contrast(1.08) brightness(.86)}
.online-panel .panel-head{align-items:center}.online-count{font-size:2.4rem;font-weight:1000;color:var(--accent);line-height:1;text-shadow:0 0 20px rgba(255,122,0,.35)}.online-summary{border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.035);padding:10px 12px;color:var(--muted);margin-bottom:12px}.online-list{display:grid;gap:8px;max-height:330px;overflow:auto;padding-right:4px}.online-member{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:center;border:1px solid rgba(255,255,255,.10);border-radius:10px;padding:8px;background:rgba(255,255,255,.035)}.avatar.small{width:34px;height:34px;font-size:.9rem}.online-member strong,.online-member small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.online-member small{color:var(--muted);font-size:.78rem}.online-more{margin:10px 0 0}.member-card.is-online{border-color:rgba(138,255,128,.24);box-shadow:0 0 0 1px rgba(138,255,128,.04),0 16px 44px rgba(0,0,0,.32)}.online-mini{display:inline-flex;margin-left:6px;border:1px solid rgba(138,255,128,.28);border-radius:999px;padding:6px 9px;color:#caffc5;background:rgba(138,255,128,.08);font-size:.78rem;font-weight:1000;text-transform:uppercase}
.collection-hangar{overflow:hidden}.collection-card{border-radius:10px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 18%,transparent),rgba(255,255,255,.035));box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}.collection-card.active{outline:2px solid var(--accent);outline-offset:3px}.collection-strip::-webkit-scrollbar,.online-list::-webkit-scrollbar{height:8px;width:8px}.collection-strip::-webkit-scrollbar-thumb,.online-list::-webkit-scrollbar-thumb{background:rgba(255,122,0,.28);border-radius:999px}.merch-info-bottom{opacity:.94}
.product-dialog{width:min(1120px,calc(100vw - 24px));border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:0;background:#090c0e;color:var(--text);box-shadow:0 30px 100px rgba(0,0,0,.7)}.product-dialog::backdrop{background:rgba(0,0,0,.76);backdrop-filter:blur(10px)}.product-dialog-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);min-height:540px}.product-gallery{background:#050607;display:grid;grid-template-rows:minmax(0,1fr) auto}.product-gallery-main{display:grid;place-items:center;min-height:460px}.product-gallery-main img{width:100%;height:100%;object-fit:contain;display:block;padding:18px}.product-gallery-thumbs{display:flex;gap:10px;overflow:auto;padding:12px;background:rgba(255,255,255,.06)}.product-gallery-thumbs button{width:72px;height:58px;flex:0 0 72px;border:2px solid rgba(255,255,255,.18);border-radius:8px;background:#050607;padding:0;overflow:hidden}.product-gallery-thumbs button.active{border-color:var(--accent)}.product-gallery-thumbs img{width:100%;height:100%;object-fit:cover}.product-dialog-body{padding:26px;position:relative}.dialog-close{justify-self:end}.product-price{font-size:1.7rem;color:var(--accent);font-weight:1000;margin-bottom:8px}.compact-dialog{width:min(620px,calc(100vw - 24px))}.compact-dialog .product-dialog-body{padding:28px}.compact-dialog .product-dialog-grid{display:block;min-height:0}
.loading{background:rgba(0,0,0,.64)}.loading-box{border:1px solid var(--line);border-radius:14px;padding:24px;display:grid;gap:12px;justify-items:center;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025)),#090c0e;box-shadow:0 24px 80px rgba(0,0,0,.56);min-width:min(360px,calc(100vw - 32px))}.dev-ribbon{display:none!important}.profile-banner{height:190px;border-radius:12px;background-size:cover;background-position:center}.two-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:1180px){.homepage-grid{grid-template-columns:1fr}.product-dialog-grid{grid-template-columns:1fr}.product-gallery-main{min-height:320px}.product-dialog{max-height:calc(100dvh - 20px);overflow:auto}}
@media(max-width:1040px){.top-actions .sync-pill{display:none}.page-hero:before{display:none}.topbar{position:sticky;top:8px}.homepage-grid{grid-template-columns:1fr}.product-dialog{width:calc(100vw - 16px)}.product-dialog-body{padding:20px}.product-gallery-main{min-height:270px}.mobile-dock a.active{color:var(--accent2)}}
@media(max-width:640px){.hero-actions{display:grid}.hero-actions a{width:100%}.online-list{max-height:none}.panel-head{display:grid}.collection-card{min-width:220px}.product-gallery-main{min-height:240px}.product-dialog-grid{display:block}}

/* ============================================================
   FNG COMMUNITY HUB 3.0 — BUILD 03 AESTHETIC RESET
   "Nexus Clan Site" theme: modern web layout with late-90s/00s
   clan-site DNA, glass panels, broadcast grids and neon accents.
   Functional classes and JS hooks remain unchanged.
   ============================================================ */

:root {
  color-scheme: dark;
  --bg: #05070d;
  --panel: rgba(11, 18, 30, .72);
  --panel2: rgba(19, 30, 48, .72);
  --panel3: rgba(6, 10, 18, .92);
  --text: #f5f8ff;
  --muted: #93a4b8;
  --line: rgba(151, 180, 212, .18);
  --accent: #ff7a18;
  --accent2: #33d6ff;
  --accent3: #92ff6a;
  --good: #7dff9a;
  --warn: #ffd36a;
  --bad: #ff6073;
  --blue: #5fd6ff;
  --radius: 26px;
  --shadow: 0 30px 90px rgba(0, 0, 0, .42);
  --shadow-soft: 0 18px 50px rgba(0, 0, 0, .28);
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html {
  background: #05070d;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 18% 12%, rgba(51,214,255,.16), transparent 30%),
    radial-gradient(circle at 86% 8%, rgba(255,122,24,.19), transparent 31%),
    radial-gradient(circle at 70% 80%, rgba(146,255,106,.10), transparent 28%),
    linear-gradient(180deg, #08101d 0%, #060814 48%, #03050b 100%) !important;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .72;
  background:
    linear-gradient(90deg, transparent 0 31px, rgba(77,130,166,.10) 32px) 0 0 / 32px 32px,
    linear-gradient(0deg, transparent 0 31px, rgba(77,130,166,.08) 32px) 0 0 / 32px 32px,
    repeating-linear-gradient(135deg, rgba(255,255,255,.028) 0 1px, transparent 1px 12px);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.95), rgba(0,0,0,.35));
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), transparent 9%, transparent 92%, rgba(255,255,255,.032)),
    radial-gradient(circle at 50% 0, rgba(255,255,255,.08), transparent 40%);
  mix-blend-mode: screen;
}

::selection { background: rgba(51,214,255,.28); color: #fff; }

.hidden { display: none !important; }
.muted { color: var(--muted) !important; }
a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

.eyebrow {
  color: var(--accent2) !important;
  font-size: .72rem !important;
  font-weight: 950 !important;
  letter-spacing: .19em !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 18px rgba(51,214,255,.28);
}

h1, h2, h3 {
  font-family: var(--display);
  text-transform: none !important;
  letter-spacing: -.045em !important;
  color: var(--text);
}

h1 {
  font-size: clamp(2.6rem, 7vw, 6.9rem) !important;
  line-height: .86 !important;
  margin-bottom: 18px !important;
}

h2 { font-size: clamp(1.25rem, 2vw, 2.1rem) !important; }
h3 { font-size: 1.08rem !important; }
p { color: var(--muted); line-height: 1.7; }

/* Layout */
.site-shell {
  display: grid !important;
  grid-template-columns: 292px minmax(0, 1fr) !important;
  min-height: 100vh !important;
  position: relative;
}

.sidebar {
  position: sticky !important;
  top: 0 !important;
  height: 100vh !important;
  padding: 26px 18px 18px !important;
  display: grid !important;
  grid-template-rows: auto 1fr auto !important;
  gap: 18px !important;
  border-right: 1px solid rgba(151,180,212,.16) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.095), rgba(255,255,255,.025)),
    radial-gradient(circle at 0 0, rgba(51,214,255,.12), transparent 34%),
    rgba(5, 9, 18, .82) !important;
  box-shadow: 22px 0 80px rgba(0,0,0,.30) !important;
  backdrop-filter: blur(22px) saturate(140%);
}

.sidebar::before {
  content: "FNG / 2020";
  position: absolute;
  left: -48px;
  bottom: 118px;
  transform: rotate(-90deg);
  color: rgba(147,164,184,.23);
  font-weight: 950;
  letter-spacing: .28em;
  font-size: .72rem;
  pointer-events: none;
}

.brand {
  border: 1px solid rgba(151,180,212,.15) !important;
  border-radius: 24px !important;
  padding: 14px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.105), rgba(255,255,255,.035)),
    rgba(255,255,255,.035) !important;
  text-decoration: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 16px 40px rgba(0,0,0,.18);
}

.brand-mark {
  width: 58px !important;
  height: 58px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(51,214,255,.36) !important;
  background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,.42), transparent 19%),
    linear-gradient(135deg, rgba(51,214,255,.38), rgba(255,122,24,.42)),
    #0a1020 !important;
  color: #fff !important;
  box-shadow: 0 0 38px rgba(51,214,255,.14), 0 14px 32px rgba(0,0,0,.34) !important;
}

.brand-copy strong {
  font-size: 1.05rem;
  letter-spacing: -.02em;
  text-transform: none !important;
}

.brand-copy small { color: #7ecfff !important; }

.nav, .sidebar-footer {
  gap: 10px !important;
}

.nav-link,
.nav-button {
  border-radius: 18px !important;
  padding: 13px 14px !important;
  color: rgba(245,248,255,.76) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  text-transform: none !important;
  letter-spacing: -.01em !important;
  font-weight: 800 !important;
  position: relative;
  overflow: hidden;
}

.nav-link::before,
.nav-button::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent2), var(--accent));
  opacity: 0;
  transition: opacity .18s ease;
}

.nav-link span,
.nav-button span {
  width: 25px !important;
  color: var(--accent2) !important;
  opacity: .9;
}

.nav-link:hover,
.nav-button:hover,
.nav-link.active,
.nav-button.active {
  color: #fff !important;
  border-color: rgba(151,180,212,.22) !important;
  background:
    linear-gradient(90deg, rgba(51,214,255,.14), rgba(255,122,24,.07) 58%, rgba(255,255,255,.025)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 26px rgba(0,0,0,.14) !important;
}

.nav-link:hover::before,
.nav-button:hover::before,
.nav-link.active::before,
.nav-button.active::before { opacity: 1; }

.sidebar-status {
  border: 1px solid rgba(151,180,212,.16) !important;
  border-radius: 24px !important;
  padding: 16px !important;
  background:
    radial-gradient(circle at 90% 0%, rgba(146,255,106,.13), transparent 38%),
    rgba(255,255,255,.045) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.sidebar-status strong {
  text-transform: none !important;
  letter-spacing: -.02em;
  font-size: 1rem;
}

.status-line { display: block; margin-top: 7px; }
.status-dot {
  background: var(--accent3) !important;
  box-shadow: 0 0 20px rgba(146,255,106,.60) !important;
}
.status-dot.orange {
  background: var(--accent) !important;
  box-shadow: 0 0 20px rgba(255,122,24,.60) !important;
}

.main {
  padding: 30px clamp(20px, 4vw, 54px) 72px !important;
}

.topbar {
  margin-bottom: 24px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(151,180,212,.15);
  border-radius: 26px;
  background: rgba(7, 13, 24, .58);
  backdrop-filter: blur(18px) saturate(135%);
  box-shadow: 0 18px 60px rgba(0,0,0,.20);
}

.top-title strong {
  text-transform: none !important;
  letter-spacing: -.035em;
  font-size: 1.15rem;
}

.top-title small { color: #7f91a6 !important; }

.sync-pill {
  border: 1px solid rgba(146,255,106,.22) !important;
  color: #baffca !important;
  background: rgba(146,255,106,.08) !important;
  border-radius: 999px !important;
  padding: 8px 11px !important;
  font-weight: 850;
}
.sync-pill.is-syncing {
  color: #b8edff !important;
  background: rgba(51,214,255,.08) !important;
  border-color: rgba(51,214,255,.24) !important;
}

.user-chip {
  border: 1px solid rgba(151,180,212,.16) !important;
  border-radius: 999px !important;
  padding: 7px 9px 7px 7px !important;
  background: rgba(255,255,255,.055) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 14px 38px rgba(0,0,0,.20) !important;
}

.avatar {
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.50), transparent 20%),
    linear-gradient(135deg, var(--accent2), var(--accent)) !important;
  color: #07101f !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.16), 0 10px 26px rgba(0,0,0,.28);
}

/* Hero / Panels */
.page-hero {
  min-height: 280px;
  border: 1px solid rgba(151,180,212,.16) !important;
  border-radius: 34px !important;
  padding: clamp(28px, 5vw, 54px) !important;
  margin-bottom: 24px !important;
  background:
    linear-gradient(90deg, rgba(5,9,18,.95), rgba(8,16,31,.72) 48%, rgba(5,9,18,.44)),
    radial-gradient(circle at 80% 20%, rgba(51,214,255,.20), transparent 30%),
    radial-gradient(circle at 92% 92%, rgba(255,122,24,.16), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.085), rgba(255,255,255,.025)) !important;
  box-shadow: var(--shadow) !important;
  backdrop-filter: blur(18px);
}

.page-hero::before {
  content: "";
  position: absolute;
  right: -120px;
  top: -80px;
  width: 470px;
  height: 470px;
  border-radius: 42%;
  background:
    linear-gradient(135deg, transparent 36%, rgba(51,214,255,.10) 36% 37%, transparent 37% 58%, rgba(255,122,24,.16) 58% 59%, transparent 59%),
    radial-gradient(circle, rgba(255,255,255,.09), transparent 62%);
  transform: rotate(18deg);
  opacity: .88;
}

.page-hero::after {
  background:
    linear-gradient(90deg, rgba(51,214,255,.28), transparent 18%, transparent 74%, rgba(255,122,24,.26)),
    repeating-linear-gradient(0deg, transparent 0 10px, rgba(255,255,255,.035) 10px 11px) !important;
  opacity: .45 !important;
}

.clan-hero h1 {
  max-width: 920px;
}

.clan-hero p,
.page-hero p {
  max-width: 750px;
  font-size: 1.04rem;
}

.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.panel,
.card,
.row-card,
.stat,
.collection-card,
.admin-section,
.table-wrap,
.login-card,
.product-dialog,
.compact-dialog {
  border: 1px solid rgba(151,180,212,.16) !important;
  border-radius: 26px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.086), rgba(255,255,255,.026)),
    rgba(8, 14, 25, .72) !important;
  box-shadow: var(--shadow-soft) !important;
  backdrop-filter: blur(18px) saturate(132%);
}

.panel,
.login-card { padding: 24px !important; }

.panel-head {
  border-bottom: 1px solid rgba(151,180,212,.12);
  padding-bottom: 15px;
  margin-bottom: 18px !important;
}

.panel-head h2,
.panel-head h3 {
  margin-bottom: 4px !important;
}

.card {
  transition: transform .20s ease, border-color .20s ease, box-shadow .20s ease, background .20s ease;
}

.card:hover,
.collection-card:hover,
.admin-section:hover,
.row-card:hover {
  transform: translateY(-5px);
  border-color: rgba(51,214,255,.32) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.36), 0 0 52px rgba(51,214,255,.09) !important;
}

.grid { gap: 20px !important; }
.homepage-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(330px, .75fr) !important;
  gap: 22px !important;
}
.home-side-stack { display: grid; gap: 22px; }

/* Stats */
.stat-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

.stat {
  min-height: 118px;
  padding: 18px !important;
  position: relative;
  overflow: hidden;
}

.stat::after {
  content: "";
  position: absolute;
  inset: auto 16px 14px 16px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent2), rgba(51,214,255,0));
  opacity: .55;
}

.stat strong {
  display: block;
  font-size: clamp(2.2rem, 4vw, 3.6rem) !important;
  letter-spacing: -.07em;
  line-height: .9;
  color: #fff !important;
  text-shadow: 0 0 28px rgba(51,214,255,.22);
}

.stat small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-weight: 850;
}

/* Cards/media */
.media {
  height: 230px !important;
  background:
    radial-gradient(circle at 50% 30%, rgba(51,214,255,.10), transparent 34%),
    #050913 !important;
}

.media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 48%, rgba(5,9,18,.78)),
    linear-gradient(90deg, rgba(51,214,255,.13), transparent 22%, transparent 80%, rgba(255,122,24,.13));
}

.media img {
  filter: saturate(.92) contrast(1.08) brightness(.82) !important;
  transform: scale(1.01);
}

.card-body {
  padding: 20px !important;
}

.card-body h3 {
  margin-bottom: 8px;
}

.product-card .media {
  height: 292px !important;
}

.product-card .media img {
  object-fit: contain !important;
  padding: 24px !important;
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.07), transparent 42%),
    #050913 !important;
}

.product-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.media-fallback {
  min-height: 100%;
  display: grid;
  place-items: center;
  color: rgba(245,248,255,.55);
  font-weight: 1000;
  font-size: 2rem;
  letter-spacing: -.08em;
}
.media-fallback.large { font-size: 4rem; }

.event-date {
  left: 16px !important;
  top: 16px !important;
  width: 64px !important;
  height: 72px !important;
  border-radius: 20px !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.04)),
    rgba(5,9,18,.78) !important;
  backdrop-filter: blur(14px);
}
.event-date span { font-size: 1.55rem; }
.event-date small { color: var(--accent2) !important; }

/* Buttons */
.btn,
.btn-secondary,
.btn-danger,
.btn-ghost,
.link-btn {
  border-radius: 999px !important;
  text-transform: none !important;
  letter-spacing: -.01em !important;
  font-weight: 900 !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.btn {
  border: 1px solid rgba(255,255,255,.22) !important;
  color: #07101f !important;
  background:
    linear-gradient(180deg, #fff6ed, #ff7a18) !important;
  box-shadow: 0 16px 34px rgba(255,122,24,.25), inset 0 1px 0 rgba(255,255,255,.60) !important;
}

.btn-secondary,
.btn-ghost {
  color: #eaf6ff !important;
  border-color: rgba(151,180,212,.20) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.035)),
    rgba(255,255,255,.025) !important;
}

.btn-danger {
  color: #ffc4cc !important;
  border-color: rgba(255,96,115,.32) !important;
  background: rgba(255,96,115,.10) !important;
}

.link-btn {
  color: var(--accent2) !important;
  border: 0 !important;
  background: transparent !important;
}

.btn:hover,
.btn-secondary:hover,
.btn-ghost:hover,
.btn-danger:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 50px rgba(0,0,0,.28), 0 0 30px rgba(51,214,255,.10) !important;
}

/* Forms */
input, select, textarea {
  border-radius: 18px !important;
  border: 1px solid rgba(151,180,212,.18) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
    rgba(4, 8, 16, .80) !important;
  color: var(--text) !important;
}

input:focus, select:focus, textarea:focus {
  border-color: rgba(51,214,255,.62) !important;
  box-shadow: 0 0 0 4px rgba(51,214,255,.12), 0 0 34px rgba(51,214,255,.10) !important;
}

label { color: #e0e7f0 !important; }
.message { color: var(--warn) !important; }
.message.success { color: var(--good) !important; }
.message.error { color: var(--bad) !important; }

.empty {
  border: 1px dashed rgba(151,180,212,.22) !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.035) !important;
  color: #8798ad !important;
}

/* Ticket status */
.ticket-tag {
  border-radius: 999px !important;
  border: 1px solid rgba(51,214,255,.26) !important;
  color: #c5f5ff !important;
  background: rgba(51,214,255,.09) !important;
  box-shadow: 0 0 24px rgba(51,214,255,.08);
}
.ticket-tag.good {
  color: #c3ffd0 !important;
  border-color: rgba(125,255,154,.32) !important;
  background: rgba(125,255,154,.10) !important;
}
.ticket-tag.bad {
  color: #ffc3cc !important;
  border-color: rgba(255,96,115,.32) !important;
  background: rgba(255,96,115,.10) !important;
}
.ticket-tag.warn {
  color: #ffe6b0 !important;
  border-color: rgba(255,211,106,.34) !important;
  background: rgba(255,211,106,.10) !important;
}

/* Collections */
.collection-hangar {
  background:
    radial-gradient(circle at 12% 0%, rgba(255,122,24,.12), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.086), rgba(255,255,255,.026)),
    rgba(8,14,25,.72) !important;
}

.collection-strip {
  gap: 16px !important;
  padding: 4px 2px 12px !important;
  scroll-snap-type: x proximity;
}

.collection-card {
  min-width: 260px !important;
  min-height: 180px !important;
  text-align: left !important;
  color: var(--text) !important;
  padding: 20px !important;
  scroll-snap-align: start;
  overflow: hidden;
}

.collection-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 10%, color-mix(in srgb, var(--accent, #ff7a18) 24%, transparent), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.02));
  opacity: .82;
  z-index: -1;
}

.collection-card h3 { font-size: 1.42rem !important; }
.collection-count { color: var(--accent2) !important; }
.collection-card.active {
  outline: 0 !important;
  border-color: rgba(51,214,255,.58) !important;
  box-shadow: 0 0 0 1px rgba(51,214,255,.28), 0 28px 70px rgba(0,0,0,.34), 0 0 54px rgba(51,214,255,.13) !important;
}

/* Live roster */
.online-count {
  min-width: 60px;
  height: 60px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  color: #07101f;
  font-weight: 1000;
  font-size: 1.6rem;
  background: linear-gradient(180deg, #dcfbff, var(--accent2));
  box-shadow: 0 0 42px rgba(51,214,255,.18);
}
.online-summary {
  border: 1px solid rgba(151,180,212,.14);
  border-radius: 20px;
  padding: 13px 14px;
  margin-bottom: 12px;
  background: rgba(255,255,255,.035);
  color: #afbdd0;
  font-weight: 760;
}
.online-list { gap: 10px !important; }
.online-member {
  border: 1px solid rgba(151,180,212,.14) !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,.035) !important;
}
.online-member strong { color: #f7fbff; }
.online-member small { color: #83dfff !important; }

/* Tables/Admin */
.admin-sections {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
}
.admin-section {
  min-height: 160px;
  display: grid;
  align-content: end;
  color: var(--text) !important;
  position: relative;
  overflow: hidden;
}
.admin-section span {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: #07101f;
  background: linear-gradient(180deg, #dcfbff, var(--accent2));
}
.admin-section h3 { margin: 0 0 8px !important; }
.admin-subnav { gap: 10px !important; }

.simple-table {
  border-collapse: separate;
  border-spacing: 0 10px;
}
.simple-table th {
  color: #7f91a6;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.simple-table td {
  background: rgba(255,255,255,.035);
  border-top: 1px solid rgba(151,180,212,.12);
  border-bottom: 1px solid rgba(151,180,212,.12);
}
.simple-table td:first-child { border-left: 1px solid rgba(151,180,212,.12); border-radius: 14px 0 0 14px; }
.simple-table td:last-child { border-right: 1px solid rgba(151,180,212,.12); border-radius: 0 14px 14px 0; }

/* Ticket cards */
.ticket-card.voided,
.ticket-card.cancelled {
  border-color: rgba(255,96,115,.48) !important;
  background:
    repeating-linear-gradient(-42deg, rgba(255,96,115,.11) 0 12px, rgba(255,255,255,.018) 12px 24px),
    rgba(8,14,25,.80) !important;
}
.ticket-card.voided::before,
.ticket-card.cancelled::before {
  background: rgba(255,96,115,.82) !important;
}
.void-stamp {
  border-color: rgba(255,96,115,.88) !important;
  color: #ff8fa0 !important;
  border-radius: 14px;
}

/* Product modal */
.product-dialog,
.compact-dialog {
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.024)),
    rgba(7, 12, 22, .96) !important;
  border-radius: 30px !important;
  overflow: hidden;
}
.product-dialog::backdrop {
  background: rgba(0, 0, 0, .66) !important;
  backdrop-filter: blur(18px) saturate(125%) !important;
}
.product-gallery { background: #030713 !important; }
.product-gallery-main { min-height: 460px !important; }
.product-gallery-main img {
  padding: 26px !important;
}
.product-gallery-thumbs {
  background: rgba(255,255,255,.055) !important;
}
.product-gallery-thumbs button {
  border-radius: 16px !important;
  border-color: rgba(151,180,212,.18) !important;
}
.product-gallery-thumbs button.active { border-color: var(--accent2) !important; }
.product-price { color: var(--accent2) !important; }
.dialog-close { justify-self: end; }

/* Login */
.login-wrap {
  background:
    radial-gradient(circle at 70% 12%, rgba(255,122,24,.20), transparent 34%),
    radial-gradient(circle at 28% 18%, rgba(51,214,255,.16), transparent 32%),
    #05070d !important;
}
.login-card {
  max-width: 760px !important;
}
.login-logo {
  filter: drop-shadow(0 18px 44px rgba(51,214,255,.16));
}

/* Loading */
.loading { background: rgba(3,5,11,.72) !important; backdrop-filter: blur(14px); }
.loading-box {
  border-radius: 28px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)),
    rgba(7,12,22,.92) !important;
}
.spinner {
  border-top-color: var(--accent2) !important;
}

/* Profile/Members */
.member-card,
.profile-banner {
  border-radius: 24px !important;
}
.profile-banner {
  border: 1px solid rgba(151,180,212,.16);
  background:
    radial-gradient(circle at 20% 20%, rgba(51,214,255,.18), transparent 32%),
    radial-gradient(circle at 78% 40%, rgba(255,122,24,.12), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02)) !important;
}

/* Footer dock */
.mobile-dock {
  border: 1px solid rgba(151,180,212,.18) !important;
  background: rgba(7,12,22,.78) !important;
  backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 -18px 60px rgba(0,0,0,.35) !important;
}
.mobile-dock a {
  color: rgba(245,248,255,.72) !important;
  text-transform: none !important;
}
.mobile-dock a.active {
  color: var(--accent2) !important;
}

/* Responsive */
@media (max-width: 1180px) {
  .homepage-grid { grid-template-columns: 1fr !important; }
  .grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .admin-sections { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 1040px) {
  .site-shell { grid-template-columns: 1fr !important; }
  .sidebar {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    width: min(340px, calc(100vw - 40px)) !important;
    transform: translateX(-105%);
    transition: transform .22s ease;
    z-index: 80;
  }
  .sidebar.open { transform: translateX(0); }
  .main { padding: 18px 16px 96px !important; }
  .topbar { position: sticky !important; top: 10px !important; z-index: 60; }
  .mobile-menu { display: inline-flex !important; }
  .top-actions .sync-pill { display: none !important; }
  .top-title small { display: none; }
  .user-chip span:not(.avatar) { display: none; }
  .page-hero { min-height: 230px; }
}

@media (max-width: 740px) {
  h1 { font-size: clamp(2.4rem, 13vw, 4.2rem) !important; }
  .page-hero { border-radius: 28px !important; padding: 26px !important; }
  .grid.two,
  .grid.three,
  .grid.four,
  .form-grid.two,
  .form-grid.three,
  .merch-info-bottom,
  .ticket-credentials {
    grid-template-columns: 1fr !important;
  }
  .stat-grid { grid-template-columns: 1fr 1fr !important; }
  .stat { min-height: 104px; }
  .stat strong { font-size: 2.2rem !important; }
  .collection-card { min-width: 78vw !important; }
  .admin-sections { grid-template-columns: 1fr !important; }
  .product-dialog-grid { display: block !important; }
  .product-gallery-main { min-height: 270px !important; }
  .product-dialog-body { padding: 20px !important; }
  .media { height: 196px !important; }
  .product-card .media { height: 240px !important; }
}

@media (max-width: 420px) {
  .topbar { border-radius: 22px; }
  .page-hero { padding: 22px !important; }
  .stat-grid { grid-template-columns: 1fr !important; }
  .panel { padding: 19px !important; }
}

/* ============================================================
   FNG COMMUNITY HUB 3.0 — BUILD 04 GAMEVERSE DASHBOARD RESET
   Drastic layout shift inspired by modern game library dashboards:
   left command rail, wide content well, persistent Goopers/merch rail.
   ============================================================ */
:root{
  --gv-bg:#8b9bb8;
  --gv-shell:#22262b;
  --gv-shell-2:#1b1f25;
  --gv-rail:#28252b;
  --gv-text:#f7f8fb;
  --gv-muted:#aeb6c2;
  --gv-line:rgba(255,255,255,.10);
  --gv-hot:#ff2f66;
  --gv-hot2:#ff742f;
  --gv-blue:#65d8ff;
  --gv-green:#6cff8b;
  --gv-card-radius:16px;
  --radius:18px;
  --accent:var(--gv-hot);
  --accent2:var(--gv-blue);
  --text:var(--gv-text);
  --muted:var(--gv-muted);
  --line:var(--gv-line);
  --panel:rgba(29,33,39,.78);
  --panel2:rgba(38,43,51,.82);
  --shadow:0 38px 110px rgba(8,12,18,.32);
}

html{background:#8a9bb9!important;}
body{
  min-height:100vh!important;
  background:
    radial-gradient(circle at 18% 14%, rgba(255,255,255,.22), transparent 25%),
    radial-gradient(circle at 78% 5%, rgba(47,87,148,.25), transparent 28%),
    linear-gradient(135deg,#9bacc9 0%,#7888a6 52%,#69728f 100%)!important;
  padding:clamp(10px,3.2vw,46px)!important;
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
}
body::before,
body::after{display:none!important;}
body:has(.site-shell){align-items:center!important;}

.site-shell.gameverse-shell,
.site-shell{
  width:min(1480px,calc(100vw - 28px))!important;
  height:min(880px,calc(100vh - 28px))!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:245px minmax(0,1fr)300px!important;
  gap:0!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:18px!important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.015)),
    linear-gradient(180deg,#262b31,#1c2027 56%,#241f2d)!important;
  box-shadow:0 42px 120px rgba(28,38,60,.34),0 18px 44px rgba(0,0,0,.22)!important;
  position:relative!important;
}
.site-shell::before{
  content:"";
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(circle at 5% 100%, rgba(255,47,102,.22), transparent 25%),
    radial-gradient(circle at 96% 0%, rgba(101,216,255,.08), transparent 30%);
  opacity:.78;
}
.site-shell>*{position:relative;z-index:1;}

.sidebar{
  position:relative!important;
  top:auto!important;
  height:auto!important;
  min-height:0!important;
  display:grid!important;
  grid-template-rows:auto 1fr auto!important;
  padding:26px 18px 28px!important;
  border-right:0!important;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01)),rgba(32,35,41,.72)!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  overflow-y:auto!important;
}
.sidebar::before{display:none!important;}
.sidebar-top{display:grid;gap:28px;}
.brand{
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
  gap:13px!important;
}
.brand-mark{
  width:32px!important;height:32px!important;border-radius:12px!important;
  border:0!important;
  background:linear-gradient(135deg,var(--gv-hot),#ff4f4f)!important;
  box-shadow:0 12px 22px rgba(255,47,102,.26)!important;
  font-size:.85rem!important;
}
.brand-copy strong{
  color:#fff!important;text-transform:uppercase!important;letter-spacing:.02em!important;font-size:1.03rem!important;
}
.brand-copy small{display:none!important;}
.nav{display:grid!important;gap:9px!important;}
.nav-link,.nav-button{
  min-height:42px!important;
  border:0!important;
  border-radius:12px!important;
  padding:11px 9px!important;
  color:rgba(255,255,255,.84)!important;
  background:transparent!important;
  text-transform:none!important;
  font-weight:650!important;
  letter-spacing:-.01em!important;
  gap:12px!important;
  box-shadow:none!important;
}
.nav-link span,.nav-button span{
  width:26px!important;height:26px!important;display:grid!important;place-items:center!important;
  color:#fff!important;opacity:.92!important;
}
.nav-link:hover,.nav-button:hover{
  color:#fff!important;background:rgba(255,255,255,.055)!important;
}
.nav-link.active,.nav-button.active{
  color:var(--gv-hot)!important;background:transparent!important;border-color:transparent!important;
}
.nav-link.active span,.nav-button.active span{color:var(--gv-hot)!important;}
.nav-link::before,.nav-button::before{display:none!important;}
.sidebar-status{
  align-self:end!important;
  border:0!important;
  background:linear-gradient(135deg,var(--gv-hot),#ff6030)!important;
  border-radius:13px!important;
  padding:18px!important;
  color:#fff!important;
  box-shadow:0 20px 36px rgba(255,47,102,.24)!important;
  margin:12px 0!important;
}
.sidebar-status strong{text-transform:none!important;font-size:1.05rem!important;margin-bottom:10px!important;}
.sidebar-status .muted,.sidebar-status small{color:rgba(255,255,255,.82)!important;}
.status-dot{background:#fff!important;box-shadow:0 0 16px rgba(255,255,255,.7)!important;}
.sidebar-footer{gap:8px!important;}

.main{
  min-width:0!important;
  padding:24px 26px 28px!important;
  height:100%!important;
  overflow-y:auto!important;
  background:rgba(22,26,32,.32)!important;
}
.main::-webkit-scrollbar,.sidebar::-webkit-scrollbar,.right-rail::-webkit-scrollbar{width:8px;height:8px;}
.main::-webkit-scrollbar-thumb,.sidebar::-webkit-scrollbar-thumb,.right-rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:999px;}
.topbar{
  display:grid!important;
  grid-template-columns:auto 1fr auto!important;
  gap:16px!important;
  align-items:center!important;
  margin:0 0 24px!important;
  position:sticky!important;
  top:0!important;
  z-index:10!important;
  padding-bottom:3px!important;
  background:linear-gradient(180deg,rgba(29,33,39,.95),rgba(29,33,39,.55),transparent)!important;
  backdrop-filter:blur(10px)!important;
}
.mobile-menu{display:none!important;}
.hub-search{
  max-width:420px!important;
  display:flex!important;align-items:center!important;gap:10px!important;
  border:0!important;border-radius:13px!important;background:rgba(255,255,255,.075)!important;
  padding:0 14px!important;color:#fff!important;
}
.hub-search span{color:#fff;font-size:1.25rem;opacity:.85;}
.hub-search input{
  border:0!important;background:transparent!important;box-shadow:none!important;height:48px!important;padding:0!important;color:#fff!important;
}
.hub-search input::placeholder{color:rgba(255,255,255,.52)!important;}
.top-actions{display:flex!important;align-items:center!important;gap:12px!important;}
.sync-pill,.icon-action{
  width:48px!important;height:48px!important;border-radius:50%!important;display:grid!important;place-items:center!important;
  background:rgba(255,255,255,.075)!important;border:0!important;color:#fff!important;text-decoration:none!important;font-weight:900!important;
}
.sync-pill{width:auto!important;padding:0 16px!important;border-radius:999px!important;color:#cef7d1!important;font-size:.82rem!important;text-transform:none!important;}
.sync-pill::before{content:"";width:8px;height:8px;border-radius:50%;background:#65ff85;box-shadow:0 0 12px #65ff85;margin-right:8px;display:inline-block;}
.sync-pill.is-syncing::before{background:#ffd166;box-shadow:0 0 12px #ffd166;}
.page-stage{min-height:0!important;}

.right-rail{
  height:100%!important;
  overflow-y:auto!important;
  padding:22px 26px 28px 14px!important;
  background:linear-gradient(180deg,rgba(42,36,52,.76),rgba(37,31,47,.66))!important;
}
.rail-profile{display:grid!important;grid-template-columns:44px 1fr!important;gap:12px!important;align-items:center!important;margin-bottom:24px!important;}
.rail-profile strong,.rail-profile small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rail-profile small{color:rgba(255,255,255,.72)!important;font-size:.78rem;}
.rail-panel{margin-bottom:26px!important;}
.rail-heading{display:flex!important;align-items:center!important;justify-content:space-between!important;margin-bottom:12px!important;gap:10px!important;}
.rail-heading h2{margin:0!important;font-size:1.22rem!important;letter-spacing:-.04em!important;color:#fff!important;}
.rail-heading span,.rail-heading a{color:#fff!important;background:rgba(255,255,255,.12)!important;border-radius:999px!important;padding:5px 10px!important;text-decoration:none!important;font-size:.8rem!important;font-weight:900!important;}
.rail-list{display:grid!important;gap:10px!important;}
.rail-gooper,.rail-merch,.rail-ticket{
  display:grid!important;grid-template-columns:38px minmax(0,1fr)!important;gap:10px!important;align-items:center!important;
  color:#fff!important;text-decoration:none!important;border:0!important;background:transparent!important;padding:0!important;
}
.rail-gooper strong,.rail-gooper small,.rail-merch strong,.rail-merch small,.rail-ticket strong,.rail-ticket small{display:block!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}
.rail-gooper strong,.rail-merch strong,.rail-ticket strong{font-size:.9rem!important;}
.rail-gooper small,.rail-merch small,.rail-ticket small{font-size:.78rem!important;color:rgba(255,255,255,.76)!important;}
.rail-thumb{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:rgba(255,255,255,.12);overflow:hidden;font-size:.65rem;font-weight:1000;}
.rail-thumb img{width:100%;height:100%;object-fit:cover;}
.rail-ticket{grid-template-columns:1fr!important;background:rgba(255,47,102,.13)!important;border:1px solid rgba(255,47,102,.18)!important;border-radius:14px!important;padding:12px!important;}
.rail-empty{color:rgba(255,255,255,.64);font-size:.88rem;border:1px dashed rgba(255,255,255,.14);border-radius:12px;padding:12px;}

.avatar{background:linear-gradient(135deg,var(--gv-hot),#7f7cff)!important;border:2px solid rgba(255,255,255,.18)!important;box-shadow:0 10px 24px rgba(0,0,0,.24)!important;}
.avatar.small{width:38px!important;height:38px!important;}

/* Home */
.game-dashboard{display:grid!important;gap:24px!important;}
.showcase-card{
  min-height:390px!important;
  border-radius:17px!important;
  background-size:cover!important;background-position:center!important;
  overflow:hidden!important;position:relative!important;padding:32px!important;display:grid!important;align-content:space-between!important;
  box-shadow:0 24px 52px rgba(0,0,0,.28)!important;
}
.showcase-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,12,20,.12),rgba(7,12,20,.85));z-index:0;}
.showcase-card>*{position:relative;z-index:1;}
.showcase-tabs{display:flex;gap:24px;flex-wrap:wrap;color:#fff;font-size:.86rem;font-weight:700;}
.showcase-copy{max-width:620px;align-self:end;}
.showcase-copy h1{font-size:clamp(2.4rem,5.4vw,4.8rem)!important;line-height:.9!important;letter-spacing:-.07em!important;margin:0 0 12px!important;}
.showcase-copy p{max-width:520px;color:rgba(255,255,255,.86)!important;margin-bottom:0;}
.showcase-actions{display:flex;align-items:center;gap:12px;justify-self:end;align-self:end;flex-wrap:wrap;}
.love-btn{width:58px;height:58px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.12);color:#fff;text-decoration:none;font-size:1.8rem;}
.section-row{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;margin-bottom:16px!important;}
.section-row h2{margin:0!important;font-size:1.45rem!important;letter-spacing:-.045em!important;}
.carousel-hints{display:flex;gap:12px;}
.carousel-hints span{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);font-size:1.5rem;}
.tile-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;}
.game-tile{min-height:220px;border-radius:12px;overflow:hidden;position:relative;padding:18px;display:grid;align-content:end;color:#fff!important;text-decoration:none;background:linear-gradient(135deg,#1c2432,#080b10);box-shadow:0 18px 42px rgba(0,0,0,.28);}
.game-tile::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 40% 18%,rgba(255,255,255,.22),transparent 22%),linear-gradient(180deg,transparent,rgba(0,0,0,.76));}
.game-tile>*{position:relative;z-index:1;}
.game-tile span{font-size:3.8rem;line-height:1;font-weight:1000;letter-spacing:-.08em;margin-bottom:22px;text-shadow:0 8px 20px rgba(0,0,0,.35);}
.game-tile strong{font-size:1.04rem;text-transform:none;}
.game-tile small{color:rgba(255,255,255,.78);}
.event-tile{background:linear-gradient(135deg,#5337ff,#1b173d)!important;}
.merch-tile{background:linear-gradient(135deg,#ff315f,#731d35)!important;}
.ticket-tile{background:linear-gradient(135deg,#ff7a2f,#462011)!important;}
.online-tile{background:linear-gradient(135deg,#21c3ff,#12354f)!important;}
.split-home-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.slim-panel,.home-merch-strip{border-radius:17px!important;background:rgba(255,255,255,.055)!important;border:1px solid rgba(255,255,255,.075)!important;box-shadow:none!important;}
.mini-event-list{display:grid;gap:10px;}
.mini-event{display:grid;grid-template-columns:58px minmax(0,1fr);gap:12px;align-items:center;text-decoration:none;color:#fff;background:rgba(255,255,255,.055);border-radius:13px;padding:10px;}
.mini-event>span{width:58px;height:58px;border-radius:14px;display:grid;place-items:center;background:#111923;color:#fff;font-weight:1000;line-height:1;}
.mini-event>span small{color:var(--gv-hot);font-size:.68rem;}
.mini-event strong,.mini-event small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.home-merch-strip{padding:22px!important;}

/* Shared content cards inside new layout */
.page-hero,.panel,.card,.row-card,.stat,.collection-card{
  border:1px solid rgba(255,255,255,.08)!important;
  background:rgba(255,255,255,.055)!important;
  box-shadow:none!important;
  border-radius:17px!important;
}
.page-hero{padding:24px!important;margin-bottom:20px!important;background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.035))!important;}
.page-hero h1{font-size:clamp(2rem,4.2vw,4.2rem)!important;}
.panel-head h2,.panel-head h3,.card-body h3{letter-spacing:-.04em!important;}
.media{background:rgba(0,0,0,.18)!important;}
.media img{filter:none!important;}
.product-card,.event-card{transition:transform .16s ease, box-shadow .16s ease;}
.product-card:hover,.event-card:hover,.game-tile:hover{transform:translateY(-4px)!important;box-shadow:0 20px 42px rgba(0,0,0,.28)!important;}
.btn,.btn-secondary,.btn-ghost,.link-btn,.btn-danger{
  border-radius:12px!important;text-transform:none!important;letter-spacing:-.01em!important;font-weight:850!important;
}
.btn{background:linear-gradient(135deg,var(--gv-hot),var(--gv-hot2))!important;color:#fff!important;border:0!important;box-shadow:0 14px 26px rgba(255,47,102,.25)!important;}
.btn-secondary,.btn-ghost{background:rgba(255,255,255,.085)!important;border:1px solid rgba(255,255,255,.10)!important;color:#fff!important;}
.link-btn{color:#fff!important;background:transparent!important;border:0!important;}
.ticket-tag{border:0!important;border-radius:999px!important;background:rgba(255,255,255,.14)!important;color:#fff!important;backdrop-filter:blur(10px);}
.ticket-tag.good{background:linear-gradient(135deg,var(--gv-hot),var(--gv-hot2))!important;}
.ticket-tag.bad{background:rgba(255,93,93,.24)!important;}
.ticket-tag.warn{background:rgba(255,209,102,.20)!important;}
.empty{background:rgba(255,255,255,.055)!important;border-color:rgba(255,255,255,.10)!important;}

.product-dialog{border:0!important;border-radius:22px!important;background:#1f242b!important;box-shadow:0 40px 120px rgba(0,0,0,.46)!important;}
.product-dialog-grid{min-height:560px!important;}
.product-gallery-main{background:#15191f!important;}
.product-dialog-body{background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.02))!important;}

.loading{position:fixed!important;inset:0!important;display:grid!important;place-items:center!important;background:rgba(50,61,82,.40)!important;backdrop-filter:blur(16px)!important;z-index:2147483000!important;}
.loading.hidden{display:none!important;}
.loading-box{border:0!important;border-radius:18px!important;background:#22272e!important;box-shadow:0 24px 80px rgba(0,0,0,.28)!important;color:#fff!important;}
.spinner{width:28px;height:28px;border-radius:50%;border:3px solid rgba(255,255,255,.20);border-top-color:var(--gv-hot);animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}

.mobile-dock{display:none!important;}
@media(max-width:1240px){
  body{padding:0!important;display:block!important;overflow:auto!important;}
  .site-shell.gameverse-shell,.site-shell{width:100%!important;height:auto!important;min-height:100vh!important;border-radius:0!important;grid-template-columns:225px minmax(0,1fr)!important;}
  .right-rail{display:none!important;}
}
@media(max-width:860px){
  .site-shell.gameverse-shell,.site-shell{grid-template-columns:1fr!important;padding-bottom:74px!important;}
  .sidebar{position:fixed!important;z-index:1000!important;left:0!important;top:0!important;bottom:0!important;width:min(310px,88vw)!important;transform:translateX(-105%)!important;transition:transform .2s ease!important;border-radius:0 22px 22px 0!important;background:#20242b!important;}
  .sidebar.open{transform:translateX(0)!important;}
  .main{padding:14px!important;}
  .topbar{grid-template-columns:auto 1fr auto!important;}
  .mobile-menu{display:grid!important;width:48px!important;height:48px!important;padding:0!important;}
  .hub-search{max-width:none!important;}
  .sync-pill{display:none!important;}
  .tile-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .split-home-row{grid-template-columns:1fr;}
  .showcase-card{min-height:430px!important;padding:24px!important;}
  .showcase-actions{justify-self:start;}
  .mobile-dock{display:grid!important;position:fixed!important;left:12px!important;right:12px!important;bottom:12px!important;z-index:1200!important;grid-template-columns:repeat(5,1fr)!important;border-radius:18px!important;background:rgba(28,32,38,.92)!important;backdrop-filter:blur(18px)!important;border:1px solid rgba(255,255,255,.10)!important;padding:8px!important;box-shadow:0 18px 44px rgba(0,0,0,.34)!important;}
  .mobile-dock a{display:grid!important;place-items:center!important;gap:2px!important;color:rgba(255,255,255,.66)!important;text-decoration:none!important;font-size:.70rem!important;font-weight:800!important;}
  .mobile-dock a span{font-size:1.05rem!important;}
  .mobile-dock a.active{color:var(--gv-hot)!important;}
}
@media(max-width:620px){
  .hub-search input{width:100%!important;}
  .top-actions .icon-action:first-of-type{display:none!important;}
  .tile-grid{grid-template-columns:1fr;}
  .game-tile{min-height:150px;}
  .game-tile span{font-size:3rem;margin-bottom:12px;}
  .showcase-tabs{gap:12px;font-size:.75rem;}
  .grid.three,.grid.four,.grid.two{grid-template-columns:1fr!important;}
}

/* ============================================================
   FNG COMMUNITY HUB 3.0 — BUILD 05 FULLSCREEN GAMEVERSE OVERRIDE
   Removes the screenshot-style outer frame so the dashboard becomes
   a true full-screen website layout.
   ============================================================ */
html,
body {
  width: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #1c2027 !important;
}

body {
  display: block !important;
  place-items: initial !important;
  align-items: initial !important;
  background:
    radial-gradient(circle at 6% 12%, rgba(255,47,102,.16), transparent 25%),
    radial-gradient(circle at 88% 0%, rgba(101,216,255,.10), transparent 30%),
    linear-gradient(135deg, #272c34 0%, #1d222a 45%, #2a2131 100%) !important;
}

body:has(.site-shell) {
  align-items: initial !important;
}

.site-shell.gameverse-shell,
.site-shell {
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-width: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  grid-template-columns: 255px minmax(0, 1fr) 320px !important;
  background:
    radial-gradient(circle at 2% 100%, rgba(255,47,102,.16), transparent 26%),
    radial-gradient(circle at 98% 0%, rgba(101,216,255,.10), transparent 30%),
    linear-gradient(180deg, #262b31, #1c2027 56%, #241f2d) !important;
}

.site-shell::before {
  opacity: .55 !important;
}

.sidebar {
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012)),
    rgba(31,34,40,.84) !important;
}

.main {
  height: 100vh !important;
  padding: 26px 32px 40px !important;
}

.right-rail {
  height: 100vh !important;
  padding: 24px 28px 34px 18px !important;
}

.topbar {
  top: 0 !important;
}

/* Use the extra horizontal space on larger screens without making cards comically wide. */
@media (min-width: 1500px) {
  .site-shell.gameverse-shell,
  .site-shell {
    grid-template-columns: 270px minmax(0, 1fr) 340px !important;
  }

  .main {
    padding-left: 42px !important;
    padding-right: 42px !important;
  }

  .showcase-card {
    min-height: 430px !important;
  }
}

@media (max-width: 1240px) {
  html,
  body {
    overflow: auto !important;
  }

  .site-shell.gameverse-shell,
  .site-shell {
    width: 100% !important;
    height: auto !important;
    min-height: 100vh !important;
    border-radius: 0 !important;
    grid-template-columns: 225px minmax(0, 1fr) !important;
  }

  .main {
    height: auto !important;
    min-height: 100vh !important;
  }
}

@media (max-width: 860px) {
  .site-shell.gameverse-shell,
  .site-shell {
    grid-template-columns: 1fr !important;
  }

  .main {
    padding: 14px 14px 92px !important;
  }
}

/* ============================================================
   FNG COMMUNITY HUB 3.0 — BUILD 06 LAYOUT REFINEMENT
   Full-screen Gameverse layout without central topbar, with
   account actions and live status moved into the right rail.
   ============================================================ */
.topbar { display: none !important; }
.main { padding-top: 30px !important; }
.page-stage { min-height: 100% !important; }

.sidebar { grid-template-rows: auto 1fr !important; }
.sidebar-top { min-height: 0 !important; }
.sidebar-status {
  align-self: end !important;
  margin-top: auto !important;
  margin-bottom: 0 !important;
}
.sidebar-footer { display: none !important; }

.floating-menu {
  display: none !important;
  position: fixed !important;
  left: 14px !important;
  top: 14px !important;
  z-index: 1201 !important;
  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
}

.right-rail {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, auto) auto 1fr !important;
  align-content: start !important;
  gap: 18px !important;
}
.rail-profile.upgraded-profile {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
  margin-bottom: 0 !important;
  padding: 2px 0 4px !important;
}
.rail-user-link {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  color: #fff !important;
  text-decoration: none !important;
  min-width: 0 !important;
  border-radius: 18px !important;
  padding: 5px !important;
  margin-left: -5px !important;
  transition: background .16s ease, transform .16s ease;
}
.rail-user-link:hover {
  background: rgba(255,255,255,.07) !important;
  transform: translateY(-1px);
}
.rail-user-link .avatar {
  width: 48px !important;
  height: 48px !important;
}
.rail-user-link strong,
.rail-user-link small {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.rail-user-link strong { font-size: .98rem !important; }
.rail-user-link small { color: rgba(255,255,255,.66) !important; font-size: .76rem !important; }
.rail-sync {
  height: 38px !important;
  min-width: 82px !important;
  padding: 0 12px !important;
  background: rgba(255,255,255,.09) !important;
}

.rail-user-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin-bottom: 4px !important;
}
.rail-user-actions a,
.rail-user-actions button {
  min-height: 38px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.075) !important;
  color: #fff !important;
  text-decoration: none !important;
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
  font-size: .80rem !important;
  font-weight: 850 !important;
  padding: 0 10px !important;
}
.rail-user-actions a:hover,
.rail-user-actions button:hover {
  background: rgba(255,47,102,.20) !important;
}
.rail-user-actions button {
  cursor: pointer !important;
}

.rail-panel { margin-bottom: 0 !important; }
.activity-panel {
  min-height: 0 !important;
}
.activity-list {
  gap: 9px !important;
}
.activity-item {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
  color: #fff !important;
  text-decoration: none !important;
  border-radius: 14px !important;
  padding: 9px !important;
  background: rgba(255,255,255,.052) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
}
.activity-item:hover {
  background: rgba(255,255,255,.085) !important;
}
.activity-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--gv-hot), #7f7cff) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.22) !important;
  font-weight: 1000 !important;
}
.activity-item strong,
.activity-item small {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
.activity-item strong { font-size: .86rem !important; }
.activity-item small { color: rgba(255,255,255,.66) !important; font-size: .74rem !important; }

/* Event carousel banner */
.showcase-card.event-carousel {
  min-height: 430px !important;
  transition: background-image .45s ease, box-shadow .2s ease !important;
}
.showcase-kicker {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}
.carousel-position,
.showcase-date {
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.13) !important;
  color: rgba(255,255,255,.86) !important;
  padding: 7px 11px !important;
  font-size: .78rem !important;
  font-weight: 850 !important;
  backdrop-filter: blur(12px) !important;
}
.showcase-date {
  margin-bottom: 12px !important;
}
.showcase-tabs { display: none !important; }
.carousel-controls {
  display: inline-flex !important;
  gap: 8px !important;
}
.carousel-btn {
  width: 42px !important;
  height: 42px !important;
  border: 0 !important;
  border-radius: 15px !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  background: rgba(255,255,255,.14) !important;
  font-size: 1.4rem !important;
  font-weight: 900 !important;
  backdrop-filter: blur(10px) !important;
}
.carousel-btn:hover {
  background: rgba(255,255,255,.22) !important;
}
.carousel-dots {
  position: absolute !important;
  left: 32px !important;
  right: 32px !important;
  bottom: 20px !important;
  display: flex !important;
  gap: 8px !important;
  z-index: 2 !important;
}
.carousel-dots button {
  height: 5px !important;
  flex: 1 1 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.22) !important;
  padding: 0 !important;
}
.carousel-dots button.active {
  background: linear-gradient(90deg, var(--gv-hot), var(--gv-hot2)) !important;
  box-shadow: 0 0 18px rgba(255,47,102,.42) !important;
}
.showcase-copy { padding-bottom: 22px !important; }
.showcase-actions { padding-bottom: 12px !important; }

@media (max-width: 1240px) {
  .right-rail { display: none !important; }
}

@media (max-width: 860px) {
  .floating-menu {
    display: grid !important;
  }
  .main {
    padding-top: 78px !important;
  }
  .showcase-card.event-carousel {
    min-height: 480px !important;
  }
  .showcase-kicker {
    align-items: flex-start !important;
  }
  .carousel-dots {
    left: 24px !important;
    right: 24px !important;
  }
  .showcase-actions {
    display: grid !important;
    justify-items: start !important;
  }
}

@media (max-width: 620px) {
  .carousel-controls { display: none !important; }
  .showcase-card.event-carousel { min-height: 500px !important; }
}

/* ============================================================
   FNG COMMUNITY HUB 3.0 — BUILD 07 ROSE/VIOLET SYSTEM PASS
   Cleaner, more uniform pink/purple website look + clearer nav icons.
   ============================================================ */
:root {
  --gv-bg: #100b1b !important;
  --gv-shell: #171022 !important;
  --gv-shell-2: #21152f !important;
  --gv-rail: #1c1229 !important;
  --gv-text: #fff7ff !important;
  --gv-muted: #bcaecb !important;
  --gv-line: rgba(255,255,255,.105) !important;
  --gv-hot: #ff3ea5 !important;
  --gv-hot2: #8b5cf6 !important;
  --gv-blue: #b06cff !important;
  --gv-green: #a7f3d0 !important;
  --accent: var(--gv-hot) !important;
  --accent2: var(--gv-hot2) !important;
  --panel: rgba(25,16,36,.78) !important;
  --panel2: rgba(35,23,51,.82) !important;
  --text: var(--gv-text) !important;
  --muted: var(--gv-muted) !important;
  --line: var(--gv-line) !important;
}

html,
body {
  background:
    radial-gradient(circle at 8% 4%, rgba(255,62,165,.26), transparent 30%),
    radial-gradient(circle at 86% 0%, rgba(139,92,246,.28), transparent 34%),
    radial-gradient(circle at 55% 105%, rgba(255,62,165,.14), transparent 34%),
    linear-gradient(135deg, #0d0816 0%, #171025 42%, #241633 100%) !important;
}

.site-shell.gameverse-shell,
.site-shell {
  background:
    radial-gradient(circle at 0% 100%, rgba(255,62,165,.17), transparent 28%),
    radial-gradient(circle at 100% 0%, rgba(139,92,246,.22), transparent 33%),
    linear-gradient(135deg, rgba(20,13,31,.98), rgba(29,18,43,.96) 48%, rgba(18,13,31,.98)) !important;
}

.site-shell::before {
  background:
    linear-gradient(90deg, transparent 0 96%, rgba(255,255,255,.028) 96% 100%) 0 0 / 54px 54px,
    linear-gradient(0deg, transparent 0 96%, rgba(255,255,255,.02) 96% 100%) 0 0 / 54px 54px,
    radial-gradient(circle at 72% 18%, rgba(255,62,165,.12), transparent 28%) !important;
  opacity: .72 !important;
}

.sidebar {
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015)),
    linear-gradient(180deg, rgba(255,62,165,.08), rgba(139,92,246,.07)),
    rgba(16,10,25,.86) !important;
  border-right: 1px solid rgba(255,255,255,.075) !important;
}

.brand-mark {
  background: linear-gradient(135deg, #ff3ea5, #8b5cf6) !important;
  box-shadow: 0 12px 28px rgba(255,62,165,.28), 0 0 0 1px rgba(255,255,255,.12) inset !important;
}

.brand-copy strong { color: #fff !important; }

.nav {
  gap: 10px !important;
}

.nav-link,
.nav-button {
  min-height: 48px !important;
  padding: 9px 11px !important;
  border-radius: 16px !important;
  color: rgba(255,247,255,.78) !important;
  font-weight: 760 !important;
  letter-spacing: -.012em !important;
}

.nav-link span,
.nav-button span {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 14px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 1.15rem !important;
  color: #fff !important;
  background: rgba(255,255,255,.07) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07) !important;
  filter: saturate(1.05) !important;
}

.nav-link:hover,
.nav-button:hover {
  color: #fff !important;
  background: rgba(255,255,255,.07) !important;
}

.nav-link:hover span,
.nav-button:hover span {
  background: rgba(255,62,165,.18) !important;
}

.nav-link.active,
.nav-button.active {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(255,62,165,.22), rgba(139,92,246,.14)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09) !important;
}

.nav-link.active span,
.nav-button.active span {
  color: #fff !important;
  background: linear-gradient(135deg, #ff3ea5, #8b5cf6) !important;
  box-shadow: 0 10px 24px rgba(255,62,165,.26) !important;
}

.sidebar-status {
  background:
    radial-gradient(circle at 100% 0%, rgba(255,255,255,.20), transparent 32%),
    linear-gradient(135deg, #ff3ea5, #8b5cf6) !important;
  box-shadow: 0 22px 48px rgba(139,92,246,.22), 0 14px 34px rgba(255,62,165,.18) !important;
}

.main {
  background: rgba(14,9,23,.18) !important;
}

.right-rail {
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    radial-gradient(circle at 100% 0%, rgba(255,62,165,.12), transparent 34%),
    rgba(20,13,31,.72) !important;
  border-left: 1px solid rgba(255,255,255,.075) !important;
}

.rail-sync,
.sync-pill,
.icon-action {
  background: rgba(255,255,255,.08) !important;
  color: #fff !important;
}
.sync-pill::before,
.rail-sync::before {
  background: #b6ffcf !important;
  box-shadow: 0 0 14px rgba(182,255,207,.9) !important;
}
.sync-pill.is-syncing::before,
.rail-sync.is-syncing::before {
  background: #fdd66c !important;
  box-shadow: 0 0 14px rgba(253,214,108,.9) !important;
}

.rail-user-actions a,
.rail-user-actions button,
.activity-item,
.rail-empty,
.rail-gooper,
.rail-ticket,
.row-card,
.panel,
.card,
.collection-card,
.stat,
.empty {
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(255,255,255,.085) !important;
}

.rail-user-actions a:hover,
.rail-user-actions button:hover,
.activity-item:hover,
.rail-gooper:hover,
.rail-ticket:hover {
  background: rgba(255,62,165,.13) !important;
}

.rail-heading h2,
.section-row h2,
.panel-head h2,
.panel-head h3,
.card-body h3 {
  color: #fff !important;
}

.rail-heading span,
.rail-heading a,
.carousel-position,
.showcase-date {
  background: rgba(255,255,255,.105) !important;
  color: rgba(255,247,255,.86) !important;
}

.avatar,
.activity-icon,
.level-badge,
.rank-avatar-badge {
  background: linear-gradient(135deg, #ff3ea5, #8b5cf6) !important;
  box-shadow: 0 12px 26px rgba(255,62,165,.22) !important;
}

.showcase-card,
.showcase-card.event-carousel {
  border: 1px solid rgba(255,255,255,.09) !important;
  background-color: #161021 !important;
  box-shadow: 0 28px 72px rgba(0,0,0,.30), 0 0 0 1px rgba(255,255,255,.035) inset !important;
}
.showcase-card::before {
  background:
    linear-gradient(90deg, rgba(17,9,29,.86), rgba(17,9,29,.24) 56%, rgba(17,9,29,.72)),
    radial-gradient(circle at 85% 20%, rgba(255,62,165,.20), transparent 34%) !important;
}
.showcase-copy h1 {
  color: #fff !important;
  text-shadow: 0 18px 42px rgba(0,0,0,.35) !important;
}
.showcase-copy p {
  color: rgba(255,247,255,.82) !important;
}
.carousel-dots button.active {
  background: linear-gradient(90deg, #ff3ea5, #8b5cf6) !important;
  box-shadow: 0 0 20px rgba(255,62,165,.42) !important;
}
.carousel-btn {
  background: rgba(255,255,255,.12) !important;
}
.carousel-btn:hover {
  background: rgba(255,62,165,.22) !important;
}

.game-tile {
  background:
    radial-gradient(circle at 100% 0%, rgba(255,62,165,.16), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.028)) !important;
  border-color: rgba(255,255,255,.09) !important;
}
.game-tile:nth-child(2n) {
  background:
    radial-gradient(circle at 100% 0%, rgba(139,92,246,.18), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.028)) !important;
}
.game-tile span,
.stat strong,
.collection-count,
.eyebrow,
.link-btn {
  color: #ff7ac8 !important;
}

.btn,
.ticket-tag.good {
  background: linear-gradient(135deg, #ff3ea5, #8b5cf6) !important;
  box-shadow: 0 16px 32px rgba(255,62,165,.24) !important;
}
.btn-secondary,
.btn-ghost {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.10) !important;
}
.ticket-tag {
  background: rgba(255,255,255,.13) !important;
  color: #fff !important;
}
.ticket-tag.warn {
  background: rgba(255,214,102,.16) !important;
  color: #ffe8a7 !important;
}
.ticket-tag.bad {
  background: rgba(255,93,121,.17) !important;
  color: #ffc0cc !important;
}

input,
select,
textarea {
  background: rgba(10,7,17,.86) !important;
  border-color: rgba(255,255,255,.11) !important;
}
input:focus,
select:focus,
textarea:focus {
  border-color: rgba(255,62,165,.7) !important;
  box-shadow: 0 0 0 3px rgba(255,62,165,.14) !important;
}

.media img { filter: saturate(1.02) contrast(1.03) brightness(.92) !important; }
.product-card .media img { filter: none !important; }

.mobile-dock {
  background: rgba(20,13,31,.90) !important;
  border-color: rgba(255,255,255,.10) !important;
}
.mobile-dock a.active {
  color: #ff7ac8 !important;
}

@media (max-width: 860px) {
  .sidebar { background: #171022 !important; }
}

/* ============================================================
   FNG COMMUNITY HUB 3.0 — BUILD 08 REFINEMENT PASS
   Cooler grey / electric-blue theme, carousel timer, and reduced
   colour conflict after the Build 07 pink/purple experiment.
   ============================================================ */
:root {
  --bg: #070a10 !important;
  --panel: rgba(17, 22, 31, .82) !important;
  --panel2: rgba(25, 32, 44, .82) !important;
  --panel3: rgba(10, 13, 20, .94) !important;
  --text: #f4f8ff !important;
  --muted: #9aa9bc !important;
  --line: rgba(167, 190, 220, .14) !important;
  --accent: #22b8ff !important;
  --accent2: #78e4ff !important;
  --accent3: #8aa7ff !important;
  --good: #75f0b4 !important;
  --warn: #ffd166 !important;
  --bad: #ff657a !important;
  --blue: #22b8ff !important;
  --shadow: 0 30px 90px rgba(0, 0, 0, .48) !important;
}

body {
  background:
    radial-gradient(circle at 18% 8%, rgba(34,184,255,.16), transparent 30%),
    radial-gradient(circle at 84% 14%, rgba(120,228,255,.10), transparent 28%),
    radial-gradient(circle at 72% 85%, rgba(138,167,255,.09), transparent 28%),
    linear-gradient(180deg, #111722 0%, #070a10 54%, #030509 100%) !important;
}

body::before,
.site-shell::before {
  background:
    linear-gradient(90deg, transparent 0 96%, rgba(120,228,255,.045) 96% 100%) 0 0 / 56px 56px,
    linear-gradient(0deg, transparent 0 96%, rgba(120,228,255,.032) 96% 100%) 0 0 / 56px 56px,
    radial-gradient(circle at 74% 18%, rgba(34,184,255,.12), transparent 30%) !important;
  opacity: .68 !important;
}

.eyebrow,
.link-btn,
.game-tile span,
.stat strong,
.collection-count {
  color: #78e4ff !important;
  text-shadow: 0 0 18px rgba(34,184,255,.18) !important;
}

.sidebar {
  background:
    linear-gradient(180deg, rgba(255,255,255,.050), rgba(255,255,255,.015)),
    radial-gradient(circle at 0 0, rgba(34,184,255,.11), transparent 32%),
    rgba(9, 13, 20, .92) !important;
  border-right: 1px solid rgba(167,190,220,.13) !important;
}

.right-rail {
  background:
    linear-gradient(180deg, rgba(255,255,255,.052), rgba(255,255,255,.018)),
    radial-gradient(circle at 100% 0%, rgba(34,184,255,.12), transparent 34%),
    rgba(11, 15, 24, .84) !important;
  border-left: 1px solid rgba(167,190,220,.13) !important;
}

.main { background: rgba(8, 11, 18, .22) !important; }

.brand,
.panel,
.card,
.row-card,
.stat,
.collection-card,
.rail-user-actions a,
.rail-user-actions button,
.activity-item,
.rail-empty,
.rail-gooper,
.rail-ticket,
.empty,
.product-dialog,
.compact-dialog {
  background:
    linear-gradient(180deg, rgba(255,255,255,.062), rgba(255,255,255,.024)),
    rgba(14, 19, 29, .76) !important;
  border-color: rgba(167,190,220,.13) !important;
  box-shadow: 0 18px 52px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.055) !important;
}

.brand-mark,
.avatar,
.activity-icon,
.level-badge,
.rank-avatar-badge {
  background: linear-gradient(135deg, #22b8ff, #526dff) !important;
  box-shadow: 0 14px 30px rgba(34,184,255,.22), 0 0 0 1px rgba(255,255,255,.11) inset !important;
}

.brand-mark { border-color: rgba(120,228,255,.35) !important; }
.brand-copy small { color: rgba(120,228,255,.86) !important; }

.nav-link,
.nav-button {
  color: rgba(238,246,255,.78) !important;
}

.nav-link span,
.nav-button span {
  color: #dff7ff !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.026)),
    rgba(34,184,255,.075) !important;
  border: 1px solid rgba(120,228,255,.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.16) !important;
}

.nav-link:hover,
.nav-button:hover {
  background: rgba(34,184,255,.09) !important;
}
.nav-link:hover span,
.nav-button:hover span {
  background: rgba(34,184,255,.18) !important;
}
.nav-link.active,
.nav-button.active {
  background: linear-gradient(135deg, rgba(34,184,255,.20), rgba(82,109,255,.10)) !important;
  box-shadow: inset 0 0 0 1px rgba(120,228,255,.12) !important;
}
.nav-link.active span,
.nav-button.active span {
  background: linear-gradient(135deg, #22b8ff, #526dff) !important;
  box-shadow: 0 12px 26px rgba(34,184,255,.24) !important;
}

.sidebar-status {
  background:
    radial-gradient(circle at 100% 0%, rgba(255,255,255,.16), transparent 32%),
    linear-gradient(135deg, rgba(34,184,255,.22), rgba(82,109,255,.16)),
    rgba(12,17,27,.86) !important;
  border-color: rgba(120,228,255,.16) !important;
  box-shadow: 0 18px 42px rgba(34,184,255,.10) !important;
}

.status-dot,
.sync-pill::before,
.rail-sync::before {
  background: #75f0b4 !important;
  box-shadow: 0 0 14px rgba(117,240,180,.9) !important;
}
.sync-pill.is-syncing::before,
.rail-sync.is-syncing::before {
  background: #ffd166 !important;
  box-shadow: 0 0 14px rgba(255,209,102,.9) !important;
}
.rail-sync,
.sync-pill,
.icon-action {
  background: rgba(255,255,255,.075) !important;
  border: 1px solid rgba(167,190,220,.11) !important;
  color: #edf7ff !important;
}

.rail-user-actions a:hover,
.rail-user-actions button:hover,
.activity-item:hover,
.rail-gooper:hover,
.rail-ticket:hover {
  background: rgba(34,184,255,.105) !important;
}

.showcase-card,
.showcase-card.event-carousel {
  border: 1px solid rgba(167,190,220,.14) !important;
  background-color: #111722 !important;
  box-shadow: 0 30px 76px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.034) inset !important;
}
.showcase-card::before {
  background:
    linear-gradient(90deg, rgba(9,13,20,.88), rgba(9,13,20,.23) 56%, rgba(9,13,20,.74)),
    radial-gradient(circle at 85% 20%, rgba(34,184,255,.20), transparent 34%) !important;
}
.showcase-copy h1 {
  color: #fff !important;
  text-shadow: 0 18px 42px rgba(0,0,0,.38) !important;
}
.showcase-copy p { color: rgba(236,246,255,.82) !important; }
.showcase-date,
.carousel-position,
.rail-heading span,
.rail-heading a {
  background: rgba(255,255,255,.095) !important;
  color: rgba(236,248,255,.9) !important;
  border-color: rgba(167,190,220,.12) !important;
}

.btn,
.ticket-tag.good {
  background: linear-gradient(135deg, #22b8ff, #526dff) !important;
  color: #ffffff !important;
  box-shadow: 0 16px 34px rgba(34,184,255,.22) !important;
}
.btn:hover { box-shadow: 0 20px 44px rgba(34,184,255,.27) !important; }
.btn-secondary,
.btn-ghost {
  background: rgba(255,255,255,.075) !important;
  border-color: rgba(167,190,220,.13) !important;
  color: #edf7ff !important;
}
.ticket-tag {
  background: rgba(255,255,255,.11) !important;
  color: #edf7ff !important;
}
.ticket-tag.warn { background: rgba(255,209,102,.15) !important; color: #ffe8ad !important; }
.ticket-tag.bad { background: rgba(255,101,122,.15) !important; color: #ffc0ca !important; }

.carousel-dots button.active {
  background: linear-gradient(90deg, #22b8ff, #526dff) !important;
  box-shadow: 0 0 22px rgba(34,184,255,.42) !important;
}
.carousel-btn { background: rgba(255,255,255,.11) !important; }
.carousel-btn:hover { background: rgba(34,184,255,.18) !important; }

.carousel-status-pack {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.carousel-timer {
  --timer-progress: 0;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background:
    conic-gradient(#78e4ff calc(var(--timer-progress) * 1turn), rgba(255,255,255,.12) 0),
    rgba(255,255,255,.08);
  box-shadow: 0 0 24px rgba(34,184,255,.18), inset 0 0 0 1px rgba(255,255,255,.10);
}
.carousel-timer i {
  width: 25px;
  height: 25px;
  border-radius: 999px;
  background: rgba(11,15,24,.92);
  border: 1px solid rgba(167,190,220,.14);
  position: relative;
}
.carousel-timer i::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 999px;
  background: #78e4ff;
  box-shadow: 0 0 12px rgba(120,228,255,.85);
}

.game-tile {
  background:
    radial-gradient(circle at 100% 0%, rgba(34,184,255,.14), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.060), rgba(255,255,255,.024)) !important;
  border-color: rgba(167,190,220,.12) !important;
}
.game-tile:nth-child(2n) {
  background:
    radial-gradient(circle at 100% 0%, rgba(82,109,255,.14), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.060), rgba(255,255,255,.024)) !important;
}

input,
select,
textarea {
  background: rgba(8, 12, 19, .88) !important;
  border-color: rgba(167,190,220,.13) !important;
  color: #f4f8ff !important;
}
input:focus,
select:focus,
textarea:focus {
  border-color: rgba(34,184,255,.72) !important;
  box-shadow: 0 0 0 3px rgba(34,184,255,.14) !important;
}

.collection-strip::-webkit-scrollbar-thumb,
.online-list::-webkit-scrollbar-thumb { background: rgba(34,184,255,.30) !important; }
.media img { filter: saturate(.96) contrast(1.04) brightness(.93) !important; }
.product-card .media img { filter: none !important; }

.mobile-dock {
  background: rgba(11,15,24,.94) !important;
  border-color: rgba(167,190,220,.13) !important;
}
.mobile-dock a.active { color: #78e4ff !important; }

@media (max-width: 860px) {
  .sidebar { background: #0b0f18 !important; }
  .carousel-status-pack { margin-left: 0; }
}

/* ============================================================
   FNG COMMUNITY HUB 3.0 — BUILD 09
   Full-screen clan dashboard layout inspired by modern gaming hubs.
   Charcoal glass, graphite panels, acid-gold/electric-blue accents.
   ============================================================ */
:root {
  --bg:#080909 !important;
  --panel:#111214 !important;
  --panel2:#191a1d !important;
  --panel3:#0b0c0e !important;
  --text:#f5f6f7 !important;
  --muted:#a7abb1 !important;
  --line:rgba(255,255,255,.10) !important;
  --accent:#f7d13d !important;
  --accent2:#51c7ff !important;
  --accent3:#a7ff5c !important;
  --good:#75ee90 !important;
  --warn:#f7d13d !important;
  --bad:#ff6f7d !important;
  --blue:#51c7ff !important;
  --radius:18px !important;
  --shadow:0 24px 70px rgba(0,0,0,.36) !important;
}
html,body{min-height:100%;background:#090a0c!important;overflow-x:hidden;}
body{
  color:var(--text)!important;
  background:
    radial-gradient(circle at 35% -10%, rgba(81,199,255,.16), transparent 34%),
    radial-gradient(circle at 90% 10%, rgba(247,209,61,.08), transparent 28%),
    linear-gradient(180deg,#171a1f 0%,#0b0c0f 58%,#07080a 100%) !important;
}
body::before{
  opacity:.38!important;
  background:
    linear-gradient(90deg,transparent 0 97%,rgba(255,255,255,.045) 97% 100%) 0 0/80px 80px,
    linear-gradient(0deg,transparent 0 97%,rgba(255,255,255,.035) 97% 100%) 0 0/80px 80px,
    radial-gradient(circle at 50% 0%, rgba(81,199,255,.08), transparent 42%) !important;
}
.eyebrow{color:var(--accent)!important;letter-spacing:.12em!important;}
h1,h2,h3{letter-spacing:-.035em!important;text-transform:none!important;}
h1{font-size:clamp(2.2rem,4.4vw,4.6rem)!important;}

.site-shell.gameverse-shell,.site-shell{
  width:100%!important;min-height:100vh!important;height:auto!important;
  display:grid!important;
  grid-template-columns:220px minmax(0,1fr) 340px!important;
  gap:0!important;
  padding:0!important;
  border:none!important;border-radius:0!important;
  background:transparent!important;
  overflow:visible!important;
}
.sidebar{
  position:sticky!important;top:0!important;height:100vh!important;
  padding:18px 12px 14px!important;
  display:grid!important;grid-template-rows:auto 1fr auto!important;gap:16px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008)),rgba(4,5,7,.96)!important;
  border-right:1px solid rgba(255,255,255,.075)!important;
  box-shadow:18px 0 70px rgba(0,0,0,.28)!important;
  overflow-y:auto!important;
}
.sidebar-top{display:grid!important;gap:14px!important;min-height:0!important;}
.brand{
  background:transparent!important;border:none!important;box-shadow:none!important;padding:0 2px 8px!important;
  display:flex!important;align-items:center!important;gap:12px!important;text-decoration:none!important;
}
.brand-mark{width:38px!important;height:38px!important;border-radius:12px!important;background:linear-gradient(135deg,#ff4c64,#f7d13d)!important;border:0!important;box-shadow:0 10px 22px rgba(247,209,61,.15)!important;color:#111!important;font-weight:1000!important;}
.brand-copy strong{font-size:1rem!important;letter-spacing:.02em!important;color:#fff!important;text-transform:uppercase!important;}
.brand-copy small{font-size:.72rem!important;color:rgba(255,255,255,.52)!important;}
.sidebar-search{height:42px;border-radius:12px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.06);display:grid;grid-template-columns:32px 1fr;align-items:center;padding:0 8px;color:rgba(255,255,255,.55);}
.sidebar-search input{border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;color:#fff!important;font-size:.84rem!important;}
.sidebar-search input::placeholder{color:rgba(255,255,255,.45)!important;}
.quick-match{height:46px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#ffae35)!important;color:#161616!important;text-decoration:none!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;font-weight:1000!important;box-shadow:0 15px 32px rgba(247,209,61,.16)!important;}
.quick-match span{font-size:.9rem;}
.nav{gap:4px!important;align-content:start!important;}
.nav-group-label{font-size:.62rem!important;text-transform:uppercase!important;letter-spacing:.12em!important;color:rgba(255,255,255,.32)!important;margin:12px 8px 4px!important;}
.nav-link,.nav-button{
  min-height:39px!important;border-radius:11px!important;padding:8px 10px!important;gap:12px!important;
  background:transparent!important;border:1px solid transparent!important;color:rgba(255,255,255,.76)!important;
  font-size:.82rem!important;font-weight:850!important;letter-spacing:0!important;text-transform:none!important;
}
.nav-link span,.nav-button span{
  width:26px!important;height:26px!important;min-width:26px!important;border-radius:9px!important;
  display:grid!important;place-items:center!important;text-align:center!important;
  background:rgba(255,255,255,.055)!important;border:1px solid rgba(255,255,255,.055)!important;
  color:rgba(255,255,255,.88)!important;font-size:.92rem!important;box-shadow:none!important;
}
.nav-link:hover,.nav-button:hover{background:rgba(255,255,255,.055)!important;color:#fff!important;}
.nav-link.active,.nav-button.active{background:rgba(247,209,61,.12)!important;color:#fff!important;border-color:rgba(247,209,61,.10)!important;box-shadow:none!important;}
.nav-link.active span,.nav-button.active span{background:var(--accent)!important;color:#101010!important;border-color:transparent!important;box-shadow:0 8px 18px rgba(247,209,61,.18)!important;}
.sidebar-status{align-self:end!important;background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.075)!important;border-radius:14px!important;padding:13px!important;box-shadow:none!important;}
.sidebar-status strong{text-transform:none!important;font-size:.9rem!important;margin-bottom:8px!important;}
.sidebar-status span,.sidebar-status small{font-size:.8rem!important;color:rgba(255,255,255,.64)!important;}
.status-dot{background:var(--accent3)!important;box-shadow:0 0 14px rgba(167,255,92,.8)!important;}

.main{padding:20px 18px 42px!important;min-width:0!important;background:rgba(255,255,255,.012)!important;overflow-y:auto!important;max-height:100vh!important;}
.page-stage{max-width:none!important;margin:0!important;}
.topbar,.gameverse-topbar,.floating-menu + .topbar{display:none!important;}
.floating-menu{display:none!important;}

.right-rail{
  position:sticky!important;top:0!important;height:100vh!important;overflow-y:auto!important;padding:18px 18px 18px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.026),rgba(255,255,255,.008)),rgba(8,8,11,.96)!important;
  border-left:1px solid rgba(255,255,255,.075)!important;box-shadow:-18px 0 70px rgba(0,0,0,.24)!important;
  display:block!important;
}
.rail-profile.upgraded-profile{display:flex!important;align-items:center!important;gap:12px!important;margin-bottom:10px!important;padding:0 0 12px!important;border-bottom:1px solid rgba(255,255,255,.075)!important;}
.rail-user-link{display:flex!important;align-items:center!important;gap:11px!important;text-decoration:none!important;min-width:0!important;flex:1!important;}
.avatar{width:42px!important;height:42px!important;border-radius:50%!important;background:linear-gradient(135deg,var(--accent2),#7c5cff)!important;color:#fff!important;box-shadow:0 12px 28px rgba(81,199,255,.16)!important;}
.avatar.small{width:32px!important;height:32px!important;min-width:32px!important;}
.rail-user-link strong{font-size:.92rem!important;color:#fff!important;letter-spacing:0!important;}
.rail-user-link small{font-size:.72rem!important;color:rgba(255,255,255,.58)!important;}
.rail-sync,.sync-pill{border-radius:999px!important;padding:7px 9px!important;background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.075)!important;color:rgba(255,255,255,.82)!important;font-size:.68rem!important;font-weight:900!important;letter-spacing:.04em!important;text-transform:uppercase!important;}
.rail-sync::before,.sync-pill::before{background:var(--accent3)!important;box-shadow:0 0 12px rgba(167,255,92,.85)!important;}
.rail-user-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;margin-bottom:18px!important;}
.rail-user-actions a,.rail-user-actions button{border-radius:10px!important;padding:9px!important;background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.065)!important;color:rgba(255,255,255,.76)!important;text-align:center!important;font-size:.76rem!important;font-weight:850!important;text-decoration:none!important;letter-spacing:0!important;text-transform:none!important;box-shadow:none!important;}
.rail-user-actions a:hover,.rail-user-actions button:hover{background:rgba(247,209,61,.12)!important;color:#fff!important;}
.rail-user-actions button{grid-column:1/-1!important;color:#ff9ea7!important;}
.rail-panel{margin-bottom:18px!important;}
.rail-heading{display:flex!important;justify-content:space-between!important;align-items:center!important;gap:10px!important;margin-bottom:10px!important;}
.rail-heading h2{font-size:1.05rem!important;margin:0!important;color:#fff!important;letter-spacing:-.03em!important;font-weight:1000!important;}
.rail-heading span,.rail-heading a{background:rgba(255,255,255,.07)!important;border:1px solid rgba(255,255,255,.065)!important;color:rgba(255,255,255,.84)!important;border-radius:999px!important;padding:4px 9px!important;font-size:.72rem!important;text-decoration:none!important;font-weight:900!important;}
.rail-list{display:grid!important;gap:9px!important;}
.rail-gooper,.activity-item,.rail-ticket,.rail-empty{background:rgba(255,255,255,.042)!important;border:1px solid rgba(255,255,255,.055)!important;border-radius:13px!important;box-shadow:none!important;color:#fff!important;}
.rail-gooper{display:grid!important;grid-template-columns:32px 1fr!important;gap:9px!important;padding:8px!important;align-items:center!important;}
.rail-gooper strong,.activity-item strong,.rail-ticket strong{font-size:.82rem!important;color:#fff!important;}
.rail-gooper small,.activity-item small,.rail-ticket small{font-size:.72rem!important;color:rgba(255,255,255,.58)!important;}
.rail-empty{padding:12px!important;color:rgba(255,255,255,.52)!important;border-style:dashed!important;}
.activity-item{display:grid!important;grid-template-columns:30px 1fr!important;gap:9px!important;padding:9px!important;text-decoration:none!important;}
.activity-icon{width:30px!important;height:30px!important;border-radius:10px!important;display:grid!important;place-items:center!important;background:rgba(247,209,61,.14)!important;color:var(--accent)!important;box-shadow:none!important;}
.activity-item:hover,.rail-gooper:hover,.rail-ticket:hover{background:rgba(81,199,255,.08)!important;}
.rail-ticket{display:block!important;padding:10px!important;background:rgba(247,209,61,.08)!important;}

.panel,.card,.row-card,.stat,.collection-card,.empty,.product-dialog,.compact-dialog,.game-tile,.slim-panel,.home-merch-strip{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.025)),rgba(20,21,24,.80)!important;
  border:1px solid rgba(255,255,255,.075)!important;
  border-radius:18px!important;
  box-shadow:none!important;
}
.panel{padding:18px!important;}
.panel-head h2,.panel-head h3,.section-row h2{color:#fff!important;font-size:1.1rem!important;letter-spacing:-.035em!important;}
.link-btn{color:var(--accent)!important;font-size:.78rem!important;}

.showcase-card,.showcase-card.event-carousel{
  min-height:360px!important;border-radius:18px!important;overflow:hidden!important;
  border:1px solid rgba(255,255,255,.075)!important;
  background-color:#17181c!important;
  box-shadow:none!important;
  padding:22px!important;
  display:grid!important;grid-template-rows:auto 1fr auto auto!important;
}
.showcase-card::before{background:linear-gradient(90deg,rgba(0,0,0,.46),rgba(0,0,0,.04) 58%,rgba(0,0,0,.62)),linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.62))!important;}
.showcase-card::after{content:""!important;position:absolute!important;inset:0!important;background:radial-gradient(circle at 82% 0%,rgba(247,209,61,.15),transparent 28%),linear-gradient(180deg,transparent,rgba(0,0,0,.12))!important;pointer-events:none!important;z-index:0!important;}
.showcase-kicker{display:flex!important;align-items:center!important;gap:12px!important;color:rgba(255,255,255,.82)!important;}
.showcase-kicker .eyebrow{color:#fff!important;background:rgba(0,0,0,.36)!important;border:1px solid rgba(255,255,255,.10)!important;border-radius:999px!important;padding:7px 10px!important;font-size:.68rem!important;letter-spacing:.08em!important;}
.carousel-status-pack{margin-left:auto!important;background:rgba(0,0,0,.30)!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:999px!important;padding:5px 8px!important;}
.carousel-timer{width:30px!important;height:30px!important;background:conic-gradient(var(--accent) calc(var(--timer-progress) * 1turn),rgba(255,255,255,.12) 0),rgba(0,0,0,.18)!important;box-shadow:none!important;}
.carousel-timer i{width:22px!important;height:22px!important;background:rgba(16,16,18,.94)!important;border-color:rgba(255,255,255,.08)!important;}
.carousel-timer i::after{inset:7px!important;background:var(--accent)!important;box-shadow:0 0 10px rgba(247,209,61,.7)!important;}
.carousel-position{background:transparent!important;border:0!important;padding:0!important;color:rgba(255,255,255,.76)!important;}
.showcase-copy{align-self:end!important;padding-bottom:10px!important;max-width:650px!important;}
.showcase-date{display:inline-flex!important;margin-bottom:12px!important;background:rgba(247,209,61,.86)!important;color:#171717!important;border:0!important;border-radius:8px!important;padding:7px 10px!important;font-size:.74rem!important;font-weight:1000!important;}
.showcase-copy h1{font-size:clamp(2rem,4.4vw,4.2rem)!important;line-height:.94!important;letter-spacing:-.07em!important;margin-bottom:10px!important;color:#fff!important;text-shadow:0 14px 36px rgba(0,0,0,.42)!important;}
.showcase-copy p{max-width:560px!important;color:rgba(255,255,255,.82)!important;font-size:.94rem!important;}
.showcase-actions{justify-self:start!important;align-self:end!important;padding-bottom:0!important;}
.carousel-controls{margin-left:8px!important;}
.carousel-btn{width:42px!important;height:42px!important;border-radius:50%!important;background:rgba(255,255,255,.10)!important;border:1px solid rgba(255,255,255,.09)!important;color:#fff!important;}
.carousel-btn:hover{background:rgba(247,209,61,.18)!important;}
.carousel-dots{position:absolute!important;left:22px!important;top:58px!important;display:flex!important;gap:6px!important;z-index:2!important;}
.carousel-dots button{width:6px!important;height:6px!important;border-radius:99px!important;border:0!important;padding:0!important;background:rgba(255,255,255,.42)!important;}
.carousel-dots button.active{width:18px!important;background:var(--accent)!important;box-shadow:none!important;}

.game-dashboard{display:grid!important;gap:18px!important;}
.section-row{display:flex!important;align-items:center!important;justify-content:space-between!important;margin-bottom:12px!important;}
.tile-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important;}
.game-tile{min-height:170px!important;padding:16px!important;text-decoration:none!important;display:grid!important;align-content:end!important;position:relative!important;overflow:hidden!important;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.018)),rgba(18,19,23,.90)!important;}
.game-tile::before{content:"";position:absolute;inset:auto -20% -30% 20%;height:70%;background:radial-gradient(circle,rgba(81,199,255,.16),transparent 62%);pointer-events:none;}
.game-tile span{position:absolute!important;left:14px!important;top:12px!important;color:var(--accent)!important;font-size:1.4rem!important;font-weight:1000!important;}
.game-tile strong{font-size:1rem!important;color:#fff!important;z-index:1!important;}
.game-tile small{color:rgba(255,255,255,.56)!important;z-index:1!important;}
.split-home-row{display:grid!important;grid-template-columns:1fr 1fr!important;gap:18px!important;}
.mini-event-list,.list{gap:10px!important;}
.mini-event,.row-card.glass-row{background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.055)!important;border-radius:13px!important;box-shadow:none!important;}

.btn,.ticket-tag.good{background:linear-gradient(135deg,var(--accent),#ffad2f)!important;color:#151515!important;border:0!important;box-shadow:0 13px 30px rgba(247,209,61,.16)!important;}
.btn-secondary,.btn-ghost,.btn-danger{background:rgba(255,255,255,.055)!important;border-color:rgba(255,255,255,.075)!important;color:#fff!important;box-shadow:none!important;}
.ticket-tag{background:rgba(255,255,255,.10)!important;border-color:rgba(255,255,255,.08)!important;color:rgba(255,255,255,.86)!important;}
.ticket-tag.warn{background:rgba(247,209,61,.13)!important;color:#ffe790!important;}
.ticket-tag.bad{background:rgba(255,111,125,.13)!important;color:#ffb4bd!important;}
input,select,textarea{background:rgba(0,0,0,.28)!important;border-color:rgba(255,255,255,.08)!important;border-radius:12px!important;color:#fff!important;}
input:focus,select:focus,textarea:focus{border-color:rgba(81,199,255,.5)!important;box-shadow:0 0 0 3px rgba(81,199,255,.10)!important;}
.media img{filter:saturate(.88) contrast(1.02) brightness(.82)!important;}
.product-card .media img{filter:none!important;}
.mobile-dock{background:rgba(5,6,8,.96)!important;border-color:rgba(255,255,255,.075)!important;}
.mobile-dock a.active{color:var(--accent)!important;}

@media (max-width: 1180px){
  .site-shell.gameverse-shell,.site-shell{grid-template-columns:220px minmax(0,1fr)!important;}
  .right-rail{display:none!important;}
}
@media (max-width: 900px){
  .site-shell.gameverse-shell,.site-shell{display:block!important;padding-bottom:72px!important;}
  .sidebar{position:fixed!important;left:0!important;top:0!important;width:280px!important;z-index:1000!important;transform:translateX(-105%);transition:transform .2s ease!important;}
  .sidebar.open{transform:translateX(0)!important;}
  .main{max-height:none!important;padding:16px 12px 90px!important;}
  .floating-menu{display:inline-flex!important;position:fixed!important;left:14px!important;top:14px!important;z-index:980!important;}
  .showcase-card.event-carousel{min-height:430px!important;}
  .tile-grid,.grid.three,.grid.four,.split-home-row{grid-template-columns:1fr!important;}
}


/* ===== Build 10 refinements: slim nav, merch CTA, yellow profile accents, stable carousel ===== */
.brand-copy strong { font-size: .96rem !important; letter-spacing: -.01em !important; }
.brand-copy small { font-size: .70rem !important; opacity: .72 !important; }

.quick-match {
  min-height: 44px !important;
  padding: 10px 13px !important;
  border-radius: 12px !important;
  font-size: .82rem !important;
  justify-content: flex-start !important;
}
.quick-match span { font-size: 1rem !important; }

.nav { gap: 3px !important; }
.nav-group-label {
  margin: 13px 8px 4px !important;
  font-size: .58rem !important;
  letter-spacing: .14em !important;
  color: rgba(255,255,255,.34) !important;
}
.nav-link,
.nav-button {
  min-height: 34px !important;
  padding: 6px 8px !important;
  border-radius: 9px !important;
  gap: 9px !important;
  font-size: .76rem !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  font-weight: 850 !important;
}
.nav-link span,
.nav-button span {
  width: 25px !important;
  height: 25px !important;
  min-width: 25px !important;
  border-radius: 8px !important;
  font-size: .92rem !important;
}
.nav-link.active,
.nav-button.active {
  background: rgba(247,209,61,.10) !important;
  border-color: rgba(247,209,61,.10) !important;
}
.nav-link:hover,
.nav-button:hover {
  background: rgba(255,255,255,.045) !important;
}

.avatar,
.avatar.small,
.rail-user-link .avatar,
.profile-popup-avatar {
  border: 2px solid rgba(247,209,61,.96) !important;
  box-shadow:
    0 0 0 3px rgba(247,209,61,.10),
    0 12px 28px rgba(0,0,0,.28) !important;
}
.rail-gooper .avatar.small,
.online-member .avatar.small {
  border-color: rgba(247,209,61,.88) !important;
}

.rail-gooper,
.online-member {
  appearance: none !important;
  width: 100% !important;
  text-align: left !important;
  cursor: pointer !important;
  font: inherit !important;
}
.rail-gooper:hover,
.online-member:hover {
  border-color: rgba(247,209,61,.20) !important;
  background: rgba(247,209,61,.075) !important;
}

.showcase-card,
.showcase-card.event-carousel {
  min-height: 360px !important;
  max-height: 360px !important;
}
.showcase-copy {
  min-height: 184px !important;
  max-width: 650px !important;
}
.showcase-copy p,
#showcaseDescription {
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 4.55em !important;
  max-height: 4.55em !important;
}
.showcase-copy h1,
#showcaseTitle {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  min-height: 1.88em !important;
}

.profile-popup-dialog {
  width: min(720px, calc(100vw - 24px)) !important;
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  color: #fff !important;
}
.profile-popup-dialog::backdrop { background: rgba(0,0,0,.72) !important; backdrop-filter: blur(10px); }
.profile-popup-card {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025)), #101115;
  box-shadow: 0 34px 100px rgba(0,0,0,.55);
}
.profile-popup-card .dialog-close { position: absolute; right: 14px; top: 14px; z-index: 4; }
.profile-popup-banner {
  min-height: 210px;
  background:
    radial-gradient(circle at 78% 12%, rgba(247,209,61,.16), transparent 32%),
    linear-gradient(135deg, #191a20, #08090c);
  background-size: cover;
  background-position: center;
  position: relative;
}
.profile-popup-avatar {
  position: absolute !important;
  left: 24px;
  bottom: -34px;
  width: 86px !important;
  height: 86px !important;
  font-size: 2rem;
  z-index: 3;
}
.profile-popup-body { padding: 50px 26px 26px; display: grid; gap: 12px; }
.profile-popup-body h2 { margin: 0; font-size: clamp(1.7rem, 4vw, 2.4rem); letter-spacing: -.04em; }
.profile-popup-bio { margin: 0; }
.profile-popup-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 6px; }
.profile-popup-stats span {
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255,255,255,.045);
}
.profile-popup-stats strong { display: block; color: var(--accent); }
.profile-popup-stats small { color: rgba(255,255,255,.58); font-weight: 850; }
.profile-popup-section h3 { font-size: .9rem; margin: 4px 0 8px; color: #fff; }
.mini-pill {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin: 4px 6px 0 0;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(247,209,61,.16);
  background: rgba(247,209,61,.07);
  color: rgba(255,255,255,.86);
  font-size: .8rem;
  font-weight: 850;
}

@media (max-width: 900px) {
  .showcase-card,
  .showcase-card.event-carousel {
    min-height: 430px !important;
    max-height: none !important;
  }
  .showcase-copy { min-height: auto !important; }
}

/* ===== Build 11 refinements: black rail, plain nav, carousel stability/fixes ===== */
:root {
  --rail-black: #030405;
  --rail-black-2: #07090c;
  --fng-gold: #f7d13d;
}

/* De-clunk the left rail without shrinking the items */
.sidebar {
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008)),
    var(--rail-black) !important;
  border-right: 1px solid rgba(255,255,255,.075) !important;
  box-shadow: 18px 0 54px rgba(0,0,0,.46) !important;
}

.brand {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 4px 8px 10px !important;
}

.brand-mark {
  border-color: rgba(247,209,61,.55) !important;
  background: linear-gradient(135deg, rgba(247,209,61,.22), rgba(255,255,255,.035)), #0b0d10 !important;
}

.sidebar-search {
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(255,255,255,.06) !important;
}

.quick-match {
  margin: 10px 8px 18px !important;
}

.nav {
  gap: 1px !important;
}

.nav-group-label {
  margin: 18px 10px 8px !important;
  color: rgba(255,255,255,.32) !important;
}

.nav-link,
.nav-button {
  min-height: 44px !important;
  padding: 9px 10px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(255,255,255,.78) !important;
  font-size: .88rem !important;
  line-height: 1.1 !important;
  font-weight: 850 !important;
  letter-spacing: -.01em !important;
  box-shadow: none !important;
}

.nav-link::before,
.nav-button::before {
  left: 0 !important;
  width: 2px !important;
  background: var(--fng-gold) !important;
  opacity: 0 !important;
}

.nav-link span,
.nav-button span {
  width: 26px !important;
  height: auto !important;
  min-width: 26px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(247,209,61,.86) !important;
  font-size: 1rem !important;
  display: inline-grid !important;
  place-items: center !important;
  box-shadow: none !important;
}

.nav-link:hover,
.nav-button:hover,
.nav-link.active,
.nav-button.active {
  background: transparent !important;
  border: 0 !important;
  color: #fff !important;
  transform: none !important;
}

.nav-link:hover::before,
.nav-button:hover::before,
.nav-link.active::before,
.nav-button.active::before {
  opacity: 1 !important;
}

.nav-link:hover span,
.nav-button:hover span,
.nav-link.active span,
.nav-button.active span {
  color: var(--fng-gold) !important;
}

.sidebar-status {
  background: rgba(255,255,255,.035) !important;
  border-color: rgba(255,255,255,.07) !important;
  margin: 0 8px !important;
}

/* Carousel: fixed layout, more description text, no control overlap */
.showcase-card,
.showcase-card.event-carousel {
  min-height: 390px !important;
  max-height: 390px !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  padding: 24px !important;
  isolation: isolate !important;
}

.showcase-card > * {
  position: relative !important;
  z-index: 3 !important;
}

.showcase-kicker {
  min-height: 40px !important;
}

.showcase-copy {
  align-self: end !important;
  max-width: 700px !important;
  min-height: 210px !important;
  padding-bottom: 12px !important;
}

.showcase-copy h1,
#showcaseTitle {
  min-height: 1.9em !important;
  max-height: 1.9em !important;
  -webkit-line-clamp: 2 !important;
}

.showcase-copy p,
#showcaseDescription {
  max-width: 650px !important;
  -webkit-line-clamp: 4 !important;
  min-height: 5.45em !important;
  max-height: 5.45em !important;
  line-height: 1.36 !important;
}

.showcase-actions {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding-right: 108px !important;
  min-height: 48px !important;
  z-index: 8 !important;
}

.carousel-controls {
  position: absolute !important;
  right: 22px !important;
  bottom: 22px !important;
  display: flex !important;
  gap: 9px !important;
  margin: 0 !important;
  z-index: 20 !important;
  pointer-events: auto !important;
}

.carousel-btn {
  position: relative !important;
  z-index: 21 !important;
  pointer-events: auto !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 999px !important;
  display: inline-grid !important;
  place-items: center !important;
  line-height: 1 !important;
  font-size: 1.65rem !important;
}

.carousel-btn:hover {
  background: rgba(247,209,61,.20) !important;
  color: #fff !important;
}

.carousel-dots {
  top: 66px !important;
  z-index: 15 !important;
  pointer-events: auto !important;
}

.carousel-dots button {
  pointer-events: auto !important;
}

.carousel-status-pack {
  position: relative !important;
  z-index: 15 !important;
}

@media (max-width: 900px) {
  .showcase-card,
  .showcase-card.event-carousel {
    min-height: 470px !important;
    max-height: none !important;
  }
  .showcase-copy {
    min-height: auto !important;
  }
  .showcase-actions {
    padding-right: 0 !important;
    padding-bottom: 58px !important;
  }
  .carousel-controls {
    left: 24px !important;
    right: auto !important;
  }
}


/* ============================================================
   FNG COMMUNITY HUB 3.0 — BUILD 12
   Discord server icon brand + clean text-only menu hover.
   ============================================================ */
.sidebar {
  background: #050607 !important;
}

.brand {
  align-items: center !important;
  gap: 13px !important;
}

.brand-mark {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  border-radius: 15px !important;
  overflow: hidden !important;
  border: 2px solid rgba(247,209,61,.68) !important;
  background: #0b0c0e !important;
  box-shadow: 0 0 0 4px rgba(247,209,61,.09), 0 12px 26px rgba(0,0,0,.38) !important;
}

.brand-mark img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.brand-mark span {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  height: 100% !important;
  color: var(--fng-gold, #f7d13d) !important;
  font-weight: 1000 !important;
  font-size: .72rem !important;
}

.brand-copy strong {
  font-size: 1rem !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
}

.nav {
  gap: 3px !important;
}

.nav-link,
.nav-button {
  min-height: 45px !important;
  padding: 9px 11px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(255,255,255,.74) !important;
  transform: none !important;
  text-decoration: none !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

.nav-link::before,
.nav-link::after,
.nav-button::before,
.nav-button::after {
  display: none !important;
  opacity: 0 !important;
  content: none !important;
}

.nav-link .nav-icon,
.nav-link span,
.nav-button span {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(255,255,255,.68) !important;
  filter: none !important;
  opacity: .96 !important;
  font-size: 1.08rem !important;
  line-height: 1 !important;
  display: inline-grid !important;
  place-items: center !important;
}

.nav-link b {
  font: inherit !important;
  font-weight: inherit !important;
}

.nav-link:hover,
.nav-button:hover {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
  transform: none !important;
  font-weight: 950 !important;
}

.nav-link:hover .nav-icon,
.nav-link:hover span,
.nav-button:hover span {
  background: transparent !important;
  color: rgba(255,255,255,.68) !important;
  box-shadow: none !important;
  transform: none !important;
}

.nav-link.active,
.nav-button.active {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
  font-weight: 1000 !important;
}

.nav-link.active .nav-icon,
.nav-link.active span,
.nav-button.active span {
  background: transparent !important;
  color: rgba(247,209,61,.92) !important;
  box-shadow: none !important;
}

.nav-group-label {
  color: rgba(247,209,61,.44) !important;
}

@media (max-width: 860px) {
  .sidebar { background: #050607 !important; }
}

/* ============================================================
   FNG COMMUNITY HUB 3.0 — BUILD 13
   Black/gold uniformity, Marketplace details, Profile edit, home focus.
   ============================================================ */
:root {
  --fng-gold: #f7d13d !important;
  --fng-gold-2: #ffb830 !important;
  --fng-black: #050607 !important;
  --fng-charcoal: #101115 !important;
  --accent: var(--fng-gold) !important;
  --accent2: var(--fng-gold-2) !important;
  --accent3: #ffe899 !important;
  --blue: var(--fng-gold) !important;
  --good: #7df29a !important;
  --warn: var(--fng-gold) !important;
}

/* Remove leftover electric-blue from profile/rank areas and align to gold. */
.profile-card .stat strong,
.stat strong,
.profile-popup-stats strong,
.level-badge,
.rank-avatar-badge,
.online-count,
.product-price,
.fund-balance,
.xp-breakdown strong,
.profile-xp strong {
  color: var(--fng-gold) !important;
}

.rank-avatar-badge,
.level-badge,
.profile-level-badge,
.xp-bar span,
.hud-xp-track span,
.progress-step.done span {
  background: linear-gradient(135deg, var(--fng-gold), var(--fng-gold-2)) !important;
  color: #111 !important;
  box-shadow: 0 12px 26px rgba(247,209,61,.18) !important;
}

.profile-banner,
.profile-popup-banner {
  border-color: rgba(247,209,61,.20) !important;
  background-color: #111 !important;
}

.profile-avatar-large,
.profile-dialog-avatar,
.profile-popup-avatar,
.avatar {
  border-color: rgba(247,209,61,.72) !important;
  box-shadow: 0 0 0 3px rgba(247,209,61,.10), 0 12px 28px rgba(0,0,0,.28) !important;
}

.mini-pill,
.profile-link-pill,
.achievement-pill,
.ticket-tag,
.status-pill {
  border-color: rgba(247,209,61,.24) !important;
}

.ticket-tag.good,
.btn {
  background: linear-gradient(135deg, var(--fng-gold), var(--fng-gold-2)) !important;
  color: #111 !important;
}

.ticket-tag.warn {
  background: rgba(247,209,61,.14) !important;
  color: #ffe69a !important;
}

/* Homepage: focus below carousel on merch and ticketed events. */
.homepage-focus-row {
  align-items: stretch !important;
}

.homepage-focus-row .latest-merch-focus {
  min-width: 0 !important;
}

.homepage-focus-row .latest-merch-focus .grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.ticketed-events-focus .row-card {
  border-color: rgba(247,209,61,.18) !important;
}

.next-events-focus {
  margin-top: 18px !important;
}

/* Marketplace cards are now interactive. */
.marketplace-card {
  cursor: pointer !important;
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease !important;
}

.marketplace-card:hover,
.marketplace-card:focus-visible {
  transform: translateY(-3px) !important;
  border-color: rgba(247,209,61,.42) !important;
  box-shadow: 0 22px 54px rgba(0,0,0,.34), 0 0 0 1px rgba(247,209,61,.10) !important;
  outline: none !important;
}

.marketplace-detail-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.marketplace-detail-meta span {
  border: 1px solid rgba(247,209,61,.18);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  padding: 12px;
}

.marketplace-detail-meta strong,
.marketplace-detail-meta small {
  display: block;
}

.marketplace-detail-meta small {
  color: var(--muted);
  margin-top: 3px;
}

/* Profile edit form polish. */
.three-mini {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

#profileForm textarea {
  min-height: 150px;
}

#profileMessage.success {
  color: #8ff5a8 !important;
}

#profileMessage.error {
  color: #ff9aa5 !important;
}

/* Clamp any remaining blue/purple gradients in cards without flattening the whole identity. */
.event-tile,
.merch-tile,
.ticket-tile,
.online-tile {
  background: linear-gradient(135deg, #17181c, #090a0c) !important;
  border: 1px solid rgba(247,209,61,.18) !important;
}

.game-tile span,
.game-tile strong,
.game-tile:hover strong {
  color: var(--fng-gold) !important;
}

.link-btn,
a.link-btn,
.rail-heading a {
  color: #ffe082 !important;
}

@media (max-width: 1040px) {
  .homepage-focus-row .latest-merch-focus .grid.three,
  .three-mini,
  .marketplace-detail-meta {
    grid-template-columns: 1fr !important;
  }
}


/* ===== Build 14 Homepage layout + member/profile refinements ===== */
.home-welcome-copy {
  max-width: 980px;
  margin: 24px 0 20px;
  padding: 0 4px;
}
.home-welcome-copy h2 {
  margin: 4px 0 10px;
  font-size: clamp(1.6rem, 2.2vw, 2.35rem);
  letter-spacing: -.04em;
}
.home-welcome-copy p {
  max-width: 860px;
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
  font-size: 1.02rem;
}
.latest-merch-full {
  width: 100%;
  margin-bottom: 18px;
}
.latest-merch-full .grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.homepage-events-row {
  align-items: stretch !important;
}
.homepage-events-row .next-events-focus {
  margin-top: 0 !important;
}
.member-profile-card {
  width: 100%;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.member-profile-card:hover,
.member-profile-card:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(247,209,61,.38) !important;
  outline: none;
}
.profile-banner.has-custom-banner {
  background-color: #111 !important;
  background-size: cover !important;
  background-position: center !important;
}
@media (max-width: 1040px) {
  .latest-merch-full .grid.three,
  .homepage-events-row {
    grid-template-columns: 1fr !important;
  }
}

/* ===== Build 15 page heading + event detail popup refinements ===== */
.page-hero,
section.page-hero {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 4px 18px !important;
  margin: 0 0 22px !important;
  min-height: 0 !important;
  overflow: visible !important;
}
.page-hero::before,
.page-hero::after,
section.page-hero::before,
section.page-hero::after {
  display: none !important;
  content: none !important;
}
.page-hero .eyebrow {
  margin-bottom: 7px !important;
}
.page-hero h1 {
  margin: 0 0 8px !important;
  font-size: clamp(2.15rem, 4.6vw, 4.8rem) !important;
  line-height: .9 !important;
  letter-spacing: -.07em !important;
  color: #f5f5f0 !important;
  text-shadow: 0 14px 34px rgba(0,0,0,.34) !important;
}
.page-hero p,
.page-hero .muted {
  max-width: 860px !important;
  margin: 0 !important;
  color: rgba(244,244,232,.72) !important;
  font-size: 1.02rem !important;
  line-height: 1.65 !important;
}
.event-card.clickable-card {
  cursor: pointer;
}
.event-card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.event-detail-dialog {
  width: min(980px, calc(100vw - 24px)) !important;
}
.event-detail-layout {
  display: grid;
  grid-template-columns: minmax(260px, .82fr) minmax(0, 1.18fr);
  min-height: 560px;
  background: #08090b;
}
.event-detail-media {
  min-height: 560px;
  background: linear-gradient(135deg, #151515, #070707);
  overflow: hidden;
}
.event-detail-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.event-detail-body {
  display: grid !important;
  gap: 18px !important;
  align-content: start;
}
.event-detail-body h2 {
  margin: 4px 0 10px !important;
  font-size: clamp(2rem, 3vw, 3.3rem) !important;
  line-height: .95 !important;
  letter-spacing: -.06em !important;
}
.event-detail-meta {
  line-height: 1.6 !important;
}
.event-detail-description {
  line-height: 1.68;
  color: rgba(244,244,232,.86);
  white-space: normal;
}
.event-detail-tickets {
  border: 1px solid rgba(247,209,61,.18);
  border-radius: 14px;
  padding: 14px;
  background: rgba(247,209,61,.055);
}
.event-detail-tickets h3 {
  margin: 4px 0 12px;
}
.event-ticket-type-list {
  display: grid;
  gap: 10px;
}
.event-ticket-type {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: start;
  padding: 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.06);
}
.event-ticket-type strong {
  color: #fff7c1;
}
.event-ticket-type span {
  color: var(--fng-gold);
  font-weight: 1000;
}
.event-ticket-type small {
  color: rgba(244,244,232,.62);
  font-weight: 900;
}
.event-ticket-type p {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  color: rgba(244,244,232,.68);
  line-height: 1.55;
}
@media (max-width: 820px) {
  .event-detail-layout {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .event-detail-media {
    min-height: 260px;
    max-height: 340px;
  }
  .event-ticket-type {
    grid-template-columns: 1fr;
  }
}
.mini-event[type="button"] {
  width: 100%;
  border: 0;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.glass-row.clickable-card {
  cursor: pointer;
}


/* ===== Build 16 admin centre redesign ===== */
.admin-console-top {
  padding: 0 4px 20px !important;
  margin: 0 0 22px !important;
}
.admin-console-top h1 {
  margin: 0 0 8px !important;
  font-size: clamp(2.25rem, 4.8vw, 5rem) !important;
  line-height: .9 !important;
  letter-spacing: -.075em !important;
  color: #f5f5f0 !important;
}
.admin-console-top p {
  max-width: 900px;
  color: rgba(244,244,232,.72) !important;
  margin-bottom: 18px;
}
.admin-tabbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px;
  border: 1px solid rgba(247,209,61,.14);
  border-radius: 16px;
  background: rgba(0,0,0,.32);
  width: fit-content;
  max-width: 100%;
}
.admin-tab {
  color: rgba(244,244,232,.72);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 12px;
  padding: 10px 13px;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .045em;
  border: 1px solid transparent;
}
.admin-tab span { color: var(--fng-gold); }
.admin-tab:hover { color: #fff; font-weight: 1000; background: rgba(255,255,255,.045); }
.admin-tab.active {
  color: #0b0b0b;
  background: linear-gradient(180deg, #fff2a9, var(--fng-gold));
  border-color: rgba(255,255,255,.3);
  box-shadow: 0 14px 30px rgba(247,209,61,.12);
}
.admin-tab.active span { color: #0b0b0b; }
.admin-content-grid {
  display: grid;
  gap: 18px;
}
.admin-content-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.admin-panel .panel-head p {
  margin: 4px 0 0;
  max-width: 720px;
}
.ticket-sale-manager .panel-head {
  align-items: center;
}
.admin-ticket-sale-list {
  display: grid;
  gap: 10px;
}
.ticket-sale-row {
  width: 100%;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  color: inherit;
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(145px, auto) minmax(145px, auto) auto;
  gap: 14px;
  align-items: center;
  text-align: left;
}
.ticket-sale-row:hover,
.ticket-sale-row:focus-visible {
  border-color: rgba(247,209,61,.34);
  background: rgba(247,209,61,.055);
  outline: none;
}
.ticket-sale-row strong {
  display: block;
  color: #fff8c6;
  text-transform: uppercase;
  letter-spacing: -.02em;
}
.ticket-sale-row small,
.sale-window small {
  display: block;
  color: rgba(244,244,232,.58);
  font-weight: 850;
  line-height: 1.45;
}
.sale-window {
  color: rgba(244,244,232,.82);
  font-weight: 900;
}
#ticketEventFormTitle {
  letter-spacing: -.04em;
}
@media (max-width: 1160px) {
  .ticket-sale-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .admin-content-grid.two,
  .ticket-sale-row { grid-template-columns: 1fr !important; }
  .admin-tabbar { width: 100%; }
  .admin-tab { flex: 1; justify-content: center; }
}

/* Build 17 — Ticket Admin permanent cleanup */
.ticket-sale-row {
  grid-template-columns: minmax(260px, 1fr) minmax(145px, auto) minmax(145px, auto) auto auto !important;
}
.ticket-sale-row[role="button"] { cursor: pointer; }
.ticket-sale-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.btn.compact,
.btn-secondary.compact,
.btn-danger.compact {
  padding: 8px 10px;
  font-size: .72rem;
  border-radius: 7px;
  letter-spacing: .045em;
}
.sale-delete-state {
  color: rgba(247,209,61,.70) !important;
  margin-top: 3px;
}
.danger-zone-panel {
  border-color: rgba(255,93,93,.28) !important;
  background: linear-gradient(180deg,rgba(255,93,93,.055),rgba(255,255,255,.018)),rgba(10,13,15,.94) !important;
}
.voided-ticket-list .row-card {
  border-color: rgba(255,93,93,.22);
}
.voided-ticket-row h3 {
  color: #ffb0b0;
}
@media (max-width: 1160px) {
  .ticket-sale-row { grid-template-columns: 1fr 1fr !important; }
  .ticket-sale-actions { justify-content: flex-start; }
}
@media (max-width: 820px) {
  .ticket-sale-row { grid-template-columns: 1fr !important; }
}

/* ============================================================
   FNG COMMUNITY HUB 3.0 — BUILD 18
   Gold/black polish, real Discord icon retry, textured merch art.
   ============================================================ */
:root {
  --accent: #f7d13d !important;
  --accent2: #ffbc32 !important;
  --accent3: #fff1a8 !important;
  --blue: #f7d13d !important;
  --gv-blue: #f7d13d !important;
  --gv-hot: #f7d13d !important;
  --gv-hot2: #ffbc32 !important;
  --fng-gold: #f7d13d !important;
  --fng-gold-2: #ffbc32 !important;
}

/* Replace the old grid/blue dashboard texture with a smoother stage-like background. */
html,
body {
  background:
    radial-gradient(circle at 24% 8%, rgba(247,209,61,.115), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.065), transparent 24%),
    radial-gradient(circle at 70% 92%, rgba(247,209,61,.055), transparent 34%),
    linear-gradient(135deg, #111214 0%, #070809 48%, #11100b 100%) !important;
}
body::before {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.06), transparent 48%),
    radial-gradient(ellipse at 0% 70%, rgba(247,209,61,.045), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.028), transparent 28%, rgba(0,0,0,.30) 100%) !important;
  opacity: 1 !important;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.030) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 74% 62%, rgba(247,209,61,.030) 0 1px, transparent 1px 5px);
  background-size: 18px 18px, 23px 23px;
  mix-blend-mode: screen;
  opacity: .22;
}
.main {
  background:
    radial-gradient(circle at 48% 0%, rgba(247,209,61,.045), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.012), transparent 20%) !important;
}

/* Ensure the Discord server icon is visually given room to display as the brand mark. */
.brand-mark[data-discord-brand-icon],
.brand-mark {
  background: #08090b !important;
  border: 2px solid rgba(247,209,61,.74) !important;
  box-shadow: 0 0 0 4px rgba(247,209,61,.08), 0 18px 38px rgba(0,0,0,.36) !important;
}
.brand-mark[data-discord-brand-icon] img,
.brand-mark img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Shop Merch CTA gets a NEW roundel without changing the button's overall style. */
.quick-match.shop-merch-cta {
  position: relative !important;
  overflow: visible !important;
  justify-content: flex-start !important;
  padding-right: 46px !important;
}
.quick-match.shop-merch-cta b {
  font: inherit !important;
}
.new-roundel {
  position: absolute;
  right: -7px;
  top: -10px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 32% 24%, #fff3f3, #ff3434 35%, #b90000 100%);
  color: #fff;
  border: 2px solid rgba(255,255,255,.90);
  box-shadow: 0 10px 24px rgba(0,0,0,.38), 0 0 18px rgba(255,46,46,.35);
  font-size: .62rem;
  font-style: normal;
  font-weight: 1000;
  letter-spacing: .02em;
  transform: rotate(9deg);
}

/* XP explanation under the profile stats. */
.xp-help {
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid rgba(247,209,61,.14);
}
.xp-help h3 {
  margin: 0 0 7px;
  color: #fff7c4;
  font-size: .95rem;
  letter-spacing: .055em;
}
.xp-help p {
  margin: 0 0 8px;
  color: rgba(244,244,232,.78);
  line-height: 1.6;
  font-size: .94rem;
}
.xp-help p:last-child { margin-bottom: 0; }

/* Final pass: remove remaining blue/purple rank/profile accents. */
.profile-card .stat,
.profile-popup-stats span,
.stat,
.rank-card,
.profile-xp,
.xp-breakdown,
.profile-link-pill,
.mini-pill,
.achievement-pill {
  border-color: rgba(247,209,61,.18) !important;
  background: linear-gradient(180deg, rgba(247,209,61,.055), rgba(255,255,255,.026)), rgba(8,9,10,.86) !important;
}
.profile-card .stat strong,
.profile-popup-stats strong,
.profile-card h2,
.profile-popup-body h2,
.profile-level-badge,
.level-badge,
.rank-avatar-badge,
.online-count,
.game-tile strong,
.collection-count,
.product-price,
.fund-balance,
.stat strong {
  color: var(--fng-gold) !important;
}
.avatar,
.profile-avatar-large,
.profile-dialog-avatar,
.profile-popup-avatar {
  background: linear-gradient(135deg, #f7d13d, #8d6b08) !important;
  color: #101010 !important;
}

/* Merch art now sits on a textured charcoal/gold base instead of a flat blue field. */
.product-card .media,
.product-gallery-main {
  background:
    radial-gradient(circle at 18% 18%, rgba(247,209,61,.18), transparent 27%),
    radial-gradient(circle at 85% 74%, rgba(255,255,255,.075), transparent 30%),
    linear-gradient(135deg, #1b1b18 0%, #0a0b0c 54%, #151209 100%) !important;
  position: relative !important;
}
.product-card .media::before,
.product-gallery-main::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 1px, transparent 1px 9px),
    radial-gradient(circle at 50% 50%, transparent 0 46%, rgba(0,0,0,.22) 100%);
  opacity: .72;
}
.product-card .media::after,
.product-gallery-main::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(247,209,61,.09);
  border-radius: 12px;
  pointer-events: none;
}
.product-card .media img,
.product-gallery-main img,
.product-card .media .media-fallback,
.product-gallery-main .media-fallback {
  position: relative !important;
  z-index: 1 !important;
  background: transparent !important;
}
.product-card .media img {
  padding: 20px !important;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.35)) !important;
}
.product-gallery-main img {
  filter: drop-shadow(0 24px 38px rgba(0,0,0,.45)) !important;
}

/* Keep merch/ticket/activity modules aligned with the black/yellow theme. */
.panel,
.card,
.row-card,
.empty,
.slim-panel,
.home-merch-strip,
.collection-card,
.product-dialog,
.compact-dialog,
.event-detail-tickets {
  border-color: rgba(247,209,61,.13) !important;
}
.btn,
.ticket-tag.good,
.admin-tab.active,
.progress-step.done span,
.xp-bar span,
.hud-xp-track span,
.profile-level-badge,
.level-badge,
.rank-avatar-badge {
  background: linear-gradient(135deg, #f7d13d, #ffbc32) !important;
  color: #101010 !important;
  border-color: rgba(255,255,255,.22) !important;
}
.btn-secondary:hover,
.link-btn:hover,
.rail-heading a:hover {
  color: #fff6c2 !important;
}


/* ============================================================
   BUILD 19 — background + merch presentation refresh
   Black / gold dirt-gravel site mood and a more on-brand merch stage.
   ============================================================ */

body {
  background:
    radial-gradient(circle at 18% 10%, rgba(247,209,61,.10), transparent 24%),
    radial-gradient(circle at 78% 22%, rgba(255,193,64,.08), transparent 22%),
    radial-gradient(circle at 50% 120%, rgba(120,92,16,.18), transparent 38%),
    linear-gradient(180deg, #171410 0%, #0e0c09 28%, #080706 58%, #040404 100%) !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: .95;
  background:
    radial-gradient(circle at 14% 24%, rgba(255,255,255,.05) 0 1px, transparent 1.5px) 0 0 / 22px 22px,
    radial-gradient(circle at 72% 64%, rgba(247,209,61,.055) 0 1.2px, transparent 1.7px) 0 0 / 28px 28px,
    radial-gradient(circle at 36% 76%, rgba(0,0,0,.28) 0 2px, transparent 2.6px) 0 0 / 34px 34px,
    repeating-linear-gradient(145deg, rgba(255,255,255,.018) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(35deg, rgba(0,0,0,.08) 0 2px, transparent 2px 17px),
    linear-gradient(180deg, rgba(255,214,102,.03), rgba(0,0,0,.10));
  filter: saturate(.82) contrast(1.04);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.98), rgba(0,0,0,.90));
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 45%, rgba(0,0,0,.18) 100%),
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 12%, transparent 88%, rgba(0,0,0,.18));
  mix-blend-mode: normal;
}

.main, .page-shell, .page-main, .content-area {
  background: transparent !important;
}

/* Merch backgrounds: dark armoury/plinth feel, less abstract and more brand-appropriate. */
.product-card .media,
.product-gallery-main {
  background:
    radial-gradient(circle at 50% 28%, rgba(255,232,163,.16), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 18%),
    linear-gradient(180deg, #1d1a15 0%, #12100d 30%, #0a0a09 70%, #15120d 100%) !important;
}

.product-card .media::before,
.product-gallery-main::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 24%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.018) 0 1px, transparent 1px 5px),
    radial-gradient(circle at 20% 24%, rgba(247,209,61,.08), transparent 18%),
    radial-gradient(circle at 78% 80%, rgba(0,0,0,.26), transparent 32%);
  opacity: .88;
}

.product-card .media::after,
.product-gallery-main::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 14px;
  pointer-events: none;
  border: 1px solid rgba(247,209,61,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
  background:
    linear-gradient(135deg, transparent 0 72%, rgba(247,209,61,.08) 72% 74%, transparent 74% 100%),
    linear-gradient(315deg, transparent 0 72%, rgba(247,209,61,.05) 72% 74%, transparent 74% 100%);
}

.product-card .media img,
.product-gallery-main img {
  filter: drop-shadow(0 20px 32px rgba(0,0,0,.42)) !important;
}

.media-fallback {
  background: transparent !important;
}


/* ============================================================
   BUILD 20 — collection-themed merch stages
   Each merch collection can have its own display backdrop.
   ============================================================ */
.product-card .media,
.product-gallery-main {
  overflow: hidden;
  isolation: isolate;
}

.collection-emblem {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.68);
  color: #fff2bf;
  font-size: .68rem;
  font-weight: 1000;
  letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
  box-shadow: 0 10px 22px rgba(0,0,0,.28);
}

.product-card .media[data-collection-theme="fng"],
.product-gallery-main[data-collection-theme="fng"] {
  background:
    radial-gradient(circle at 20% 18%, rgba(247,209,61,.20), transparent 23%),
    radial-gradient(circle at 80% 78%, rgba(255,255,255,.08), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 18%),
    linear-gradient(180deg, #1e1a12 0%, #12100d 34%, #090909 70%, #15120c 100%) !important;
}
.product-card .media[data-collection-theme="fng"]::before,
.product-gallery-main[data-collection-theme="fng"]::before {
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 24%),
    repeating-linear-gradient(180deg, rgba(255,255,255,.018) 0 1px, transparent 1px 6px),
    radial-gradient(circle at 18% 24%, rgba(247,209,61,.10), transparent 18%),
    radial-gradient(circle at 78% 76%, rgba(0,0,0,.24), transparent 32%);
}

.product-card .media[data-collection-theme="lan"],
.product-gallery-main[data-collection-theme="lan"] {
  background:
    radial-gradient(circle at 15% 20%, rgba(99,200,255,.16), transparent 20%),
    radial-gradient(circle at 82% 18%, rgba(255,72,72,.12), transparent 18%),
    radial-gradient(circle at 50% 100%, rgba(64,12,12,.20), transparent 40%),
    linear-gradient(180deg, #121317 0%, #0a0b10 42%, #0a0908 100%) !important;
}
.product-card .media[data-collection-theme="lan"]::before,
.product-gallery-main[data-collection-theme="lan"]::before {
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 20%),
    repeating-linear-gradient(90deg, rgba(92,112,138,.10) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(0deg, rgba(92,112,138,.08) 0 1px, transparent 1px 20px),
    radial-gradient(circle at 24% 24%, rgba(79,190,255,.12), transparent 16%),
    radial-gradient(circle at 76% 78%, rgba(255,148,70,.08), transparent 28%);
}
.product-card .media[data-collection-theme="lan"]::after,
.product-gallery-main[data-collection-theme="lan"]::after {
  border-color: rgba(99,200,255,.16);
  background:
    linear-gradient(180deg, transparent 0 76%, rgba(255,255,255,.02) 76% 100%),
    linear-gradient(135deg, transparent 0 68%, rgba(99,200,255,.10) 68% 70%, transparent 70% 100%),
    linear-gradient(315deg, transparent 0 68%, rgba(255,72,72,.08) 68% 70%, transparent 70% 100%);
}
.product-card .media[data-collection-theme="lan"] .collection-emblem,
.product-gallery-main[data-collection-theme="lan"] .collection-emblem {
  background: radial-gradient(circle at 30% 30%, #fff3f3, #ff4040 36%, #8d0000 100%);
  color: #fff;
  border-color: rgba(255,255,255,.65);
}

.product-card .media[data-collection-theme="arc"],
.product-gallery-main[data-collection-theme="arc"] {
  background:
    radial-gradient(circle at 24% 20%, rgba(136,255,225,.12), transparent 20%),
    radial-gradient(circle at 80% 80%, rgba(255,170,92,.10), transparent 24%),
    linear-gradient(180deg, #1b2325 0%, #101719 45%, #0a0d0f 100%) !important;
}
.product-card .media[data-collection-theme="arc"]::before,
.product-gallery-main[data-collection-theme="arc"]::before {
  background:
    linear-gradient(180deg, rgba(255,255,255,.018), transparent 22%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(45deg, rgba(0,0,0,.08) 0 2px, transparent 2px 18px);
}
.product-card .media[data-collection-theme="arc"]::after,
.product-gallery-main[data-collection-theme="arc"]::after {
  border-color: rgba(136,255,225,.15);
}
.product-card .media[data-collection-theme="arc"] .collection-emblem,
.product-gallery-main[data-collection-theme="arc"] .collection-emblem {
  color: #dffff4;
  border-color: rgba(136,255,225,.25);
}

.product-card .media[data-collection-theme="minecraft"],
.product-gallery-main[data-collection-theme="minecraft"] {
  background:
    linear-gradient(180deg, rgba(160,226,120,.14), transparent 18%),
    linear-gradient(180deg, #4e3c28 0 18%, #6f8d3d 18% 38%, #4b5d2e 38% 40%, #3a2d1e 40% 100%) !important;
}
.product-card .media[data-collection-theme="minecraft"]::before,
.product-gallery-main[data-collection-theme="minecraft"]::before {
  background:
    linear-gradient(90deg, rgba(255,255,255,.03) 0 12.5%, transparent 12.5% 25%, rgba(255,255,255,.03) 25% 37.5%, transparent 37.5% 50%, rgba(255,255,255,.03) 50% 62.5%, transparent 62.5% 75%, rgba(255,255,255,.03) 75% 87.5%, transparent 87.5% 100%),
    linear-gradient(0deg, rgba(0,0,0,.08) 0 12.5%, transparent 12.5% 25%, rgba(0,0,0,.08) 25% 37.5%, transparent 37.5% 50%, rgba(0,0,0,.08) 50% 62.5%, transparent 62.5% 75%, rgba(0,0,0,.08) 75% 87.5%, transparent 87.5% 100%);
  background-size: 48px 48px, 48px 48px;
}
.product-card .media[data-collection-theme="minecraft"] .collection-emblem,
.product-gallery-main[data-collection-theme="minecraft"] .collection-emblem {
  color: #eaffdc;
  border-color: rgba(205,255,181,.28);
}

.product-card .media[data-collection-theme="default"],
.product-gallery-main[data-collection-theme="default"] {
  background:
    radial-gradient(circle at 50% 28%, rgba(255,232,163,.16), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 18%),
    linear-gradient(180deg, #1d1a15 0%, #12100d 30%, #0a0a09 70%, #15120d 100%) !important;
}


/* ============================================================
   BUILD 21 — homepage module aesthetic refresh
   Open-frame sections with corroded / tactical headings inspired by the reference.
   ============================================================ */
.wire-section {
  position: relative;
  padding: 6px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.wire-head {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 16px;
  padding: 0 0 14px;
}

.wire-head::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(247,209,61,.92), rgba(247,209,61,.20) 42%, rgba(247,209,61,0) 100%);
}

.wire-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 140px;
  height: 10px;
  background: radial-gradient(circle at left center, rgba(247,209,61,.34), rgba(247,209,61,0) 72%);
}

.wire-head h2 {
  margin: 0 !important;
  font-size: clamp(2rem, 3.1vw, 2.85rem) !important;
  line-height: .92 !important;
  text-transform: uppercase !important;
  letter-spacing: .025em !important;
  color: #f3ead0 !important;
  position: relative;
  text-shadow: 0 0 22px rgba(247,209,61,.10), 0 1px 0 rgba(255,255,255,.10);
}

.wire-head h2::before {
  content: "";
  position: absolute;
  left: -14px;
  top: .22em;
  width: 4px;
  height: .82em;
  background: linear-gradient(180deg, rgba(247,209,61,0), rgba(247,209,61,.95) 45%, rgba(247,209,61,0));
  box-shadow: 0 0 16px rgba(247,209,61,.35);
}

.wire-head h2::after {
  content: attr(data-noise);
  position: absolute;
  inset: 0;
  opacity: .12;
  mix-blend-mode: screen;
  pointer-events: none;
}

.wire-link {
  color: rgba(244,236,195,.84) !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.wire-frame {
  position: relative;
  padding: 20px 18px 18px;
  min-height: 100px;
}

.wire-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(247,209,61,.26), rgba(247,209,61,.26)) left top / 72px 1px no-repeat,
    linear-gradient(rgba(247,209,61,.26), rgba(247,209,61,.26)) left top / 1px 72px no-repeat,
    linear-gradient(rgba(247,209,61,.18), rgba(247,209,61,.18)) right top / 72px 1px no-repeat,
    linear-gradient(rgba(247,209,61,.18), rgba(247,209,61,.18)) right top / 1px 72px no-repeat,
    linear-gradient(rgba(247,209,61,.18), rgba(247,209,61,.18)) left bottom / 72px 1px no-repeat,
    linear-gradient(rgba(247,209,61,.18), rgba(247,209,61,.18)) left bottom / 1px 72px no-repeat,
    linear-gradient(rgba(247,209,61,.14), rgba(247,209,61,.14)) right bottom / 72px 1px no-repeat,
    linear-gradient(rgba(247,209,61,.14), rgba(247,209,61,.14)) right bottom / 1px 72px no-repeat,
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0) 16%);
}

.wire-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 15px),
    radial-gradient(circle at 12% 14%, rgba(247,209,61,.12), transparent 18%),
    radial-gradient(circle at 82% 84%, rgba(0,0,0,.18), transparent 22%);
}

.latest-merch-focus .product-card,
.ticketed-events-focus .row-card,
.next-events-focus .mini-event,
.latest-merch-focus .empty,
.ticketed-events-focus .empty,
.next-events-focus .empty {
  position: relative;
  z-index: 1;
}

.latest-merch-focus .product-card,
.ticketed-events-focus .row-card,
.next-events-focus .mini-event {
  border-radius: 6px !important;
}

.next-events-focus .mini-event-list,
.ticketed-events-focus .list,
.latest-merch-focus #homeProductsGrid {
  position: relative;
  z-index: 1;
}

/* Make empty states less like floating cards inside the new wireframe modules. */
.wire-frame .empty {
  background: rgba(255,255,255,.02) !important;
  border-radius: 4px !important;
  border: 1px dashed rgba(247,209,61,.16) !important;
}

@media (max-width: 760px) {
  .wire-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .wire-head h2 {
    font-size: clamp(1.5rem, 7vw, 2.1rem) !important;
  }
  .wire-frame {
    padding: 16px 12px 12px;
  }
}


/* ============================================================
   BUILD 22 — global tactical frame pass + font experiment
   Carries the Build 21 open-frame / corroded heading treatment
   across the rest of the Community Hub.
   ============================================================ */
:root {
  --tactical-font: "Bahnschrift", "Rajdhani", "Barlow Condensed", "Agency FB", "Arial Narrow", "Roboto Condensed", "Segoe UI", system-ui, sans-serif;
  --tactical-display: "Bahnschrift SemiCondensed", "Bahnschrift", "Agency FB", "Arial Narrow", "Rajdhani", "Roboto Condensed", "Segoe UI", system-ui, sans-serif;
}

body,
button,
input,
select,
textarea {
  font-family: var(--tactical-font) !important;
}

h1,
h2,
h3,
.brand-copy strong,
.nav-link,
.nav-button,
.btn,
.btn-secondary,
.btn-danger,
.btn-ghost,
.link-btn,
.eyebrow,
.ticket-tag,
.rail-heading h2,
.panel-head h2,
.panel-head h3,
.wire-head h2 {
  font-family: var(--tactical-display) !important;
}

h1,
h2,
h3,
.rail-heading h2,
.panel-head h2,
.wire-head h2 {
  text-transform: uppercase !important;
  letter-spacing: .035em !important;
}

/* Page introductions: no box, more like a briefing header. */
.page-hero,
.clan-hero,
.page-intro,
.section-intro {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 10px 0 24px !important;
  margin-bottom: 24px !important;
  overflow: visible !important;
}
.page-hero::before,
.page-hero::after,
.clan-hero::before,
.clan-hero::after,
.page-intro::before,
.page-intro::after,
.section-intro::before,
.section-intro::after { display: none !important; }
.page-hero h1,
.clan-hero h1,
.page-intro h1,
.section-intro h1 {
  font-size: clamp(2.4rem, 5vw, 5.6rem) !important;
  line-height: .88 !important;
  color: #f4edd8 !important;
  text-shadow: 0 0 30px rgba(247,209,61,.11), 0 1px 0 rgba(255,255,255,.08) !important;
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 6px, rgba(0,0,0,.82) 6px 8px, #000 8px 15px);
  mask-image: repeating-linear-gradient(180deg, #000 0 6px, rgba(0,0,0,.82) 6px 8px, #000 8px 15px);
}
.page-hero p,
.clan-hero p,
.page-intro p,
.section-intro p {
  max-width: 880px;
  color: rgba(244,236,210,.76) !important;
}

/* Convert most old rounded modules into open tactical frames. */
.panel,
.card,
.row-card,
.rail-panel,
.admin-panel,
.member-card,
.marketplace-card,
.ticket-card,
.order-card,
.profile-card,
.collection-card,
.stat,
.empty,
.slim-panel {
  position: relative !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  overflow: visible !important;
}

.panel,
.rail-panel,
.admin-panel,
.slim-panel,
.profile-card {
  padding: 22px 18px 18px !important;
}

.card,
.row-card,
.member-card,
.marketplace-card,
.ticket-card,
.order-card,
.collection-card,
.stat,
.empty {
  padding: 16px !important;
}

.product-card.card { padding: 0 !important; }
.product-card .card-body { padding: 16px !important; }
.product-card .media { border-radius: 2px !important; }

.panel::before,
.card::before,
.row-card::before,
.rail-panel::before,
.admin-panel::before,
.member-card::before,
.marketplace-card::before,
.ticket-card::before,
.order-card::before,
.profile-card::before,
.collection-card::before,
.stat::before,
.empty::before,
.slim-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(rgba(247,209,61,.24), rgba(247,209,61,.24)) left top / 46px 1px no-repeat,
    linear-gradient(rgba(247,209,61,.24), rgba(247,209,61,.24)) left top / 1px 46px no-repeat,
    linear-gradient(rgba(247,209,61,.12), rgba(247,209,61,.12)) right top / 46px 1px no-repeat,
    linear-gradient(rgba(247,209,61,.12), rgba(247,209,61,.12)) right top / 1px 46px no-repeat,
    linear-gradient(rgba(247,209,61,.12), rgba(247,209,61,.12)) left bottom / 46px 1px no-repeat,
    linear-gradient(rgba(247,209,61,.12), rgba(247,209,61,.12)) left bottom / 1px 46px no-repeat,
    linear-gradient(rgba(247,209,61,.08), rgba(247,209,61,.08)) right bottom / 46px 1px no-repeat,
    linear-gradient(rgba(247,209,61,.08), rgba(247,209,61,.08)) right bottom / 1px 46px no-repeat,
    linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0) 28%);
  opacity: .92;
}

.panel::after,
.card::after,
.row-card::after,
.rail-panel::after,
.admin-panel::after,
.member-card::after,
.marketplace-card::after,
.ticket-card::after,
.order-card::after,
.profile-card::after,
.collection-card::after,
.stat::after,
.empty::after,
.slim-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .16;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 18px),
    radial-gradient(circle at 12% 16%, rgba(247,209,61,.14), transparent 20%);
}

.panel > *,
.card > *,
.row-card > *,
.rail-panel > *,
.admin-panel > *,
.member-card > *,
.marketplace-card > *,
.ticket-card > *,
.order-card > *,
.profile-card > *,
.collection-card > *,
.stat > *,
.empty > *,
.slim-panel > * {
  position: relative;
  z-index: 1;
}

/* Headings inside modules now use the same tactical header language as homepage. */
.panel-head,
.rail-heading {
  position: relative !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 18px !important;
  margin: 0 0 18px !important;
  padding: 0 0 13px !important;
  border: 0 !important;
}
.panel-head::before,
.rail-heading::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(247,209,61,.72), rgba(247,209,61,.18) 42%, rgba(247,209,61,0) 100%);
}
.panel-head h2,
.panel-head h3,
.rail-heading h2 {
  margin: 0 !important;
  color: #f4edd8 !important;
  line-height: .95 !important;
  text-shadow: 0 0 20px rgba(247,209,61,.10) !important;
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 5px, rgba(0,0,0,.78) 5px 7px, #000 7px 14px);
  mask-image: repeating-linear-gradient(180deg, #000 0 5px, rgba(0,0,0,.78) 5px 7px, #000 7px 14px);
}

/* Corroded tactical title treatment for the new homepage wire heads too. */
.wire-head h2,
.panel-head h2,
.panel-head h3,
.rail-heading h2 {
  position: relative;
}
.wire-head h2::selection,
.panel-head h2::selection,
.panel-head h3::selection,
.rail-heading h2::selection { background: rgba(247,209,61,.24); }

/* Smaller content cards keep open framing, not pill-like rounded boxes. */
.mini-event,
.online-member,
.activity-item,
.ticket-row,
.profile-link-pill,
.mini-pill,
.achievement-pill {
  border-radius: 2px !important;
  background: rgba(0,0,0,.14) !important;
  border-color: rgba(247,209,61,.13) !important;
}

/* Admin tabs: keep usability, remove old app-button feel. */
.admin-tabs,
.admin-subnav {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.admin-tab,
.admin-subnav a,
.tab-btn {
  border-radius: 0 !important;
  background: transparent !important;
  border-color: rgba(247,209,61,.15) !important;
  color: rgba(244,236,210,.78) !important;
  font-family: var(--tactical-display) !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}
.admin-tab.active,
.admin-subnav a.active,
.tab-btn.active {
  background: linear-gradient(90deg, rgba(247,209,61,.14), transparent) !important;
  color: #fff4bf !important;
}

/* Dialogs keep a frame but lose the soft rounded app look. */
dialog,
.product-dialog,
.compact-dialog,
.event-detail-dialog,
.profile-dialog {
  border-radius: 2px !important;
  border-color: rgba(247,209,61,.28) !important;
  background: rgba(8,8,7,.98) !important;
  box-shadow: 0 30px 110px rgba(0,0,0,.76) !important;
}

/* Forms and buttons stay usable but become sharper. */
input,
select,
textarea,
.btn,
.btn-secondary,
.btn-danger,
.btn-ghost,
.link-btn,
.quick-match {
  border-radius: 2px !important;
}

/* Keep right rail readable with the global open-frame pass. */
.right-rail .rail-panel {
  padding: 18px 14px !important;
}

/* Stop pseudo frames from interfering with replaced/overflow-heavy media areas. */
.media::before,
.media::after,
.product-gallery-main::before,
.product-gallery-main::after { z-index: 0; }
.media img,
.product-gallery-main img,
.collection-emblem { position: relative; z-index: 2; }

@media (max-width: 760px) {
  .panel-head,
  .rail-heading {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  .panel,
  .rail-panel,
  .admin-panel,
  .slim-panel,
  .profile-card {
    padding: 18px 12px 14px !important;
  }
}


/* ============================================================
   BUILD 23 — roster/menu/status/collection polish
   ============================================================ */

/* Left navigation: a touch larger without changing the tactical layout. */
.sidebar .nav-link,
.sidebar .nav-button {
  font-size: .92rem !important;
  line-height: 1.18 !important;
}
.sidebar .nav-link span,
.sidebar .nav-button span {
  font-size: 1.05rem !important;
}

/* Status pill: keep the light dot inline to the LEFT of Live/Syncing. */
.rail-sync,
.sync-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
}
.rail-sync::before,
.sync-pill::before {
  content: "" !important;
  flex: 0 0 8px !important;
  width: 8px !important;
  height: 8px !important;
  margin: 0 !important;
  display: inline-block !important;
  border-radius: 50% !important;
  order: -1 !important;
}

/* Merch collection tiles: no upward jump, no blue hover glow, stay within the gold/black theme. */
.collection-strip {
  padding-top: 4px !important;
}
.collection-card,
.collection-card:hover,
.collection-card:focus,
.collection-card:focus-visible {
  transform: none !important;
  transition: color .15s ease, border-color .15s ease, background .15s ease, opacity .15s ease !important;
  box-shadow: none !important;
}
.collection-card:hover,
.collection-card:focus-visible {
  color: #fff3bd !important;
  border-color: rgba(247,209,61,.32) !important;
  outline: 1px solid rgba(247,209,61,.24) !important;
  outline-offset: 0 !important;
  background:
    radial-gradient(circle at 12% 16%, rgba(247,209,61,.10), transparent 24%),
    linear-gradient(180deg, rgba(247,209,61,.045), rgba(255,255,255,.012)) !important;
}
.collection-card.active {
  outline: 1px solid rgba(247,209,61,.55) !important;
  outline-offset: 0 !important;
  box-shadow: inset 0 0 0 1px rgba(247,209,61,.12) !important;
}
.collection-card:hover::before,
.collection-card:focus-visible::before,
.collection-card.active::before {
  background:
    linear-gradient(rgba(247,209,61,.34), rgba(247,209,61,.34)) left top / 54px 1px no-repeat,
    linear-gradient(rgba(247,209,61,.34), rgba(247,209,61,.34)) left top / 1px 54px no-repeat,
    linear-gradient(rgba(247,209,61,.18), rgba(247,209,61,.18)) right top / 54px 1px no-repeat,
    linear-gradient(rgba(247,209,61,.18), rgba(247,209,61,.18)) right top / 1px 54px no-repeat,
    linear-gradient(rgba(247,209,61,.18), rgba(247,209,61,.18)) left bottom / 54px 1px no-repeat,
    linear-gradient(rgba(247,209,61,.18), rgba(247,209,61,.18)) left bottom / 1px 54px no-repeat,
    linear-gradient(rgba(247,209,61,.12), rgba(247,209,61,.12)) right bottom / 54px 1px no-repeat,
    linear-gradient(rgba(247,209,61,.12), rgba(247,209,61,.12)) right bottom / 1px 54px no-repeat !important;
}


/* ============================================================
   BUILD 24 — GoopTV stream placeholder + known bot cleanup
   ============================================================ */
.gooptv-page {
  min-height: calc(100vh - 40px);
  display: grid;
}

.gooptv-stream-shell {
  width: 100%;
  min-height: calc(100vh - 40px);
  position: relative;
  display: grid;
  align-items: stretch;
  padding: 0;
}

.gooptv-stream-aspect {
  position: relative;
  width: 100%;
  min-height: calc(100vh - 40px);
  background:
    radial-gradient(circle at 50% 40%, rgba(247,209,61,.10), transparent 24%),
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.04), transparent 18%),
    linear-gradient(180deg, #070706 0%, #020202 100%);
  overflow: hidden;
  border: 1px solid rgba(247,209,61,.22);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), inset 0 0 120px rgba(0,0,0,.55);
}

.gooptv-stream-aspect::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(247,209,61,.38), rgba(247,209,61,.38)) left top / 92px 1px no-repeat,
    linear-gradient(rgba(247,209,61,.38), rgba(247,209,61,.38)) left top / 1px 92px no-repeat,
    linear-gradient(rgba(247,209,61,.18), rgba(247,209,61,.18)) right top / 92px 1px no-repeat,
    linear-gradient(rgba(247,209,61,.18), rgba(247,209,61,.18)) right top / 1px 92px no-repeat,
    linear-gradient(rgba(247,209,61,.18), rgba(247,209,61,.18)) left bottom / 92px 1px no-repeat,
    linear-gradient(rgba(247,209,61,.18), rgba(247,209,61,.18)) left bottom / 1px 92px no-repeat,
    linear-gradient(rgba(247,209,61,.14), rgba(247,209,61,.14)) right bottom / 92px 1px no-repeat,
    linear-gradient(rgba(247,209,61,.14), rgba(247,209,61,.14)) right bottom / 1px 92px no-repeat,
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 7px);
  opacity: .86;
}

.gooptv-stream-aspect::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 50%, rgba(0,0,0,.42) 100%),
    repeating-linear-gradient(90deg, rgba(247,209,61,.028) 0 1px, transparent 1px 42px);
}

.gooptv-offair {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 32px;
}

.gooptv-signal {
  justify-self: center;
  margin-bottom: 18px;
  padding: 7px 12px;
  color: rgba(247,209,61,.78);
  border: 1px solid rgba(247,209,61,.22);
  background: rgba(0,0,0,.34);
  font-size: .74rem;
  font-weight: 1000;
  letter-spacing: .22em;
}

.gooptv-offair h1 {
  margin: 0 0 10px !important;
  color: #f4ead0 !important;
  text-transform: uppercase !important;
  letter-spacing: .055em !important;
  font-size: clamp(2.1rem, 5.5vw, 5.2rem) !important;
  text-shadow: 0 0 28px rgba(247,209,61,.10);
}

.gooptv-offair p {
  margin: 0;
  color: rgba(244,236,195,.72) !important;
  font-size: clamp(1rem, 1.7vw, 1.35rem);
  letter-spacing: .04em;
}

@media (max-width: 1180px) {
  .gooptv-page,
  .gooptv-stream-shell,
  .gooptv-stream-aspect {
    min-height: calc(100vh - 28px);
  }
}


/* ============================================================
   BUILD 25 — GoopTV tabs + online rail label polish
   ============================================================ */
.sidebar .nav-link,
.sidebar .nav-button {
  font-size: .98rem !important;
}
.sidebar .nav-link b,
.sidebar .nav-button b {
  font-size: inherit !important;
}

.rail-heading h2 {
  white-space: nowrap;
}

.gooptv-page {
  min-height: calc(100vh - 40px);
  display: block !important;
}

.gooptv-intro {
  max-width: 980px;
  margin: 0 0 24px;
  padding: 0 0 6px;
}
.gooptv-intro h1 {
  margin: 6px 0 12px !important;
  color: #f4ead0 !important;
  text-transform: uppercase !important;
  letter-spacing: .035em !important;
  font-size: clamp(2.1rem, 4.6vw, 5rem) !important;
  line-height: .92 !important;
}
.gooptv-intro p {
  max-width: 780px;
  margin: 0;
  color: rgba(244,236,195,.78) !important;
  font-size: 1.02rem;
}

.gooptv-tabs {
  display: flex;
  gap: 10px;
  margin: 10px 0 18px;
  border-bottom: 1px solid rgba(247,209,61,.18);
}
.gooptv-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(244,236,195,.62);
  padding: 0 0 12px;
  margin-right: 18px;
  font-weight: 1000;
  letter-spacing: .13em;
  text-transform: uppercase;
  position: relative;
}
.gooptv-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: rgba(247,209,61,.82);
  opacity: 0;
}
.gooptv-tab:hover,
.gooptv-tab.active {
  color: #fff1b8;
}
.gooptv-tab.active::after {
  opacity: 1;
}

.gooptv-panel[hidden] {
  display: none !important;
}
.gooptv-panel.active {
  display: block;
}

.gooptv-stream-shell {
  min-height: min(68vh, 760px) !important;
}
.gooptv-stream-aspect {
  min-height: min(68vh, 760px) !important;
}

.gooptv-schedule-shell {
  margin-top: 8px;
}
.gooptv-schedule-heading {
  margin-bottom: 14px;
}
.gooptv-schedule-frame {
  min-height: 360px;
}
.gooptv-schedule-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
}
.gooptv-schedule-item {
  display: grid;
  grid-template-columns: 76px minmax(0,1fr);
  gap: 16px;
  align-items: start;
  padding: 16px;
  border: 1px solid rgba(247,209,61,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01)), rgba(0,0,0,.18);
  position: relative;
}
.gooptv-schedule-item::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(247,209,61,.28), rgba(247,209,61,.28)) left top / 34px 1px no-repeat,
    linear-gradient(rgba(247,209,61,.28), rgba(247,209,61,.28)) left top / 1px 34px no-repeat,
    linear-gradient(rgba(247,209,61,.12), rgba(247,209,61,.12)) right bottom / 34px 1px no-repeat,
    linear-gradient(rgba(247,209,61,.12), rgba(247,209,61,.12)) right bottom / 1px 34px no-repeat;
}
.gooptv-schedule-date {
  display: grid;
  place-items: center;
  min-height: 70px;
  border: 1px solid rgba(247,209,61,.2);
  background: rgba(0,0,0,.35);
  color: #fff2bd;
}
.gooptv-schedule-date strong {
  font-size: 1.7rem;
  line-height: 1;
}
.gooptv-schedule-date small {
  color: rgba(247,209,61,.72);
  font-weight: 1000;
  letter-spacing: .12em;
}
.gooptv-schedule-item h3 {
  margin: 0 0 6px !important;
  color: #f4ead0 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}
.gooptv-schedule-item p {
  margin: 0 0 8px;
  color: rgba(244,236,195,.72) !important;
}
.gooptv-schedule-item span {
  color: rgba(247,209,61,.75);
  font-size: .85rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.gooptv-schedule-empty {
  position: relative;
  z-index: 1;
  padding: 34px 18px;
  text-align: center;
  color: rgba(244,236,195,.72);
}
.gooptv-schedule-empty h3 {
  margin-bottom: 8px !important;
  color: #f4ead0 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
}

@media (max-width: 760px) {
  .gooptv-schedule-item {
    grid-template-columns: 1fr;
  }
  .gooptv-schedule-date {
    width: 92px;
  }
}

/* BUILD 26 — SumUp payment-link support */
.payment-info {
  border: 1px solid rgba(247,209,61,.22) !important;
  background:
    linear-gradient(rgba(247,209,61,.14), rgba(247,209,61,.14)) left top / 42px 1px no-repeat,
    linear-gradient(rgba(247,209,61,.14), rgba(247,209,61,.14)) left top / 1px 42px no-repeat,
    linear-gradient(180deg, rgba(247,209,61,.055), rgba(255,255,255,.018)),
    rgba(5,5,5,.58) !important;
  padding: 13px 14px;
  margin: 8px 0;
  color: rgba(244,236,195,.92);
}
.payment-info.compact {
  padding: 10px 12px;
  font-size: .92rem;
}
.payment-info strong {
  display:block;
  color: #fff2bf;
  margin-bottom: 4px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.payment-info p { margin: 0; }
.message .btn,
.message .btn-secondary {
  margin-left: 8px;
  vertical-align: middle;
}


/* BUILD 27 — one-time SumUp payment flow */
.payment-flow {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid rgba(247,209,61,.24);
  background: rgba(0,0,0,.26);
}
.payment-flow p { margin: 0; }
.payment-flow .row-actions { margin-top: 4px; }
.payment-confirm-panel {
  margin: 0 0 22px;
  padding: 20px 22px;
  border-left: 3px solid var(--fng-gold, #f7d13d);
  background: linear-gradient(90deg, rgba(247,209,61,.10), rgba(247,209,61,0));
}
.payment-confirm-panel h2 { margin: 0 0 8px !important; }
.payment-confirm-panel p { margin: 0; color: rgba(244,244,232,.82); }


/* ============================================================
   BUILD 28 — final pre-live polish: tactical nav icons + search
   ============================================================ */

/* Top-left brand title: match the corroded/tactical section headings. */
.brand-copy strong {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Bahnschrift Condensed", "DIN Condensed", "Arial Narrow", var(--display), sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: .055em !important;
  font-weight: 1000 !important;
  color: #f3ead0 !important;
  line-height: .94 !important;
  text-shadow: 0 0 18px rgba(247,209,61,.12), 0 1px 0 rgba(255,255,255,.08) !important;
}
.brand-copy small {
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: rgba(244,236,195,.62) !important;
}

/* Left menu icon treatment: remove emoji feel and make them feel like worn UI glyphs. */
.sidebar .nav-link,
.sidebar .nav-button {
  font-size: .98rem !important;
}
.sidebar .nav-link .nav-icon,
.sidebar .nav-button .nav-icon {
  position: relative !important;
  width: 27px !important;
  height: 27px !important;
  flex: 0 0 27px !important;
  display: inline-grid !important;
  place-items: center !important;
  color: #f7d13d !important;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Bahnschrift Condensed", "Arial Narrow", sans-serif !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  background:
    linear-gradient(135deg, rgba(247,209,61,.08), rgba(255,255,255,.015)),
    rgba(0,0,0,.22) !important;
  border: 1px solid rgba(247,209,61,.20) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.018) !important;
  overflow: hidden !important;
  text-align: center !important;
}
.sidebar .nav-link .nav-icon::before,
.sidebar .nav-button .nav-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(247,209,61,.44), rgba(247,209,61,.44)) left top / 9px 1px no-repeat,
    linear-gradient(rgba(247,209,61,.44), rgba(247,209,61,.44)) left top / 1px 9px no-repeat,
    linear-gradient(rgba(247,209,61,.22), rgba(247,209,61,.22)) right bottom / 9px 1px no-repeat,
    linear-gradient(rgba(247,209,61,.22), rgba(247,209,61,.22)) right bottom / 1px 9px no-repeat;
  opacity: .75;
}
.sidebar .nav-link .nav-icon::after,
.sidebar .nav-button .nav-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.10) 0 1px, transparent 1px 5px);
}
.sidebar .nav-link:hover .nav-icon,
.sidebar .nav-button:hover .nav-icon,
.sidebar .nav-link.active .nav-icon,
.sidebar .nav-button.active .nav-icon {
  color: #fff0a8 !important;
  border-color: rgba(247,209,61,.32) !important;
  background: rgba(247,209,61,.055) !important;
}
.sidebar .nav-link b,
.sidebar .nav-button b {
  font-family: "Bahnschrift Condensed", "Arial Narrow", var(--font), sans-serif !important;
  letter-spacing: .055em !important;
  text-transform: uppercase !important;
}

/* Functional Hub search. */
.sidebar-search {
  position: relative !important;
  overflow: visible !important;
  z-index: 20 !important;
  border-radius: 2px !important;
  border-color: rgba(247,209,61,.18) !important;
  background:
    linear-gradient(180deg, rgba(247,209,61,.045), rgba(255,255,255,.014)),
    rgba(0,0,0,.24) !important;
}
.sidebar-search:focus-within {
  border-color: rgba(247,209,61,.38) !important;
  box-shadow: 0 0 0 1px rgba(247,209,61,.10), 0 12px 30px rgba(0,0,0,.28) !important;
}
.sidebar-search span {
  color: rgba(247,209,61,.86) !important;
}
.sidebar-search input {
  font-size: .9rem !important;
  letter-spacing: .03em !important;
}
.hub-search-results {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  max-height: min(420px, calc(100vh - 210px));
  overflow: auto;
  padding: 8px;
  background:
    radial-gradient(circle at 18% 12%, rgba(247,209,61,.09), transparent 28%),
    linear-gradient(180deg, rgba(22,20,15,.98), rgba(7,7,6,.98));
  border: 1px solid rgba(247,209,61,.26);
  box-shadow: 0 24px 58px rgba(0,0,0,.62), inset 0 0 0 1px rgba(255,255,255,.018);
}
.hub-search-result {
  display: grid;
  gap: 2px;
  padding: 10px 9px;
  color: #f3ead0 !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(247,209,61,.08);
}
.hub-search-result:last-child { border-bottom: 0; }
.hub-search-result:hover,
.hub-search-result:focus-visible {
  background: rgba(247,209,61,.07);
  outline: 1px solid rgba(247,209,61,.18);
}
.hub-search-result span {
  width: auto !important;
  color: rgba(247,209,61,.82) !important;
  font-size: .66rem !important;
  font-weight: 1000 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  text-align: left !important;
}
.hub-search-result strong {
  font-size: .94rem;
  letter-spacing: .03em;
}
.hub-search-result small,
.hub-search-empty {
  color: rgba(244,236,195,.58);
  font-size: .78rem;
}
.hub-search-empty {
  padding: 12px 9px;
}

@media (max-width: 860px) {
  .hub-search-results {
    position: fixed;
    left: 18px;
    right: 18px;
    top: 112px;
  }
}


/* ============================================================
   BUILD 29 — minor pre-live readability polish
   ============================================================ */

/* Make the top-left Community Hub brand readable while keeping the tactical title vibe. */
.brand-copy strong {
  font-size: 1.22rem !important;
  line-height: .98 !important;
  letter-spacing: .045em !important;
  max-width: 158px !important;
  overflow: visible !important;
}
.brand-copy {
  min-width: 0 !important;
  overflow: visible !important;
}
.brand {
  gap: 13px !important;
}

/* Give merch collection labels/emblems a little more breathing room so FNG Originals is not clipped. */
.product-card .card-body .eyebrow {
  display: block !important;
  padding-left: 2px !important;
  margin-left: 0 !important;
  overflow: visible !important;
  white-space: normal !important;
  line-height: 1.25 !important;
}
.product-card .card-body {
  padding-left: 19px !important;
  padding-right: 18px !important;
}
.product-card .media .collection-emblem,
.product-gallery-main .collection-emblem {
  max-width: calc(100% - 24px) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  left: auto !important;
  right: 12px !important;
  font-size: .60rem !important;
  padding-left: 9px !important;
  padding-right: 9px !important;
}

@media (max-width: 920px) {
  .brand-copy strong {
    font-size: 1.12rem !important;
    max-width: 142px !important;
  }
}


/* ============================================================
   BUILD 30 — final brand readability + merch label clipping fix
   ============================================================ */

/* Top-left Community Hub: remove effects and use clean readable text. */
.brand-copy strong {
  font-family: var(--font), Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-size: 1.18rem !important;
  line-height: 1.08 !important;
  letter-spacing: .01em !important;
  font-weight: 950 !important;
  text-transform: none !important;
  color: #f7f0d7 !important;
  text-shadow: none !important;
  filter: none !important;
  max-width: 172px !important;
  white-space: normal !important;
  overflow: visible !important;
}
.brand-copy small {
  text-shadow: none !important;
  filter: none !important;
}

/* Merch collection label/card body: push text clear of left edge and prevent clipping. */
.product-card .card-body {
  padding-left: 24px !important;
  padding-right: 20px !important;
  overflow: visible !important;
}
.product-card .card-body .eyebrow {
  display: block !important;
  margin-left: 0 !important;
  padding-left: 6px !important;
  text-indent: 0 !important;
  overflow: visible !important;
  white-space: normal !important;
  word-break: normal !important;
  max-width: 100% !important;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Product media emblems should stay comfortably inside the top-right, not clipped by frame rules. */
.product-card .media .collection-emblem,
.product-gallery-main .collection-emblem {
  position: absolute !important;
  top: 14px !important;
  left: auto !important;
  right: 18px !important;
  max-width: calc(100% - 48px) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  z-index: 4 !important;
  transform: none !important;
}

@media (max-width: 920px) {
  .brand-copy strong {
    font-size: 1.08rem !important;
    max-width: 156px !important;
  }
}


/* ============================================================
   LIVE RELEASE BUILD 02 — My Orders progress timeline
   Restores the clear member-facing order stages without adding repeat payment buttons.
   ============================================================ */
.order-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.order-card-head h2 { margin-bottom: 6px !important; }
.order-progress {
  position: relative;
  margin: 18px 0 16px;
  padding: 18px;
  border: 1px solid rgba(247,209,61,.16);
  background: linear-gradient(180deg, rgba(247,209,61,.035), rgba(255,255,255,.012));
}
.order-progress::before,
.order-progress::after {
  content: "";
  position: absolute;
  width: 42px;
  height: 42px;
  pointer-events: none;
}
.order-progress::before {
  left: 0;
  top: 0;
  border-left: 1px solid rgba(247,209,61,.42);
  border-top: 1px solid rgba(247,209,61,.42);
}
.order-progress::after {
  right: 0;
  bottom: 0;
  border-right: 1px solid rgba(247,209,61,.24);
  border-bottom: 1px solid rgba(247,209,61,.24);
}
.order-progress-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.order-progress-title strong {
  color: #fff3bd;
  text-transform: uppercase;
  letter-spacing: .055em;
}
.order-progress-title span {
  color: rgba(244,236,195,.70);
  font-size: .92rem;
}
.order-progress-rail {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  position: relative;
}
.order-progress-rail::before {
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  top: 17px;
  height: 1px;
  background: linear-gradient(90deg, rgba(247,209,61,.36), rgba(247,209,61,.08));
  z-index: 0;
}
.order-progress-step {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  align-content: start;
  text-align: center;
  gap: 7px;
  min-width: 0;
}
.order-progress-step span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 0;
  border: 1px solid rgba(247,209,61,.18);
  background: #070706;
  color: rgba(244,236,195,.48);
  font-weight: 1000;
  box-shadow: 0 8px 18px rgba(0,0,0,.28);
}
.order-progress-step strong {
  color: rgba(244,236,195,.66);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .78rem;
  line-height: 1.2;
}
.order-progress-step small {
  color: rgba(244,236,195,.46);
  font-size: .76rem;
  line-height: 1.35;
}
.order-progress-step.done span,
.order-progress-step.active span {
  background: linear-gradient(135deg, #f7d13d, #ffbc32) !important;
  color: #101010 !important;
  border-color: rgba(255,255,255,.24) !important;
}
.order-progress-step.active strong,
.order-progress-step.done strong { color: #fff1ad; }
.order-progress-step.active small { color: rgba(255,244,200,.78); }
.order-progress-step.done small { color: rgba(255,244,200,.62); }
.order-progress-cancelled {
  border-color: rgba(255,93,93,.28);
  background: rgba(255,93,93,.07);
}
.order-progress-cancelled .order-progress-title { margin-bottom: 0; }
.order-progress-cancelled .order-progress-title strong { color: #ffaaaa; }
@media (max-width: 760px) {
  .order-card-head,
  .order-progress-title { display: grid; }
  .order-progress-rail { grid-template-columns: 1fr; }
  .order-progress-rail::before { left: 17px; right: auto; top: 14px; bottom: 14px; width: 1px; height: auto; background: linear-gradient(180deg, rgba(247,209,61,.36), rgba(247,209,61,.08)); }
  .order-progress-step { grid-template-columns: 34px 1fr; justify-items: start; text-align: left; align-items: center; }
  .order-progress-step small { grid-column: 2; }
}


/* LIVE BUILD 03 — merch order tracking admin row */
.tracking-admin-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid rgba(247,209,61,.16);
  background: rgba(255,255,255,.025);
}
.tracking-admin-row label { margin: 0; }
@media (max-width: 720px) {
  .tracking-admin-row { grid-template-columns: 1fr; }
}


/* LIVE BUILD 04 — permanent cancelled merch order cleanup */
.permanent-delete-order {
  border-color: rgba(255,70,70,.5) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 0 18px rgba(255,70,70,.10) !important;
}


/* Live Build 05 — retrospective ticket import */
#ticketImportForm textarea { min-height: 150px; }
#ticketSalesStatus option { background:#090908; color:#f5f0dc; }


/* ============================================================
   LIVE RELEASE BUILD 06 — Mobile optimisation pass
   Desktop styling is intentionally left alone; these rules only
   apply to tablet/mobile portrait and landscape breakpoints.
   ============================================================ */

@media (max-width: 1040px), (hover: none) and (pointer: coarse) {
  html,
  body {
    min-height: 100dvh;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100%;
    touch-action: manipulation;
  }

  body.mobile-nav-open {
    overflow: hidden !important;
  }

  body.mobile-nav-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1390;
    background: rgba(0,0,0,.62);
    backdrop-filter: blur(5px);
    pointer-events: auto;
  }

  .site-shell.gameverse-shell {
    display: block !important;
    min-height: 100dvh !important;
    width: 100% !important;
    overflow: visible !important;
  }

  .main {
    width: 100% !important;
    min-height: 100dvh !important;
    padding: calc(14px + env(safe-area-inset-top, 0px)) 14px calc(92px + env(safe-area-inset-bottom, 0px)) !important;
    overflow: visible !important;
  }

  .page-stage,
  #page-content,
  .game-dashboard {
    width: 100% !important;
    min-width: 0 !important;
  }

  .floating-menu,
  #mobileMenuBtn.mobile-menu {
    position: fixed !important;
    left: calc(12px + env(safe-area-inset-left, 0px)) !important;
    top: calc(12px + env(safe-area-inset-top, 0px)) !important;
    z-index: 1505 !important;
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(247,209,61,.34) !important;
    background: rgba(7,7,6,.92) !important;
    color: #fff3bd !important;
    box-shadow: 0 12px 34px rgba(0,0,0,.45) !important;
  }

  .sidebar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: min(86vw, 340px) !important;
    max-width: calc(100vw - 48px) !important;
    height: 100dvh !important;
    z-index: 1500 !important;
    transform: translateX(-106%) !important;
    transition: transform .22s ease !important;
    padding: calc(18px + env(safe-area-inset-top, 0px)) 16px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    box-shadow: 26px 0 80px rgba(0,0,0,.70) !important;
  }

  .sidebar.open {
    transform: translateX(0) !important;
  }

  .sidebar .brand {
    padding-left: 58px !important;
    min-height: 52px !important;
  }

  .sidebar-search input,
  input,
  select,
  textarea,
  button,
  .btn,
  .btn-secondary,
  .btn-danger,
  .btn-ghost,
  .nav-link,
  .quick-match,
  .mobile-dock a {
    min-height: 44px;
  }

  .nav-link,
  .nav-button {
    padding: 12px 10px !important;
  }

  .mobile-dock {
    position: fixed !important;
    left: calc(8px + env(safe-area-inset-left, 0px)) !important;
    right: calc(8px + env(safe-area-inset-right, 0px)) !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 1300 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0,1fr)) !important;
    gap: 4px !important;
    padding: 8px !important;
    border-radius: 0 !important;
    background: rgba(5,5,4,.94) !important;
    border: 1px solid rgba(247,209,61,.20) !important;
    box-shadow: 0 18px 46px rgba(0,0,0,.50) !important;
    backdrop-filter: blur(14px) !important;
  }

  .mobile-dock a {
    font-size: .68rem !important;
    line-height: 1.1 !important;
    padding: 5px 2px !important;
    color: rgba(244,236,195,.72) !important;
    text-decoration: none !important;
  }

  .mobile-dock a span {
    font-size: 1.08rem !important;
    margin-bottom: 2px !important;
    color: rgba(247,209,61,.82) !important;
  }

  .mobile-dock a.active {
    color: #fff3bd !important;
    background: rgba(247,209,61,.08) !important;
    outline: 1px solid rgba(247,209,61,.14) !important;
  }

  .right-rail {
    display: none !important;
  }

  .hub-search-results {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    top: calc(76px + env(safe-area-inset-top, 0px)) !important;
    max-height: min(62dvh, 480px) !important;
    overflow-y: auto !important;
    z-index: 1600 !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .collection-strip,
  .product-gallery-thumbs,
  .admin-tabs,
  .admin-subnav,
  .tab-row,
  .row-actions {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x proximity;
    padding-bottom: 8px !important;
  }

  .collection-card,
  .admin-tab,
  .admin-subnav a,
  .tab-btn,
  .row-actions > * {
    scroll-snap-align: start;
  }
}

@media (max-width: 920px) {
  h1 { font-size: clamp(2.25rem, 12vw, 4.2rem) !important; }
  h2 { font-size: clamp(1.35rem, 7vw, 2.4rem) !important; }

  .showcase-card {
    min-height: 520px !important;
    padding: 72px 18px 18px !important;
    background-position: center !important;
  }

  .showcase-kicker,
  .showcase-actions {
    align-items: flex-start !important;
    gap: 12px !important;
  }

  .showcase-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .carousel-controls {
    justify-self: start !important;
  }

  .grid.two,
  .grid.three,
  .grid.four,
  .stat-grid,
  .homepage-events-row,
  .split-home-row,
  .form-grid.two,
  .form-grid.three,
  .ticket-credentials,
  .admin-sections,
  .product-dialog-grid {
    grid-template-columns: 1fr !important;
  }

  .wire-frame {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .product-card .media {
    height: min(64vw, 310px) !important;
  }

  .product-card .card-body {
    padding-left: 18px !important;
    padding-right: 16px !important;
  }

  .event-card,
  .product-card,
  .marketplace-card,
  .member-card,
  .row-card,
  .panel,
  .card {
    overflow-wrap: anywhere;
  }

  .table-wrap,
  .simple-table {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

@media (max-width: 920px), (hover: none) and (pointer: coarse) {
  dialog,
  .product-dialog,
  .compact-dialog,
  .event-detail-dialog,
  .profile-popup-dialog,
  .profile-dialog {
    position: fixed !important;
    inset: calc(10px + env(safe-area-inset-top, 0px)) calc(8px + env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) calc(8px + env(safe-area-inset-left, 0px)) !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
  }

  dialog::backdrop,
  .product-dialog::backdrop,
  .event-detail-dialog::backdrop,
  .profile-popup-dialog::backdrop {
    background: rgba(0,0,0,.78) !important;
    backdrop-filter: blur(8px) !important;
  }

  .product-dialog-grid {
    min-height: 0 !important;
    display: block !important;
  }

  .product-gallery {
    display: block !important;
    min-height: 0 !important;
  }

  .product-gallery-main {
    min-height: 0 !important;
    height: clamp(210px, 44dvh, 360px) !important;
  }

  .product-gallery-main img {
    max-height: 100% !important;
    object-fit: contain !important;
    padding: 12px !important;
  }

  .product-gallery-thumbs {
    min-height: 72px !important;
  }

  .product-dialog-body,
  .compact-dialog .product-dialog-body,
  .event-detail-body,
  .profile-popup-card,
  .profile-dialog .product-dialog-body {
    padding: 18px 14px calc(22px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .dialog-close,
  [data-product-close] {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    justify-self: end !important;
    margin-left: auto !important;
    min-height: 44px !important;
    background: rgba(7,7,6,.96) !important;
  }

  .product-dialog-body form,
  .form-grid {
    min-width: 0 !important;
  }

  .row-actions {
    display: flex !important;
    flex-wrap: nowrap !important;
  }

  .row-actions .btn,
  .row-actions .btn-secondary,
  .row-actions .btn-danger,
  .row-actions button,
  .row-actions a {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 760px) {
  .main { padding-left: 10px !important; padding-right: 10px !important; }
  .home-welcome-copy { padding-left: 4px !important; padding-right: 4px !important; }
  .wire-head { padding-left: 12px !important; }
  .wire-head h2::before { left: -10px !important; }
  .panel,
  .rail-panel,
  .admin-panel,
  .slim-panel,
  .profile-card,
  .row-card,
  .card-body {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .btn,
  .btn-secondary,
  .btn-danger,
  .btn-ghost {
    width: 100%;
    text-align: center;
  }

  .row-actions .btn,
  .row-actions .btn-secondary,
  .row-actions .btn-danger,
  .row-actions .btn-ghost {
    width: auto;
  }

  .collection-card {
    min-width: 76vw !important;
  }

  .ticket-card .void-stamp { font-size: 1.3rem !important; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .main {
    padding-top: 8px !important;
    padding-bottom: 72px !important;
  }

  .showcase-card {
    min-height: 380px !important;
    padding-top: 52px !important;
  }

  .mobile-dock {
    left: auto !important;
    width: min(420px, calc(100vw - 16px)) !important;
  }

  .product-gallery-main {
    height: 220px !important;
  }

  dialog,
  .product-dialog,
  .compact-dialog,
  .event-detail-dialog,
  .profile-popup-dialog,
  .profile-dialog {
    inset: 6px !important;
  }
}


/* ============================================================
   LIVE BUILD 07 — mobile menu fix + premium paper tickets
   ============================================================ */

/* Mobile menu: keep GoopNet beneath the nav instead of over it. */
@media (max-width: 1040px) {
  .sidebar {
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    max-height: 100dvh !important;
    padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .sidebar .nav {
    flex: 0 0 auto !important;
    min-height: auto !important;
    padding-bottom: 14px !important;
  }
  .sidebar-status {
    position: static !important;
    align-self: stretch !important;
    margin-top: auto !important;
    margin-bottom: 0 !important;
    flex: 0 0 auto !important;
  }
}

@media (max-height: 640px) and (max-width: 1040px) {
  .sidebar {
    padding-top: 14px !important;
    gap: 10px !important;
  }
  .brand { margin-bottom: 4px !important; }
  .nav-link, .nav-button { padding-top: 9px !important; padding-bottom: 9px !important; }
  .sidebar-status { margin-top: 10px !important; }
}

/* My Tickets: paper-style decorated ticket cards. */
.paper-ticket.ticket-card {
  --ticket-paper: #efe2bf;
  --ticket-paper-2: #d7c08a;
  --ticket-ink: #181206;
  --ticket-gold: #9d7722;
  color: var(--ticket-ink) !important;
  border: 1px solid rgba(255,232,152,.42) !important;
  border-radius: 4px !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(220px,.38fr) !important;
  min-height: 205px !important;
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.38), transparent 16%),
    radial-gradient(circle at 78% 78%, rgba(109,73,15,.14), transparent 22%),
    repeating-linear-gradient(0deg, rgba(54,38,15,.035) 0 1px, transparent 1px 5px),
    linear-gradient(135deg, var(--ticket-paper) 0%, #f9edcd 42%, var(--ticket-paper-2) 100%) !important;
  box-shadow: 0 24px 56px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.44) !important;
}

.paper-ticket.ticket-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  pointer-events: none;
  border: 2px solid rgba(104,76,19,.52);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.24);
  z-index: 1;
}

.paper-ticket.ticket-card::after {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  right: min(38%, 252px);
  width: 1px;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(48,34,13,.72) 0 8px, transparent 8px 16px);
  opacity: .8;
  z-index: 2;
}

.paper-ticket .ticket-main,
.paper-ticket .ticket-stub,
.paper-ticket .ticket-notes {
  position: relative;
  z-index: 3;
}

.paper-ticket .ticket-main {
  padding: 26px 30px 26px !important;
  display: grid;
  align-content: center;
  gap: 8px;
}

.paper-ticket .ticket-stub {
  padding: 26px 22px !important;
  display: grid;
  align-content: center;
  gap: 14px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,255,255,.28), transparent 32%),
    linear-gradient(180deg, rgba(96,67,18,.10), rgba(96,67,18,.22));
}

.paper-ticket .ticket-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 2px;
}

.paper-ticket .ticket-admit {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 5px 10px;
  border: 1px solid rgba(48,34,13,.55);
  color: #241808;
  background: rgba(255,255,255,.26);
  font-weight: 1000;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: .72rem;
}

.paper-ticket .ticket-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(114,83,22,.70);
  color: #3d2809;
  padding: 6px 10px;
  font-size: .72rem;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .12em;
  transform: rotate(2deg);
  background: rgba(255,255,255,.18);
}

.paper-ticket .eyebrow {
  color: #6d4e12 !important;
  letter-spacing: .18em !important;
  text-shadow: none !important;
}

.paper-ticket h2 {
  color: #1a1205 !important;
  text-transform: uppercase !important;
  letter-spacing: .015em !important;
  font-size: clamp(1.75rem, 3vw, 2.55rem) !important;
  line-height: .95 !important;
  margin: 0 !important;
}

.paper-ticket .ticket-validity,
.paper-ticket .ticket-notes {
  color: rgba(34,23,7,.74) !important;
  margin: 0 !important;
  line-height: 1.45 !important;
  font-weight: 750;
}

.paper-ticket .ticket-notes {
  grid-column: 1 / -1;
  padding: 0 30px 24px !important;
}

.paper-ticket .credential {
  border: 1px solid rgba(52,35,10,.42) !important;
  border-radius: 3px !important;
  background: rgba(255,255,255,.24) !important;
  color: #1b1205 !important;
  padding: 12px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}

.paper-ticket .credential small {
  color: rgba(39,26,6,.70) !important;
  font-weight: 1000 !important;
  letter-spacing: .12em !important;
}

.paper-ticket .credential strong {
  color: #100b03 !important;
  font-size: clamp(.95rem, 1.1vw, 1.15rem) !important;
  word-break: break-word;
}

.paper-ticket.voided,
.paper-ticket.cancelled {
  filter: grayscale(.18);
  opacity: .92;
}
.paper-ticket.voided::before,
.paper-ticket.cancelled::before {
  border-color: rgba(140,26,26,.50) !important;
  background: transparent !important;
}

@media (max-width: 760px) {
  .paper-ticket.ticket-card {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }
  .paper-ticket.ticket-card::after {
    top: auto;
    left: 14px;
    right: 14px;
    bottom: 128px;
    width: auto;
    height: 1px;
    background: repeating-linear-gradient(90deg, rgba(48,34,13,.72) 0 8px, transparent 8px 16px);
  }
  .paper-ticket .ticket-main { padding: 24px 24px 18px !important; }
  .paper-ticket .ticket-stub { padding: 20px 24px 24px !important; }
  .paper-ticket .ticket-label-row { align-items: flex-start; flex-direction: column; }
}


/* LIVE BUILD 08 — enhanced ticket paper detail and perforated edges. */
.paper-ticket.ticket-card {
  overflow: visible !important;
  margin-left: 14px !important;
  margin-right: 14px !important;
}

.paper-ticket.ticket-card .ticket-main,
.paper-ticket.ticket-card .ticket-stub {
  overflow: hidden;
}

.paper-ticket.ticket-card::before {
  inset: 12px 18px !important;
}

/* The existing ::after remains as the centre perforation. These two add ripped side edges. */
.paper-ticket .ticket-main::before,
.paper-ticket .ticket-stub::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 18px;
  pointer-events: none;
  z-index: 5;
  background:
    radial-gradient(circle at 50% 8px, rgba(0,0,0,.46) 0 4px, transparent 4.5px) 0 0 / 18px 24px repeat-y,
    linear-gradient(180deg, rgba(91,64,17,.22), rgba(91,64,17,.08));
  opacity: .9;
}

.paper-ticket .ticket-main::before {
  left: -9px;
}

.paper-ticket .ticket-stub::after {
  right: -9px;
}

.paper-ticket .ticket-event-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 4px 0 3px;
}

.paper-ticket .ticket-event-meta span {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border-left: 3px solid rgba(102,73,16,.52);
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 0 0 1px rgba(84,58,13,.13);
}

.paper-ticket .ticket-event-meta small {
  color: rgba(40,27,6,.62);
  font-size: .66rem;
  font-weight: 1000;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.paper-ticket .ticket-event-meta strong {
  color: #1c1305;
  font-size: .86rem;
  line-height: 1.28;
  font-weight: 950;
}

@media (max-width: 760px) {
  .paper-ticket.ticket-card {
    margin-left: 8px !important;
    margin-right: 8px !important;
  }
  .paper-ticket .ticket-main::before,
  .paper-ticket .ticket-stub::after {
    top: auto;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 18px;
    background:
      radial-gradient(circle at 8px 50%, rgba(0,0,0,.42) 0 4px, transparent 4.5px) 0 0 / 24px 18px repeat-x,
      linear-gradient(90deg, rgba(91,64,17,.18), rgba(91,64,17,.08));
  }
  .paper-ticket .ticket-main::before { top: -9px; }
  .paper-ticket .ticket-stub::after { bottom: -9px; }
  .paper-ticket .ticket-event-meta {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   LIVE BUILD 09 — richer homepage ticketed event cards
   ============================================================ */
.home-ticket-list {
  gap: 16px !important;
}

.home-ticket-card {
  position: relative;
  z-index: 1;
  min-height: 255px;
  overflow: hidden;
  border: 1px solid rgba(247,209,61,.28);
  background: #090909;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035), 0 18px 38px rgba(0,0,0,.26);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}

.home-ticket-card-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(6,6,5,.96) 0%, rgba(6,6,5,.80) 44%, rgba(6,6,5,.40) 100%),
    var(--event-bg);
  background-size: cover;
  background-position: center;
  filter: saturate(.72) contrast(1.05);
  transform: scale(1.02);
}

.home-ticket-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(rgba(247,209,61,.35), rgba(247,209,61,.35)) left top / 70px 1px no-repeat,
    linear-gradient(rgba(247,209,61,.35), rgba(247,209,61,.35)) left top / 1px 70px no-repeat,
    linear-gradient(rgba(247,209,61,.18), rgba(247,209,61,.18)) right bottom / 70px 1px no-repeat,
    linear-gradient(rgba(247,209,61,.18), rgba(247,209,61,.18)) right bottom / 1px 70px no-repeat,
    repeating-linear-gradient(90deg, rgba(255,255,255,.026) 0 1px, transparent 1px 18px);
}

.home-ticket-card::after {
  content: "TICKET SALE";
  position: absolute;
  right: 16px;
  bottom: 13px;
  z-index: 1;
  color: rgba(247,209,61,.16);
  font-weight: 1000;
  letter-spacing: .22em;
  font-size: .72rem;
  pointer-events: none;
}

.home-ticket-card-body {
  position: relative;
  z-index: 2;
  min-height: 255px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.home-ticket-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.home-ticket-card h3 {
  margin: 2px 0 0 !important;
  text-transform: uppercase !important;
  letter-spacing: .045em !important;
  color: #fff6d4 !important;
  font-size: 1.22rem !important;
}

.home-ticket-card p {
  margin: 0 !important;
  max-width: 66ch;
  color: rgba(244,236,210,.82) !important;
  line-height: 1.55;
}

.home-ticket-card .ticket-tag {
  flex: 0 0 auto;
  margin: 0 !important;
  max-width: 210px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-ticket-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
  margin-top: auto;
}

.home-ticket-meta span {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border-left: 2px solid rgba(247,209,61,.38);
  background: linear-gradient(90deg, rgba(247,209,61,.08), rgba(247,209,61,0));
  color: rgba(255,255,255,.88);
  font-weight: 800;
}

.home-ticket-meta b {
  color: rgba(247,209,61,.92);
  font-size: .68rem;
  letter-spacing: .12em;
}

.home-ticket-action {
  align-self: flex-start;
  margin-top: 2px;
}

.home-ticket-card:hover .home-ticket-card-bg {
  filter: saturate(.86) contrast(1.1) brightness(1.04);
}

@media (max-width: 760px) {
  .home-ticket-card { min-height: 0; }
  .home-ticket-card-body { min-height: 0; padding: 18px; }
  .home-ticket-card-top { display: grid; }
  .home-ticket-card .ticket-tag { max-width: 100%; justify-self: start; }
  .home-ticket-meta { grid-template-columns: 1fr; }
  .home-ticket-action { width: 100%; }
}


/* LIVE BUILD 12 — public ticket holder badges on profile popups. */
.profile-popup-tickets {
  margin-top: 16px;
}
.profile-popup-tickets h3 {
  margin: 0 0 10px !important;
  color: #fff4bf !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-size: .92rem !important;
}
.profile-ticket-badge-list {
  display: grid;
  gap: 9px;
}
.profile-ticket-badge {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0,1fr);
  grid-template-areas: "icon title" "icon sub";
  align-items: center;
  gap: 0 10px;
  padding: 11px 12px;
  border: 1px solid rgba(247,209,61,.34);
  background:
    linear-gradient(90deg, rgba(247,209,61,.16), rgba(247,209,61,.035)),
    rgba(10,9,7,.68);
  color: #fff7d3;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 12px 30px rgba(0,0,0,.22);
  overflow: hidden;
}
.profile-ticket-badge::before,
.profile-ticket-badge::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #070706;
  border: 1px solid rgba(247,209,61,.22);
  transform: translateY(-50%);
}
.profile-ticket-badge::before { left: -9px; }
.profile-ticket-badge::after { right: -9px; }
.profile-ticket-badge i {
  grid-area: icon;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(247,209,61,.42);
  background: rgba(247,209,61,.12);
  font-style: normal;
}
.profile-ticket-badge strong {
  grid-area: title;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 1000;
  color: #fff4bf;
}
.profile-ticket-badge small {
  grid-area: sub;
  color: rgba(244,236,205,.72);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .72rem;
}
@media (max-width: 640px) {
  .profile-ticket-badge {
    grid-template-columns: 30px minmax(0,1fr);
    padding: 10px;
  }
}


/* LIVE BUILD 13 — make public profile ticket badges feel more like real tickets. */
.profile-ticket-badge-list {
  gap: 12px !important;
}
.profile-ticket-badge {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 70px !important;
  min-height: 82px;
  padding: 0 !important;
  border: 1px solid rgba(109,82,14,.42) !important;
  color: #1b1406 !important;
  background:
    radial-gradient(circle at 9px 9px, rgba(0,0,0,.10) 0 1px, transparent 1.8px) 0 0 / 18px 18px,
    linear-gradient(90deg, rgba(255,255,255,.48), rgba(255,255,255,0) 34%),
    linear-gradient(135deg, #fff2bd 0%, #e7c764 48%, #b98a1e 100%) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.40),
    inset 0 -18px 34px rgba(92,57,7,.12),
    0 14px 30px rgba(0,0,0,.24) !important;
  overflow: visible !important;
  clip-path: polygon(
    0 0, 100% 0,
    100% 10%, 97.5% 14%, 100% 18%,
    100% 30%, 97.5% 34%, 100% 38%,
    100% 50%, 97.5% 54%, 100% 58%,
    100% 70%, 97.5% 74%, 100% 78%,
    100% 100%, 0 100%,
    0 78%, 2.5% 74%, 0 70%,
    0 58%, 2.5% 54%, 0 50%,
    0 38%, 2.5% 34%, 0 30%,
    0 18%, 2.5% 14%, 0 10%
  );
}
.profile-ticket-badge::before,
.profile-ticket-badge::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #070706 !important;
  border: 1px solid rgba(247,209,61,.20) !important;
  transform: translateY(-50%) !important;
  z-index: 4;
}
.profile-ticket-badge::before { left: -10px !important; }
.profile-ticket-badge::after { right: -10px !important; }
.profile-ticket-main {
  min-width: 0;
  padding: 14px 14px 13px 18px;
  display: grid;
  align-content: center;
  gap: 3px;
  position: relative;
}
.profile-ticket-main::after {
  content: "";
  position: absolute;
  right: 0;
  top: 10px;
  bottom: 10px;
  border-right: 2px dashed rgba(72,48,10,.34);
}
.profile-ticket-badge .ticket-micro-label {
  width: max-content;
  padding: 3px 7px 2px;
  border: 1px solid rgba(72,48,10,.34);
  background: rgba(255,255,255,.28);
  color: #3b2a0a;
  font-size: .58rem;
  line-height: 1;
  font-weight: 1000;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.profile-ticket-badge strong {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #1c1506 !important;
  font-size: .96rem;
  font-weight: 1000 !important;
  letter-spacing: .015em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255,255,255,.32);
}
.profile-ticket-badge small {
  color: rgba(38,27,6,.72) !important;
  font-size: .68rem !important;
  font-weight: 1000 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
}
.profile-ticket-stub {
  position: relative;
  display: grid;
  place-items: center;
  gap: 3px;
  padding: 10px 8px;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(255,255,255,.13));
}
.profile-ticket-stub span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-weight: 1000;
  letter-spacing: .22em;
  color: rgba(28,21,6,.78);
  font-size: .70rem;
}
.profile-ticket-stub i {
  display: grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  border: 1px solid rgba(28,21,6,.28) !important;
  background: rgba(255,255,255,.22) !important;
  color: #1b1406 !important;
  font-style: normal !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
@media (max-width: 640px) {
  .profile-ticket-badge {
    grid-template-columns: minmax(0,1fr) 58px !important;
    min-height: 76px;
  }
  .profile-ticket-main { padding: 12px 12px 11px 15px; }
  .profile-ticket-badge strong { font-size: .88rem; }
}


/* LIVE BUILD 14 — fix profile ticket badge text overlap. */
.profile-ticket-badge {
  grid-template-columns: minmax(0,1fr) 72px !important;
  align-items: stretch !important;
}
.profile-ticket-main {
  display: grid !important;
  grid-template-columns: 96px minmax(0,1fr) !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px 12px 22px !important;
  min-width: 0 !important;
}
.profile-ticket-badge .ticket-micro-label {
  position: static !important;
  align-self: center !important;
  justify-self: start !important;
  margin: 0 !important;
  width: auto !important;
  max-width: 90px !important;
  white-space: nowrap !important;
  transform: none !important;
}
.profile-ticket-copy {
  min-width: 0 !important;
  display: grid !important;
  gap: 4px !important;
  align-content: center !important;
  justify-items: start !important;
  text-align: left !important;
  position: static !important;
  transform: none !important;
}
.profile-ticket-copy strong,
.profile-ticket-badge strong {
  position: static !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  text-align: left !important;
  line-height: 1.08 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  letter-spacing: .035em !important;
}
.profile-ticket-copy small,
.profile-ticket-badge small {
  position: static !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  text-align: left !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
@media (max-width: 640px) {
  .profile-ticket-badge { grid-template-columns: minmax(0,1fr) 56px !important; }
  .profile-ticket-main {
    grid-template-columns: 78px minmax(0,1fr) !important;
    gap: 8px !important;
    padding: 10px 10px 10px 16px !important;
  }
  .profile-ticket-badge .ticket-micro-label {
    max-width: 76px !important;
    font-size: .52rem !important;
    letter-spacing: .11em !important;
  }
  .profile-ticket-copy strong { font-size: .82rem !important; }
  .profile-ticket-copy small { font-size: .58rem !important; }
}


/* BUILD 15 — bug fixes, transmissions and admin ticket management */
.home-centre-row{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);
  gap:22px;
  align-items:start;
}
.home-merch-carousel{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(240px, 31%);
  gap:16px;
  overflow-x:auto;
  padding:2px 2px 12px;
  scroll-snap-type:x proximity;
  position:relative;
  z-index:1;
}
.home-merch-carousel .product-card{scroll-snap-align:start; min-width:0;}
.transmission-list{display:grid;gap:12px;position:relative;z-index:1;}
.transmission-card{
  border:1px solid rgba(247,209,61,.18);
  background:linear-gradient(180deg,rgba(247,209,61,.06),rgba(0,0,0,.22));
  padding:14px;
  border-radius:4px;
  position:relative;
  overflow:hidden;
}
.transmission-card:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 12px);opacity:.28;pointer-events:none;}
.transmission-card > *{position:relative;z-index:1;}
.transmission-card h3{margin:4px 0 8px!important;text-transform:uppercase!important;letter-spacing:.04em!important;}
.transmission-card p{margin:0 0 10px;color:rgba(244,236,205,.84);}
.transmission-card small{color:rgba(247,209,61,.72);font-weight:800;text-transform:uppercase;letter-spacing:.04em;}
.mobile-notice-dialog{width:min(520px,calc(100vw - 26px));border:1px solid rgba(247,209,61,.28);background:#0b0a08;color:var(--text);}
.issued-ticket-row{border-color:rgba(247,209,61,.18)!important;}
@media(max-width:980px){
  .home-centre-row{grid-template-columns:1fr;}
  .home-merch-carousel{grid-auto-columns:minmax(220px,78%);}
}
@media(max-width:640px){
  .home-merch-carousel{grid-auto-columns:minmax(210px,86%);}
  .mobile-notice-dialog .product-dialog-body{padding:22px!important;}
}


/* ============================================================
   LIVE BUILD 16 — Transmissions read-more and admin-ticket data polish
   ============================================================ */
.transmission-read-more {
  display: inline;
  border: 0;
  padding: 0;
  margin-left: 4px;
  background: transparent;
  color: var(--fng-gold, #f7d13d);
  font: inherit;
  font-weight: 1000;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.transmission-read-more:hover {
  color: #fff2b0;
}
.transmission-dialog .product-dialog-body {
  max-height: min(78vh, 720px);
  overflow: auto;
}
.transmission-dialog-message {
  color: rgba(244,244,232,.88);
  line-height: 1.72;
  font-size: 1rem;
  white-space: normal;
}
.transmission-dialog-message br {
  line-height: 2;
}
@media (max-width: 760px) {
  .transmission-dialog .product-dialog-body {
    max-height: 82dvh;
  }
}


/* BUILD 17 — transmissions/admin ticket cleanup */
.transmissions-focus .wire-head{justify-content:flex-start!important;}
.ticket-control-panel{overflow:visible!important;}
.ticket-admin-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin:4px 0 18px;}
.ticket-admin-stat{border:1px solid rgba(247,209,61,.18);background:rgba(255,255,255,.025);padding:12px 13px;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));}
.ticket-admin-stat strong{display:block;color:#fff6c8;font-size:.86rem;text-transform:uppercase;letter-spacing:.045em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ticket-admin-stat span{display:block;color:rgba(244,236,195,.72);font-size:.82rem;margin-top:4px;}
.ticket-control-tools{display:grid;grid-template-columns:minmax(220px,1fr) minmax(180px,.65fr) minmax(160px,.55fr);gap:12px;align-items:end;margin:0 0 14px;}
.ticket-control-table{border:1px solid rgba(247,209,61,.16);background:rgba(0,0,0,.16);max-height:520px;overflow:auto;}
.ticket-control-row{display:grid;grid-template-columns:minmax(150px,1.05fr) minmax(190px,1.2fr) minmax(110px,.8fr) minmax(100px,.65fr) minmax(92px,.5fr);gap:12px;align-items:center;padding:11px 12px;border-bottom:1px solid rgba(247,209,61,.10);}
.ticket-control-row:last-child{border-bottom:0;}
.ticket-control-row:not(.ticket-control-head):hover{background:rgba(247,209,61,.055);}
.ticket-control-head{position:sticky;top:0;z-index:2;background:#0d0d0b;color:#f7d13d;font-weight:1000;text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;}
.ticket-control-row strong,.ticket-control-row small{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ticket-control-row small{color:rgba(244,236,195,.64);font-size:.76rem;margin-top:3px;}
.ticket-control-row code{font-size:.78rem;color:#fff4ba;background:rgba(0,0,0,.26);padding:4px 6px;border:1px solid rgba(247,209,61,.14);}
.ticket-control-actions{display:flex;justify-content:flex-end;}
.ticket-control-note{margin:12px 0 0!important;font-size:.85rem;}
@media(max-width:760px){.ticket-control-tools{grid-template-columns:1fr}.ticket-control-table{max-height:70vh}.ticket-control-row{grid-template-columns:1fr;gap:6px}.ticket-control-head{display:none}.ticket-control-actions{justify-content:flex-start}.ticket-control-row{padding:14px}.ticket-control-row span:nth-child(3)::before{content:'Ticket ID: ';color:rgba(247,209,61,.85);font-weight:1000}.ticket-control-row span:nth-child(4)::before{content:'Status: ';color:rgba(247,209,61,.85);font-weight:1000}}


/* BUILD 18 — admin order split + attention badges */
.admin-tab { position: relative; }
.admin-tab-badge {
  position: absolute;
  top: -7px;
  right: -8px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: #d71920;
  color: #fff;
  border: 2px solid #17120a;
  box-shadow: 0 0 0 1px rgba(255,255,255,.22), 0 8px 16px rgba(0,0,0,.35);
  font-size: .68rem;
  font-weight: 1000;
  font-style: normal;
  line-height: 1;
}
.ticket-control-summary.admin-order-summary {
  grid-template-columns: repeat(4,minmax(0,1fr));
}
.admin-row-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 10px;
}
.order-control-list .row-card {
  padding: 16px;
}
.ticket-control-filters {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(180px,.28fr);
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 760px) {
  .ticket-control-summary.admin-order-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ticket-control-filters { grid-template-columns: 1fr; }
  .admin-row-main { display: grid; }
}


/* ============================================================
   LIVE BUILD 19 — voluntary Goop Fund donation UI
   ============================================================ */
.fund-hero-grid { align-items: stretch; }
.goop-fund-donate { position: relative; overflow: hidden; }
.goop-fund-donate::after,
.merch-fund-donate::after {
  content: "GOOP FUND";
  position: absolute;
  right: 18px;
  bottom: 12px;
  color: rgba(247,209,61,.08);
  font-size: clamp(2.6rem, 6vw, 5.2rem);
  font-weight: 1000;
  letter-spacing: .04em;
  pointer-events: none;
}
.fund-donate-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 18px 0 16px; position: relative; z-index: 1; }
.fund-mobile-hint { color: #fff0b8; font-weight: 950; text-transform: uppercase; letter-spacing: .045em; font-size: .82rem; }
.fund-qr-wrap {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 142px minmax(0,1fr);
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(247,209,61,.22);
  background: linear-gradient(135deg, rgba(247,209,61,.08), rgba(255,255,255,.02));
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.fund-qr-wrap img {
  width: 142px;
  max-width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  padding: 8px;
  background: #f8f4dd;
  border: 2px solid rgba(247,209,61,.55);
  box-shadow: 0 16px 34px rgba(0,0,0,.34);
}
.merch-fund-donate { position: relative; overflow: hidden; }
.merch-fund-donate > * { position: relative; z-index: 1; }
.mini-qr-line {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(244,236,195,.82);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .78rem;
}
.mini-qr-line img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  background: #f8f4dd;
  padding: 4px;
  border: 1px solid rgba(247,209,61,.5);
}
@media(max-width:760px) {
  .fund-qr-wrap { grid-template-columns: 1fr; justify-items: start; }
  .fund-qr-wrap img { width: 168px; }
  .fund-donate-actions .btn { width: 100%; }
}


/* ============================================================
   LIVE BUILD 20 — larger merch page Goop Fund QR
   ============================================================ */
.merch-fund-donate .mini-qr-line {
  display: grid !important;
  grid-template-columns: 142px minmax(0,1fr) !important;
  gap: 14px !important;
  align-items: center !important;
  margin-top: 18px !important;
  padding: 14px !important;
  width: min(100%, 440px) !important;
  border: 1px solid rgba(247,209,61,.22) !important;
  background: linear-gradient(135deg, rgba(247,209,61,.08), rgba(255,255,255,.02)) !important;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  color: #fff0b8 !important;
  font-size: .82rem !important;
}

.merch-fund-donate .mini-qr-line img {
  order: 0;
  width: 142px !important;
  height: 142px !important;
  max-width: 100% !important;
  aspect-ratio: 1 !important;
  object-fit: contain !important;
  padding: 8px !important;
  background: #f8f4dd !important;
  border: 2px solid rgba(247,209,61,.55) !important;
  box-shadow: 0 16px 34px rgba(0,0,0,.34) !important;
}

.merch-fund-donate .mini-qr-line span {
  order: 1;
  display: block;
  line-height: 1.35;
}

@media(max-width:760px) {
  .merch-fund-donate .mini-qr-line {
    grid-template-columns: 1fr !important;
    justify-items: start !important;
    width: 100% !important;
  }
  .merch-fund-donate .mini-qr-line img {
    width: 168px !important;
    height: 168px !important;
  }
}


/* ============================================================
   LIVE BUILD 21 — merch design origin labels
   Distinguishes AI-assisted and human-designed merch items.
   ============================================================ */
.design-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 10px;
  min-height: 0;
}
.design-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 6px 9px;
  border: 1px solid rgba(247,209,61,.26);
  background:
    linear-gradient(135deg, rgba(247,209,61,.13), rgba(0,0,0,.38)),
    rgba(0,0,0,.42);
  color: #f7e8aa;
  font-size: .68rem;
  line-height: 1;
  font-weight: 1000;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025), 0 8px 18px rgba(0,0,0,.18);
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
}
.design-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 7px;
  background: currentColor;
  box-shadow: 0 0 10px currentColor;
}
.design-badge-ai {
  color: #ffe27a;
  border-color: rgba(247,209,61,.36);
}
.design-badge-human {
  color: #f4f4e8;
  border-color: rgba(244,244,232,.24);
  background:
    linear-gradient(135deg, rgba(244,244,232,.09), rgba(0,0,0,.34)),
    rgba(0,0,0,.42);
}
.product-card .card-body .eyebrow {
  margin-bottom: 0;
}
.product-dialog-body .design-badge-row {
  margin-top: 10px;
  margin-bottom: 14px;
}
@media(max-width:640px){
  .design-badge{font-size:.62rem;white-space:normal;line-height:1.15;}
}


/* LIVE BUILD 22 — final fix for profile popup ticket badge text overlap.
   Force the mini-ticket into a stable 3-zone layout and neutralise old grid-area rules. */
.profile-ticket-badge-list {
  display: grid !important;
  gap: 12px !important;
}
.profile-ticket-badge {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 64px !important;
  min-height: 92px !important;
  align-items: stretch !important;
  overflow: visible !important;
}
.profile-ticket-main {
  display: grid !important;
  grid-template-columns: 82px minmax(0, 1fr) !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0 !important;
  padding: 14px 16px 14px 24px !important;
}
.profile-ticket-main::after {
  right: 0 !important;
  top: 12px !important;
  bottom: 12px !important;
}
.profile-ticket-badge .ticket-micro-label,
.profile-ticket-copy,
.profile-ticket-copy strong,
.profile-ticket-copy small,
.profile-ticket-badge strong,
.profile-ticket-badge small,
.profile-ticket-stub,
.profile-ticket-stub span,
.profile-ticket-stub i {
  grid-area: auto !important;
}
.profile-ticket-badge .ticket-micro-label {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 76px !important;
  max-width: 76px !important;
  min-height: 40px !important;
  padding: 6px 7px !important;
  white-space: normal !important;
  text-align: center !important;
  line-height: 1.02 !important;
  align-self: center !important;
  justify-self: start !important;
  margin: 0 !important;
}
.profile-ticket-copy {
  display: grid !important;
  grid-template-rows: auto auto !important;
  align-content: center !important;
  gap: 7px !important;
  min-width: 0 !important;
  width: 100% !important;
  position: relative !important;
  z-index: 2 !important;
}
.profile-ticket-copy strong {
  display: block !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  color: #1c1506 !important;
  font-size: .92rem !important;
  font-weight: 1000 !important;
  line-height: 1.04 !important;
  letter-spacing: .025em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}
.profile-ticket-copy small {
  display: block !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  color: rgba(38,27,6,.76) !important;
  font-size: .63rem !important;
  font-weight: 1000 !important;
  line-height: 1.05 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}
.profile-ticket-stub {
  min-width: 0 !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 4px !important;
  padding: 10px 6px !important;
}
.profile-ticket-stub span {
  max-height: 58px !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}
.profile-ticket-stub i {
  flex: 0 0 auto !important;
}
@media (max-width: 640px) {
  .profile-ticket-badge {
    grid-template-columns: minmax(0,1fr) 52px !important;
    min-height: 86px !important;
  }
  .profile-ticket-main {
    grid-template-columns: 66px minmax(0,1fr) !important;
    gap: 10px !important;
    padding: 12px 10px 12px 18px !important;
  }
  .profile-ticket-badge .ticket-micro-label {
    width: 62px !important;
    max-width: 62px !important;
    min-height: 34px !important;
    font-size: .48rem !important;
    letter-spacing: .08em !important;
  }
  .profile-ticket-copy strong { font-size: .76rem !important; }
  .profile-ticket-copy small { font-size: .52rem !important; letter-spacing: .06em !important; }
}


/* BUILD 23 — merch staging admin refinements */
.compact-note {
  margin: -4px 0 4px;
  font-size: .86rem;
  color: rgba(244,236,195,.72) !important;
}
.admin-panel option {
  background: #080806;
  color: #f4ecd2;
}

/* LIVE BUILD 25 — scheduled merch collection launches. */
.collection-card.collection-upcoming {
  border-color: rgba(247,209,61,.44) !important;
  background: linear-gradient(135deg, rgba(247,209,61,.15), rgba(255,255,255,.035)) !important;
}
.collection-card.collection-upcoming::after {
  content: "COMING SOON";
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 3;
  padding: 5px 8px;
  border: 1px solid rgba(247,209,61,.38);
  background: rgba(0,0,0,.56);
  color: #ffe790;
  font-size: .62rem;
  font-weight: 1000;
  letter-spacing: .12em;
}
.collection-countdown {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  padding: 7px 10px;
  border: 1px solid rgba(247,209,61,.36);
  background: rgba(247,209,61,.12);
  color: #ffe790 !important;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.collection-empty-state strong {
  color: var(--accent);
  text-transform: uppercase;
}
.collection-admin-card {
  cursor: pointer;
}
.collection-admin-card:hover {
  border-color: rgba(247,209,61,.38);
  background: rgba(247,209,61,.055);
}
.compact-note {
  font-size: .82rem;
  line-height: 1.35;
}

/* LIVE BUILD 26 — scheduled collection end dates + themed collection tiles. */
.collection-card {
  isolation: isolate;
  border-color: color-mix(in srgb, var(--accent) 38%, rgba(255,255,255,.12)) !important;
  background:
    radial-gradient(circle at 14% 18%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 28%),
    radial-gradient(circle at 88% 80%, rgba(255,255,255,.055), transparent 28%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 16%, #050505), rgba(255,255,255,.026)) !important;
}
.collection-card::before {
  opacity: .78 !important;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 30%, transparent), transparent 30%, transparent 70%, rgba(255,255,255,.045)),
    repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 1px, transparent 1px 14px) !important;
}
.collection-card[data-collection-theme="lan"] {
  border-color: rgba(99,200,255,.28) !important;
  background:
    radial-gradient(circle at 15% 20%, rgba(99,200,255,.16), transparent 22%),
    radial-gradient(circle at 82% 18%, rgba(255,72,72,.12), transparent 19%),
    linear-gradient(135deg, #121317, #08090d) !important;
}
.collection-card[data-collection-theme="arc"] {
  border-color: rgba(136,255,225,.24) !important;
  background:
    radial-gradient(circle at 24% 20%, rgba(136,255,225,.14), transparent 22%),
    radial-gradient(circle at 80% 80%, rgba(255,170,92,.10), transparent 24%),
    linear-gradient(135deg, #1b2325, #080d0f) !important;
}
.collection-card[data-collection-theme="minecraft"] {
  border-color: rgba(205,255,181,.24) !important;
  background:
    linear-gradient(180deg, rgba(160,226,120,.14), transparent 18%),
    linear-gradient(135deg, #4e3c28 0%, #30451f 44%, #16110b 100%) !important;
}
.collection-card[data-collection-theme="fng"] {
  border-color: rgba(247,209,61,.30) !important;
  background:
    radial-gradient(circle at 20% 18%, rgba(247,209,61,.20), transparent 24%),
    radial-gradient(circle at 80% 78%, rgba(255,255,255,.08), transparent 24%),
    linear-gradient(135deg, #1e1a12, #080706) !important;
}
.collection-card.collection-limited { padding-right: 76px !important; }
.limited-star {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  text-align: center;
  color: #101010;
  background: linear-gradient(135deg, #fff3a7, var(--accent));
  font-size: .58rem;
  font-weight: 1000;
  letter-spacing: .06em;
  text-transform: uppercase;
  clip-path: polygon(50% 0%,58% 18%,75% 7%,72% 28%,93% 25%,82% 42%,100% 50%,82% 58%,93% 75%,72% 72%,75% 93%,58% 82%,50% 100%,42% 82%,25% 93%,28% 72%,7% 75%,18% 58%,0% 50%,18% 42%,7% 25%,28% 28%,25% 7%,42% 18%);
  filter: drop-shadow(0 8px 15px rgba(0,0,0,.42));
  transform: rotate(10deg);
}
.collection-card[data-collection-theme="lan"] .limited-star {
  background: radial-gradient(circle at 34% 32%, #ffffff, #ff4444 42%, #8d0000 100%);
  color: #fff;
}
.checkbox-line {
  display: flex !important;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(247,209,61,.16);
  background: rgba(247,209,61,.06);
  padding: 11px 12px;
  border-radius: 10px;
}
.checkbox-line input { width: auto; }
@media (max-width: 640px) {
  .collection-card.collection-limited { padding-right: 18px !important; padding-top: 72px !important; }
  .limited-star { left: 12px; right: auto; top: 10px; }
}


/* LIVE BUILD 27 — collection tile visual redesign. */
.collection-card.collection-upcoming::after {
  content: none !important;
}

.collection-strip {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px !important;
}

.collection-card,
.collection-card:hover,
.collection-card:focus,
.collection-card:focus-visible {
  min-height: 232px;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 10px;
  text-align: left !important;
  padding: 20px 20px 18px 24px !important;
  color: #f3ecd5 !important;
  background: transparent !important;
  outline: none !important;
  overflow: visible !important;
  isolation: isolate;
}

.collection-card::before {
  content: "" !important;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 1 !important;
  background:
    linear-gradient(var(--collection-accent, var(--accent)), var(--collection-accent, var(--accent))) left 0 top 22px / 3px calc(100% - 44px) no-repeat,
    linear-gradient(color-mix(in srgb, var(--collection-accent, var(--accent)) 85%, white 15%), color-mix(in srgb, var(--collection-accent, var(--accent)) 85%, white 15%)) left top / 64px 1px no-repeat,
    linear-gradient(color-mix(in srgb, var(--collection-accent, var(--accent)) 85%, white 15%), color-mix(in srgb, var(--collection-accent, var(--accent)) 85%, white 15%)) left top / 1px 64px no-repeat,
    linear-gradient(rgba(247,209,61,.12), rgba(247,209,61,.12)) right top / 48px 1px no-repeat,
    linear-gradient(rgba(247,209,61,.12), rgba(247,209,61,.12)) right top / 1px 48px no-repeat,
    linear-gradient(rgba(247,209,61,.10), rgba(247,209,61,.10)) left bottom / 48px 1px no-repeat,
    linear-gradient(rgba(247,209,61,.10), rgba(247,209,61,.10)) left bottom / 1px 48px no-repeat,
    linear-gradient(rgba(247,209,61,.08), rgba(247,209,61,.08)) right bottom / 34px 1px no-repeat,
    linear-gradient(rgba(247,209,61,.08), rgba(247,209,61,.08)) right bottom / 1px 34px no-repeat;
}

.collection-card::after {
  content: "" !important;
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 1 !important;
  background:
    linear-gradient(140deg, rgba(0,0,0,.72), rgba(0,0,0,.22)),
    var(--collection-hero, linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0))),
    radial-gradient(circle at 18% 16%, color-mix(in srgb, var(--collection-accent, var(--accent)) 22%, transparent), transparent 24%),
    radial-gradient(circle at 78% 82%, rgba(255,255,255,.06), transparent 26%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(180deg, rgba(255,255,255,.02) 0 1px, transparent 1px 14px);
  background-size: auto, cover, auto, auto, auto, auto;
  background-position: center, center, center, center, center, center;
  mix-blend-mode: normal;
}

.collection-card > * {
  position: relative;
  z-index: 1;
}

.collection-card[data-collection-theme="fng"] { --collection-accent: #f7d13d; }
.collection-card[data-collection-theme="lan"] { --collection-accent: #65c9ff; }
.collection-card[data-collection-theme="arc"] { --collection-accent: #88ffe1; }
.collection-card[data-collection-theme="minecraft"] { --collection-accent: #a7df73; }

.collection-card.active {
  color: #fff6c7 !important;
  box-shadow: inset 0 0 0 1px rgba(247,209,61,.08) !important;
}
.collection-card.active::before,
.collection-card:hover::before,
.collection-card:focus-visible::before {
  background:
    linear-gradient(var(--collection-accent, var(--accent)), var(--collection-accent, var(--accent))) left 0 top 18px / 4px calc(100% - 36px) no-repeat,
    linear-gradient(color-mix(in srgb, var(--collection-accent, var(--accent)) 95%, white 5%), color-mix(in srgb, var(--collection-accent, var(--accent)) 95%, white 5%)) left top / 72px 1px no-repeat,
    linear-gradient(color-mix(in srgb, var(--collection-accent, var(--accent)) 95%, white 5%), color-mix(in srgb, var(--collection-accent, var(--accent)) 95%, white 5%)) left top / 1px 72px no-repeat,
    linear-gradient(rgba(247,209,61,.18), rgba(247,209,61,.18)) right top / 54px 1px no-repeat,
    linear-gradient(rgba(247,209,61,.18), rgba(247,209,61,.18)) right top / 1px 54px no-repeat,
    linear-gradient(rgba(247,209,61,.16), rgba(247,209,61,.16)) left bottom / 54px 1px no-repeat,
    linear-gradient(rgba(247,209,61,.16), rgba(247,209,61,.16)) left bottom / 1px 54px no-repeat,
    linear-gradient(rgba(247,209,61,.12), rgba(247,209,61,.12)) right bottom / 38px 1px no-repeat,
    linear-gradient(rgba(247,209,61,.12), rgba(247,209,61,.12)) right bottom / 1px 38px no-repeat !important;
}
.collection-card:hover::after,
.collection-card:focus-visible::after,
.collection-card.active::after {
  filter: brightness(1.06);
}

.collection-card-top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.collection-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  color: color-mix(in srgb, var(--collection-accent, var(--accent)) 78%, #fff 22%);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .68rem;
  font-weight: 1000;
}

.collection-end-chip,
.collection-state-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 6px 10px;
  border: 1px solid rgba(247,209,61,.24);
  background: rgba(0,0,0,.34);
  color: #eadcab;
  font-size: .68rem;
  font-weight: 1000;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.collection-state-chip.live {
  color: color-mix(in srgb, var(--collection-accent, var(--accent)) 82%, #fff 18%);
  border-color: color-mix(in srgb, var(--collection-accent, var(--accent)) 36%, rgba(255,255,255,.15));
}
.collection-state-chip.coming,
.collection-state-chip.limited-window,
.collection-end-chip {
  color: #ffe48c;
}

.collection-card h3 {
  margin: 4px 0 0 !important;
  max-width: calc(100% - 70px);
  color: #f5eedb !important;
  font-size: clamp(1.6rem, 2vw, 2.1rem) !important;
  line-height: .92 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 18px rgba(247,209,61,.08) !important;
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 5px, rgba(0,0,0,.76) 5px 7px, #000 7px 15px);
  mask-image: repeating-linear-gradient(180deg, #000 0 5px, rgba(0,0,0,.76) 5px 7px, #000 7px 15px);
}

.collection-card p {
  max-width: 42ch;
  margin: 0 !important;
  color: rgba(235,229,214,.82) !important;
  line-height: 1.55 !important;
}

.collection-card-spacer {
  flex: 1 1 auto;
  min-height: 6px;
}

.collection-status-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}
.collection-status-upcoming {
  align-items: flex-end;
}

.collection-count,
.collection-countdown {
  display: inline-flex !important;
  align-items: center;
  min-height: 34px;
  padding: 8px 12px !important;
  border: 1px solid color-mix(in srgb, var(--collection-accent, var(--accent)) 28%, rgba(255,255,255,.14));
  background: linear-gradient(180deg, color-mix(in srgb, var(--collection-accent, var(--accent)) 10%, rgba(0,0,0,.56)), rgba(0,0,0,.38));
  color: #fff0b5 !important;
  font-size: .78rem !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: normal;
}
.collection-count {
  color: color-mix(in srgb, var(--collection-accent, var(--accent)) 85%, #fff 15%) !important;
}
.collection-countdown {
  max-width: 100%;
}

.collection-card.collection-limited {
  padding-right: 26px !important;
}
.limited-star {
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 3;
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  padding: 0 10px;
  text-align: center;
  color: #17120b;
  background: linear-gradient(135deg, #fff4bc, color-mix(in srgb, var(--collection-accent, var(--accent)) 82%, #ff6f6f 18%));
  font-size: .58rem;
  font-weight: 1000;
  line-height: 1.05;
  letter-spacing: .09em;
  text-transform: uppercase;
  clip-path: polygon(50% 0%,58% 14%,69% 4%,71% 19%,86% 10%,81% 26%,97% 24%,87% 37%,100% 50%,87% 63%,97% 76%,81% 74%,86% 90%,71% 81%,69% 96%,58% 86%,50% 100%,42% 86%,31% 96%,29% 81%,14% 90%,19% 74%,3% 76%,13% 63%,0% 50%,13% 37%,3% 24%,19% 26%,14% 10%,29% 19%,31% 4%,42% 14%);
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.45));
  transform: rotate(7deg);
}
.collection-card[data-collection-theme="lan"] .limited-star {
  color: #fff;
  background: radial-gradient(circle at 34% 32%, #ffe7e7, #ff5454 42%, #8f0404 100%);
}

@media (max-width: 1200px) {
  .collection-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .collection-strip {
    grid-template-columns: 1fr;
  }
  .collection-card,
  .collection-card:hover,
  .collection-card:focus,
  .collection-card:focus-visible {
    min-height: 220px;
    padding: 18px 16px 16px 20px !important;
  }
  .collection-card h3 {
    max-width: calc(100% - 54px);
    font-size: 1.45rem !important;
  }
  .collection-card.collection-limited {
    padding-top: 18px !important;
    padding-right: 16px !important;
  }
  .limited-star {
    width: 66px;
    height: 66px;
    top: -8px;
    right: -6px;
    font-size: .54rem;
  }
  .collection-card-top,
  .collection-status-wrap {
    align-items: flex-start;
  }
}


/* LIVE BUILD 28 — unify merch collection tiles and fix LIMITED clipping. */
.collection-card,
.collection-card:hover,
.collection-card:focus,
.collection-card:focus-visible,
.collection-card[data-collection-theme="fng"],
.collection-card[data-collection-theme="lan"],
.collection-card[data-collection-theme="arc"],
.collection-card[data-collection-theme="minecraft"],
.collection-card.collection-upcoming {
  background: transparent !important;
  overflow: visible !important;
}

.collection-card::after {
  background:
    linear-gradient(140deg, rgba(0,0,0,.74), rgba(0,0,0,.18)),
    radial-gradient(circle at 18% 16%, color-mix(in srgb, var(--collection-accent, var(--accent)) 18%, transparent), transparent 26%),
    radial-gradient(circle at 82% 82%, rgba(255,255,255,.045), transparent 28%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.026) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 1px, transparent 1px 15px) !important;
  background-position: center !important;
  background-size: auto !important;
}

.collection-card[data-collection-theme="fng"] { --collection-accent: #f7d13d; }
.collection-card[data-collection-theme="lan"] { --collection-accent: var(--accent, #65c9ff); }
.collection-card[data-collection-theme="arc"] { --collection-accent: var(--accent, #88ffe1); }
.collection-card[data-collection-theme="minecraft"] { --collection-accent: var(--accent, #a7df73); }
.collection-card[data-collection="all"] { --collection-accent: #f7d13d; }

.collection-card h3 {
  max-width: 100% !important;
}

.collection-card.collection-limited {
  padding-right: 20px !important;
}

.collection-card-flags {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.collection-flag-limited,
.collection-end-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 27px;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--collection-accent, var(--accent)) 42%, rgba(255,255,255,.16));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--collection-accent, var(--accent)) 18%, rgba(0,0,0,.74)), rgba(0,0,0,.44));
  color: color-mix(in srgb, var(--collection-accent, var(--accent)) 78%, #fff 22%);
  font-size: .66rem;
  font-weight: 1000;
  line-height: 1;
  letter-spacing: .11em;
  text-transform: uppercase;
  white-space: nowrap;
}

.collection-flag-limited::before {
  content: "✦";
  margin-right: 6px;
  font-size: .78rem;
}

.limited-star {
  display: none !important;
}

.collection-card.collection-limited::before {
  background:
    linear-gradient(var(--collection-accent, var(--accent)), var(--collection-accent, var(--accent))) left 0 top 18px / 4px calc(100% - 36px) no-repeat,
    linear-gradient(color-mix(in srgb, var(--collection-accent, var(--accent)) 95%, white 5%), color-mix(in srgb, var(--collection-accent, var(--accent)) 95%, white 5%)) left top / 72px 1px no-repeat,
    linear-gradient(color-mix(in srgb, var(--collection-accent, var(--accent)) 95%, white 5%), color-mix(in srgb, var(--collection-accent, var(--accent)) 95%, white 5%)) left top / 1px 72px no-repeat,
    linear-gradient(rgba(247,209,61,.16), rgba(247,209,61,.16)) right top / 52px 1px no-repeat,
    linear-gradient(rgba(247,209,61,.16), rgba(247,209,61,.16)) right top / 1px 52px no-repeat,
    linear-gradient(rgba(247,209,61,.14), rgba(247,209,61,.14)) left bottom / 52px 1px no-repeat,
    linear-gradient(rgba(247,209,61,.14), rgba(247,209,61,.14)) left bottom / 1px 52px no-repeat,
    linear-gradient(rgba(247,209,61,.10), rgba(247,209,61,.10)) right bottom / 38px 1px no-repeat,
    linear-gradient(rgba(247,209,61,.10), rgba(247,209,61,.10)) right bottom / 1px 38px no-repeat !important;
}

.collection-card.collection-upcoming .collection-state-chip.coming {
  border-color: color-mix(in srgb, var(--collection-accent, var(--accent)) 38%, rgba(247,209,61,.24));
  color: #ffe48c;
}

@media (max-width: 760px) {
  .collection-card-top {
    flex-direction: row !important;
    align-items: flex-start !important;
  }
  .collection-card-flags {
    justify-content: flex-end;
  }
  .collection-flag-limited,
  .collection-end-chip {
    font-size: .58rem;
    padding: 6px 8px;
  }
  .collection-card.collection-limited {
    padding-top: 18px !important;
    padding-right: 16px !important;
  }
}