:root{
  --bg:#0b0c0f;
  --bg-2:#101216;
  --surface:#15171d;
  --surface-2:#1b1e25;
  --border:#262930;
  --text:#f0f1f4;
  --text-dim:#9aa0ac;
  --text-dimmer:#7d8391;
  --amber:#f5a623;
  --amber-dim:#c9860f;
  --amber-glow:rgba(245,166,35,0.35);
}
*{box-sizing:border-box;}

/* ---------- RECOMMENDED MARKETPLACE ---------- */
.rec-marketplace.wrap{ margin:56px auto 0; }
.rec-marketplace-inner{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  background:linear-gradient(180deg, rgba(245,166,35,0.08), rgba(245,166,35,0.02));
  border:1px solid var(--amber); border-radius:12px;
  padding:20px 22px 18px; box-shadow:0 0 0 1px rgba(245,166,35,0.12), 0 8px 24px rgba(245,166,35,0.06);
  position:relative;
}
.rec-badge{
  position:absolute; top:-11px; left:22px;
  background:var(--amber); color:#0b0c0f;
  font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600;
  letter-spacing:0.04em; text-transform:uppercase;
  padding:3px 10px; border-radius:5px;
}
.rec-main{ display:flex; align-items:center; gap:14px; flex:1; min-width:240px; }
.rec-logo img{ width:52px; height:52px; border-radius:10px; background:var(--surface-2); padding:6px; display:block; }
.rec-name{ font-family:'Oswald',sans-serif; font-size:18px; font-weight:600; text-transform:uppercase; letter-spacing:0.02em; color:var(--text); }
.rec-tagline{ margin:4px 0 0; font-size:14px; color:var(--text-dim); line-height:1.45; max-width:560px; }
.rec-cta{
  display:inline-block; background:var(--amber); color:#0b0c0f; font-weight:700;
  font-family:'Inter',sans-serif; font-size:14px; padding:12px 26px; border-radius:8px;
  white-space:nowrap; transition:filter .15s ease;
}
.rec-cta:hover{ filter:brightness(1.08); }
.rec-marketplace .disclosure{ margin:6px 4px 0; font-size:10px; color:var(--text-dimmer); opacity:.65; }
@media (max-width:640px){
  .rec-marketplace-inner{ flex-direction:column; align-items:flex-start; }
  .rec-cta{ width:100%; text-align:center; }
}
body{ margin:0; background:var(--bg); color:var(--text); font-family:'Inter', sans-serif; font-size:16px; line-height:1.5; }
h1,h2,h3,.display{ font-family:'Oswald', sans-serif; letter-spacing:0.01em; text-transform:uppercase; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:1200px; margin:0 auto; padding:0 28px; }
.accent{ color:var(--amber); }

