/* DANKGAMES studio stylesheet — shared by every page on dankgames.com.
 *
 * THE IDENTITY: a cartridge shelf. Every game is a chunky cartridge — ink outline, a ridged grip
 * along the top edge, the screenshot set into it like a label, and a hard bottom edge that makes
 * it sit ON the page like an object. The wordmark is an arcade marquee: Bungee, extruded.
 * Everything else is quiet: warm "bone" paper in light, a deep aubergine night in dark, one hot
 * tomato accent that always means "this is a link / do this", and a lemon flash for "live".
 *
 * TYPE (self-hosted, licences alongside in /fonts/):
 *   Bungee   — display: wordmark, game names, labels.   OFL 1.1, /fonts/OFL-Bungee.txt
 *   Rubik    — text: everything else (variable weight).  OFL 1.1, /fonts/OFL-Rubik.txt
 *
 * The root-font ladder, .wrap shells and .grid live in each page's own inline <style>
 * (test/wide-screen-ladder.test.cjs reads them there); every length here is rem so it grows
 * with that ladder. */

@font-face{
  font-family:"Bungee"; font-style:normal; font-weight:400; font-display:swap;
  src:url(/fonts/bungee-latin-400.woff2) format("woff2");
}
@font-face{
  font-family:"Rubik"; font-style:normal; font-weight:300 900; font-display:swap;
  src:url(/fonts/rubik-latin-wght.woff2) format("woff2");
}

/* ── tokens ─────────────────────────────────────────────────────────────── */
:root{
  color-scheme:light dark;
  --paper:#f3ecdf;      /* page */
  --paper-2:#ebe2d1;    /* recessed wells */
  --surface:#fffaf1;    /* cartridge body */
  --ink:#1e1828;        /* text + outlines */
  --dim:#5b5266;        /* secondary text (7.0:1 on paper) */
  --hair:#d9ccb6;       /* hairlines inside a cartridge */
  --edge:#1e1828;       /* cartridge outline */
  --drop:#1e1828;       /* cartridge hard bottom edge */
  --hot:#d63a19;        /* the accent: fills, marks, focus */
  --on-hot:#ffffff;     /* text on a --hot fill (4.7:1) */
  --hot-ink:#b92f10;    /* the accent as TEXT on paper/surface (5.2:1) */
  --zap:#ffcf3a;        /* lemon: "live now" */
  --zap-ink:#1e1828;
  --grip:rgba(30,24,40,.16);
  --dot:rgba(30,24,40,.07);
  --display:"Bungee","Arial Black","Impact",system-ui,sans-serif;
  --text:"Rubik",ui-sans-serif,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#141019; --paper-2:#1b1622; --surface:#211a2a; --ink:#f3ebdc; --dim:#b3a9bd;
    --hair:#3a3046; --edge:#5a4a6c; --drop:#060409;
    --hot:#ff6a45; --on-hot:#1e1828; --hot-ink:#ff8a6c; --zap:#ffd24d; --zap-ink:#1e1828;
    --grip:rgba(243,235,220,.13); --dot:rgba(243,235,220,.045);
  }
}
:root[data-theme="dark"]{
  --paper:#141019; --paper-2:#1b1622; --surface:#211a2a; --ink:#f3ebdc; --dim:#b3a9bd;
  --hair:#3a3046; --edge:#5a4a6c; --drop:#060409;
  --hot:#ff6a45; --on-hot:#1e1828; --hot-ink:#ff8a6c; --zap:#ffd24d; --zap-ink:#1e1828;
  --grip:rgba(243,235,220,.13); --dot:rgba(243,235,220,.045);
}

/* ── base ───────────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background-color:var(--paper);
  /* a faint dot-matrix on the paper: the one texture on the page */
  background-image:radial-gradient(var(--dot) 1px, transparent 1.3px);
  background-size:.9rem .9rem;
  color:var(--ink);
  font-family:var(--text); font-size:1rem; line-height:1.6;
  min-height:100vh; display:flex; flex-direction:column;
  overflow-wrap:break-word;
}
a{color:inherit}
:focus-visible{outline:3px solid var(--hot); outline-offset:3px}
b,strong{font-weight:600}

