/* Shared by every page of the rules site. Split out of the old single
   page on 2026-10-13 so ten pages don't each carry a copy. */
/* Light, warm and colourful, the way party-game sites actually look. Checked
   against the real ones first: Exploding Kittens sits on cream #fcf8ee,
   Jackbox on near-white with a bright red, Cards Against Humanity on blocks of
   saturated yellow and cyan. Not one of them uses monospace or a near-black
   ground - which is exactly why the previous version read as a hacker terminal.
   The device pictures are drawn in CSS at the firmware's real coordinates. */
:root{
  --cream:#FFF7E8;
  --paper:#FFFFFF;
  --ink:#191614;
  --mut:#6E675C;
  --gold:#FFC61A;
  --red:#E8412F;
  --green:#12A05B;
  --line:#EFE5D0;
  --shadow:0 3px 0 rgba(25,22,20,.10);
  --disp:"Fredoka",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
/* A class with a display on it outranks the browser's own [hidden] rule, so
   without this the hidden update note stays on screen. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);
  font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
.wrap{max-width:1000px;margin:0 auto;padding:0 24px}
.narrow{max-width:660px}

/* ---------- nav ---------- */
.bar{position:sticky;top:0;z-index:20;background:rgba(255,247,232,.94);
  backdrop-filter:blur(8px);border-bottom:2px solid var(--line)}
.bar .wrap{display:flex;align-items:center;gap:12px;height:66px;min-width:0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);
  font-family:var(--disp);font-weight:700;font-size:20px;white-space:nowrap;flex:0 0 auto}
.mark{width:32px;height:32px;border-radius:10px;background:var(--red);flex:none;
  display:flex;align-items:center;justify-content:center;box-shadow:0 2px 0 rgba(0,0,0,.15)}
