:root{--bg:#0d0d1a;--bg2:#14122b;--card:#181830;--line:#2b2b4a;--text:#f2f2f7;--muted:#a8a8bd;--coral:#ff6b6b;--violet:#8f86f0;--gold:#fdcb6e;--teal:#00cec9;--green:#00b894}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:linear-gradient(160deg,var(--bg),var(--bg2));color:var(--text);font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;min-height:100vh}
body.gated{overflow:hidden}
main{max-width:860px;margin:0 auto;padding:0 20px 64px}
a{color:var(--violet)}
h1{font-size:2rem;line-height:1.2;margin:.6em 0 .3em}
h2{font-size:1.35rem;margin:2em 0 .6em}
.lede{color:var(--muted);font-size:1.05rem}
.site-head{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:860px;margin:0 auto;padding:18px 20px;flex-wrap:wrap}
.brand-lockup{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand-logo{width:40px;height:40px;border-radius:10px;display:block;flex:none}
.wordmark{font-family:Georgia,serif;font-size:1.6rem;font-weight:700;text-decoration:none;background:linear-gradient(90deg,var(--coral),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
.site-head nav{display:flex;gap:16px}
.site-head nav a{color:var(--muted);text-decoration:none;font-size:.95rem}
.site-head nav a:hover{color:var(--text)}
.crumbs{font-size:.85rem;color:var(--muted);padding:8px 0}
.crumbs a{color:var(--muted)}
.crumbs span{margin:0 4px}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:12px 0}
.tag{border:1px solid var(--line);border-radius:999px;padding:4px 12px;font-size:.8rem;color:var(--muted)}
.tag a{text-decoration:none;color:inherit}
.leaf-dark{border-color:#8b7355;color:#c9a227}
.leaf-cigar{border-color:#a06020;color:#d08030}
.leaf-blonde{border-color:rgba(253,203,110,.5);color:var(--gold)}
.bars{margin:16px 0}
.bar-row{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.bar-row dt{width:100px;font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.bar-row dd{margin:0;flex:1;display:flex;align-items:center;gap:10px}
.bar{height:8px;border-radius:4px;background:#24243f;flex:1;position:relative;overflow:hidden}
.bar::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--pct);border-radius:4px}
.bar-sweet::after{background:var(--green)}
.bar-cool::after{background:var(--teal)}
.bar-harsh::after{background:var(--coral)}
.bar-cloud::after{background:var(--gold)}
.bar-val{width:14px;text-align:right;font-size:.8rem;color:var(--muted)}
.facts{list-style:none;padding:0;margin:16px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
.facts li{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:.9rem}
.facts strong{display:block;color:var(--muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.notes{color:var(--muted);font-style:italic}
.pairs{list-style:none;padding:0;margin:12px 0;display:grid;gap:10px}
.pair{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.pair.great{border-color:rgba(0,206,201,.45)}
.pair>a{display:flex;justify-content:space-between;align-items:center;gap:12px;text-decoration:none;color:var(--text);font-weight:600}
.pair-score{color:var(--teal);font-variant-numeric:tabular-nums}
.pair-reason{margin:6px 0 0;color:var(--muted);font-size:.9rem}
.flavour-grid,.card-grid{list-style:none;padding:0;margin:16px 0;display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));align-items:start}
.flavour-grid a,.card-grid a{display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;text-decoration:none;color:var(--text)}
.flavour-grid a:hover,.card-grid a:hover{border-color:var(--violet)}
.fg-name{display:block;font-weight:600}
.fg-meta{display:block;color:var(--muted);font-size:.82rem;margin-top:2px}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.chip{border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.85rem;text-decoration:none;color:var(--muted)}
.chip:hover{border-color:var(--violet);color:var(--text)}
.faq div{border-top:1px solid var(--line);padding:14px 0}
.faq dt{font-weight:600;margin-bottom:4px}
.faq dd{margin:0;color:var(--muted)}
.cta{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;margin:40px 0 0}
.cta h2{margin-top:0}
.btn{display:inline-block;background:linear-gradient(90deg,var(--coral),var(--violet));color:#fff;text-decoration:none;font-weight:600;padding:12px 22px;border-radius:999px}
.btn-ghost{background:none;border:1px solid var(--line);color:var(--text)}
.hero{padding:32px 0 8px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.site-foot{border-top:1px solid var(--line);margin-top:56px;padding:28px 20px;max-width:860px;margin-inline:auto;color:var(--muted);font-size:.85rem}
.foot-nav{display:flex;gap:16px;flex-wrap:wrap;margin:12px 0}
.disclaimer{margin:0}
.copyright{margin:0}
/* The hidden attribute relies on the UA rule [hidden]{display:none}, which
   loses to the ID rule below. Without this the overlay never disappears. */
#age-gate[hidden]{display:none}
#age-gate{position:fixed;inset:0;z-index:100;background:rgba(8,8,18,.97);display:flex;align-items:center;justify-content:center;padding:24px}
.age-card{max-width:420px;text-align:center;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:32px 24px}
.age-mark{font-family:Georgia,serif;font-size:1.8rem;margin:0 0 8px;background:linear-gradient(90deg,var(--coral),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
.age-card h2{margin:0 0 8px;font-size:1.25rem}
.age-card p{color:var(--muted);margin:0 0 20px}
.age-actions{display:flex;flex-direction:column;gap:10px}
#age-yes{background:linear-gradient(90deg,var(--coral),var(--violet));color:#fff;border:0;border-radius:999px;padding:13px 20px;font-size:1rem;font-weight:600;cursor:pointer;font-family:inherit}
#age-no{color:var(--muted);font-size:.85rem}
@media(max-width:520px){h1{font-size:1.6rem}.bar-row dt{width:78px}}

.byline{color:var(--muted);margin:.2em 0 .6em;font-size:.95rem}

.skip{position:absolute;left:-9999px;top:0;background:var(--card);color:var(--text);padding:10px 16px;border-radius:0 0 8px 0;z-index:200}
.skip:focus{left:0}
.site-head{gap:12px}
.main-nav{display:flex;gap:14px;flex-wrap:wrap}
.head-cta{white-space:nowrap}
.btn-sm{padding:8px 16px;font-size:.85rem}
.app-strip{max-width:860px;margin:48px auto 0;padding:22px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:16px}
.app-strip h2{margin:0 0 4px;font-size:1.15rem}
.app-strip p{margin:0;color:var(--muted);font-size:.92rem}
.mega{display:grid;grid-template-columns:1.6fr 1fr;gap:32px;padding-bottom:28px}
.mega h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin:0 0 10px}
.mega-side{display:grid;gap:24px}
.mega-list{list-style:none;padding:0;margin:0;columns:2;column-gap:20px}
.mega-side .mega-list{columns:1}
.mega-list li{margin-bottom:6px;break-inside:avoid}
.mega-list a{color:var(--muted);text-decoration:none;font-size:.86rem}
.mega-list a:hover{color:var(--text);text-decoration:underline}
.contact-list{list-style:none;padding:0;margin:16px 0;display:grid;gap:12px}
.contact-list li{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.contact-label{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:4px}
.contact-list a{font-size:1.05rem;font-weight:600}
.contact-note{display:block;color:var(--muted);font-size:.85rem;margin-top:4px}
.support-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.related{margin-top:40px}
@media(max-width:700px){.mega{grid-template-columns:1fr;gap:24px}.mega-list{columns:2}.app-strip{flex-direction:column;align-items:flex-start}}

/* ---- Mobile first. Phones are the primary audience, so these override
   anything above them rather than the other way round. ---- */
@media(max-width:700px){
  /* The nav grew to nine items and was wrapping onto three rows, eating a
     third of the screen before any content. One scrollable row instead. */
  .site-head{padding:12px 16px;gap:10px;row-gap:6px}
  .brand-lockup{flex:1 1 auto;min-width:0}
  .head-cta{flex:0 0 auto}
  .main-nav{flex:1 0 100%;order:3;flex-wrap:nowrap;overflow-x:auto;gap:20px;
    scrollbar-width:none;-ms-overflow-style:none;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
    mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .main-nav::-webkit-scrollbar{display:none}
  /* 24px of text plus padding clears the 44px comfortable tap target */
  .main-nav a{white-space:nowrap;padding:10px 0;font-size:1rem}

  /* The flavour index runs to 176 screens on a phone. Keeping the search
     box pinned means you can filter from anywhere in the list rather than
     scrolling back to the top. */
  .searchwrap{position:sticky;top:0;z-index:20;margin:0 -20px;padding:12px 20px 10px;
    background:rgba(16,15,36,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
  .search-count{min-height:0}

  /* WCAG 2.2 asks for 24px minimum. Footer links were 18px. */
  .mega-list{columns:2;column-gap:16px}
  .mega-list li{margin-bottom:0;break-inside:avoid}
  .mega-list a{display:block;padding:7px 0;font-size:.9rem}
  .site-foot{padding:24px 20px}
  .mega{padding-bottom:20px}

  /* Comfortable targets on the things people actually tap */
  #age-no{display:inline-block;padding:12px 16px}
  .crumbs a{display:inline-block;padding:4px 0}
  .rank-links a,.more-link,.byline a{display:inline-block;padding:4px 0}
  .contact-list a{display:inline-block;padding:2px 0}
}

@media(max-width:420px){
  h1{font-size:1.5rem}
  .post-meta{gap:4px;font-size:.82rem}
  .rank-head{gap:8px}
  .rank-no{font-size:1.6rem;min-width:28px}
  .inline-cta{padding:18px}
  .takeaway{padding:16px 18px}
}

/* Category chips: same palette as the app's Browse Flavours screen */
.cats{list-style:none;display:flex;flex-wrap:wrap;gap:5px;padding:0;margin:6px 0 0}
.cat{font-size:.7rem;font-weight:600;letter-spacing:.02em;border-radius:999px;padding:2px 9px;border:1px solid}
/* The pill lives on the li. Reset the link inside it, otherwise the broader
   .flavour-grid a rule paints a filled card box inside every coloured ring. */
.cats a,.cats span{display:inline;background:none;border:0;padding:0;border-radius:0;text-decoration:none;color:inherit;font:inherit}
.cat-fruit{background:rgba(255,165,0,.16);color:#e8a334;border-color:rgba(255,165,0,.32)}
.cat-mint{background:rgba(0,206,201,.16);color:#38c2bd;border-color:rgba(0,206,201,.32)}
.cat-sweet{background:rgba(255,107,129,.16);color:#ea7a8c;border-color:rgba(255,107,129,.32)}
.cat-citrus{background:rgba(253,203,110,.16);color:#e9c377;border-color:rgba(253,203,110,.32)}
.cat-berry{background:rgba(214,48,149,.16);color:#c74f9e;border-color:rgba(214,48,149,.32)}
.cat-tropical{background:rgba(255,218,121,.16);color:#e9cf83;border-color:rgba(255,218,121,.32)}
.cat-creamy{background:rgba(234,221,202,.16);color:#e0d6c6;border-color:rgba(234,221,202,.32)}
.cat-floral{background:rgba(162,155,254,.16);color:#a19ce8;border-color:rgba(162,155,254,.32)}
.cat-paan{background:rgba(85,239,196,.16);color:#6cdcba;border-color:rgba(85,239,196,.32)}
.cat-spice{background:rgba(225,112,85,.16);color:#d67a63;border-color:rgba(225,112,85,.32)}
.cat-woody{background:rgba(139,115,85,.16);color:#b2926c;border-color:rgba(139,115,85,.32)}

/* Search */
.searchwrap{margin:18px 0 6px}
.searchbox{width:100%;box-sizing:border-box;background:var(--card);border:1px solid var(--line);border-radius:999px;color:var(--text);font:inherit;font-size:1rem;padding:13px 20px}
.searchbox::placeholder{color:var(--muted)}
.searchbox:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(143,134,240,.18)}
.search-count{margin:8px 2px 0;color:var(--muted);font-size:.85rem;min-height:1.2em}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fg-brand{display:block;color:var(--muted);font-size:.78rem;margin-top:1px}
.flavour-grid li[hidden],.card-grid li[hidden]{display:none}

/* Cards that carry category tags render them as a sibling of the link, so the
   surface has to sit on the list item. Left on the link, the tags fall outside
   the box and the card reads as a detached dark panel. */
/* The flavour index holds 869 cards in one document so the search box can see
   all of them. content-visibility lets the browser skip layout and paint for
   the ones off screen; the intrinsic size keeps the scrollbar honest. */
.flavour-grid li{content-visibility:auto;contain-intrinsic-size:auto 125px}
.flavour-grid li.has-tags{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.flavour-grid li.has-tags>a{background:none;border:0;padding:0;border-radius:0}
.flavour-grid li.has-tags:hover{border-color:var(--violet)}
.flavour-grid li.has-tags>a:hover{border-color:transparent}
/* Category cards carry the family tint on the list item, so the link inside
   must stay transparent rather than painting the flat card colour over it,
   and must inherit the colour so currentColor is the family and not the
   default text white. */
.cat-card{border-radius:12px}
.cat-card a{background:transparent;border-color:currentColor;color:inherit}
.cat-card a:hover{border-color:currentColor;background:rgba(255,255,255,.05)}
.cat-card .fg-name{color:inherit;font-size:1.05rem}
.cat-card .fg-meta{color:inherit;opacity:.72}

.knowledge{margin-top:44px;border-top:1px solid var(--line);padding-top:8px}
.fact-list{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:10px}
.fact-list li{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:.94rem}
.fact-list strong{color:var(--text)}
.fact-list a{color:var(--violet)}
/* Author byline and about page */
.rater{display:flex;gap:14px;align-items:flex-start;margin:40px 0 0;padding:16px 18px;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--violet);border-radius:12px}
.rater-avatar{width:56px;height:56px;border-radius:50%;flex:none;display:block}
.rater-who{margin:0;font-weight:600}
.rater-who a{color:var(--violet);text-decoration:none}
.rater-who a:hover{text-decoration:underline}
.rater-years{display:block;font-weight:400;font-size:.8rem;color:var(--muted);margin-top:1px}
.rater-note{margin:6px 0 0;color:var(--muted);font-size:.88rem}
.about-photo{display:block;width:100%;height:auto;border-radius:16px;border:1px solid var(--line);margin:12px 0 4px}
.about-head{margin-bottom:8px}
.about-head h1{margin:.5em 0 0}
.about-role{margin:4px 0 10px;color:var(--muted)}
.about .fact-list a{color:var(--violet)}

/* Consent bar. Sticky to the bottom of the viewport and deliberately large:
   the copy has to earn the yes, so it says what the data is for. */
.consent-bar{position:fixed;left:0;right:0;bottom:0;z-index:90;display:flex;gap:28px;align-items:center;justify-content:center;flex-wrap:wrap;padding:22px 24px calc(22px + env(safe-area-inset-bottom));background:rgba(20,18,43,.98);border-top:2px solid var(--violet);box-shadow:0 -18px 50px -20px #000}
.consent-bar[hidden]{display:none}
.consent-text{max-width:620px}
.consent-title{margin:0;font-size:1.15rem;font-weight:700;color:var(--text)}
.consent-copy{margin:6px 0 0;font-size:.95rem;color:var(--muted);line-height:1.5}
.consent-more{margin:8px 0 0;font-size:.85rem}
.consent-more a{color:var(--violet)}
.consent-actions{display:flex;gap:14px;align-items:center;flex-shrink:0}
.consent-yes{font-size:1rem;padding:14px 30px;white-space:nowrap;cursor:pointer;border:0;font-family:inherit}
.consent-no{background:none;border:0;color:var(--muted);font-size:.9rem;text-decoration:underline;cursor:pointer;font-family:inherit;padding:8px}
.consent-no:hover{color:var(--text)}
@media(max-width:720px){
  /* Kept tight: on a small phone this was taking nearly half the viewport,
     which reads as an obstacle rather than a question. */
  .consent-bar{gap:10px;padding:14px 18px calc(12px + env(safe-area-inset-bottom))}
  .consent-title{font-size:1rem}
  .consent-copy{font-size:.84rem;line-height:1.4}
  .consent-copy .long{display:none}
  .consent-more{margin-top:4px;font-size:.79rem}
  .consent-actions{width:100%;flex-direction:column-reverse;gap:2px}
  .consent-yes{width:100%;text-align:center;padding:12px 22px}
  .consent-no{padding:8px}
}

/* Articles: guides and best lists */
.post{--accent:var(--violet)}
.post-kicker{margin:18px 0 0;font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.post h1{margin:.15em 0 .3em}
.post-meta{color:var(--muted);font-size:.88rem;margin:0 0 18px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.post-meta a{color:var(--accent);text-decoration:none;font-weight:600}
.post-hero{display:block;width:100%;height:auto;border-radius:16px;border:1px solid var(--line)}
.takeaway{margin:26px 0;padding:20px 22px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid var(--line);border-left:4px solid var(--accent)}
.takeaway h2{margin:0 0 10px;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.takeaway ul{margin:0;padding-left:20px;display:grid;gap:8px}
.takeaway li{font-size:1rem}
.post-intro{font-size:1.08rem}
.post section{margin-top:34px}
.post-bullets{display:grid;gap:10px;padding-left:20px;margin:14px 0}
.steps{counter-reset:step;list-style:none;padding:0;margin:16px 0;display:grid;gap:12px}
.steps li{position:relative;padding:14px 16px 14px 54px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.steps li::before{counter-increment:step;content:counter(step);position:absolute;left:16px;top:14px;width:26px;height:26px;border-radius:50%;background:var(--accent);color:#0d0d1a;font-weight:800;font-size:.85rem;display:grid;place-items:center}
.rank-list{list-style:none;padding:0;margin:16px 0;display:grid;gap:18px}
.rank{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:14px;padding:18px 20px}
.rank-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:8px}
.rank-no{font-size:2rem;font-weight:800;line-height:1;color:var(--accent);opacity:.5;min-width:38px}
.rank h3{margin:0;font-size:1.2rem}
.rank-brand{margin:2px 0 0;color:var(--muted);font-size:.85rem}
.rank-fav{display:inline-block;margin:6px 0 0;padding:3px 10px;border-radius:999px;font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gold);background:rgba(253,203,110,.14);border:1px solid rgba(253,203,110,.34)}
.rank-fav a{color:var(--gold)}
.rank-ratio{margin:10px 0 0;font-size:.9rem;color:var(--muted)}
.rank-ratio strong{color:var(--text)}
.rank-links{margin:8px 0 0;font-size:.88rem}
.author-box{display:flex;gap:16px;align-items:flex-start;margin:40px 0 0;padding:20px;background:var(--card);border:1px solid var(--line);border-radius:14px}
.author-box img{width:72px;height:72px;border-radius:50%;flex:none}
.author-box-name{margin:0;font-weight:700}
.author-box-name a{color:var(--accent);text-decoration:none}
.author-box-role{margin:2px 0 8px;color:var(--muted);font-size:.85rem}
.author-box-bio{margin:0;color:var(--muted);font-size:.92rem}
.author-box-more{margin:8px 0 0;font-size:.88rem}
.inline-cta{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin:34px 0;padding:22px 24px;border-radius:16px;background:linear-gradient(135deg,rgba(255,107,107,.12),rgba(143,134,240,.12));border:1px solid var(--line)}
.inline-cta-title{margin:0;font-size:1.15rem;font-weight:700}
.inline-cta-copy{margin:6px 0 0;color:var(--muted);font-size:.92rem;max-width:52ch}
.post-grid{list-style:none;padding:0;margin:20px 0;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.post-card{--accent:var(--violet)}
.post-card>a{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;color:var(--text);height:100%}
.post-card>a:hover{border-color:var(--accent)}
.post-card img{display:block;width:100%;height:auto}
.post-card-kicker{display:block;padding:14px 16px 0;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.post-card-title{display:block;padding:4px 16px 0;font-size:1.12rem;font-weight:700}
.post-card-desc{display:block;padding:6px 16px 0;color:var(--muted);font-size:.88rem}
.post-card-meta{display:block;padding:10px 16px 16px;color:var(--muted);font-size:.78rem}
@media(max-width:520px){.author-box{flex-direction:column}.rank-head{gap:10px}}

.more-link{color:var(--violet);font-weight:600;text-decoration:none}
.more-link:hover{text-decoration:underline}

/* Games. Each card carries its own accent through --accent, so the art, the
   rule down the side and the player pill all read as one family. */
.platform-note{background:rgba(143,134,240,.12);border:1px solid rgba(143,134,240,.32);border-radius:12px;padding:12px 16px;font-size:.92rem;margin:18px 0 0}
.platform-note strong{color:var(--violet)}
.game-list{display:grid;gap:20px;margin:18px 0 0}
.game-card{position:relative;display:grid;grid-template-columns:128px 1fr;gap:24px;align-items:center;padding:24px;border-radius:18px;background:linear-gradient(135deg,rgba(var(--accent-rgb),.15),rgba(var(--accent-rgb),.02) 62%),var(--card);border:1px solid rgba(var(--accent-rgb),.3);box-shadow:0 20px 44px -30px #000;overflow:hidden}
.game-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);opacity:.85}
.game-art{color:var(--accent);display:grid;place-items:center;aspect-ratio:1;border-radius:15px;background:rgba(var(--accent-rgb),.09);border:1px solid rgba(var(--accent-rgb),.24)}
.game-art svg{width:64%;height:auto;display:block}
.game-body{min-width:0}
.game-no{position:absolute;top:16px;right:22px;font-size:2.6rem;font-weight:800;line-height:1;color:var(--accent);opacity:.16;letter-spacing:-.02em}
.game-hook{margin:0;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);opacity:.85}
.game-card h3{margin:4px 0 0;font-size:1.5rem;letter-spacing:-.01em}
.game-players{display:inline-block;margin:10px 0 0;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);background:rgba(var(--accent-rgb),.14);border:1px solid rgba(var(--accent-rgb),.34);border-radius:999px;padding:3px 11px}
.game-blurb{margin:12px 0 0}
.game-detail{margin:10px 0 0;color:var(--muted);font-size:.92rem}
@media(max-width:640px){
  .game-card{grid-template-columns:1fr;gap:16px;padding:20px}
  .game-art{aspect-ratio:auto;height:104px;width:104px}
  .game-no{font-size:2rem;top:14px;right:18px}
}

/* Footer brand list, collapsible so mobile is not three screens of links */
.mega-brands summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:8px 0;min-height:32px}
.mega-brands summary::-webkit-details-marker{display:none}
.mega-brands summary h2{margin:0}
.mega-brands summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);margin-top:-4px;transition:transform .15s}
.mega-brands[open] summary::after{transform:rotate(-135deg);margin-top:2px}
.mega-brands summary:hover h2{color:var(--text)}
.mega-brands .mega-list{margin-top:12px}