/* ---------- CineJar: the light "Blend 2 · outlined" look over the page's own CSS ----------
   docs/superpowers/specs/2026-11-02-cinejar-revamp-design.md. Loaded after index.html's <style>, and again by cinejar.js
   after the games inject theirs, so it wins ties. The page's own variables are remapped here first, so most of the old
   CSS follows on its own; the rest is overridden screen by screen below. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@125,900&family=Bricolage+Grotesque:opsz,wght@12..96,500..800&display=swap');

:root{
  /* CineJar */
  --paper:#fffbf4; --paper2:#f6efe2; --ink:#1d1a26; --logo-ink:#17140f;
  --lilac:#a99bff; --butter:#ffd34e; --coral:#ff7a59; --mint:#62d5a8; --sky:#6ec8ff; --pink:#ff9ecf;
  --pop:4px 4px 0 var(--ink); --pop-lg:7px 8px 0 var(--ink); --r-card:22px; --r-img:14px;
  --head:'Bricolage Grotesque','Geist',system-ui,sans-serif;
  /* the page's own names, remapped */
  --bg:var(--paper); --muted:rgba(29,26,38,.7); --dim:rgba(29,26,38,.64);
  --line:rgba(29,26,38,.13); --line2:rgba(29,26,38,.26);
  --green:#0e7c50; --orange:#c23d17; --blue:#1f6fc4;          /* deep enough to read as text on paper */
  --display:var(--head);
}
html,body{background:var(--paper)}
body{color:var(--ink)}
::selection{background:var(--butter);color:var(--ink)}

/* ---------- the page behind everything: paper, no grain ---------- */
.bg{background:var(--paper)}
.bgimg.on{opacity:.16}
.shade{background:linear-gradient(180deg,rgba(255,251,244,.72),rgba(255,251,244,.9) 40%,var(--paper))}
.grain{display:none}

/* ---------- the logo: an outlined striped jar with a hard shadow, and CINEJAR ---------- */
.logo{display:inline-flex;align-items:center;gap:10px;font-family:'Archivo',var(--sans);font-weight:900;font-stretch:125%;font-size:23px;letter-spacing:-.01em;text-transform:uppercase;color:var(--logo-ink);line-height:1}
.logo svg{height:34px;width:auto;flex:none;overflow:visible}
.logo b{display:none}
@media (max-width:600px){.logo{font-size:18px;gap:8px}.logo svg{height:28px}}

/* ---------- header ---------- */
.hbtn,.lbpill,.who,.t{background:var(--paper);border:2px solid var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--ink)}
.hbtn{box-shadow:var(--pop);font-weight:600;transition:transform .35s var(--spring),box-shadow .35s var(--spring)}
.hbtn:hover{background:var(--paper);border-color:var(--ink);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.hbtn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);transition-duration:.08s}
.who{border-width:2px}
.who button{color:var(--muted)}
.who button.on{background:var(--ink);color:var(--paper)}
.who button:hover{color:var(--ink)}
.who button.on:hover{color:var(--paper)}
.lbpill{color:var(--muted)}
.lbpill.flash{background:var(--mint);color:var(--ink);border-color:var(--ink)}
.lbpill.ok i{box-shadow:none}
.t{color:var(--muted);font-weight:500}
.t i{width:8px;height:8px;border:1.5px solid var(--ink)}
.t.g i{background:var(--mint)}.t.o i{background:var(--coral)}.t.b i{background:var(--sky)}.t.left i{background:var(--paper);opacity:1}
.badge{background:var(--coral);color:var(--ink);border:1.5px solid var(--ink)}

