/* self-hosted variable fonts */
@font-face{
  font-family:"Manrope";font-style:normal;font-weight:400 800;font-display:swap;
  src:url("/assets/fonts/manrope-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo";font-style:normal;font-weight:400 800;font-stretch:100% 125%;font-display:swap;
  src:url("/assets/fonts/archivo-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* ==========================================================================
   The Daily Geo — design system
   Direction: warm cream paper + light-orange accents, wide grotesque display
   type (Archivo ≈ Sohne-Breit), clean Inter body. Card radius 16px, generous
   whitespace, editorial eyebrows. Single stylesheet, no JS.
   ========================================================================== */

:root{
  /* surfaces */
  --cream:#fff8ee;
  --cream-deep:#fdf0df;
  --peach:#fbe4d0;
  --paper:#ffffff;
  --line:#edddc9;
  --line-soft:#f5e9d9;

  /* ink */
  --ink:#1c1917;
  --ink-soft:#3b322b;
  --muted:#6f6156;
  --muted-light:#94857a;

  /* brand — terracotta / light orange */
  --orange:#e2703a;
  --orange-deep:#c2593a;
  --orange-dark:#a9482c;
  --orange-hot:#f27b2c;
  --orange-soft:#fbe3d2;
  --orange-tint:#fff3e8;
  --gold:#d9a441;
  --green:#146b45;

  --radius:16px;
  --radius-sm:10px;
  --radius-pill:999px;
  --shadow-soft:0 1px 2px rgba(28,25,23,.04), 0 12px 32px -22px rgba(28,25,23,.25);
  --shadow-lift:0 2px 4px rgba(28,25,23,.05), 0 22px 48px -26px rgba(194,89,58,.35);

  --wrap:68rem;
  --gutter:1.5rem;

  --font-display:"Archivo","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background-color:#fffdf9;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='0.085'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.6' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23m)' opacity='0.055'/%3E%3C/svg%3E"),
    radial-gradient(1100px 520px at 50% -160px, rgba(226,112,58,.07), transparent 70%),
    linear-gradient(180deg,#fffefb 0%,#fffaf3 55%,#fffdf9 100%);
  background-size:150px 150px, 80px 80px, 100% 100%, 100% 100%;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
.container{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);width:100%}
a{color:var(--orange-deep);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}
img{max-width:100%;height:auto}
hr{border:0;border-top:1px solid var(--line);margin:2rem 0}

/* ------------------------------------------------------------------ type */
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);line-height:1.15;margin:0 0 .5em;letter-spacing:-.015em}
h1{font-size:clamp(2.15rem,4.6vw,3.15rem);font-weight:750;font-variation-settings:"wdth" 112;letter-spacing:-.025em;margin-top:.2em}
h2{font-size:clamp(1.35rem,2.4vw,1.65rem);font-weight:700;font-variation-settings:"wdth" 108;margin-top:0}
h3{font-size:1.06rem;font-weight:650;letter-spacing:-.01em}
p{margin:.65em 0}
ul,ol{padding-left:1.3rem}
li{margin:.3em 0}
strong{font-weight:600}
.eyebrow,.section-kicker{
  font-family:var(--font-body);font-size:.72rem;font-weight:650;
  letter-spacing:.14em;text-transform:uppercase;color:var(--orange-deep);
  margin:0 0 .7rem;
}
.section-kicker{color:var(--muted-light);display:flex;align-items:center;gap:.6rem}
.section-kicker::after{content:"";flex:1;height:1px;background:var(--line);max-width:10rem}
.lede{font-size:1.12rem;line-height:1.65;color:var(--muted);max-width:46ch;margin:.8rem 0 0}
.meta-line{display:flex;flex-wrap:wrap;gap:.4rem 1rem;font-size:.82rem;color:var(--muted);margin:1.1rem 0 0}
.meta-line span{display:inline-flex;align-items:center;gap:.45rem}
.meta-line span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--orange);display:inline-block}

/* ------------------------------------------------------------------ chrome */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,253,249,.86);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid rgba(28,25,23,.08);
}
.header-inner{
  max-width:none;width:100%;
  display:flex;align-items:center;gap:1.4rem;
  padding:.68rem clamp(1rem,2.4vw,2rem);
}
/* designed wordmark: italic serif "The" + wide grotesque "Daily Ge" + globe */
.brand-logo{display:inline-flex;align-items:baseline;gap:0;text-decoration:none;line-height:1;white-space:nowrap;flex:0 0 auto}
.brand-logo:hover{text-decoration:none}
.brand-the{
  font-family:"Newsreader",Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;
  font-size:1.34rem;color:var(--muted);margin-right:.42rem;letter-spacing:-.005em;
  transform:translateY(-.02em);
}
.brand-word{
  display:inline-flex;align-items:baseline;
  font-family:var(--font-display);font-weight:800;font-size:1.62rem;letter-spacing:-.05em;
  font-variation-settings:"wdth" 118;color:var(--ink);
}
.brand-o{
  display:inline-block;width:.8em;height:.8em;margin:0 .02em 0 .07em;
  transform:translateY(.075em);flex:0 0 auto;
}
.brand-tm{font-family:var(--font-body);font-size:.32em;color:var(--muted-light);align-self:baseline;transform:translateY(-1em);margin-left:.14rem}
.brand-logo--drawer .brand-the{font-size:1.75rem;margin-right:.5rem}
.brand-logo--drawer .brand-word{font-size:2.1rem;letter-spacing:-.055em}
.brand-logo--drawer .brand-tm{font-size:.36em}
.brand-logo--footer .brand-the{font-size:1.22rem;color:#c8b5a2}
.brand-logo--footer .brand-word{font-size:1.48rem;color:#fff}
.brand-logo--footer .brand-tm{color:#a99380}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.site-nav{display:flex;align-items:center;flex-wrap:wrap;gap:.1rem 1.15rem;flex:1 1 auto;min-width:0}
.site-nav a{font-size:.85rem;color:var(--muted);font-weight:500;padding:.3rem 0;position:relative;white-space:nowrap}
.site-nav a:hover{color:var(--ink);text-decoration:none}
.site-nav a:not(.nav-cta):hover::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1.5px;background:var(--orange);border-radius:2px;
}
.nav-cta{
  margin-left:auto;padding:.42rem .95rem;flex:0 0 auto;
  border-radius:var(--radius-pill);border:1px solid var(--orange-deep);
  background:var(--orange-deep);color:#fff !important;
  font-weight:600 !important;font-size:.8rem !important;letter-spacing:.01em;
}
.nav-cta:hover{background:var(--orange-dark);border-color:var(--orange-dark);text-decoration:none}
.nav-more{position:relative}
.nav-more summary{cursor:pointer;font-size:.85rem;color:var(--muted);list-style:none;padding:.3rem 0;white-space:nowrap}
.nav-more summary::-webkit-details-marker{display:none}
.nav-more[open] summary{color:var(--orange-deep)}
.nav-more-list{
  position:absolute;z-index:60;top:2rem;left:0;min-width:12rem;padding:.45rem;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lift);display:grid;gap:.1rem;
}
.nav-more-list a{padding:.4rem .6rem;border-radius:8px;color:var(--ink);font-size:.9rem}
.nav-more-list a:hover{background:var(--orange-tint);color:var(--orange-deep);text-decoration:none}

/* menu button + header actions */
.menu-btn{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:2.35rem;height:2.35rem;padding:0;border:1px solid transparent;border-radius:50%;
  background:transparent;color:var(--ink-soft);cursor:pointer;
  transition:background .12s ease,border-color .12s ease;
}
.menu-btn:hover{background:var(--orange-tint);border-color:var(--orange-soft);color:var(--orange-deep)}
.menu-bars{display:inline-flex;flex-direction:column;justify-content:center;gap:3.5px;width:18px;height:14px}
.menu-bars span{display:block;height:1.6px;border-radius:2px;background:currentColor}
.menu-bars span:nth-child(2){width:80%}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:.55rem;flex:0 0 auto}
.header-actions .nav-cta{margin-left:0}
.icon-btn{
  width:2.35rem;height:2.35rem;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(28,25,23,.1);border-radius:50%;background:rgba(255,255,255,.55);
  color:var(--ink-soft);cursor:pointer;transition:background .12s ease,border-color .12s ease,color .12s ease;
}
.icon-btn:hover{background:var(--orange-tint);border-color:var(--orange-soft);color:var(--orange-deep)}

/* playlin-style "my games" square: mini tiles + count badge */
.games-btn{
  position:relative;flex:0 0 auto;width:2.55rem;height:2.55rem;padding:5px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(28,25,23,.1);border-radius:11px;
  background:rgba(28,25,23,.06);cursor:pointer;
  transition:background .12s ease,border-color .12s ease,transform .12s ease;
}
.games-btn:hover{background:rgba(194,89,58,.14);border-color:var(--orange-soft)}
.games-tiles{display:grid;grid-template-columns:1fr 1fr;gap:2.5px;width:100%;height:100%}
.games-tiles--single{grid-template-columns:1fr;grid-template-rows:1fr}
.game-tile{
  display:flex;align-items:center;justify-content:center;
  border-radius:4px;color:#fff;font-family:var(--font-display);font-weight:750;
  font-size:.52rem;letter-spacing:0;line-height:1;text-transform:uppercase;
}
.game-tile--img{background:#fff;overflow:hidden}
.game-tile--img img{display:block;width:100%;height:100%;object-fit:contain;padding:10%}
.games-badge{
  position:absolute;top:-6px;right:-6px;min-width:1.05rem;height:1.05rem;padding:0 .2rem;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;background:#e2482f;border:1.5px solid #fffdf9;
  color:#fff;font-size:.62rem;font-weight:700;line-height:1;
}
.games-badge[hidden]{display:none}
body.no-scroll{overflow:hidden}

/* slide-out drawer (playlin-style) */
.drawer-overlay{
  position:fixed;inset:0;z-index:90;background:rgba(28,25,23,.38);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.site-drawer{
  position:fixed;top:0;left:0;bottom:0;z-index:100;
  width:min(21.5rem,88vw);display:flex;flex-direction:column;
  background:#ffffff;border-right:1px solid rgba(28,25,23,.08);
  box-shadow:24px 0 60px -30px rgba(28,25,23,.35);
  transform:translateX(-102%);transition:transform .22s ease;
  overflow-y:auto;
}
.site-drawer.open{transform:translateX(0)}
.drawer-head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.35rem 1.25rem .9rem;background:#fff;position:sticky;top:0;z-index:2;
}
.drawer-head .icon-btn{border:0;background:transparent;width:2.1rem;height:2.1rem;font-size:1.5rem;color:var(--ink)}
.drawer-head .icon-btn:hover{background:#f5f2ec;color:var(--ink)}
.drawer-brand{
  font-family:var(--font-display);font-size:1.35rem;font-weight:800;
  letter-spacing:-.04em;color:var(--ink);text-decoration:none;
  font-variation-settings:"wdth" 108;
}
.drawer-brand:hover{color:var(--ink);text-decoration:none}
.drawer-body{padding:.3rem .8rem 1.2rem;flex:1}
.drawer-group{display:grid;padding:.55rem 0}
.drawer-group + .drawer-group{border-top:1px solid var(--line-soft);margin-top:.35rem;padding-top:.9rem}
.drawer-item{
  display:flex;align-items:center;gap:.95rem;padding:.82rem .75rem;border-radius:12px;
  font-family:var(--font-body);font-size:1.02rem;font-weight:550;color:var(--ink);
  text-decoration:none;background:none;border:0;text-align:left;cursor:pointer;
}
.drawer-item-btn{width:100%}
.drawer-item:hover{background:#f5f2ec;text-decoration:none;color:var(--ink)}
.drawer-item svg{width:20px;height:20px;flex:0 0 auto;color:var(--muted)}
.drawer-item:hover svg{color:var(--orange-deep)}
.drawer-count{
  margin-left:auto;padding:.1rem .5rem;border-radius:999px;
  background:var(--orange-tint);color:var(--orange-deep);font-size:.75rem;font-weight:700;
}
.drawer-count[hidden]{display:none}
.drawer-plain{display:block;padding:.72rem .75rem;border-radius:12px;font-size:.96rem;font-weight:500;color:var(--ink-soft);text-decoration:none}
.drawer-plain:hover{background:#f5f2ec;text-decoration:none;color:var(--ink)}
.drawer-muted .drawer-plain{color:var(--muted-light);font-size:.9rem}
.drawer-muted .drawer-plain:hover{color:var(--ink-soft)}
.drawer-foot{
  margin:0;padding:1rem 1.35rem 1.4rem;border-top:1px solid var(--line-soft);
  font-size:.73rem;line-height:1.55;color:var(--muted-light);background:#fff;
}

/* right-side "My games" drawer (playlin-style square in the header) */
.games-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:100;
  width:min(24rem,92vw);display:flex;flex-direction:column;
  background:#fffdf9;border-left:1px solid rgba(28,25,23,.1);
  box-shadow:-24px 0 60px -30px rgba(28,25,23,.45);
  transform:translateX(102%);transition:transform .22s ease;overflow-y:auto;
}
.games-drawer.open{transform:translateX(0)}
.games-drawer-title{font-family:var(--font-display);font-size:1.02rem;font-weight:750;margin:0}
.games-body{padding:.4rem 1rem 1.4rem;flex:1}
.games-note{margin:.5rem .6rem .8rem;font-size:.84rem;color:var(--muted);line-height:1.55}
.game-list{display:grid;gap:.2rem}
.game-row{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:.4rem;
  padding:.45rem .5rem;border-radius:10px;
}
.game-row:hover{background:var(--orange-tint)}
.game-row-main{
  display:grid;grid-template-columns:2.2rem 1fr;column-gap:.75rem;align-items:center;
  color:var(--ink);text-decoration:none;min-width:0;
}
.game-row-main:hover{text-decoration:none}
.game-row .game-tile{width:2.2rem;height:2.2rem;border-radius:8px;font-size:.82rem}
.game-row-name{display:block;font-weight:650;font-size:.94rem;line-height:1.3}
.game-row-rule{display:block;color:var(--muted);font-size:.79rem;line-height:1.4;margin-top:.1rem}
.row-toggle{
  flex:0 0 auto;padding:.32rem .6rem;border:1px solid var(--line);border-radius:999px;
  background:rgba(255,255,255,.75);color:var(--muted);font-family:var(--font-body);
  font-size:.72rem;font-weight:600;cursor:pointer;
}
.row-toggle:hover{border-color:var(--orange);color:var(--orange-deep)}
.row-toggle.is-saved{background:var(--orange-tint);border-color:var(--orange-soft);color:var(--orange-deep)}

/* search overlay */
.search-overlay{position:fixed;inset:0;z-index:95;background:rgba(28,25,23,.32);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.search-panel{
  position:fixed;top:0;left:0;right:0;z-index:110;
  background:#fffdf9;border-bottom:1px solid rgba(28,25,23,.1);
  box-shadow:0 30px 60px -30px rgba(28,25,23,.4);
  transform:translateY(-102%);transition:transform .2s ease;
  padding:1rem clamp(1rem,4vw,3rem) 1.2rem;
}
.search-panel.open{transform:translateY(0)}
.search-box{display:flex;align-items:center;gap:.7rem;max-width:52rem;margin:0 auto}
.search-ico{color:var(--muted-light);display:inline-flex}
.search-box input{
  flex:1;min-width:0;padding:.7rem .2rem;border:0;border-bottom:1px solid var(--line);
  background:transparent;font-family:var(--font-body);font-size:1.05rem;color:var(--ink);outline:none;
}
.search-box input:focus{border-bottom-color:var(--orange)}
.search-results{max-width:52rem;margin:.9rem auto 0;display:grid;gap:.15rem}
.search-hint{color:var(--muted);font-size:.9rem;margin:.5rem 0}
.search-item{
  display:grid;grid-template-columns:4.6rem 1fr;column-gap:.9rem;align-items:baseline;
  padding:.6rem .7rem;border-radius:9px;color:var(--ink);text-decoration:none;
}
.search-item:hover{background:var(--orange-tint);text-decoration:none}
.search-item .search-type{
  font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-deep);font-weight:650;
}
.search-item .search-title{font-weight:600}
.search-item .search-summary{grid-column:2;color:var(--muted);font-size:.84rem;margin-top:.1rem}

/* save-to-favorites button on game pages */
.save-row{margin:.4rem 0 0}
.save-btn{
  display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;
  border:1px solid var(--line);border-radius:var(--radius-pill);
  background:rgba(255,255,255,.7);color:var(--ink-soft);font-size:.86rem;font-weight:600;
  font-family:var(--font-body);cursor:pointer;transition:background .12s ease,border-color .12s ease;
}
.save-btn:hover{border-color:var(--orange);color:var(--orange-deep)}
.save-btn .save-ico{color:var(--orange);font-size:1rem;line-height:1}
.save-btn.saved{background:var(--orange-tint);border-color:var(--orange-soft);color:var(--orange-deep)}

/* ------------------------------------------------------------------ hero */
.hero{padding:2.9rem 0 2.2rem;max-width:58rem}
.hero h1{margin-top:.1rem}
.hero .eyebrow{margin-bottom:.9rem}
.game-hero{padding:1.6rem 0 2.4rem;max-width:48rem}
.game-hero h1{margin-bottom:.35em}
.game-hero .lede{max-width:44ch}
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1.1rem}
.chips span{
  display:inline-flex;align-items:center;gap:.4rem;padding:.28rem .7rem;
  font-size:.74rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-pill);
}
.chips span:first-child{color:var(--orange-deep);border-color:var(--orange-soft);background:var(--orange-tint)}

/* ------------------------------------------------------------------ buttons */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.72rem 1.2rem;border-radius:var(--radius-pill);border:1px solid transparent;
  font-family:var(--font-body);font-size:.92rem;font-weight:600;line-height:1.2;
  background:var(--paper);color:var(--ink);cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-primary{
  background:linear-gradient(180deg,var(--orange) 0%,var(--orange-deep) 100%);
  border-color:var(--orange-deep);color:#fff;
  box-shadow:0 10px 24px -12px rgba(194,89,58,.7);
}
.btn-primary:hover{background:linear-gradient(180deg,var(--orange-hot) 0%,var(--orange-dark) 100%);color:#fff}
.btn-ghost{background:var(--paper);border-color:var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--orange);color:var(--orange-deep)}
.cta-wrap{margin:1.4rem 0 .4rem;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem}
.cta-note{display:block;font-size:.8rem;color:var(--muted-light);margin:.35rem 0 0;max-width:26rem}

/* ------------------------------------------------------------------ today module */
.today-box{
  position:relative;overflow:hidden;
  margin:1.6rem 0 3rem;padding:2rem;
  background:
    radial-gradient(120% 140% at 100% 0%,var(--peach) 0%,transparent 55%),
    linear-gradient(135deg,var(--orange-tint) 0%,#fffdf9 100%);
  border:1px solid var(--line);border-radius:calc(var(--radius) + 6px);
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);
  gap:1.25rem 2.5rem;align-items:center;
}
.today-box::before{
  content:"";position:absolute;right:-70px;top:-90px;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,rgba(242,123,44,.16),transparent 70%);pointer-events:none;
}
.today-box .eyebrow{
  display:inline-flex;align-items:center;gap:.45rem;margin:0 0 .6rem;
  background:var(--orange-deep);color:#fff;padding:.28rem .7rem;border-radius:var(--radius-pill);
  letter-spacing:.1em;font-size:.68rem;
}
.today-box h2{margin:0 0 .45rem}
.today-box .section-intro{margin:0;color:var(--muted);font-size:.94rem;max-width:40ch}
.today-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.35rem;box-shadow:var(--shadow-soft);display:grid;gap:.5rem;
  grid-template-rows:auto 1fr auto;color:var(--ink);
}
.today-card:hover{text-decoration:none;border-color:var(--orange);box-shadow:var(--shadow-lift)}
.today-card .card-name{font-family:var(--font-display);font-size:1.45rem;font-weight:750;font-variation-settings:"wdth" 110}
.today-card .card-rule{font-size:.95rem;color:var(--muted)}

