/* ==========================================================================
   Gamejim - site stylesheet
   Palette taken straight from the logo: navy, gold and orange.
   ========================================================================== */

:root{
  --navy-900:#070a24;
  --navy-800:#0b1030;
  --navy-700:#111845;
  --navy-600:#1a2260;
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.06);

  --gold:#ffc61a;
  --gold-soft:#ffd75e;
  --orange:#f4633a;
  --blue:#3b46c4;
  --green:#2fcf7a;

  --text:#eef1ff;
  --muted:#a3abd6;
  --muted-2:#7b84b5;

  --grad-brand:linear-gradient(135deg,var(--gold) 0%,var(--orange) 100%);
  --grad-blue:linear-gradient(135deg,#3b46c4 0%,#6a3fd4 100%);

  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;
  --r-xl:32px;

  --shadow:0 18px 40px -18px rgba(0,0,0,.75);
  --shadow-lg:0 30px 70px -25px rgba(0,0,0,.85);

  --wrap:1180px;
  --header-h:74px;
}

*,*::before,*::after{box-sizing:border-box;}

/* The filter script toggles [hidden]. Author display rules such as
   .game-card{display:flex} beat the browser default [hidden]{display:none},
   so this has to win outright or filtered cards stay on screen. */
[hidden]{display:none !important;}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 20px);}

body{
  margin:0;
  background:var(--navy-800);
  color:var(--text);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ambient glow behind everything */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(720px 480px at 12% -8%,rgba(59,70,196,.42),transparent 62%),
    radial-gradient(620px 420px at 92% 4%,rgba(244,99,58,.24),transparent 60%),
    radial-gradient(900px 620px at 50% 108%,rgba(255,198,26,.12),transparent 62%);
  pointer-events:none;
}

img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}

h1,h2,h3,h4{
  font-family:"Baloo 2","Baloo2",var(--font-fallback,"Segoe UI"),sans-serif;
  font-weight:800;
  line-height:1.15;
  margin:0 0 .5em;
  letter-spacing:-.01em;
}
h1{font-size:clamp(2.15rem,5.2vw,3.9rem);}
h2{font-size:clamp(1.75rem,3.6vw,2.7rem);}
h3{font-size:clamp(1.15rem,2vw,1.4rem);}
p{margin:0 0 1rem;}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 22px;}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--gold);color:#111;padding:12px 20px;border-radius:0 0 12px 0;font-weight:700;
}
.skip-link:focus{left:0;}

:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px;}

/* ---------------------------------------------------------------- buttons */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;
  border:0;border-radius:999px;
  font-family:"Baloo 2",sans-serif;
  font-weight:700;font-size:1.02rem;line-height:1;
  cursor:pointer;white-space:nowrap;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
}
.btn svg{flex:none;}
.btn-primary{
  background:var(--grad-brand);color:#241500;
  box-shadow:0 12px 26px -12px rgba(244,99,58,.9);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 34px -12px rgba(244,99,58,1);}
.btn-ghost{
  background:rgba(255,255,255,.06);color:var(--text);
  border:1px solid var(--line);backdrop-filter:blur(6px);
}
.btn-ghost:hover{background:rgba(255,255,255,.12);transform:translateY(-2px);}
.btn-sm{padding:10px 20px;font-size:.94rem;}
.btn-block{width:100%;}
.btn-disabled{
  background:rgba(255,255,255,.05);color:var(--muted-2);
  border:1px dashed var(--line);cursor:default;
}
.btn-disabled:hover{transform:none;}

/* ----------------------------------------------------------------- header */

.site-header{
  position:sticky;top:0;z-index:90;
  height:var(--header-h);
  display:flex;align-items:center;
  background:rgba(7,10,36,.62);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
  transition:background .25s ease,box-shadow .25s ease;
}
.site-header.is-stuck{background:rgba(7,10,36,.94);box-shadow:0 10px 30px -20px #000;}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;}

.brand{display:inline-flex;align-items:center;gap:11px;font-family:"Baloo 2",sans-serif;font-weight:800;font-size:1.32rem;}
.brand img{width:42px;height:42px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5));}
.brand em{font-style:normal;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;}

.site-nav{display:flex;align-items:center;gap:6px;}
.site-nav > a{
  padding:9px 15px;border-radius:999px;
  font-weight:600;font-size:.95rem;color:var(--muted);
  transition:color .18s ease,background .18s ease;
}
.site-nav > a:hover{color:var(--text);background:rgba(255,255,255,.07);}
.site-nav > a.is-active{color:var(--gold);}
.site-nav > a.btn{color:#241500;margin-left:8px;}

.nav-toggle{
  display:none;
  width:44px;height:44px;padding:0;
  background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:12px;
  cursor:pointer;
}
.nav-toggle span{
  display:block;width:19px;height:2px;margin:4px auto;border-radius:2px;background:var(--text);
  transition:transform .22s ease,opacity .22s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* ------------------------------------------------------------------- hero */

.hero{position:relative;padding:clamp(56px,8vw,104px) 0 clamp(60px,8vw,96px);overflow:hidden;}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 16px 7px 8px;margin-bottom:20px;
  background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:999px;
  font-size:.83rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);
}
.eyebrow b{
  background:var(--grad-brand);color:#241500;
  padding:3px 11px;border-radius:999px;font-size:.78rem;font-weight:800;
}

.hero h1 .hl{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero-lead{font-size:clamp(1.02rem,1.6vw,1.16rem);color:var(--muted);max-width:54ch;margin-bottom:30px;}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:34px;}

.hero-stats{display:flex;flex-wrap:wrap;gap:34px;}
.hero-stats div strong{
  display:block;font-family:"Baloo 2",sans-serif;font-size:1.9rem;line-height:1;
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-stats div span{font-size:.86rem;color:var(--muted-2);text-transform:uppercase;letter-spacing:.06em;}

/* floating icon collage */
.hero-art{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.hero-art .tile{
  display:block;position:relative;
  aspect-ratio:1;border-radius:22px;overflow:hidden;
  border:1px solid var(--line);background:var(--navy-700);
  box-shadow:var(--shadow);
  animation:float 6s ease-in-out infinite;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.hero-art .tile img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}

/* the tiles link straight to each game page */
.hero-art a.tile:hover,
.hero-art a.tile:focus-visible{
  border-color:rgba(255,198,26,.8);
  box-shadow:0 22px 46px -16px rgba(255,198,26,.55);
}
.hero-art a.tile:hover img{transform:scale(1.09);}

.hero-art .tile-name{
  position:absolute;left:0;right:0;bottom:0;
  padding:22px 10px 9px;
  font-family:"Baloo 2",sans-serif;font-weight:700;font-size:.82rem;line-height:1.2;
  text-align:center;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(7,10,36,.92));
  opacity:0;transform:translateY(6px);
  transition:opacity .2s ease,transform .2s ease;
}
.hero-art a.tile:hover .tile-name,
.hero-art a.tile:focus-visible .tile-name{opacity:1;transform:translateY(0);}
.hero-art .tile:nth-child(2){animation-delay:-1s;}
.hero-art .tile:nth-child(3){animation-delay:-2s;}
.hero-art .tile:nth-child(4){animation-delay:-3s;}
.hero-art .tile:nth-child(5){animation-delay:-4s;}
.hero-art .tile:nth-child(6){animation-delay:-5s;}
.hero-art .tile:nth-child(7){animation-delay:-2.5s;}
.hero-art .tile:nth-child(8){animation-delay:-3.5s;}
.hero-art .tile:nth-child(9){animation-delay:-4.5s;}

@keyframes float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-12px);}
}
@media (prefers-reduced-motion:reduce){
  .hero-art .tile{animation:none;}
  html{scroll-behavior:auto;}
}