/* ---------- pills, links, buttons, inputs ---------- */
.pill{border:2px solid var(--ink);color:var(--ink);font-weight:500}
.pill:hover{background:var(--butter);color:var(--ink)}
.pill.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.linkbtn{color:var(--muted)}
.linkbtn:hover{color:var(--ink)}
.start{background:var(--ink);color:var(--paper);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--butter);transition:transform .35s var(--spring),box-shadow .35s var(--spring)}
.start:hover{background:var(--ink);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--butter)}
.start:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--butter);transition-duration:.08s}
.field input,input[type=text],input[type=search],input:not([type]){background:#fff;border:2px solid var(--ink);color:var(--ink)}
.field input:focus,input:focus{outline:none;border-color:var(--ink);box-shadow:var(--pop)}
input::placeholder{color:rgba(29,26,38,.5)}
.field button{background:var(--ink);color:var(--paper);border:2px solid var(--ink)}

/* ---------- scrim, toast ---------- */
.scrim{background:rgba(29,26,38,.34);backdrop-filter:none;-webkit-backdrop-filter:none;transition:opacity .22s}
.toast{background:var(--paper);color:var(--ink);border:2px solid var(--ink);box-shadow:var(--pop);backdrop-filter:none;-webkit-backdrop-filter:none}
.toast button{color:var(--ink);background:var(--butter);border:2px solid var(--ink)}
.toast button:hover{background:var(--butter)}

/* ---------- side menu ---------- */
.sidemenu{background:var(--paper);border:2.5px solid var(--ink);border-radius:var(--r-card);box-shadow:8px 8px 0 var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--ink)}
.smlabel{color:var(--muted)}
.smitem{border:2px solid transparent;transition:background .2s,border-color .2s,transform .35s var(--spring)}
.smitem:hover{background:var(--paper2)}
.smitem.on{background:#fff;border-color:var(--ink);box-shadow:var(--pop)}
.smitem .ic{background:var(--c,var(--paper2));color:var(--ink)!important;border:2px solid var(--ink)}
.smitem b{font-family:var(--head);font-weight:800;font-size:16.5px;letter-spacing:-.02em}
.smitem span span{color:var(--muted)}

@media (prefers-reduced-motion:reduce){.hbtn,.start,.smitem{transition:none!important}}
.t,.hbtn,.lbpill,.who button{white-space:nowrap;flex-shrink:0}
/* phones: the jar alone keeps the name in view; the word comes back from 481px */
@media (max-width:480px){
  .app .logo{display:inline-flex!important}
  .logo span{display:none}
  .logo svg{height:30px}
  header{padding-left:12px;padding-right:12px;gap:6px}
  .brand{gap:6px}
  .hbtn{padding:0 10px;box-shadow:3px 3px 0 var(--ink)}
  .hbtns{gap:6px}
}
@media (max-width:380px){.who button{padding:0 5px;letter-spacing:.04em}.hbtn{padding:0 8px}}
@media (max-width:480px){
  #openDrawer{position:relative;width:38px;padding:0;justify-content:center}
  #openDrawer .badge{position:absolute;top:-7px;right:-8px;min-width:19px;height:19px;font-size:10px;padding:0 4px}
}
@media (max-width:380px){#lbPill{display:none!important}}

/* ---------- the jar is the menu button; the menu unfolds out of it ---------- */
#openMenu{display:none}
header .logo{cursor:pointer;border-radius:12px;outline-offset:6px}
header .logo:focus-visible{outline:2px solid var(--ink)}
.logo .cjlid{transform-box:fill-box;transform-origin:20% 100%;transition:transform .35s var(--spring)}
header .logo:hover .cjlid{transform:translateY(-2px) rotate(-8deg)}
header .logo.pop .cjlid{animation:cjLid .6s var(--spring)}
header .logo.pop svg{animation:cjJar .5s var(--spring)}
@keyframes cjLid{0%{transform:none}35%{transform:translate(-2px,-9px) rotate(-26deg)}100%{transform:none}}
@keyframes cjJar{0%{transform:none}30%{transform:scale(.88,1.08)}65%{transform:scale(1.06,.95)}100%{transform:none}}
.sidemenu{transform-origin:34px 26px;transform:scale(.18) rotate(-9deg);opacity:0;pointer-events:none;
  transition:transform .6s var(--spring),opacity .18s ease,box-shadow .6s var(--spring)}
.sidemenu.on{transform:none;opacity:1;pointer-events:auto}
.sidemenu:not(.on){box-shadow:0 0 0 var(--ink);transition:transform .3s var(--ease),opacity .22s ease .06s,box-shadow .2s}
.sidemenu.on > *{animation:cjIn .5s var(--spring) both;animation-delay:calc(90ms + var(--i,0) * 28ms)}
@keyframes cjIn{from{opacity:0;transform:translate(-14px,10px) rotate(-2deg)}}
.smhead .logo{cursor:pointer}
@media (prefers-reduced-motion:reduce){.sidemenu,.sidemenu.on>*{transition:opacity .2s!important;animation:none!important;transform:none!important}header .logo.pop .cjlid,header .logo.pop svg{animation:none}}

/* ---------- Swipe: the film's details ---------- */
.title{font-family:var(--head);font-weight:800;text-transform:none;letter-spacing:-.045em;line-height:.9;text-shadow:none}
[data-s="title"].rv .title{animation:cjTitle .7s var(--spring) both}
@keyframes cjTitle{from{opacity:0;transform:translateY(18px)}}
.cjorig{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:12px}
.cjorig b{font-family:var(--head);font-weight:700;font-size:clamp(20px,2vw,30px);letter-spacing:-.02em;line-height:1.1}
.cjorig em{font-style:normal;font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;background:var(--butter);border:2px solid var(--ink);border-radius:999px;padding:4px 10px;box-shadow:2px 2px 0 var(--ink)}
.chip{border:2px solid var(--ink);background:var(--paper);color:var(--ink)}
.why{color:var(--green)}
.lbr{background:#fff;border:2px solid var(--ink);box-shadow:var(--pop);backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:var(--r-card)}
.st5{color:rgba(29,26,38,.14)}
.tagline::before,.tagline::after{color:var(--orange)}
.still{background:var(--paper2);border:2px solid var(--ink);box-shadow:var(--pop);border-radius:var(--r-img)}
.still:hover{transform:translate(-2px,-4px) rotate(-1deg);box-shadow:var(--pop-lg)}
.stills{padding:4px 10px 14px 2px;mask-image:none}
.lnk{border:2px solid var(--ink);background:var(--paper);box-shadow:3px 3px 0 var(--ink);font-weight:600;transition:transform .35s var(--spring),box-shadow .35s var(--spring)}
.lnk:hover{background:var(--butter);color:var(--ink);transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}

/* ---------- Swipe: the buttons under the card, outlined like everything else (no grey dock) ---------- */
.dock{background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;gap:14px;padding:6px}
.db{background:var(--paper);border:2px solid var(--ink);color:var(--ink);box-shadow:var(--pop);transition:transform .35s var(--spring),box-shadow .35s var(--spring),background .2s}
.db svg{stroke-width:2.6}
.db.o{background:var(--coral);color:var(--ink)}
.db.b{background:var(--sky);color:var(--ink)}
.db.big{background:var(--mint);color:var(--ink);border-color:var(--ink);box-shadow:5px 5px 0 var(--ink)}
.db.u{color:var(--ink)}
.db:hover,.db.hot{transform:translate(-2px,-4px) rotate(-3deg)}
.db.o:hover,.db.o.hot,.db.b:hover,.db.b.hot{border-color:var(--ink);box-shadow:var(--pop-lg)}
.db.o:hover,.db.o.hot{background:var(--coral)}.db.b:hover,.db.b.hot{background:var(--sky)}
.db.big:hover,.db.big.hot{background:var(--mint);box-shadow:8px 9px 0 var(--ink)}
.db.u:hover{border-color:var(--ink);box-shadow:var(--pop-lg)}
.db:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);transition-duration:.08s}
.db[disabled]{opacity:.4}
.db .tip{background:var(--ink);color:var(--paper);border-radius:8px}
.db .tip kbd{color:rgba(255,251,244,.65)}

/* ---------- labels, not badges (the owner, 2026-11-02: the pills "look very AI made") ----------
   Counts, genres and the Letterboxd status are set as plain type: a heavy number or word, a quiet label, no boxes. */
.tally{gap:22px;align-items:baseline}
.t{height:auto;padding:0;border:0;background:none;box-shadow:none;gap:6px;font-size:13px;color:var(--muted);align-items:baseline}
.t i{display:none}
.t b{font-family:var(--head);font-weight:800;font-size:20px;letter-spacing:-.03em;color:var(--ink);text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:5px;text-decoration-skip-ink:none}
.t.g b{text-decoration-color:var(--mint)}.t.o b{text-decoration-color:var(--coral)}.t.b b{text-decoration-color:var(--sky)}.t.left b{text-decoration-color:var(--line2)}
.lbpill{height:auto;padding:0;border:0;background:none;box-shadow:none;font:500 13px var(--sans);letter-spacing:0;text-transform:none;color:var(--muted);gap:7px}
.lbpill:hover{color:var(--ink)}
.lbpill.flash{background:none;color:var(--ink)}
.lbpill i{width:8px;height:8px;border:1.5px solid var(--ink)}
.lbpill.ok i{background:var(--mint)}
.chips{gap:0;align-items:baseline}
.chip{height:auto;padding:0;border:0;background:none;border-radius:0;font:500 14px var(--sans);letter-spacing:0;text-transform:none;color:var(--muted)}
.chip+.chip::before{content:'·';margin:0 9px;color:var(--dim)}
.why{font:600 13px var(--sans);letter-spacing:0;text-transform:none;color:var(--green)}
.cjorig em{font:500 14px var(--sans);letter-spacing:0;text-transform:none;background:none;border:0;box-shadow:none;padding:0;color:var(--muted)}
.cjorig em::before{content:'·';margin-right:10px;color:var(--dim)}
/* the rating's bars: ink, with the most-given rating in mint */
.bar{background:rgba(29,26,38,.16)}
.bar.pk{background:var(--mint);box-shadow:inset 0 0 0 1.5px var(--ink)}
.bars:hover .bar{background:rgba(29,26,38,.1)}.bars .bar:hover{background:var(--mint)}
/* small print in plain type too: the rating's labels, "Starring", the keyboard row */
.lbr .lab,.cnt,.cast .mono{font:600 13px var(--sans);letter-spacing:0;text-transform:none}
.cnt{color:var(--muted);font-weight:500}
.cast .mono{color:var(--muted)}
.keys{font:500 12px var(--sans);letter-spacing:0;text-transform:none;color:var(--muted)}
.keys kbd{font:600 11px var(--sans);color:var(--ink);background:#fff;border:1.5px solid var(--ink);border-radius:6px;padding:1px 6px;box-shadow:1.5px 1.5px 0 var(--ink)}
/* the card: an outlined print with a hard shadow, not a dark slab */
.face{background:var(--paper2);border:2.5px solid var(--ink);border-radius:var(--r-card);box-shadow:7px 8px 0 var(--ink)}

/* ---------- the rating card ("How was it?") ---------- */
.rate{background:var(--paper);border:2.5px solid var(--ink);border-radius:var(--r-card);box-shadow:8px 9px 0 var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--ink)}
.rate .q .mono{font:600 13px var(--sans);letter-spacing:0;text-transform:none;color:var(--muted)}
.rate .q h3{font-family:var(--head);font-weight:800;text-transform:none;letter-spacing:-.04em;font-size:36px}
.stars .bgrow svg{fill:rgba(29,26,38,.12);stroke:var(--ink);stroke-width:1.2px}
.stars .fill svg{fill:var(--butter);stroke:var(--ink);stroke-width:1.2px}
.stars .fill{filter:none}
.rate .mono{font:500 12.5px var(--sans);letter-spacing:0;text-transform:none;color:var(--muted)}
.dates input{background:#fff;border:2px solid var(--ink);color:var(--ink);color-scheme:light;font:600 12px var(--sans)}
.rate .x{color:var(--ink);border:2px solid var(--ink);background:var(--paper)}
.rate .x:hover{background:var(--butter)}
.cta{background:var(--mint);color:var(--ink);border:2px solid var(--ink);box-shadow:var(--pop);border-radius:16px;transition:transform .35s var(--spring),box-shadow .35s var(--spring)}
.cta:hover{background:var(--mint);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.cta:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);transition-duration:.08s}
.cta[disabled]{background:var(--paper2);color:var(--muted);box-shadow:none;transform:none}
.dchip{border:2px solid var(--ink);color:var(--ink);font:600 13px var(--sans);letter-spacing:0;text-transform:none}
.dchip:hover{background:var(--butter)}
.dchip.on{background:var(--ink);color:var(--paper)}
.rlabel b{color:var(--ink);font-weight:700}
.ractions button{border:2px solid var(--ink);border-radius:16px;color:var(--ink);transition:transform .35s var(--spring),box-shadow .35s var(--spring)}
.ractions .ghost{background:var(--paper);color:var(--ink)}
.ractions .ghost:hover{background:var(--butter)}
.ractions .go{background:var(--mint);color:var(--ink);box-shadow:var(--pop)}
.ractions .go:hover{background:var(--mint);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.ractions button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);transition-duration:.08s}

