
  
  
  
  
  a{ color:inherit; text-decoration:none; }
  
  section{ position:relative; z-index:1; }

  /* ---------- HERO ---------- */
  .hero{
    position:relative; overflow:hidden;
    padding:76px 28px 46px; text-align:center;
    border-bottom:1px solid var(--border);
  }
  .hero-bg{ position:absolute; inset:0; z-index:0; }
  .hero-bg svg{ width:100%; height:100%; display:block; }
  .hero-content{ position:relative; z-index:2; }
  .hero h1{
    font-size:clamp(28px, 4.6vw, 44px); font-weight:700; margin:0 0 22px; line-height:1.2;
    color:var(--text); text-shadow:0 3px 14px rgba(0,0,0,0.6);
  }
  .hero h1 .accent{ color:var(--amber); text-shadow:0 0 26px rgba(245,166,35,0.4), 0 3px 14px rgba(0,0,0,0.6); }
  .hero p{ max-width:600px; margin:0 auto 30px; color:#d7dae0; font-size:16.5px; text-shadow:0 2px 8px rgba(0,0,0,0.6);}

  .search-bar{ display:flex; max-width:560px; margin:0 auto 30px; }
  .search-bar input{
    flex:1; font-family:'Inter', sans-serif; font-size:15px;
    background:rgba(21,23,29,0.92); color:var(--text);
    border:1px solid var(--border); border-right:none; border-radius:8px 0 0 8px;
    padding:13px 16px; outline:none;
  }
  .search-bar input::placeholder{ color:var(--text-dimmer); }
  .search-bar input:focus{ border-color:var(--amber); }

  .trust-row{ display:flex; justify-content:center; gap:34px; flex-wrap:wrap; }
  .trust-row span{
    display:flex; align-items:center; gap:7px; font-size:12.5px; color:#c9cdd6;
    font-family:'Inter', sans-serif; font-weight:500;
  }
  .trust-row svg{ width:15px; height:15px; color:var(--amber); flex-shrink:0; }

  /* ---------- BROWSE GAMES ---------- */
  .games-section{ padding:56px 28px 20px; text-align:center; }
  .games-section h2{ font-size:26px; font-weight:700; margin:0 0 8px; }
  .games-section .sub{ color:var(--text-dim); font-size:14.5px; margin-bottom:22px; text-transform:none; font-family:'Inter',sans-serif; }
  .sort-row{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:28px; position:relative; }
  .view-directory-link{
    position:absolute; right:0; font-family:'Oswald',sans-serif; font-size:12.5px; font-weight:600;
    color:var(--amber); text-decoration:none; display:flex; align-items:center; gap:4px;
  }
  .view-directory-link:hover{ text-decoration:underline; }
  .sort-row .sort-label{ font-family:'Oswald',sans-serif; font-size:12px; font-weight:600; letter-spacing:0.05em; color:var(--text-dimmer); text-transform:uppercase; }
  .sort-toggle{ display:inline-flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
  .sort-toggle button{
    font-family:'Oswald',sans-serif; font-size:12.5px; font-weight:600; letter-spacing:0.03em;
    color:var(--text-dim); background:var(--bg-2); border:none; padding:8px 16px; cursor:pointer;
    transition:all .15s ease;
  }
  .sort-toggle button + button{ border-left:1px solid var(--border); }
  .sort-toggle button:hover{ color:var(--text); }
  .sort-toggle button.active{ background:var(--amber); color:#0b0c0f; }

  .games-grid{
    display:grid; grid-template-columns:repeat(5, 1fr); gap:14px; text-align:left;
  }
  .game-card{
    display:block; background:var(--surface); border:1px solid var(--border); border-radius:10px;
    overflow:hidden; transition:border-color .15s ease, transform .15s ease;
  }
  .game-card:hover{ border-color:var(--amber-dim); transform:translateY(-2px); }
  .game-card .art{
    height:78px; display:flex; align-items:center; justify-content:center;
    border-bottom:1px solid var(--border);
  }
  .game-card .art .glogo{
    font-family:'Oswald', sans-serif; font-weight:700; font-size:15px; letter-spacing:0.03em;
    line-height:1.25; text-align:center; padding:0 10px;
  }
  .game-card .info{ padding:10px 14px 14px; }
  .game-card .gname{ font-family:'Oswald', sans-serif; font-weight:600; font-size:14px; text-transform:none; color:var(--text); margin-bottom:2px; }
  .game-card .gsub{ font-family:'Inter', sans-serif; font-size:11.5px; color:var(--text-dimmer); text-transform:none; }

  .suggest-card{
    grid-column:span 2;
    background:var(--surface); border:1px dashed var(--border); border-radius:10px;
    display:flex; align-items:center; gap:16px; padding:16px 18px;
  }
  .suggest-card .trophy{ width:44px; height:44px; color:var(--amber); flex-shrink:0; }
  .suggest-card .stxt{ flex:1; }
  .suggest-card .stxt strong{ display:block; font-family:'Oswald',sans-serif; font-size:14px; text-transform:none; margin-bottom:2px; }
  .suggest-card .stxt span{ font-family:'Inter',sans-serif; font-size:12px; color:var(--text-dim); }
  .suggest-card button{ margin-left:auto; flex-shrink:0; }

  @media (max-width:980px){ .games-grid{ grid-template-columns:repeat(3,1fr);} .suggest-card{ grid-column:span 3; } }
  @media (max-width:640px){ .games-grid{ grid-template-columns:repeat(2,1fr);} .suggest-card{ grid-column:span 2; flex-direction:column; text-align:center;} .suggest-card button{ margin-left:0;} }
  .no-results{ display:none; text-align:center; padding:40px 20px; color:var(--text-dim); font-family:'Inter',sans-serif; }
  .no-results.show{ display:block; }
  .no-results strong{ display:block; font-family:'Oswald',sans-serif; font-size:16px; color:var(--text); margin-bottom:6px; }
  .no-results button{ margin-top:14px; font-family:'Oswald',sans-serif; font-size:12.5px; font-weight:600; color:var(--amber); background:none; border:1px solid var(--amber-dim); border-radius:7px; padding:8px 16px; cursor:pointer; }
  .no-results button:hover{ background:rgba(245,166,35,0.1); }

  /* ---------- WHY TRUST ---------- */
  .why-section{ padding:56px 28px; }
  .why-heading{ text-align:center; font-size:24px; font-weight:700; margin:0 0 28px; }
  
  .why-box{
    border:1px solid var(--border); border-radius:12px; background:var(--surface);
    padding:34px 20px; display:grid; grid-template-columns:repeat(5,1fr); gap:24px;
  }
  .why-item{ text-align:center; }
  .why-item svg{ width:30px; height:30px; color:var(--amber); margin-bottom:12px; }
  .why-item h3{ font-size:13px; font-weight:600; margin:0 0 6px; letter-spacing:0.03em; }
  .why-item p{ font-family:'Inter',sans-serif; font-size:12.5px; color:var(--text-dim); text-transform:none; margin:0; line-height:1.5; }
  @media (max-width:900px){ .why-box{ grid-template-columns:repeat(2,1fr);} }

  /* ---------- THREE COLUMN WIDGETS ---------- */
  .widgets{ padding:10px 28px 56px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; }
  .widget{ background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:18px 20px; }
  .widget-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
  .widget-head h3{ font-size:14px; font-weight:600; margin:0; }
  .widget-head a{ font-family:'Inter',sans-serif; font-size:12px; color:var(--amber); text-transform:none; }
  .guide-item{ display:flex; gap:10px; margin-bottom:14px; align-items:flex-start; }
  .guide-item:last-child{ margin-bottom:0; }
  .guide-thumb{ width:44px; height:44px; border-radius:6px; flex-shrink:0; background:linear-gradient(135deg, var(--surface-2), var(--border)); }
  .guide-info .gtitle{ font-family:'Inter',sans-serif; font-size:13px; font-weight:500; color:var(--text); text-transform:none; line-height:1.3; }
  .guide-info .gdate{ font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--text-dimmer); margin-top:3px; }

  .coupon-item{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
  .coupon-item:last-child{ margin-bottom:0; }
  .coupon-badge{
    width:32px; height:32px; border-radius:7px; background:var(--surface-2); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center; font-family:'Oswald',sans-serif; font-weight:700; font-size:12px; flex-shrink:0;
  }
  .coupon-info{ flex:1; }
  .coupon-info .cname{ font-family:'Inter',sans-serif; font-size:13px; font-weight:600; text-transform:none; }
  .coupon-info .cdesc{ font-family:'Inter',sans-serif; font-size:11.5px; color:var(--text-dim); }
  .coupon-code{
    font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600; color:var(--amber);
    border:1px dashed var(--amber-dim); border-radius:5px; padding:5px 9px; flex-shrink:0;
  }

  .rank-item{ display:flex; align-items:center; gap:10px; margin-bottom:13px; }
  .rank-item:last-child{ margin-bottom:0; }
  .rank-num{ font-family:'JetBrains Mono',monospace; font-weight:600; font-size:13px; color:var(--text-dimmer); width:16px; }
  .rank-badge{ width:30px; height:30px; border-radius:7px; background:var(--surface-2); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; }
  .rank-name{ flex:1; font-family:'Inter',sans-serif; font-size:13.5px; font-weight:600; text-transform:none; }
  .rank-stars{ color:var(--amber); font-size:11.5px; letter-spacing:1px; }
  .rank-score{ font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text-dim); margin-left:4px; }

  @media (max-width:900px){ .widgets{ grid-template-columns:1fr; } }

  

  /* ============================================================
     MOBILE OVERRIDES — placed last on purpose so equal-specificity
     rules above (.trust-row, .hero, .games-section, etc.) don't
     win the cascade tie and silently cancel these out on phones.
     ============================================================ */
  @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; }

    .hero{ padding:26px 18px 18px; }
    .hero-content{ display:flex; flex-direction:column; }
    .hero h1{ order:1; margin-bottom:14px; font-size:26px; }
    .search-bar{ order:2; margin:0 0 16px; }
    .hero p{ order:3; margin:0 0 16px; font-size:13.5px; }
    .trust-row{
      order:4;
      display:grid !important; grid-template-columns:1fr 1fr !important;
      gap:10px 12px; flex-wrap:unset;
      justify-items:start; max-width:340px; margin:0 auto;
    }
    .trust-row span{ font-size:10.5px; text-align:left; }

    .games-section{ padding:28px 18px 12px; }
    .games-section .sub{ margin-bottom:14px; }
    .sort-row{ margin-bottom:16px; flex-wrap:wrap; row-gap:10px; }
    .view-directory-link{ position:static; width:100%; justify-content:center; order:3; }
  }

  /* ================= GUIDE ARTICLE PAGE ================= */
  .gd-hero{ padding:40px 28px 30px; border-bottom:1px solid var(--border); text-align:center; }
  .gd-hero .gd-cat{
    display:inline-block; font-family:'Oswald',sans-serif; font-size:11px; font-weight:600; letter-spacing:0.05em;
    color:var(--amber); background:rgba(245,166,35,0.12); border-radius:6px; padding:4px 11px; margin-bottom:14px; text-transform:uppercase;
  }
  .gd-hero h1{ font-size:30px; font-weight:700; margin:0 0 12px; max-width:760px; margin-left:auto; margin-right:auto; }
  .gd-hero p{ color:var(--text-dim); font-size:15px; max-width:640px; margin:0 auto 18px; }
  .gd-meta{ display:flex; justify-content:center; gap:18px; flex-wrap:wrap; font-family:'Inter',sans-serif; font-size:12.5px; color:var(--text-dimmer); }

  .gd-layout{ max-width:1100px; margin:0 auto; padding:40px 28px 60px; display:grid; grid-template-columns:220px 1fr; gap:48px; align-items:start; }
  .gd-toc{ position:sticky; top:20px; background:var(--bg-2); border:1px solid var(--border); border-radius:12px; padding:18px; min-width:0; }
  .gd-body{ min-width:0; }
  .gd-toc h4{ font-family:'Oswald',sans-serif; font-size:12px; font-weight:600; letter-spacing:0.05em; color:var(--text-dimmer); text-transform:uppercase; margin:0 0 12px; }
  .gd-toc a{ display:block; font-family:'Inter',sans-serif; font-size:13px; color:var(--text-dim); text-decoration:none; padding:6px 0; border-left:2px solid transparent; padding-left:10px; margin-left:-11px; }
  .gd-toc a:hover{ color:var(--amber); border-left-color:var(--amber-dim); }

  .gd-body h2{ font-family:'Oswald',sans-serif; font-size:22px; font-weight:600; margin:38px 0 14px; scroll-margin-top:20px; }
  .gd-body h2:first-child{ margin-top:0; }
  .gd-body h3{ font-family:'Inter',sans-serif; font-size:16px; font-weight:600; color:var(--text); margin:24px 0 10px; }
  .gd-body p{ color:var(--text-dim); font-size:14.5px; line-height:1.75; margin:0 0 16px; }
  .gd-body a{ color:var(--amber); text-decoration:none; }
  .gd-body a:hover{ text-decoration:underline; }
  .gd-body ul, .gd-body ol{ color:var(--text-dim); font-size:14.5px; line-height:1.75; padding-left:22px; margin:0 0 16px; }
  .gd-body li{ margin-bottom:8px; }
  .gd-body li::marker{ color:var(--amber); }

  .gd-callout{
    display:flex; gap:14px; align-items:flex-start; background:var(--bg-2); border:1px solid var(--border);
    border-left:3px solid var(--amber); border-radius:10px; padding:18px 20px; margin:20px 0;
  }
  .gd-callout.warn{ border-left-color:#e05c5c; }
  .gd-callout svg{ width:20px; height:20px; color:var(--amber); flex-shrink:0; margin-top:2px; }
  .gd-callout.warn svg{ color:#e05c5c; }
  .gd-callout p{ margin:0; font-size:13.5px; }

  .gd-vendor-mini{
    display:flex; align-items:center; gap:14px; background:var(--bg-2); border:1px solid var(--border);
    border-radius:10px; padding:14px 16px; margin-bottom:10px; text-decoration:none; transition:border-color .15s ease;
  }
  .gd-vendor-mini:hover{ border-color:var(--text-dimmer); text-decoration:none; }
  .gd-vendor-logo{
    width:40px; height:40px; border-radius:8px; flex-shrink:0;
    background:linear-gradient(135deg,#1a1410,#241b13); border:1px solid var(--border);
    display:flex; align-items:center; justify-content:center;
    font-family:'Oswald',sans-serif; font-weight:700; font-size:11px; color:var(--amber);
  }
  .gd-vendor-mini-info{ flex:1; min-width:0; }
  .gd-vendor-mini-name{ font-family:'Inter',sans-serif; font-weight:600; font-size:14px; color:var(--text); }
  .gd-vendor-mini-tag{ font-family:'Inter',sans-serif; font-size:12px; color:var(--text-dimmer); }
  .gd-vendor-mini-score{ font-family:'Oswald',sans-serif; font-weight:700; font-size:16px; color:var(--amber); white-space:nowrap; }

  .gd-compare-table{ width:100%; border-collapse:collapse; margin:20px 0; font-size:13.5px; }
  .gd-compare-table th{
    font-family:'Oswald',sans-serif; font-size:11px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
    color:var(--text-dimmer); text-align:left; padding:10px 14px; border-bottom:1px solid var(--border);
  }
  .gd-compare-table td{ padding:12px 14px; border-bottom:1px solid var(--border); color:var(--text-dim); }
  .gd-compare-table td:first-child, .gd-compare-table th:first-child{ color:var(--text); font-weight:600; }
  .gd-compare-table .win{ color:var(--boost); font-weight:600; }

  .gd-games-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 20px; }
  .gd-game-chip{
    font-family:'Inter',sans-serif; font-size:12.5px; font-weight:500; color:var(--text-dim);
    background:var(--bg-2); border:1px solid var(--border); border-radius:20px; padding:6px 14px;
    text-decoration:none; transition:all .15s ease;
  }
  .gd-game-chip:hover{ color:var(--amber); border-color:var(--amber-dim); text-decoration:none; }

  .gd-faq-item{ border-bottom:1px solid var(--border); padding:16px 0; }
  .gd-faq-item:last-child{ border-bottom:none; }
  .gd-faq-item h3{ margin:0 0 8px; }
  .gd-faq-item p{ margin:0; }

  .gd-author-box{
    display:flex; gap:14px; align-items:center; background:var(--bg-2); border:1px solid var(--border);
    border-radius:12px; padding:18px 20px; margin-top:36px;
  }
  .gd-author-avatar{
    width:44px; height:44px; border-radius:50%; flex-shrink:0;
    background:linear-gradient(135deg,#1a1410,#241b13); border:1px solid var(--amber-dim);
    display:flex; align-items:center; justify-content:center; font-family:'Oswald',sans-serif; font-weight:700; color:var(--amber);
  }
  .gd-author-box .name{ font-family:'Inter',sans-serif; font-weight:600; font-size:13.5px; color:var(--text); }
  .gd-author-box .role{ font-family:'Inter',sans-serif; font-size:12px; color:var(--text-dimmer); }

  .gd-related{ margin-top:40px; }
  .gd-related h2{ margin-top:0; }
  .gd-related-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .gd-related-card{
    display:block; background:var(--bg-2); border:1px solid var(--border); border-radius:10px;
    padding:16px 18px; text-decoration:none; transition:border-color .15s ease;
  }
  .gd-related-card:hover{ border-color:var(--text-dimmer); text-decoration:none; }
  .gd-related-cat{ font-family:'Oswald',sans-serif; font-size:10px; font-weight:600; letter-spacing:0.04em; color:var(--amber); text-transform:uppercase; margin-bottom:6px; }
  .gd-related-title{ font-family:'Inter',sans-serif; font-weight:600; font-size:14px; color:var(--text); }

  @media (max-width:900px){
    .gd-layout{ grid-template-columns:1fr; }
    .gd-toc{ position:static; }
  }
  @media (max-width:760px){
    .gd-hero{ padding:26px 18px 22px; }
    .gd-hero h1{ font-size:22px; }
    .gd-layout{ padding:24px 16px 16px; gap:24px; }
    .gd-related-grid{ grid-template-columns:1fr; }
  }
  .breadcrumb{ font-family:'Inter',sans-serif; font-size:13px; color:var(--text-dimmer); }
  .breadcrumb a:hover{ color:var(--amber); }
  .breadcrumb span{ margin:0 6px; }
