:root{
    --coral:#EA846D;
    --gold:#F2C372;
    --grad:linear-gradient(100deg,#EA846D 0%,#F2C372 50%,#EA846D 100%);
    --ink:#17171a;
    --ink2:#232329;
    --panel:#1e1e23;
    --panel2:#26262d;
    --text:#f4f1ee;
    --muted:#b5b0ab;
    --line:rgba(255,255,255,.08);
    --radius:18px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{font-family:'Inter',system-ui,sans-serif;background:var(--ink);color:var(--text);line-height:1.6}
  .brandfont{font-family:'Bree Serif',serif}

  /* ---------- NAV ---------- */
  nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:28px;
      padding:14px 5vw;background:rgba(23,23,26,.85);backdrop-filter:blur(10px);
      border-bottom:1px solid var(--line)}
  .logo{display:flex;align-items:center;gap:10px;text-decoration:none}
  .logo svg{height:38px;width:auto}
  .wordmark{font-family:'Bree Serif',serif;font-size:1.25rem;letter-spacing:.2px}
  .wordmark .w1{color:var(--coral)} .wordmark .w2{color:var(--text)}
  nav .links{display:flex;gap:22px;margin-left:auto}
  nav .links a{color:var(--muted);text-decoration:none;font-size:.92rem;font-weight:500}
  nav .links a:hover{color:var(--gold)}
  .btn{display:inline-flex;align-items:center;gap:9px;border:none;cursor:pointer;
       text-decoration:none;font-weight:700;font-size:.95rem;border-radius:12px;
       padding:12px 20px;transition:transform .15s ease,box-shadow .15s ease}
  .btn:hover{transform:translateY(-2px)}
  .btn-discord{background:#5865F2;color:#fff}
  .btn-grad{background:var(--grad);color:#2a1c14;box-shadow:0 6px 22px rgba(234,132,109,.35)}
  .btn-ghost{background:var(--panel2);color:var(--text);border:1px solid var(--line)}
  .btn.small{padding:9px 15px;font-size:.85rem}

  /* ---------- HERO ---------- */
  header{position:relative;overflow:hidden;padding:90px 5vw 70px;text-align:center}
  header::before{content:"";position:absolute;inset:-40% -20% auto;height:120%;
    background:radial-gradient(ellipse at 50% 0%,rgba(234,132,109,.16),transparent 60%),
               radial-gradient(ellipse at 80% 20%,rgba(242,195,114,.10),transparent 55%);
    pointer-events:none}
  .hero-logo{width:min(300px,60vw);margin:0 auto 6px;display:block}
  h1{font-family:'Bree Serif',serif;font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.15;font-weight:400}
  h1 .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .tagline{max-width:640px;margin:20px auto 0;color:var(--muted);font-size:1.08rem}
  .hero-ctas{margin-top:34px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
  .stat-strip{margin:56px auto 0;display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
  .chip{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);
        border-radius:999px;padding:8px 16px;font-size:.85rem;color:var(--muted)}
  .dot{width:8px;height:8px;border-radius:50%;background:#57d98a;box-shadow:0 0 8px #57d98a}
  .dot.warm{background:var(--gold);box-shadow:0 0 8px var(--gold)}

  /* ---------- SECTIONS ---------- */
  section{padding:72px 5vw;max-width:1180px;margin:0 auto}
  .kicker{font-size:.8rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
          background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  h2{font-family:'Bree Serif',serif;font-weight:400;font-size:2rem;margin:8px 0 14px}
  .lead{color:var(--muted);max-width:660px}

  /* ---------- GAME CARDS ---------- */
  .games{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:38px}
  .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
        padding:26px;display:flex;flex-direction:column;gap:14px;position:relative;
        transition:transform .18s ease,border-color .18s ease}
  .card:hover{transform:translateY(-4px);border-color:rgba(242,195,114,.4)}
  .card.featured{grid-column:1/-1;flex-direction:row;align-items:center;gap:34px;
        background:linear-gradient(120deg,rgba(234,132,109,.12),rgba(242,195,114,.06) 60%,transparent),var(--panel);
        border-color:rgba(234,132,109,.35)}
  .card.featured .info{flex:1}
  .badge{position:absolute;top:18px;right:18px;font-size:.7rem;font-weight:800;letter-spacing:.08em;
         text-transform:uppercase;padding:5px 11px;border-radius:999px}
  .badge.live{background:rgba(87,217,138,.15);color:#57d98a;border:1px solid rgba(87,217,138,.4)}
  .badge.soon{background:rgba(242,195,114,.12);color:var(--gold);border:1px solid rgba(242,195,114,.35)}
  .game-icon{width:76px;height:76px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--panel2);border:1px solid var(--line);padding:8px;flex-shrink:0;overflow:hidden}
  .game-icon img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
  .game-icon.big{width:150px;height:150px;padding:12px}
  .card h3{font-family:'Bree Serif',serif;font-weight:400;font-size:1.35rem}
  .card p{color:var(--muted);font-size:.93rem}
  .players{display:flex;align-items:center;gap:9px;font-weight:700;font-size:1rem}
  .players .num{font-size:1.5rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
  .card .actions{display:flex;gap:10px;margin-top:auto;flex-wrap:wrap}
  .note{font-size:.72rem;color:#6f6a66;margin-top:6px}

  /* ---------- VALUES ---------- */
  .values{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:36px}
  .val{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
  .val .ico{font-size:1.5rem}
  .val h3{font-size:1.05rem;margin:10px 0 6px}
  .val p{color:var(--muted);font-size:.9rem}

  /* ---------- FOUNDATION ---------- */
  .foundation{background:linear-gradient(120deg,rgba(234,132,109,.14),rgba(242,195,114,.08)),var(--panel);
      border:1px solid rgba(234,132,109,.3);border-radius:var(--radius);padding:44px;
      display:flex;align-items:center;gap:30px;flex-wrap:wrap}
  .foundation .txt{flex:1;min-width:260px}

  /* ---------- FOOTER ---------- */
  footer{border-top:1px solid var(--line);padding:36px 5vw;display:flex;gap:18px;align-items:center;
         flex-wrap:wrap;color:#6f6a66;font-size:.85rem}
  footer .links{margin-left:auto;display:flex;gap:18px}
  footer a{color:var(--muted);text-decoration:none}
  footer a:hover{color:var(--gold)}

  @media(max-width:760px){
    nav .links{display:none}
    .card.featured{flex-direction:column;align-items:flex-start}
  }
  .card img{max-width:100%}

/* ---------- Logged-in user chip ---------- */
.userchip{display:flex;align-items:center;gap:10px;background:var(--panel2);
  border:1px solid var(--line);border-radius:999px;padding:6px 14px 6px 6px}
.userchip img{width:30px;height:30px;border-radius:50%}
.userchip .name{font-weight:700;font-size:.9rem}
.userchip a{color:var(--muted);font-size:.78rem;text-decoration:none;margin-left:4px}
.userchip a:hover{color:var(--coral)}

/* ---------- Status states ---------- */
.dot.off{background:#8a8a90;box-shadow:none}
.badge.off{background:rgba(138,138,144,.15);color:#8a8a90;border:1px solid rgba(138,138,144,.4)}

/* Keep the Live badge clear of the buttons on the featured card */
.card.featured{padding-top:62px}