/* ---------- Your log ---------- */
.drawer{background:var(--paper);border:2.5px solid var(--ink);border-radius:var(--r-card);box-shadow:-8px 8px 0 var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--ink)}
.dhead h2{font-family:var(--head);font-weight:800;text-transform:none;letter-spacing:-.04em;font-size:38px}
.tabs,.dfoot{border-color:var(--line2)}
.item{border:2px solid transparent}
.item:hover{background:#fff;border-color:var(--ink)}
.item .th{border-radius:7px;border:1.5px solid var(--ink);box-shadow:2px 2px 0 var(--ink);background-color:var(--paper2)}
.item .tt{font-family:var(--head);font-weight:700;font-size:15.5px;letter-spacing:-.02em}
.item .meta,.item .meta.mono,.sy{font:500 12.5px var(--sans);letter-spacing:0;text-transform:none}
.item .st{color:var(--ink)}
.sy.ok{color:var(--green)}.sy.err{color:var(--orange)}.sy.wait{color:var(--blue)}.sy.q{color:var(--muted)}
.item .rm{color:var(--ink)}
.item .rm:hover{background:var(--butter)}
.dfoot .sub{color:var(--muted)}

/* ---------- Setup ---------- */
.modal{background:var(--paper);border:2.5px solid var(--ink);border-radius:var(--r-card);box-shadow:9px 10px 0 var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--ink)}
.modal h2{font-family:var(--head);font-weight:800;text-transform:none;letter-spacing:-.05em;font-size:58px}
.modal h2 b{color:var(--ink)}
.sec{border-color:var(--line2)}
.sec .lbl .num2{font:800 14px var(--head);letter-spacing:0;color:var(--ink);background:var(--butter);border:2px solid var(--ink);border-radius:8px;padding:1px 7px}
.sec h4{font-family:var(--head);font-weight:800;font-size:19px;letter-spacing:-.025em}
.sec p a{color:var(--ink)}
.srclbl{font:600 13px var(--sans);letter-spacing:0;text-transform:none;color:var(--muted)}
.drop{border:2px dashed var(--ink);background:#fff}
.drop:hover,.drop.over{border-color:var(--ink);background:var(--butter);color:var(--ink)}
.drop.done{border-style:solid;border-color:var(--ink);background:var(--mint);color:var(--ink)}
.lbnote{background:var(--mint);border:2px solid var(--ink);box-shadow:var(--pop);color:var(--ink)}
.lbnote b{color:var(--ink);font-weight:700}
.modal .lede{color:var(--muted)}
.modal .mono:not(.num2){font:600 12.5px var(--sans);letter-spacing:0;text-transform:none}

/* ---------- the menu spills out of the jar: a round reveal from the logo, the rows tumble in ---------- */
.sidemenu{transform:none;opacity:1;clip-path:circle(0px at 34px 30px);transition:clip-path .7s cubic-bezier(.65,0,.25,1)}
.sidemenu.on{clip-path:circle(160% at 34px 30px);transform:none}
.sidemenu:not(.on){transition:clip-path .26s cubic-bezier(.2,.7,.3,1)}
.sidemenu.on > *{animation:cjSpill .65s var(--spring) both;animation-delay:calc(120ms + var(--i,0) * 32ms)}
@keyframes cjSpill{0%{opacity:0;transform:translate(-30px,-46px) rotate(var(--r,-6deg)) scale(.86)}60%{opacity:1}}
@media (prefers-reduced-motion:reduce){.sidemenu,.sidemenu:not(.on){clip-path:none;transition:opacity .2s!important}.sidemenu:not(.on){opacity:0}}
/* switches and choices (pills) in plain type too, not tracked-out capitals */
.pill{font:600 13px var(--sans);letter-spacing:0;text-transform:none;height:32px;padding:0 14px}
.who button{font:600 12px var(--sans);letter-spacing:0;text-transform:none}

/* ---------- Swipe on phones: the card's caption is a paper label along the bottom of the poster ---------- */
.cap{background:var(--paper);border-top:2.5px solid var(--ink);padding:12px 16px 14px;color:var(--ink)}
.cap h3{font-family:var(--head);font-weight:800;text-transform:none;letter-spacing:-.04em;font-size:28px;line-height:.95}
.cap .mono,.capg,.caphint,.capwhy{font:500 12.5px var(--sans);letter-spacing:0;text-transform:none;color:var(--muted)}
.capwhy{color:var(--green);font-weight:600}
.caphint{background:none;padding:0;margin-top:6px;color:var(--ink);font-weight:600}
.rt{background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;height:auto;color:var(--ink);font-weight:700}
.rt b{color:var(--ink)}
/* the menu keeps its word: there's room in there */
.smhead .logo span{display:inline!important}
.cap .cjorig{margin-top:4px;gap:8px}
.cap .cjorig b{font-size:17px}
.cap .cjorig em{font-size:12px}

/* ---------- opening and closing fast: no blur behind panels, no blurred fades, rows paint only when on screen ---------- */
.drawer{transition:transform .42s var(--spring)}
.drawer:not(.on){transition:transform .24s cubic-bezier(.4,0,1,1)}
.item{animation:cjRow .32s var(--ease) both;content-visibility:auto;contain-intrinsic-size:auto 85px}
@keyframes cjRow{from{opacity:0;transform:translateX(14px)}}
.modal{transition:transform .42s var(--spring),opacity .18s}
.rate{transition:transform .42s var(--spring),opacity .18s}
.sidemenu:not(.on) > *{animation:none}

/* ---------- the small things in the heading face too (the owner: "a nicer font") ----------
   Bricolage at text size: Me / Noga, Films / TV, the Letterboxd status, the counts, Setup / Your log, the keyboard row. */
.who button,.lbpill,.t,.hbtn,.keys,.pill,.dchip,.db .tip,.toast,.lnk,.chip,.cnt,.lbr .lab,.cast .mono,.why,.capwhy,.cap .mono,.capg,.caphint,.cjorig em,.rate .mono,.item .meta,.sy,.srclbl,.modal .mono:not(.num2),.smitem span span{font-family:var(--head);font-optical-sizing:auto}
.who button{font-weight:700;font-size:13px;letter-spacing:-.01em}
.lbpill{font-weight:600;font-size:14px;letter-spacing:-.01em}
.t{font-weight:600;font-size:14px;letter-spacing:-.01em}
.hbtn{font-weight:700;font-size:14px;letter-spacing:-.01em}
.keys{font-weight:600;font-size:12.5px}
.keys kbd{font-family:var(--head);font-weight:700}
.pill,.dchip{font-weight:700;font-size:13.5px;letter-spacing:-.01em}
.db .tip{font:700 12.5px var(--head);letter-spacing:-.01em;text-transform:none}
.db .tip kbd{font-family:var(--head)}
.toast{font-weight:600}
.lnk{font-weight:700;letter-spacing:-.01em}
.chip{font-weight:600;font-size:14.5px}
.smitem span span{font-weight:500;font-size:13px}

/* ---------- the welcome screen (cinejar.js): big colour tiles with a film still each; hover tips a tile up, tints the
   page with its colour and wipes the still away to show the game ---------- */
.welcome{position:fixed;inset:0;z-index:96;display:none;overflow-y:auto;overscroll-behavior:contain;--c:var(--paper);
  background:color-mix(in srgb,var(--c) 22%,var(--paper));transition:background-color .6s var(--ease)}
.welcome.on{display:block}
html.welcoming .app{visibility:hidden}
/* one screen, edge to edge, no scrolling: the header and headline take what they need and the tiles share the rest
   (7 columns × 3 rows: Swipe a tall 2×3, Framed a wide 3×1, Quoted 2×1, the other ten 1×1) */
.wwrap{height:100dvh;min-height:560px;display:flex;flex-direction:column;padding:calc(14px + env(safe-area-inset-top)) clamp(14px,1.8vw,34px) calc(14px + env(safe-area-inset-bottom))}
.wtop{flex:none;height:44px;display:flex;align-items:center;justify-content:space-between}
.wtop .logo{cursor:default}
.wcount{font:700 14px var(--head);color:var(--muted)}
.whead{flex:none;display:flex;align-items:flex-end;justify-content:space-between;gap:12px 40px;margin:clamp(6px,1.6vh,22px) 0 clamp(12px,2.4vh,30px)}
.welcome h1{font:800 min(6.4vw,10.5vh)/.95 var(--head);letter-spacing:-.055em;white-space:nowrap}
.welcome h1 em{font-style:normal;display:inline-block;background:var(--butter);border:3px solid var(--ink);border-radius:.16em;padding:0 .12em .06em;box-shadow:6px 6px 0 var(--ink);transform:rotate(-2deg)}
.welcome h1 .w1,.welcome h1 .w2{display:inline-block}
.welcome.on h1 .w1{animation:cjUp .7s var(--spring) both}
.welcome.on h1 em{animation:cjPop .8s var(--spring) .28s both}
.welcome.on h1 .w2{animation:cjUp .7s var(--spring) .12s both}
@keyframes cjUp{from{opacity:0;transform:translateY(40px)}}
@keyframes cjPop{0%{opacity:0;transform:scale(.3) rotate(-14deg)}70%{opacity:1;transform:scale(1.06) rotate(1deg)}100%{transform:rotate(-2deg)}}
.wlede{font:500 clamp(14px,1.15vw,18px)/1.45 var(--head);color:var(--muted);max-width:30ch;padding-bottom:.6vh;text-align:right}
.welcome.on .wlede{animation:cjUp .7s var(--ease) .2s both}
.wgrid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));grid-auto-flow:dense;gap:clamp(10px,1.2vw,20px)}
.wtile{position:relative;min-height:0;display:flex;flex-direction:column;padding:clamp(6px,.6vw,10px) clamp(6px,.6vw,10px) clamp(9px,1.1vh,14px);border-radius:24px;background:var(--c);color:var(--ink);text-decoration:none;
  border:2.5px solid var(--ink);box-shadow:5px 5px 0 var(--ink);transition:transform .45s var(--spring),box-shadow .45s var(--spring)}