/* --------------------------------------------------------------- sections */

.section{padding:clamp(56px,7vw,92px) 0;}
.section-alt{background:linear-gradient(180deg,transparent,rgba(7,10,36,.55) 18%,rgba(7,10,36,.55) 82%,transparent);}

.section-head{max-width:660px;margin:0 auto clamp(34px,4vw,52px);text-align:center;}
.section-head.left{margin-left:0;text-align:left;}
.section-head p{color:var(--muted);margin:0;}
.kicker{
  display:block;margin-bottom:12px;
  font-size:.82rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);
}

/* ------------------------------------------------------------- game cards */

.game-grid{
  display:grid;
  /* 180 rather than 240 so a full-width row lands on roughly 210px a card -
     the same size the rails use - instead of four wide ones. */
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:22px;
}

.game-card{
  position:relative;display:flex;flex-direction:column;
  background:linear-gradient(180deg,rgba(26,34,96,.72),rgba(11,16,48,.9));
  border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.game-card:hover{transform:translateY(-6px);border-color:rgba(255,198,26,.5);box-shadow:var(--shadow-lg);}

.game-card .thumb{position:relative;aspect-ratio:1;overflow:hidden;background:var(--navy-700);}
.game-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.game-card:hover .thumb img{transform:scale(1.07);}
.game-card .thumb::after{
  content:"";position:absolute;inset:auto 0 0 0;height:56%;
  background:linear-gradient(180deg,transparent,rgba(11,16,48,.92));
}

.badge{
  position:absolute;top:12px;left:12px;z-index:2;
  padding:5px 12px;border-radius:999px;
  font-size:.73rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  background:rgba(7,10,36,.78);border:1px solid var(--line);color:var(--muted);
  backdrop-filter:blur(6px);
}
.badge-live{background:rgba(47,207,122,.16);border-color:rgba(47,207,122,.45);color:#8df3bd;}
.badge-soon{background:rgba(255,198,26,.14);border-color:rgba(255,198,26,.4);color:var(--gold-soft);}

.game-card .body{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1;gap:6px;}
.game-card h3{margin:0;font-size:1.22rem;}
.game-card .tagline{color:var(--muted);font-size:.92rem;margin:0;flex:1;}
.game-card .card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;}
.game-card .cat{font-size:.8rem;font-weight:600;color:var(--muted-2);text-transform:uppercase;letter-spacing:.06em;}
.game-card .go{
  display:inline-flex;align-items:center;gap:6px;
  font-family:"Baloo 2",sans-serif;font-weight:700;font-size:.95rem;color:var(--gold);
}
.game-card .go svg{transition:transform .2s ease;}
.game-card:hover .go svg{transform:translateX(4px);}

/* whole card clickable, real link inside keeps it accessible */
.game-card .stretch{position:absolute;inset:0;z-index:3;}

/* featured, wider cards */
.feature-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px;}
.feature-card{
  display:flex;gap:20px;align-items:center;
  padding:20px;
  background:linear-gradient(135deg,rgba(59,70,196,.28),rgba(11,16,48,.85));
  border:1px solid var(--line);border-radius:var(--r-lg);
  position:relative;overflow:hidden;
  transition:transform .22s ease,border-color .22s ease;
}
.feature-card:hover{transform:translateY(-5px);border-color:rgba(255,198,26,.5);}
.feature-card img{width:96px;height:96px;border-radius:20px;object-fit:cover;flex:none;box-shadow:var(--shadow);}
.feature-card h3{margin:0 0 4px;font-size:1.2rem;}
.feature-card p{margin:0;color:var(--muted);font-size:.92rem;}
.feature-card .cat{margin-top:8px;display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);}

/* --------------------------------------------------------- filter toolbar */

.toolbar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  margin-bottom:30px;
}
.filters{display:flex;flex-wrap:wrap;gap:9px;}
.filters button{
  padding:9px 18px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  color:var(--muted);font-family:"Inter",sans-serif;font-weight:600;font-size:.9rem;
  transition:all .18s ease;
}
.filters button:hover{color:var(--text);background:rgba(255,255,255,.1);}
.filters button.is-active{background:var(--grad-brand);border-color:transparent;color:#241500;}

.search-box{position:relative;min-width:230px;flex:0 1 300px;}
.search-box input{
  width:100%;padding:12px 16px 12px 42px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:999px;
  color:var(--text);font-family:inherit;font-size:.94rem;
}
.search-box input::placeholder{color:var(--muted-2);}
.search-box input:focus{outline:none;border-color:rgba(255,198,26,.6);background:rgba(255,255,255,.09);}
.search-box svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--muted-2);pointer-events:none;}

.no-results{
  display:none;padding:56px 20px;text-align:center;color:var(--muted);
  border:1px dashed var(--line);border-radius:var(--r-lg);
}
.no-results.is-on{display:block;}

/* ------------------------------------------------------------- why / perks */

.perk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;}
.perk{
  padding:28px 24px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:var(--r-lg);
  transition:transform .22s ease,background .22s ease;
}
.perk:hover{transform:translateY(-4px);background:rgba(255,255,255,.07);}
.perk .ico{
  width:52px;height:52px;margin-bottom:16px;
  display:grid;place-items:center;border-radius:16px;
  background:var(--grad-brand);color:#241500;
}
.perk h3{font-size:1.12rem;margin:0 0 6px;}
.perk p{margin:0;color:var(--muted);font-size:.93rem;}

/* ------------------------------------------------------------------- band */

.cta-band{
  position:relative;overflow:hidden;
  padding:clamp(40px,5vw,62px);
  border-radius:var(--r-xl);
  background:var(--grad-blue);
  border:1px solid rgba(255,255,255,.16);
  text-align:center;
}
.cta-band::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(600px 300px at 50% 0,rgba(255,198,26,.35),transparent 65%);
  pointer-events:none;
}
.cta-band > *{position:relative;z-index:1;}
.cta-band p{color:rgba(255,255,255,.85);max-width:56ch;margin:0 auto 26px;}

/* ------------------------------------------------------------ game detail */

.crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.88rem;color:var(--muted-2);padding:26px 0 0;}
.crumbs a:hover{color:var(--gold);}
.crumbs span{opacity:.5;}

.detail-hero{padding:26px 0 clamp(40px,6vw,64px);}
.detail-grid{display:grid;grid-template-columns:260px 1fr;gap:40px;align-items:start;}
.detail-icon{
  border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow-lg);
  background:var(--navy-700);
}
.detail-icon img{width:100%;aspect-ratio:1;object-fit:cover;}

.detail-meta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px;}
.pill{
  padding:6px 14px;border-radius:999px;font-size:.8rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
  background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--muted);
}
.pill-cat{background:rgba(255,198,26,.14);border-color:rgba(255,198,26,.4);color:var(--gold-soft);}

.detail-hero h1{margin-bottom:10px;}
.detail-lead{font-size:1.1rem;color:var(--muted);max-width:60ch;}
.detail-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px;}

.detail-body{display:grid;grid-template-columns:1.6fr 1fr;gap:44px;align-items:start;}
.detail-body h2{font-size:1.7rem;}
.detail-body p{color:var(--muted);}

.feature-list li{
  position:relative;padding:11px 0 11px 34px;
  border-bottom:1px solid var(--line-soft);color:var(--muted);
}
.feature-list li:last-child{border-bottom:0;}
.feature-list li::before{
  content:"";position:absolute;left:0;top:16px;
  width:20px;height:20px;border-radius:50%;
  background:var(--grad-brand);
}
.feature-list li::after{
  content:"";position:absolute;left:6px;top:22px;
  width:8px;height:4px;border-left:2px solid #241500;border-bottom:2px solid #241500;
  transform:rotate(-45deg);
}