/* ── the marquee wordmark ───────────────────────────────────────────────── */
.mark{
  font-family:var(--display); font-weight:400; line-height:1;
  letter-spacing:.01em; color:var(--ink);
  text-shadow:
    .045em .045em 0 var(--hot),
    .09em .09em 0 var(--drop);
}
.mark .dank{color:var(--hot); text-shadow:.045em .045em 0 var(--drop), .09em .09em 0 var(--drop)}

/* the small studio badge used as "home" on inner pages */
.back{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--display); font-size:1.05rem; letter-spacing:.02em; line-height:1;
  color:var(--ink); text-decoration:none;
  padding:.5rem .7rem .45rem; border:2px solid var(--edge); border-radius:.55rem;
  background:var(--surface); box-shadow:0 .2rem 0 var(--drop);
  transition:transform .12s, box-shadow .12s;
}
.back .dank{color:var(--hot)}
.back:hover{transform:translateY(-2px); box-shadow:0 .32rem 0 var(--drop)}
.back:active{transform:translateY(2px); box-shadow:0 0 0 var(--drop)}

/* ── the cartridge ──────────────────────────────────────────────────────── */
.cart, .card, .game{
  position:relative;
  background:var(--surface); color:var(--ink);
  border:2px solid var(--edge);
  border-radius:.9rem .9rem .6rem .6rem;
  box-shadow:0 .35rem 0 var(--drop);
}
/* the ridged grip along the top edge */
.card::before, .game::before{
  content:""; position:absolute; left:18%; right:18%; top:.42rem; height:.5rem;
  background:repeating-linear-gradient(90deg, var(--grip) 0 2px, transparent 2px 7px);
  border-radius:2px; pointer-events:none;
}

/* ── the lemon "live" pill and the small caps label ─────────────────────── */
.chip{
  font-family:var(--display); font-size:.68rem; letter-spacing:.06em; line-height:1;
  padding:.36rem .55rem .3rem; border-radius:.35rem; text-transform:uppercase;
}
.chip.live{
  background:var(--zap); color:var(--zap-ink); border:2px solid var(--zap-ink);
  box-shadow:0 .15rem 0 var(--zap-ink);
}
.label{
  font-family:var(--display); font-size:.72rem; letter-spacing:.08em; line-height:1.3;
  text-transform:uppercase; color:var(--dim);
}

/* ── panels (prose pages) ───────────────────────────────────────────────── */
.panel{
  background:var(--surface); border:2px solid var(--edge); border-radius:.8rem;
  box-shadow:0 .3rem 0 var(--drop);
  padding:1.35rem 1.45rem 1.4rem; margin-top:1.4rem;
}
.panel h2{
  font-family:var(--display); font-weight:400; font-size:1.02rem; letter-spacing:.03em;
  line-height:1.3; margin-bottom:.7rem;
}
.panel.limit{background:var(--paper-2); box-shadow:none; border-style:dashed}

/* ── footer ─────────────────────────────────────────────────────────────── */
footer{
  margin-top:auto; border-top:2px solid var(--edge); background:var(--paper-2);
  padding:1.3rem 0 1.8rem; color:var(--dim); font-size:.86rem;
}
footer .wrap{display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between; align-items:center}
footer span:first-child{font-family:var(--display); font-size:.78rem; letter-spacing:.05em; color:var(--ink)}
footer a{color:var(--ink); text-underline-offset:3px; text-decoration-thickness:2px; text-decoration-color:var(--hot)}
footer a:hover{color:var(--hot-ink)}

/* ── the /games/ pages ──────────────────────────────────────────────────────
   One page per game and an index grouped by kind (T-DGSHUB.1). Built from the tokens above, so
   both themes come for free; written by tools/make-games.cjs. */