.mark::before{content:"";width:15px;height:6px;border-radius:3px;background:#fff;
  box-shadow:0 6px 0 #fff}
/* ⚠ No sideways scrolling, at any width - he called it out by name. The old
   bar squeezed ten links into a row that could never hold them and let it
   scroll. Now: a single row when there's genuinely room for every link, and
   below that a Menu button that drops every link down as a grid. The bar gets
   a wider track than the page body so a normal laptop still sees the row.
   Measured: brand 188 + gap 12 + eleven links 862 + padding 48 = 1110. The
   switch is at 1160, leaving 50px for a font that renders a little wider on
   someone else's machine - a row that doesn't fit would push the page sideways. */
.bar .wrap{max-width:1000px;position:relative}
/* Just the logo and a Menu button, at every width. Eleven links across the top
   was "too many buttons"; every page lives in the menu instead. */
.menubtn{margin-left:auto;display:inline-flex;font:600 16px/1 var(--disp);color:var(--ink);
  background:#fff;border:2px solid var(--line);border-radius:999px;padding:10px 18px;
  cursor:pointer;align-items:center;gap:8px}
.menubtn:focus-visible,.bar nav a:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.menubtn .ico{width:16px;height:2px;background:currentColor;position:relative;display:inline-block}
.menubtn .ico::before,.menubtn .ico::after{content:"";position:absolute;left:0;width:16px;height:2px;background:currentColor}
.menubtn .ico::before{top:-5px}.menubtn .ico::after{top:5px}
.bar nav{display:none;position:absolute;left:0;right:0;top:100%;margin:0;background:var(--cream);
  border-bottom:2px solid var(--line);padding:12px 16px 16px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;box-shadow:0 12px 24px rgba(0,0,0,.08)}
.bar.open nav{display:grid}
.bar nav a{font-family:var(--disp);font-weight:600;font-size:16px;text-decoration:none;
  padding:12px 14px;background:#fff;border:2px solid var(--line);border-radius:12px;
  color:var(--ink);text-align:center;white-space:nowrap}
.bar nav a:hover{border-color:var(--ink)}
/* On a computer the menu is a panel under the button, not a full-width sheet. */
@media(min-width:700px){
  .bar nav{left:auto;right:24px;width:520px;top:calc(100% + 8px);border:2px solid var(--line);
    border-radius:16px;grid-template-columns:repeat(3,1fr)}
}
@media(max-width:520px){ .bname{display:none} }

/* ---------- hero ---------- */
.hero{background:var(--gold);border-bottom:2px solid var(--line);padding:52px 0 56px}
.hero .grid{display:grid;gap:36px;align-items:center}
@media(min-width:880px){.hero .grid{grid-template-columns:1fr auto;gap:52px}}
.heroplay{margin:22px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.playbtn{display:inline-block;background:var(--ink);color:#fff;font-family:var(--disp);
  font-weight:700;font-size:19px;padding:13px 22px;border-radius:14px;text-decoration:none}
.playbtn:hover{filter:brightness(1.25)}
.heroplay span{font-size:15px;opacity:.8}
.pill{display:inline-block;background:var(--ink);color:#fff;font-family:var(--disp);
  font-weight:600;font-size:14px;padding:7px 16px;border-radius:999px;margin:0 0 18px}
h1{font-family:var(--disp);font-weight:700;font-size:clamp(42px,8.5vw,72px);line-height:1;
  margin:0;letter-spacing:-.02em}
.hero .sub{margin:18px 0 0;font-size:20px;max-width:20em;color:#4A4238;font-weight:500}
.facts{display:flex;gap:12px;margin:28px 0 0;flex-wrap:wrap}
.facts div{background:#fff;border-radius:14px;padding:12px 18px;box-shadow:var(--shadow)}
.facts dt{font-size:13px;color:var(--mut);margin:0;font-weight:600}
.facts dd{margin:2px 0 0;font-family:var(--disp);font-weight:700;font-size:22px}

/* ---------- the device, drawn in CSS ---------- */
.shot{display:flex;flex-direction:column;align-items:center;gap:12px;--s:1}
.frame{width:calc(348px * var(--s));height:calc(200px * var(--s))}
.bezel{background:#15171E;border-radius:20px;padding:13px;width:max-content;
  box-shadow:0 10px 0 rgba(25,22,20,.18);transform:scale(var(--s));transform-origin:top left}
/* line-height:1 is load-bearing, not styling. Every "top" in these pictures is
   the firmware's own y, and the firmware measures a text's box from the top of
   the letters. Inheriting the body's 1.6 put half the leading above every
   string and pushed the letters roughly ten pixels down their own box, which
   is how IMPOSTER ended up sitting on the Word and Tag buttons and how the big
   numbers on the tag screen ended up on top of their captions. */
.screen{width:320px;height:172px;position:relative;overflow:hidden;border-radius:6px;
  background:#14161C;color:#F2F4F8;font-weight:700;line-height:1;
  font-family:"Helvetica Neue",Arial,sans-serif}
.screen *{position:absolute}
/* Quick tips. Numbered badges sit on the mockups and repeat down the legend, so
   a reader can go either way: spot an icon and look it up, or read the list and
   find the icon. Rings rather than arrows - an arrow needs room outside the
   element it points at, and this panel is 320x172 with no margin to spare. */
.guide{display:grid;gap:34px 30px;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  margin-top:26px}
.guide>div{min-width:0}
.gtitle{font-family:var(--disp);font-weight:700;font-size:20px;margin:0 0 12px}
.ring{border:2px solid #FF4436;border-radius:7px;
  box-shadow:0 0 0 3px rgba(255,68,54,.25);z-index:4}
.call{width:21px;height:21px;border-radius:50%;background:#FF4436;color:#fff;
  font-family:var(--disp);font-weight:700;font-size:13px;line-height:21px;
  text-align:center;box-shadow:0 0 0 2px #F2F4F8;z-index:5}
.legend{list-style:none;padding:0;margin:16px 0 0}
.legend li{display:grid;grid-template-columns:24px 1fr;gap:11px;align-items:start;
  padding:9px 0;border-top:1px solid var(--line);font-size:17px;line-height:1.5}
.legend li:first-child{border-top:0}
.legend .k{width:21px;height:21px;border-radius:50%;background:#FF4436;color:#fff;
  font-family:var(--disp);font-weight:700;font-size:13px;line-height:21px;text-align:center;
  margin-top:3px}
.cap{font-family:var(--disp);font-weight:600;font-size:15px;color:var(--mut);text-align:center}
@media(max-width:430px){.shot{--s:.80}}
@media(max-width:370px){.shot{--s:.70}}
.s12{font-size:17px}.s18{font-size:25px}.s24{font-size:34px}
.ctr{left:0;right:0;text-align:center}
.dim{color:#868C9C}
.back{left:6px;top:9px;width:50px;height:26px}
.back::before{content:"";position:absolute;left:0;top:2px;width:0;height:0;
  border-top:11px solid transparent;border-bottom:11px solid transparent;
  border-right:14px solid #F2F4F8}
.back::after{content:"";position:absolute;left:13px;top:7px;width:30px;height:12px;background:#F2F4F8}
.fwd{left:254px;top:140px;width:60px;height:26px}
.fwd::before{content:"";position:absolute;left:0;top:7px;width:36px;height:12px;background:#FFC61A}
.fwd::after{content:"";position:absolute;left:34px;top:2px;width:0;height:0;
  border-top:11px solid transparent;border-bottom:11px solid transparent;
  border-left:22px solid #FFC61A}
.box{left:10px;top:36px;width:300px;height:78px;border-radius:10px;background:#262B38}
.hold{left:112px;top:118px;width:96px;height:52px;border-radius:26px;background:#FF4436;border:3px solid #F2F4F8;box-sizing:border-box;display:flex;align-items:center;justify-content:center;font-size:17px;color:#fff}.hold.on{background:#3AC75A}.s9{font-size:13px;font-weight:400}.tile{position:absolute;background:#262B38;border-radius:10px}.gbar{position:absolute;background:#FFC61A;border-radius:8px;color:#14161C;display:flex;align-items:center;justify-content:center;font-size:17px}
.btn{border-radius:12px;display:flex;align-items:center;justify-content:center}
/* the top-bar icons, at the coordinates the firmware draws them: padlock
   centred on x 199, home on 250, settings on 296 */
.pad{left:190px;top:6px;width:18px;height:24px}
.pad::before{content:"";position:absolute;left:3px;top:1px;width:12px;height:12px;
  border-radius:50%;border:2px solid #FFC61A;box-sizing:border-box}
.pad::after{content:"";position:absolute;left:0;top:10px;width:18px;height:14px;
  border-radius:3px;background:#FFC61A}
.home{left:236px;top:7px;width:28px;height:23px}
.home::before{content:"";position:absolute;left:0;top:0;width:0;height:0;
  border-left:14px solid transparent;border-right:14px solid transparent;
  border-bottom:12px solid #868C9C}
.home::after{content:"";position:absolute;left:5px;top:10px;width:18px;height:13px;background:#868C9C}

/* ---------- sections ---------- */
/* Version banner. Slim, above everything, and it names the newest build
   rather than pretending to know what the reader is running - the page has no
   way to ask their box. Telling them where to look is the useful half. */
.vbar{background:var(--ink);color:#fff;font-family:var(--disp);font-weight:500;
  font-size:15px;line-height:1.45;padding:9px 18px;text-align:center}
.vbar b{font-weight:700;color:var(--yellow,#FFC61A)}
.vbar a{color:#fff;text-underline-offset:3px}
@media(max-width:560px){.vbar{font-size:13.5px;padding:8px 12px}}
section{padding:72px 0}
section.white{background:var(--paper);border-top:2px solid var(--line);
  border-bottom:2px solid var(--line)}
.tag{display:inline-block;font-family:var(--disp);font-weight:700;font-size:14px;
  padding:6px 14px;border-radius:999px;margin:0 0 14px}
.tag.g{background:#FFF0C2;color:#8A6200}
.tag.r{background:#FFE3DE;color:#B32A1B}
.tag.b{background:#E3ECFF;color:#1F4BA8}
h2{font-family:var(--disp);font-weight:700;font-size:clamp(29px,5vw,40px);line-height:1.1;
  margin:0;letter-spacing:-.02em}
.intro{margin:14px 0 0;font-size:19px;color:var(--mut);max-width:32em}
h3{font-family:var(--disp);font-weight:600;font-size:24px;margin:34px 0 2px}
p{margin:12px 0 0;max-width:33em}
ul{margin:14px 0 0;padding:0;list-style:none;max-width:33em}
ul li{position:relative;padding-left:26px;margin:11px 0}
ul li::before{content:"";position:absolute;left:0;top:9px;width:11px;height:11px;
  border-radius:50%;background:var(--gold);box-shadow:0 1px 0 rgba(0,0,0,.12)}
strong{font-weight:700}

.steps{display:grid;gap:16px;margin:28px 0 0;padding:0;list-style:none}
@media(min-width:720px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{background:var(--cream);border-radius:18px;padding:22px;box-shadow:var(--shadow)}
.steps .n{width:38px;height:38px;border-radius:12px;background:var(--gold);
  font-family:var(--disp);font-weight:700;font-size:19px;display:flex;align-items:center;
  justify-content:center;margin-bottom:14px}
.steps b{display:block;font-family:var(--disp);font-weight:600;font-size:20px}
.steps span{color:var(--mut);font-size:17px}

.split{display:grid;gap:32px;margin:36px 0 0;align-items:center}
@media(min-width:820px){
  .split{grid-template-columns:1fr auto;gap:48px}
  .split.flip .shot{order:-1}
}

.note{background:var(--cream);border-radius:16px;padding:20px 22px;margin:26px 0 0;
  max-width:33em;box-shadow:var(--shadow)}
.note b{display:block;font-family:var(--disp);font-weight:700;font-size:17px;margin-bottom:4px}
.note p{margin:0;font-size:17px;color:var(--mut)}

.win{display:grid;gap:14px;margin:30px 0 0;max-width:33em}
@media(min-width:540px){.win{grid-template-columns:1fr 1fr}}
.win div{border-radius:18px;padding:20px;color:#fff;box-shadow:var(--shadow)}
.win .c{background:var(--green)}
.win .i{background:var(--red)}
.win b{display:block;font-family:var(--disp);font-weight:700;font-size:20px;margin-bottom:3px}
.win p{margin:0;font-size:17px;max-width:none}

table{width:100%;max-width:33em;border-collapse:separate;border-spacing:0 8px;margin:18px 0 0}
th{text-align:left;font-family:var(--disp);font-weight:600;font-size:15px;color:var(--mut);
  padding:0 14px}
th:last-child{text-align:right}
td{background:var(--cream);padding:14px;font-size:17px;font-weight:500}
td:first-child{border-radius:12px 0 0 12px}
td:last-child{border-radius:0 12px 12px 0;text-align:right;font-family:var(--disp);font-weight:700}

dl.ref{margin:24px 0 0}
dl.ref div{display:flex;gap:18px;background:var(--cream);border-radius:14px;padding:16px 18px;
  margin-bottom:10px;box-shadow:var(--shadow)}
dl.ref dt{flex:0 0 130px;font-family:var(--disp);font-weight:600;font-size:17px}
dl.ref dd{margin:0;color:var(--mut);font-size:17px}
@media(max-width:470px){dl.ref div{flex-direction:column;gap:2px}dl.ref dt{flex:none}}


/* ---------- report form ---------- */
.report{background:var(--ink);color:#fff}
.report h2{color:#fff}
.report .intro{color:#B9B1A4}
.report form{margin:26px 0 0;max-width:33em;display:grid;gap:12px}
.report label{font-family:var(--disp);font-weight:600;font-size:16px;color:#E6DFD3}
.report input,.report textarea{font-family:var(--sans);font-size:17px;width:100%;
  padding:14px 16px;border-radius:14px;border:2px solid #3A342C;background:#231F1B;
  color:#fff}
.report input:focus,.report textarea:focus{outline:none;border-color:var(--gold)}
.report textarea{min-height:130px;resize:vertical}
.report button{font-family:var(--disp);font-weight:700;font-size:19px;color:var(--ink);
  background:var(--gold);border:0;border-radius:14px;padding:16px 26px;cursor:pointer;
  box-shadow:0 4px 0 #B98C00;justify-self:start}
.report button:hover{background:#FFD34D}
.report button:active{transform:translateY(2px);box-shadow:0 2px 0 #B98C00}
.report .small{font-size:15px;color:#9A9186;margin-top:4px}
.report .small.bad{color:#FFB3A8}
/* the cream note sits on the dark section, so its heading needs its ink back */
.report .note b{color:var(--ink)}
.hp{position:absolute;left:-9999px}

/* the two feedback kinds, and the reply tick */
.report .pick{display:grid;gap:10px;margin:2px 0 6px}
@media(min-width:560px){.report .pick{grid-template-columns:1fr 1fr}}
.report .opt{display:flex;gap:12px;align-items:flex-start;background:#231F1B;
  border:2px solid #3A342C;border-radius:14px;padding:14px 16px;cursor:pointer}
.report .opt:has(input:checked){border-color:var(--gold);background:#2C261F}
.report .opt span{font-family:var(--sans);font-weight:400;font-size:15px;color:#9A9186}
.report .opt b{display:block;font-family:var(--disp);font-weight:600;font-size:17px;
  color:#E6DFD3;margin-bottom:2px}
.report .tick{display:flex;gap:12px;align-items:flex-start;cursor:pointer;
  font-family:var(--sans);font-weight:400;font-size:16px;color:#B9B1A4;margin:2px 0 0}
.report .opt input,.report .tick input{flex:none;width:20px;height:20px;margin:2px 0 0;
  padding:0;border:0;border-radius:0;background:none;accent-color:var(--gold)}

/* ---------- update your box ----------
   The button is Espressif's own web component. It talks to the board over Web
   Serial, which is why the browser list below is a hard requirement and not a
   recommendation - Safari and Firefox have no Web Serial at all, so there is
   nothing to fall back to. Same gold button as the feedback form, so the page
   does not sprout a second button style. */
esp-web-install-button{display:block;margin:22px 0 0}
.flashbtn{font-family:var(--disp);font-weight:700;font-size:19px;color:var(--ink);
  background:var(--gold);border:0;border-radius:14px;padding:16px 26px;cursor:pointer;
  box-shadow:0 4px 0 #B98C00}
.flashbtn:hover{background:#FFD34D}
.flashbtn:active{transform:translateY(2px);box-shadow:0 2px 0 #B98C00}
.warn{display:block;max-width:33em;margin:22px 0 0;font-weight:600;color:#B32A1B}

/* ---------- how far along the update is ----------
   The installer draws its own progress inside its dialog, but that lives in a
   shadow root the page cannot reach, and it is a thin grey line nobody reads.
   This is the same numbers, on the page, big enough to see from across a
   table. The percentage is the real one the flasher reports while it writes.
   There is deliberately no bar at all until writing actually starts, because a
   bar sitting at nought would be a lie about what the box is doing. Until then
   it says which stage it is on in words. */
.ustat{max-width:33em;margin:22px 0 0;background:var(--paper);border:2px solid var(--line);
  border-radius:18px;padding:20px 22px;box-shadow:var(--shadow)}
.ustat b{display:block;font-family:var(--disp);font-weight:700;font-size:21px;line-height:1.2}
.ustat.done b{color:var(--green)}
.ustat.bad b{color:var(--red)}
.ustat p{margin:6px 0 0;font-size:17px;color:var(--mut)}
.ubar{position:relative;height:46px;margin:16px 0 0;border-radius:14px;
  background:var(--line);overflow:hidden}
.ufill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:14px;
  background:var(--gold);transition:width .2s linear}
.ustat.done .ufill{background:var(--green)}
.upct{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;align-items:center;
  justify-content:center;font-family:var(--disp);font-weight:700;font-size:21px;color:var(--ink)}
.ustat.done .upct{color:#fff}
@media(prefers-reduced-motion:reduce){.ufill{transition:none}}

/* a link that reads as a link on the cream ground */
a.more{color:var(--ink);font-family:var(--disp);font-weight:600;text-decoration:none;
  box-shadow:inset 0 -3px 0 var(--gold)}
a.more:hover{box-shadow:inset 0 -22px 0 var(--gold)}
footer{background:var(--ink);color:#C9C2B6;padding:38px 0 60px;font-size:16px}
footer .wrap{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center}
footer a{color:var(--gold);text-decoration:none;font-weight:600}

/* ---------- pages ---------- */
/* The page you're on, in the nav. */
.bar nav a[aria-current="page"]{border-color:var(--ink);background:#FFF0C2}
/* Home: one card per page instead of one endless page. */
.hub{padding:44px 0 64px}
.hub h2{margin:0 0 16px}
.pcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.pcard{display:flex;flex-direction:column;gap:4px;background:#fff;border:2px solid var(--line);
  border-radius:16px;padding:18px 18px 16px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow)}
.pcard b{font-family:var(--disp);font-size:21px;font-weight:700}
.pcard span{color:var(--mut);font-size:16px;line-height:1.35}
.pcard:hover{border-color:var(--ink)}
.pcard:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.pcard.dark{background:var(--ink);border-color:var(--ink);color:#fff}
.pcard.dark span{color:#D8D0C2}


/* Home: three buttons and nothing else to choose from. */
.herobtns{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 0}
.herobtns a{display:inline-block;font-family:var(--disp);font-weight:700;font-size:19px;
  text-decoration:none;border-radius:14px;padding:14px 22px;border:2px solid var(--ink)}
.herobtns a.go{background:var(--ink);color:#fff}
.herobtns a.alt{background:#fff;color:var(--ink)}
.herobtns a:hover{filter:brightness(1.12)}
.herobtns a:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
@media(max-width:520px){ .herobtns a{flex:1 1 100%;text-align:center} }