/* ------------------------------------------------------------------ */
/* Playable WebGL build on a game page.                                 */
/* ------------------------------------------------------------------ */
.player{
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--navy-700);overflow:hidden;box-shadow:var(--shadow-lg);
}
.player-stage{
  position:relative;width:100%;aspect-ratio:16/9;
  background:#0b1030;overflow:hidden;
}
.player-stage iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
}
/* The poster is the game's shop window. It carries no cover art: a screenshot
   behind the icon and the Play button competes with both, and an icon with
   transparent edges lets it show straight through. Colour and depth come from
   the panel itself, so every game reads the same way. */
.player-poster{
  position:absolute;inset:0;z-index:2;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  text-align:center;padding:24px;
  background:radial-gradient(120% 120% at 50% 30%,#141c50 0%,#0b1030 58%,#070a24 100%);
}
.player-poster[hidden]{display:none;}

.player-poster-inner{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.player-poster-icon{
  width:104px;height:104px;border-radius:var(--r-md);
  box-shadow:0 18px 44px -14px rgba(0,0,0,.85);
  border:1px solid rgba(255,255,255,.14);
}
.player-poster h2{font-size:1.3rem;margin:6px 0 0;text-shadow:0 2px 14px rgba(0,0,0,.5);}
.player-poster p{color:var(--muted);margin:0 0 6px;font-size:.92rem;}
/* The one thing on the poster that has a job: get pressed.
 *
 * A slow halo pushing out from behind the button reads as "this is live" and
 * pulls the eye without the button itself jumping about - a button that moves
 * is a button that is harder to hit. Everything else on the poster is still,
 * so this is the only thing moving and it does not have to shout. */
.player-poster .btn-primary{
  position:relative;
  padding:15px 38px;font-size:1.06rem;font-weight:750;letter-spacing:.01em;
  box-shadow:0 14px 30px -10px rgba(244,99,58,.85),0 0 0 0 rgba(255,198,26,.55);
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
/* Two rings, the second half a beat behind, so it reads as a ripple coming off
   the button rather than one thin line that could be a rendering artefact. */
.player-poster .btn-primary::before,
.player-poster .btn-primary::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  border:3px solid rgba(255,198,26,.7);
  animation:gj-play-halo 2.6s cubic-bezier(.22,.61,.36,1) infinite;
  pointer-events:none;
}
.player-poster .btn-primary::after{animation-delay:1.3s;}

@keyframes gj-play-halo{
  0%   {transform:scale(1);    opacity:.85;}
  65%  {transform:scale(1.42); opacity:0;}
  100% {transform:scale(1.42); opacity:0;}
}

/* The button's own glow breathes with the rings. Nothing moves, so the target
   stays exactly where the cursor expects it. */
.player-poster .btn-primary{animation:gj-play-glow 2.6s ease-in-out infinite;}
@keyframes gj-play-glow{
  0%,100%{box-shadow:0 14px 30px -10px rgba(244,99,58,.85),0 0 0 0 rgba(255,198,26,0);}
  50%    {box-shadow:0 16px 34px -10px rgba(244,99,58,.95),0 0 26px 4px rgba(255,198,26,.32);}
}
.player-poster .btn-primary:hover{
  transform:translateY(-2px);
  filter:brightness(1.06);
  box-shadow:0 20px 38px -12px rgba(244,99,58,.95);
}
.player-poster .btn-primary:active{transform:translateY(0) scale(.98);}
.player-poster .btn-primary svg{width:20px;height:20px;}

/* A halo that never stops is exactly what someone who asked for less motion
   does not want. The button keeps its size, weight and hover. */
@media (prefers-reduced-motion:reduce){
  .player-poster .btn-primary{animation:none;}
  .player-poster .btn-primary::before,
  .player-poster .btn-primary::after{animation:none;opacity:0;}
}

/* No fullscreen button on a phone. Play already hands the game the whole
   screen there, and the Fullscreen API would take the browser's own bars with
   it - which is the one thing that must stay. Matched to the same test the
   script uses to decide a phone: small and touch, not merely narrow. */
@media (max-width:1000px) and (pointer:coarse){
  .player-bar .react[data-role="fullscreen"]{display:none;}
}

.player-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border-top:1px solid var(--line);
  background:rgba(255,255,255,.03);
}
.player-react{display:flex;gap:10px;}
.react{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid var(--line);
  color:var(--muted);font:inherit;font-size:.9rem;font-weight:600;
  transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.react:hover{background:rgba(255,255,255,.11);color:var(--text);}
.react.is-on{
  background:rgba(255,198,26,.16);border-color:rgba(255,198,26,.45);
  color:var(--gold-soft);
}
.react .sr-only-text{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
}

/* Fullscreen: the stage becomes the whole screen, so drop the fixed ratio. */
.player-stage:fullscreen{aspect-ratio:auto;width:100vw;height:100vh;}
.player-stage:-webkit-full-screen{aspect-ratio:auto;width:100vw;height:100vh;}

/* The game filling the screen without the Fullscreen API.
 *
 * This is what a phone gets the moment Play is pressed, and what a desktop
 * falls back to when the browser refuses fullscreen. Deliberately NOT the
 * Fullscreen API on a phone: that takes the browser's own bars away, and those
 * bars are how someone gets back out.
 *
 * Height comes from dvh - or from --player-vh, which JavaScript sets to
 * window.innerHeight for browsers without dvh. 100vh is wrong here: it is
 * measured with the address bar hidden, so the bottom of the game would sit
 * underneath it. */
.player.is-maxed .player-stage{
  position:fixed;inset:0;z-index:200;
  width:100vw;aspect-ratio:auto;border-radius:0;
  height:var(--player-vh,100vh);
  height:100dvh;
}

/* The reactions go while playing. They are page furniture, and on a phone they
   would sit on top of the game or steal a strip of it. */
.player.is-maxed .player-bar{display:none;}

body.player-maxed{overflow:hidden;}

@media (max-width:640px){
  .player-stage{aspect-ratio:4/3;}
  .player-bar{flex-wrap:wrap;}

  /* A 4:3 poster on a phone is about 247px tall, and the desktop stack - a
     104px icon, a heading, two lines of subtitle and the button - comes to 264.
     It was overflowing, which clipped the top of the icon. The subtitle is the
     part nobody reads before pressing Play, so it goes first. */
  .player-poster-icon{width:76px;height:76px;}
  .player-poster h2{font-size:1.05rem;margin:2px 0 0;}
  .player-poster p{display:none;}
  .player-poster-inner{gap:10px;}
  .player-poster .btn-primary{padding:11px 26px;font-size:.94rem;}
}

/* ------------------------------------------------------------------ */
/* Homepage: play first                                                 */
/* ------------------------------------------------------------------ */
.hero-play .hero-grid{align-items:center;}
.hero-player{min-width:0;}
.hero-player .player{box-shadow:var(--shadow-lg);}

/* On a phone the player is the point of the page, so it leads. */
@media (max-width:900px){
  .hero-play .hero-grid{display:flex;flex-direction:column;}
  .hero-play .hero-player{order:-1;width:100%;}
}

.play-row{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:14px;padding-bottom:8px;
}
.play-card{
  display:flex;align-items:center;gap:14px;padding:12px 14px;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:rgba(255,255,255,.04);
  transition:border-color .2s ease,background .2s ease;
}
.play-card:hover{border-color:rgba(255,198,26,.45);background:rgba(255,198,26,.07);}
.play-card img{width:52px;height:52px;border-radius:var(--r-md);object-fit:cover;flex:0 0 52px;}
.play-card-body{display:flex;flex-direction:column;min-width:0;flex:1;}
.play-card-body strong{color:var(--text);font-size:.98rem;}
.play-card-body small{color:var(--muted-2);font-size:.8rem;}
.play-card-go{
  display:inline-flex;align-items:center;gap:5px;flex-shrink:0;
  padding:7px 13px;border-radius:999px;font-size:.82rem;font-weight:700;
  background:var(--grad-brand);color:#241500;
}


.player-compact .player-poster h2{font-size:1.05rem;}
.player-compact .player-poster p{font-size:.85rem;}
.player-compact .player-poster img{width:72px;height:72px;}

/* ------------------------------------------------------------------ */
/* Homepage rails                                                       */
/* ------------------------------------------------------------------ */
.rail-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin-bottom:18px;
}
.rail-head h2{font-size:clamp(1.25rem,2.2vw,1.6rem);margin:0 0 4px;}
.rail-head p{color:var(--muted);margin:0;font-size:.93rem;}
.rail-more{
  display:inline-flex;align-items:center;gap:5px;flex-shrink:0;
  color:var(--gold-soft);font-weight:700;font-size:.9rem;
}
.rail-more:hover{color:var(--gold);}
.rail-next{margin-top:46px;padding-top:38px;border-top:1px solid var(--line);}

/* ------------------------------------------------------------------ */
/* Tags, sorting, badges, saved games                                   */
/* ------------------------------------------------------------------ */
.sort-bar{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:16px;
}
.sort-label{
  color:var(--muted-2);font-size:.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;margin-right:4px;
}
.sort-bar a{
  padding:7px 14px;border-radius:999px;font-size:.86rem;font-weight:600;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--muted);
}
.sort-bar a:hover{color:var(--text);background:rgba(255,255,255,.09);}
.sort-bar a.on{background:rgba(255,198,26,.16);border-color:rgba(255,198,26,.4);color:var(--gold-soft);}