/* ------------------------------------------------------------------ featured game cover (home first screen) */
.hero--compact{padding:1.9rem 0 .9rem;max-width:56rem}
.hero--compact h1{font-size:clamp(1.8rem,3.7vw,2.55rem)}
.hero--compact .lede{font-size:1.04rem}
.feature-hero{
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(1.5rem,4vw,3.4rem);align-items:center;margin:.6rem 0 3.4rem;
}
.feature-media{min-width:0}
.cover-art{
  position:relative;aspect-ratio:4/3;border-radius:20px;overflow:hidden;
  background:#f4e8d2;border:1px solid #e3d3b3;
  box-shadow:0 2px 4px rgba(28,25,23,.05),0 30px 60px -35px rgba(122,82,48,.5);
}
.cover-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.cover-stamp{
  position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) rotate(-1.4deg);
  width:min(80%,26rem);text-align:center;padding:1rem 1.2rem .95rem;
  background:rgba(250,242,226,.92);border:1px solid rgba(122,82,48,.55);
  box-shadow:0 10px 30px -18px rgba(90,60,30,.45);
}
.cover-stamp::before{content:"";position:absolute;inset:5px;border:1px solid rgba(122,82,48,.3);pointer-events:none}
.cover-stamp-kicker{margin:0 0 .35rem;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:#8a6a45}
.cover-stamp-title{
  margin:0;font-family:var(--font-display);font-weight:800;font-variation-settings:"wdth" 120;
  font-size:clamp(1.7rem,3.4vw,2.3rem);letter-spacing:.05em;color:#3b2a18;line-height:1;
}
.cover-stamp-sub{margin:.55rem 0 0;font-size:.68rem;line-height:1.5;letter-spacing:.02em;color:#7a5c39}
.cover-tag{
  position:absolute;left:1rem;bottom:1rem;padding:.35rem .7rem;border-radius:999px;
  background:var(--orange-deep);color:#fff;font-size:.64rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
}
.feature-copy{max-width:32rem}
.feature-name{font-size:clamp(2.4rem,4.6vw,3.4rem);margin:.12em 0 .08em;font-variation-settings:"wdth" 116;letter-spacing:-.04em}
.feature-byline{margin:0 0 .8rem;font-size:.8rem;color:var(--muted-light);letter-spacing:.06em;text-transform:uppercase}
.feature-desc{font-size:1.04rem;color:var(--ink-soft);max-width:34ch;margin:0 0 .3rem}
.feature-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin:1.15rem 0 .5rem}
.btn-lg{padding:.95rem 1.6rem;font-size:1.02rem;border-radius:999px}
.feature-note{font-size:.78rem;color:var(--muted-light);margin:.1rem 0 .9rem}
.feature-facts{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem .5rem;padding:0;margin:0}
.feature-facts li{
  display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .7rem;
  border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.6);
  font-size:.76rem;color:var(--muted);
}
.feature-facts strong{color:var(--orange-deep);font-weight:750}

/* ------------------------------------------------------------------ sections */
.home-section{margin:2.6rem 0 0;padding-top:2rem;border-top:1px solid var(--line-soft)}
.home-section:first-of-type{border-top:0;padding-top:0}
.section-head{max-width:46rem;margin-bottom:1.4rem}
.section-intro{color:var(--muted);margin:.35rem 0 0;font-size:.97rem}
.card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:1.2rem 0 0}

/* ------------------------------------------------------------------ cards */
.card{
  display:grid;grid-template-rows:auto 1fr auto;gap:.55rem;
  padding:1.25rem 1.25rem 1.15rem;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--radius);color:var(--ink);
  box-shadow:var(--shadow-soft);transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;
}
.card:hover{transform:translateY(-2px);border-color:var(--orange);box-shadow:var(--shadow-lift);text-decoration:none}
.card-name{font-family:var(--font-display);font-size:1.08rem;font-weight:700;font-variation-settings:"wdth" 108;letter-spacing:-.01em}
.card-rule{font-size:.92rem;line-height:1.5;color:var(--muted)}
.card-meta{font-size:.76rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted-light)}
.card-btn{
  justify-self:start;margin-top:.25rem;padding:.42rem .85rem;
  border-radius:var(--radius-pill);background:var(--orange-tint);border:1px solid var(--orange-soft);
  color:var(--orange-deep);font-size:.82rem;font-weight:650;
}
.card:hover .card-btn{background:var(--orange-deep);border-color:var(--orange-deep);color:#fff}
.card-pending{border-style:dashed;box-shadow:none;background:transparent}
.card-note{justify-self:start;margin-top:.25rem;font-size:.78rem;color:var(--muted-light)}

/* ------------------------------------------------------------------ guide list */
.guide-list{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:.6rem}
.guide-list li{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:.95rem 1.15rem;box-shadow:var(--shadow-soft);
}
.guide-list li a{font-family:var(--font-display);font-weight:650;font-size:1rem;color:var(--ink)}
.guide-list li a:hover{color:var(--orange-deep);text-decoration:none}
.guide-summary{display:block;color:var(--muted);font-size:.9rem;margin-top:.2rem}

/* ------------------------------------------------------------------ game page modules */
.module{margin:2.6rem 0 0}
.module > h2{font-size:1.35rem;margin-bottom:1rem;padding-bottom:.6rem;border-bottom:1px solid var(--line-soft)}
.panel{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.7rem 1.8rem;box-shadow:var(--shadow-soft);
}
.panel p{max-width:72ch}
.panel p:first-child{margin-top:0}
.panel p:last-child{margin-bottom:0}
.highlights{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.highlights li{
  counter-increment:hl;position:relative;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.2rem 1.2rem 1.1rem 1.2rem;box-shadow:var(--shadow-soft);font-size:.95rem;color:var(--ink-soft);
}
.highlights{counter-reset:hl}
.highlights li::before{
  content:"0" counter(hl);display:block;font-family:var(--font-display);font-weight:750;
  color:var(--orange);font-size:.8rem;letter-spacing:.12em;margin-bottom:.55rem;
}
.faq{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:.35rem 1.7rem;box-shadow:var(--shadow-soft)}
.faq h3{margin:1.25rem 0 .2rem;font-size:1rem}
.faq h3:first-child{margin-top:1.1rem}
.faq p{margin:.2rem 0 1.25rem;color:var(--muted);font-size:.95rem;max-width:70ch}
.faq h3+p{border-bottom:1px solid var(--line-soft);padding-bottom:1.15rem}
.faq h3:last-of-type+p{border-bottom:0;padding-bottom:.9rem;margin-bottom:.9rem}
.steps{list-style:none;counter-reset:step;padding:0;margin:0;display:grid;gap:.8rem}
.steps li{
  counter-increment:step;position:relative;padding:1rem 1.2rem 1rem 3.4rem;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);box-shadow:var(--shadow-soft);
}
.steps li::before{
  content:counter(step);position:absolute;left:1.1rem;top:1rem;
  width:1.6rem;height:1.6rem;border-radius:50%;
  background:var(--orange-tint);border:1px solid var(--orange-soft);color:var(--orange-deep);
  font-family:var(--font-display);font-weight:750;font-size:.85rem;
  display:flex;align-items:center;justify-content:center;
}
.game-details{
  display:grid;grid-template-columns:minmax(8rem,11rem) 1fr;gap:.65rem 1.5rem;margin:0;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem 1.7rem;box-shadow:var(--shadow-soft);
}
.game-details dt{font-size:.78rem;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-light);padding-top:.15rem}
.game-details dd{margin:0;font-size:.98rem}
.disclaimer{font-size:.8rem;color:var(--muted-light);border-top:1px dashed var(--line);padding-top:1rem;margin-top:2.4rem;max-width:70ch}

/* ------------------------------------------------------------------ guides / core pages */
.breadcrumb{font-size:.8rem;color:var(--muted-light);margin:1.5rem 0 .2rem;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--orange-deep)}
.breadcrumb span[aria-current]{color:var(--ink-soft)}
.guide-meta{font-size:.82rem;color:var(--muted-light);letter-spacing:.02em;margin:.4rem 0 0}
.article-prose{max-width:68ch;margin:0}
.article-prose h1{max-width:52rem}
.article-prose h2{margin:2.6rem 0 .7rem;font-size:1.4rem}
.article-prose h3{margin:1.8rem 0 .4rem}
.article-prose p{font-size:1.03rem;line-height:1.8;color:var(--ink-soft)}
.article-prose ul,.article-prose ol{margin:.8rem 0 1.2rem;color:var(--ink-soft)}
.article-prose li{margin:.4rem 0;line-height:1.75}
.article-prose blockquote{
  margin:1.6rem 0;padding:1rem 1.4rem;background:var(--orange-tint);
  border-left:3px solid var(--orange);border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--ink-soft);
}
.article-prose blockquote p{margin:.2rem 0;font-size:1rem}
.article-prose code{background:var(--cream-deep);border-radius:6px;padding:.1em .4em;font-size:.9em}
.article-prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--orange-soft)}
.article-prose a:hover{text-decoration-color:var(--orange)}
.article-prose .card-grid{margin-top:1.2rem}