.gamepage a{color:var(--hot-ink); text-decoration-thickness:2px; text-underline-offset:3px}
.gamepage a:hover{color:var(--ink)}
.gamepage footer a{color:var(--ink)}
.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.1rem; margin-bottom:1.3rem}
.crumbs a.back{color:var(--ink)}
.crumbs a.up{font-weight:700; font-size:.95rem}
.gp-head{padding:2rem 0 1.2rem}
.gp-title{
  font-family:var(--display); font-weight:400; letter-spacing:.01em; line-height:1.05;
  font-size:clamp(2rem,6.2vw,3.4rem); margin:.35rem 0 .55rem;
  text-shadow:.05em .05em 0 var(--hot), .1em .1em 0 var(--drop);
}
.gp-line{font-size:1.05rem; line-height:1.5; max-width:40em}
.gp-hero{display:grid; grid-template-columns:minmax(0,1.75fr) minmax(0,1fr); gap:1.4rem; align-items:start}
.shot{padding:1.5rem .85rem .8rem}
.shot img{
  display:block; width:100%; height:auto; background:var(--paper-2);
  border:2px solid var(--edge); border-radius:.45rem;
}
.shot figcaption{color:var(--dim); font-size:.82rem; line-height:1.45; margin-top:.6rem}
.gp-side{display:flex; flex-direction:column; gap:1rem}
.gamepage a.play{
  display:block; text-align:center; text-decoration:none;
  font-family:var(--display); font-size:1.45rem; letter-spacing:.03em; line-height:1.15;
  color:var(--on-hot); background:var(--hot); border:2px solid var(--edge); border-radius:.7rem;
  padding:1.05rem 1rem .95rem; box-shadow:0 .35rem 0 var(--drop);
  transition:transform .12s, box-shadow .12s;
}
.play small{display:block; margin-top:.4rem; font-family:var(--text); font-size:.82rem; font-weight:600; letter-spacing:0; overflow-wrap:anywhere}
.gamepage a.play:hover{background:var(--ink); color:var(--surface); transform:translateY(-2px); box-shadow:0 .5rem 0 var(--drop)}
.gamepage a.play:active{transform:translateY(2px); box-shadow:0 .1rem 0 var(--drop)}
.gp-extra{font-weight:700; font-size:.95rem; text-align:center}
.facts{
  background:var(--surface); border:2px solid var(--edge); border-radius:.7rem;
  box-shadow:0 .25rem 0 var(--drop); padding:.4rem 1rem;
}
.facts div{display:grid; grid-template-columns:6.2rem 1fr; gap:.8rem; padding:.55rem 0; border-top:2px dotted var(--hair)}
.facts div:first-child{border-top:0}
.facts dt{font-family:var(--display); font-size:.72rem; letter-spacing:.07em; text-transform:uppercase; color:var(--dim); padding-top:.2rem}
.facts dd{font-size:.95rem; line-height:1.4}
.prose p{color:var(--dim); line-height:1.65; max-width:68ch}
.prose p + p{margin-top:.75rem}
.prose b, .panel b{color:var(--ink)}
.panel code{font-family:var(--mono); font-size:.86em; color:var(--ink); white-space:nowrap}
.ctrls{display:grid; grid-template-columns:1fr 1fr; gap:1.4rem}
.ctrls h3{margin-bottom:.5rem}
.ctrls ul{list-style:none; color:var(--dim); font-size:.95rem; line-height:1.55}
.ctrls li{position:relative; padding-left:1.2rem}
.ctrls li + li{margin-top:.45rem}
.ctrls li::before{content:""; position:absolute; left:.2rem; top:.6em; width:.42rem; height:.42rem; background:var(--hot); border-radius:1px; transform:rotate(45deg)}
.keys div{display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .7rem; padding:.3rem 0}
.keys dt{display:flex; flex-wrap:wrap; gap:.25rem}
.keys dd{color:var(--dim); font-size:.93rem}
kbd{
  font-family:var(--mono); font-size:.8rem; line-height:1; color:var(--ink);
  background:var(--surface); border:2px solid var(--edge); border-radius:.35rem;
  padding:.22rem .4rem .18rem; box-shadow:0 .12rem 0 var(--drop); white-space:nowrap;
}
.gp-more{margin:2.2rem 0 3rem}
.gp-more ul{list-style:none; display:flex; flex-wrap:wrap; gap:.6rem; margin-top:.6rem}
.gp-more a{
  display:inline-block; font-family:var(--display); font-size:.9rem; letter-spacing:.03em;
  color:var(--ink); text-decoration:none; background:var(--surface);
  border:2px solid var(--edge); border-radius:.5rem; padding:.5rem .75rem .42rem;
  box-shadow:0 .2rem 0 var(--drop);
}
.gp-more a:hover{color:var(--hot-ink)}
/* the index: one band per kind, a shelf of cartridges in each */
.kind{margin:1.2rem 0 2.4rem}
.kind-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:.3rem 1rem; margin-bottom:1rem;
  border-bottom:3px solid var(--edge); padding-bottom:.45rem}