/* A second badge sits under the availability one. */
.badge-status{
  top:auto;bottom:10px;
  background:rgba(0,0,0,.6);color:#fff;backdrop-filter:blur(4px);
}
.badge-hot{background:rgba(255,92,60,.92);color:#fff;}
.badge-new{background:rgba(61,220,132,.92);color:#0d2a18;}
.badge-updated{background:rgba(90,210,255,.9);color:#06283a;}

.fav-btn{
  /* Above .stretch, which covers the whole card and carries z-index 3 too.
     .thumb is positioned but has z-index auto, so it makes no stacking context
     of its own - the heart and the link compete directly, and at equal z-index
     the one later in the markup wins. That is .stretch, so a click on the heart
     was landing on the link and opening the game instead of saving it. */
  position:absolute;top:10px;right:10px;z-index:4;
  width:30px;height:30px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;padding:0;
  background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.75);backdrop-filter:blur(4px);
  transition:color .18s ease,background .18s ease,transform .18s ease;
}
.fav-btn:hover{color:#fff;background:rgba(0,0,0,.7);transform:scale(1.08);}
.fav-btn.is-on{color:#ff5c6c;border-color:rgba(255,92,108,.5);}

/* A rail is one row that runs off to the side, not a grid that wraps.
 *
 * Continue playing and Saved are lists someone scans rather than browses: a
 * wrapping grid makes them as tall as the whole catalogue and pushes the real
 * grid below the fold. One row keeps the page short and the whole list still
 * reachable, by scrolling sideways. */
.game-grid[data-rail-track]{
  display:flex;
  gap:16px;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  /* Room for the scrollbar so it never sits on top of a card. */
  padding-bottom:10px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.22) transparent;
}
.game-grid[data-rail-track]::-webkit-scrollbar{height:8px;}
.game-grid[data-rail-track]::-webkit-scrollbar-track{background:transparent;}
.game-grid[data-rail-track]::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.18);border-radius:999px;
}
.game-grid[data-rail-track]::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3);}

.game-grid[data-rail-track] > .game-card{
  flex:0 0 auto;
  width:210px;
  scroll-snap-align:start;
}
@media (max-width:640px){
  .game-grid[data-rail-track] > .game-card{width:150px;}
  .game-grid[data-rail-track]{gap:12px;}
}

/* Taking a game off Continue playing. Top left, because the heart already owns
   the top right and the two must not fight for the same corner. */
.rail-remove{
  position:absolute;top:10px;left:10px;z-index:4;
  width:30px;height:30px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;padding:0;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.75);backdrop-filter:blur(4px);
  transition:color .18s ease,background .18s ease,transform .18s ease;
}
.rail-remove:hover{color:#fff;background:rgba(255,92,108,.85);transform:scale(1.08);}
.rail-remove:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

/* The top badge sits top left too, so in a removable card it steps aside.
   The status badge is along the bottom and never in the way. */
.game-card.is-removable .thumb .badge:not(.badge-status){left:44px;}

/* "Where you left off" sits directly under the topbar and is a shortcut, not a
   section in its own right. A full section's padding above it pushed the whole
   page down, and its own bottom margin then stacked on top of the next
   section's padding - 122px between the cards and the next heading. The strip
   is tucked in; the next section still brings its own spacing. */
.section[data-rail-wrap]{padding-top:26px;}
.section[data-rail-wrap] .rail{margin-bottom:0;}

.rail{margin-bottom:30px;}
.rail[hidden]{display:none;}
.rail h2{font-size:1.15rem;margin:0 0 14px;}

/* The game a blog post is about, at the end of the post. Deliberately looks
   like a thing to act on rather than another paragraph. */
.post-game{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin-top:40px;padding:20px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);border-radius:var(--r-lg);
}
.post-game-icon{
  width:72px;height:72px;border-radius:var(--r-md);flex-shrink:0;
  border:1px solid var(--line);object-fit:cover;
}
.post-game-text{flex:1;min-width:180px;}
.post-game-eyebrow{
  display:block;color:var(--gold);font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;margin-bottom:4px;
}
.post-game-text h2{font-size:1.15rem;margin:0 0 4px;}
.post-game-text p{color:var(--muted);margin:0;font-size:.92rem;}

/* Posts written about a game, listed on the game's own page. */
.game-posts{list-style:none;padding:0;margin:16px 0 0;}
.game-posts li{border-top:1px solid var(--line-soft);}
.game-posts li:first-child{border-top:0;}
.game-posts a{display:block;padding:14px 0;}
.game-posts strong{display:block;color:var(--text);font-size:1rem;margin-bottom:3px;}
.game-posts span{display:block;color:var(--muted);font-size:.9rem;line-height:1.5;}
.game-posts a:hover strong{color:var(--gold);}

@media (max-width:640px){
  .post-game{gap:14px;padding:16px;}
  .post-game-icon{width:56px;height:56px;}
}

.tag-cloud{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin-top:38px;padding-top:24px;border-top:1px solid var(--line);
}
.tag-cloud-label{
  color:var(--muted-2);font-size:.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;width:100%;margin-bottom:4px;
}
.tag-cloud a{
  padding:6px 13px;border-radius:999px;font-size:.85rem;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--muted);
}
.tag-cloud a:hover{color:var(--gold-soft);border-color:rgba(255,198,26,.4);}
.tag-cloud a b{color:var(--muted-2);font-weight:600;font-size:.8em;margin-left:3px;}

.side-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px;}
.side-tags a{
  padding:5px 11px;border-radius:999px;font-size:.8rem;
  background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--muted);
}
.side-tags a:hover{color:var(--gold-soft);border-color:rgba(255,198,26,.4);}

/* Rotate prompt, shown over a landscape build on a portrait phone. */
.rotate-note{
  position:absolute;inset:0;z-index:4;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:rgba(11,16,48,.94);color:var(--muted);text-align:center;padding:24px;
}
.rotate-note svg{color:var(--gold);animation:rotate-hint 2.4s ease-in-out infinite;}
@keyframes rotate-hint{0%,60%,100%{transform:rotate(0);}30%{transform:rotate(-90deg);}}
@media (orientation:portrait) and (max-width:820px){
  .player.needs-landscape.is-playing .rotate-note{display:flex;}
}

