/* The inner pages' base (account, pass, sign in, checkout, help, the 404) and the account page's own parts. Since
   2026-10-16 (plan 2026-10-16-home-style-everywhere; Kyle: "Homes own style on every page") each page is lit by a game's
   room (room.css): its art behind, the words and parts on panels, and every size in rem, so the page grows with the
   screen (room.css sets the root size from the width). The account page's own rules live under `.prog` so the other
   pages, which load this file too, never meet its short names (.side, .row, .panel, .tile). */
:root{color-scheme:dark;--room:var(--night);--soft:var(--muted);--line:var(--hair)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;background:var(--night)}
/* the window: the header, the page's middle (centred when short, so a laptop never shows one empty band), the footer */
body{margin:0;min-height:100svh;display:flex;flex-direction:column;background:var(--room);color:var(--paper);font:400 1rem/1.5 var(--body);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{list-style:none;padding:0}
a{color:inherit}
img{display:block;max-width:100%}
[hidden]{display:none!important}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
svg.i{width:1em;height:1em;flex:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:focus-visible{outline:none;box-shadow:0 0 0 3px var(--night),0 0 0 .375rem var(--paper)}
.tl{display:inline-flex;align-items:center;min-height:2.75rem;padding:0 2px;border:0;background:none;cursor:pointer;font:600 1em/1 var(--body);color:var(--paper);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,currentColor 55%,transparent);text-underline-offset:.25em}
.tl:hover{text-decoration-color:currentColor}
.tl.red{color:var(--danger)}

/* ---------- header: the wordmark, the way back, Sign in or the codename (account.js adds it) ---------- */
.top{position:relative;z-index:5}
.vin{width:var(--col);margin:0 auto;display:flex;align-items:center;gap:.75rem}
.brand{display:block;flex:none}
.brand img{filter:drop-shadow(0 2px .375rem rgba(0,0,0,.5))}
.gap{flex:1}
.back{text-decoration:none}
.back:hover{text-decoration:underline;text-underline-offset:.25em}

/* ---------- the page's middle, the hero, forms ---------- */
.desk{position:relative;z-index:1;flex:1 0 auto;width:var(--col);margin:0 auto;padding-block:clamp(1rem,4svh,3rem) 1rem;display:flex;flex-direction:column;justify-content:center;gap:1.4rem}
.hero{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem}
h1{font:850 2.9rem/.95 var(--display);font-stretch:72%;letter-spacing:.01em;text-wrap:balance;overflow-wrap:anywhere;text-shadow:0 .2rem 1.4rem rgba(0,0,0,.45)}
.lede{color:var(--paper);font-weight:500;font-size:1.05rem;line-height:1.4;max-width:40ch;text-wrap:pretty}
.hero .btn{margin-top:.5rem}
.rename{display:flex;flex-direction:column;gap:.5rem;width:100%;max-width:34rem}
.rename .row .btn{flex:0 0 auto}
.rename .msg{color:var(--soft);font-weight:500}
.rename .fld[aria-invalid="true"]{border-color:var(--danger)}
.rename:has(.fld[aria-invalid="true"]) .msg{color:var(--danger);font-weight:600}
.sugg{display:flex;flex-wrap:wrap;gap:.5rem}
.sugg:empty{display:none}
.state{color:var(--paper)}
.state:empty{display:none}
.fl{display:block;margin-bottom:.5rem;font:600 .9em/1.2 var(--body);color:var(--soft)}
.row{display:flex;gap:.6rem;flex-wrap:wrap}
.row .fld{flex:1 1 14rem}
.msg{min-height:1.4em;font-weight:600}
.msg:empty{min-height:0}
.go{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;align-items:center}
.fine{font-size:.9em;line-height:1.55;color:var(--soft)}

/* ---------- the account page: Queen of the Hill's room (plan 2026-10-16-home-style-everywhere) ----------
   Signed out: the pitch beside the lineup. Signed in: the player and the pass line on top, Your games on the left and
   the rest on the right, each a panel; one column under 1100px. */
.prog .out{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:3rem;align-items:center}
.prog .out-say{display:flex;flex-direction:column;align-items:flex-start;gap:.9rem}
.prog .out-say .btn{margin-top:.6rem}
.prog .out .rm-lineup{width:auto;margin:0}
.prog .out .rm-lineup ul{grid-template-columns:repeat(3,minmax(0,1fr))}
.prog .in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:1.4rem;align-items:end}
.prog .mast{min-width:0}
.prog .player{display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;min-width:0}
.prog .player .cn{font-size:3.4rem}
.prog .cn::after{content:"";display:block;width:6rem;height:.5rem;margin-top:.8rem;border-radius:.12rem;background:var(--g1)}
.prog .player .lede{color:var(--paper);font-size:1rem}
/* the art is the room now: the old strip of six stays drawn (page.js) but unseen */
.prog .strip{display:none}
.prog .passsec{align-self:end}
.prog .cols{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:1.4rem;align-items:start}
.prog .col-a,.prog .col-b{display:grid;gap:1.4rem;min-width:0}