.kind-head h2{font-family:var(--display); font-weight:400; font-size:1.5rem; letter-spacing:.02em; line-height:1.1}
.kind-head p{color:var(--dim); font-size:.92rem}
.shelf{display:grid; gap:1.6rem 1.25rem; grid-template-columns:repeat(auto-fill,minmax(min(100%,18rem),1fr))}
.shelf .game{padding:1.45rem 1rem 1rem; display:flex; flex-direction:column; gap:.5rem}
.shelf .game img{
  display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; object-position:top;
  background:var(--paper-2); border:2px solid var(--edge); border-radius:.45rem;
}
.shelf .game h3{font-family:var(--display); font-weight:400; font-size:1.25rem; line-height:1.15; margin-top:.3rem}
.shelf .game h3 a{color:var(--ink); text-decoration:none}
.shelf .game h3 a:hover{color:var(--hot-ink)}
.shelf .game p{color:var(--dim); font-size:.93rem; line-height:1.5}
.shelf .game .links{margin-top:auto; padding-top:.4rem; display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:center}
.gamepage a.btn{
  font-family:var(--display); font-size:.9rem; letter-spacing:.04em; line-height:1; text-decoration:none;
  color:var(--on-hot); background:var(--hot); border:2px solid var(--edge); border-radius:.45rem;
  padding:.55rem .85rem .5rem; box-shadow:0 .2rem 0 var(--drop);
}
.gamepage a.btn:hover{background:var(--ink); color:var(--surface)}
.more-link{font-weight:700; font-size:.92rem}
@media (min-width:900px){
  .kinds{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 1.25rem; align-items:start}
  .kind.wide{grid-column:1/-1}
}
@media (max-width:760px){
  .gp-hero{grid-template-columns:1fr; gap:1rem}
  .ctrls{grid-template-columns:1fr}
}
@media (max-width:600px){
  .gp-head{padding:1.1rem 0 .8rem}
  .crumbs{margin-bottom:.8rem}
  .gp-line{font-size:.95rem}
  .shot{padding:1.3rem .7rem .7rem}
  .panel{padding:1.1rem 1.05rem 1.15rem}
}

/* ── /daily/: one cartridge per daily game (T-DGDAILY.1) ────────────────────
   The cards are .game cartridges; the facts list sits flat inside them rather than as a box
   in a box. Two across from 760px, one on a phone. */
.dailies{display:grid; gap:1.6rem 1.25rem; grid-template-columns:1fr; margin-top:.4rem}
.daycard{padding:1.45rem 1.1rem 1.1rem; display:flex; flex-direction:column; gap:.55rem}
.daycard h2{font-family:var(--display); font-weight:400; font-size:1.45rem; line-height:1.1}
.daycard h2 a{color:var(--ink); text-decoration:none}
.daycard h2 a:hover{color:var(--hot-ink)}
.daycard .today{display:flex; flex-wrap:wrap; align-items:baseline; gap:.2rem .7rem;
  background:var(--paper-2); border:2px dashed var(--hair); border-radius:.55rem; padding:.55rem .8rem .5rem}
.daycard .today span{font-family:var(--display); font-size:.72rem; letter-spacing:.07em; text-transform:uppercase; color:var(--dim)}
.daycard .today strong{font-family:var(--display); font-weight:400; font-size:1.9rem; line-height:1.05; color:var(--hot-ink); overflow-wrap:anywhere}
.daycard .facts{background:none; border:0; border-radius:0; box-shadow:none; padding:0}
.daycard .facts dd{color:var(--dim)}
.daycard .facts time{color:var(--ink); font-weight:600}
.daycard .facts .in{display:block; font-size:.88rem}
.daycard .facts code{font-family:var(--mono); font-size:.84em; color:var(--ink); overflow-wrap:anywhere}
.daycard .links{margin-top:auto; padding-top:.4rem; display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:center}
.daycard .links [hidden]{display:none}
.nojs{color:var(--dim); margin-top:1rem}
@media (min-width:760px){ .dailies{grid-template-columns:repeat(2,minmax(0,1fr))} }

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{transition:none !important; animation:none !important}
}

/* A game name whose lowercase letter IS the name (33o1). Bungee has capitals only, and its O
   between digits reads as a zero ("3301"), so such a name is set in the text face instead. */
.keepcase{font-family:var(--text); font-weight:800; letter-spacing:0}