/* ------------------------------------------------------------------ */
/* Blog                                                                 */
/* ------------------------------------------------------------------ */
.post-list{display:grid;gap:22px;}
.post-card{
  display:grid;grid-template-columns:220px 1fr;gap:22px;align-items:start;
  padding:20px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:rgba(255,255,255,.03);
}
/* Only a card with no thumbnail goes full width. ":only-child" used to be in
   this selector too, which meant a blog with a single post collapsed to one
   column and blew its thumbnail up to the full width of the page. */
.post-card:not(:has(.post-thumb)){grid-template-columns:1fr;}
.post-thumb{
  display:block;border-radius:var(--r-md);overflow:hidden;
  background:var(--navy-700);max-width:220px;
}
/* contain, not cover: these covers are usually square game icons, and a 16:10
   crop sliced the top and bottom off the artwork. The box keeps a steady shape
   so the cards stay aligned, and the whole image sits inside it. */
.post-thumb img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:contain;
  background:var(--navy-700);
  display:block;
}
.post-card time{color:var(--muted-2);font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;}
.post-card h2{font-size:1.25rem;margin:8px 0 10px;}
.post-card h2 a{color:var(--text);}
.post-card h2 a:hover{color:var(--gold-soft);}
.post-card p{color:var(--muted);margin:0 0 12px;}
.post-card .more{font-weight:700;font-size:.9rem;}
.pager{
  display:flex;align-items:center;justify-content:center;gap:18px;
  margin-top:34px;flex-wrap:wrap;
}
.pager-count{color:var(--muted-2);font-size:.88rem;}

/* Post images are bounded by height, not stretched to the column.
   A square icon or a portrait phone screenshot blown up to full width takes
   over the page, so cap the height and let the width follow the real aspect
   ratio instead of forcing it. */
.post-image{
  max-width:100%;
  max-height:380px;
  width:auto;
  height:auto;
  border-radius:var(--r-md);
  margin:22px auto;
  border:1px solid var(--line);
  display:block;
}

/* The box follows the image, rather than the image being poured into a fixed
   banner. Forcing width:100% on a square logo left 580px of empty background
   either side of it; cropping it to a banner instead would have cut most of
   the artwork away. Bounding by height and letting the width follow the real
   ratio suits both a square icon and a wide photo. */
.post-cover{
  max-width:100%;
  max-height:280px;
  width:auto;
  height:auto;
  border-radius:var(--r-lg);
  margin:22px auto 6px;
  border:1px solid var(--line);
  background:var(--navy-700);
  display:block;
}

@media (max-width:700px){
  .post-image{max-height:300px;}
  .post-cover{max-height:220px;}
}
@media (max-width:700px){
  .post-card{grid-template-columns:1fr;}
  /* Stacked, the thumbnail may span the card, so cap it by height. */
  .post-thumb{max-width:none;}
  .post-thumb img{max-height:180px;}
}

/* Cookie consent notice. Sits above everything, including the go-top button. */
.cookie-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:120;
  background:var(--navy-700);border-top:1px solid var(--line);
  box-shadow:0 -10px 40px rgba(0,0,0,.45);
  padding:16px clamp(14px,3vw,26px);
}
.cookie-bar[hidden]{display:none;}
.cookie-bar-inner{
  max-width:1180px;margin:0 auto;
  display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.cookie-bar strong{display:block;margin-bottom:4px;color:var(--text);font-size:.98rem;}
.cookie-bar p{margin:0;color:var(--muted);font-size:.88rem;max-width:78ch;line-height:1.55;}
.cookie-bar-actions{display:flex;gap:10px;flex-wrap:wrap;flex-shrink:0;}
@media (max-width:640px){
  .cookie-bar-inner{flex-direction:column;align-items:stretch;gap:14px;}
  .cookie-bar-actions{justify-content:stretch;}
  .cookie-bar-actions .btn{flex:1;text-align:center;justify-content:center;}
}

/* Google Play listing description on a game page. */
.store-desc{color:var(--muted);}
.store-desc h3{
  font-size:1.05rem;margin:26px 0 10px;color:var(--text);
  letter-spacing:.01em;
}
.store-desc h3:first-child{margin-top:0;}
.store-desc p{margin:0 0 14px;}
.store-desc ul{margin:0 0 16px;padding:0;list-style:none;}
.store-desc li{
  position:relative;padding:5px 0 5px 18px;color:var(--muted);
}
.store-desc li::before{
  content:"";position:absolute;left:0;top:14px;
  width:6px;height:6px;border-radius:50%;background:var(--gold-soft);
}
.store-desc-note{
  margin-top:18px;font-size:.85rem;color:var(--muted-2);
}

.side-card{
  padding:24px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.04);border:1px solid var(--line);
}
.side-card h3{font-size:1.1rem;}
.side-card dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 16px;font-size:.93rem;}
.side-card dt{color:var(--muted-2);}
.side-card dd{margin:0;text-align:right;font-weight:600;}

.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px;}
.shots figure{margin:0;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);background:var(--navy-700);}
.shots img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.shots figure:hover img{transform:scale(1.05);}

.more-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:20px;}

/* ----------------------------------------------------------------- footer */

.site-footer{
  margin-top:clamp(56px,7vw,90px);
  padding:clamp(48px,6vw,70px) 0 30px;
  background:rgba(7,10,36,.72);
  border-top:1px solid var(--line-soft);
}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;}
.footer-about p{color:var(--muted);font-size:.93rem;max-width:38ch;margin:16px 0 20px;}
.footer-col h4{font-size:1rem;margin-bottom:14px;letter-spacing:.02em;}
.footer-col li{margin-bottom:9px;}
.footer-col a{color:var(--muted);font-size:.93rem;transition:color .16s ease;}
.footer-col a:hover{color:var(--gold);}

.social{display:flex;gap:10px;}
.social a{
  width:40px;height:40px;display:grid;place-items:center;border-radius:12px;
  background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--muted);
  transition:all .18s ease;
}
.social a:hover{background:var(--grad-brand);color:#241500;border-color:transparent;transform:translateY(-2px);}

.footer-bar{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;
  margin-top:44px;padding-top:22px;border-top:1px solid var(--line-soft);
}
.footer-bar p{margin:0;font-size:.87rem;color:var(--muted-2);}

.go-top{
  position:fixed;right:22px;bottom:22px;z-index:80;
  width:46px;height:46px;display:grid;place-items:center;border-radius:14px;
  background:var(--grad-brand);color:#241500;
  box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:all .25s ease;
}
.go-top.is-on{opacity:1;visibility:visible;transform:translateY(0);}

/* ------------------------------------------------------------------- 404  */

.err{min-height:64vh;display:grid;place-items:center;text-align:center;padding:70px 0;}
.err .code{
  font-family:"Baloo 2",sans-serif;font-size:clamp(5rem,18vw,11rem);line-height:1;
  background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;
}

/* -------------------------------------------------------------- responsive */

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:44px;}
  .hero-art{max-width:440px;}
  .detail-grid{grid-template-columns:180px 1fr;gap:28px;}
  .detail-body{grid-template-columns:1fr;gap:34px;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px;}
  .footer-about{grid-column:1/-1;}
}

