@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Mono:wght@400;700&family=Kalam:wght@400;700&family=Anton&display=swap');
:root{--cream:#f5ecd8;--gold:#f3bf65;--ink:#29271e;--muted:#c6c0ab;--mono:'Space Mono',monospace;--sans:'DM Sans',Arial,sans-serif}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#30271e;color:var(--cream);font-family:var(--sans)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:active,.primary:active{transform:scale(.97)}button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:5px}button{transition:background .18s,transform .15s}a{color:inherit;text-decoration:none}#world,#world canvas,#vignette,#grain{position:absolute;inset:0;width:100%;height:100%}#world canvas{display:block;touch-action:none}#vignette{pointer-events:none;background:linear-gradient(0deg,rgba(21,28,32,.55),transparent 25%,transparent 73%,rgba(21,28,32,.24)),radial-gradient(ellipse at 60% 45%,transparent 50%,rgba(23,32,39,.16));z-index:2}#grain{z-index:3;pointer-events:none;opacity:.045;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.65' filter='url(%23n)'/%3E%3C/svg%3E")}header{position:absolute;top:0;left:0;width:100%;z-index:6;display:flex;align-items:center;justify-content:space-between;padding:31px 38px;pointer-events:none}.wordmark{display:flex;gap:12px;align-items:center;line-height:.9;font-weight:700;letter-spacing:-1px;font-size:25px;pointer-events:auto}.mark{font-size:37px;font-weight:400;transform:rotate(-7deg);color:var(--gold)}.year{color:var(--gold);margin-left:5px}.wordmark small{display:block;font-family:var(--mono);font-size:7px;letter-spacing:1.7px;margin-top:9px;font-weight:400}.topright{display:flex;align-items:center;gap:9px;pointer-events:auto}.date{font:10px var(--mono);letter-spacing:.6px;margin-right:20px}.date i,.live-dot,.tiny-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#edbd64;margin-right:8px}.divider{margin:0 12px;opacity:.5}.iconbutton{height:36px;width:36px;display:grid;place-items:center;background:#30291c55;border:1px solid #efdfbd44;border-radius:50%;font-family:var(--mono);font-size:17px;backdrop-filter:blur(8px)}.iconbutton:hover{background:#30291cb0}.iconbutton svg{height:17px;width:17px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}#intro{position:absolute;left:5.8%;bottom:17%;z-index:5;max-width:540px;text-shadow:0 2px 30px #27190a66}#intro:before{content:'';position:absolute;inset:-70px -100px -40px -100px;background:radial-gradient(ellipse at 30% 60%,#1d190e6b,transparent 70%);z-index:-1;pointer-events:none}.eyebrow{font:9px var(--mono);letter-spacing:2px;line-height:1.8;display:block;color:var(--gold)}.line{width:28px;height:1px;background:var(--gold);display:inline-block;vertical-align:middle;margin-right:10px}h1{font-size:clamp(48px,5.7vw,86px);line-height:1.02;letter-spacing:-4px;font-weight:500;margin:22px 0 20px}#intro p{font-size:14px;line-height:1.8;color:#e5ddca;margin-bottom:27px}.primary{display:inline-flex;align-items:center;justify-content:space-between;gap:35px;background:var(--gold);color:var(--ink);border:1px solid var(--gold);border-radius:3px;font-size:12px;font-weight:700;padding:17px 22px;min-height:48px;cursor:pointer;transition:background .18s,transform .15s;text-shadow:none}.primary:hover{background:#ffd28a;border-color:#ffd28a}.primary>span{font-size:20px;font-weight:400}.introhint{font:8px var(--mono);letter-spacing:1px;margin-top:23px;color:#c5bfac}.tiny-dot{width:3px;height:3px;vertical-align:middle}#introBadge{position:absolute;bottom:17%;right:5%;z-index:4;transform:rotate(7deg);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;width:118px;height:132px;border:1px solid #e4d2a779;color:#e3d4b7;border-radius:60px 60px 8px 8px;background:#30271925;backdrop-filter:blur(3px);padding:10px;box-shadow:0 1px 8px #0001}.badgecircle{font-size:33px;width:100%;text-align:center;line-height:1}#introBadge>div:nth-child(2){font-size:12px;line-height:1.2;text-align:center;letter-spacing:1px}#introBadge>span{font:7px var(--mono);letter-spacing:2px;width:100%;text-align:center}footer{position:absolute;z-index:6;bottom:0;left:0;right:0;margin:0 38px;min-height:70px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #ead6ac2a;font:9px var(--mono);letter-spacing:.8px;pointer-events:none;color:#dbd2bd}.controls{display:flex;gap:24px;align-items:center;font-family:var(--sans);letter-spacing:0;font-size:10px;color:#ddd7c8}.controls>span{display:flex;align-items:center;gap:5px}.controls svg{width:12px;height:17px;fill:none;stroke:#ddd7c8;stroke-width:1.1;margin-right:5px}kbd{font:9px var(--mono);display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:21px;padding:0 4px;border:1px solid #e6ddbd55;border-radius:3px;background:#3b35244d;margin-right:1px}.footerend{font-size:8px;opacity:.7}#crosshair{position:absolute;z-index:4;top:50%;left:50%;width:17px;height:17px;transform:translate(-50%,-50%);pointer-events:none;display:grid;place-items:center}#crosshair i{background:#fff8dc;border:1px solid #45342580;border-radius:50%;width:4px;height:4px;box-shadow:0 0 4px #33261770}#crosshair.active{border:1px solid var(--gold);border-radius:50%;width:24px;height:24px}#crosshair.active i{background:var(--gold)}#interaction{position:absolute;z-index:6;left:50%;bottom:17%;transform:translateX(-50%);display:flex;align-items:center;gap:13px;padding:13px 18px;background:#25251de6;border:1px solid #e7d8b353;border-radius:5px;backdrop-filter:blur(12px);text-align:left;min-width:240px;box-shadow:0 5px 20px #0002}#interaction kbd{width:29px;height:31px;background:var(--gold);color:var(--ink);border:0;font-size:12px}#interaction strong{font-size:12px;font-weight:500;display:block}#interaction small{font:8px var(--mono);color:#b6b5a4;display:block;margin-top:5px}.promptarrow{margin-left:auto;color:var(--gold)}#tourHint{position:absolute;z-index:4;bottom:20%;width:100%;text-align:center;font-size:11px;color:#e2d9c4;pointer-events:none}#tourHint span{color:var(--gold);font-size:18px;margin:0 3px}#discovered{position:absolute;right:38px;top:100px;z-index:5}#loading{position:absolute;inset:0;z-index:15;background:#30271e;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;font:10px var(--mono);letter-spacing:2px}.loader{width:30px;height:30px;border:2px solid #af997a33;border-top-color:var(--gold);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.hidden{display:none!important}.modalback{position:absolute;inset:0;z-index:20;background:#171b16a1;backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:30px;overflow:auto}.dialog{position:relative;background:#ede6d4;color:#36382c;border-radius:6px;box-shadow:0 24px 90px #090b0860;padding:40px;max-height:90dvh;overflow:auto}.dialog.small{width:440px}.dialog .eyebrow{color:#87724b}.dialog h2{font-size:34px;line-height:1.1;letter-spacing:-1.3px;font-weight:500;margin:18px 0 16px}.dialog p{font-size:13px;line-height:1.75;color:#737365}.dialog kbd{background:#d9d3c0;border-color:#b2b2a2;color:#464a38}.dialog .primary{margin-top:14px}.close{position:absolute;right:15px;top:15px;background:transparent;border:1px solid #898c6f55;border-radius:50%;width:29px;height:29px;font-size:22px;line-height:20px;z-index:2}.close:hover{background:#292e1c15}.textbutton{border:0;background:transparent;font-size:11px;text-decoration:underline;text-underline-offset:4px;padding:12px}.small>.textbutton{display:block;margin-top:12px;padding-left:0}.pausecontrols{display:flex;flex-wrap:wrap;gap:14px 20px;border-top:1px solid #c9c6b8;margin-top:24px;padding-top:23px;font-size:10px}.fineprint{font:9px/1.8 var(--mono)!important;color:#858676!important;display:block}.helpitems{margin-top:25px}.helpitems b{font:9px var(--mono);letter-spacing:1px}.helpitems>div{border-top:1px solid #cccbba;padding-top:16px;margin-top:16px}.posterDialog{display:grid;grid-template-columns:240px 310px;gap:35px;padding:30px}.posterDialog img{width:240px;height:340px;object-fit:cover;box-shadow:0 7px 15px #5b513433;transform:rotate(-2deg);align-self:center}.posterInfo{padding:18px 0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.posterInfo .fineprint{margin-top:14px;font-size:8px!important}.collectnote{font:8px var(--mono);letter-spacing:.8px;color:#8c8b75;margin-top:30px}.posterInfo .primary{font-size:10px;gap:15px;padding:12px 17px}.arcadeDialog{width:auto;padding:26px 30px 22px}.arcadeheading h2{margin:8px 0 16px}.gameFrame{position:relative;padding:7px;border:1px solid #62694e;background:#30372b;border-radius:6px}.gameFrame iframe{display:block;border:0;background:#10163F;height:max(320px,min(calc(90dvh - 190px),680px));aspect-ratio:5/8;width:auto;max-width:100%}.arcadebottom{display:flex;justify-content:space-between;align-items:center;font:10px var(--mono);margin-top:12px}.arcadebottom a{font:10px var(--sans);text-decoration:underline;text-underline-offset:4px}.arcadebottom b{font-weight:400;margin-left:8px}#basketUI{position:absolute;bottom:13%;left:50%;transform:translateX(-50%);z-index:8;background:#25251de6;border:1px solid #e1d5b144;backdrop-filter:blur(12px);border-radius:5px;padding:24px 30px;width:min(480px,94vw);text-align:center}#basketUI h2{font-weight:500;font-size:28px;letter-spacing:-.7px;margin:8px 0}#basketUI p{font-size:11px;color:#c0beac}#powerMeter{height:12px;border-radius:6px;background:#e1a66250;position:relative;overflow:visible;margin:21px 3px}.sweetspot{position:absolute;left:41%;width:18%;height:100%;background:#b7c885}#meterNeedle{position:absolute;top:-5px;width:3px;height:22px;background:#fff7de;left:0;border-radius:2px}.basketrow{display:flex;align-items:center;justify-content:space-between;gap:10px}.basketrow .primary{padding:8px 13px;min-height:38px;font-size:10px;gap:10px}.basketrow kbd{height:18px;font-size:7px;border-color:#3334}.basketrow>span{font:8px var(--mono);white-space:nowrap}.basketrow b{font-size:17px;color:var(--gold)}.basketrow .textbutton{font-size:9px;padding:8px}.basketrow .textbutton kbd{display:none}#toast{position:absolute;z-index:40;top:100px;left:50%;transform:translateX(-50%);padding:14px 20px;background:#f3bd62;color:#3b3220;font:11px var(--mono);box-shadow:0 5px 25px #0003;border-radius:3px;max-width:90vw;text-align:center}#mobileControls{position:absolute;inset:0;z-index:7;pointer-events:none}#joystick{position:absolute;left:30px;bottom:100px;border:1px solid #f7ecd264;border-radius:50%;width:100px;height:100px;background:#302c2529;pointer-events:auto;touch-action:none}#joystick div{position:absolute;left:32px;top:32px;width:36px;height:36px;border:1px solid #f7ecd28c;background:#f7ecd24d;border-radius:50%}.roundaction{position:absolute;bottom:125px;right:35px;border:1px solid #f3bf65;border-radius:50%;width:52px;height:52px;background:#25251d9c;color:var(--gold);pointer-events:auto}#mobileControls>span{position:absolute;bottom:91px;right:29px;font:8px var(--mono);opacity:.7}@media(max-width:800px){header{padding:22px}.date{display:none}footer{margin:0 22px;min-height:60px}.footerend{display:none}.controls{gap:12px}.controls>span:last-child{display:none}#intro{left:7%;bottom:20%}h1{font-size:62px}#introBadge{right:7%;bottom:21%;width:100px;height:115px}.posterDialog{grid-template-columns:160px 230px;gap:23px;padding:25px}.posterDialog img{width:160px;height:240px}.dialog h2{font-size:29px}#discovered{right:22px;top:85px}.footerleft{font-size:8px}.topright{gap:7px}}@media(max-width:560px){.wordmark{font-size:21px;gap:8px}.mark{font-size:30px}.wordmark small{font-size:6px}.iconbutton{width:31px;height:31px}#fullscreen{display:none}#introBadge{display:none}#intro{bottom:22%;left:7%}h1{font-size:58px;letter-spacing:-3px}#intro p{font-size:12px}.controls{display:none}.footerleft{font-size:8px}.footerend{display:block;font-size:7px}.modalback{padding:15px}.dialog{padding:28px}.posterDialog{display:block;width:340px;padding:27px}.posterDialog img{display:block;margin:0 auto;width:145px;height:205px}.posterInfo{padding:24px 0 0}.posterInfo h2{margin:10px 0}.posterInfo p{font-size:12px;margin:6px 0}.collectnote{margin-top:15px}.arcadeDialog{padding:25px 16px}.arcadebottom{font-size:8px;gap:5px}.arcadebottom a{font-size:9px}.arcadeheading h2{font-size:28px}#tourHint{font-size:9px;bottom:27%;padding:0 25px}#interaction{bottom:29%;min-width:220px}#basketUI{bottom:15%;padding:18px}.basketrow{gap:6px}#basketUI .eyebrow{font-size:8px}.introhint{font-size:7px;letter-spacing:.5px}}.posterInfo .textbutton{padding:14px 0 0;font-size:11px}@media(max-height:500px){.posterDialog{display:grid;grid-template-columns:150px 260px;gap:24px;width:auto;padding:22px}.posterDialog img{width:150px;height:212px;margin:0}.posterInfo{padding:0}.posterInfo h2{font-size:24px;margin:8px 0}.posterInfo p{margin:4px 0}.collectnote{margin-top:12px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.credits{font:8px/1.7 var(--mono)!important;color:#9a9a8a!important;margin:14px 0 0}.credits a{text-decoration:underline;text-underline-offset:2px}
/* Flappy A-Man on phones: near-fullscreen dialog, game fills the space */
@media(max-width:560px),(max-height:500px){#arcadeModal{padding:0}.arcadeDialog{width:100%;height:100%;max-height:none;border-radius:0;display:flex;flex-direction:column;padding:calc(12px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left))}.arcadeheading h2{font-size:24px;margin:2px 0 10px}.gameFrame{flex:1;min-height:0;padding:4px}.gameFrame iframe{width:100%;height:100%;aspect-ratio:auto}.arcadeDialog .close{top:calc(10px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right));width:36px;height:36px;background:#ede6d4}.arcadebottom{margin-top:8px;font-size:10px}.arcadebottom a{font-size:11px;padding:4px 0}}
@media(max-height:500px){.arcadeheading{display:none}.arcadeDialog .close{top:calc(14px + env(safe-area-inset-top));right:calc(16px + env(safe-area-inset-right))}}
/* theme 5 (Vintage '97): disposable-camera date stamp, added by main.js; sits above the footer (desktop) / below the E button hint (touch) */
#filmDate{position:absolute;z-index:4;right:44px;bottom:84px;pointer-events:none;user-select:none;font:bold 17px/1 'Courier New',ui-monospace,monospace;letter-spacing:2px;color:#ff9a3c;opacity:.88;transform:skewX(-6deg);text-shadow:0 0 1px #ffb060,0 0 6px #ff6a1acc,0 0 14px #ff5a1060}
#filmDate.touch{right:24px;bottom:calc(66px + env(safe-area-inset-bottom));font-size:13px;letter-spacing:1.5px}
@media(max-width:800px){#filmDate{right:26px;bottom:72px}}
/* Computer mode (#pc, main.js "Computer mode"): JS sets #pcGlass rect (the projected CRT glass), #pcSlot size and --u/--r/--tb/--tt/--m; data-crt = win95 | arcade; .full = phone portrait full-screen, .tight = short landscape */
#pc{position:fixed;inset:0;z-index:5;--u:1px;--r:24px;--tb:28px;--tt:20px;--m:12px;transition:background .4s}
#pcBack{position:absolute;inset:0;cursor:zoom-out}
#pcGlass{position:absolute;overflow:hidden;border-radius:var(--r);background:#030504;box-shadow:0 0 calc(var(--u)*36) rgba(150,215,255,.2),0 0 0 1px #000;isolation:isolate}
#pcGlass.anim{transition:left .45s cubic-bezier(.4,0,.2,1),top .45s cubic-bezier(.4,0,.2,1),width .45s cubic-bezier(.4,0,.2,1),height .45s cubic-bezier(.4,0,.2,1),border-radius .45s,box-shadow .45s}
#pc.moving #pcGlass,#pc.moving #pcUi{visibility:hidden}
#pcInner{position:absolute;inset:0;display:flex;flex-direction:column;transform:scale(0,.004)}
#pc.on #pcInner{animation:pcOn .85s cubic-bezier(.25,.7,.25,1) both}
#pc.on .pcFlash{animation:pcFlashOn .95s ease-out both}
#pc.off #pcInner{animation:pcOff .42s ease-in both}
#pc.off .pcFlash{animation:pcFlashOff .42s ease-in both}
@keyframes pcOn{0%{transform:scale(0,.004);filter:brightness(3)}30%{transform:scale(1,.004);filter:brightness(3)}62%{transform:none;filter:brightness(1.7)}100%{transform:none;filter:none}}
@keyframes pcFlashOn{0%{opacity:1;transform:scale(0,.004)}30%{opacity:1;transform:scale(1,.004)}62%{opacity:.45;transform:none}100%{opacity:0;transform:none}}
@keyframes pcOff{0%{transform:none;filter:none}45%{transform:scale(1,.005);filter:brightness(4)}80%{transform:scale(.012,.005)}100%{transform:scale(0,0)}}
@keyframes pcFlashOff{0%{opacity:0;transform:none}45%{opacity:1;transform:scale(1,.005)}80%{opacity:1;transform:scale(.012,.005)}100%{opacity:0;transform:scale(0,0)}}
.pcFlash{position:absolute;inset:0;pointer-events:none;background:#eef8ff;opacity:0;box-shadow:0 0 18px 6px #bfe6ff}
.pcFx{position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px),radial-gradient(ellipse 72% 68% at 50% 50%,transparent 64%,rgba(0,0,0,.4) 100%)/* convex glass: darker toward the edges */,radial-gradient(ellipse 58% 36% at 30% 12%,rgba(255,255,255,.08),transparent 72%)/* curvature highlight */,linear-gradient(180deg,rgba(255,255,255,.03),transparent 25%,transparent 78%,rgba(0,0,0,.14));box-shadow:inset 0 0 calc(var(--u)*44) rgba(0,0,0,.5),inset 0 0 calc(var(--u)*12) rgba(0,0,0,.7),inset 0 0 0 1px #000}
.pcDesk{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center}
#pcSlot{position:relative;background:#10163F;flex:none}
#pcSlot iframe{display:block;width:100%;height:100%;border:0}
#pcGlass:focus{outline:none}
[data-crt=win95] #pcSlot{border:2px solid;border-color:#808080 #fff #fff #808080}/* Win95 client inset (sunken), inner dark line on the iframe */
[data-crt=win95] #pcSlot iframe{border:1px solid;border-color:#0a0a0a #dfdfdf #dfdfdf #0a0a0a}
.pcBarIco{width:calc(var(--tt) - 6px);height:calc(var(--tt) - 6px);flex:none;margin-right:3px;shape-rendering:crispEdges}
.pcBar i svg,.pcX svg{width:calc(var(--tt)*.42);height:calc(var(--tt)*.38);fill:#000;shape-rendering:crispEdges;margin-top:1px}
.pcEsc{transition:opacity .2s}
#pc.gameFocus .pcEsc{display:none}
.pcWin{display:flex;flex-direction:column;flex:none;background:#c3c3c3;padding:4px;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #dfdfdf,inset -2px -2px #808080,inset 2px 2px #fff,calc(var(--u)*3) calc(var(--u)*4) 0 #00000040/* raised Win95 frame: light top/left, dark bottom/right, plus a hard drop shadow */}
[data-crt=win95] .pcDesk{background:url(assets/pc/wallpaper.png) 50% 50%/calc(var(--u)*240) auto repeat,radial-gradient(ellipse at 50% 45%,#357f7b,#2a6b68)/* tiled Jonnie's Bodega oval (white at ~13% alpha) on a softer, desaturated teal */}
.pcBar{height:var(--tt);flex:none;display:flex;align-items:center;gap:2px;padding:0 2px 0 3px;margin-bottom:2px;background:linear-gradient(90deg,#000080,#1084d0);color:#fff;font:bold calc(var(--tt)*.52)/1 Tahoma,Verdana,Arial,sans-serif}
.pcBar span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.3px}
.pcBar i,.pcX{flex:none;width:calc(var(--tt) - 3px);height:calc(var(--tt) - 5px);display:grid;place-items:center;padding:0;border:0;border-radius:0;background:#c3c3c3;color:#000;font:bold calc(var(--tt)*.55)/1 Arial,sans-serif;font-style:normal;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px #808080,inset 2px 2px #dfdfdf}
.pcX:active{box-shadow:inset 1px 1px #0a0a0a,inset -1px -1px #fff,inset 2px 2px #808080}
.pcX{margin-left:2px;cursor:pointer}
.pcIcons{position:absolute;left:var(--m);top:var(--m);display:flex;flex-direction:column;gap:calc(var(--u)*16)}
#pc.noicons .pcIcons{display:none}
.pcIco{display:flex;flex-direction:column;align-items:center;width:calc(var(--u)*70);color:#fff;font:calc(var(--u)*11)/1.2 Tahoma,Verdana,Arial,sans-serif;text-align:center;text-decoration:none;cursor:default}
a.pcIco{cursor:pointer}
.pcIco svg{width:calc(var(--u)*34);height:calc(var(--u)*34);shape-rendering:crispEdges;margin-bottom:calc(var(--u)*4)}
.pcIco span{padding:1px 2px}
a.pcIco:hover span,a.pcIco:focus span{background:#000080;outline:1px dotted #ff0}
.pcTask{height:var(--tb);flex:none;display:flex;align-items:center;gap:4px;padding:2px calc(var(--r)*.55);background:#c3c3c3;box-shadow:inset 0 1px #dfdfdf,inset 0 2px #fff;color:#000;font:calc(var(--tb)*.42)/1 Tahoma,Verdana,Arial,sans-serif}
.pcStart,.pcTaskBtn,.pcTray{height:calc(var(--tb) - 6px);display:flex;align-items:center;gap:4px;padding:0 6px;white-space:nowrap}
.pcStart{font-weight:bold;box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px #808080}
.pcStart b{background:#efb94f;color:#31241d;font:bold calc(var(--tb)*.32)/1 monospace;padding:2px}
.pcTaskBtn{min-width:0;overflow:hidden;box-shadow:inset 1px 1px #0a0a0a,inset -1px -1px #fff,inset 2px 2px #808080;background:repeating-conic-gradient(#c3c3c3 0 25%,#dadada 0 50%) 0 0/2px 2px}
.pcTray{margin-left:auto;box-shadow:inset 1px 1px #808080,inset -1px -1px #fff}
.pcSide{display:none}
[data-crt=arcade] .pcDesk{background:radial-gradient(ellipse at 50% 40%,#1b2466,#080b22 72%)}
[data-crt=arcade] .pcIcons,[data-crt=arcade] .pcTask,[data-crt=arcade] .pcBar{display:none}
[data-crt=arcade] .pcWin{background:none;padding:calc(var(--u)*3);box-shadow:0 0 0 calc(var(--u)*2) #ef568f,0 0 calc(var(--u)*18) #ef568f80}
[data-crt=arcade] .pcSide{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*14);padding:0 calc(var(--u)*6);color:#f5d386;font:bold calc(var(--u)*12)/1.15 var(--mono);letter-spacing:1px;text-align:center}
#pc.noicons .pcSide{display:none}
.pcLogo{font-size:calc(var(--u)*19);color:#fff;text-shadow:calc(var(--u)*2) calc(var(--u)*2) 0 #ef568f}
.pcTitle{font-size:calc(var(--u)*30);color:#ef568f;text-shadow:calc(var(--u)*2) calc(var(--u)*2) 0 #10163f,0 0 calc(var(--u)*12) #ef568f99}
.pcSide i{font-style:normal;color:#8fdcbb;font-size:calc(var(--u)*10)}
.pcR b{font-size:calc(var(--u)*24);color:#fff}
.pcBlink{color:#ef568f;animation:pcBlink 1.1s steps(1) infinite}
@keyframes pcBlink{50%{opacity:0}}
#pcUi{position:absolute;left:0;right:0;bottom:calc(12px + env(safe-area-inset-bottom));display:flex;justify-content:center;align-items:center;gap:24px;pointer-events:none}
#pcUi>*{pointer-events:auto}
.pcLinks{display:flex;gap:22px}
.pcLinks a{color:var(--cream);font:11px var(--sans);text-decoration:underline;text-underline-offset:4px;opacity:.85}
.pcCloseBtn{height:34px;padding:0 15px;border-radius:17px;border:1px solid #f5ecd855;background:#1b1a14d9;color:var(--cream);font:10px var(--mono);letter-spacing:.8px}
#pc.full .pcLinks,#pc.tight .pcLinks,#pc.full .pcCloseBtn span,#pc.tight .pcCloseBtn span{display:none}
#pc.full .pcCloseBtn,#pc.tight .pcCloseBtn{position:fixed;top:calc(10px + env(safe-area-inset-top));right:calc(10px + env(safe-area-inset-right));width:44px;height:44px;padding:0;border-radius:50%;font-size:24px;line-height:1;z-index:2}
#pc.full .pcCloseBtn{top:calc(4px + env(safe-area-inset-top));right:calc(4px + env(safe-area-inset-right));width:40px;height:40px;background:#2a2620;border-color:#d9cfb4}
#pc.full{z-index:7;background:#0d0c0a}
#pc.full #pcGlass{box-shadow:0 0 0 10px #d9cfb4,0 0 0 11px #00000080,0 0 30px rgba(150,215,255,.2)}
body.pcMode footer,body.pcMode #discovered,body.pcMode #filmDate{visibility:hidden}
body.pcTight header{visibility:hidden}
#pcFade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none}
#pcFade.go{animation:pcBlinkFade .36s ease-in-out both}
@keyframes pcBlinkFade{45%,55%{opacity:1}}
#pcSafe{position:absolute;visibility:hidden;pointer-events:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
@media(prefers-reduced-motion:reduce){#pc.on #pcInner{animation:pcFadeIn .25s both}#pc.off #pcInner{animation:pcFadeIn .2s reverse both}#pc.on .pcFlash,#pc.off .pcFlash{animation:none}#pcGlass.anim{transition:none}}
@keyframes pcFadeIn{0%{opacity:0;transform:none}100%{opacity:1;transform:none}}
/* Discoveries: exercise book (#discovered, main.js "Discovery book"). Closed book .bkm; the lined page .bk opens on hover / keyboard focus (desktop) or .open (touch: 3s on a find, tap toggles) */
#discovered{--hand:'Kalam','Comic Sans MS',cursive}
#discovered:not(.touch):hover:after{content:'';position:absolute;left:-40px;right:0;top:100%;height:12px}
.bkm{position:relative;display:grid;place-items:center;width:50px;height:60px;padding:0;border:0;border-radius:2px 4px 4px 2px;background:#5d7f8f;box-shadow:inset 4px 0 0 #49656f,0 4px 10px #0007}
.bkm .lbl{white-space:nowrap;background:#efe7d1;color:#2f4a8a;font:700 13px/1 var(--hand);padding:5px 4px 3px;border-radius:2px;margin-left:3px}
.bkm .nice{position:absolute;right:-9px;bottom:-9px;font:700 10px/1 var(--hand);color:#c8402e;border:1.5px solid #c8402e;border-radius:50%;padding:6px 3px 4px;transform:rotate(-12deg);background:#efe7d1e6}
.bkm.buzz{animation:bkHop .4s ease-out}
@keyframes bkHop{40%{transform:translateY(-4px) rotate(-3deg)}}
.bk{display:block;visibility:hidden;opacity:0;pointer-events:none;transform-origin:85% 0;transform:perspective(600px) rotateX(-70deg) translateY(-8px) rotate(-1.3deg);transition:opacity .22s ease,transform .32s cubic-bezier(.3,.7,.2,1),visibility 0s .32s;position:absolute;right:0;top:calc(100% + 10px);width:208px;background:#efe7d1;color:#2f4a8a;border-radius:2px;padding:8px 10px 30px 26px;box-shadow:0 1px 0 #d8cdb2,0 7px 18px #0008;font:13px/16px var(--hand)}
/* open: the page unfolds down from under the book (hinged at the top, slight overshoot); close: folds back up and fades. Opacity/transform only, so it stays smooth on phones */#discovered:not(.touch):hover .bk,.bkm:focus-visible+.bk,#discovered.open .bk{visibility:visible;opacity:1;pointer-events:auto;transform:perspective(600px) rotateX(0) translateY(0) rotate(-1.3deg);transition:opacity .18s ease,transform .42s cubic-bezier(.2,1.25,.4,1),visibility 0s}
.bk:before{content:'';position:absolute;left:20px;top:0;bottom:0;width:1px;background:#d08a78}
.bk:after{content:'';position:absolute;right:9px;bottom:5px;width:58px;height:21px;background:url(assets/pc/jb-stamp.png) center/contain no-repeat;opacity:.78;transform:rotate(-4deg);pointer-events:none}
.bk .tape{position:absolute;left:70px;top:-7px;width:52px;height:15px;background:#f1e3b8a6;transform:rotate(-4deg);box-shadow:0 1px 2px #0002}
.bk-h{display:flex;justify-content:space-between;font-weight:700;font-size:14px;line-height:18px;color:#3b3a33;border-bottom:1px solid #c98c7c;padding-bottom:2px;margin-bottom:1px}
.bk-h span{color:#2f4a8a}
.bk ol{list-style:none;margin:0;padding:0;background:repeating-linear-gradient(#0000 0 15px,#a9bccf 15px 16px)}
.bk li{position:relative;display:flex;align-items:center;gap:7px;height:16px;white-space:nowrap}
.bk li:before{content:attr(data-n);position:absolute;left:-17px;font-size:10px;color:#b07a68}
.bk .box{position:relative;width:9px;height:9px;border:1px solid #77736a;flex:none}
.bk .box svg{position:absolute;left:-2px;top:-6px;width:15px;height:15px;overflow:visible}
.bk .box path{fill:none;stroke:#2f4a8a;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20}
.bk li:not(.f) .nm{color:#a39b88;letter-spacing:1px}
.bk .fresh{background:#f6d77a44}
.bk .fresh path{animation:bkDraw .35s ease-out both}
.bk .fresh .nm{animation:bkWrite .7s steps(14) .3s both}
@keyframes bkDraw{from{stroke-dashoffset:20}to{stroke-dashoffset:0}}
@keyframes bkWrite{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.bk .nice{position:absolute;right:76px;bottom:-14px;font:700 17px/1 var(--hand);color:#c8402e;border:2px solid #c8402e;border-radius:50%;padding:9px 8px 6px;transform:rotate(-12deg);background:#efe7d1e6;text-align:center}
.bk .nice small{display:block;font-size:11px}
.slam .nice{animation:bkStamp .4s cubic-bezier(.3,1.6,.6,1) .2s both}
@keyframes bkStamp{from{transform:rotate(-12deg) scale(2);opacity:0}to{transform:rotate(-12deg) scale(1);opacity:1}}
@media(max-height:500px){#discovered.touch .bk{top:0;right:calc(100% + 10px);transform-origin:100% 15%}}
/* Phones (see CLAUDE.md "Mobile"): body.touch is set by main.js on touch devices; nothing here changes desktop except the no-zoom / no-bounce basics */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{position:fixed;inset:0;overscroll-behavior:none;touch-action:none}
.modalback,.dialog{touch-action:pan-y}
body.touch{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.touch .controls,body.touch .pausecontrols,body.touch #pause .fineprint,body.nofs #fullscreen,body.touch .basketrow kbd{display:none}
body.touch .close{width:40px;height:40px;top:10px;right:10px;font-size:24px;line-height:1}
body.touch #joystick{left:calc(30px + env(safe-area-inset-left));bottom:calc(100px + env(safe-area-inset-bottom))}
body.touch .roundaction{right:calc(33px + env(safe-area-inset-right));bottom:calc(122px + env(safe-area-inset-bottom));width:56px;height:56px;font-size:16px}
body.touch #mobileControls>span{right:calc(29px + env(safe-area-inset-right));bottom:calc(91px + env(safe-area-inset-bottom));font-size:9px}
body.touch footer{padding-bottom:env(safe-area-inset-bottom)}
body.touch .basketrow .primary{min-height:46px;padding:0 22px;font-size:12px}
body.touch .basketrow .textbutton{font-size:11px;padding:12px 6px}
/* Play A-Man shortcut (touch only): a small arcade-pink pill under the exercise book */
#playAman{position:absolute;pointer-events:auto;right:calc(22px + env(safe-area-inset-right));top:172px;height:34px;display:flex;align-items:center;gap:6px;padding:0 12px 0 10px;border:1px solid #f5d38699;border-radius:17px;background:#ef568fe6;color:#fff6e4;font:700 11px/1 var(--mono);letter-spacing:1px;box-shadow:2px 2px 0 #10163fcc,0 4px 10px #0005}
#playAman i{font-style:normal;font-size:9px;color:#f5d386}
@media(max-width:800px){header{padding:max(22px,env(safe-area-inset-top)) max(22px,calc(env(safe-area-inset-right) + 10px)) 22px max(22px,calc(env(safe-area-inset-left) + 10px))}#discovered{right:max(22px,calc(env(safe-area-inset-right) + 10px))}#playAman{top:157px;right:max(22px,calc(env(safe-area-inset-right) + 10px))}}
@media(max-width:560px){h1{font-size:min(58px,13.4vw);letter-spacing:-.05em}.wordmark small{font-size:7px}.introhint{font-size:9px}#intro p{font-size:13px}.footerleft{font-size:9px}.footerend{font-size:8px}#interaction small{font-size:9px}#tourHint{font-size:11px}.posterInfo .eyebrow{font-size:9px}.collectnote{font-size:9px}}
/* short landscape (phones on their side): compact header + intro, footer off on touch, controls down in the thumb zone */
@media(max-height:500px){header{padding:12px max(22px,calc(env(safe-area-inset-right) + 10px)) 12px max(22px,calc(env(safe-area-inset-left) + 10px))}#intro{left:max(28px,calc(env(safe-area-inset-left) + 14px));bottom:calc(18px + env(safe-area-inset-bottom));max-width:470px}#intro:before{inset:-40px -80px -20px -80px}#intro h1{font-size:40px;letter-spacing:-2px;margin:10px 0 8px}#intro p{font-size:12px;line-height:1.55;margin:0 0 14px}.introhint,#introBadge{display:none!important}#discovered{top:64px;right:max(22px,calc(env(safe-area-inset-right) + 10px))}#playAman{top:136px}
body.touch footer{display:none}body.touch #joystick{bottom:calc(24px + env(safe-area-inset-bottom))}body.touch .roundaction{bottom:calc(50px + env(safe-area-inset-bottom))}body.touch #mobileControls>span{bottom:calc(114px + env(safe-area-inset-bottom))}#filmDate.touch{bottom:calc(16px + env(safe-area-inset-bottom))}
#basketUI{bottom:calc(8px + env(safe-area-inset-bottom));padding:10px 18px 12px;width:min(440px,70vw)}#basketUI .eyebrow,#basketUI h2{display:none}#basketUI p{margin:0}#powerMeter{margin:12px 3px 14px}}
/* computer mode on a phone in landscape (.full.land): glass fills the screen, taskbar hidden, close button in the corner */
#pc.land .pcTask{display:none}
#pc.land #pcGlass{box-shadow:0 0 0 6px #d9cfb4,0 0 0 7px #00000080}
/* Catalogue reader (#catalog, catalog.js): .in = backdrop + cover lifting (.catLift tilted → flat over ~1s), .ready = page-flip reader + controls shown, .out = fading away. The room render is paused behind it (main.js "Catalogue"). */
#catalog{position:fixed;inset:0;z-index:30;touch-action:none;-webkit-user-select:none;user-select:none;--top:calc(62px + env(safe-area-inset-top));--bot:calc(82px + env(safe-area-inset-bottom))}
.catBack{position:absolute;inset:0;background:#171b16a8;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .5s}
#catalog.in .catBack{opacity:1}
#catalog.out .catBack,#catalog.out .catStage,#catalog.out .catTop,#catalog.out .catBar{opacity:0;transition:opacity .3s}
.catTop{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(12px + env(safe-area-inset-top)) max(18px,calc(env(safe-area-inset-right) + 12px)) 10px max(22px,calc(env(safe-area-inset-left) + 14px))}
.catTop .eyebrow{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.catTop,.catBar{opacity:0;transition:opacity .35s}
#catalog.ready .catTop,#catalog.ready .catBar{opacity:1}
.catBtn{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid #efdfbd55;background:#25251dcc;color:var(--cream);font-size:22px;line-height:1;display:grid;place-items:center;padding:0}
.catBtn:hover{background:#3a3627}
.catBtn:disabled{opacity:.3;cursor:default}
.catStage{position:absolute;left:max(20px,calc(env(safe-area-inset-left) + 12px));right:max(20px,calc(env(safe-area-inset-right) + 12px));top:var(--top);bottom:var(--bot);pointer-events:none}
.catBook{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:auto;opacity:0;transition:opacity .25s;cursor:grab}
.catBook.single{overflow:hidden}
#catalog.ready .catBook{opacity:1}
.catPage{background:#f3efe6;overflow:hidden}
.catPage img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.catLift{position:absolute;opacity:0;transform-origin:50% 100%;transform:perspective(1100px) translateY(40%) rotateX(64deg) rotateZ(-14deg) scale(.42);box-shadow:0 30px 70px #000b;background:#f3efe6;pointer-events:none;transition:transform .95s cubic-bezier(.2,.75,.25,1),opacity .35s}
.catLift img{display:block;width:100%;height:100%;object-fit:cover}
#catalog.in .catLift{opacity:1;transform:perspective(1100px) translateY(0) rotateX(0deg) rotateZ(0deg) scale(1)}
#catalog.ready .catLift{opacity:0;transition:opacity .2s .2s}
.catBar{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:10px 22px;padding:0 max(18px,calc(env(safe-area-inset-right) + 12px)) calc(18px + env(safe-area-inset-bottom)) max(18px,calc(env(safe-area-inset-left) + 12px))}
.catNav{display:flex;align-items:center;gap:12px}
#catCount{font:12px var(--mono);letter-spacing:1px;min-width:84px;text-align:center;font-variant-numeric:tabular-nums;color:var(--cream)}
.catTabs{display:flex;gap:6px}
.catTabs button{height:30px;padding:0 12px;border:0;border-radius:15px;font:700 10px var(--mono);letter-spacing:1px;color:#29271e;opacity:.62}
.catTabs button[aria-current=true]{opacity:1;box-shadow:0 0 0 2px var(--cream)}
.catTabs .t1{background:#ec3f9e}.catTabs .t2{background:#9bd63a}.catTabs .t3{background:#f2552c}
.catShop{height:32px;display:inline-flex;align-items:center;gap:4px;padding:0 12px;border-radius:3px;background:var(--gold);color:var(--ink);font:700 10px var(--sans);letter-spacing:.6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:280px}
.catShop b{text-transform:uppercase;overflow:hidden;text-overflow:ellipsis}
.catShop:hover{background:#ffd28a}
@media(max-width:700px){#catalog{--bot:calc(118px + env(safe-area-inset-bottom))}.catBar{flex-wrap:wrap}.catBar{column-gap:10px}.catNav{order:-1;width:100%;justify-content:center}.catTabs button,body.touch .catTabs button{padding:0 10px}.catShop{max-width:calc(100vw - 222px)}}
@media(max-height:500px){#catalog{--top:calc(46px + env(safe-area-inset-top));--bot:calc(54px + env(safe-area-inset-bottom))}.catTop{padding-top:calc(6px + env(safe-area-inset-top))}.catBar{padding-bottom:calc(8px + env(safe-area-inset-bottom))}}
body.touch .catTabs button{height:36px;padding:0 14px}
body.touch .catShop{height:36px}
/* StPageFlip HTML mode (from its stPageFlip.css, MIT) */
.stf__parent{position:relative;display:block;box-sizing:border-box;transform:translateZ(0);touch-action:none}
.stf__wrapper{position:relative;width:100%;box-sizing:border-box}
.stf__parent canvas{position:absolute;width:100%;height:100%;left:0;top:0}
.stf__block{position:absolute;width:100%;height:100%;box-sizing:border-box;perspective:2000px}
.stf__item{display:none;position:absolute;transform-style:preserve-3d}
.stf__outerShadow,.stf__innerShadow,.stf__hardShadow,.stf__hardInnerShadow{position:absolute;left:0;top:0}
/* Poster view (#posterModal): a campaign poster opens as the poster itself, big, lifting up from a tilted pose like the catalogue cover; brand link underneath. Only the catalogue cover opens the reader (#catalog) */
.posterView{position:relative;display:flex;flex-direction:column;align-items:center;gap:16px;max-width:100%}/* no perspective here: it would make the fixed × sit on the poster instead of the screen corner */
.pvStage{transform-style:preserve-3d}
.pvStage img{display:block;height:min(74dvh,980px);width:auto;max-width:min(86vw,560px);aspect-ratio:842/1191;object-fit:contain;box-shadow:0 30px 80px #0009,0 4px 14px #0006;border-radius:2px;background:#222}
.posterView.lift .pvStage{animation:pvLift .8s cubic-bezier(.2,.8,.25,1) both}
.posterView.lift .pvBar{animation:pvFade .45s .45s both}
@keyframes pvLift{from{transform:perspective(1400px) translateY(18%) rotateX(52deg) rotateZ(-4deg) scale(.72);opacity:0}55%{opacity:1}to{transform:perspective(1400px)}}
@keyframes pvFade{from{opacity:0;transform:translateY(8px)}}
#posterModal.closing{pointer-events:none;animation:pvBackOut .42s ease-in both}#posterModal.closing .pvStage{animation:pvDrop .4s cubic-bezier(.55,0,.75,.2) both}#posterModal.closing .pvBar{animation:pvBarOut .18s ease-in both}
@keyframes pvDrop{from{transform:perspective(1400px)}to{transform:perspective(1400px) translateY(18%) rotateX(52deg) rotateZ(-4deg) scale(.72);opacity:0}}@keyframes pvBarOut{to{opacity:0;transform:translateY(8px)}}@keyframes pvBackOut{60%{opacity:1}to{opacity:0}}
.pvBar{display:flex;align-items:center;justify-content:space-between;gap:24px;width:min(86vw,560px);color:var(--cream)}
.pvBar .eyebrow{font-size:9px}
.pvBar h2{margin:6px 0 0;font-size:20px;font-weight:500;letter-spacing:-.4px;line-height:1.15}
.pvBar .primary{font-size:11px;gap:14px;padding:12px 16px;min-height:44px;white-space:nowrap}
.pvClose{position:fixed;right:calc(24px + env(safe-area-inset-right));top:calc(24px + env(safe-area-inset-top));width:44px;height:44px;font-size:24px;color:var(--cream);border-color:#efdfbd66;background:#1d1a1499}.pvClose:hover{background:#1d1a14dd}.pvClose:focus:not(:focus-visible){outline:none}
@media(max-width:560px){.pvBar{flex-direction:column;align-items:flex-start;gap:12px}.pvBar h2{font-size:18px}.pvStage img{height:auto;width:min(86vw,62dvh)}}
@media(max-height:500px){.posterView{flex-direction:row;gap:22px}.pvStage img{height:84dvh;width:auto}.pvBar{flex-direction:column;align-items:flex-start;width:auto;max-width:260px}}
/* computer mode on phones: no browser pan/zoom gestures over the game or its frame (game taps still reach the iframe) */#pc,#pc iframe{touch-action:none}
/* basketball: the panel fades while you pick the ball back up (POV pick-up between shots) */#basketUI{transition:opacity .3s}#basketUI.picking{opacity:.25}
/* "Drag to look": a one-time centred hint on touch (main.js enter), not a permanent label by the E key */
#mobileControls>#dragHint{position:absolute;left:50%;right:auto;top:58%;bottom:auto;transform:translate(-50%,-50%);font:11px var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--cream);background:#25251dcc;border:1px solid #efdfbd44;border-radius:16px;padding:8px 14px;opacity:0;transition:opacity .5s;pointer-events:none;white-space:nowrap}
#mobileControls>#dragHint.show{opacity:.92}
/* phones: fewer words on screen. The one-time "Drag to look" hint replaces the tour line (it overlapped the jump button), and the footer strip goes (its two taglines crowded the joystick/date stamp) */
body.touch #tourHint,body.touch footer{display:none!important}
/* SEO / screen-reader text that describes the room (index.html #about): readable by search engines and assistive tech, not drawn on screen */.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* product view (the PUMA Speedcat on the rug): a polaroid-style print taped up with a strip of the shoe's plaid, handwritten caption, 4 angle thumbnails (the kit, the box, the toe) */
.pvTape,.pvCap,.pvThumbs{display:none}
.posterView.product .pvStage{position:relative;box-sizing:content-box;width:min(72vw,480px,calc(100dvh - 360px));background:#f1ece0;padding:14px 14px 12px;border-radius:3px;transform:rotate(-1.4deg);box-shadow:0 30px 80px #0009,0 4px 14px #0006}
.posterView.product .pvStage img#posterImage{aspect-ratio:1/1;height:auto;width:100%;max-width:none;object-fit:contain;box-shadow:none;border-radius:1px;background:#fff}/* contain: never crop the client's product photos */
.posterView.product .pvTape{display:block;position:absolute;left:50%;top:-15px;width:120px;height:24px;transform:translateX(-50%) rotate(2deg);/* sits on the cream border only, never over the photo */opacity:.92;box-shadow:0 2px 4px #0004;background:repeating-linear-gradient(90deg,#0000 0 14px,#d6404f 14px 16px,#0000 16px 30px,#8fb5ff 30px 31px,#0000 31px 44px),repeating-linear-gradient(0deg,#0000 0 10px,#d6404f 10px 12px,#0000 12px 22px),#22306b}
.posterView.product .pvCap{display:block;margin:10px 2px 8px;font:700 20px/1 'Kalam','Comic Sans MS',cursive;color:#2f4a8a;transform:rotate(-1deg)}
.posterView.product .pvThumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%}
.pvThumbs button{min-width:0;padding:0;border:2px solid #0000;border-radius:2px;background:#fff;opacity:.65;line-height:0}
.pvThumbs button.on{border-color:#2f4a8a;opacity:1}.pvThumbs button:hover{opacity:1}
.posterView .pvThumbs img{width:100%;height:auto;max-width:none;aspect-ratio:4/3;object-fit:contain;box-shadow:none;border-radius:0;background:#fff}
@media(max-width:560px){.posterView.product .pvStage{width:min(80vw,calc(100dvh - 380px))}.posterView.product .pvCap{font-size:17px}}
@media(max-height:500px){.posterView.product .pvStage{width:calc((100dvh - 150px)*.8)}.posterView.product .pvThumbs{gap:5px}.posterView.product .pvCap{margin:6px 2px 5px;font-size:15px}}
/* the big poster/product image opens the same link as its button */#posterImage{cursor:pointer;transition:filter .15s}#posterImage:hover{filter:brightness(1.04)}
/* entering the room the first time: intro lines leave one after another (up + fade + slight blur), the badge spins off, the vignette eases, then the HUD fades in */
#intro.leaving>*{animation:introOut .7s cubic-bezier(.4,0,.2,1) both}
#intro.leaving>*:nth-child(2){animation-delay:.06s}#intro.leaving>*:nth-child(3){animation-delay:.12s}#intro.leaving>*:nth-child(4){animation-delay:.18s}#intro.leaving>*:nth-child(5){animation-delay:.24s}
#intro.leaving:before{transition:opacity .7s;opacity:0}
@keyframes introOut{to{opacity:0;transform:translate3d(0,-18px,0)}}/* no blur: blur on big text stutters on phones */
#intro.leaving>*{will-change:opacity,transform}
#introBadge.leaving{animation:badgeOut .7s .05s cubic-bezier(.4,0,.2,1) both;will-change:opacity,transform}
@keyframes badgeOut{to{opacity:0;transform:rotate(14deg) translate3d(0,18px,0) scale(.92)}}
body.entering #discovered,body.entering #crosshair,body.entering #mobileControls,body.entering #tourHint,body.entering #filmDate{animation:hudIn .7s .5s cubic-bezier(.4,0,.2,1) both}
@keyframes hudIn{from{opacity:0}}

/* fade in/out for panels (main.js show/hide adds .leaving before hiding) */
#pause,#helpModal,#posterModal{animation:uiFade .28s ease-out backwards}#pause .dialog,#helpModal .dialog{animation:uiRise .32s cubic-bezier(.2,.8,.3,1) backwards}
#pause.leaving,#helpModal.leaving{pointer-events:none;animation:uiFadeOut .22s ease-in both}#pause.leaving .dialog,#helpModal.leaving .dialog{animation:uiSink .22s ease-in both}
#toast,#basketUI{animation:uiRise .3s cubic-bezier(.2,.8,.3,1) backwards}#interaction{animation:uiRise .18s ease-out backwards}
#toast.leaving,#basketUI.leaving{pointer-events:none;animation:uiSink .22s ease-in both}#interaction.leaving{pointer-events:none;animation:uiSink .14s ease-in both}
#loading.leaving{pointer-events:none;animation:uiFadeOut .5s ease-in both}
@keyframes uiFade{from{opacity:0}}@keyframes uiFadeOut{to{opacity:0}}@keyframes uiRise{from{opacity:0;translate:0 10px;scale:.98}}@keyframes uiSink{to{opacity:0;translate:0 8px;scale:.98}}
@media (prefers-reduced-motion: reduce){#pause,#helpModal,#posterModal,#pause .dialog,#helpModal .dialog,#toast,#basketUI,#interaction{animation:none}}

/* pause card: touch controls on phones, keyboard/mouse on desktop */.pausecontrols.touchonly,body.touch .pausecontrols.deskonly{display:none}body.touch .pausecontrols.touchonly{display:flex}

/* first-entry look-around (main.js startTour): HUD hidden, then fades back in */header,footer,#discovered,#crosshair,#mobileControls,#tourHint,#filmDate{transition:opacity .7s cubic-bezier(.4,0,.2,1)}body.touring header,body.touring footer,body.touring #discovered,body.touring #crosshair,body.touring #mobileControls,body.touring #tourHint,body.touring #filmDate{opacity:0;pointer-events:none}

/* intro: second CTA next to Enter the room, straight to the game site (client) */.introCtas{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}.primary.ghost{background:#1d190e66;color:var(--gold);text-decoration:none}.primary.ghost:hover{background:#e7b45a26;border-color:var(--gold)}
/* wordmark is longer now (ROOM OF AGAINST BODEGA): smaller on phones so the header icons still fit */@media(max-width:560px){.wordmark{font-size:16px;letter-spacing:-.5px}.wordmark .year{margin-left:4px}}
/* intro headline: YOU KNOW THE VIBES in Anton (tall condensed poster face, client pick) on one line, sized to the viewport (width on phones, height on short landscape) */#intro h1{white-space:nowrap;font-family:'Anton',var(--sans);font-weight:400;font-size:min(80px,max(30px,10vw),12vh)!important;letter-spacing:0!important}