@charset "UTF-8";
/* ============================================================
   biteplay.win — shared site stylesheet
   Used by the shelf and by every content page, so the arcade and
   the legal pages are guaranteed to look like one site. Each game
   still owns its own stylesheet; this file never touches those.
   ============================================================ */
:root{
  --ink:#3d2b20;
  --ink-soft:#7d6455;
  --card:#fffdf8;
  --line:#eadbc6;
  --accent:#ff7a3d;
  --accent-2:#f8465f;
  --violet:#7b5bd6;
  --gold:#f4b62c;
  --shadow-s:0 1px 2px rgba(97,63,36,.10);
  --shadow-m:0 6px 18px rgba(97,63,36,.14);
  --shadow-l:0 18px 48px rgba(97,63,36,.24);
  --font: ui-rounded, "Segoe UI Variable", "Segoe UI", Nunito, Avenir, system-ui, -apple-system, sans-serif;
  --emoji: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Twemoji Mozilla",sans-serif;
}
*{box-sizing:border-box;}
body{
  margin:0;min-height:100vh;
  font-family:var(--font);color:var(--ink);
  background:
    radial-gradient(1200px 700px at 10% -10%, #ffd9e0, transparent 60%),
    radial-gradient(900px 600px at 100% 0%, #ddd9ff, transparent 55%),
    radial-gradient(900px 700px at 50% 110%, #d9f2e2, transparent 60%),
    linear-gradient(165deg, #fff6e8, #ffe6c9);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}

.wrap{width:min(1120px,100%);margin:0 auto;padding:3rem 1.25rem 4rem;}

/* Tight on purpose: the shelf is the content, so the masthead earns
   only as much height as the wordmark needs. */
header.hero{text-align:center;margin-bottom:1.9rem;}
.hero-mark{display:flex;justify-content:center;gap:.4rem;font-size:1.9rem;font-family:var(--emoji);}
.hero-mark span{animation:bob 2.6s ease-in-out infinite;}
.hero-mark span:nth-child(2){animation-delay:.2s}
.hero-mark span:nth-child(3){animation-delay:.4s}
.hero-mark span:nth-child(4){animation-delay:.6s}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-9px) rotate(3deg)}}

h1{
  margin:.6rem 0 .2rem;font-size:clamp(2.3rem,7vw,3.3rem);letter-spacing:-.02em;
  background:linear-gradient(100deg,var(--accent-2),var(--accent) 45%,var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.tagline{margin:0;color:var(--ink-soft);font-weight:600;letter-spacing:.16em;font-size:.8rem;text-transform:uppercase;}

/* ============================================================
   Site navigation — one row, on every page
   Built from the same pill-and-cream language as the game menus,
   so it reads as part of the furniture rather than a bolted-on bar.
   ============================================================ */
.site-nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:.8rem 1rem;flex-wrap:wrap;margin-bottom:1.8rem;
}
.brand-link{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:1rem;font-weight:800;letter-spacing:-.01em;
  color:var(--ink);text-decoration:none;
}
.brand-link .dot{
  width:16px;height:16px;border-radius:5px;flex:0 0 auto;
  background:linear-gradient(140deg,var(--accent-2),var(--accent) 55%,var(--gold));
  box-shadow:var(--shadow-s);
}
.brand-link:hover{color:var(--accent-2);}

.nav-links{display:flex;gap:.4rem;flex-wrap:wrap;}
.nav-links a{
  font-size:.8rem;font-weight:700;color:var(--ink-soft);text-decoration:none;
  background:var(--card);border:1.5px solid var(--line);border-radius:999px;
  padding:.38rem .8rem;box-shadow:var(--shadow-s);
  transition:transform .12s ease, color .12s ease, border-color .12s ease;
}
.nav-links a:hover{color:var(--ink);border-color:#dcc6a8;transform:translateY(-1px);}
.nav-links a[aria-current="page"]{
  background:linear-gradient(180deg,var(--accent),#f2622c);
  color:#fff;border-color:transparent;
}

/* ============================================================
   Welcome copy
   Same card treatment the game menus use for their rules panel.
   On the shelf it sits below the games (.below): the copy is there
   for anyone who wants it, and for a crawler, without standing
   between a visitor and the thing they came for.
   ============================================================ */
.intro{
  max-width:840px;margin:0 auto 2.2rem;
  background:var(--card);border:1.5px solid var(--line);border-radius:18px;
  padding:1.5rem 1.7rem;box-shadow:var(--shadow-s);
}
.intro.below{margin:2.8rem auto 0;}
.hero-chips{justify-content:center;margin-top:.9rem;}
.intro h2{
  margin:0 0 .6rem;font-size:1.15rem;letter-spacing:-.01em;
}
.intro p{margin:0 0 .75rem;color:var(--ink-soft);font-size:.97rem;line-height:1.68;}
.intro p:last-of-type{margin-bottom:0;}
.intro .lede{color:var(--ink);font-size:1.04rem;font-weight:600;}
.intro strong{color:var(--ink);}
.intro-chips{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:1.1rem;}

/* Columns are capped rather than stretched, so a row holding fewer cards than
   the others still lines its cards up with them. */
.shelf{
  display:grid;gap:1.1rem;justify-content:center;
  grid-template-columns:repeat(auto-fit,minmax(300px,340px));
}

.game{
  display:flex;flex-direction:column;
  text-decoration:none;color:inherit;
  background:var(--card);border:1.5px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow-m);overflow:hidden;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.game:hover{transform:translateY(-5px);box-shadow:var(--shadow-l);}
.game:focus-visible{outline:3px solid var(--violet);outline-offset:3px;}
.game.link:hover{border-color:#f0c39a;}
.game.tetris:hover{border-color:#c9bdf0;}
.game.mines:hover{border-color:#a8ddd0;}
.game.miner:hover{border-color:#eec392;}
.game.cascade:hover{border-color:#f7bcd6;}
.game.merge:hover{border-color:#c3caf3;}
.game.invaders:hover{border-color:#b0dcc8;}
.game.wing:hover{border-color:#b0d8ec;}
.game.bricks:hover{border-color:#f0bfb3;}
.game.dust:hover{border-color:#e8c49b;}

/* ---- preview panels ---- */
.shot{height:150px;display:grid;place-items:center;position:relative;overflow:hidden;}
.shot.fruit{background:linear-gradient(160deg,#ffeede,#ffdcc0);border-bottom:1.5px solid #f2d3ad;}
.shot.well{background:linear-gradient(160deg,#3a2b47,#241b2c);border-bottom:1.5px solid #4a3a58;}

.fruit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;}
.fruit-grid i{
  width:32px;height:32px;border-radius:8px;display:grid;place-items:center;
  font-family:var(--emoji);font-size:19px;font-style:normal;
  background:linear-gradient(180deg,#fffefb,#fff2e0);
  border:1.5px solid #eed6b6;box-shadow:0 2px 0 #e8d0ae;
}
.fruit-grid i.gone{opacity:0;}

.well-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.well-grid i{width:17px;height:17px;border-radius:4px;background:rgba(255,255,255,.035);}
.well-grid i.c{box-shadow:inset 0 2px 0 rgba(255,255,255,.4);}
.well-grid i.i{background:linear-gradient(150deg,#7fdfea,#1fa8bb)}
.well-grid i.t{background:linear-gradient(150deg,#c79bea,#8a41c0)}
.well-grid i.o{background:linear-gradient(150deg,#ffdf7e,#e0a411)}
.well-grid i.l{background:linear-gradient(150deg,#ffc07a,#dc7508)}
.well-grid i.s{background:linear-gradient(150deg,#8ee09a,#31a041)}
.well-grid i.z{background:linear-gradient(150deg,#f79aa4,#d92b3f)}
.well-grid i.j{background:linear-gradient(150deg,#93aef0,#2b4fb8)}

.shot.field{background:linear-gradient(160deg,#eef8f4,#dcefe8);border-bottom:1.5px solid #b9ddd2;}
.mine-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
.mine-grid i{
  width:19px;height:19px;border-radius:5px;display:grid;place-items:center;
  font-size:11px;font-weight:800;font-style:normal;
}
.mine-grid i.hid{
  background:linear-gradient(180deg,#fffefb,#fff2e0);
  border:1px solid #eed6b6;box-shadow:0 1.5px 0 #e8d0ae;
}
/* cleared squares read as sunken, so they don't look like covered ones */
.mine-grid i.op{
  background:#efdfc4;border:1px solid #e2d0b2;border-radius:3px;
  box-shadow:inset 0 1px 2px rgba(120,80,40,.14);
}
.mine-grid i.f{font-family:var(--emoji);font-size:10px;}
.mine-grid i.n1{color:#2b6fd6}
.mine-grid i.n2{color:#2f8f4e}
.mine-grid i.n3{color:#d63f4e}

/* sky, a strip of grass, then dirt — the claw hangs into it */
.shot.dirt{
  background:linear-gradient(180deg,#8fc7e8 0 20%,#71a83f 20% 24%,#b9793d 24%,#7d4a20);
  border-bottom:1.5px solid #a86a34;
}
.rig{position:absolute;left:50%;top:24%;transform:translateX(-50%);}
.cable{display:block;width:2px;height:30px;margin:0 auto;background:#6b4a2a;}
.claw{
  display:block;width:15px;height:11px;margin:0 auto;
  border:2.5px solid #9aa0a8;border-top:none;border-radius:0 0 9px 9px;
}
.finds{
  position:absolute;left:0;right:0;bottom:13%;
  display:flex;justify-content:center;align-items:flex-end;gap:15px;
}
.finds i{display:block;border-radius:50%;}
.finds .g{
  width:20px;height:20px;
  background:radial-gradient(circle at 32% 30%,#fff6c8,#f6c445 45%,#a2690f);
  box-shadow:0 1px 2px rgba(60,30,0,.35);
}
.finds .g.big{width:29px;height:29px;}
.finds .g.sm{width:14px;height:14px;}
.finds .rk{
  width:22px;height:22px;
  background:radial-gradient(circle at 32% 30%,#d2ccc3,#9a938a 50%,#5b564f);
}
.finds .d{
  width:0;height:0;border-radius:0;
  border-left:9px solid transparent;border-right:9px solid transparent;
  border-top:17px solid #86dcf7;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.3));
}

/* a corner of a match-three board, mid-swap */
.shot.jam{background:linear-gradient(160deg,#7d3f5e,#5a2b46);border-bottom:1.5px solid #46203a;}
.jam-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;}
.jam-grid i{
  width:23px;height:23px;border-radius:7px;display:grid;place-items:center;
  font-size:14px;font-style:normal;
  background:rgba(255,255,255,.10);
}
.jam-grid i.lit{background:rgba(255,255,255,.24);box-shadow:0 0 0 2px #ffe6a8;}

/* a corner of a number board, part way up the ladder */
.shot.slab{background:linear-gradient(160deg,#8f96c8,#6f77ad);border-bottom:1.5px solid #5b63a0;}
.slab-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;}
.slab-grid i{
  width:29px;height:29px;border-radius:6px;display:grid;place-items:center;
  font-size:11px;font-weight:800;font-style:normal;
  background:rgba(255,255,255,.16);
}
.slab-grid i.n2   {background:#fdf3e0;color:#7d6455;}
.slab-grid i.n4   {background:#f8e6c4;color:#7d6455;}
.slab-grid i.n8   {background:#f6c98a;color:#5a4130;}
.slab-grid i.n16  {background:#f2a860;color:#fff;}
.slab-grid i.n32  {background:#ee8a55;color:#fff;}
.slab-grid i.n64  {background:#e86a52;color:#fff;}
.slab-grid i.n128 {background:#e04f6b;color:#fff;font-size:10px;}
.slab-grid i.n256 {background:#cf3f86;color:#fff;font-size:10px;}
.slab-grid i.n512 {background:#a93fa0;color:#fff;font-size:10px;}

/* a cabinet screen: a formation, a cannon and its shot, built from blocks */
.shot.cab{background:#0d0a18;border-bottom:1.5px solid #2b2440;}
/* Dust Rider: a hill at sunrise, and a bike leaning into it. */
.shot.dust{
  background:linear-gradient(180deg,#ffd9a8 0%,#ffc590 58%,#ffb27a 100%);
  border-bottom:1.5px solid #e0b489;position:relative;
}
.dust-hill{
  position:absolute;left:-10%;right:-10%;bottom:-34px;height:96px;
  background:#6b8f4e;border-radius:58% 42% 0 0 / 64px 46px 0 0;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.16);
}
.dust-hill.back{
  bottom:8px;height:58px;background:#8aa86c;opacity:.75;
  border-radius:52% 48% 0 0 / 42px 34px 0 0;
}
.dust-bike{position:absolute;left:50%;bottom:44px;transform:translateX(-50%) rotate(-16deg);}
.dust-bike i{
  position:absolute;bottom:0;width:23px;height:23px;border-radius:50%;
  background:#23242a;box-shadow:inset 0 0 0 4px #7a7d87;
}
.dust-bike i:first-child{left:-31px;}
.dust-bike i:last-child{left:12px;}
.dust-bike b{
  position:absolute;left:-20px;bottom:11px;width:43px;height:9px;border-radius:4px;
  background:#d8452f;
}
.dust-bike b::after{
  content:'';position:absolute;left:7px;bottom:7px;width:14px;height:19px;
  border-radius:4px;background:#2f4a7a;
}
.dust-bike b::before{
  content:'';position:absolute;left:8px;bottom:25px;width:14px;height:14px;
  border-radius:50%;background:#1d2330;
}

/* Brick Bounce: a slice of wall, a ball, a paddle. Built from divs like
   every other preview here, so ogcards.js can lift it straight out of the
   homepage and the share card cannot drift from the shelf. */
.shot.brk{background:#170f14;border-bottom:1.5px solid #3a2229;}
.brk-in{display:grid;gap:7px;justify-items:center;}
.brk-row{display:flex;gap:3px;}
.brk-row i{display:block;width:17px;height:7px;border-radius:2px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);}
.brk-row.a i{background:#b0479f}
.brk-row.b i{background:#e2563f}
.brk-row.c i{background:#f4a62c}
.brk-row i.st{background:#3c4250;box-shadow:inset 0 0 0 1px #6b7383;}
.brk-row i.bm{background:#2f2a3a;box-shadow:inset 0 0 0 2px #ffd23f;}
.brk-gap{height:14px;}
.brk-ball{width:6px;height:6px;background:#fffaf0;border-radius:1px;
  margin-left:26px;}
.brk-pad{width:52px;height:6px;border-radius:3px;
  background:linear-gradient(180deg,#e2563f 0 2px,#ffe0b8 2px);}

/* Pixel Invaders: a flagship, two loose waves and the ship firing. The
   old art was a rigid 6x3 block with a gun under it, which described a
   game that no longer exists. Waves are deliberately not aligned. */
.cab-in{display:grid;gap:7px;justify-items:center;}
.cab-boss{
  width:74px;height:18px;border-radius:6px;position:relative;
  background:linear-gradient(180deg,#7a4bd0,#5a32a8);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.18);
}
.cab-boss i{
  position:absolute;top:6px;width:8px;height:6px;background:#ff5a7a;border-radius:1px;
}
.cab-boss i:first-child{left:16px;}
.cab-boss i:last-child{right:16px;}
.cab-row{display:flex;gap:9px;}
.cab-row.o{margin-left:22px;}
.cab-row b{
  width:11px;height:9px;display:block;border-radius:1px;
  clip-path:polygon(18% 0,82% 0,100% 34%,100% 100%,73% 100%,73% 78%,27% 78%,27% 100%,0 100%,0 34%);
}
.cab-row.t b{background:#ff8fc7}
.cab-row.m b{background:#9fd0ff}
.cab-row.l b{background:#8ef25f}
.cab-gun{display:grid;justify-items:center;gap:6px;}
.cab-gun s{display:block;width:2px;height:11px;background:#fff;text-decoration:none;}
.cab-gun u{
  display:block;width:19px;height:9px;background:#ffd447;text-decoration:none;
  clip-path:polygon(42% 0,58% 0,58% 44%,100% 44%,100% 100%,0 100%,0 44%,42% 44%);
}

/* a bird between two posts, with the grass below */
.shot.sky{
  background:linear-gradient(180deg,#7ec4ec 0 62%,#bfe3f5 62% 86%,#6fbf50 86% 92%,#c99a5e 92%);
  border-bottom:1.5px solid #a8853f;position:relative;
}
.sky .post{position:absolute;width:26px;background:linear-gradient(90deg,#4bbd7a,#7fe0a4 42%,#2e8f57);}
.sky .post::after{
  content:'';position:absolute;left:-4px;width:34px;height:9px;
  background:linear-gradient(90deg,#4bbd7a,#7fe0a4 42%,#2e8f57);border-radius:3px;
}
.sky .p1{left:52%;top:0;height:32%;}
.sky .p1::after{bottom:-9px;}
.sky .p2{left:52%;bottom:8%;height:26%;}
.sky .p2::after{top:-9px;}
.sky .p3{left:82%;top:0;height:16%;}
.sky .p3::after{bottom:-9px;}
.sky .p4{left:82%;bottom:8%;height:42%;}
.sky .p4::after{top:-9px;}
.sky .bird{
  position:absolute;left:26%;top:42%;width:24px;height:19px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#ffd964,#e8a01c);
  box-shadow:0 2px 4px rgba(60,40,10,.3);
}
.sky .bird::before{
  content:'';position:absolute;right:-6px;top:6px;
  border-left:8px solid #f2762c;border-top:3px solid transparent;border-bottom:3px solid transparent;
}
.sky .bird::after{
  content:'';position:absolute;left:13px;top:4px;width:6px;height:6px;border-radius:50%;
  background:#fff;box-shadow:inset -1px 0 0 1px #3a2a18;
}

/* ---- card body ---- */
.body{padding:1.1rem 1.25rem 1.3rem;display:flex;flex-direction:column;flex:1 1 auto;}
.title-row{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;}
.game h2{margin:0;font-size:1.25rem;}
.tag{
  font-size:.66rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  padding:.18rem .5rem;border-radius:999px;
}
.link .tag{background:#ffe9d6;color:#c1571f;border:1px solid #f6cba4;}
.tetris .tag{background:#eee9ff;color:#5b3fb0;border:1px solid #d8ccf7;}
.mines .tag{background:#e0f3ee;color:#1f7a6b;border:1px solid #b8ded4;}
.miner .tag{background:#fdefd4;color:#a2690f;border:1px solid #f0d09a;}
.cascade .tag{background:#ffe4ef;color:#b82963;border:1px solid #f7bcd6;}
.merge .tag{background:#ecefff;color:#3f4da8;border:1px solid #c3caf3;}
.invaders .tag{background:#e0f3ea;color:#1f6f52;border:1px solid #b0dcc8;}
.wing .tag{background:#e2f1fa;color:#2a7cae;border:1px solid #b0d8ec;}
.bricks .tag{background:#ffe7e0;color:#b8402b;border:1px solid #f0bfb3;}
.dust .tag{background:#ffefd8;color:#9c5a1c;border:1px solid #e8c49b;}

.blurb{margin:.5rem 0 .9rem;color:var(--ink-soft);font-size:.92rem;line-height:1.55;flex:1 1 auto;}

.facts{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.1rem;}
.fact{
  font-size:.72rem;font-weight:700;color:var(--ink-soft);
  background:#fdf6ea;border:1px solid var(--line);border-radius:8px;padding:.22rem .5rem;
}

.cta{
  align-self:flex-start;display:inline-block;text-decoration:none;
  border-radius:999px;padding:.6rem 1.4rem;font-size:.95rem;font-weight:800;color:#fff;
  box-shadow:var(--shadow-s);
  /* Every game card and game guide carries a palette class, and the eight
     rules below win on specificity. The default matters for the pages that
     have no game behind them — the guides hub — where without it the button
     is white text on nothing at all. */
  background:linear-gradient(180deg,var(--accent),#f2622c);
  transition:transform .12s ease, box-shadow .12s ease;
}
.link .cta{background:linear-gradient(180deg,var(--accent),#f2622c);}
.tetris .cta{background:linear-gradient(180deg,#8a67e0,#6b45c9);}
.mines .cta{background:linear-gradient(180deg,#38ab9a,#25806f);}
.miner .cta{background:linear-gradient(180deg,#e0972a,#b8741a);}
.cascade .cta{background:linear-gradient(180deg,#e0407f,#b82963);}
.merge .cta{background:linear-gradient(180deg,#5566cc,#3f4da8);}
.invaders .cta{background:linear-gradient(180deg,#2f8f6a,#1f6f52);}
.wing .cta{background:linear-gradient(180deg,#3f9ed4,#2a7cae);}
.bricks .cta{background:linear-gradient(180deg,#e2563f,#c23d2a);}
.dust .cta{background:linear-gradient(180deg,#d9813a,#b25d1e);}
.game:hover .cta{transform:translateY(-1px);box-shadow:var(--shadow-m);}

/* ============================================================
   Card links
   The thumbnail, the heading and the play button are each their
   own link, rather than one anchor wrapping the whole card.
   ============================================================ */
a.shot{text-decoration:none;color:inherit;display:grid;}
.game h2 a{color:inherit;text-decoration:none;}
.game h2 a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;}
a.shot:focus-visible,
.game h2 a:focus-visible,
.cta:focus-visible{outline:3px solid var(--violet);outline-offset:3px;}


/* ============================================================
   Content pages (privacy, terms, about, contact)
   ============================================================ */
.page-head{text-align:center;margin-bottom:2rem;}
.page-head h1{font-size:clamp(1.9rem,5.5vw,2.6rem);}

.doc{
  max-width:840px;margin:0 auto;
  background:var(--card);border:1.5px solid var(--line);border-radius:18px;
  padding:1.9rem 2.1rem;box-shadow:var(--shadow-s);
}
.doc-meta{
  display:inline-block;margin:0 0 1.5rem;
  font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-soft);
  background:#fdf6ea;border:1px solid var(--line);border-radius:999px;padding:.28rem .75rem;
}
.doc h2{margin:1.9rem 0 .6rem;font-size:1.1rem;letter-spacing:-.01em;}
/* only collapse the gap when a heading genuinely opens the panel — a page that
   leads with a standfirst paragraph still wants the full rhythm above its first h2 */
.doc > h2:first-child{margin-top:0;}
.doc h3{margin:1.3rem 0 .4rem;font-size:.95rem;}
.doc p{margin:0 0 .85rem;color:var(--ink-soft);font-size:.95rem;line-height:1.72;}
.doc ul{margin:0 0 .95rem;padding-left:1.25rem;}
.doc li{color:var(--ink-soft);font-size:.95rem;line-height:1.72;margin-bottom:.45rem;}
.doc li:last-child{margin-bottom:0;}
.doc strong{color:var(--ink);}
.doc a{color:var(--accent-2);font-weight:700;}
.doc a:hover{color:var(--accent);}
.doc hr{border:none;border-top:1.5px solid var(--line);margin:1.9rem 0;}

/* a quiet aside for the "have this reviewed" style note */
.doc-note{
  margin:1.7rem 0 0;padding:.95rem 1.05rem;border-radius:12px;
  background:#fff6e8;border:1.5px solid #f3dcb8;
  font-size:.87rem;line-height:1.65;color:var(--ink-soft);
}
.doc-note strong{color:#a8541a;}

/* the plain list of games used on the about page */
/* .doc ul's padding-left is (0,1,1) and beats a bare .game-index, so these
   unmarkered lists sat 20px in from the prose beside them. */
.doc .game-index{list-style:none;margin:0 0 .95rem;padding:0;display:grid;gap:.45rem;}
.doc .game-index li{margin:0;}
.game-index a{font-weight:800;}
.game-index span{color:var(--ink-soft);font-weight:400;}

/* contact details block */
.contact-card{
  margin:0 0 1.3rem;padding:1.1rem 1.2rem;border-radius:14px;
  background:#fdf6ea;border:1.5px solid var(--line);
}
.contact-card .label{
  display:block;font-size:.7rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:.3rem;
}
.contact-card .mail{
  font-size:1.05rem;font-weight:800;color:var(--accent-2);
  text-decoration:none;word-break:break-all;
}
.contact-card .mail:hover{text-decoration:underline;}

/* the named advertising partners on the privacy page */
.partner-list{list-style:none;margin:0 0 .95rem;padding:0;display:grid;gap:.5rem;}
.partner-list li{margin:0;}
.partner-list strong{display:inline-block;min-width:9.5rem;}

/* ============================================================
   Advertising slots
   Collapsed until ads.js confirms a network is actually active,
   so a site under review looks exactly as it did before any ad
   code existed — no empty boxes, no reserved gaps. The heights
   are reserved rather than grown into, to keep the page from
   shifting under the reader once a unit fills.
   ============================================================ */
.ad-slot{display:none;}
/* :not([hidden]) is load-bearing. ads.js clears the hidden attribute only on
   slots it actually filled, and this author-origin display:block would
   otherwise beat the browser's [hidden] rule and reveal the unfilled ones as
   empty reserved boxes. */
body.ads-on .ad-slot:not([hidden]){
  display:block;margin:0 auto 2.2rem;max-width:840px;
  overflow:hidden;
}
/* Centring is applied per-child rather than with text-align on the slot:
   a native unit set to inherit the page font would inherit the centring
   too, and its card text is meant to read left-aligned. */
body.ads-on .shelf-ad:not([hidden]){margin-top:2.2rem;margin-bottom:0;}
body.ads-on .ad-slot[data-ad-slot="leaderboard"]:not([hidden]){min-height:100px;}
body.ads-on .ad-slot[data-ad-slot="shelfFooter"]:not([hidden]),
body.ads-on .ad-slot[data-ad-slot="article"]:not([hidden]){min-height:120px;}
.ad-label{
  display:block;margin-bottom:.35rem;text-align:center;
  font-size:.62rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-soft);opacity:.65;
}
.ad-slot iframe{border:0;max-width:100%;display:block;margin:0 auto;}

/* ============================================================
   Footer — every page
   ============================================================ */
.site-foot{
  margin-top:3.2rem;padding-top:1.7rem;
  border-top:1.5px solid var(--line);
  text-align:center;
}
.foot-copy{margin:0;font-size:.9rem;font-weight:700;color:var(--ink);}
.foot-nav{
  display:flex;justify-content:center;flex-wrap:wrap;gap:.2rem;
  margin:.9rem 0 .8rem;
}
.foot-nav a{
  color:var(--ink-soft);text-decoration:none;font-weight:700;font-size:.86rem;
  padding:.35rem .75rem;border-radius:999px;
  transition:color .12s ease, background .12s ease;
}
.foot-nav a:hover{color:var(--ink);background:var(--card);}
.foot-note{
  margin:0 auto;max-width:640px;
  font-size:.82rem;line-height:1.7;color:var(--ink-soft);
}
.foot-note a{color:var(--accent-2);text-decoration:none;font-weight:700;}
.foot-note a:hover{text-decoration:underline;}

/* ---------------- Responsive ---------------- */
@media (max-width:520px){
  .wrap{padding:2rem 1rem 3rem;}
  .shot{height:126px;}
  .intro{padding:1.15rem 1.2rem;}
  .doc{padding:1.35rem 1.2rem;}
  .site-nav{justify-content:center;}
  .nav-links{justify-content:center;}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
}

/* ============================================================
   Guide pages (/guides/)
   Long-form companions to the games. They reuse the .doc panel
   from the legal pages, plus a breadcrumb, tables and a play
   button. Wrapping <main> in the game's own class — .doc.tetris
   — makes the play button pick up that game's accent for free.
   ============================================================ */
.crumbs{
  display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;
  margin:-.6rem 0 1.6rem;font-size:.78rem;font-weight:700;color:var(--ink-soft);
}
.crumbs a{color:var(--ink-soft);text-decoration:none;}
.crumbs a:hover{color:var(--accent-2);text-decoration:underline;}
.crumbs span[aria-hidden]{opacity:.45;}

.play-line{margin:1.3rem 0 1.6rem;}
/* .doc a{color:var(--accent-2)} is (0,1,1) and outranks .cta{color:#fff} at
   (0,1,0), which left the play button with red text on its own gradient. */
.doc .cta{align-self:auto;color:#fff;text-decoration:none;}
.doc .cta:hover{color:#fff;}

.doc table{
  width:100%;border-collapse:collapse;margin:0 0 1.1rem;
  font-size:.9rem;
}
.doc thead th{
  text-align:left;padding:.5rem .7rem;
  font-size:.7rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-soft);border-bottom:1.5px solid var(--line);
}
.doc tbody td{
  padding:.5rem .7rem;color:var(--ink-soft);line-height:1.55;
  border-bottom:1px solid #f2e7d5;vertical-align:top;
}
.doc tbody tr:last-child td{border-bottom:none;}
.doc tbody td:first-child{color:var(--ink);font-weight:700;}

kbd{
  display:inline-block;font-family:inherit;font-size:.76rem;font-weight:700;
  color:var(--ink);background:#fdf6ea;border:1px solid var(--line);
  border-bottom-width:2px;border-radius:6px;padding:.1rem .38rem;
  white-space:nowrap;
}

/* the guides hub */
/* Scoped under .doc throughout: the list rules there are (0,1,1) and a bare
   .guide-grid loses to them, which left the cards indented 20px past the prose
   and the blurbs inheriting .doc a's bold. */
.doc .guide-grid{
  list-style:none;margin:0;padding:0;
  display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.doc .guide-grid li{margin:0;padding:0;}
.doc .guide-grid a{
  display:block;text-decoration:none;color:inherit;height:100%;
  background:#fdf9f1;border:1.5px solid var(--line);border-radius:14px;
  padding:.9rem 1rem;transition:transform .12s ease,border-color .12s ease;
}
.doc .guide-grid a:hover{transform:translateY(-2px);border-color:#dcc6a8;}
.doc .guide-grid b{
  display:block;font-size:.98rem;margin-bottom:.2rem;
  color:var(--ink);font-weight:800;
}
.doc .guide-grid span{
  font-size:.85rem;font-weight:400;color:var(--ink-soft);line-height:1.5;
}

@media (max-width:520px){
  .doc table{font-size:.85rem;}
  .doc thead th,.doc tbody td{padding:.42rem .5rem;}
}