/* ------------------------------------------------------------------ footer */
.site-footer{
  margin-top:4.5rem;background:#241c16;color:#f4e8d8;padding:3.2rem 0 2.4rem;
}
.site-footer .container{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:2rem 3rem;align-items:start}
.footer-brand{font-family:var(--font-display);font-size:1.15rem;font-weight:750;letter-spacing:-.02em;color:#fff;margin:0 0 .6rem;display:flex;align-items:center;gap:.5rem}
.footer-tagline{color:#c8b5a2;font-size:.9rem;max-width:32ch;margin:0}
.footer-col h3{font-family:var(--font-body);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#a99380;margin:0 0 .7rem;font-weight:650}
.footer-col{display:grid;gap:.35rem}
.footer-col a{color:#f4e8d8;font-size:.92rem;text-decoration:none}
.footer-col a:hover{color:var(--orange-hot)}
.footer-legal{grid-column:1/-1;border-top:1px solid rgba(244,232,216,.14);padding-top:1.4rem;margin-top:.8rem}
.footer-disclaimer{color:#a99380;font-size:.82rem;max-width:64rem;margin:0 0 .5rem}
.footer-copy{color:#8f7b69;font-size:.78rem;margin:0}

/* ------------------------------------------------------------------ misc */
.ad-slot{margin:1.5rem 0}
.skip-link{position:absolute;left:-999px}
.skip-link:focus{left:1rem;top:1rem;z-index:100;background:#fff;padding:.6rem 1rem;border-radius:8px;border:1px solid var(--line)}
.pending-note{color:var(--muted-light);font-size:.85rem}

/* ------------------------------------------------------------------ home (minimal, cover-first) */
.home{padding-bottom:.5rem}
.home-lead{max-width:52rem;padding:3rem 0 2.2rem}
.home-lead h1{font-size:clamp(2.2rem,5vw,3.4rem);letter-spacing:-.045em;font-variation-settings:"wdth" 114;margin:0 0 .55em}
.home-lead-sub{font-size:1.12rem;color:var(--muted);max-width:44ch;margin:0}
.cover-feature{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(1.4rem,3.5vw,3rem);align-items:center;margin:0 0 4rem}
.cover-shot{
  position:relative;display:block;border-radius:18px;overflow:hidden;text-decoration:none;
  border:1px solid rgba(28,25,23,.12);background:#2b2a26;
  box-shadow:0 2px 4px rgba(28,25,23,.06),0 34px 70px -40px rgba(28,25,23,.6);
}
.cover-shot:hover{text-decoration:none}
.cover-shot img{display:block;width:100%;height:auto;transition:transform .5s ease}
.cover-shot:hover img{transform:scale(1.015)}
.cover-shot-tag{
  position:absolute;left:1rem;bottom:1rem;padding:.35rem .75rem;border-radius:999px;
  background:rgba(28,25,23,.82);color:#fff;font-size:.66rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.cover-side{max-width:26rem}
.cover-title{font-size:clamp(2.4rem,4.8vw,3.6rem);letter-spacing:-.05em;font-variation-settings:"wdth" 116;margin:.1em 0 .14em}
.cover-line{font-size:1.06rem;color:var(--ink-soft);margin:0 0 1.15rem;max-width:30ch}
.cover-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 .8rem}
.cover-note{font-size:.8rem;color:var(--muted-light);margin:0}
.cover-links{display:flex;flex-wrap:wrap;gap:.35rem 1rem;margin:.85rem 0 0;font-size:.82rem}
.cover-links a{color:var(--orange-deep);font-weight:600;text-decoration:none}
.cover-links a:hover{text-decoration:underline}
.home-hub{max-width:52rem;margin:0 0 3.4rem;padding-top:.4rem}
.home-hub h2{font-size:1.35rem;letter-spacing:-.02em;margin:0 0 .9rem}
.home-hub p{color:var(--ink-soft);font-size:1rem;line-height:1.7;margin:0 0 .9rem}
.home-hub a{color:var(--orange-deep);font-weight:600}
.home-faq{margin-top:1.4rem;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line-soft)}
.faq-item summary{cursor:pointer;padding:.9rem 0;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--orange-deep);font-weight:500}
.faq-item[open] summary::after{content:"\2013"}
.faq-answer{padding:0 0 .9rem;color:var(--muted);font-size:.94rem;line-height:1.65}
.faq-answer p{margin:0}
.index-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding-bottom:.8rem;border-bottom:1px solid var(--line)}
.index-head h2{font-size:1.15rem;letter-spacing:-.01em;margin:0}
.index-head a{font-size:.85rem;font-weight:600;color:var(--orange-deep)}
.games-index,.guides-index{margin:0 0 3.2rem}
.game-rows{list-style:none;margin:0;padding:0}.game-rows li + li{border-top:1px solid var(--line-soft)}
.game-row{display:grid;grid-template-columns:minmax(7rem,12rem) 1fr auto;align-items:baseline;gap:.4rem 1.4rem;padding:1rem .2rem;color:var(--ink);text-decoration:none}
.game-row:hover{text-decoration:none;background:linear-gradient(90deg,rgba(226,112,58,.07),transparent 70%)}
.game-row-name{font-family:var(--font-display);font-weight:700;font-size:1.08rem;font-variation-settings:"wdth" 108;letter-spacing:-.015em}
.game-row-rule{color:var(--muted);font-size:.93rem}
.game-row-arrow{color:var(--orange-deep);font-size:1rem;transition:transform .15s ease}
.game-row:hover .game-row-arrow{transform:translateX(3px)}

/* playlin-style screenshot cards */
.game-cards{
  display:grid;grid-auto-flow:column;grid-auto-columns:13rem;gap:1.1rem;
  overflow-x:auto;padding:.35rem .15rem 1rem;scroll-snap-type:x proximity;
  scrollbar-width:none;
}
.game-cards::-webkit-scrollbar{display:none}
.game-cards--grid{
  grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));
  overflow:visible;padding:0;
}
.game-card{scroll-snap-align:start;min-width:0}
.game-card-media{
  position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;
  background:#efe6d7;border:1px solid rgba(28,25,23,.1);box-shadow:var(--shadow-soft);
}
.game-card-media a{display:block;height:100%}
.game-card-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.game-card-media:hover img{transform:scale(1.03)}
.card-add{
  position:absolute;top:-1px;right:-1px;width:2.9rem;height:3.9rem;padding:0 0 .55rem;z-index:2;
  display:grid;place-items:center;border:0;
  background:rgba(250,241,226,.93);color:var(--ink);
  -webkit-backdrop-filter:blur(8px) saturate(1.08);backdrop-filter:blur(8px) saturate(1.08);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 84%,0 100%);
  filter:drop-shadow(0 4px 10px rgba(28,25,23,.14));
  cursor:pointer;
  transition:background .25s,color .25s;
}
.card-add::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.42),transparent 60%);
  pointer-events:none;
}
.card-add:hover{background:rgba(255,247,234,.98);color:var(--orange-deep)}
.card-add:active{background:rgba(248,232,206,.98)}
.card-add svg{width:1.05rem;height:1.05rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
.card-add:hover svg{transform:scale(1.1)}
.card-add:active svg{transform:scale(.92)}
.card-add .ico-plus{transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.card-add .ico-check{display:none}
.card-add.saved{background:rgba(63,138,99,.94);color:#fff;filter:drop-shadow(0 5px 10px rgba(46,110,80,.28))}
.card-add.saved .ico-plus{display:none}
.card-add.saved .ico-check{display:block;animation:checkPop .38s cubic-bezier(.2,.9,.25,1.4)}
.card-add.is-saving{background:rgba(250,241,226,.96);color:var(--ink);filter:drop-shadow(0 4px 10px rgba(28,25,23,.14))}
.card-add.is-saving .ico-plus{display:block;transform:rotate(45deg)}
.card-add.is-saving .ico-check{display:none}
@keyframes checkPop{0%{transform:scale(.35);opacity:0}70%{transform:scale(1.18)}100%{transform:scale(1);opacity:1}}
@keyframes cardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.game-card{animation:cardIn .5s cubic-bezier(.2,.8,.2,1) both}
.game-card:nth-child(2){animation-delay:.05s}
.game-card:nth-child(3){animation-delay:.1s}
.game-card:nth-child(4){animation-delay:.15s}
.game-card:nth-child(5){animation-delay:.2s}
.game-card:nth-child(6){animation-delay:.25s}
@keyframes heartPop{0%{transform:scale(1)}50%{transform:scale(1.35)}100%{transform:scale(1)}}
@keyframes heroIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.game-hero--center{animation:heroIn .45s ease both}
.save-btn.saved .save-ico{animation:heartPop .4s ease}
@media (prefers-reduced-motion:reduce){
  .game-card,.game-hero--center{animation:none}
  .card-add,.card-add.saved .ico-check{transition:none;animation:none}
  .save-btn.saved .save-ico{animation:none}
}
.game-card-tag{
  display:inline-flex;align-items:center;gap:.42rem;margin:.75rem 0 .35rem;
  padding:.26rem .6rem;border-radius:8px;background:rgba(28,25,23,.06);
  font-size:.72rem;font-weight:600;color:var(--ink-soft);letter-spacing:.01em;
}
.tag-dot{width:6px;height:6px;border-radius:50%;background:var(--orange)}
.game-card-name{margin:0 0 .2rem;font-size:1.04rem;letter-spacing:-.012em;line-height:1.25}
.game-card-name a{color:var(--ink);text-decoration:none}
.game-card-name a:hover{color:var(--orange-deep);text-decoration:none}
.game-card-rule{color:var(--muted);font-size:.87rem;line-height:1.5;margin:0;max-width:26ch}
.game-card-fallback{
  display:flex;width:100%;height:100%;align-items:center;justify-content:center;
  color:#fff;font-family:var(--font-display);font-weight:800;font-size:2rem;
}
@media (max-width:640px){
  .game-cards{grid-auto-columns:10.5rem;gap:.9rem}
  .game-card-rule{font-size:.83rem}
}
.guide-links{list-style:none;margin:.2rem 0 0;padding:0;display:grid;gap:.1rem}
.guide-links li + li{border-top:1px solid var(--line-soft)}
.guide-links a{display:block;padding:.7rem .2rem;color:var(--ink-soft);font-size:.95rem;text-decoration:none}
.guide-links a:hover{color:var(--orange-deep)}
.game-shot{margin:1.8rem 0 0;padding:0;text-align:center}
.game-shot img{display:block;width:100%;max-width:22rem;height:auto;margin:0 auto;border-radius:16px;border:1px solid rgba(28,25,23,.12);box-shadow:0 24px 50px -35px rgba(28,25,23,.5)}
.game-shot--wide img{max-width:40rem}
.game-shot figcaption{margin-top:.6rem;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-light)}
.game-shot--placeholder .shot-placeholder{
  width:min(100%,22rem);aspect-ratio:4/5;margin:0 auto;border-radius:10px;
  border:1px solid rgba(28,25,23,.09);background:linear-gradient(160deg,#fdf6ea,#f5e7d2 65%,#efddc4);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1rem;
  box-shadow:0 16px 44px -30px rgba(28,25,23,.35);
}
.shot-placeholder img{width:3.2rem;height:3.2rem;object-fit:contain;border-radius:8px;background:#fff;padding:.45rem;box-shadow:0 6px 16px -12px rgba(28,25,23,.4)}
.shot-placeholder-mark{display:grid;place-items:center;width:3.4rem;height:3.4rem;border-radius:12px;background:#fff;color:var(--orange-deep);font-family:var(--font-display);font-weight:800;font-size:1.4rem}
.shot-placeholder span:last-child{font-family:var(--font-display);font-weight:750;font-size:1.05rem;letter-spacing:-.01em;color:var(--ink-soft)}

/* category page */
.cat-hero{max-width:46rem;margin:0 auto;padding:2.6rem 0 2.8rem;text-align:center}
.cat-icon{
  display:inline-grid;place-items:center;width:3.3rem;height:3.3rem;margin:0 auto 1.1rem;
  border-radius:14px;background:var(--orange-deep);color:#fffdf9;
  box-shadow:0 14px 30px -18px rgba(194,89,58,.6);
}
.cat-hero h1{font-size:clamp(2.3rem,5vw,3.3rem);letter-spacing:-.045em;margin:0 0 .5em;line-height:1.04}
.cat-hero .lede{font-size:1.02rem;color:var(--muted);max-width:38rem;margin:0 auto;line-height:1.6}
.cat-label{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-light);
  margin:0 0 1.4rem;padding-top:1.2rem;border-top:1px solid var(--line-soft);
}
.cat-label span:last-child{letter-spacing:.06em;color:var(--muted)}
.category-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(7.4rem,1fr));
  gap:2.2rem 1.7rem;padding:0;
}
.category-grid .game-card-media{border-radius:12px}
.category-grid .card-add{width:2.1rem;height:2.9rem;padding-bottom:.4rem;right:-1px;top:-1px}
.category-grid .card-add svg{width:12px;height:12px}
.category-grid .game-card-tag{display:none}
.category-grid .game-card-name{font-size:.88rem;margin:.6rem 0 .18rem;line-height:1.28;letter-spacing:-.01em}
.category-grid .game-card-rule{
  font-family:"Inter","Helvetica Neue",Arial,sans-serif;font-weight:400;font-size:.76rem;
  line-height:1.55;color:var(--muted);letter-spacing:.004em;
}
@media (max-width:640px){
  .cat-hero{padding:1.6rem 0 1.8rem}
  .category-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6rem 1rem}
  .category-grid .game-card-rule{font-size:.7rem}
}

/* game page — Playlin-style hero */
.game-page{max-width:52rem}
.game-breadcrumb{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.game-hero--center{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:1rem 0 1.6rem;
  min-height:min(calc(100vh - 4.2rem), 54rem);min-height:min(calc(100svh - 4.2rem), 54rem);
}
.game-chips{display:flex;justify-content:center;flex-wrap:wrap;gap:.42rem;margin:0 0 .3rem}
.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.38rem .78rem;border-radius:999px;background:rgba(28,25,23,.055);font-size:.76rem;font-weight:550;color:var(--ink-soft);line-height:1}
.chip-ico{width:13px;height:13px;color:var(--muted);flex:0 0 auto}
.game-title{display:flex;flex-direction:column;align-items:center;margin:.3em 0 .45em}
.game-title-name{font-family:var(--font-display);font-weight:800;font-size:clamp(2.5rem,5.6vw,3.4rem);letter-spacing:-.05em;line-height:1;font-variation-settings:"wdth" 112;color:var(--ink)}
.game-title-sub{margin-top:.6rem;font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-light)}
.game-tagline{font-size:1rem;color:var(--muted);max-width:38rem;margin:0 auto 1.15rem;line-height:1.5}
.game-hero--center .game-shot{width:fit-content;max-width:100%;margin:0 auto;text-align:left}
.game-hero--center .game-shot img{
  width:auto;max-width:min(30rem,100%);
  max-height:44vh;max-height:44svh;
  border-radius:10px;border:1px solid rgba(28,25,23,.09);
  box-shadow:0 16px 44px -30px rgba(28,25,23,.5);
}
.game-hero--center .game-shot figcaption{padding-left:2px}
.game-cta{display:flex;justify-content:center;margin:1.5rem 0 .7rem}
.btn-xl{min-width:16rem;justify-content:center;padding:.98rem 2.1rem;font-size:1rem;border-radius:999px}
.game-cta-note{text-align:center;font-size:.78rem;color:var(--muted-light);margin:0 0 .9rem}
.game-hero--center .save-row{display:flex;justify-content:center;margin:0 0 .6rem}
.game-page .module{max-width:44rem;margin-left:auto;margin-right:auto;margin-bottom:2rem}
.game-page .disclaimer{max-width:44rem;margin-left:auto;margin-right:auto}
.game-page .module h2{font-size:1.1rem;margin:0 0 .65rem;letter-spacing:-.01em}
.game-page .panel{padding:1.05rem 1.2rem}
.game-page .panel p{font-size:.92rem;line-height:1.65}
.game-page .faq{background:none;border:0;border-top:1px solid var(--line-soft);border-radius:0;box-shadow:none;padding:0}
.game-page .faq h3{font-size:.93rem;margin:.85rem 0 .15rem}
.game-page .faq h3:first-child{margin-top:.85rem}
.game-page .faq p{font-size:.88rem;margin:.1rem 0 0;padding-bottom:.8rem;border-bottom:1px solid var(--line-soft)}
.game-page .faq h3:last-of-type+p{border-bottom:0;padding-bottom:.2rem;margin-bottom:0}
.game-page .steps{display:block;counter-reset:step;gap:0}
.game-page .steps li{
  background:none;border:0;border-bottom:1px solid var(--line-soft);border-radius:0;box-shadow:none;
  padding:.62rem 0 .62rem 2.2rem;font-size:.89rem;line-height:1.55;
}
.game-page .steps li::before{left:0;top:.62rem;width:1.4rem;height:1.4rem;font-size:.76rem}
.game-page .game-details{padding:.85rem 1.1rem}
.game-page .game-details dt,.game-page .game-details dd{font-size:.86rem;padding:.28rem 0}
.similar-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:3.4rem 3.8rem;padding:0;max-width:38rem}
.similar-grid .game-card-media{aspect-ratio:4/5;border-radius:12px}
.similar-grid .game-card-tag{display:none}
.similar-grid .game-card-name{font-size:.86rem;margin:.55rem 0 .12rem;line-height:1.3}
.similar-grid .game-card-rule{font-size:.74rem;line-height:1.42;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:640px){
  .similar-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}
  .similar-grid .game-card-name{font-size:.78rem}
  .similar-grid .game-card-rule{font-size:.68rem}
}
.similar-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2rem}
.similar-list li{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.58rem 0;border-bottom:1px solid var(--line-soft);font-size:.9rem}
.similar-list a{color:var(--ink);font-weight:600;text-decoration:none}
.similar-list a:hover{color:var(--orange-deep)}
.similar-list span:last-child{color:var(--muted-light);font-size:.77rem;white-space:nowrap}
@media (max-width:640px){.similar-list{grid-template-columns:1fr}}
@media (max-width:640px){
  .game-title-name{font-size:clamp(2.1rem,8.5vw,2.7rem)}
  .game-title-sub{font-size:.6rem;letter-spacing:.15em;margin-top:.5rem}
  .game-tagline{font-size:.95rem;margin-bottom:1rem}
  .game-hero--center{min-height:0}
  .game-hero--center .game-shot img{max-height:38vh;max-height:38svh}
}
@media (max-height:720px){
  .game-hero--center{min-height:auto;padding:.6rem 0 1.2rem}
  .game-hero--center .game-shot img{max-height:34svh}
  .game-title-name{font-size:clamp(2rem,5vw,2.6rem)}
}
@media (max-width:900px){
  .home-lead{padding:2rem 0 1.4rem}
  .cover-feature{grid-template-columns:1fr;gap:1.4rem}
  .cover-side{max-width:none}
  .game-row{grid-template-columns:1fr auto;gap:.15rem 1rem}
  .game-row-rule{grid-column:1/-1}
}