/* a section is a panel: its heading and note on top, its entries under them */
.prog .sec{display:block}
.prog .side{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.3rem 1.2rem;padding-bottom:.9rem}
.prog .side h2{font:800 1.45rem/1.05 var(--display);font-stretch:84%;letter-spacing:.005em;text-wrap:balance}
.prog .side p{font-size:.95rem;line-height:1.45;color:var(--soft);text-wrap:pretty}
.prog .body{min-width:0}
.prog .fine{margin-top:1rem;font-size:.9rem;max-width:68ch}
.prog #give.sec{border-top:.35rem solid #ffd23f}

/* your games: one line per game, its box on the shelf, its art washing in behind on a point */
.prog .game{position:relative;isolation:isolate;display:grid;grid-template-columns:.625rem var(--stage) minmax(0,1fr) 8rem;grid-template-rows:auto auto;column-gap:1.25rem;row-gap:.3rem;align-items:center;flex-wrap:nowrap;
  padding:.75rem 0;border-bottom:1px solid var(--hair)}
.prog .games{--w:9.375rem;--h:5.25rem;--d:1.5rem;--stage:11.625rem;--stage-h:7rem}
.prog .edge{align-self:stretch;background:linear-gradient(180deg,var(--g1) 0 68%,var(--g2) 0);transform-origin:0 50%;transition:transform .45s var(--glide)}
.prog .reveal{position:absolute;inset:0;z-index:-1;overflow:hidden;clip-path:inset(0 100% 0 0);transition:clip-path .75s var(--glide)}
.prog .reveal img{width:100%;height:100%;max-width:none;object-fit:cover}
.prog .reveal::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--tint) 94%,transparent) 0%,color-mix(in srgb,var(--tint) 72%,transparent) 52%,color-mix(in srgb,var(--tint) 88%,transparent) 100%)}
.prog .edge,.prog .game .bx-stage{grid-row:1/3}
.prog .gname{grid-column:3;grid-row:1/3;font:800 1.75rem/1.05 var(--display);font-stretch:82%;transition:transform .45s var(--glide)}
/* a game you have: its name, and under it why you have it */
.prog .game.own .gname{grid-row:1;align-self:end}
.prog .owned{grid-column:3;grid-row:2;align-self:start;justify-self:start;display:inline-flex;align-items:center;gap:.5rem;font:600 .95rem/1.2 var(--body);color:var(--paper)}
.prog .owned svg{color:var(--hi)}
.prog .game .btn{grid-column:4;grid-row:1/3;justify-self:stretch}
.prog .game .coin{grid-column:4;grid-row:1/3;justify-self:center}
.prog .game.own .reveal,.prog .game:is(:hover,:focus-within) .reveal{clip-path:inset(0 0 0 0)}
.prog .game:is(:hover,:focus-within) .edge{transform:scaleX(1.6)}
.prog .game:is(:hover,:focus-within) .gname{transform:translateX(.375rem)}
.prog .game:is(:hover,:focus-within) .coin{rotate:0deg;scale:1.08}