@media (max-width:640px){
  .hero-stats{gap:24px;}
  .hero-cta .btn{flex:1 1 auto;}
  .detail-grid{grid-template-columns:1fr;}
  .detail-icon{max-width:180px;}
  /* Two across, always. auto-fill decides how many fit, and on a phone the
     answer came out as one: a 160px minimum plus the 16px gap needs 336px and
     the content column at 375px is 331px. Five pixels short gave every game a
     full-width card. Asking for two columns outright is what was meant. */
  .game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
  .game-card .body{padding:14px 15px 18px;}
  .game-card h3{font-size:1.05rem;}
  .game-card .tagline{font-size:.85rem;}
  .feature-card{flex-direction:column;align-items:flex-start;text-align:left;}
  .toolbar{flex-direction:column;align-items:stretch;}
  .search-box{flex:1 1 auto;}
  .footer-grid{grid-template-columns:1fr;}
}

/* ------------------------------------------------------- legal / policy pages */

.legal{max-width:840px;margin:0 auto;}

.legal-head{margin-bottom:34px;}
.legal-head h1{font-size:clamp(2rem,4.4vw,3rem);margin-bottom:14px;}
.legal-dates{
  display:flex;flex-wrap:wrap;gap:10px;
  font-size:.85rem;color:var(--muted-2);
}
.legal-dates span{
  padding:6px 14px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);
}

.legal-body > section{scroll-margin-top:calc(var(--header-h) + 24px);margin-bottom:44px;}
.legal-body h2{
  font-size:1.4rem;margin:0 0 16px;
  padding-bottom:12px;border-bottom:1px solid var(--line);
}
.legal-body h3{font-size:1.05rem;margin:26px 0 8px;color:var(--gold-soft);}
.legal-body p{color:var(--muted);margin:0 0 14px;}
.legal-body strong{color:var(--text);}
.legal-body a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;}
.legal-body a:hover{color:var(--gold-soft);}

.legal-body ul.dots{display:grid;gap:11px;margin:0 0 18px;}
.legal-body ul.dots > li{
  position:relative;padding-left:22px;color:var(--muted);
}
.legal-body ul.dots > li::before{
  content:"";position:absolute;left:2px;top:.62em;
  width:7px;height:7px;border-radius:50%;background:var(--orange);
}
.legal-body ul.dots > li strong{display:inline;}

.legal-contact{
  padding:26px 28px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);border-radius:var(--r-md);
}
.legal-contact address{font-style:normal;color:var(--muted);line-height:1.8;}

@media (max-width:640px){
  .legal-contact{padding-left:20px;padding-right:20px;}
}


/* ==================================================================== */
/* Side navigation shell                                                */
/*                                                                      */
/* The nav moved out of the top bar and down the left edge: categories  */
/* and tags are the main way around a games site, and a horizontal bar  */
/* runs out of room after about six of them.                            */
/* ==================================================================== */
.site-shell{display:flex;align-items:flex-start;min-height:100vh;}

.site-side{
  width:236px;flex:0 0 236px;
  position:sticky;top:0;overflow-y:auto;
  /* dvh, not vh. On a phone 100vh is the height the viewport would be with the
     browser's address bar hidden, so a full-height panel runs on past the
     bottom of the screen and its last items cannot be reached. dvh tracks what
     is actually visible. vh stays first as the fallback. */
  height:100vh;
  height:100dvh;
  background:rgba(9,13,38,.92);border-right:1px solid var(--line);
  padding:20px 14px 24px;
  display:flex;flex-direction:column;gap:4px;
  scrollbar-width:thin;
  overscroll-behavior:contain;
}
.site-side .brand{
  display:flex;align-items:center;gap:10px;
  padding:0 8px 18px;font-size:1.15rem;font-weight:800;color:var(--text);
}
.site-side .brand img{border-radius:9px;}

.side-nav{display:flex;flex-direction:column;gap:1px;flex:1;}
.side-nav a{
  display:flex;align-items:center;gap:11px;
  padding:9px 11px;border-radius:10px;
  color:var(--muted);font-size:.9rem;font-weight:600;
  transition:background .15s ease,color .15s ease;
}
.side-nav a:hover{background:rgba(255,255,255,.06);color:var(--text);}
.side-nav a.is-active{background:rgba(255,198,26,.14);color:var(--gold-soft);}
.side-nav svg{width:17px;height:17px;flex:0 0 17px;opacity:.72;}
.side-nav a.is-active svg{opacity:1;}
.side-nav a b{
  margin-left:auto;font-size:.74rem;font-weight:700;color:var(--muted-2);
}

.side-label{
  padding:16px 11px 6px;font-size:.68rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.1em;color:var(--muted-2);
}

.side-cta{
  display:block;margin-top:14px;padding:11px 14px;border-radius:10px;
  text-align:center;font-size:.85rem;font-weight:700;
  background:var(--grad-brand);color:#241500;
}
.side-cta:hover{filter:brightness(1.07);}

.site-main{flex:1;min-width:0;}

/* -------------------------------------------------------------- topbar */
.topbar{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:14px;
  padding:12px clamp(14px,3vw,26px);
  background:rgba(11,16,48,.86);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.brand-mobile{display:none;align-items:center;gap:9px;font-weight:800;color:var(--text);}
.brand-mobile img{border-radius:8px;}

.topbar-search{
  position:relative;display:flex;align-items:center;
  flex:1;max-width:460px;margin-left:auto;
}
.topbar-search svg{
  position:absolute;left:13px;color:var(--muted-2);pointer-events:none;
}
.topbar-search input{
  width:100%;padding:10px 14px 10px 38px;
  border-radius:999px;border:1px solid var(--line);
  background:rgba(255,255,255,.05);color:var(--text);
  font:inherit;font-size:.9rem;
}
.topbar-search input::placeholder{color:var(--muted-2);}
.topbar-search input:focus{
  outline:none;border-color:rgba(255,198,26,.5);
  background:rgba(255,255,255,.08);
}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}

.side-scrim{
  /* Above the cookie notice (120) and the floating buttons (110). The drawer
     is a modal surface the reader deliberately opened, so nothing that is
     merely sitting on the page belongs on top of it - the cookie bar was
     covering the bottom third of the menu, which is where Blog, About and the
     store button live. Still below the fullscreen player at 200. */
  position:fixed;inset:0;z-index:130;background:rgba(4,6,20,.6);
  /* Dims, but does not eat the click. The menu is a shortcut, not a modal:
     you should be able to reach straight for the thing you can already see
     behind it, and have the menu close on the way. */
  pointer-events:none;
  backdrop-filter:blur(2px);
}
.side-scrim[hidden]{display:none;}

/* The old top nav is no longer rendered. */
.site-header{display:none;}

@media (max-width:1000px){
  .site-side{
    position:fixed;top:0;left:0;z-index:140;
    height:100vh;
    height:100dvh;
    width:266px;flex-basis:266px;
    transform:translateX(-100%);transition:transform .22s ease;
    box-shadow:0 0 60px rgba(0,0,0,.55);
    /* Clear of the home indicator, so the last link is not sitting under it. */
    padding-bottom:calc(24px + env(safe-area-inset-bottom));
  }
  /* The open state is set on the element itself rather than inherited from a
     body class: it is a single unambiguous selector, which is easier to trust
     than a descendant rule competing with the closed state above. */
  .site-side.is-open{transform:translateX(0);}
  .brand-mobile{display:flex;}
  /* block, not flex: the three bars are stacked by their own margin:4px auto.
     As flex items they line up in a row and the whole icon renders as one
     2px line, which is what it was doing. */
  .nav-toggle{display:block;}
  .topbar-search{max-width:none;}
}

/* ------------------------------------------------- game page: play layout */
/*
 * The game sits in the top-left and the other games run down the right, which
 * is the shape every arcade site settles on: the thing you came for gets the
 * corner your eye starts in, and the next thing to play is already on screen
 * when this round ends.
 *
 * One column below 1100px - a 300px rail beside a game on a laptop leaves
 * neither enough room.
 */