/* ---------- HEADER ---------- */
  header{
    position:relative;
    border-bottom:1px solid var(--border);
    overflow:hidden;
    min-height:280px;
    background:#0b0c0f;
  }
  .header-art-wrap{ position:absolute; inset:0; max-width:1700px; margin-inline:auto; }
  .header-art-blur{
    position:absolute; inset:0;
    background:url('/images/header/fantasy-scene.webp') center right/cover no-repeat;
    filter:saturate(.9) blur(38px) brightness(.95);
    transform:scale(1.15);
  }
  .header-art{
    position:absolute; inset:0 0 0 38%;
    background:url('/images/header/fantasy-scene.webp') center right/cover no-repeat;
    filter:saturate(.9) contrast(1.05);
    -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 60%);
    mask-image:linear-gradient(90deg, transparent 0%, #000 60%);
  }
  .header-shade{
    position:absolute; inset:0;
    background:
      linear-gradient(90deg, rgba(11,12,15,.28) 0%, rgba(11,12,15,.25) 32%, rgba(11,12,15,.2) 52%, rgba(11,12,15,.08) 78%, rgba(11,12,15,0) 100%),
      linear-gradient(0deg, rgba(5,6,9,0.4), transparent 60%);
  }
  .header-inner{ position:relative; z-index:2; display:flex; align-items:flex-start; justify-content:space-between; padding:36px 28px; gap:18px; flex-wrap:nowrap; min-height:208px; }
  .logo{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; flex-shrink:0; }
  header .logo{ flex-direction:row; align-items:center; gap:2px; }
  .brand-avatar{
    width:216px; height:216px; border-radius:50%; object-fit:cover; flex-shrink:0;
  }
  .brand-lockup{
    display:block; width:min(640px,52vw); height:auto;
    filter:drop-shadow(0 4px 14px rgba(0,0,0,.55));
  }
  .logo-row{ display:flex; align-items:center; gap:12px; }
  .logo .mark{ width:56px; height:56px; border-radius:50%; object-fit:cover; border:2px solid var(--amber); display:block; filter:drop-shadow(0 0 10px var(--amber-glow)); }
  .footer-brand .mark{ width:34px; height:34px; }
  .logo .wordmark{ font-family:'Oswald', sans-serif; font-weight:700; font-size:30px; letter-spacing:0.02em; color:var(--text); white-space:nowrap; text-shadow:0 3px 12px rgba(0,0,0,0.7); }
  .logo .wordmark span{ color:var(--amber); }
  .logo .tagline{ font-family:'Inter',sans-serif; font-size:12px; letter-spacing:0.06em; color:var(--text-dim); text-transform:uppercase; margin-left:2px; }
  .logo .tagline b{ color:var(--amber); font-weight:600; }

  .nav-row{ position:relative; z-index:3; background:rgba(9,10,14,0.88); border-top:1px solid var(--border); backdrop-filter:blur(6px); }
  .nav-row .header-inner{ padding:0 28px; min-height:0; }
  nav.tabs{ display:flex; gap:2px; flex-wrap:nowrap; align-items:center; flex-shrink:1; }
  nav.tabs a{
    font-family:'Oswald', sans-serif; font-size:13px; font-weight:600; letter-spacing:0.03em;
    color:var(--text-dim); padding:15px 15px; display:flex; align-items:center; gap:4px;
    border-bottom:2px solid transparent; transition:all .15s ease; white-space:nowrap;
  }
  nav.tabs a:hover{ color:var(--text); }
  nav.tabs a.active{ color:var(--amber); border-bottom-color:var(--amber); }
  nav.tabs a .caret{ font-size:9px; opacity:0.7; }

  .header-actions{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
  .icon-btn{
    width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center;
    color:var(--text-dim); border:1px solid transparent; cursor:pointer;
  }
  .icon-btn:hover{ color:var(--text); background:var(--surface-2); }
  .btn-outline{
    font-family:'Oswald', sans-serif; font-weight:600; font-size:13px; letter-spacing:0.04em;
    background:transparent; color:var(--amber); border:1.5px solid var(--amber);
    padding:9px 16px; border-radius:6px; cursor:pointer; white-space:nowrap; transition:all .15s ease;
  }
  .btn-outline:hover{ background:var(--amber); color:#1a1206; }
  .btn-fill{
    font-family:'Oswald', sans-serif; font-weight:600; font-size:14px; letter-spacing:0.03em;
    background:var(--amber); color:#1a1206; border:none;
    padding:12px 16px; border-radius:0 8px 8px 0; cursor:pointer;
  }
  .btn-fill:hover{ background:#ffb63c; }

  @media (max-width:900px){
    header{ min-height:auto; }
    .header-art{ inset:0 0 0 20%; opacity:0.7; }
    .header-inner{ padding:22px 20px; min-height:auto; }
    .logo .mark{ width:44px; height:44px; }
    .brand-avatar{ width:70px; height:70px; }
    .logo .wordmark{ font-size:22px; }
    .logo .tagline{ display:none; }
    nav.tabs a{ padding:13px 9px; font-size:12px; }
  }

  @media (max-width:760px){
    .header-inner{ flex-wrap:wrap; row-gap:10px; padding:12px 18px; }
    .nav-row .header-inner{ flex-wrap:nowrap; row-gap:0; }
    nav.tabs{
      order:3; flex-basis:100%; width:100%;
      flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch;
      justify-content:flex-start; gap:0;
      padding-top:8px; border-top:1px solid var(--border);
      scrollbar-width:none;
    }
    .nav-row nav.tabs{ order:0; flex-basis:auto; width:auto; flex:1 1 auto; padding-top:0; border-top:none; }
    nav.tabs::-webkit-scrollbar{ display:none; }
    nav.tabs a{ font-size:11px; padding:6px 8px; white-space:nowrap; }
  }

/* ---------- FOOTER (shared) ---------- */
  footer{ border-top:1px solid var(--border); background:var(--bg-2); padding:44px 28px 24px; }
  .footer-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr 1.3fr; gap:28px; max-width:1200px; margin:0 auto; }
  .footer-grid > div{ min-width:0; }
  .footer-brand .logo{ margin-bottom:12px; }
  .footer-brand p{ color:var(--text-dim); font-size:13.5px; max-width:250px; margin-bottom:16px; }
  .footer-grid h4{ font-family:'Oswald', sans-serif; font-size:12px; letter-spacing:0.08em; color:var(--text); margin:0 0 14px; }
  .footer-grid a, .footer-grid p.link{ color:var(--text-dim); font-size:13.5px; display:block; margin-bottom:9px; text-transform:none; font-family:'Inter',sans-serif; overflow-wrap:break-word; }
  .footer-grid a:hover{ color:var(--amber); }
  .newsletter p{ color:var(--text-dim); font-size:13.5px; margin-bottom:14px; text-transform:none;}
  .newsletter-form{ display:flex; flex-wrap:wrap; }
  .newsletter-form input{ flex:1 1 140px; min-width:0; background:var(--surface); border:1px solid var(--border); border-right:none; border-radius:6px 0 0 6px; padding:10px 12px; color:var(--text); font-size:13px; outline:none; }
  .newsletter-form button{ font-family:'Oswald',sans-serif; font-weight:600; font-size:12.5px; background:var(--amber); color:#1a1206; border:none; border-radius:0 6px 6px 0; padding:0 16px; cursor:pointer; flex-shrink:0; }
  .footer-bottom{ max-width:1200px; margin:32px auto 0; padding-top:20px; border-top:1px solid var(--border); font-family:'Inter',monospace; font-size:12px; color:var(--text-dimmer); text-align:center; }
  @media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } .footer-brand{ grid-column:1/-1; } .footer-games{ display:none; } .newsletter{ grid-column:1/-1; } }

/* ---------- AD BANNERS (shared) ---------- */
.ad-banner-top{ max-width:1200px; margin:0 auto; padding:16px 28px 24px; }
.ad-banner-top .ad-label{ font-family:'Inter',sans-serif; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:#7d8391; margin:0 0 8px; text-align:center; }
.ad-banner-top .ad-banner-inner{ display:flex; justify-content:center; }
.ad-banner-top a{ display:block; max-width:800px; width:100%; border-radius:10px; overflow:hidden; border:1px solid #262930; line-height:0; transition:border-color .15s ease; }
.ad-banner-top a:hover{ border-color:#c9860f; }
.ad-banner-top img{ display:block; width:100%; height:auto; }
@media (max-width:760px){ .ad-banner-top{ padding:12px 18px 20px; } }
.ad-banner-mid{ max-width:1200px; margin:0 auto; padding:28px 28px 24px; }
.ad-banner-mid .ad-label{ font-family:'Inter',sans-serif; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-dimmer); margin:0 0 8px; text-align:center; }
.ad-banner-mid a{ display:block; border-radius:10px; overflow:hidden; border:1px solid var(--border); line-height:0; transition:border-color .15s ease; }
.ad-banner-mid a:hover{ border-color:var(--amber-dim); }
.ad-banner-mid img{ display:block; width:100%; height:auto; }
@media (max-width:760px){ .ad-banner-mid{ padding:20px 18px 20px; } }
.ad-banner-footer{ max-width:1200px; margin:0 auto; padding:8px 28px 32px; }
@media (max-width:760px){ .ad-banner-footer{ padding:0 18px; } }
.ad-banner-footer .ad-label{ font-family:'Inter',sans-serif; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:#7d8391; margin:0 0 8px; }
.ad-banner-footer a{ display:block; border-radius:10px; overflow:hidden; border:1px solid #262930; line-height:0; transition:border-color .15s ease; }
.ad-banner-footer a:hover{ border-color:#c9860f; }
.ad-banner-footer img{ display:block; width:100%; height:auto; }