/* SLAYBACK styles */
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}body{margin:0;font:14px system-ui,sans-serif}img{max-width:100%}[hidden]{display:none!important}
.nojs{position:fixed;inset:0;z-index:99;display:grid;place-items:center;margin:0;padding:24px;text-align:center;font:600 16px system-ui,sans-serif;color:#f1e6d0;background:#1a110b}
/* Layout: the 3 AM den, seen from the couch. A strip of wall (poster, window, trophy masks), the CRT, the VCR deck you play with, and three things on the coffee table. One screen, no scrolling; listings, catalog and tape box slide up as sheets. */
:root{
  color-scheme: dark;
  --room:#1a110b;        /* wood-panel den */
  --ink:#f1e6d0;         /* lamp-lit paper white */
  --dim:#a99a86;
  --vcr:#17161b;         /* VCR body */
  --steel:#d4d7de;       /* piano keys */
  --vfd:#7ff7e6;         /* the one glowing accent: vacuum fluorescent display */
  --rec:#ff4b4b;
  --tape:#ecdfb2;        /* masking tape */
  --marker:#1d1a2a;
  --paper:#efe6cf; --paper-ink:#1f1913;
  --gloss:#fbf7ee; --cat-red:#d8262f;
  --f-logo:"Creepster","Nosifer",Impact,"Arial Black",sans-serif;   /* the SLAYBACK wordmark */
  --f-display:"Jacquard 24","UnifrakturMaguntia","Old English Text MT",Georgia,serif;   /* blackletter: the newspaper masthead */
  --f-hw:"Michroma","Eurostile","Microgramma","Arial Black",system-ui,sans-serif;
  --f-hand:"Permanent Marker","Marker Felt","Comic Sans MS",cursive;   /* marker: masking tape, sticky labels, headlines on notes */
  --f-pen:"Caveat","Bradley Hand","Segoe Print","Comic Sans MS",cursive;  /* pen: the sentences written on sticky notes */
  --blood:#ff4b57;
  --f-text:"Archivo Narrow","Arial Narrow","Helvetica Neue",system-ui,sans-serif;
  --px:2px;
}
html{box-sizing:border-box;height:100%}
*,*::before,*::after{box-sizing:inherit}
[hidden]{display:none!important}
body{height:100%;margin:0;background:var(--room);color:var(--ink);font-family:var(--f-text);font-size:15px;line-height:1.35;overflow-x:hidden;overflow-y:auto;overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
button{font:inherit;color:inherit;cursor:pointer;-webkit-touch-callout:none;touch-action:manipulation}
:focus-visible{outline:2px solid var(--vfd);outline-offset:2px}
.sr{position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

#roomBg{position:fixed;inset:0;width:100%;height:100%;image-rendering:pixelated;z-index:0}
.fx{position:fixed;inset:0;pointer-events:none;z-index:6}
#light{opacity:.6;will-change:opacity;background:radial-gradient(70% 48% at 50% var(--ly,32%), rgb(var(--lr,110) var(--lg,130) var(--lb,255) / .2), transparent 72%)}
#police{opacity:0;will-change:opacity,transform;inset:-60px 0;background:repeating-linear-gradient(176deg, rgb(var(--pc,255 40 60) / .42) 0 7px, transparent 7px 16px)}
#hunt{inset:auto;left:0;top:0;width:300vmax;height:300vmax;margin:-150vmax 0 0 -150vmax;opacity:0;transition:opacity .6s;will-change:transform,opacity;background:radial-gradient(circle at 50% 50%, rgb(255 244 210 / .12) 0, rgb(255 244 210 / .05) 70px, rgb(4 3 8 / .66) 150px)}

#app{position:relative;z-index:2;min-height:100%;max-width:440px;margin:0 auto;display:flex;flex-direction:column;gap:8px;padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));padding-block:10px 12px}

/* wall strip */
.wall{flex:none;display:grid;grid-template-columns:64px minmax(0,1fr) 108px;gap:12px;align-items:center;height:62px}
.win{width:64px;height:52px;image-rendering:pixelated;display:block;box-shadow:0 0 0 3px #4a3322, 0 0 0 5px #1d130b, 0 6px 10px rgb(0 0 0 / .5)}
.poster{position:relative;height:58px;min-width:0;border:0;padding:0;display:block;background:radial-gradient(120% 90% at 50% 40%,#231a2b,#0b0910 70%);box-shadow:inset 0 0 0 2px #e9dfc8, 0 4px 10px rgb(0 0 0 / .6);transform:rotate(-1.4deg);color:var(--ink)}
#posterArt{position:absolute;left:3px;top:3px;width:calc(100% - 6px);height:calc(100% - 6px);display:block}
.trophies{width:108px;height:54px;image-rendering:pixelated;display:block}

/* television */
.tv{flex:1 1 auto;min-height:152px;display:flex;align-items:center;justify-content:center}
.cab{width:100%;border-radius:20px;padding:10px 10px 0;background:linear-gradient(180deg, rgb(255 255 255 / .07), transparent 22%, rgb(0 0 0 / .25)), repeating-linear-gradient(91deg,#3b2a1e 0 7px,#33241a 7px 9px,#402e21 9px 15px,#2e2016 15px 17px);box-shadow:0 0 0 2px #120b07, 0 14px 30px rgb(0 0 0 / .65), inset 0 1px 0 rgb(255 255 255 / .12)}
.screen{position:relative;width:100%;height:220px;border-radius:26px / 20px;overflow:hidden;background:#040306;box-shadow:inset 0 0 0 3px #0a090b, 0 0 0 4px #191210, 0 0 0 7px #4b3a2c;touch-action:none;cursor:crosshair;outline-offset:6px}
.screen canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#stage{image-rendering:pixelated}
#crack{pointer-events:none;transition:opacity 4s ease-in}
.glass{position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(110% 80% at 26% 8%, rgb(255 255 255 / .11), transparent 42%), radial-gradient(150% 130% at 50% 50%, transparent 58%, rgb(0 0 0 / .5))}
.screen.noshader .glass{background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--px) * .5),rgb(0 0 0 / .18) calc(var(--px) * .5),rgb(0 0 0 / .18) var(--px)),radial-gradient(110% 80% at 26% 8%, rgb(255 255 255 / .11), transparent 42%), radial-gradient(150% 130% at 50% 50%, transparent 58%, rgb(0 0 0 / .5))}
.cab.shake{animation:shake .32s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{10%,90%{transform:translate(-1px,1px)}20%,80%{transform:translate(3px,-2px) rotate(.4deg)}30%,50%,70%{transform:translate(-5px,2px) rotate(-.6deg)}40%,60%{transform:translate(5px,-1px)}}
.chin{display:flex;align-items:center;gap:10px;height:32px;padding:0 4px}
.tv-brand{font-family:var(--f-hw);font-size:10px;letter-spacing:.34em;color:#d8c8ac}
.tv-model{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#9a8670;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.led{width:6px;height:6px;border-radius:50%;background:#ff3b3b;box-shadow:0 0 6px #ff3b3b;margin-left:auto;flex:none}
.knob{width:24px;height:24px;flex:none;border-radius:50%;border:0;padding:0;position:relative;background:radial-gradient(circle at 35% 30%,#77777e,#1c1c20 70%);box-shadow:0 2px 0 #000, inset 0 -2px 3px rgb(0 0 0 / .6)}
.knob i{position:absolute;left:50%;top:3px;width:2px;height:8px;margin-left:-1px;background:#efe6d2;transform-origin:1px 9px;transform:rotate(var(--rot,50deg));transition:transform .3s cubic-bezier(.3,1.7,.5,1)}
.knob.dim{opacity:.55}
.kl{font-family:var(--f-hw);font-size:7px;letter-spacing:.12em;color:#9a8670;margin-right:-5px;flex:none}

/* the VCR */
.vcr{flex:none;display:grid;gap:8px;border-radius:6px;padding:8px 8px 12px;background:linear-gradient(#28272d,#17161b 34%,#111014);box-shadow:inset 0 1px 0 #3c3b43, 0 0 0 1px #050407, 0 10px 22px rgb(0 0 0 / .6)}
.vcr-top{display:flex;align-items:center;gap:10px;min-width:0}
.lid{flex:1;min-width:0;height:20px;border-radius:3px;display:flex;align-items:center;padding:0 8px;background:linear-gradient(#1d1c22,#0e0d11);box-shadow:inset 0 0 0 1px #2c2b33, inset 0 -3px 0 #08070a;transform-origin:50% 100%;transition:transform .45s cubic-bezier(.3,1.7,.5,1)}
.lid.open{transform:perspective(200px) rotateX(38deg) translateY(-5px)}
.label{font-family:var(--f-hand);font-size:11px;line-height:15px;color:var(--marker);background:#f1ebda;padding:0 7px;border-radius:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform:rotate(-1deg);max-width:100%}
.vcr-brand{font-family:var(--f-hw);font-size:8px;letter-spacing:.22em;color:#9fa3ad;white-space:nowrap}
.vcr-brand b{color:var(--ink)}
.vcr-brand em{font-style:normal;color:var(--blood)}
.slay{color:var(--blood)}
.vfd{width:100%;height:78px;display:block;border-radius:4px;background:#040a09;box-shadow:inset 0 0 0 1px #000, inset 0 3px 12px rgb(0 0 0 / .85)}
.keys{display:grid;grid-template-columns:1fr 3fr 1fr;gap:6px}
.modekeys{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.key{position:relative;height:52px;min-width:0;border:0;border-radius:3px 3px 8px 8px;padding:0;display:grid;justify-items:center;align-content:center;gap:3px;color:#17161b;overflow:hidden;background:linear-gradient(#f3f4f7,#cfd2d8 32%,#a8acb5);box-shadow:0 6px 0 #565963, 0 8px 12px rgb(0 0 0 / .6), inset 0 1px 0 #fff;transition:transform .07s, box-shadow .07s}
.key svg{width:20px;height:15px;fill:currentColor}
.key small{font-family:var(--f-hw);font-size:8px;letter-spacing:.12em;text-transform:uppercase}
.key.down,.key[aria-checked="true"]{transform:translateY(5px);box-shadow:0 1px 0 #565963, 0 2px 5px rgb(0 0 0 / .55), inset 0 1px 0 #fff, inset 0 -8px 14px rgb(0 0 0 / .14);background:linear-gradient(#e2e4e9,#bfc2c9 32%,#9a9ea7)}
.key.rec{color:#a3141c}
.lamp{position:absolute;top:6px;right:7px;width:6px;height:6px;border-radius:50%;background:#3b1414;box-shadow:inset 0 1px 1px rgb(0 0 0 / .6)}
.key[aria-checked="true"] .lamp{background:#5dff8a;box-shadow:0 0 7px #5dff8a}
.key.rec .lamp.on{background:#ff3b3b;box-shadow:0 0 8px #ff3b3b}
.key.nudge{animation:nudge .3s}
@keyframes nudge{30%{transform:translateX(-3px) rotate(-1deg)}60%{transform:translateX(3px) rotate(1deg)}}
.tape{position:absolute;left:-8px;right:-8px;top:14px;height:24px;display:grid;place-items:center;font-family:var(--f-hand);font-style:normal;font-size:13px;color:var(--marker);background:linear-gradient(rgb(255 255 255 / .25),transparent 40%),var(--tape);transform:rotate(-7deg);box-shadow:0 1px 3px rgb(0 0 0 / .45);clip-path:polygon(0 8%,3% 0,7% 9%,11% 2%,15% 8%,100% 0,97% 30%,100% 55%,97% 78%,100% 100%,92% 92%,88% 100%,84% 93%,0 100%,3% 70%,0 45%,3% 22%);pointer-events:none;white-space:nowrap}
.tape.peel{animation:peel .8s cubic-bezier(.5,0,.8,.4) forwards}
.tape,.ptape,.label{-webkit-text-stroke:.5px currentColor;letter-spacing:.03em}
@keyframes peel{20%{transform:rotate(-12deg) translate(4px,-4px)}to{transform:rotate(30deg) translate(60px,-50px);opacity:0}}
.tuner{display:flex;align-items:stretch;gap:8px}
.presets{position:relative;flex:1;min-width:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}
.pre{height:36px;min-width:0;border:0;border-radius:3px;padding:0;display:grid;justify-items:center;align-content:center;gap:4px;font-family:var(--f-hw);font-size:11px;color:#d7d9df;background:linear-gradient(#2e2d34,#1a191e);box-shadow:0 2px 0 #050407, inset 0 1px 0 #3f3e47}
.pre i{width:5px;height:5px;border-radius:50%;background:#2a2016}
.pre.owned i{background:#4bd66b;box-shadow:0 0 5px #4bd66b}
.pre.avail i{background:#ffb02e;box-shadow:0 0 5px #ffb02e;animation:blink 1s steps(2,jump-none) infinite}
.pre[aria-current="true"]{box-shadow:0 2px 0 #050407, inset 0 0 0 1px var(--vfd);color:var(--vfd)}
.pre.locked{color:#55535f}
@keyframes blink{50%{opacity:.25}}
.ptape{position:absolute;top:4px;bottom:4px;right:-4px;display:grid;place-items:center;font-family:var(--f-hand);font-size:12px;color:var(--marker);background:linear-gradient(rgb(255 255 255 / .25),transparent 40%),var(--tape);transform:rotate(1.5deg);box-shadow:0 1px 3px rgb(0 0 0 / .45);clip-path:polygon(2% 0,100% 4%,98% 100%,0 96%,3% 60%,0 30%);pointer-events:none;white-space:nowrap;overflow:hidden}
.speed{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:2px;width:42px;flex:none}
.speed button{border:0;border-radius:2px;padding:0;line-height:1;min-height:0;background:#1b1a20;color:#7f838d;font-family:var(--f-hw);font-size:8px;letter-spacing:.06em;box-shadow:inset 0 0 0 1px #2c2b33}
.speed button[aria-checked="true"]{background:#2c2b33;color:var(--vfd);box-shadow:inset 0 0 0 1px var(--vfd)}

/* coffee table */
.table{flex:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:10px 10px 6px;border-radius:10px;background:linear-gradient(180deg, rgb(255 255 255 / .08), transparent 40%),repeating-linear-gradient(178deg,#5a3b24 0 5px,#523520 5px 9px,#60412a 9px 14px);box-shadow:inset 0 -6px 0 #2b1a0e, 0 10px 20px rgb(0 0 0 / .5)}
.obj{position:relative;border:0;background:none;padding:0;display:grid;justify-items:center;gap:4px;min-width:0}
.obj canvas{width:72px;height:48px;image-rendering:pixelated;display:block;filter:drop-shadow(0 4px 2px rgb(0 0 0 / .55));transition:transform .15s}
.obj:hover canvas{transform:translateY(-2px) rotate(-1deg)}
.obj:active canvas{transform:translateY(1px) scale(.97)}
.obj span{font-family:var(--f-hw);font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:#ecdcc0;white-space:nowrap}
.note{position:absolute;top:-9px;right:calc(50% - 48px);font-style:normal;font-family:var(--f-pen);font-weight:700;font-size:16px;line-height:1;color:#2a2010;background:#ffe36e;padding:2px 6px 1px;transform:rotate(7deg);box-shadow:0 1px 3px rgb(0 0 0 / .45);white-space:nowrap}

/* footer: copyright and the fine print, in small type on the carpet */
.foot{flex:none;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:-4px;font-size:11px;line-height:1.2;letter-spacing:.03em;color:#cdbd9f}
.foot span{padding:5px 4px}
.foot i{font-style:normal;opacity:.55;padding:0 2px}
.foot button{border:0;background:none;padding:5px 6px;font:inherit;color:#efe3ca;text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgb(239 227 202 / .45)}

/* sheets */
.sheet{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center;background:rgb(5 3 8 / .6)}
.page{width:min(460px,100%);max-height:90%;overflow-y:auto;overscroll-behavior:contain;-webkit-user-select:text;user-select:text;border-radius:12px 12px 0 0;padding:16px max(16px, env(safe-area-inset-right, 0px)) calc(22px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));animation:sheet-in .3s cubic-bezier(.2,.9,.3,1);box-shadow:0 -10px 40px rgb(0 0 0 / .6)}
@keyframes sheet-in{from{transform:translateY(60px);opacity:0}}
.close{border:0;background:none;padding:10px;margin:-10px -10px -10px 0;font-family:var(--f-hw);font-size:10px;letter-spacing:.16em;color:inherit;flex:none}
.sheet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}

.page.listings{background:radial-gradient(circle at 20% 10%, rgb(255 255 255 / .35), transparent 50%),var(--paper);color:var(--paper-ink)}
.lst-title{font-weight:700;font-size:27px;line-height:.95;text-transform:uppercase;letter-spacing:-.01em;margin:0;text-wrap:balance}
.lst-sub{font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-top:4px}
.lst-rule{border:0;border-top:3px double var(--paper-ink);margin:10px 0 6px}
.lst-speed{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.lst-speed .seg{display:inline-flex;border:1.5px solid var(--paper-ink);border-radius:3px;overflow:hidden}
.lst-speed .seg button{border:0;background:none;padding:5px 9px;font-weight:700;font-size:12px}
.lst-speed .seg button+button{border-left:1.5px solid var(--paper-ink)}
.lst-speed .seg button[aria-checked="true"]{background:var(--paper-ink);color:var(--paper)}
.lst-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:start;padding:10px 0;border-bottom:1px solid rgb(31 25 19 / .22)}
.lst-row.locked{opacity:.5}
.chbox{height:44px;border:0;padding:0;border-radius:2px;background:var(--paper-ink);color:var(--paper);display:grid;place-items:center;align-content:center;gap:1px;font-family:var(--f-hw);font-size:15px;line-height:1}
.chbox small{font-size:7px;letter-spacing:.14em}
.lst-row.on .chbox{box-shadow:0 0 0 2px var(--paper), 0 0 0 4px #c81e2a}
.lst-main{min-width:0}
.lst-time{font-weight:700;font-size:11px;letter-spacing:.1em}
.lst-name{font-weight:700;font-size:19px;line-height:1.05;text-transform:uppercase}
.lst-desc{font-size:13px;font-style:italic;line-height:1.3}
.lst-stats{font-size:12px;margin-top:3px;font-variant-numeric:tabular-nums}
.stars{letter-spacing:1px}
.recbtn{min-width:86px;border:0;border-radius:3px;padding:7px 8px;display:grid;gap:2px;text-align:center;background:var(--paper-ink);color:var(--paper)}
.recbtn span{font-family:var(--f-hw);font-size:8px;letter-spacing:.14em;color:#ff7b7b}
.recbtn b{font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1}
.recbtn:disabled{opacity:.32;cursor:not-allowed}

.page.catalog{background:var(--gloss);color:#1e1a19}
.cat-banner{margin:-16px calc(-1 * max(16px, env(safe-area-inset-right, 0px))) 6px calc(-1 * max(16px, env(safe-area-inset-left, 0px)));padding:14px max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px));background:repeating-linear-gradient(135deg,#d8262f 0 14px,#cf1f28 14px 28px);color:#fff;border-radius:12px 12px 0 0}
.cat-logo{font-weight:700;font-style:italic;font-size:36px;line-height:.9;letter-spacing:-.02em;transform:skewX(-6deg);margin:0;text-shadow:3px 3px 0 #7a0d13}
.cat-tag{font-family:var(--f-pen);font-weight:700;font-size:19px;line-height:1.05;margin-top:4px}
.cat-sec{position:relative;display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;padding:14px 0;border-bottom:2px dashed #e3d9c9}
.cat-img{width:76px;height:76px;border-radius:6px;background:radial-gradient(circle at 50% 40%,#fff,#ece3d3);display:grid;place-items:center;box-shadow:inset 0 0 0 1px #e1d6c4}
.cat-img canvas{image-rendering:pixelated;display:block}
.cat-kick{font-family:var(--f-hw);font-size:8px;letter-spacing:.18em;text-transform:uppercase;color:#8a7f72}
.cat-name{font-weight:700;font-size:20px;line-height:1.05}
.cat-eff{font-size:13px;font-weight:600;color:#1f6b46}
.cat-fl{font-size:13px;font-style:italic;color:#6d645a}
.cat-buy{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap}
.price{display:grid;place-items:center;width:78px;height:50px;background:#ffe14d;color:#1d1a1a;font-weight:700;font-size:15px;line-height:1;clip-path:var(--burst);font-variant-numeric:tabular-nums}
.order{border:0;border-radius:3px;padding:10px 14px;background:var(--cat-red);color:#fff;font-family:var(--f-hw);font-size:9px;letter-spacing:.16em;box-shadow:0 3px 0 #8f1018}
.order:disabled{background:#d8cfc2;color:#7d7468;box-shadow:0 3px 0 #b9ae9f;cursor:not-allowed}
.cat-owned{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.cat-owned canvas{image-rendering:pixelated;background:#efe8da;border-radius:3px;padding:2px}
.stamp{position:absolute;right:4px;top:18px;font-weight:700;font-size:22px;letter-spacing:.06em;color:#c81e2a;border:3px solid #c81e2a;padding:0 8px;border-radius:4px;transform:rotate(-14deg);opacity:.85;pointer-events:none;animation:stamp .35s cubic-bezier(.2,2,.4,1) both}
@keyframes stamp{from{transform:rotate(-14deg) scale(2.4);opacity:0}}

.page.box{background:linear-gradient(#141217,#0b0a0d);color:var(--ink)}
.box-front{display:grid;grid-template-columns:118px minmax(0,1fr);gap:14px;align-items:center}
.cover{width:118px;height:168px;image-rendering:pixelated;display:block;border-radius:2px;box-shadow:0 0 0 2px #2c2933, 0 8px 18px rgb(0 0 0 / .65)}
.box-title{font-family:var(--f-logo);font-size:38px;line-height:.9;margin:0}
.box-logo{display:block;width:100%;height:78px}
.box-part{font-family:var(--f-hw);font-size:11px;letter-spacing:.3em;color:#ff9b2f;margin-top:4px}
.quote{margin:12px 0 0;font-size:17px;font-style:italic;line-height:1.2}
.quote cite{display:block;margin-top:3px;font-style:normal;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.bar{height:4px;background:#2a2730;margin-top:8px}
.bar i{display:block;height:100%;background:#ff9b2f}
.box-sec{margin-top:16px;padding-top:12px;border-top:1px solid #2a2730;display:grid;gap:8px}
.box-h{font-family:var(--f-hw);font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin:0}
.kv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0}
.kv div{background:#1b1920;border-radius:4px;padding:7px 9px;min-width:0}
.kv dt{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.kv dd{margin:0;font-weight:700;font-size:20px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seq{border:0;border-radius:4px;padding:12px;background:#ff9b2f;color:#2a1405;display:grid;gap:2px;text-align:center;box-shadow:0 4px 0 #8a4410}
.seq span{font-family:var(--f-hw);font-size:9px;letter-spacing:.18em;text-transform:uppercase}
.seq b{font-size:22px;line-height:1}
.seq:disabled{background:#2a2730;color:#8c8496;box-shadow:0 4px 0 #17151b;cursor:not-allowed}
.seq.armed{background:#ff4b4b;box-shadow:0 4px 0 #7d1d27}
.fine{margin:0;padding-left:16px;display:grid;gap:5px;font-size:13px;color:#cfc4b2;max-width:62ch}
.small{font-size:13px;color:#cfc4b2;margin:0}
.ghostbtn{justify-self:start;border:1px solid #3a3642;border-radius:4px;background:#1b1920;padding:8px 12px;font-family:var(--f-hw);font-size:9px;letter-spacing:.14em;text-transform:uppercase}
.ghostbtn.armed{border-color:var(--rec);color:var(--rec)}

.page.legal{background:#f6f1e6;color:#211b14}
.lg-title{font-family:var(--f-hw);font-size:14px;letter-spacing:.14em;text-transform:uppercase;margin:0;line-height:1.3}
.lg-date{font-size:12px;color:#6f6557;margin-top:4px}
.lg-body{margin-top:12px;font-size:15px;line-height:1.5;max-width:64ch}
.lg-body h3{font-family:var(--f-hw);font-size:10px;letter-spacing:.18em;text-transform:uppercase;margin:18px 0 6px;color:#4a4034}
.lg-body p{margin:0 0 8px}
.lg-body ul{margin:0;padding-left:18px;display:grid;gap:6px}
.lg-body .lg-lede{font-size:16px;font-weight:600;margin-bottom:4px}
.lg-body a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.lg-swap{margin-top:18px;padding-top:12px;border-top:1px solid rgb(33 27 20 / .2)}
.lg-swap button,.linkbtn{border:0;background:none;padding:6px 0;font:inherit;font-weight:700;color:inherit;text-decoration:underline;text-underline-offset:2px}
.boxlinks{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;color:#cfc4b2}

/* the first-night tour: sticky notes from the video store, a spotlight and a marker arrow */
.tut-svg{position:fixed;left:0;top:0;z-index:15;pointer-events:none;overflow:visible}
.tut-dim{fill:rgb(6 3 10 / .64);fill-rule:evenodd}
.tut-rings path{fill:none;stroke:#ffe36e;stroke-width:2;stroke-dasharray:7 5;animation:tut-march 1s linear infinite}
@keyframes tut-march{to{stroke-dashoffset:-12}}
.tut-arrow{fill:none;stroke:#ffe36e;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.tut-arrow-bg{fill:none;stroke:rgb(18 10 4 / .7);stroke-width:6.5;stroke-linecap:round;stroke-linejoin:round}
.tut-note{position:fixed;left:0;top:0;z-index:16;width:min(252px, calc(100vw - 24px));padding:15px 14px 12px;background:linear-gradient(rgb(255 255 255 / .38), transparent 34%),#ffe36e;color:#2a2010;font-family:var(--f-pen);font-weight:700;font-size:20px;line-height:1.12;box-shadow:0 10px 22px rgb(0 0 0 / .5),0 1px 1px rgb(0 0 0 / .2);-webkit-user-select:none;user-select:none}
.tut-note.slap{animation:tut-slap .38s cubic-bezier(.2,1.5,.4,1)}
@keyframes tut-slap{from{scale:1.18;opacity:0}}
.tut-tape{position:absolute;left:50%;top:-10px;width:66px;height:19px;margin-left:-33px;background:linear-gradient(rgb(255 255 255 / .3),transparent 50%),var(--tape);opacity:.92;transform:rotate(-4deg);clip-path:polygon(0 10%,4% 0,9% 8%,14% 0,100% 6%,96% 40%,100% 70%,97% 100%,6% 92%,0 100%,3% 60%)}
.tut-top{display:flex;justify-content:space-between;align-items:center;margin:-6px -6px 2px 0;font-family:var(--f-pen);font-weight:500;font-size:16px;color:#6a5520}
.tut-skip{border:0;background:none;padding:6px 6px;font-family:var(--f-pen);font-weight:700;font-size:17px;line-height:1;color:#5a4818;text-decoration:underline;text-underline-offset:3px}
.tut-head{margin:0 0 4px;font-size:25px;line-height:1;font-family:var(--f-pen);font-weight:700;color:#2a1608}
.tut-text{margin:0}
.tut-prog{margin-top:6px;font-family:var(--f-pen);font-weight:700;font-size:19px;line-height:1.15;color:#a3151d}
.tut-prog .bx{display:inline-block;width:15px;height:15px;margin:0 3px -2px 0;border:2px solid #2a2010;border-radius:3px 2px 4px 2px;vertical-align:baseline}
.tut-prog .bx:nth-child(odd){transform:rotate(-5deg)}.tut-prog .bx:nth-child(even){transform:rotate(4deg)}
.tut-prog .bx.on{background:radial-gradient(circle at 40% 40%,#e0323d,#a3151d 70%);border-color:#5a0b10}
.tut-next{display:block;margin:10px 0 0 auto;border:2.5px solid #2a2010;border-radius:14px 6px 12px 7px;padding:6px 14px 5px;background:rgb(255 255 255 / .28);color:#2a1608;font-family:var(--f-pen);font-weight:700;font-size:21px;line-height:1;transform:rotate(-2deg);box-shadow:2px 2px 0 rgb(42 32 16 / .35)}
.tut-next:active{transform:rotate(-2deg) translate(1px,1px);box-shadow:none}
.tut-sign{margin-top:6px;text-align:right;font-family:var(--f-pen);font-weight:500;font-size:18px;color:#4d3d14}
@media (max-width:360px),(max-height:620px){
  .tut-note{width:min(232px, calc(100vw - 20px));padding:13px 12px 10px;font-size:18px;line-height:1.1}
  .tut-head{font-size:22px}.tut-next{margin-top:8px}.tut-prog{font-size:17px}
}
.key.rec.tut-pulse{animation:tut-pulse 1s ease-in-out infinite}
@keyframes tut-pulse{50%{box-shadow:0 6px 0 #565963,0 0 0 3px #ffe36e,0 0 22px 6px rgb(255 227 110 / .65)}}

/* modal: the paper and the title card */
.modal{position:fixed;inset:0;z-index:30;display:grid;place-items:center;overflow-y:auto;background:rgb(6 4 9 / .82);padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px));padding-block:calc(16px + env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-bottom, 0px))}
.paper{width:min(400px,100%);display:grid;gap:8px;background:var(--paper);color:var(--paper-ink);padding:16px 16px 14px;border-radius:2px;transform:rotate(-1deg);box-shadow:0 18px 50px rgb(0 0 0 / .6)}
.masthead{font-family:var(--f-display);font-size:34px;line-height:.9;text-align:center;text-wrap:balance}
.dateline{display:flex;justify-content:space-between;gap:8px;border-block:2px solid var(--paper-ink);padding-block:3px;font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.headline{margin:2px 0 0;font-size:26px;line-height:1;font-weight:700;text-transform:uppercase;text-wrap:balance}
.paper p{margin:0;font-size:14px;line-height:1.45}
.haul{font-weight:700;font-size:22px!important}
.paper-btn{margin-top:6px;border:0;border-radius:3px;padding:12px;background:var(--paper-ink);color:var(--paper);font-family:var(--f-hw);font-size:10px;letter-spacing:.18em;text-transform:uppercase}
.titlecard{width:min(420px,100%);display:grid;gap:6px;text-align:center;padding:26px 16px 18px;background:#050407;border:1px solid #2a2730;border-radius:6px}
.tc-film{font-family:var(--f-logo);font-size:46px;line-height:.9;text-wrap:balance}
.tc-logo{display:block;width:100%;height:clamp(84px, 30vw, 128px)}
.tc-part{font-family:var(--f-hw);font-size:40px;line-height:1;color:#ff9b2f;letter-spacing:.08em}
.tc-sub{font-size:15px;letter-spacing:.26em;text-transform:uppercase}
.titlecard p{margin:6px auto 6px;max-width:34ch;color:var(--dim);font-size:14px}
.tc-film,.tc-logo,.tc-part,.tc-sub{animation:tc-in .9s ease-out both}
.tc-part{animation-delay:.35s}.tc-sub{animation-delay:.7s}
@keyframes tc-in{from{opacity:0;letter-spacing:.6em;filter:blur(2px)}}

@media (max-height:680px){
  #app{gap:6px}
  .foot{font-size:10.5px;margin-top:-4px}.foot span,.foot button{padding-block:3px}
  .wall{height:48px}.win{height:40px;width:50px}.poster{height:46px}.trophies{height:40px;width:80px}
  .wall{grid-template-columns:50px minmax(0,1fr) 80px}
  .vfd{height:70px}.key{height:46px}.pre{height:32px}
  .obj canvas{width:60px;height:40px}
}
@media (max-width:430px){.tv-model{display:none}}
@media (max-height:620px){.foot{font-size:10px;margin-top:-5px}.foot span,.foot button{padding-block:2px}}
@media (orientation:landscape) and (max-height:560px){
  #app{max-width:980px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(286px,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;column-gap:14px;row-gap:6px;padding-block:8px}
  .wall{grid-column:2;grid-row:1}
  .tv{grid-column:1;grid-row:1 / -1;min-height:0}
  .vcr{grid-column:2;grid-row:2;align-self:center}
  .table{grid-column:2;grid-row:3}
  .foot{grid-column:2;grid-row:4;margin-top:-2px}
}
@media (orientation:landscape) and (max-height:430px){
  .vcr{gap:6px;padding:6px 6px 10px}
  .vfd{height:62px}.key{height:42px}.pre{height:30px}
  .table{padding:6px 8px 4px}.obj canvas{width:54px;height:36px}
}
@media (orientation:landscape) and (max-height:350px){
  .wall{display:none}
  .vcr{grid-row:1 / 3}
}
@media (prefers-reduced-motion:reduce){
  .cab.shake,.key.nudge,.tape.peel,.page,.stamp,.tc-film,.tc-logo,.tc-part,.tc-sub,.tut-note.slap,.tut-rings path,.key.rec.tut-pulse{animation:none}
  .pre.avail i{animation:none}
}