.play-layout{
  display:grid;grid-template-columns:minmax(0,1fr);gap:20px;align-items:start;
}
@media (min-width:1100px){
  .play-layout{grid-template-columns:minmax(0,1fr) 260px;}
}
.play-main{min-width:0;}

/* On a laptop the game takes the height it can get without going fullscreen.
 *
 * The stage is 16/9 everywhere else, which on a wide screen leaves the game
 * sitting in the top half with dead space under it. Here the height comes from
 * the viewport instead: what is left after the topbar, the player's own bar
 * and a little breathing room at the bottom. The build inside letterboxes
 * itself if its own aspect does not match, which is what it already does.
 *
 * dvh with a vh fallback, so a browser without dvh gets a slightly generous
 * height rather than no rule at all. */
@media (min-width:1100px){
  .play-layout .player-stage{
    aspect-ratio:auto;
    height:calc(100vh - 190px);
    height:calc(100dvh - 190px);
    min-height:430px;
  }

  /* The trail moved in here from the hero. Small and quiet: it is a way back,
     not a heading. */
  .play-side .crumbs{
    padding:0 0 2px;
    font-size:.78rem;
    gap:6px;
    line-height:1.5;
  }
}

/* Without the hero above it, the player would otherwise start hard against
   the topbar. */
.play-layout{padding-top:18px;}


.play-side{
  display:flex;flex-direction:column;gap:18px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px 14px;
}

/* The game's own details, beside the game rather than above it. Everything
   here used to be a full-width hero that pushed the thing people came for
   below the fold. */
.play-about-head{display:flex;align-items:center;gap:12px;}
.play-about-icon{
  width:60px;height:60px;flex:0 0 60px;
  border-radius:var(--r-md);object-fit:cover;
  border:1px solid var(--line);background:var(--navy-800);
}
.play-about h1{font-size:1.15rem;margin:0 0 6px;line-height:1.2;}
.play-about .detail-meta{margin:0;gap:5px;}
.play-about .pill{padding:3px 9px;font-size:.63rem;}
.play-about-lead{
  color:var(--muted);font-size:.85rem;line-height:1.5;margin:12px 0 0;
}
.play-about-cta{display:flex;flex-direction:column;gap:8px;margin-top:14px;}
.play-about-cta .btn{width:100%;justify-content:center;padding:11px 14px;font-size:.85rem;}
.play-side-head{font-size:.95rem;margin:0 0 12px;}
.play-side-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:10px;
}
@media (min-width:1100px){
  .play-side-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}
.play-side-item{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  color:var(--muted);font-size:.62rem;line-height:1.25;text-align:center;
}
.play-side-item img{
  width:100%;height:auto;aspect-ratio:1;object-fit:cover;
  border-radius:var(--r-sm);background:var(--navy-800);
  border:1px solid var(--line);
  transition:transform .15s ease,border-color .15s ease;
}
.play-side-item span{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.play-side-item:hover img{transform:translateY(-2px);border-color:var(--gold);}
.play-side-item:hover span{color:var(--text);}
.play-side-all{
  display:block;margin-top:14px;text-align:center;
  font-size:.78rem;font-weight:650;color:var(--gold);
}

/* --------------------------------------------- sidebar out of the way */
/*
 * The sidebar starts parked off to the side on every page and comes back over
 * the content on the menu button, at every width - the same thing a phone has
 * always done, now on the desktop too. That hands the whole width back to the
 * games, and the header with its search stays exactly where it was.
 *
 * These repeat the phone rules rather than sharing a selector list with them,
 * because they have to beat the min-width:1001px rules further down - two
 * classes deep does that on its own, whatever the source order.
 */
body.nav-collapsed .site-side{
  position:fixed;top:0;left:0;z-index:140;
  height:100vh;
  height:100dvh;
  width:266px;flex-basis:266px;
  transform:translateX(-100%);transition:transform .22s ease;
  box-shadow:0 0 60px rgba(0,0,0,.55);
  padding-bottom:calc(24px + env(safe-area-inset-bottom));
}
body.nav-collapsed .site-side.is-open{transform:translateX(0);}
body.nav-collapsed .nav-toggle{display:block;}
body.nav-collapsed .brand-mobile{display:flex;}

@media (min-width:1001px){
  .nav-toggle{display:none;}
}

@media (max-width:560px){
  .brand-mobile span{display:none;}
}


/* ==================================================================== */
/* Homepage board: games at the very top                                */
/* ==================================================================== */
.hero-board{padding:clamp(26px,3.5vw,44px) 0 clamp(30px,4vw,50px);}

.hero-line{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:26px;flex-wrap:wrap;margin-bottom:24px;
}
.hero-line h1{
  font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.12;margin:0 0 8px;
}
.hero-line p{color:var(--muted);margin:0;max-width:62ch;font-size:.98rem;}
.hero-line-stats{display:flex;gap:26px;flex-shrink:0;}
.hero-line-stats strong{
  display:block;font-size:1.5rem;line-height:1.1;color:var(--gold-soft);font-weight:800;
}
.hero-line-stats span{
  font-size:.72rem;color:var(--muted-2);text-transform:uppercase;letter-spacing:.08em;
}

/* Player on the left, a wall of games filling the rest. */
.hero-board-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:22px;align-items:start;}
.hero-feature{min-width:0;}
.hero-feature .player{box-shadow:var(--shadow-lg);}

.hero-picks{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;align-content:start;
}

