/* DANKGAME — the reading pages of the flagship: /about/, /how-to-play/, and the strip of
   text under the game on /. Linked AFTER /assets/site.css, whose fonts, two colour themes
   and blue|brass|red front line it uses; nothing here introduces a colour or a face of its
   own. The look is the one the classic manual (/classic/how-to-play/) already set: a
   panel header with the front line under it, a 46rem column, Grenze headlines. */
:root{ --pad:clamp(.9rem,3vw,2rem); }
html{font-size:16px}
@media(min-width:1680px){html{font-size:17px}}
@media(min-width:2100px){html{font-size:18.5px}}
@media(min-width:2800px){html{font-size:20.5px}}
@media(min-width:3600px){html{font-size:22.5px}}
*{box-sizing:border-box}
body.doc{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font:1.0625rem/1.62 var(--font-body);font-variant-numeric:lining-nums;-webkit-text-size-adjust:100%}
.wrap{max-width:46rem;margin:0 auto;padding:0 var(--pad) 3rem}
header.top{position:relative;border-bottom:1px solid var(--edge);margin-bottom:2rem;background:var(--panel)}
header.top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--line-band)}
header.top .bar{max-width:46rem;margin:0 auto;padding:.6rem var(--pad);display:flex;
  align-items:center;justify-content:space-between;gap:1rem}
.brand{color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:.55rem}
.brand::before{content:"";flex:none;width:1.25rem;height:1.5rem;background:url("/favicon.svg") center/contain no-repeat}
.brand b{font-family:var(--font-display);font-weight:800;font-size:1.4rem;letter-spacing:.05em;line-height:1.2}
.play{position:relative;isolation:isolate;display:inline-flex;align-items:center;min-height:44px;
  color:var(--on-gold);text-decoration:none;font-family:var(--font-display);font-weight:700;font-size:1.1rem;
  padding:.45rem 1.2rem}
.play::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#f0c566,var(--gold-fill) 45%,var(--gold-fill-2));
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.play:hover::before{background:linear-gradient(180deg,#f7d27c,#eab655 45%,#cf9433)}
.doc h1,.doc h2,.doc h3{font-family:var(--font-display);font-weight:700}
.doc h1{font-size:clamp(2.1rem,6vw,3.2rem);line-height:1;margin:.4rem 0 1rem;letter-spacing:-.01em}
.doc h1::after{content:"";display:block;width:4.5rem;height:4px;margin-top:.8rem;background:var(--line-band)}
.doc h2{font-size:1.6rem;line-height:1.1;margin:2.4rem 0 .7rem;scroll-margin-top:1rem}
.doc h3{font-size:1.2rem;margin:1.6rem 0 .5rem}
.doc p{margin:0 0 .95rem}
.doc .wrap a{color:var(--gold);text-underline-offset:3px}
.doc .lede{font-size:1.18rem;line-height:1.55}
.doc .meta{color:var(--dim);font-size:.95rem}
.doc kbd{font-family:var(--font-mono);font-size:.85em;background:var(--panel2);border:1px solid var(--edge);
  border-bottom-width:2px;padding:.02rem .35rem;border-radius:3px;white-space:nowrap}
.doc ul.rules{padding-left:1.2rem}
.doc ul.rules li{margin:.35rem 0}
.doc ul.rules li::marker{color:var(--gold)}
.doc .scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1rem 0}
.doc table.stats{border-collapse:collapse;width:100%;font-size:.95rem}
.doc table.stats caption{text-align:left;color:var(--dim);font-size:.88rem;padding-bottom:.4rem}
.doc table.stats th,.doc table.stats td{border-bottom:1px solid var(--rule);padding:.42rem .5rem;text-align:right}
.doc table.stats thead th{color:var(--dim);font-weight:700;font-size:.76rem;text-transform:uppercase;letter-spacing:.08em;border-bottom:2px solid var(--edge)}
.doc table.stats th[scope=row]{text-align:left;font-family:var(--font-display);font-weight:700;font-size:1.05em;white-space:nowrap}
.doc table.stats tbody td{font-variant-numeric:tabular-nums}
@media(max-width:30rem){
  .doc table.stats{font-size:.84rem}
  .doc table.stats th,.doc table.stats td{padding:.35rem .28rem}
  .doc table.stats thead th{font-size:.68rem;letter-spacing:.03em}
}
footer.foot{position:relative;border-top:1px solid var(--edge);margin-top:2.5rem;padding:1.1rem 0 1.4rem;
  color:var(--dim);font-size:.95rem;background:var(--bg-lift);font-family:var(--font-body)}
footer.foot p{max-width:46rem;margin:0 auto;padding:0 var(--pad)}
footer.foot a{font-weight:700;color:var(--ink-2)}

/* ── / : the flagship's page. The game is the first screen; this text sits UNDER it.
   game.css makes /play/ one fixed, unscrollable canvas. On / the same canvas is put in
   the page's flow instead: the full first screen, first in the column (main.js appends
   it to the end of <body>, so `order:-1` lifts it above the text), and the page may
   scroll past it to the words below. Nothing here is drawn over the canvas. The
   scrollbar is hidden so the canvas is exactly as wide as the window main.js sizes the
   game to (window.innerWidth includes a classic scrollbar). */
html.home{height:auto;overflow-x:hidden;overflow-y:auto;scrollbar-width:none}
html.home::-webkit-scrollbar{display:none}
html.home body.game{height:auto;min-height:100%;overflow:visible;display:flex;flex-direction:column}
html.home #game{position:relative;inset:auto;order:-1;flex:none;width:100%;height:100vh;height:100dvh}
html.home .below{order:0;background:var(--bg);color:var(--ink);font:1.0625rem/1.62 var(--font-body)}
html.home .below .wrap{padding-top:2rem}
html.home .below h1{font-size:clamp(1.7rem,5vw,2.4rem)}
html.home footer.foot{order:0;margin-top:0}