/* ------------------------------------------------------------------ responsive */
@media (max-width:900px){
  :root{--gutter:1.25rem}
  h1{font-size:clamp(1.9rem,6.4vw,2.6rem)}
  .hero{padding:2.2rem 0 1.6rem}
  .hero--compact{padding:1.5rem 0 .6rem}
  .feature-hero{grid-template-columns:1fr;gap:1.4rem;margin:.4rem 0 2.6rem}
  .cover-stamp{width:min(82%,26rem)}
  .feature-copy{max-width:none}
  .header-inner{flex-wrap:wrap;row-gap:.35rem;padding:.55rem 1rem}
  .menu-label{display:none}
  .today-box{grid-template-columns:1fr;padding:1.6rem}
  .card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .highlights{grid-template-columns:1fr}
  .site-footer .container{grid-template-columns:1fr 1fr}
  .nav-cta{display:none}
}
@media (max-width:640px){
  body{font-size:16px}
  .card-grid{grid-template-columns:1fr}
  .card{grid-template-rows:auto auto auto}
  .header-inner{gap:.35rem .9rem;padding:.55rem .9rem}
  .site-nav{gap:.1rem .8rem;margin-left:0;min-width:0;flex-basis:100%}
  .site-nav a{font-size:.84rem}
  .brand-word{font-size:1.36rem}
  .brand-the{font-size:1.16rem;margin-right:.32rem}
  .brand-tm{font-size:.3em}
  .site-nav a[href="/geography-games/"]{display:none}
  .site-nav .nav-more{display:none}
  .game-details{grid-template-columns:1fr;gap:.15rem}
  .game-details dt{margin-top:.6rem}
  .panel{padding:1.25rem}
  .faq{padding:.35rem 1.2rem}
  .steps li{padding:1rem 1.1rem 1rem 3.2rem}
  .site-footer .container{grid-template-columns:1fr}
  .article-prose p{font-size:1rem}
}
@media (max-width:420px){
  .site-nav a:nth-of-type(n+5){display:none}
  .brand{font-size:.98rem}
  .brand-word{font-size:1.2rem}
  .brand-the{font-size:1.02rem;margin-right:.28rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .card,.btn,.card-add{transition:none}
  .card:hover,.btn:hover{transform:none}
  .game-card,.game-hero--center{animation:none}
  .save-modal-card,.save-modal-backdrop{animation:none}
  .card-add.saved .ico-check,.save-btn.saved .save-ico{animation:none}
}

/* ------------------------------------------------------------------ "saved to My dailies" modal */
body.modal-open{overflow:hidden}
.save-modal{position:fixed;inset:0;z-index:140;display:grid;place-items:center;padding:1.2rem}
.save-modal-backdrop{
  position:absolute;inset:0;background:rgba(28,25,23,.38);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:modalFade .2s ease both;
}
.save-modal-card{
  position:relative;width:min(100%,27rem);background:#fdf3e4;border-radius:22px;
  padding:1.7rem 1.6rem 1.4rem;text-align:left;
  box-shadow:0 30px 80px -30px rgba(28,25,23,.55);
  animation:modalPop .32s cubic-bezier(.2,.9,.25,1.2) both;
}
.save-modal-mark{
  display:inline-grid;place-items:center;width:3rem;height:3rem;border-radius:14px;
  background:#fff;color:var(--orange-deep);
  box-shadow:0 8px 18px -12px rgba(28,25,23,.5);margin-bottom:.9rem;
}
.save-modal-mark svg{width:1.6rem;height:1.6rem}
.save-modal-mark.has-img img{display:block;width:2rem;height:2rem;object-fit:contain;border-radius:6px}
.save-modal-card h3{font-size:1.3rem;letter-spacing:-.02em;margin:0 0 .45rem;line-height:1.2}
.save-modal-text{margin:0 0 1.1rem;color:var(--muted);font-size:.92rem;line-height:1.55}
.save-modal-text strong{color:var(--ink)}
.save-modal-demo{
  position:relative;display:flex;align-items:center;gap:.9rem;
  background:#fffdf9;border:1px solid rgba(28,25,23,.08);border-radius:14px;
  padding:.75rem .9rem;margin-bottom:1.15rem;
}
.demo-brand{font-family:var(--font-display);font-weight:750;font-size:.82rem;letter-spacing:-.02em;color:var(--ink)}
.demo-tiles{display:grid;grid-template-columns:repeat(2,.85rem);grid-template-rows:repeat(2,.85rem);gap:2px;margin-left:auto}
.demo-tile{display:grid;place-items:center;border-radius:3px;color:#fff;font-size:.5rem;font-weight:700}
.demo-tile--img{background:#fff;overflow:hidden}
.demo-tile--img img{display:block;width:100%;height:100%;object-fit:contain;padding:1px}
.demo-ring{
  position:absolute;right:-.2rem;top:50%;transform:translateY(-50%) rotate(-6deg);
  width:3rem;height:3rem;border:1.6px dashed var(--orange-deep);border-radius:10px;pointer-events:none;
}
.demo-badge{
  position:absolute;right:1.35rem;top:.2rem;background:#c0392b;color:#fff;
  font-size:.56rem;font-weight:700;line-height:1;padding:.18rem .27rem;border-radius:999px;
}
.save-modal-btn{width:100%;justify-content:center;padding:.85rem 1rem;font-size:.98rem}
.save-modal.is-closing .save-modal-card{animation:modalOut .2s ease both}
.save-modal.is-closing .save-modal-backdrop{animation:modalFadeOut .2s ease both}
@keyframes modalFade{from{opacity:0}to{opacity:1}}
@keyframes modalFadeOut{from{opacity:1}to{opacity:0}}
@keyframes modalPop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes modalOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(8px) scale(.98)}}

/* homepage top-8 horizontal card rail */
.home-cards{grid-auto-columns:7.5rem;gap:1rem;padding:.4rem .1rem 1.2rem}
.home-cards .game-card-media{border-radius:12px}
.home-cards .game-card-tag{font-size:.63rem;padding:.22rem .5rem;margin:.55rem 0 .25rem;gap:.3rem}
.home-cards .game-card-name{font-size:.88rem;margin:.1rem 0 .16rem}
.home-cards .game-card-rule{font-size:.74rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.home-cards .card-add{width:2rem;height:2.75rem;padding-bottom:.35rem}
.home-cards .card-add svg{width:11px;height:11px}
@media (max-width:900px){.home-cards{grid-auto-columns:8.5rem}}

/* homepage rail: fit 8 cards, no tag chip, full one-line rule */
.home-cards{grid-auto-columns:7rem;gap:.9rem}
.home-cards .game-card-tag{display:none}
.home-cards .game-card-name{margin:.6rem 0 .18rem;font-size:.84rem}
.home-cards .game-card-rule{display:block;font-size:.71rem;line-height:1.42;letter-spacing:.002em}


/* ================= playlin-style homepage modules ================= */
.home-lead{padding:2.6rem 0 1.2rem;max-width:52rem}
.home-lead h1{font-size:clamp(2.15rem,4.4vw,3rem);letter-spacing:-.045em;margin:.12em 0 .4em}
.home-lead-sub{font-size:1.04rem;color:var(--muted);max-width:44ch;margin:0 0 .9rem}
.featured-game{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;padding:1.2rem 0 3.6rem}
.phone-wrap{display:flex;justify-content:center}
.phone{position:relative;width:min(17.5rem,78%);aspect-ratio:9 / 18.5;border-radius:2.3rem;background:linear-gradient(155deg,#3c3c3c,#111);padding:.55rem;box-shadow:0 40px 70px -40px rgba(28,25,23,.55)}
.phone-notch{position:absolute;top:.95rem;left:50%;transform:translateX(-50%);width:34%;height:1rem;background:#111;border-radius:999px;z-index:2}
.phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;border-radius:1.85rem}
.featured-copy{max-width:31rem}
.featured-title{font-size:clamp(2.3rem,4.4vw,3.2rem);letter-spacing:-.045em;margin:.15em 0 .1em}
.featured-by{margin:0 0 .7rem;font-size:.8rem;color:var(--muted-light);letter-spacing:.04em}
.featured-desc{font-size:1.04rem;color:var(--ink-soft);max-width:32ch;margin:0 0 1.2rem}
.featured-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin:0 0 .7rem}
.featured-quick{font-size:.82rem;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.discover-block{text-align:center;max-width:44rem;margin:0 auto;padding:3rem 0;border-top:1px solid var(--line-soft)}
.discover-block h2{font-size:clamp(1.8rem,3.4vw,2.5rem);letter-spacing:-.04em;margin:.25em 0 .4em}
.discover-block p{color:var(--muted);margin:0 auto 1.3rem;max-width:36rem}
.rail-block{margin:0 0 3.6rem}
.rail-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin:0 0 1.2rem}
.rail-head h2{font-size:1.35rem;letter-spacing:-.02em;margin:.2em 0 0}
.rail-head a{font-size:.82rem;color:var(--orange-deep)}
.rail-wrap{position:relative;display:flex;align-items:center;gap:.5rem}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:10.5rem;gap:1.1rem;overflow-x:auto;scroll-snap-type:x proximity;padding:.25rem .1rem .8rem;scrollbar-width:none;flex:1}
.rail::-webkit-scrollbar{display:none}
.rail-card{scroll-snap-align:start;min-width:0;display:flex;flex-direction:column}
.rail-thumb{display:block;aspect-ratio:4/5;border-radius:12px;overflow:hidden;border:1px solid rgba(28,25,23,.1);background:#efe6d7}
.rail-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.rail-thumb:hover img{transform:scale(1.03)}
.rail-fallback{display:grid;place-items:center;width:100%;height:100%;font-family:var(--font-display);font-weight:800;font-size:2rem;color:#fff;background:var(--orange-deep)}
.rail-tag{display:inline-flex;align-items:center;gap:.35rem;margin:.6rem 0 .3rem;font-size:.66rem;color:var(--muted)}
.rail-dot{width:5px;height:5px;border-radius:50%;background:var(--orange)}
.rail-name{font-size:.92rem;margin:0 0 .55rem}
.rail-name a{color:var(--ink);text-decoration:none}
.rail-actions{display:flex;gap:.35rem;flex-wrap:wrap}
.rail-btn{font-size:.7rem;padding:.42rem .6rem;border-radius:999px;background:var(--orange-deep);color:#fff;border:1px solid var(--orange-deep);text-decoration:none;font-weight:600;cursor:pointer;line-height:1}
.rail-btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.rail-btn:hover{text-decoration:none}
.rail-quick{font-size:.7rem;color:var(--muted);margin-top:.5rem;text-decoration:underline;text-underline-offset:2px}
.rail-arrow{flex:0 0 auto;width:2.2rem;height:2.2rem;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;font-size:.95rem;display:grid;place-items:center}
.rail-arrow:hover{border-color:var(--orange);color:var(--orange-deep)}
.chart-block{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,4vw,3.6rem);align-items:start;padding:3rem 0;border-top:1px solid var(--line-soft)}
.chart-copy h2{font-size:clamp(1.7rem,3.2vw,2.4rem);letter-spacing:-.04em;margin:.2em 0 .5em}
.chart-note{color:var(--muted-light);font-size:.82rem;margin:0 0 1.4rem}
.chart-lead{display:flex;gap:1rem;align-items:center;padding:1rem;border:1px solid var(--line);border-radius:16px;background:var(--paper);box-shadow:var(--shadow-soft);text-decoration:none;color:var(--ink);max-width:22rem}
.chart-lead:hover{text-decoration:none}
.chart-lead-shot{flex:0 0 5.5rem;aspect-ratio:4/5;border-radius:10px;overflow:hidden;background:#efe6d7}
.chart-lead-shot img{width:100%;height:100%;object-fit:cover;display:block}
.chart-lead-body{display:flex;flex-direction:column;gap:.15rem}
.chart-lead-kicker{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-deep);font-weight:700}
.chart-lead-name{font-family:var(--font-display);font-weight:750;font-size:1.25rem;letter-spacing:-.02em}
.chart-lead-vol{font-size:.8rem;color:var(--muted)}
.chart-newest{margin:1.2rem 0 0;font-size:.85rem;color:var(--muted);display:flex;flex-direction:column;gap:.2rem}
.chart-newest a{color:var(--ink);font-weight:650;text-decoration:none}
.chart-newest a:hover{color:var(--orange-deep)}
.chart-panel{background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-soft);overflow:hidden}
.chart-table{width:100%;border-collapse:collapse;font-size:.86rem}
.chart-table th{font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-light);text-align:left;padding:.8rem 1rem;border-bottom:1px solid var(--line-soft);font-weight:700}
.chart-table td{padding:.62rem 1rem;border-bottom:1px solid var(--line-soft)}
.chart-table tr:last-child td{border-bottom:0}
.chart-rank{color:var(--muted-light);font-weight:700;width:2.2rem;font-variant-numeric:tabular-nums}
.chart-game a{color:var(--ink);font-weight:600;text-decoration:none}
.chart-game a:hover{color:var(--orange-deep)}
.chart-vol{color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
.chart-table th:last-child{text-align:right}
.feed-block{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,4vw,3.4rem);align-items:center;padding:2.6rem;margin:2rem 0 3.4rem;border-radius:22px;background:linear-gradient(135deg,#fdf2e3,#f6e6d2);border:1px solid rgba(194,89,58,.14)}
.feed-logo{font-family:var(--font-display);font-weight:800;font-size:.95rem;letter-spacing:-.02em;color:var(--ink);display:inline-block;margin-bottom:.7rem}
.feed-copy h2{font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.04em;margin:.2em 0 .5em}
.feed-copy p{color:var(--muted);margin:0 0 1.2rem;max-width:34ch}
.feed-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.feed-list{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.feed-list li{display:flex;gap:.85rem;align-items:flex-start;background:rgba(255,253,249,.78);border:1px solid rgba(28,25,23,.06);border-radius:14px;padding:.85rem .95rem}
.feed-ico{flex:0 0 2rem;height:2rem;border-radius:10px;background:var(--orange-deep);color:#fff;display:grid;place-items:center;font-size:.78rem;font-weight:700}
.feed-list a{color:var(--ink);font-weight:650;text-decoration:none;font-size:.9rem}
.feed-list a:hover{color:var(--orange-deep)}
.feed-list p{margin:.15rem 0 0;color:var(--muted);font-size:.78rem;line-height:1.5}
.icymi-block{padding:2.4rem 0 3rem;border-top:1px solid var(--line-soft)}
.icymi-list{list-style:none;margin:1rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.2rem 2.4rem}
.icymi-list li{display:flex;flex-direction:column;padding:.8rem 0;border-bottom:1px solid var(--line-soft)}
.icymi-list a{color:var(--ink);font-weight:650;text-decoration:none;font-size:.95rem}
.icymi-list a:hover{color:var(--orange-deep)}
.icymi-list span{color:var(--muted);font-size:.82rem;margin-top:.2rem;line-height:1.5}
.save-pill{font-size:.88rem}
@media (max-width:900px){
  .featured-game{grid-template-columns:1fr;gap:2rem;padding-bottom:2.4rem}
  .phone{width:min(15rem,70%)}
  .chart-block,.feed-block{grid-template-columns:1fr;padding:2rem 0}
  .feed-block{padding:1.6rem}
  .rail{grid-auto-columns:9rem}
  .icymi-list{grid-template-columns:1fr}
}


/* rail action buttons fit on one row */
.rail-actions{flex-wrap:nowrap}
.rail-btn{white-space:nowrap;font-size:.66rem;padding:.38rem .5rem}

/* left-right hero: intro left, featured game right */
.home-hero{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(2rem,5vw,4rem);align-items:center;padding:2.2rem 0 2.8rem}
.home-hero-intro{max-width:26rem}
.home-hero .home-lead{padding:0;max-width:none}
.home-hero .home-lead h1{font-size:clamp(2rem,3.6vw,2.8rem)}
.home-hero .home-lead-sub{font-size:1rem}
.home-hero .featured-game{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(1.4rem,3vw,2.2rem);padding:0}
.home-hero .phone{width:min(13.5rem,100%)}
.home-hero .featured-title{font-size:clamp(1.9rem,3.2vw,2.5rem)}
.home-hero .featured-desc{font-size:.96rem;margin-bottom:1rem}
.home-hero .featured-copy{max-width:24rem}
.home-hero .featured-actions{margin-bottom:.55rem}
@media (max-width:1000px){
  .home-hero{grid-template-columns:1fr}
  .home-hero-intro{max-width:none}
}
@media (max-width:900px){
  .home-hero .featured-game{grid-template-columns:1fr}
  .home-hero .phone{width:min(14rem,70%)}
}

/* hero balance tweak */
.home-hero{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(1.8rem,4vw,3.2rem)}
.home-hero .home-lead h1{font-size:clamp(1.95rem,3.2vw,2.55rem)}
.home-hero .phone{width:min(13rem,100%)}

/* hero: text anchored top-left, right column starts at the top */
.home-hero{align-items:start;padding-top:1.6rem}
.home-hero-intro{padding-top:.2rem}
.home-hero .featured-game{align-items:start}

/* hero composition: intro block top-left, featured block sits further right with breathing room */
.home-hero{grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr);gap:clamp(3rem,7vw,6rem);padding-top:2rem}
.home-hero-intro{max-width:23rem}
.home-hero .featured-game{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(1.6rem,3vw,2.6rem);padding-top:.6rem}
.home-hero .phone{width:min(13.5rem,100%)}
@media (max-width:1000px){
  .home-hero{grid-template-columns:1fr;gap:2rem}
}

/* full-bleed hero: intro sits left, featured game shifted right */
.home-hero-wide{
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding-left:clamp(1.25rem,8vw,8rem);padding-right:clamp(1.25rem,8vw,8rem);
}
.home-hero-wide .home-lead{max-width:44rem;padding-top:2rem;padding-bottom:.6rem}
.home-hero-wide .featured-game{
  margin-left:clamp(2rem,14vw,15rem);
  padding-top:.2rem;
  padding-bottom:3rem;
}
.home-hero-wide .phone{width:min(15.5rem,100%)}
@media (max-width:1000px){
  .home-hero-wide{margin-left:0;margin-right:0;padding-left:0;padding-right:0}
  .home-hero-wide .featured-game{margin-left:0;padding-top:1rem}
}

/* hero diagonal: intro top-left, featured right, empty space bottom-left */
.home-hero-wide{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(2rem,4vw,4.5rem);
  align-items:start;
  padding-top:2.2rem;
  padding-bottom:1.6rem;
}
.home-hero-wide .home-lead{max-width:40rem;padding:0}
.home-hero-wide .featured-game{
  margin:0;
  padding:0 0 1rem;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(1.2rem,2.2vw,2rem);
  align-items:start;
}
.home-hero-wide .phone{width:min(13rem,100%)}
.home-hero-wide .featured-copy{max-width:26rem;padding-top:.4rem}
.home-hero-wide .featured-title{font-size:clamp(1.9rem,3vw,2.5rem)}
@media (max-width:1000px){
  .home-hero-wide{grid-template-columns:1fr;gap:2rem;padding-top:1.6rem}
  .home-hero-wide .featured-game{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .home-hero-wide .phone{width:min(13.5rem,100%)}
}
@media (max-width:900px){
  .home-hero-wide .featured-game{grid-template-columns:1fr}
  .home-hero-wide .phone{width:min(14rem,70%)}
}

/* hero featured: moved down and enlarged */
.home-hero-wide .featured-game{margin-top:3.2rem;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}
.home-hero-wide .phone{width:min(15.5rem,100%)}
.home-hero-wide .featured-copy{max-width:28rem;padding-top:.6rem}
.home-hero-wide .featured-title{font-size:clamp(2.15rem,3.5vw,2.9rem)}
.home-hero-wide .featured-desc{font-size:1.02rem;line-height:1.6;margin-bottom:1.1rem}
.home-hero-wide .featured-actions{gap:.7rem;margin-bottom:.8rem}
.home-hero-wide .featured-actions .btn{font-size:1rem;padding:.75rem 1.25rem}
@media (max-width:1000px){
  .home-hero-wide .featured-game{margin-top:1.6rem}
  .home-hero-wide .phone{width:min(15rem,80%)}
}

/* first screen = hero only */
.home-hero-wide{
  min-height:calc(100vh - 4.2rem);
  min-height:calc(100svh - 4.2rem);
  align-content:start;
  padding-bottom:1.4rem;
}
@media (max-width:1000px){
  .home-hero-wide{min-height:0}
}

/* hero stacked: intro top-left, featured centered below */
.home-hero-wide{display:block;min-height:0;padding:2.2rem clamp(1.25rem,8vw,8rem) 1.4rem}
.home-hero-wide .home-lead{max-width:40rem;padding:0 0 1.2rem}
.home-hero-wide .home-lead h1{font-size:clamp(2.1rem,3.8vw,3rem)}
.home-hero-wide .featured-game{
  max-width:60rem;margin:2.6rem auto 0;padding:0;
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(2rem,4vw,3.4rem);align-items:center;
}
.home-hero-wide .phone{width:min(14.5rem,100%)}
.home-hero-wide .featured-copy{max-width:30rem;padding-top:0}
.home-hero-wide .featured-title{font-size:clamp(2.05rem,3.4vw,2.8rem)}
.home-hero-wide .featured-desc{font-size:1rem}
/* discover card with globe art */
.discover-block{padding:0 0 3.6rem;border:0;max-width:none;text-align:left}
.discover-card{
  position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:2rem;align-items:center;overflow:hidden;
  background:linear-gradient(135deg,#f8eedc,#f2e2cb);border-radius:26px;
  padding:2.8rem 3rem;border:1px solid rgba(194,89,58,.1);
}
.discover-copy h2{font-size:clamp(1.9rem,3.4vw,2.7rem);letter-spacing:-.04em;margin:.2em 0 .5em;max-width:16ch}
.discover-copy p{color:var(--muted);max-width:36ch;margin:0 0 1.3rem}
.discover-art{position:relative;min-height:18rem}
.discover-globe{
  position:absolute;right:-3rem;top:50%;transform:translateY(-50%);
  width:min(26rem,130%);filter:drop-shadow(0 30px 50px rgba(28,25,23,.28));
}
@media (max-width:1000px){
  .home-hero-wide{min-height:0}
  .home-hero-wide .featured-game{grid-template-columns:1fr;max-width:none;margin-top:1.6rem}
  .home-hero-wide .phone{width:min(14rem,70%)}
  .home-hero-wide .featured-copy{max-width:none}
}
@media (max-width:900px){
  .discover-card{grid-template-columns:1fr;padding:2rem}
  .discover-art{min-height:15rem}
  .discover-globe{position:relative;right:auto;top:auto;transform:none;width:min(20rem,92%);margin:1rem auto 0}
}

/* globe image blend into the warm card */
.discover-art .discover-globe{
  position:absolute;right:-2rem;top:50%;transform:translateY(-50%);
  width:min(27rem,122%);max-width:none;height:auto;
  filter:drop-shadow(0 24px 40px rgba(28,25,23,.22));
}
@media (max-width:900px){
  .discover-art .discover-globe{position:relative;right:auto;top:auto;transform:none;width:min(20rem,92%);margin:1rem auto 0}
}

/* playlin-style top banner under the nav */
.top-banner{background:#151311;color:#f3ead9}
.top-banner-inner{
  max-width:96rem;margin:0 auto;padding:.55rem clamp(1rem,2.4vw,2rem);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.banner-text{
  margin:0;font-size:.8rem;font-weight:600;letter-spacing:.01em;line-height:1.35;
  font-family:"Inter","Helvetica Neue",Arial,sans-serif;color:#f3ead9;
}
h1.banner-text{font-size:.86rem;font-weight:700;letter-spacing:.005em}
.banner-mark{flex:0 0 auto;display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;background:rgba(243,234,217,.1);color:#f3ead9}
.banner-mark svg{display:block}
/* homepage: featured-only hero */
.home-hero-wide{
  display:flex;align-items:center;justify-content:center;
  min-height:calc(100svh - 7.2rem);
  padding:2rem clamp(1.25rem,8vw,8rem) 1.4rem;
}
.home-hero-wide .featured-game{margin:0 auto;max-width:60rem}
@media (max-width:900px){
  .home-hero-wide{min-height:0;display:block;padding-top:1.6rem}
}

/* banner: compact left-aligned, no icon */
.top-banner-inner{padding:.45rem .85rem;justify-content:flex-start}
.banner-text{font-size:.71rem;font-weight:600;letter-spacing:.012em}
h1.banner-text{font-size:.75rem;font-weight:650}
.banner-mark{display:none}
@media (max-width:900px){
  .top-banner-inner{padding:.45rem .75rem}
  .banner-text,h1.banner-text{font-size:.68rem}
}

/* banner text flush against the left edge */
.top-banner-inner{padding:.45rem 0;justify-content:flex-start}

/* trending cards under Discover (phone mockups + copy) */
.social-block{padding:0 0 3.6rem}
.social-kicker{margin:0 0 1rem}
.social-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.4rem,3vw,2.6rem)}
.social-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.3rem;align-items:start}
.social-phone{
  position:relative;width:8.6rem;aspect-ratio:500 / 875;flex:0 0 auto;
  background-image:var(--phone);background-size:contain;background-repeat:no-repeat;background-position:center;
  display:block;
}
.social-app{
  position:absolute;top:47%;left:50%;transform:translate(-50%,-50%);
  width:2.6rem;height:2.6rem;border-radius:.62rem;box-shadow:0 6px 16px rgba(28,25,23,.25);
  background:#fff;
}
.social-copy{min-width:0}
.social-copy .eyebrow{margin-bottom:.45rem}
.social-dot{display:inline-block;width:.42rem;height:.42rem;border-radius:50%;background:#3f9d6a;margin-right:.4rem;vertical-align:middle}
.social-name{font-size:1.35rem;letter-spacing:-.03em;margin:0 0 .1em}
.social-name a{color:var(--ink);text-decoration:none}
.social-name a:hover{color:var(--orange-deep)}
.social-by{font-size:.76rem;color:var(--muted-light);margin:0 0 .55rem}
.social-blurb{font-size:.88rem;color:var(--muted);line-height:1.55;margin:0 0 .9rem}
.social-actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.55rem}
.social-actions .btn{font-size:.78rem;padding:.5rem .8rem}
.social-quick{font-size:.76rem;color:var(--muted);text-decoration:underline;text-underline-offset:2px}
@media (max-width:1100px){
  .social-row{grid-template-columns:1fr}
  .social-card{grid-template-columns:auto minmax(0,1fr)}
}
@media (max-width:640px){
  .social-phone{width:7rem}
  .social-actions .btn{font-size:.74rem}
}

/* social cards: blend phone white bg, tighter copy */
.social-phone{mix-blend-mode:multiply;width:7rem}
.social-copy .eyebrow{font-size:.58rem;letter-spacing:.1em;white-space:nowrap}
.social-name{font-size:1.2rem}
.social-blurb{font-size:.82rem}
.social-actions .btn{font-size:.72rem;padding:.42rem .6rem}
.social-row{gap:1.6rem}

/* transparent phone frame + screenshot */
.social-card .social-phone{
  position:relative;display:block;width:7.2rem;aspect-ratio:948 / 1659;
  mix-blend-mode:normal;background:none;
  filter:drop-shadow(0 16px 26px rgba(28,25,23,.16));
}
.social-card .social-shot{
  position:absolute;left:13.9%;top:8%;width:72.2%;height:84%;
  object-fit:cover;object-position:top center;border-radius:9%;
  background:#fff;z-index:1;
}
.social-card .social-frame{
  position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2;
  pointer-events:none;
}
.social-card .social-app{display:none}

/* screenshot fills the cut-out screen, frame + notch on top */
.social-card .social-shot{
  left:14.45%;top:8.14%;width:71.2%;height:84.57%;
  border-radius:6.2% / 4.2%;object-position:top center;
}

/* mobile screenshots fit the cut-out */
.social-card .social-shot{object-fit:cover;object-position:center top;border-radius:6.2% / 4.2%}

/* featured: iPad mockup with the game screenshot in screen */
.tablet-wrap{display:flex;justify-content:center}
.tablet{position:relative;width:100%;max-width:34rem;aspect-ratio:1448 / 1086;
  filter:drop-shadow(0 34px 56px rgba(28,25,23,.2));}
.tablet-shot{position:absolute;left:4.77%;top:6.45%;width:90.4%;height:84.25%;
  object-fit:cover;object-position:center;border-radius:3.4%;z-index:1;}
.tablet-frame{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2;pointer-events:none}
.home-hero-wide .featured-game{grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);align-items:center}
.home-hero-wide .tablet{max-width:36rem}
/* trending phones: shrink screenshots, wallpaper shows through */
.social-card .social-frame{z-index:1}
.social-card .social-shot{
  left:17%;top:13%;width:66%;height:74%;
  object-fit:contain;object-position:center;background:transparent;
  border-radius:5%;z-index:2;
}
@media (max-width:900px){
  .home-hero-wide .featured-game{grid-template-columns:1fr}
  .tablet{max-width:34rem}
}

/* 4:3 preview screenshot inside phone */
.social-card .social-shot{
  position:absolute;left:14.45%;top:8.14%;width:71.2%;height:auto;
  aspect-ratio:4 / 3;object-fit:cover;object-position:center;
  border-radius:6% 6% 2% 2%;background:#fff;z-index:2;
  border:1px solid rgba(28,25,23,.08);
}
/* featured iPad: one step larger */
.home-hero-wide .featured-game{max-width:64rem;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
.home-hero-wide .tablet{max-width:41rem}
.home-hero-wide .featured-copy{max-width:26rem}
@media (max-width:1100px){
  .home-hero-wide .featured-game{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
  .home-hero-wide .tablet{max-width:36rem}
}
@media (max-width:900px){
  .home-hero-wide .featured-game{grid-template-columns:1fr}
  .home-hero-wide .tablet{max-width:36rem}
}

/* trending: bigger phones, 4:3 preview centered in screen */
.social-card .social-phone{width:8.4rem}
.social-card .social-shot{top:50%;transform:translateY(-50%);left:14.45%;width:71.2%;aspect-ratio:4 / 3;border-radius:6%}

/* revert: previous phone shots + tablet size */
.social-card .social-phone{width:7.2rem}
.social-card .social-shot{
  left:17%;top:13%;width:66%;height:74%;
  aspect-ratio:auto;transform:none;
  object-fit:contain;object-position:center;
  border-radius:5%;border:0;background:transparent;
}
.home-hero-wide .featured-game{max-width:60rem;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr)}
.home-hero-wide .tablet{max-width:36rem}
@media (max-width:900px){
  .home-hero-wide .featured-game{grid-template-columns:1fr}
  .home-hero-wide .tablet{max-width:34rem}
}

/* trending: 3:4 screenshots inside phones */
.social-card .social-shot{
  left:14.45%;top:50%;transform:translateY(-50%);
  width:71.2%;height:auto;aspect-ratio:3 / 4;
  object-fit:cover;object-position:center top;
  border-radius:5%;border:0;background:#fff;
}

/* featured hero scaled up */
.home-hero-wide .featured-game{
  max-width:70rem;
  grid-template-columns:minmax(0,1.42fr) minmax(0,.58fr);
  gap:clamp(2rem,3.5vw,3.2rem);
}
.home-hero-wide .tablet{max-width:46rem;width:100%}
.home-hero-wide .featured-copy{max-width:30rem}
.home-hero-wide .featured-title{font-size:clamp(2.6rem,4.2vw,3.5rem)}
.home-hero-wide .featured-by{font-size:.86rem}
.home-hero-wide .featured-desc{font-size:1.12rem;line-height:1.65;margin-bottom:1.3rem}
.home-hero-wide .featured-actions{gap:.8rem;margin-bottom:.9rem}
.home-hero-wide .featured-actions .btn{font-size:1.04rem;padding:.82rem 1.35rem}
.home-hero-wide .featured-quick{font-size:.9rem}
@media (max-width:1100px){
  .home-hero-wide .featured-game{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);max-width:64rem}
  .home-hero-wide .tablet{max-width:40rem}
}
@media (max-width:900px){
  .home-hero-wide .featured-game{grid-template-columns:1fr;max-width:60rem}
  .home-hero-wide .tablet{max-width:36rem}
}

/* featured hero: wider canvas, keep copy column usable */
.home-hero-wide .featured-game{max-width:76rem;grid-template-columns:minmax(0,1.3fr) minmax(22rem,.7fr)}
.home-hero-wide .featured-copy{max-width:none}
.home-hero-wide .featured-actions .btn{font-size:1rem;padding:.78rem 1.2rem;white-space:nowrap}

/* FINAL hero sizing block */
.home-hero-wide{
  display:flex;align-items:center;justify-content:center;
  min-height:calc(100svh - 7.2rem);
  padding:2.2rem clamp(1.25rem,8vw,8rem) 1.4rem;
}
.home-hero-wide .featured-game{
  flex:1 1 auto;width:100%;max-width:76rem;margin:0 auto;padding:0;
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(22rem,.7fr);
  gap:clamp(2rem,3.5vw,3.2rem);align-items:center;
}
.home-hero-wide .tablet-wrap{display:flex;justify-content:center;width:100%}
.home-hero-wide .tablet{max-width:48rem;width:100%}
.home-hero-wide .featured-copy{max-width:32rem}
@media (max-width:1100px){
  .home-hero-wide .featured-game{grid-template-columns:minmax(0,1.2fr) minmax(20rem,.8fr);max-width:68rem}
  .home-hero-wide .tablet{max-width:42rem}
}
@media (max-width:900px){
  .home-hero-wide .featured-game{grid-template-columns:1fr;max-width:60rem}
  .home-hero-wide .tablet{max-width:38rem}
}

/* featured: smaller Farflung shot inside iPad */
.home-hero-wide .tablet-shot{
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:72%;height:auto;aspect-ratio:4 / 3;
  object-fit:cover;object-position:center;
  border-radius:2.6%;z-index:2;background:#fff;
  border:1px solid rgba(28,25,23,.12);
  box-shadow:0 12px 26px rgba(28,25,23,.18);
}
.home-hero-wide .tablet-frame{z-index:1}

/* iPad shot width 83% */
.home-hero-wide .tablet-shot{width:83%}

/* iPad shot width 80% */
.home-hero-wide .tablet-shot{width:80%}


/* iPad shot 76%, moved down; trending phones +10% */
.home-hero-wide .tablet-shot{width:76%;top:53%}
.social-card .social-phone{width:7.9rem}


/* iPad shot moved up slightly */
.home-hero-wide .tablet-shot{top:51%}


/* iPad shot stretched horizontally */
.home-hero-wide .tablet-shot{width:82%;aspect-ratio:1.44}


/* iPad shot scaled down 15%% proportionally */
.home-hero-wide .tablet-shot{width:70%;aspect-ratio:1.44}


/* ==========================================================================
   PREMIUM PASS 2026 — typography, surfaces, nav, states, motion
   ========================================================================== */
:root{
  --font-display:"Archivo","Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-body:"Manrope","Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --r-xs:8px;--r-sm:12px;--r-md:18px;--r-lg:26px;--r-xl:34px;
  --shadow-card:0 1px 2px rgba(28,25,23,.03),0 18px 38px -30px rgba(28,25,23,.28);
  --shadow-float:0 24px 48px -40px rgba(28,25,23,.45),inset 0 1px 0 rgba(255,255,255,.6);
}

/* flat paper surface, noise only */
body{
  font-size:17px;line-height:1.65;letter-spacing:-.002em;
  background-color:#fffdf8;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)' opacity='0.075'/%3E%3C/svg%3E");
  background-size:150px 150px;
}

/* typography */
h1,h2,h3,.cover-title,.featured-title,.social-name{text-wrap:balance}
p{text-wrap:pretty}
h1,h2,h3{font-family:var(--font-display);font-variation-settings:"wdth" 108;letter-spacing:-.038em}
.eyebrow{letter-spacing:.19em;font-weight:700;font-size:.67rem}
.brand-the{
  font-family:var(--font-display);font-style:normal;font-weight:600;
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-right:.62rem;transform:none;
}

/* floating translucent navigation */
.site-header{
  position:sticky;top:.7rem;z-index:60;
  width:min(calc(100% - 1.6rem), 78rem);margin:.7rem auto 0;
  border-radius:18px;overflow:hidden;
  background:rgba(255,252,246,.8);
  -webkit-backdrop-filter:blur(20px) saturate(1.15);
  backdrop-filter:blur(20px) saturate(1.15);
  border:1px solid rgba(28,25,23,.08);
  box-shadow:var(--shadow-float);
}
.top-banner{background:#181818}
.header-inner{padding:.6rem clamp(.9rem,2vw,1.6rem)}
.home-hero-wide{min-height:calc(100svh - 8rem)}
@media (max-width:900px){
  .site-header{width:calc(100% - 1rem);top:.5rem;margin-top:.5rem;border-radius:14px}
}

/* buttons: flat, tactile, consistent easing */
.btn{
  border-radius:999px;font-family:var(--font-body);font-weight:650;letter-spacing:.004em;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn-primary{
  background:var(--orange-deep);border-color:var(--orange-deep);color:#fff;
  box-shadow:0 14px 26px -18px rgba(154,63,36,.72),inset 0 1px 0 rgba(255,255,255,.14);
}
.btn-primary:hover{background:var(--orange-dark);border-color:var(--orange-dark);color:#fff;box-shadow:0 20px 34px -20px rgba(154,63,36,.8)}
.btn-ghost{background:rgba(255,255,255,.78);border-color:rgba(28,25,23,.12);color:var(--ink)}
.btn-ghost:hover{border-color:var(--orange-deep);color:var(--orange-dark);background:#fff}
:focus-visible{outline:2px solid var(--orange-deep);outline-offset:3px;border-radius:6px}

/* nav current state + menu motion */
.drawer-item[aria-current="page"]{background:var(--orange-tint);color:var(--orange-dark)}
.menu-bars span{transition:transform .3s var(--ease),width .3s var(--ease),opacity .3s var(--ease)}
.menu-btn[aria-expanded="true"] .menu-bars span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-bars span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] .menu-bars span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* flatter, calmer surfaces */
.today-box{background:var(--orange-tint)}
.game-row:hover{background:var(--orange-tint)}
.discover-card{
  background:#f8eedc;border:1px solid rgba(28,25,23,.07);
  border-radius:var(--r-lg);box-shadow:var(--shadow-card);
}
.feed-block{
  background:#f8eeda;border:1px solid rgba(194,89,58,.12);
  border-radius:var(--r-lg);box-shadow:var(--shadow-card);
}
.featured-game .tablet{filter:drop-shadow(0 30px 46px rgba(28,25,23,.18))}
.rail-thumb,.game-card-media{border-radius:14px;border-color:rgba(28,25,23,.07);box-shadow:var(--shadow-card)}
.rail-btn{transition:transform .3s var(--ease),background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.rail-btn:hover{transform:translateY(-1px)}
.rail-arrow{transition:transform .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease),background-color .3s var(--ease)}
.rail-arrow:hover{transform:translateY(-1px);background:var(--orange-tint)}
.chart-table td{font-variant-numeric:tabular-nums}
.card-add{transition:background-color .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.card-add:hover{box-shadow:0 10px 22px -16px rgba(28,25,23,.4)}

/* scroll reveals */
.reveal{opacity:0;transform:translateY(16px)}
.reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.reveal--delay{transition-delay:.08s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .btn:hover,.rail-btn:hover,.rail-arrow:hover{transform:none}
}

/* skip link */
.skip-link{
  position:fixed;left:1rem;top:-4rem;z-index:200;
  padding:.65rem 1rem;border-radius:999px;background:var(--ink);color:#fff;
  font-size:.85rem;font-weight:600;text-decoration:none;
  transition:top .3s var(--ease);
}
.skip-link:focus{top:1rem;color:#fff}

@media print{.reveal{opacity:1;transform:none}}


/* mobile header fit */
html,body{overflow-x:clip}
.site-header{max-width:calc(100% - 1rem)}
.header-inner{min-width:0}
.brand-logo{min-width:0}
.header-actions{flex:0 0 auto}
@media (max-width:560px){
  .site-header{width:calc(100% - .8rem);top:.4rem;margin-top:.4rem;border-radius:14px}
  .header-inner{gap:.45rem;padding:.5rem .6rem;flex-wrap:nowrap}
  .brand-word{font-size:1.28rem;font-variation-settings:"wdth" 112}
  .brand-the{font-size:.58rem;letter-spacing:.08em;margin-right:.3rem}
  .brand-logo .brand-o{width:.7em;height:.7em}
  .menu-btn,.icon-btn{width:1.95rem;height:1.95rem}
  .header-actions{gap:.3rem}
  .top-banner-inner{padding:.4rem .6rem}
  .banner-text,h1.banner-text{font-size:.62rem;line-height:1.35;white-space:normal}
}

/* NAV REVERT — flat sticky header again */
.site-header{
  position:sticky;top:0;z-index:50;width:auto;max-width:none;margin:0;
  border-radius:0;overflow:visible;
  background:rgba(255,253,249,.86);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
  border:0;border-bottom:1px solid rgba(28,25,23,.08);box-shadow:none;
}
.header-inner{padding:.68rem clamp(1rem,2.4vw,2rem)}
.top-banner{background:#151311}
.top-banner-inner{padding:.45rem 0}
.home-hero-wide{min-height:calc(100svh - 7.2rem)}
@media (max-width:560px){
  .site-header{width:auto;top:0;margin-top:0;border-radius:0}
  .header-inner{padding:.55rem .9rem}
}

/* FAQ split list */
.faq-split{display:grid;gap:0;border-top:1px solid var(--line-soft)}
.faq-pair{
  display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);
  gap:clamp(1.2rem,3vw,3rem);align-items:start;
  padding:1.15rem 0;border-bottom:1px solid var(--line-soft);
}
.faq-pair h3{
  margin:0;font-family:var(--font-body);font-size:.98rem;font-weight:650;
  letter-spacing:-.01em;line-height:1.5;color:var(--ink);
}
.faq-pair p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.65;max-width:62ch}
.home-faq .faq-split{margin-top:1.2rem}
@media (max-width:700px){
  .faq-pair{grid-template-columns:1fr;gap:.35rem}
}

/* Trending: horizontal scroll rail, no three equal columns */
.social-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin:0 0 1.1rem}
.social-head .eyebrow{margin:0}
.social-head a{font-size:.82rem;color:var(--orange-deep)}
.social-row{
  display:grid;grid-auto-flow:column;grid-auto-columns:24rem;
  gap:1.3rem;overflow-x:auto;scroll-snap-type:x proximity;
  padding:.2rem .1rem .9rem;scrollbar-width:none;flex:1;
}
.social-row::-webkit-scrollbar{display:none}
.social-card{scroll-snap-align:start;min-width:0}
@media (max-width:900px){.social-row{grid-auto-columns:20rem}}
@media (max-width:560px){.social-row{grid-auto-columns:17.5rem}}

/* Game page screenshot: editorial frame + scrim */
.game-hero .game-shot{position:relative;isolation:isolate;margin-top:2.2rem}
.game-hero .game-shot::before{
  content:"";position:absolute;inset:16px -14px -16px 14px;z-index:0;
  border:1px solid rgba(28,25,23,.14);border-radius:22px;
  background:rgba(255,248,238,.55);
}
.game-hero .game-shot img{
  position:relative;z-index:1;border-radius:18px;border:1px solid rgba(28,25,23,.1);
  box-shadow:0 30px 60px -42px rgba(28,25,23,.55);
}
.game-hero .game-shot::after{
  content:"";position:absolute;z-index:2;pointer-events:none;
  left:0;right:0;top:0;bottom:0;margin:0 auto;
  max-width:100%;border-radius:18px;
  background:linear-gradient(180deg,rgba(28,25,23,.08),transparent 20%,transparent 76%,rgba(28,25,23,.12));
}
.game-hero .game-shot--wide::after{max-width:100%}
.game-hero .game-shot figcaption{position:relative;z-index:3}
.game-hero .game-shot--placeholder::before,.game-hero .game-shot--placeholder::after{display:none}

/* phase2 fixes */
.social-actions{flex-wrap:nowrap}
.social-actions .btn{font-size:.72rem;padding:.45rem .6rem;white-space:nowrap}
.game-hero .game-shot{display:inline-block;max-width:100%;position:relative;text-align:center}
.game-hero .game-shot img{display:block;margin:0 auto}
.game-hero .game-shot figcaption{display:block;text-align:center}

/* refine editorial screenshot frame */
.game-hero .game-shot::before{
  inset:14px -12px -12px 12px;border-radius:20px;
  background:transparent;border:1px solid rgba(28,25,23,.18);
}
.game-hero .game-shot figcaption{margin-top:.9rem}

/* rail arrows appear on hover */
.rail-wrap .rail-arrow{
  opacity:0;pointer-events:none;transform:translateY(-2px);
  transition:opacity .3s var(--ease),transform .3s var(--ease),
    background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease);
}
.rail-wrap:hover .rail-arrow,
.rail-wrap:focus-within .rail-arrow{opacity:1;pointer-events:auto;transform:none}
@media (hover:none){
  .rail-wrap .rail-arrow{opacity:1;pointer-events:auto;transform:none}
}

/* clickable screenshot + lightbox */
.shot-zoom{
  display:block;width:100%;padding:0;margin:0;border:0;background:none;
  cursor:zoom-in;position:relative;z-index:1;border-radius:18px;
}
.shot-zoom img{display:block;width:100%;height:auto}
.shot-zoom:focus-visible{outline:2px solid var(--orange-deep);outline-offset:4px}
.shot-lightbox{
  position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;
  padding:4vmin;background:rgba(20,17,15,.8);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .3s var(--ease);
}
.shot-lightbox.is-open{opacity:1}
.shot-lightbox img{
  max-width:92vw;max-height:86vh;width:auto;height:auto;border-radius:12px;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.75);
  transform:scale(.97);transition:transform .35s var(--ease);
}
.shot-lightbox.is-open img{transform:none}
.shot-lightbox-close{
  position:fixed;top:2.2vmin;right:2.2vmin;width:2.6rem;height:2.6rem;padding:0;
  border-radius:50%;border:1px solid rgba(255,255,255,.32);
  background:rgba(255,255,255,.1);color:#fff;font-size:1.35rem;line-height:1;
  cursor:pointer;display:grid;place-items:center;
  transition:background-color .3s var(--ease),transform .3s var(--ease);
}
.shot-lightbox-close:hover{background:rgba(255,255,255,.2);transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){
  .shot-lightbox,.shot-lightbox img{transition:none;transform:none}
  .rail-wrap .rail-arrow{transition:none}
}

/* ==========================================================================
   LANDING UPGRADE — strategy sections, type scale, motion, states
   ========================================================================== */
:root{
  --step-xs:0.75rem;--step-sm:0.875rem;--step-base:1rem;--step-lg:1.125rem;
  --step-xl:1.25rem;--step-2xl:1.5rem;--step-3xl:1.875rem;--step-4xl:2.25rem;
  --step-5xl:3rem;
  --r-card:16px;--r-panel:24px;--r-large:32px;
}
body{font-size:var(--step-base);line-height:1.5;letter-spacing:0}
.eyebrow{font-size:var(--step-xs);line-height:1rem;letter-spacing:.16em}
.top-banner{background:#131209}
.btn{font-size:var(--step-base);font-weight:600}
.btn-lg{font-size:var(--step-lg);line-height:1.55}

/* hero */
.landing-hero{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2.5rem,5vw,4.5rem);align-items:center;
  min-height:calc(100svh - 8.4rem);padding:2.4rem 0 3rem;
}
.landing-copy{max-width:680px}
.landing-h1{
  margin:.3rem 0 0;font-size:clamp(2.5rem,4.6vw,3.75rem);line-height:1.02;
  letter-spacing:-.045em;font-weight:700;max-width:680px;
  background:linear-gradient(90deg,#000000 0%,#666666 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-wrap:balance;
}
.landing-sub{font-size:var(--step-base);line-height:1.55;color:var(--muted);max-width:680px;margin:.9rem 0 0}
.landing-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.25rem;margin:1.7rem 0 1rem}
.landing-secondary{
  font-size:var(--step-sm);color:var(--ink);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:rgba(28,25,23,.3);
}
.landing-secondary:hover{color:var(--orange-deep)}
.landing-proof{font-size:var(--step-sm);color:var(--muted-light);margin:0;line-height:1.5;max-width:640px}
.landing-visual{display:flex;flex-direction:column;align-items:center;min-width:0}
.landing-visual .tablet{max-width:100%}
.landing-caption{margin:.85rem 0 0;font-size:var(--step-sm);color:var(--muted)}
.landing-caption a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}

/* tagline reveal */
.tagline-reveal{max-width:64rem;margin:0 auto;padding:clamp(3.5rem,8vw,6rem) 0;text-align:center}
.tagline-line{
  margin:0;font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.9rem,4vw,3rem);line-height:1.1;letter-spacing:-.04em;
  color:var(--ink);text-wrap:balance;
}
.tagline-line + .tagline-line{margin-top:.25em}
.tagline-word{opacity:.3;transition:opacity .7s var(--ease)}
.tagline-word.is-lit{opacity:1}
@media (prefers-reduced-motion:reduce){.tagline-word{opacity:1;transition:none}}

/* how it works */
.home-how{padding:clamp(2.5rem,5vw,4rem) 0;border-top:1px solid var(--line-soft)}
.section-head{max-width:44rem;margin:0 0 1.8rem}
.section-head h2{font-size:clamp(1.6rem,2.8vw,2.25rem);line-height:1.1;letter-spacing:-.035em;margin:.25em 0 0}
.how-grid{
  list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.4rem,3vw,2.4rem);
}
.how-step{display:flex;flex-direction:column;gap:.45rem;padding-top:1rem;border-top:2px solid var(--ink)}
.how-num{font-family:var(--font-display);font-weight:600;font-size:var(--step-sm);letter-spacing:.08em;color:var(--orange-deep)}
.how-step h3{font-size:var(--step-xl);line-height:1.2;letter-spacing:-.02em;margin:0}
.how-step p{font-size:var(--step-sm);line-height:1.55;color:var(--muted);margin:0}
.step-link{font-size:var(--step-sm);font-weight:600;color:var(--orange-deep);text-decoration:none;margin-top:.35rem}
.step-link:hover{text-decoration:underline;text-underline-offset:3px}

/* benefits */
.home-benefits{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2rem,5vw,4rem);align-items:start;
  padding:clamp(2.5rem,5vw,4rem) 0;border-top:1px solid var(--line-soft);
}
.benefit-intro h2{font-size:clamp(1.6rem,2.8vw,2.25rem);line-height:1.1;letter-spacing:-.035em;margin:.25em 0 .6rem}
.benefit-intro p{color:var(--muted);font-size:var(--step-base);line-height:1.6;margin:0;max-width:34rem}
.benefit-list{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.benefit-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.1rem;align-items:start;padding:1.1rem 0;border-top:1px solid var(--line-soft)}
.benefit-num{font-family:var(--font-display);font-weight:600;font-size:var(--step-sm);color:var(--orange-deep);letter-spacing:.08em;padding-top:.2rem}
.benefit-row h3{font-size:var(--step-base);font-weight:600;margin:0 0 .25rem}
.benefit-row p{font-size:var(--step-sm);line-height:1.55;color:var(--muted);margin:0}

/* proof strip */
.proof-strip{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);margin:0 0 1rem}
.proof-strip ul{list-style:none;margin:0;padding:1.4rem 0;display:flex;flex-wrap:wrap;gap:1rem 3rem}
.proof-strip li{display:flex;flex-direction:column;gap:.15rem;min-width:9rem}
.proof-strip strong{font-family:var(--font-display);font-weight:600;font-size:var(--step-2xl);letter-spacing:-.03em}
.proof-strip span{font-size:var(--step-sm);color:var(--muted)}

/* final CTA */
.final-cta{
  text-align:center;padding:clamp(2.5rem,6vw,4.5rem) clamp(1.2rem,5vw,3rem);
  margin:1rem 0 2rem;background:var(--orange-tint);border-radius:var(--r-panel);
}
.final-cta h2{font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.08;letter-spacing:-.04em;margin:0 0 .6rem;text-wrap:balance}
.final-cta p{color:var(--muted);font-size:var(--step-base);line-height:1.6;max-width:38rem;margin:0 auto 1.4rem}
.final-cta .landing-actions{justify-content:center;margin:0}

/* drawer link stagger */
.site-drawer .drawer-body > *{
  opacity:0;transform:translateY(12px);
  transition:opacity .3s var(--ease),transform .3s var(--ease);
}
.site-drawer.open .drawer-body > *{opacity:1;transform:none}
.site-drawer.open .drawer-body > *:nth-child(1){transition-delay:.02s}
.site-drawer.open .drawer-body > *:nth-child(2){transition-delay:.08s}
.site-drawer.open .drawer-body > *:nth-child(3){transition-delay:.14s}
.site-drawer.open .drawer-body > *:nth-child(4){transition-delay:.2s}
.site-drawer.open .drawer-body > *:nth-child(5){transition-delay:.26s}
.site-drawer.open .drawer-body > *:nth-child(6){transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  .site-drawer .drawer-body > *{opacity:1;transform:none;transition:none}
}

/* search loading + error */
.search-skeleton{display:grid;gap:.75rem;padding:.4rem 0}
.search-skeleton span{display:block;height:.9rem;border-radius:6px;background:#f0e7da;animation:sk-pulse 1.3s ease-in-out infinite}
.search-skeleton span:nth-child(1){width:52%}
.search-skeleton span:nth-child(2){width:78%}
.search-skeleton span:nth-child(3){width:64%}
@keyframes sk-pulse{0%,100%{opacity:.55}50%{opacity:1}}
.search-error{color:var(--orange-dark);font-size:var(--step-sm);line-height:1.5}
.search-error button{margin-top:.5rem;font:inherit;color:var(--orange-dark);background:none;border:0;text-decoration:underline;cursor:pointer;padding:0}

/* mobile */
@media (max-width:900px){
  .landing-hero{grid-template-columns:1fr;min-height:0;padding-top:2rem}
  .landing-h1{font-size:clamp(2.2rem,7vw,2.8rem)}
  .how-grid{grid-template-columns:1fr}
  .home-benefits{grid-template-columns:1fr}
  .proof-strip ul{gap:.9rem 2rem}
  .final-cta{border-radius:var(--r-card)}
}

/* landing hero screenshot above frame */
.landing-visual .tablet{position:relative}
.landing-visual .tablet-shot{
  position:absolute;left:50%;top:51%;transform:translate(-50%,-50%);
  width:80%;height:auto;aspect-ratio:4 / 3;object-fit:cover;object-position:center;
  border-radius:2.6%;z-index:2;background:#fff;
  border:1px solid rgba(28,25,23,.12);
  box-shadow:0 14px 30px -22px rgba(28,25,23,.35);
}
.landing-visual .tablet-frame{z-index:1}

/* push discover fully below the first screen */
.home .home-hero-wide{min-height:calc(100svh - 6.2rem)}
.home .discover-block{margin-top:1.5rem}
@media (max-width:900px){.home .home-hero-wide{min-height:0}.home .discover-block{margin-top:.75rem}}

/* full-bleed new games rail */
.home .rail-block{
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:0;
}
.home .rail-block .rail-head{
  padding-left:max(1.25rem, calc((100vw - 68rem) / 2));
  padding-right:max(1.25rem, calc((100vw - 68rem) / 2));
}
.home .rail-block .rail-wrap{
  padding-left:max(1.25rem, calc((100vw - 68rem) / 2));
  padding-right:0;
}
@media (max-width:900px){
  .home .rail-block .rail-head{padding-left:1rem;padding-right:1rem}
  .home .rail-block .rail-wrap{padding-left:1rem}
}

/* social trending: wide gaps like the reference */
.social-block .rail-wrap{display:block}
.social-block .rail-arrow{display:none}
.social-row{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-flow:row;grid-auto-columns:auto;
  gap:clamp(2.5rem,4.6vw,4.5rem);
  overflow:visible;padding:.2rem 0 1rem;
}
.social-card{scroll-snap-align:none}
.social-actions{flex-wrap:wrap}
@media (max-width:1000px){
  .social-row{grid-template-columns:1fr;gap:2.5rem}
}

/* social action buttons inline with wider gaps */
.social-actions{flex-wrap:nowrap;gap:.4rem}
.social-actions .btn{font-size:.68rem;padding:.42rem .55rem;white-space:nowrap}

/* rail block full bleed both sides, Playlin-like header */
.home .rail-block{
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding:clamp(2.5rem,5vw,4rem) 0 2rem;
  padding-left:clamp(1.5rem,4vw,4rem);padding-right:clamp(1.5rem,4vw,4rem);
}
.home .rail-block .rail-kicker{
  display:flex;align-items:center;gap:1.2rem;
  margin:0 auto 1rem;max-width:none;
}
.home .rail-block .rail-kicker .eyebrow{
  margin:0;white-space:nowrap;color:var(--orange-deep);letter-spacing:.22em;
}
.home .rail-block .rail-rule{flex:1;height:1px;background:var(--line)}
.home .rail-block .rail-sub{
  margin:0 auto 2rem;text-align:center;color:var(--muted);
  font-size:var(--step-sm);line-height:1.5;max-width:40rem;
}
.home .rail-block .rail-head{
  padding:0;margin:0 0 1.2rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.home .rail-block .rail-title{display:flex;align-items:center;gap:.8rem;min-width:0}
.home .rail-block .rail-accent{
  width:4px;height:1.5rem;border-radius:2px;background:var(--orange-deep);flex:0 0 auto;
}
.home .rail-block .rail-title h2{margin:0;font-size:1.35rem;letter-spacing:-.02em}
.home .rail-block .rail-head a{font-size:var(--step-sm);color:var(--orange-deep)}
.home .rail-block .rail-wrap{padding:0}
@media (max-width:900px){
  .home .rail-block{padding-left:1rem;padding-right:1rem}
  .home .rail-block .rail-kicker{gap:.7rem}
  .home .rail-block .rail-sub{font-size:.8rem}
}

/* pick by hand scaled 10 percent */
.social-block{padding-bottom:4rem}
.social-row{gap:clamp(2.75rem,5.1vw,4.95rem)}
.social-block .social-phone{width:7.9rem}
.social-copy .eyebrow{font-size:.64rem}
.social-name{font-size:1.32rem}
.social-by{font-size:.84rem}
.social-blurb{font-size:.9rem;line-height:1.55}
.social-actions .btn{font-size:.75rem;padding:.46rem .62rem}
.social-quick{font-size:.84rem}

/* social cards 10 percent wider */
.social-row{width:110%;margin-left:-5%}
@media (max-width:1000px){.social-row{width:auto;margin-left:0}}
/* rail cards: description instead of action buttons */
.rail-desc{
  margin:.15rem 0 0;font-size:.78rem;line-height:1.5;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

.rail-desc{-webkit-line-clamp:3}

/* rail closer to picked by hand */
.social-block{padding-bottom:1.25rem}
.home .rail-block{padding-top:clamp(1.25rem,2.4vw,2rem)}
.home .rail-block .rail-kicker{margin-top:0}

/* discover module enlarged */
.discover-block{padding:0 0 2.4rem}
.discover-card{
  padding:clamp(2.8rem,4vw,4rem) clamp(2.2rem,3.6vw,3.6rem);
  border-radius:32px;min-height:24rem;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
}
.discover-copy h2{font-size:clamp(2rem,3.6vw,3rem);line-height:1.06;max-width:18ch;margin:.2em 0 .55em}
.discover-copy p{font-size:1.02rem;line-height:1.6;max-width:44ch;margin:0 0 1.5rem}
.discover-copy .btn{font-size:1.04rem;padding:.82rem 1.35rem}
.discover-arrow{display:none}
.discover-globe{width:min(31rem,138%)}
@media (max-width:900px){
  .discover-card{grid-template-columns:1fr;padding:2rem;min-height:0;border-radius:24px}
  .discover-copy h2{font-size:clamp(1.8rem,6vw,2.3rem)}
  .discover-copy p{font-size:.98rem}
}

/* playlin style chart card */
.chart-block{margin:2rem 0 3.5rem}
.chart-card{
  position:relative;overflow:hidden;display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2rem,4vw,3rem);padding:clamp(1.8rem,3.2vw,2.8rem);
  background:#faf4e9;border:1px solid rgba(28,25,23,.08);border-radius:32px;
}
.chart-card::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("/assets/img/chart-texture.jpg") right center/cover no-repeat;opacity:.55;
}
.chart-left,.chart-right{position:relative;z-index:1}
.chart-kicker{
  display:flex;align-items:center;gap:.7rem;margin:0 0 .7rem;
  font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-deep);
}
.chart-kicker-icon{width:2rem;height:2rem;object-fit:contain;flex:0 0 auto}
.chart-title{font-size:clamp(2rem,3.4vw,2.8rem);line-height:1;letter-spacing:-.045em;margin:0 0 .55rem}
.chart-sub{font-size:.95rem;line-height:1.5;color:var(--muted);margin:0 0 .9rem;max-width:28rem}
.chart-week{
  display:inline-block;margin:0 0 1.2rem;padding:.35rem .7rem;
  font-size:.75rem;color:var(--ink-soft);background:rgba(255,253,249,.85);
  border:1px solid rgba(28,25,23,.09);border-radius:999px;
}
.chart-feature{
  position:relative;max-width:26rem;padding:.55rem;background:#fff;
  border:1px solid rgba(28,25,23,.09);border-radius:18px;
  box-shadow:0 1px 2px rgba(28,25,23,.03),0 18px 34px -28px rgba(28,25,23,.4);
}
.chart-feature-flag{
  position:absolute;top:.95rem;left:.95rem;z-index:2;
  padding:.32rem .6rem;border-radius:999px;background:var(--orange-deep);color:#fff;
  font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.chart-feature-shot{display:block;width:100%;aspect-ratio:16 / 9;object-fit:cover;border-radius:13px}
.chart-feature-body{padding:.7rem .4rem .25rem}
.chart-feature-body h3{margin:0;font-size:1.35rem;letter-spacing:-.02em}
.chart-feature-body h3 a{color:var(--ink);text-decoration:none}
.chart-feature-body p{margin:.15rem 0 0;font-size:.82rem;color:var(--muted)}
.chart-newest{
  display:flex;align-items:center;gap:.6rem;max-width:26rem;margin:.9rem 0;
  padding:.6rem .8rem;border-radius:12px;background:rgba(255,255,255,.7);
  border:1px solid rgba(28,25,23,.08);font-size:.8rem;
}
.chart-newest-label{font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--orange-deep);white-space:nowrap}
.chart-newest a{color:var(--ink);font-weight:600;text-decoration:none}
.chart-newest a:hover{color:var(--orange-deep)}
.chart-stats{
  display:flex;gap:2.2rem;max-width:26rem;margin:.2rem 0 1rem;
  padding:.85rem 0;border-top:1px solid rgba(28,25,23,.1);
}
.chart-stats div{display:flex;flex-direction:column;gap:.1rem}
.chart-stats strong{font-family:var(--font-display);font-size:1.45rem;line-height:1.1}
.chart-stats span{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-light)}
.chart-cta{width:100%;max-width:26rem;justify-content:center}
.chart-right{
  display:flex;flex-direction:column;padding:1.1rem 1.2rem;
  background:rgba(255,253,249,.92);border:1px solid rgba(28,25,23,.08);border-radius:20px;
}
.chart-legend{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:0 0 .6rem;font-size:.7rem;color:var(--muted)}
.chart-legend span{display:inline-flex;align-items:center;gap:.4rem}
.chart-legend img{width:1.15rem;height:1.15rem;object-fit:contain}
.chart-legend-note{color:var(--muted-light);font-size:.66rem}
.chart-table-new{width:100%;border-collapse:collapse;font-size:.85rem}
.chart-table-new th{
  padding:.55rem .5rem;text-align:left;border-bottom:1px solid rgba(28,25,23,.1);
  font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-light);
}
.chart-table-new th:last-child{text-align:right}
.chart-table-new td{padding:.5rem;border-bottom:1px solid rgba(28,25,23,.06)}
.chart-table-new tr:last-child td{border-bottom:0}
.chart-row .rank{width:2.2rem;color:var(--muted-light);font-weight:700;font-variant-numeric:tabular-nums}
.chart-row .game{display:flex;align-items:center;gap:.6rem}
.chart-fav{
  width:1.6rem;height:1.6rem;border-radius:.45rem;overflow:hidden;flex:0 0 auto;
  background:#fff;border:1px solid rgba(28,25,23,.08);
  display:inline-flex;align-items:center;justify-content:center;
}
.chart-fav img{width:100%;height:100%;object-fit:contain}
.chart-row a{color:var(--ink);font-weight:600;text-decoration:none}
.chart-row a:hover{color:var(--orange-deep)}
.chart-row .vol{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.chart-row--first{background:#f8e8d5}
.chart-row--first td{border-bottom-color:transparent}
.chart-row--first .rank{color:var(--orange-deep)}
.chart-more td{
  padding:.55rem 0;text-align:center;font-size:.58rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-light);
}
.chart-footer-link{margin-top:auto;padding-top:.9rem;font-size:.78rem;color:var(--orange-deep);text-decoration:none}
.chart-footer-link:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:1000px){
  .chart-card{grid-template-columns:1fr;border-radius:24px}
  .chart-feature,.chart-newest,.chart-stats,.chart-cta{max-width:none}
}