.tile-card{
  display:flex;flex-direction:column;gap:2px;min-width:0;
}
.tile-art{
  position:relative;display:block;border-radius:var(--r-md);overflow:hidden;
  border:1px solid var(--line);background:var(--navy-700);
  transition:border-color .18s ease,transform .18s ease;
}
.tile-card:hover .tile-art{border-color:rgba(255,198,26,.5);transform:translateY(-3px);}
.tile-art img{width:100%;aspect-ratio:1;object-fit:cover;display:block;}
.tile-play{
  position:absolute;left:6px;bottom:6px;
  display:inline-flex;align-items:center;gap:3px;
  padding:3px 8px;border-radius:999px;
  background:rgba(255,198,26,.94);color:#241500;
  font-size:.68rem;font-weight:800;
}
.tile-card strong{
  margin-top:8px;font-size:.86rem;font-weight:600;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tile-card small{font-size:.74rem;color:var(--muted-2);}

@media (max-width:1100px){
  .hero-board-grid{grid-template-columns:1fr;}
  .hero-picks{grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media (max-width:700px){
  .hero-picks{grid-template-columns:repeat(3,minmax(0,1fr));}
  .hero-line-stats{gap:18px;}
}
@media (max-width:430px){
  .hero-picks{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* The hero grid when it is the whole width, with no player beside it. */
.hero-picks-wide{grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;}
@media (max-width:1200px){.hero-picks-wide{grid-template-columns:repeat(5,minmax(0,1fr));}}
@media (max-width:1000px){.hero-picks-wide{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media (max-width:700px){.hero-picks-wide{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:430px){.hero-picks-wide{grid-template-columns:repeat(2,minmax(0,1fr));}}


/* Player action bar: like, dislike, save, share | fullscreen, info. */
.player-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}

/* The game's name on the left, everything you can press on the right. The
   name takes the slack so the controls stay pinned to the edge however long
   the title runs, and it truncates rather than pushing them off. */
.player-title{
  flex:1 1 auto;min-width:0;
  font-weight:700;font-size:1rem;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.player-bar .react{padding:8px 12px;}
.player-bar .react svg{flex:0 0 auto;}
.react-label{display:inline;}
.player-bar .react[data-role="share"].is-on{
  background:rgba(61,220,132,.16);border-color:rgba(61,220,132,.45);color:#7ef0b0;
}
.player-bar .react[data-fav].is-on{
  background:rgba(255,92,108,.15);border-color:rgba(255,92,108,.45);color:#ff8a97;
}
@media (max-width:640px){
  .player-bar{gap:10px;}
  .player-actions{gap:6px;}
  .player-bar .react{padding:8px 10px;}
  .react-label{display:none;}
}


/* ==================================================================== */
/* Site notice posted from the admin                                    */
/* ==================================================================== */
.site-notice{
  position:fixed;right:18px;bottom:18px;z-index:110;
  width:min(340px,calc(100vw - 36px));
  display:flex;flex-direction:column;
  background:var(--navy-700);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 18px 50px rgba(0,0,0,.55);
  opacity:0;transform:translateY(14px);
  transition:opacity .22s ease,transform .22s ease;
}
.site-notice.is-in{opacity:1;transform:none;}
.site-notice[hidden]{display:none;}

/* Whole image, never a crop. A notice picture is usually a game screenshot or
   a square icon, and a 16:9 cover sliced the top and bottom off the artwork.
   The image is bounded by height and centred, so the card stays a sensible
   size whatever shape gets uploaded. */
.site-notice-img{
  max-width:100%;
  max-height:230px;
  width:auto;
  height:auto;
  margin:0 auto;
  display:block;
  background:var(--navy-800);
}
.site-notice-body{padding:15px 16px 16px;}
.site-notice-body strong{display:block;color:var(--text);font-size:1rem;margin-bottom:5px;}
.site-notice-body p{margin:0 0 12px;color:var(--muted);font-size:.88rem;line-height:1.55;}
.site-notice-body .btn{width:100%;justify-content:center;}

.site-notice-close{
  position:absolute;top:9px;right:9px;
  width:28px;height:28px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;padding:0;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.8);backdrop-filter:blur(4px);
}
.site-notice-close:hover{background:rgba(0,0,0,.75);color:#fff;}

@media (max-width:600px){
  .site-notice{right:12px;left:12px;bottom:12px;width:auto;}
}


/* ==================================================================== */
/* Header search dropdown + notification bell                           */
/* ==================================================================== */
.topbar-search{position:relative;}

.search-results{
  position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:90;
  background:var(--navy-700);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;
  box-shadow:0 18px 46px rgba(0,0,0,.55);
  max-height:min(60vh,420px);overflow-y:auto;
}
.search-results[hidden]{display:none;}

.search-hit{
  display:flex;align-items:center;gap:11px;padding:9px 12px;
  border-bottom:1px solid var(--line-soft);
}
.search-hit:last-child{border-bottom:0;}
.search-hit:hover,.search-hit.is-active{background:rgba(255,255,255,.07);}
.search-hit img{width:38px;height:38px;border-radius:9px;object-fit:cover;flex:0 0 38px;}
.search-hit span{display:flex;flex-direction:column;min-width:0;flex:1;}
.search-hit strong{color:var(--text);font-size:.9rem;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.search-hit small{color:var(--muted-2);font-size:.76rem;}
.search-playable{
  font-style:normal;flex-shrink:0;padding:3px 9px;border-radius:999px;
  background:rgba(255,198,26,.9);color:#241500;font-size:.68rem;font-weight:800;
}
.search-none{margin:0;padding:14px 14px;color:var(--muted-2);font-size:.87rem;}

/* ------------------------------------------------------------------ bell */
.notice-bell{position:relative;flex-shrink:0;}
.bell-btn{
  position:relative;width:38px;height:38px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;padding:0;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--muted);
  transition:background .15s ease,color .15s ease;
}
.bell-btn:hover{background:rgba(255,255,255,.1);color:var(--text);}
.bell-btn[aria-expanded="true"]{background:rgba(255,198,26,.16);color:var(--gold-soft);}
.bell-dot{
  position:absolute;top:7px;right:8px;width:8px;height:8px;border-radius:50%;
  background:#ff5c6c;border:2px solid var(--navy-800);
}
.bell-dot[hidden]{display:none;}

.notice-panel{
  position:absolute;top:calc(100% + 10px);right:0;z-index:95;
  width:min(360px,calc(100vw - 28px));
  background:var(--navy-700);border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;
  box-shadow:0 18px 46px rgba(0,0,0,.55);
}
.notice-panel[hidden]{display:none;}
.notice-panel-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;border-bottom:1px solid var(--line);
}
.notice-panel-head strong{font-size:.92rem;}
.notice-readall{
  background:none;border:0;padding:0;cursor:pointer;
  color:var(--gold-soft);font:inherit;font-size:.78rem;font-weight:600;
}
.notice-readall:hover{text-decoration:underline;}
.notice-empty{margin:0;padding:22px 14px;color:var(--muted-2);font-size:.87rem;text-align:center;}

.notice-list{list-style:none;margin:0;padding:0;max-height:min(60vh,420px);overflow-y:auto;}
.notice-item{border-bottom:1px solid var(--line-soft);}
.notice-item:last-child{border-bottom:0;}
.notice-item-head{
  display:flex;align-items:center;gap:11px;width:100%;
  padding:12px 14px;cursor:pointer;text-align:left;
  background:none;border:0;color:inherit;font:inherit;
}
.notice-item-head:hover{background:rgba(255,255,255,.05);}
.notice-item-head img{width:40px;height:40px;border-radius:8px;object-fit:cover;flex:0 0 40px;}
.notice-item-head > span{display:flex;flex-direction:column;min-width:0;flex:1;}
.notice-item-head strong{color:var(--text);font-size:.88rem;font-weight:600;line-height:1.35;}
.notice-item-head time{color:var(--muted-2);font-size:.74rem;margin-top:2px;}
.notice-chev{color:var(--muted-2);flex-shrink:0;transition:transform .18s ease;display:flex;}
.notice-item.is-open .notice-chev{transform:rotate(90deg);}

/* A dot marks one that has not been opened yet. */
.notice-item.is-unread .notice-item-head strong::after{
  content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--gold);margin-left:7px;vertical-align:middle;
}

.notice-item-body{padding:0 14px 14px;}
.notice-item-body[hidden]{display:none;}
.notice-item-body p{margin:0 0 12px;color:var(--muted);font-size:.86rem;line-height:1.6;}
.notice-full-img{
  width:100%;border-radius:var(--r-md);margin:0 0 12px;display:block;
  border:1px solid var(--line);
}
.notice-item-body .btn{width:100%;justify-content:center;}

@media (max-width:600px){
  .notice-panel{right:-6px;width:min(340px,calc(100vw - 20px));}
}

/* Replaces the old stat counters in the hero line. */
.hero-line-link{
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  padding:10px 18px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid var(--line);
  color:var(--muted);font-weight:700;font-size:.9rem;
}
.hero-line-link:hover{color:var(--gold-soft);border-color:rgba(255,198,26,.4);}

/* Tag chips above the library grid. */
.tag-filter{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px;
}
/* Chips are links now, each going to that tag's own page. */
.tag-filter > a:not(.tag-filter-all){
  display:inline-flex;align-items:center;gap:5px;
  padding:7px 14px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);
  color:var(--muted);font-size:.86rem;font-weight:600;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.tag-filter > a:not(.tag-filter-all):hover{
  background:rgba(255,198,26,.14);border-color:rgba(255,198,26,.45);color:var(--gold-soft);
}
.tag-filter > a b{font-size:.78em;font-weight:700;opacity:.6;}
.tag-filter-all{
  margin-left:auto;color:var(--muted-2);font-size:.84rem;font-weight:600;white-space:nowrap;
}
.tag-filter-all:hover{color:var(--gold-soft);}
@media (max-width:700px){ .tag-filter-all{margin-left:0;} }

/* "See more games" under a capped grid. */
.grid-more{display:flex;justify-content:center;margin-top:26px;}
.grid-more[hidden]{display:none;}