.welcome.on .wtile{animation:cjDrop .75s var(--spring) both;animation-delay:calc(.25s + var(--i) * 45ms)}
@keyframes cjDrop{0%{opacity:0;transform:translateY(-70px) rotate(var(--r))}60%{opacity:1}}
.wtile.xl{grid-column:span 2;grid-row:span 3}
.wtile.wide{grid-column:span 2}
.wtile.w3{grid-column:span 3}
.wtile:hover,.wtile.on{transform:translate(-4px,-7px) rotate(-1.4deg);box-shadow:10px 12px 0 var(--ink);z-index:2}
.wtile:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);transition-duration:.08s}
.wtile:focus-visible{outline:3px solid var(--ink);outline-offset:5px}
.wimg{position:relative;flex:1;min-height:0;border-radius:17px;overflow:hidden;border:2.5px solid var(--ink);background:var(--paper2);isolation:isolate}
.wimg i{position:absolute;inset:0;background:center/cover no-repeat}
.wstill{transition:transform 1.2s var(--ease)}
.wshot{clip-path:inset(100% 0 0 0);transition:clip-path .55s cubic-bezier(.65,0,.25,1)}
.wtile:hover .wstill,.wtile.on .wstill{transform:scale(1.1)}
.wtile:hover .wshot,.wtile.on .wshot{clip-path:inset(0 0 0 0)}
.wtile .ic{position:absolute;z-index:2;top:10px;left:10px;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--c);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
.wtile .ic svg{width:19px;height:19px;stroke:var(--ink);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.wgo{position:absolute;z-index:2;right:10px;bottom:10px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--ink);transform:scale(0) rotate(-90deg);transition:transform .45s var(--spring)}
.wgo svg{width:20px;height:20px;stroke:var(--paper);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.wtile:hover .wgo,.wtile.on .wgo{transform:none}
.wt{flex:none;display:grid;padding:clamp(7px,1vh,12px) 5px 0}
.wt b{font:800 clamp(17px,1.45vw,26px)/1 var(--head);letter-spacing:-.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wtile.xl .wt b{font-size:clamp(30px,3vw,54px)}
.wtile.wide .wt b{font-size:clamp(22px,2vw,34px)}
.wsub,.wbl{grid-area:2/1;font:600 clamp(12px,.92vw,14.5px)/1.32 var(--head);margin-top:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:opacity .3s,transform .35s var(--ease)}
.wtile.xl .wsub,.wtile.xl .wbl{font-size:clamp(14px,1.15vw,17px);-webkit-line-clamp:3}
.wbl{opacity:0;transform:translateY(6px)}
.wtile:hover .wsub,.wtile.on .wsub{opacity:0;transform:translateY(-6px)}
.wtile:hover .wbl,.wtile.on .wbl{opacity:1;transform:none}
.wtile em{position:absolute;z-index:3;top:17px;right:17px;font:800 12px var(--head);font-style:normal;color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:999px;padding:2px 9px}
.wtile em.last{background:var(--butter)}
#smAll .ic{background:var(--paper)}
/* short screens (laptops, the TV): the line under each small tile's name goes, the picture keeps its room */
@media (max-height:760px) and (min-width:761px){.wtile:not(.xl):not(.wide) .wsub,.wtile:not(.xl):not(.wide) .wbl{display:none}.wtile:not(.xl) .wt b{font-size:clamp(16px,1.3vw,22px)}}
/* tall and narrow (phones, tablets standing up): 3 columns × 6 rows, Swipe and Framed a full row each, Quoted two thirds of one */
@media (max-width:760px),(max-aspect-ratio:4/5){
  .wtop .wcount{display:none}
  .wtop{height:36px}
  .whead{flex-direction:column;align-items:flex-start;margin:6px 0 12px;gap:6px}
  .welcome h1{font-size:min(10.6vw,7vh);white-space:normal}
  .welcome h1 em{border-width:2.5px;box-shadow:4px 4px 0 var(--ink)}
  .wlede{display:none}
  .wgrid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1.35fr repeat(5,minmax(0,1fr));gap:9px}
  .wtile.xl{grid-column:span 3;grid-row:span 1}
  .wtile.wide{grid-column:span 2}
  .wtile.w3{grid-column:span 3}
  .wtile{padding:5px 5px 7px;border-radius:16px;box-shadow:3px 3px 0 var(--ink)}
  .wimg{border-radius:11px;border-width:2px}
  .wtile .ic{width:28px;height:28px;border-radius:9px;top:6px;left:6px;box-shadow:1.5px 1.5px 0 var(--ink)}
  .wtile .ic svg{width:15px;height:15px}
  .wgo,.wsub,.wbl,.wtile em:not(.last){display:none}
  .wtile em.last{top:9px;right:9px;font-size:10px;padding:1px 6px}
  .wt{padding:6px 3px 0}
  .wt b{font-size:clamp(12px,3.4vw,16px);letter-spacing:-.03em}
  .wtile.xl .wt b{font-size:clamp(20px,6vw,28px)}
  .wtile.wide .wt b{font-size:clamp(16px,4.6vw,22px)}
  .wtile.xl .wsub{display:block;font-size:12.5px;margin-top:2px}
}
@media (prefers-reduced-motion:reduce){.welcome *,.welcome{animation:none!important;transition:none!important}}
.wtile.xl .wstill{background-position:74% center}
@media (max-width:760px),(max-aspect-ratio:4/5){
  .wt b{white-space:normal;line-height:1.02;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .wtile.xl .wstill{background-position:center 60%}
}
/* the top: just the big logo, then the headline (the owner, 2026-11-02) */
/* the logo stays its usual size; the headline is the big thing, centred across the whole top */
.whead{justify-content:center;margin:clamp(2px,1vh,14px) 0 clamp(12px,2.6vh,30px)}
.welcome h1{font-size:min(8.3vw,12.6vh);text-align:center}
@media (max-width:760px),(max-aspect-ratio:4/5){.wtop .logo span{display:inline}.whead{align-items:center}.welcome h1{font-size:min(11.4vw,7.4vh)}}

/* ---------- Framed — and the kit the other games borrow from it: the frame, the step buttons, the guess box,
   the suggestions, the reset menu and the reveal card ---------- */
.framed{--g:var(--coral)}
.fstage{background:var(--paper2);border:2.5px solid var(--ink);border-radius:var(--r-card);box-shadow:8px 9px 0 var(--ink)}
.fstage.win{box-shadow:8px 9px 0 var(--ink)}
.fload{color:var(--muted);font-family:var(--head);font-weight:600}
/* over the picture: little paper labels, outlined */
.fbadge,.fh{background:var(--paper);color:var(--ink);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none;font-family:var(--head);font-weight:700;letter-spacing:-.01em;text-transform:none}
.fbadge b{color:var(--ink);background:var(--g);border-radius:999px;padding:0 .55em;margin-left:-.5em;font-weight:800}
.fbadge .fsep{color:var(--dim)}
.fh.bad i{color:var(--orange)}.fh.skip{color:var(--muted)}
.fh.bad span{text-decoration-color:var(--orange)}
.fpz{background:var(--paper);color:var(--ink);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none;transition:transform .35s var(--spring),box-shadow .35s var(--spring)}
.fpz:hover{background:var(--butter);color:var(--ink);transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
/* the bar under it */
.fn{background:var(--paper);color:var(--muted);border:2px solid var(--ink);font-family:var(--head);font-weight:800;box-shadow:3px 3px 0 var(--ink);overflow:hidden;transition:transform .35s var(--spring),box-shadow .35s var(--spring),background .2s}
.fn.open{color:var(--ink)}
.fn.lock{opacity:.4;box-shadow:none}
.fn.cur{background:var(--g);color:var(--ink);transform:translate(-2px,-4px);box-shadow:5px 6px 0 var(--ink)}
.fn::after{height:5px}
.fn.bad::after{background:var(--coral)}.fn.skip::after{background:var(--line2)}.fn.ok::after{background:var(--mint)}
.fsearch input{background:#fff;color:var(--ink);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font-family:var(--head);font-weight:600}
.fsearch input:focus{background:#fff;border-color:var(--ink);box-shadow:5px 5px 0 var(--ink)}
.fsearch svg{stroke:var(--ink)}
.fskip,.ffs{background:var(--paper);color:var(--ink);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font-family:var(--head);font-weight:800;transition:transform .35s var(--spring),box-shadow .35s var(--spring),background .2s}
.fskip:hover,.ffs:hover{background:var(--butter);color:var(--ink);transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.fskip:active,.ffs:active,.fn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);transition-duration:.08s}
/* suggestions and the reset menu: paper cards */
.fsug,.frsm{background:var(--paper);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--ink)}
.sg{font-family:var(--head);font-weight:700;color:var(--ink)}
.sg em{font:600 13px var(--head);color:var(--muted)}
.sg.on,.sg:hover{background:var(--butter)}
.frsm button{color:var(--ink);font-family:var(--head);font-weight:700}
.frsm button:hover,.frsm button:focus-visible{background:var(--butter)}
.frsm button.danger{color:#b3261e}
.frsm button.danger.arm{background:#e5483d;color:#fff}
/* the reveal: the name big on a paper fade over the bottom of the frame */
.fend{border-radius:calc(var(--r-card) - 3px);background:linear-gradient(to top,rgba(255,251,244,.97) 0%,rgba(255,251,244,.92) 36%,rgba(255,251,244,0) 70%)}
.fend .fposter{border:2.5px solid var(--ink);box-shadow:5px 5px 0 var(--ink);border-radius:12px}
.fend .lab{font:800 clamp(13px,1.2vw,18px) var(--head);letter-spacing:-.01em;text-transform:none;color:var(--muted)}
.fend.won .lab{color:var(--green)}
.fend .big{font-family:var(--head);font-weight:800;text-transform:none;letter-spacing:-.05em;line-height:.9;text-shadow:none;color:var(--ink)}
.fend .meta{color:var(--muted);font-family:var(--head);font-weight:600}
.fend .fst{font:600 clamp(12px,1vw,15px)/1.7 var(--head);letter-spacing:0;text-transform:none;color:var(--muted)}
.fend .fst b{color:var(--ink);font-weight:800}
.fnext{background:var(--mint);color:var(--ink);border:2px solid var(--ink);box-shadow:var(--pop);font-family:var(--head);font-weight:800;transition:transform .35s var(--spring),box-shadow .35s var(--spring)}
.fnext:hover,.fnext:focus-visible{background:var(--mint);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.fnext:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.fact{background:var(--paper);color:var(--ink);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none;font-family:var(--head);font-weight:700;transition:transform .35s var(--spring),box-shadow .35s var(--spring)}
.fact:hover{background:var(--butter);transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.fact.done{background:var(--mint);color:var(--ink);border-color:var(--ink)}
.lbchip{background:var(--paper);border:2px solid var(--ink);color:var(--ink)}

/* ---------- typing on touch screens: suggestions above the box, sized to fit ---------- */
html.cjtouch .fsug,html.cjtouch .sesug{max-height:var(--cjsug,40vh);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
/* inputs at 16px on touch screens: smaller makes iPad Safari zoom in when you tap them */
html.cjtouch input{font-size:max(16px,1em)}

/* ---------- every puzzle at a glance (CJ.pick): the label opens it; it grows out of the label ---------- */
.fbadge.cjpk{pointer-events:auto;cursor:pointer;transition:transform .3s var(--spring),box-shadow .3s var(--spring)}
.fbadge.cjpk:hover{transform:translate(-1px,-2px);box-shadow:3px 4px 0 var(--ink)}
.fbadge .cjpgi{width:1.05em;height:1.05em;fill:none;stroke:var(--ink);stroke-width:2.4;margin-left:.15em}
/* it grows out of the label in a circle and shrinks back into it on close. The circle is its own empty layer that only
   scales (cheap for any screen); the numbers fade in over it, so nothing heavy is redrawn while it moves */
.cjpick{position:fixed;inset:0;z-index:97;display:none;overflow:hidden;pointer-events:none}
.cjpick.on{display:block}
.cjpick.shown{pointer-events:auto}
.cjpbg{position:absolute;left:calc(var(--ox) - var(--R));top:calc(var(--oy) - var(--R));width:calc(var(--R) * 2);height:calc(var(--R) * 2);border-radius:50%;
  background:color-mix(in srgb,var(--c) 18%,var(--paper));transform:scale(0);transition:transform .42s cubic-bezier(.6,0,.3,1);will-change:transform}
.cjpick.shown .cjpbg{transform:scale(1)}
.cjpscroll{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;opacity:0;transition:opacity .16s ease}
.cjpick.shown .cjpscroll{opacity:1;transition:opacity .22s ease .14s}
.cjpwrap{padding:calc(18px + env(safe-area-inset-top)) clamp(14px,2.4vw,40px) calc(28px + env(safe-area-inset-bottom))}
.cjphead{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:16px 28px;flex-wrap:wrap;background:color-mix(in srgb,var(--c) 18%,var(--paper));
  margin:0 calc(-1 * clamp(14px,2.4vw,40px));padding:8px clamp(14px,2.4vw,40px) 12px;border-bottom:2px solid var(--ink)}
.cjpkick{font:800 15px var(--head);display:inline-block;background:var(--c);border:2px solid var(--ink);border-radius:999px;padding:2px 12px;box-shadow:2px 2px 0 var(--ink)}
.cjphead h2{font:800 clamp(40px,5vw,76px)/.9 var(--head);letter-spacing:-.05em;margin-top:8px}
.cjpstats{display:flex;gap:22px;margin-left:auto;font:600 15px var(--head);color:var(--muted)}
.cjpstats b{font:800 26px var(--head);color:var(--ink);letter-spacing:-.03em;margin-right:5px}
.cjpx{width:48px;height:48px;border-radius:50%;border:2.5px solid var(--ink);background:var(--paper);font:800 18px var(--head);box-shadow:3px 3px 0 var(--ink);transition:transform .3s var(--spring),background .2s}
.cjpx:hover{background:var(--butter);transform:rotate(90deg)}
.cjpkey{display:flex;gap:18px;flex-wrap:wrap;font:600 13.5px var(--head);color:var(--muted);margin:14px 0 16px}
.cjpkey i{display:inline-block;width:14px;height:14px;border-radius:4px;border:2px solid var(--ink);vertical-align:-2px;margin-right:6px}
.k-new{background:var(--paper)}.k-part{background:var(--butter)}.k-won{background:var(--mint)}.k-lost{background:#ffb3a6}
.cjpgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:10px;padding:4px 6px 8px 2px}
.cjpn{aspect-ratio:1;border-radius:14px;border:2px solid var(--ink);background:var(--paper);color:var(--ink);box-shadow:2px 2px 0 var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;scroll-margin:150px 0 40px}
.cjpn b{font:800 19px var(--head);letter-spacing:-.03em}
.cjpn span{font:700 11.5px var(--head);opacity:.8}
.cjpn.s-part{background:var(--butter)}
.cjpn.s-won{background:color-mix(in srgb,var(--mint) 70%,var(--paper));color:rgba(29,26,38,.78)}
.cjpn.s-lost{background:color-mix(in srgb,#ff8a75 55%,var(--paper));color:rgba(29,26,38,.78)}
.cjpn.s-lost span{color:#a3200f;opacity:1}
.cjpn.cur{background:var(--c);color:var(--ink);box-shadow:4px 4px 0 var(--ink);outline:3px solid var(--ink);outline-offset:3px}
.cjpn:hover,.cjpn:focus-visible{transform:translateY(-2px);outline:3px solid var(--ink);outline-offset:1px}
.cjpn:active{transform:translateY(1px)}
@media (max-width:600px){.cjpgrid{grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:8px}.cjpn b{font-size:16px}.cjpstats{margin-left:0;width:100%}.cjpx{position:absolute;top:6px;right:0}.cjphead h2{font-size:38px}.cjpstats{gap:16px}.cjpstats b{font-size:20px}}
@media (prefers-reduced-motion:reduce){.cjpick{transition:none!important;clip-path:none!important}}

/* ---------- moving between screens (CJ.zoom): a box grows to fill the screen, then the new screen rises in ---------- */
.cjzoom{position:fixed;inset:0;z-index:140;background:var(--c) center/cover no-repeat;pointer-events:none;will-change:clip-path;
  transition:clip-path .45s cubic-bezier(.65,0,.25,1),opacity .4s ease .05s}
.cjzoom.out{opacity:0}
.app.cjrise > *{animation:cjRise .55s var(--spring) both}
.app.cjrise > :nth-child(2){animation-delay:.06s}
@keyframes cjRise{from{opacity:0;transform:translateY(26px) scale(.985)}}

/* ---------- Films ↔ TV wipe (CJ.wipe): a band of liquid turned to the screen's diagonal, travelling corner to corner.
   1.8 diagonals long, so it covers everything for the middle stretch; 3.2 tall, so its ends never show. The logo rides
   in the middle, upright, as big as the screen allows, bobbing like something floating. ---------- */
.cjwipe{position:fixed;left:50%;top:50%;width:0;height:0;z-index:150;pointer-events:none;transform:rotate(var(--a))}
.cjwb{position:absolute;left:0;display:grid;place-items:center;animation:cjWipe var(--dur) cubic-bezier(.35,.48,.65,.52) both}
.cjwband{position:absolute;left:0;top:0;overflow:visible}
.cjwband .cjw-sheet{opacity:.62}
.cjwband .cjw-fill{stroke:var(--ink);stroke-width:3px;stroke-linejoin:round;filter:drop-shadow(8px 0 0 var(--ink))}
.cjwband .cjw-deep{opacity:.55}
.cjwband .cjw-bub{fill:rgba(255,255,255,.28);stroke:rgba(255,255,255,.85);stroke-width:2.2px}
.cjwband .cjw-shine{fill:none;stroke:rgba(255,255,255,.6);stroke-width:5px;stroke-linecap:round}
.cjwlogo{position:relative;transform:rotate(calc(-1 * var(--a)));animation:cjLogo var(--dur) cubic-bezier(.34,1.56,.64,1) both,cjFloat var(--dur) cubic-bezier(.35,.48,.65,.52) both}
.cjwbob{display:flex;align-items:center;gap:.3em;font:900 min(10.6vw,18vh)/1 'Archivo',var(--head);font-stretch:125%;letter-spacing:-.01em;color:var(--logo-ink);
  animation:cjBob .5s ease-in-out infinite alternate}
.cjwbob svg{height:1.7em;width:auto;overflow:visible}
/* as big as the screen allows: the jar and the word together about three quarters of its width */
.cjwbob.tv{font-size:min(20vw,32vh)}
.cjwbob.films{font-size:min(12.6vw,21vh)}
@keyframes cjWipe{from{transform:translateX(calc(var(--D) * -2.3))}to{transform:translateX(calc(var(--D) * .5))}}
@keyframes cjLogo{0%{scale:.5}45%{scale:1.04}60%,100%{scale:1}}
/* the logo drifts back against the band's travel, so on screen it moves at about 60% of the water's speed and floats
   in the middle longer, while staying inside the liquid */
@keyframes cjFloat{from{translate:calc(var(--D) * .36) 0}to{translate:calc(var(--D) * -.36) 0}}
@keyframes cjBob{from{transform:translateY(-1.6%) rotate(-1.8deg)}to{transform:translateY(1.6%) rotate(1.8deg)}}

/* the label sits above the reveal card, so it can still be tapped once a puzzle is answered */
.ftop{z-index:5}

/* ---------- until each game gets its own restyle: keep them all readable (2026-11-02, pushed to the NAS early) ----------
   Their pictures, cards and boards were made for the dark look. Text over a darkened photo stays light; number badges
   on pictures become paper tags; dark boards become paper cards. Each game's own section below replaces these. */
/* Higher or Lower: the two film cards are photos under a dark fade */
.hcard{--ink:#fffbf4;--muted:rgba(255,251,244,.8);--dim:rgba(255,251,244,.62);--green:#5cf09a;--orange:#ff9a4d;color:#fffbf4}
.hnum.q{-webkit-text-stroke-color:rgba(255,251,244,.6)}
.hvs{background:var(--paper);color:var(--ink);border:2.5px solid var(--ink);box-shadow:var(--pop);font-family:var(--head);font-weight:800}
.hvs.ok{background:var(--mint);color:var(--ink);border-color:var(--ink)}.hvs.no{background:var(--coral);color:var(--ink);border-color:var(--ink)}
.hend{background:var(--paper);border:2.5px solid var(--ink);box-shadow:8px 9px 0 var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none}
/* Semantle: the board, the box and the suggestions become paper */
.seboard,.seend{background:var(--paper);border:2.5px solid var(--ink);box-shadow:8px 9px 0 var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none}
.serow.latest{background:color-mix(in srgb,var(--butter) 35%,var(--paper));border-bottom-color:var(--ink)}
.serow.won{background:color-mix(in srgb,var(--mint) 40%,var(--paper))}
.sebarx{background:rgba(29,26,38,.1)}
.sesearch input{background:#fff;border:2px solid var(--ink);color:var(--ink)}
.sesearch input:focus{background:#fff;border-color:var(--ink);box-shadow:var(--pop)}
.sesug{background:var(--paper);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none}
.sebtn{border:2px solid var(--ink);background:var(--paper);color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.sebtn:hover{background:var(--butter)}
/* Soundtracked: the record's label */
.stlabel{background-color:var(--coral)}
.stlabel i,.stlabel u{color:var(--ink)}
/* Scene Order, Which Scene?, Spot the Impostor: numbers on the pictures as paper tags */
.sono{color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:.3em;padding:.06em .3em;text-shadow:none;box-shadow:2px 2px 0 var(--ink);font-family:var(--head);font-weight:800;font-size:clamp(16px,3.4vh,40px);left:.35em;top:.3em}
.socard.ok .sono{background:var(--mint);color:var(--ink)}.socard.miss .sono{background:var(--coral);color:var(--ink)}
.wsk,.imno{background:var(--paper);color:var(--ink);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);font-family:var(--head);font-weight:800;backdrop-filter:none;-webkit-backdrop-filter:none}
.wscell.sel .wsk,.imcell.sel .imno{background:var(--butter);color:var(--ink)}
.wscell.ok .wsk,.wscell.won .wsk{background:var(--mint);color:var(--ink)}
.imtag{background:var(--paper);color:var(--ink);border:2px solid var(--ink);font-family:var(--head);font-weight:700;letter-spacing:0;text-transform:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.imtag.real{color:#b3261e}.imtag.found{background:var(--mint);color:var(--ink)}.imtag.missed{background:var(--coral);color:var(--ink)}
.imlab{color:#fffbf4}.imlab em{color:rgba(255,251,244,.72)}.imlab.b b{color:#ff9a4d}
/* Common Thread: the film panels are stills under a dark fade */
.ctfilm{--ink:#fffbf4;--muted:rgba(255,251,244,.8);--dim:rgba(255,251,244,.66);--green:#5cf09a;--blue:#7cc8ff;color:#fffbf4}
.seclose .lb.cold{color:#17599e}

/* ---------- Spot the Impostor: no black flash between puzzles — the last frames wait, washed out, under the new ones ---------- */
.imcell{background:var(--paper2)}
.imcell.prev{background:linear-gradient(rgba(255,251,244,.45),rgba(255,251,244,.45)),var(--prev) center/cover no-repeat}
.imcell img{transition:opacity .55s ease,transform 1.1s var(--ease)}

/* ---------- iPad and other mid-size screens (761–1100px): everything fits across ---------- */
@media (max-width:1100px) and (min-width:481px){
  #lbPillTxt{display:none}
  .lbpill{padding:0}
  header{gap:10px}
  .brand{gap:10px}
}
@media (max-width:900px) and (min-width:481px){
  .hbtn .lbl{display:none}
  .hbtn{padding:0 12px}
}
/* the game bar: the step buttons get a row of their own, so the guess box keeps its room */
@media (max-width:1100px) and (min-width:761px){
  :root{--fchrome:calc(146px + var(--fbtn) * 2)}
  .fbar{flex-wrap:wrap;row-gap:12px;justify-content:center}
  .fbar > .fnums{flex:1 1 100%;justify-content:center}
}

/* ---------- phones and tablets: like an app — the page never scrolls ---------- */
html.cjtouch,html.cjtouch body{overscroll-behavior:none}
.cjfab{display:none}
/* Semantle on a phone: the board's list scrolls inside it, not the whole screen */
@media (max-width:760px){
  .se{overflow:hidden}
  .seboard{flex:1;min-height:0}
  .selist{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
}

/* ---------- a phone on its side: every game as big as the screen allows ----------
   No header (a small jar in the corner opens the menu). The games built on Framed's frame put the picture at full height
   on the left and their controls in a slim column on the right. */
@media (orientation:landscape) and (max-height:520px){
  .app > header{display:none}
  .app{grid-template-rows:minmax(0,1fr)}
  .cjfab{display:grid;place-items:center;position:fixed;z-index:60;right:10px;top:calc(8px + env(safe-area-inset-top));width:44px;height:44px;border-radius:14px;background:var(--paper);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
  .cjfab svg{height:28px;width:auto;overflow:visible}
  /* the frame games */
  .framed,.hdv,.umv,.stv,.sov,.wsv,.imv,.sdv,.ctv{flex-direction:row!important;align-items:center;justify-content:center;gap:14px;padding:8px calc(12px + env(safe-area-inset-right)) 8px calc(12px + env(safe-area-inset-left))!important}
  .fwrap{width:min(calc(100vw - 232px - env(safe-area-inset-left) - env(safe-area-inset-right)),calc((100dvh - 16px) * 16 / 9))!important;margin:0!important}
  .fbar{width:190px!important;flex:none;display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important;align-content:center;padding-top:52px}
  .fbar > *{min-width:0}
  .fbar > .fnums,.fbar > .fplay{grid-column:1 / -1}
  .fnums{display:grid!important;grid-template-columns:repeat(3,1fr);gap:6px!important}
  .fn{width:auto!important;height:38px!important;font-size:15px!important;border-radius:11px!important}
  .fplay{flex-direction:column;gap:8px!important}
  .fsearch input{height:42px!important;font-size:16px!important;padding-left:38px!important;border-radius:12px!important}
  .fsearch svg{left:12px!important;width:16px!important;height:16px!important}
  .fskip{height:40px!important;border-radius:12px!important;font-size:15px!important}
  .ffs,.frs{width:100%!important;height:40px!important;border-radius:12px!important}
  .fsug{max-height:calc(100dvh - 120px)!important}
  /* Swipe: the card at full height, the details beside it */
  .app.v-swipe{--card-h:calc(100dvh - 96px)}
  .app.v-swipe .keys{display:none}
  .app.v-swipe .main{padding-top:10px}
  .stagecol{gap:12px}
  /* the welcome page fits in one screen */
  .wwrap{min-height:0;padding-top:10px;padding-bottom:10px}
  .wtop{height:34px}
  .whead{margin:2px 0 8px}
  .welcome h1{font-size:min(5.2vw,9vh);white-space:nowrap}
  .wsub,.wbl,.wgo{display:none!important}
  .wt b{font-size:clamp(13px,1.9vw,18px)!important}
  .wtile.xl .wt b{font-size:clamp(18px,3vw,26px)!important}
  .wgrid{gap:8px}
  .wtile{padding:5px 5px 7px;border-radius:16px}
  .wtile .ic{width:28px;height:28px;top:7px;left:7px;border-radius:9px}
  .wtile .ic svg{width:15px;height:15px}
  .wtile em{top:10px;right:10px;font-size:10px}
}
@media (orientation:landscape) and (max-height:520px){
  /* Swipe: the card on the left at full height, its details beside it (the phone's caption isn't needed then) */
  .app.v-swipe{--card-h:calc(100dvh - 104px - env(safe-area-inset-bottom))}
  .app.v-swipe .main{grid-template-columns:auto minmax(0,1fr);gap:28px;padding:10px 66px 0 calc(18px + env(safe-area-inset-left))}
  .app.v-swipe .info{display:block;max-height:calc(100dvh - 20px);overflow-y:auto;padding-top:8px}
  .app.v-swipe .cap{display:none}
  .app.v-swipe .stagecol{justify-content:center;padding:0 0 10px;gap:12px}
  .app.v-swipe .t1{font-size:min(9vh,64px)}.app.v-swipe .t2{font-size:min(7.6vh,52px)}.app.v-swipe .t3{font-size:min(6.4vh,44px)}.app.v-swipe .t4{font-size:min(5.4vh,36px)}
  /* Which Scene?: the film's name wraps in the column; Spot the Impostor: its three steps stack */
  .wsnow .wsthumb{display:none}
  .wsnt b{white-space:normal}
  .fbar .imsteps{display:flex!important;flex-direction:column;gap:6px!important}
  .fbar .imsteps .fn{width:100%!important;justify-content:center}
}
@media (orientation:landscape) and (max-height:520px){
  .app.v-swipe .info [data-s="syn"],.app.v-swipe .info [data-s="cast"],.app.v-swipe .info [data-s="stills"],.app.v-swipe .info [data-s="links"]{display:none}
  .app.v-swipe .info{overflow:hidden}
  .wsnow{display:block!important;text-align:center;min-width:0}
  .wsnt{min-width:0}
  .wsnt b{display:block;white-space:normal!important;overflow:visible!important;font-size:15px!important;line-height:1.1}
  .wsnt span,.wsline{display:block;white-space:normal!important;font-size:11px!important;letter-spacing:0!important}
}

/* ---------- Heard It: the sound wave (games/heard.js draws it) ---------- */
.hdv{--g:var(--butter)}
.hdstage{background:var(--paper)}
.hdv .fload{background:var(--paper)}
.hdv .hdcap{display:none!important}
.hdbig{top:44%;background:var(--ink);color:var(--paper);border:3px solid var(--ink);box-shadow:5px 5px 0 var(--butter);width:clamp(64px,13vh,150px)}
.hdbig:hover{background:var(--ink)}
.hdv .sthint{color:var(--muted);font:700 clamp(13px,1.9vh,24px) var(--head);letter-spacing:0;text-transform:none}
.hdv .sthint b{color:var(--ink);background:var(--butter);border:2px solid var(--ink);border-radius:999px;padding:0 .5em}
.hdv .sttime{color:var(--muted);font:700 clamp(12px,1.7vh,22px) var(--head);letter-spacing:0}
.hdv .sttime b{color:var(--ink)}
/* the reel: six slots, each holding its line's little wave once heard */
.hdv .fn{background:var(--paper) var(--wave,none) center 66%/76% 40% no-repeat;width:calc(var(--fbtn,48px) * 1.3);display:flex;align-items:flex-start;justify-content:flex-start;padding:.3em .45em;font-size:clamp(12px,1.9vh,24px)}
.hdv .fn.cur{background-color:var(--g)}
.hdv .fn.bad{background-color:#ffd2c7}
.hdv .fn.ok{background-color:#c4f0dc}
.hdv .fn:last-child.cur{background-color:var(--coral)}
/* the reveal: light, the title big, every line written out with its own play button */
.hdv .fend{background:linear-gradient(to top,rgba(255,251,244,.98) 0%,rgba(255,251,244,.96) 60%,rgba(255,251,244,.86) 100%)}
.hdv .fend .big{background:linear-gradient(var(--ink),var(--ink)) 0 100%/min(100%,12ch) .09em no-repeat;padding-bottom:.08em}
.hdlines button{color:var(--muted);font-family:var(--head);font-weight:600}
.hdlines button:hover,.hdlines button:focus-visible{background:var(--paper2);color:var(--ink)}
.hdlines .pb{border:2px solid var(--ink);color:var(--ink);background:var(--paper)}
.hdlines .n{font:800 .8em/1.85 var(--head);color:var(--muted);letter-spacing:0}
.hdlines li.got .n{color:var(--green)}
.hdlines li.got .pb{border-color:var(--ink);background:var(--mint);color:var(--ink)}
.hdlines li.on button{background:color-mix(in srgb,var(--butter) 45%,var(--paper));color:var(--ink)}
.hdlines li.on .pb{background:var(--butter);border-color:var(--ink);color:var(--ink)}
.hdlines q::before,.hdlines q::after{color:var(--orange)}
/* Heard It on a phone: the reveal fits on one screen (the wave squeezes, each line is one row) */
@media (max-width:760px){
  .hdv{overflow:hidden!important}
  .hdv .fend{padding:10px 4px 0}
  .hdv .fend .fposter{width:68px}
  .hdv .fend .big{font-size:30px!important}.hdv .fend .big.long{font-size:24px!important}
  .hdv .fend .meta{margin-bottom:8px;font-size:13px}
  .hdlines{gap:0!important;margin-bottom:10px!important}
  .hdlines button{font-size:13px!important;padding:.32em .4em;gap:.5em}
  .hdlines q{-webkit-line-clamp:1!important}
  .hdlines .pb{width:1.6em;height:1.6em}
}
/* Heard It's reveal: the title rises in, its underline draws under it, the poster swings in, then the lines arrive */
.hdv .fend.on .fposter{animation:cjHdPoster .7s cubic-bezier(.34,1.56,.64,1) both}
.hdv .fend.on .lab{animation:cjHdUp .5s var(--ease) .05s both}
.hdv .fend.on .big{animation:cjHdUp .65s cubic-bezier(.34,1.56,.64,1) .1s both,cjHdLine .7s cubic-bezier(.65,0,.25,1) .3s both}
.hdv .fend.on .meta{animation:cjHdUp .5s var(--ease) .25s both}
.hdv .fend.on .hdlines li{animation:cjHdUp .45s var(--ease) both}
.hdv .fend.on .hdlines li:nth-child(1){animation-delay:.34s}.hdv .fend.on .hdlines li:nth-child(2){animation-delay:.39s}
.hdv .fend.on .hdlines li:nth-child(3){animation-delay:.44s}.hdv .fend.on .hdlines li:nth-child(4){animation-delay:.49s}
.hdv .fend.on .hdlines li:nth-child(5){animation-delay:.54s}.hdv .fend.on .hdlines li:nth-child(6){animation-delay:.59s}
.hdv .fend.on .row{animation:cjHdUp .5s var(--ease) .62s both}
@keyframes cjHdUp{from{opacity:0;transform:translateY(22px)}}
@keyframes cjHdPoster{from{opacity:0;transform:translateX(-50px) rotate(-12deg) scale(.9)}to{transform:rotate(-3deg)}}
.hdv .fend .fposter{transform:rotate(-3deg)}
@keyframes cjHdLine{from{background-size:0 .09em}}
/* a wrong guess: the wave shakes, with a quick red flash over the stage */
.hdstage.shake::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:var(--coral);animation:cjHdMiss .55s ease-out both}
@keyframes cjHdMiss{from{opacity:.32}to{opacity:0}}
@media (prefers-reduced-motion:reduce){.hdv .fend.on *{animation:none!important}}
@media (max-width:760px){
  .hdstage.done{aspect-ratio:2.4/1!important}
  .hdstage.done .hdbig{width:54px!important}
  .hdv .fend .row{gap:7px!important}
  .hdv .fend .fnext,.hdv .fend .fact{height:40px!important;font-size:14px!important;padding:0 13px!important;border-radius:12px!important}
  .hdv .fend .frow2{margin-top:8px}
}

/* ---------- Soundtracked: the Mixtape (cinejar.js draws the cassette in the record's place) ---------- */
.stv{--g:#ffb36b}
.ststage{background:var(--paper)}
#stViz{display:none}
.stv .fload{background:var(--paper)}
.ststage .stdisc{height:auto;width:min(80%,calc(100% * .8));max-height:86%;aspect-ratio:850/550;border-radius:30px}
.ststage .stdisc::after,.stvinyl{display:none}
.cjtape{position:absolute;inset:0;display:block;transform-origin:50% 55%}
.cjtape svg{width:100%;height:100%;overflow:visible}
.ststage .stplay{z-index:3;width:15%;background:var(--ink);color:var(--paper);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--butter);top:62%}
.ststage .stdisc:hover{transform:translateY(-3px)}
.stv .sthint b{color:var(--ink);background:var(--g);border:2px solid var(--ink);border-radius:999px;padding:0 .5em}
.stv .sthint,.stv .sttime{font-family:var(--head);font-weight:700;letter-spacing:0;text-transform:none;color:var(--muted)}
.fend .stnow i{color:var(--orange)}
@media (max-width:760px){.ststage .stdisc{width:88%;height:auto}}
/* solved: the cassette steps up and back to make room for the card */
.ststage .stdisc{transition:transform .6s cubic-bezier(.34,1.56,.64,1),opacity .4s}
.stv .fwrap:has(.fend.on) .stdisc{transform:translateY(-24%) scale(.6)}
.stv .fend{background:linear-gradient(to top,rgba(255,251,244,.98) 0%,rgba(255,251,244,.95) 48%,rgba(255,251,244,0) 72%)}
/* ---------- a phone on its side: room for the rounded corners and the notch (the owner, 2026-11-03) ---------- */
@media (orientation:landscape) and (max-height:520px){
  .cjfab{right:calc(16px + env(safe-area-inset-right));top:14px}
  .framed,.hdv,.umv,.stv,.sov,.wsv,.imv,.sdv,.ctv{padding:14px calc(22px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) calc(26px + env(safe-area-inset-left))!important}
  .fwrap{width:min(calc(100vw - 272px - env(safe-area-inset-left) - env(safe-area-inset-right)),calc((100dvh - 30px - env(safe-area-inset-bottom)) * 16 / 9))!important}
  .fbar{width:180px!important;padding-top:58px}
  .hl,.se{padding-left:calc(26px + env(safe-area-inset-left))!important;padding-right:calc(76px + env(safe-area-inset-right))!important;padding-bottom:calc(12px + env(safe-area-inset-bottom))!important}
  .app.v-swipe .main{padding-left:calc(28px + env(safe-area-inset-left));padding-right:calc(76px + env(safe-area-inset-right))}
  .wwrap{padding-left:calc(24px + env(safe-area-inset-left));padding-right:calc(24px + env(safe-area-inset-right))}
}
@media (orientation:landscape) and (max-height:520px){.hl,.se{padding-top:16px!important}.app.v-swipe .main{padding-top:16px}}

/* ---------- Unmasked: the face in an outlined frame, under paper tiles that flip away ---------- */
.umv{--g:var(--mint)}
.umstage{background:var(--paper)}
.umv .fload{background:var(--paper)}
.umpic{background:var(--paper2);border:3px solid var(--ink);border-radius:18px;box-shadow:7px 8px 0 var(--ink);height:calc(100% - 26px);perspective:700px}
.umtiles{gap:0}
.umtiles i{background:var(--mint);box-shadow:inset 0 0 0 1px rgba(29,26,38,.28);backface-visibility:hidden;transform-origin:50% 50%;
  transition:transform .55s cubic-bezier(.34,1.56,.64,1) var(--d,0ms),opacity .35s ease calc(var(--d,0ms) + .12s)}
.umtiles i.alt{background:#8fe0bd}
.umtiles i.off{opacity:0;transform:rotateY(var(--fy,90deg)) scale(.9)}
.umstage.win .umpic{border-color:var(--ink)}
@media (max-width:760px){.umpic{height:calc(100% - 16px);box-shadow:5px 6px 0 var(--ink)}}
@media (prefers-reduced-motion:reduce){.umtiles i{transition:opacity .2s!important}}

/* ---------- the remaining seven games: CineJar type, outlined pictures, bold buttons (2026-11-03) ---------- */
.hl,.se,.sov,.wsv,.imv,.sdv,.ctv{--display:var(--head)}
.hl .mono,.se .mono,.sov .mono,.wsv .mono,.imv .mono,.sdv .mono,.ctv .mono{font-family:var(--head);letter-spacing:0;text-transform:none;font-weight:700}
.htitle,.hgo,.hend .big,.sefilm i,.seempty b,.seend .big,.sotile .lab,.sotile .big,.wslab,.wsbig,.wsnt b,.imtag,.impips em,.sdlab,.sdcap b,.sdcap span,.sdask h4,.sdask p,.cttitle,.ctrole,.cthint i{font-family:var(--head)!important;text-transform:none!important;letter-spacing:-.03em!important}
.htitle,.sotile .big,.wsbig,.cttitle,.sdask h4{font-weight:800!important;letter-spacing:-.045em!important}

/* Higher or Lower: two outlined film cards; the buttons in mint and coral */
.hl{--g:var(--sky)}
.hcard{border:3px solid var(--ink)!important;box-shadow:8px 9px 0 var(--ink)!important;border-radius:28px}
.hcard.ok{box-shadow:8px 9px 0 var(--ink),0 0 0 6px var(--mint)!important}
.hcard.no{box-shadow:8px 9px 0 var(--ink),0 0 0 6px var(--coral)!important}
.hart{border:2.5px solid #fffbf4;box-shadow:4px 5px 0 rgba(0,0,0,.55)}
.hnum{font-family:var(--head);font-weight:800;letter-spacing:-.04em}
.hgo{border:2.5px solid var(--ink)!important;color:var(--ink)!important;box-shadow:4px 4px 0 var(--ink);font-weight:800;transition:transform .35s var(--spring),box-shadow .35s var(--spring)}
.hgo.hi{background:var(--mint)!important}.hgo.lo{background:var(--coral)!important}
.hgo:hover{transform:translate(-2px,-3px);box-shadow:6px 7px 0 var(--ink)}
.hgo:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.hgo kbd{color:var(--ink);opacity:.7;font-family:var(--head)}
.hgo:disabled{opacity:.45;background:var(--paper2)!important;box-shadow:none}

/* Semantle: the closeness bars in the jelly colours */
.se{--g:var(--pink)}
.sebarx i{background:linear-gradient(90deg,var(--sky),var(--mint))!important;box-shadow:inset 0 0 0 1.5px rgba(29,26,38,.35)}
.serow{border-color:var(--line)}

/* Scene Order, Which Scene?, Spot the Impostor: every picture an outlined print */
.sov{--g:#b5e36a}.wsv{--g:#7fd8e8}.imv{--g:#ff8fa3}
.socard{border:2.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink);border-radius:14px!important}
.socard.sel,.socard.drag{box-shadow:7px 8px 0 var(--ink),0 0 0 4px var(--butter)!important}
.socard.ok{box-shadow:4px 4px 0 var(--ink),0 0 0 4px var(--mint)!important}
.socard.miss{box-shadow:4px 4px 0 var(--ink),0 0 0 4px var(--coral)!important}
.imcell{border:2.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink)!important;border-radius:14px!important}
.imcell.sel{box-shadow:6px 7px 0 var(--ink),0 0 0 4px var(--butter)!important}
.wsgrid{gap:6px!important;background:var(--paper)!important;padding:6px}
.wscell{border:2.5px solid var(--ink);border-radius:12px!important}
.wshub{background:var(--ink)!important;color:var(--paper)!important;border:3px solid var(--ink)!important;box-shadow:5px 5px 0 #7fd8e8!important}

/* Six Degrees and Common Thread: outlined faces and posters */
.sdv{--g:#c4a7ff}.ctv{--g:#ffcf5c}
.sdpic{border:2.5px solid var(--ink);box-shadow:5px 6px 0 var(--ink)!important}
.ctpos{border:2.5px solid #fffbf4;box-shadow:5px 6px 0 rgba(0,0,0,.6)!important}
.ctrole{color:var(--butter)!important}
.se .serow,.se .serow *,.seclose .lb,.se .hrule{font-family:var(--head);letter-spacing:0;text-transform:none}
.se .serow.head{font-weight:800;color:var(--muted)}
/* Hi-Lo's card flips --ink to paper for its picture text; its outline and the buttons inside keep the real ink */
.hcard{border-color:#1d1a26!important;box-shadow:8px 9px 0 #1d1a26!important}
.hgo{border-color:#1d1a26!important;color:#1d1a26!important;box-shadow:4px 4px 0 #1d1a26}
.hgo:hover{box-shadow:6px 7px 0 #1d1a26}.hgo:active{box-shadow:1px 1px 0 #1d1a26}.hgo kbd{color:#1d1a26}
.hgo:disabled{box-shadow:none}
@media (orientation:landscape) and (max-height:520px){
  .ctv .fend .lab{display:none}
  .ctv .fend.on{background:linear-gradient(180deg,rgba(255,251,244,0) 0%,rgba(255,251,244,.9) 30%,var(--paper) 52%)!important}
}

/* ---------- Behind the scenes (the NAS's progress page): paper, ink outlines, each game in its jelly colour ---------- */
.pgv{--line:rgba(29,26,38,.16);--line2:rgba(29,26,38,.3);--dim:rgba(29,26,38,.56)}
.pgv .mono{font-family:var(--head);letter-spacing:0;text-transform:none;font-weight:700}
.pghead h2,.pgh3 h4,.pgcard h3,.pggm h5,.pggrp>header h5{font-family:var(--head)!important;text-transform:none!important;letter-spacing:-.035em!important;font-weight:800}
.pghead h2{line-height:.9}
.pghead h2 em{color:var(--ink);background:var(--mint);padding:0 .12em;border:3px solid var(--ink);border-radius:.18em;box-shadow:4px 4px 0 var(--ink);display:inline-block;transform:rotate(-1.5deg);margin-top:.06em}
.pgdot{background:var(--mint);box-shadow:0 0 0 2px var(--ink)!important;animation:none}
.pgsum{gap:0;background:var(--paper);border:2.5px solid var(--ink);box-shadow:5px 5px 0 var(--ink)}
.pgsum div{background:var(--paper);border-right:2px solid var(--line)}
.pggm{background:var(--c)!important;border:2.5px solid var(--ink)!important;box-shadow:5px 5px 0 var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--ink);transition:transform .3s var(--spring),box-shadow .3s var(--spring)}
.pggm:hover{transform:translate(-2px,-3px);box-shadow:7px 8px 0 var(--ink)}
.pggm p,.pggm .row span{color:rgba(29,26,38,.75)}
.pggm .ring .bg{stroke:rgba(29,26,38,.16)}.pggm .ring .fg{stroke:var(--ink)}
.pggm .new{background:var(--ink);color:var(--paper);font-family:var(--head)}
.pggm .new.zero{background:rgba(29,26,38,.12);color:rgba(29,26,38,.7)}
.pgcard,.pgrow{background:var(--paper)!important;border:2.5px solid var(--ink)!important;box-shadow:5px 5px 0 var(--ink);backdrop-filter:none;-webkit-backdrop-filter:none}
.pgrow .pgcard{box-shadow:none;border:0!important;border-top:2px solid var(--line)!important}
.pgcard::before{height:8px;border-bottom:2px solid var(--ink)}
.pggame,.pgrow .pgrgame{color:var(--ink);font-family:var(--head);letter-spacing:0;text-transform:none;font-weight:800}
.pgrow .pgrgame{display:inline-block;justify-self:start;background:var(--c);border:2px solid var(--ink);border-radius:99px;padding:1px 9px;font-size:12px}
.pgstate{border:2px solid var(--ink);color:var(--ink);font-family:var(--head)}
.pgstate.running{border-color:var(--ink);background:var(--mint)}.pgstate.running i{background:var(--ink)}
.pgstate.failed,.pgstate.stale{color:var(--ink);border-color:var(--ink);background:var(--coral)}
.pgstate.failed i,.pgstate.stale i{background:var(--ink)}
.pgbar,.pgact u,.pgrow .pgrbar,.pgrow .pgrnow u,.pgrow .pgrd u{background:rgba(29,26,38,.08);box-shadow:inset 0 0 0 1.5px rgba(29,26,38,.22)}
.pgbar .a,.pgrow .pgrbar i,.pgrow .pgrnow u>i,.pgact u i{box-shadow:inset 0 0 0 1.5px var(--ink)}
.pgbar .b{background:repeating-linear-gradient(135deg,rgba(194,61,23,.6) 0 5px,rgba(194,61,23,.3) 5px 10px)}
.pgchip,.pgstats div,.pgrow .pgrnow>span,.pgrow .pgrd{background:var(--paper2)}
.pgchip.r,.pgstate.failed{color:var(--ink)}
.pgpo>div{background-color:var(--paper2);box-shadow:inset 0 0 0 2px var(--ink)}
.pgpo>div.np{background:hsl(var(--h) 80% 80%);color:var(--ink)}
.pgfeed .th{background-color:var(--paper2)}
.pgfeed .pgno .th{box-shadow:inset 0 0 0 2px var(--orange)}
.pgrow .pgrnow u s{color:var(--ink);mix-blend-mode:normal}
.pgrow .pgrnow .w u>i{background:repeating-linear-gradient(-45deg,rgba(29,26,38,.14) 0 8px,rgba(29,26,38,.05) 8px 16px)}
.pgrow .k-wait{background:rgba(29,26,38,.22)}.pgrow .k-find{background:var(--sky)}.pgrow .k-dl{background:var(--lilac)}
.pgrow .k-pick{background:var(--butter)}.pgrow .k-pub{background:var(--mint)}
.pgrow .pgrbig2 i,.pgrow .pgrd>i{color:var(--ink)}
.pgsay b{color:var(--ink);font-weight:800}
.pgfold>summary{font-family:var(--head);font-weight:700}
.pgv{--dim:rgba(29,26,38,.68)}
.pggm p,.pggm .row span{color:rgba(29,26,38,.85)}
.pggm .new.zero{background:rgba(255,251,244,.55);color:var(--ink)}
.pggames{grid-template-columns:repeat(auto-fill,minmax(min(100%,236px),1fr))}
.pggm>*{min-width:0}.pggm h5{font-size:20px}.pggm .row span{overflow-wrap:anywhere}
/* Hi-Lo, light: two jelly cards (sky vs butter) instead of near-black panels — the blurred poster is only a faint tint,
   so a slow picture never leaves a black card behind */
.hcard{--ink:#1d1a26;--muted:rgba(29,26,38,.78);--dim:rgba(29,26,38,.66);--green:#0e7c50;--orange:#c23d17;color:#1d1a26;background:var(--sky)!important}
#hB{background:var(--butter)!important}
.hcard::after{background:linear-gradient(to top,rgba(255,251,244,.5),rgba(255,251,244,0) 60%)}
.hposter.on{opacity:.3;mix-blend-mode:multiply;filter:blur(40px) saturate(1.6)}
.htitle{text-shadow:none}
.hart{background-color:rgba(255,251,244,.5);border:2.5px solid #1d1a26;box-shadow:5px 6px 0 #1d1a26;opacity:1}
.hart:not(.on){background-image:none!important}
.hnum.q{-webkit-text-stroke:2.5px #1d1a26;color:transparent;opacity:.5}
.hnum.ok{color:#0e7c50}.hnum.no{color:#c23d17}
.hbody .lab b,.hbody .lab em{color:inherit}
.hcard .hmine{color:#0b5e3c!important;font-weight:800}
.hcard .hsub,.hnum small{color:rgba(29,26,38,.74)!important}
.hposter.on{opacity:.2}
/* Common Thread: the stills show their colour (a lighter veil), the films sit on paper seams, and the hints are paper pills */
.ctfilms{background:#1d1a26}
.ctfilm .ctstill{filter:saturate(1.15) brightness(.82)}
.ctstage.done .ctfilm .ctstill{filter:saturate(1.1) brightness(.6)}
.ctfilm::after{background:linear-gradient(180deg,rgba(7,7,10,.35) 0%,rgba(7,7,10,0) 24%,rgba(7,7,10,.08) 55%,rgba(7,7,10,.72) 100%)}
.cthint{background:var(--paper);border:2.5px solid #1d1a26;box-shadow:3px 3px 0 #1d1a26;color:#1d1a26;backdrop-filter:none;-webkit-backdrop-filter:none;font-family:var(--head);font-weight:700}
.cthint i{color:#1d1a26;background:var(--butter);border-radius:99px;padding:.15em .6em;font-weight:800}
.cthint.next{background:rgba(255,251,244,.92);border-style:dashed;border-color:#1d1a26;color:#1d1a26;box-shadow:none}
.cthint.next i{background:rgba(29,26,38,.1);color:#1d1a26}
.play i{background:var(--paper);color:#1d1a26;border:2px solid #1d1a26;box-shadow:2px 2px 0 #1d1a26}