/* chart block: single card fills the container */
.chart-block{display:block;padding:0;border-top:0;margin:2rem 0 3.5rem}
.chart-card{width:100%}
.chart-legend{flex-wrap:wrap}

/* chart feature shot framing */
.chart-feature-shot{aspect-ratio:4 / 3;object-position:top center}

/* chart movement columns + footer banner */
.chart-legend-moves{display:inline-flex;align-items:center;gap:.7rem;font-size:.66rem;color:var(--muted)}
.chart-legend-moves em{font-style:normal;display:inline-flex;align-items:center;gap:.25rem}
.chart-legend-moves .up{color:#2f7d5c}
.chart-legend-moves .down{color:#b34a3c}
.chart-legend-moves .flat{color:var(--muted-light)}
.chart-table-new th.move-th,.chart-table-new td.move{width:2.4rem;text-align:center;padding-left:.2rem;padding-right:.2rem}
.chart-table-new td.move{color:var(--muted-light);font-size:.72rem}
.chart-steady{color:var(--muted-light)}
.chart-table-new th.wks-th,.chart-table-new td.wks{width:3.2rem;text-align:right;color:var(--muted-light);font-variant-numeric:tabular-nums}
.chart-table-new th.peak-th,.chart-table-new td.peak{width:3.2rem;text-align:right;color:var(--muted-light);font-variant-numeric:tabular-nums}
.chart-row--first{box-shadow:inset 3px 0 0 var(--orange-deep)}
.chart-debut{
  display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin:.7rem 0 0;
  font-size:.76rem;color:var(--muted);
}
.chart-debut-tag{
  font-size:.56rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--orange-deep);background:var(--orange-soft);border-radius:999px;padding:.25rem .5rem;
}
.chart-debut a{color:var(--ink);font-weight:600;text-decoration:none}
.chart-debut a:hover{color:var(--orange-deep)}
.chart-debut-note{color:var(--muted-light)}
.chart-footer-banner{
  display:flex;align-items:center;gap:.7rem;margin-top:auto;padding:.85rem 1rem;
  background:#f2ece1;border:1px solid rgba(28,25,23,.06);border-radius:14px;
  color:var(--ink-soft);font-size:.78rem;line-height:1.4;text-decoration:none;
}
.chart-footer-banner img{width:1.7rem;height:1.7rem;object-fit:contain;flex:0 0 auto}
.chart-footer-banner span{flex:1}
.chart-footer-arrow{color:var(--muted);font-size:1rem;flex:0 0 auto}
.chart-footer-banner:hover{background:#ece3d5;color:var(--ink)}
.chart-debut + .chart-footer-banner{margin-top:.9rem}

/* chart debut row */
.chart-row--debut{background:rgba(255,255,255,.55)}
.chart-row--debut .rank{font-size:.56rem;letter-spacing:.06em;color:var(--orange-deep);font-weight:700}
.debut-inline{
  font-style:normal;font-size:.52rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--orange-deep);background:var(--orange-soft);border-radius:999px;padding:.18rem .4rem;margin-left:.2rem;
}
.chart-debut-note{margin:.8rem 0 0;font-size:.72rem;line-height:1.45;color:var(--muted-light)}