/* a game as a box on the shelf (from the shelf direction; .bx- names so nothing meets .side or .top) */
.bx-stage{position:relative;z-index:1;display:block;width:var(--stage);height:var(--stage-h);margin-left:-.5rem;perspective:62.5rem;perspective-origin:30% -40%;animation:shelve .75s var(--glide) backwards;animation-delay:calc(var(--n,0) * 80ms + 120ms)}
@keyframes shelve{from{opacity:0;translate:-1.625rem 0}}
.bx-stage::before{content:"";position:absolute;left:.5rem;width:min(calc(var(--w) + 1rem),calc(100% - .5rem));bottom:2px;height:1rem;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.6),rgba(0,0,0,0));transition:opacity .45s,scale .45s var(--glide)}
.bx{--x:0px;--y:0px;--rx:-7deg;position:absolute;left:.75rem;bottom:.625rem;width:var(--w);height:var(--h);transform-style:preserve-3d;transform-origin:50% 100%;
  transform:translate3d(var(--x),var(--y),0) rotateX(var(--rx)) rotateY(var(--ry,-22deg));transition:transform .5s var(--spring)}
.bx-face{position:absolute;display:block}
.bx-front{inset:0;border-radius:3px;overflow:hidden;background:#111}
.bx-front img{display:block;width:100%;height:100%;object-fit:cover}
.bx-front::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(255,255,255,.16),rgba(255,255,255,0) 38%,rgba(0,0,0,0) 70%,rgba(0,0,0,.18))}
.bx-side{top:0;left:100%;width:var(--d);height:100%;transform-origin:0 50%;transform:rotateY(90deg);border-radius:0 3px 3px 0;
  background:linear-gradient(90deg,color-mix(in oklab,var(--g1) 80%,#000),color-mix(in oklab,var(--g1) 55%,#000))}
.bx-top{left:0;bottom:100%;width:100%;height:var(--d);transform-origin:50% 100%;transform:rotateX(90deg);border-radius:3px 3px 0 0;
  background:linear-gradient(0deg,color-mix(in oklab,var(--g1) 90%,#fff),color-mix(in oklab,var(--g1) 70%,#fff))}
/* still in the shrink-wrap: a film with two glints that sweep across on a point */
.bx-wrap .bx-front img{filter:saturate(.84) contrast(.95) brightness(1.03)}
.bx-wrap .bx-front::after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(112deg,rgba(255,255,255,0) 0 33%,rgba(255,255,255,.5) 40%,rgba(255,255,255,0) 46%,rgba(255,255,255,0) 62%,rgba(255,255,255,.24) 67%,rgba(255,255,255,0) 72%);
  background-size:260% 100%;background-position:100% 0;transition:background-position .9s var(--glide);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),inset 0 0 .875rem rgba(255,255,255,.28)}
.bx-crinkle{position:absolute;z-index:3;right:0;top:0;width:1.375rem;height:1.375rem;background:linear-gradient(225deg,rgba(255,255,255,.8),rgba(255,255,255,.2) 35%,rgba(255,255,255,0) 60%)}
.prog .game:is(:hover,:focus-within) .bx{--x:.375rem;--y:-.4375rem}
.prog .game:is(:hover,:focus-within) .bx-stage::before{opacity:.55;scale:.9}
.prog .game:is(:hover,:focus-within) .bx-wrap .bx-front::after{background-position:0 0}

/* no games yet: the lineup as tiles that go straight to each game */
.prog .none{padding-top:.875rem}
.prog .none-h{font:800 2.125rem/1 var(--display);font-stretch:80%}
.prog .none>p{margin-top:.625rem;font-size:1.0625rem;color:var(--muted);max-width:52ch}
.prog .tiles{margin-top:1.75rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.75rem 1.375rem}
.prog .tile{display:block;text-decoration:none;border-radius:.25rem}
.prog .pic{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;border-radius:3px;background:var(--tint)}
.prog .pic img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) brightness(.86);transition:transform 1s var(--glide),filter .4s}
.prog .pic::after{content:"";position:absolute;left:0;right:0;bottom:0;height:.375rem;background:linear-gradient(90deg,var(--g1) 0 70%,var(--g2) 0);transform-origin:0 50%;transform:scaleX(.2);transition:transform .6s var(--glide)}
.prog .tn{display:flex;align-items:center;justify-content:space-between;gap:.625rem;margin-top:.75rem;font:800 1.25rem/1.1 var(--display);font-stretch:86%}
.prog .tile:is(:hover,:focus-visible) .pic img{transform:scale(1.06);filter:none}
.prog .tile:is(:hover,:focus-visible) .pic::after{transform:none}

/* the pass: the box set, the two plans as rows, the free week as seven days, the service's words and the tick */
.prog .boxset{position:relative;display:flex;align-items:flex-end;padding:2.25rem 0 2.125rem .375rem;margin-bottom:.5rem;--w:8.25rem;--h:4.625rem;--d:1.375rem;--stage:8rem;--stage-h:6.5rem}
.prog .boxset .bx-stage{margin-left:-1.875rem;z-index:calc(1 + var(--n));animation-delay:calc(var(--n) * 90ms + 150ms)}
.prog .boxset .bx-stage:first-child{margin-left:0}
.prog .boxset .bx{--rx:-9deg}
.prog .boxset .bx-stage:hover .bx{--y:-1rem;--x:.25rem}
.prog .set-cap{position:absolute;left:.5rem;bottom:2px;font:600 .875rem/1 var(--body);color:var(--muted)}
.prog .plans{border:0;margin:0;padding:0;min-width:0}
.prog .plan{position:relative;display:grid;grid-template-columns:1.625rem minmax(0,1fr) auto;column-gap:1.25rem;align-items:center;min-height:6rem;padding:.875rem 1.25rem .875rem 1.875rem;border-bottom:1px solid var(--hair);cursor:pointer;transition:background-color .3s}
.prog .plan input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.prog .plan::before{content:"";position:absolute;left:0;top:.875rem;bottom:.875rem;width:.5rem;background:linear-gradient(180deg,#e9b04a 0 16.67%,#cc0000 0 33.33%,#f2876a 0 50%,#2d6a39 0 66.67%,#4fa6d8 0 83.33%,#ffd23f 0);transform:scaleY(0);transform-origin:50% 0;transition:transform .55s var(--glide)}
.prog .plan:hover{background:color-mix(in srgb,var(--paper) 4%,transparent)}
.prog .plan:has(input:checked){background:color-mix(in srgb,var(--paper) 6%,transparent)}
.prog .plan:has(input:checked)::before{transform:none}
.prog .plan:has(input:focus-visible){box-shadow:inset 0 0 0 3px var(--paper)}
.prog .tick{display:grid;place-items:center;width:1.625rem;height:1.625rem;border-radius:.25rem;border:2px solid color-mix(in srgb,var(--paper) 60%,transparent)}
.prog .tick::after{content:"";width:.75rem;height:.75rem;border-radius:2px;background:var(--paper);transform:scale(0);transition:transform .35s var(--glide)}
.prog .plan:has(input:checked) .tick{border-color:var(--paper)}
.prog .plan:has(input:checked) .tick::after{transform:none}
.prog .pname{display:flex;align-items:center;flex-wrap:wrap;gap:.375rem .875rem;font:800 1.625rem/1 var(--display);font-stretch:82%}
.prog .best{display:inline-flex;align-items:center;gap:.375rem;font:600 .9375rem/1 var(--body);color:var(--flag)}
.prog .pprice{text-align:right;color:var(--muted);font-size:.9375rem;line-height:1.3}
.prog .pprice b{font:800 1.875rem/1 var(--display);font-stretch:116%;color:var(--paper);font-variant-numeric:tabular-nums;margin-right:.25rem}
.prog .pprice small{display:block;margin-top:.375rem;font-size:.875rem}
.prog .free{margin-top:1.625rem;font:750 1.375rem/1.2 var(--display);font-stretch:90%}
.prog .week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr)) minmax(0,1.5fr);gap:.25rem;margin:.875rem 0 .25rem;padding:0;max-width:40rem}
.prog .day{display:grid;place-items:center;gap:2px;padding:.625rem 0 .5625rem;border-radius:3px;background:color-mix(in srgb,var(--paper) 8%,transparent);animation:dayin .5s var(--glide) backwards;animation-delay:calc(var(--d) * 60ms + 300ms)}
@keyframes dayin{from{opacity:0;translate:0 .625rem}}
.prog .day b{font:800 1.25rem/1 var(--display);font-stretch:86%}
.prog .day span{font-size:.75rem;color:var(--muted)}
.prog .day:nth-child(-n+7){box-shadow:inset 0 -.25rem 0 var(--c)}
.prog .day:nth-child(1){--c:#e9b04a}.prog .day:nth-child(2){--c:#cc0000}.prog .day:nth-child(3){--c:#f2876a}.prog .day:nth-child(4){--c:#2d6a39}
.prog .day:nth-child(5){--c:#4fa6d8}.prog .day:nth-child(6){--c:#ffd23f}.prog .day:nth-child(7){--c:#9b2c55}
.prog .day.pay{background:none;border:2px dashed color-mix(in srgb,var(--paper) 34%,transparent)}
.prog .day.pay span{color:var(--paper);font-weight:600}
.prog .renew{margin-top:1.25rem;color:var(--paper);line-height:1.5;max-width:68ch}
.prog .agree{display:flex;gap:.75rem;align-items:flex-start;margin-top:.875rem;cursor:pointer}
.prog .agree input{width:1.375rem;height:1.375rem;flex:none;margin:1px 0 0;accent-color:var(--accent)}
.prog .go{margin-top:1.5rem}
.prog .stat{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .875rem}
.prog .stat b{font:800 1.625rem/1.1 var(--display);font-stretch:82%}
.prog .stat span{color:var(--soft)}
.prog .test{margin-top:.875rem;font:600 .875rem/1 var(--body);color:var(--flag)}
.prog .stat.danger b{color:var(--danger)}
.prog .stat.muted b{color:var(--muted)}
/* the pass page (plan 2026-10-15-pass-page; its room, 2026-10-16-home-style-everywhere): price first. On wide windows
   the offer is the top-left panel and the name and the box set stand beside it; on narrow ones the name, then the
   offer, then the box set, so the choice is always the first thing in view */
.prog .sec.pass{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:3rem;align-items:center}
.prog .pass .side{grid-column:2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:.8rem}
.prog .pass .side h1{font:850 2.9rem/.95 var(--display);font-stretch:72%;letter-spacing:.01em;text-wrap:balance}
.prog .pass .side .lede{font-size:1.05rem}
.prog .pass .body{grid-column:1;grid-row:1}
.prog .pass .boxset{--w:6.4rem;--h:3.6rem;--d:1.05rem;--stage:6.4rem;--stage-h:5.6rem;margin-top:.6rem;max-width:100%}
.prog .pass .boxset .bx-stage{margin-left:-1.7rem}

/* give a free week: each code an admission ticket, a game's art on the stub */
.prog .tickets{display:grid;gap:1.125rem}
.prog .ticket{--notch:.875rem;position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:11rem;border-radius:.375rem;overflow:hidden;
  background:var(--paper);color:var(--ink);box-shadow:0 1.125rem 1.875rem -1.125rem rgba(0,0,0,.8);
  -webkit-mask:radial-gradient(circle var(--notch) at 41.6% 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--notch) at 41.6% 100%,#0000 98%,#000) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle var(--notch) at 41.6% 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--notch) at 41.6% 100%,#0000 98%,#000) bottom/100% 51% no-repeat;
  transition:transform .45s var(--glide)}
.prog .ticket:is(:hover,:focus-within){transform:translateY(-.25rem) rotate(-.6deg)}
.prog .t-art{position:relative;overflow:hidden;background:var(--tint)}
.prog .t-art img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--glide)}
.prog .ticket:hover .t-art img{transform:scale(1.06)}
.prog .t-art::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,color-mix(in srgb,var(--tint) 94%,transparent) 0%,color-mix(in srgb,var(--tint) 86%,transparent) 50%,transparent 88%)}
.prog .t-say{position:absolute;z-index:1;left:1.25rem;right:1.25rem;bottom:1rem;display:grid;gap:.25rem;color:#fff;font-size:.9375rem}
.prog .t-say b{font:800 1.625rem/1 var(--display);font-stretch:82%}
.prog .t-stub{display:grid;align-content:center;gap:.5rem;padding:1.25rem 1.625rem;border-left:2px dashed color-mix(in srgb,var(--ink) 28%,transparent);
  background:linear-gradient(180deg,var(--g1) 0 .375rem,transparent .375rem),var(--paper)}
.prog .t-lab{font:600 .875rem/1 var(--body);color:#4f4a52}
.prog .t-code{font:800 1.875rem/1 var(--display);font-stretch:112%;letter-spacing:.02em;color:var(--ink);overflow-wrap:anywhere}
.prog .t-acts{display:flex;flex-wrap:wrap;gap:.625rem;margin-top:.375rem}
.prog .ticket .btn.outline{border-color:color-mix(in srgb,var(--ink) 40%,transparent);color:var(--ink)}
.prog .ticket .btn.outline:hover{border-color:var(--ink);background:color-mix(in srgb,var(--ink) 6%,transparent)}
.prog .ticket .btn:focus-visible{box-shadow:0 0 0 3px var(--paper),0 0 0 .375rem var(--ink)}
.prog .ticket.used{opacity:.6}
.prog .ticket.used .t-code{text-decoration:line-through}

/* box code: a box with its code card standing in it, then the field */
.prog .boxcode{display:grid;grid-template-columns:15rem minmax(0,1fr);column-gap:2.25rem;align-items:center}
.prog .boxhint{position:relative;height:9.375rem;--w:9.375rem;--h:5.25rem;--d:1.5rem;--stage:12.5rem;--stage-h:8.125rem}
.prog .boxhint .bx-stage{position:absolute;left:0;bottom:0}
.prog .codecard{position:absolute;z-index:2;left:3.625rem;top:2px;display:grid;gap:3px;padding:.625rem .75rem;border-radius:3px;background:#fff;color:var(--ink);rotate:-7deg;white-space:nowrap;
  font:800 .9375rem/1 var(--display);font-stretch:112%;box-shadow:0 .625rem 1.125rem -.5rem rgba(0,0,0,.7);border-top:.3125rem solid #a51c30;animation:peek 1s var(--glide) .6s backwards;transition:translate .5s var(--glide)}
.prog .codecard small{font:600 .6875rem/1 var(--body);color:#5b5560}
@keyframes peek{from{translate:0 2.5rem;opacity:0}}
.prog .boxcode:hover .codecard{translate:0 -.375rem}
.prog .hint-cap{grid-column:1;margin-top:.625rem;font-size:.875rem;line-height:1.45;color:var(--muted)}
.prog #boxform{grid-column:2;grid-row:1 / span 2}
.prog .code-in{--fld-h:3.5rem;font:700 1.375rem/1 var(--display);font-stretch:116%;letter-spacing:.04em;text-transform:uppercase}
.prog #boxform .btn{min-height:3.5rem}

/* settings: rows, a square switch */
.prog .set li{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.875rem 1.5rem;min-height:5.5rem;padding:.875rem 0;border-bottom:1px solid var(--hair)}
.prog .pair{display:flex;flex-wrap:wrap;align-items:center;gap:.625rem 1.125rem}
.prog .sw{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1.25rem;width:100%;min-height:3.5rem;cursor:pointer}
.prog .sw input{position:absolute;opacity:0;width:1px;height:1px}
.prog .swt b{display:block;font:750 1.3125rem/1.15 var(--display);font-stretch:88%}
.prog .swt span{display:block;margin-top:.25rem;font-size:.9375rem;color:var(--muted)}
.prog .lever{flex:none;position:relative;width:3.5rem;height:2rem;border-radius:.3125rem;border:2px solid color-mix(in srgb,var(--paper) 50%,transparent);background:color-mix(in srgb,var(--paper) 12%,transparent);transition:background-color .25s,border-color .25s}
.prog .lever i{position:absolute;top:.25rem;left:.25rem;width:1.25rem;height:1.25rem;border-radius:3px;background:var(--paper);transition:transform .35s var(--glide),background-color .25s}
.prog .sw input:checked+.lever{background:var(--accent);border-color:var(--accent)}
.prog .sw input:checked+.lever i{transform:translateX(1.5rem);background:var(--night)}
.prog .sw input:focus-visible+.lever{box-shadow:0 0 0 3px var(--night),0 0 0 .375rem var(--paper)}
.prog .delpanel{display:grid;gap:.875rem;margin-top:1.5rem;padding:1.375rem 0 0;border-top:3px solid var(--danger)}
.prog .delpanel h2{font:800 1.625rem/1.05 var(--display);font-stretch:82%}
.prog .delpanel .going{display:grid;gap:.25rem;padding-left:1.125rem;list-style:disc;color:var(--soft)}

/* ---------- the legal footer and the cookie note (every page but the TV home screen) ---------- */
.legal{position:relative;z-index:1;width:var(--col,min(100% - 2rem,68.75rem));margin:0 auto;padding-block:.75rem 1.125rem;display:flex;flex-wrap:wrap;align-items:center;
  gap:.25rem .875rem;border-top:1px solid var(--line);font:500 .8rem/1.5 var(--body);color:var(--soft)}
.legal a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);text-underline-offset:3px}
.legal a:hover,.legal a:focus-visible{color:var(--paper)}
.cookienote{position:fixed;z-index:60;left:50%;bottom:calc(.75rem + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:min(100% - 1.5rem,38.75rem);
  display:flex;align-items:center;gap:.625rem 1rem;padding:.625rem .75rem .625rem 1rem;border-radius:.375rem;background:var(--night-2);border:1px solid var(--line);
  box-shadow:0 .75rem 2rem rgba(0,0,0,.5);font:500 .9rem/1.4 var(--body);color:var(--paper)}
.cookienote p{margin:0;flex:1 1 auto;min-width:0}
.cookienote a{color:inherit;text-underline-offset:3px}
.cookienote .btn{flex:0 0 auto}
body.has-cookienote{padding-bottom:6rem}
@media (max-width:480px){.cookienote{flex-wrap:wrap}.cookienote .btn{width:100%}body.has-cookienote{padding-bottom:8.75rem}}

/* ---------- 1100 and under (TV browsers at 960x540, tablets): sideheads sit above their entries ---------- */
@media (max-width:1100px){
  .prog .sec.pass{display:flex;flex-direction:column;align-items:stretch;gap:.6rem}
  .prog .pass .side{display:contents}
  .prog .pass .side.rm-panel{background:none;border:0;box-shadow:none;padding:0;-webkit-backdrop-filter:none;backdrop-filter:none}
  .prog .pass .side .rm-eye{order:0}
  .prog .pass .side h1{order:1;font-size:2.1rem}
  .prog .pass .side>.lede{order:2}
  .prog .pass .body{order:3;margin-top:.4rem}
  .prog .pass .boxes{order:4}
  .prog :is(.in,.cols,.out){grid-template-columns:minmax(0,1fr)}
  .prog .games{--w:7.75rem;--h:4.375rem;--d:1.25rem;--stage:9.875rem;--stage-h:6rem}
}
/* ---------- a phone ---------- */
@media (max-width:640px){
  .prog .player .cn{font-size:2.6rem}
  .prog .out .rm-lineup ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prog .game{grid-template-columns:auto minmax(0,1fr) auto;column-gap:.75rem}
  .prog .game .bx-stage{grid-column:1}.prog .gname,.prog .game.own .gname{grid-column:2;grid-row:1/3;align-self:center}.prog .game :is(.btn,.coin){grid-column:3}
  .prog .edge{display:none}
  .prog .games{--w:4.875rem;--h:2.75rem;--d:.8125rem;--stage:6.25rem;--stage-h:4.375rem}
  .prog .bx-stage{margin-left:0;perspective:37.5rem}
  .prog .gname{font-size:1.375rem}
  .prog .game .owned{display:none}
  .prog .game .coin{grid-column:3;width:4.25rem;height:4.25rem;font-size:1.2rem} /* 19px: large text over the coin's colour */
  .prog .game .btn{min-width:4.5rem;--btn-px:.875rem}
  .prog .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem .875rem}
  .prog .boxset{--w:4.125rem;--h:2.3125rem;--d:.6875rem;--stage:4.125rem;--stage-h:3.75rem;padding-bottom:1.875rem}
  .prog .boxset .bx-stage{margin-left:-.625rem}
  .prog .pass .boxset{--w:4.125rem;--h:2.3125rem;--d:.6875rem;--stage:4.125rem;--stage-h:3.75rem}
  .prog .pass .boxset .bx-stage{margin-left:-.625rem}
  .prog .plan{padding-left:1.375rem;column-gap:.875rem;grid-template-columns:1.625rem minmax(0,1fr);row-gap:.4rem}
  .prog .pprice{grid-column:2;text-align:left}
  .prog .pprice b{font-size:1.5rem}
  .prog .week{grid-template-columns:repeat(4,minmax(0,1fr))}
  .prog .day.pay{grid-column:span 4}
  .prog .ticket{grid-template-columns:minmax(0,1fr);-webkit-mask:none;mask:none}
  .prog .t-art{min-height:7.5rem}
  .prog .t-stub{border-left:0;border-top:2px dashed color-mix(in srgb,var(--ink) 28%,transparent);background:var(--paper)}
  .prog .t-code{font-size:1.5rem}
  .prog .boxcode{grid-template-columns:minmax(0,1fr)}
  .prog .boxhint{height:8.125rem}
  .prog #boxform{grid-column:1;grid-row:auto;margin-top:.875rem}
}
@media (max-width:440px){.back{display:none}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}.bx-stage,.day,.codecard{animation:none!important}}
/* Help (House Words 2026-10-15): the games, as plain links (a page that works without JS links every live game) */
.prog .gamelinks{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin:.875rem 0 0;padding:0;list-style:none}
.prog .gamelinks a{color:var(--paper);font-weight:700;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);text-underline-offset:3px}
/* Help (its room, plan 2026-10-16-home-style-everywhere): the six answers as panels, three across on a wide window */
.helps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
.helps .sec{display:flex;flex-direction:column}
.helps .body p{line-height:1.55}
@media (max-width:1100px){.helps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.helps{grid-template-columns:minmax(0,1fr)}}
/* the 404 (Berlin at night, plan 2026-10-16-home-style-everywhere): the words beside the lineup */
.notfound{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:3rem;align-items:center}
.notfound .rm-lineup{width:auto;margin:0}
.notfound .rm-lineup ul{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1100px){.notfound{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.notfound .rm-lineup ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* a phone held sideways (844x340): the pass page's name tightens so both prices start in the first window */
@media (max-height:500px){
  .prog .pass .side .rm-eye{display:none}
  .prog .pass .side h1{font-size:1.9rem}
  html[data-screen="pass"] .desk{padding-block:.4rem 1.5rem}
}
/* signed out on a phone (STACK in games.mjs): the pitch and Sign in are the first screen, the lineup follows (a first
   visit's cookie note sits over the bottom of that screen and must cover no control: page-check cookienote) */
@media (max-aspect-ratio: 5/4), (max-height: 500px), (max-width: 760px){.prog .out-say{min-height:calc(100svh - 7.5rem);justify-content:center}}