:root{
  --cream:#f2efe8; --or:#ff6a2b; --ink:#0b0b0d;
  --btn:#eadfc6; --btn-d:#bfb294;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--ink);overflow:hidden;color:var(--cream);
  font-family:'Geist Mono',ui-monospace,monospace;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}

/* ---------- blurred room backdrop ---------- */
body::before{content:"";position:fixed;inset:-12%;z-index:0;filter:blur(46px);
  background:
    radial-gradient(34% 62% at 10% 58%,#521317 0,transparent 70%),
    radial-gradient(22% 40% at 30% 30%,#2b0b0e 0,transparent 70%),
    radial-gradient(30% 55% at 80% 62%,#221a2b 0,transparent 70%),
    radial-gradient(18% 30% at 74% 86%,#5a4a44 0,transparent 70%),
    radial-gradient(40% 40% at 55% 10%,#30090c 0,transparent 70%),
    #0d0808}
body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 50%,transparent 40%,rgba(0,0,0,.72) 100%)}

/* ---------- top chrome ---------- */
.top{position:fixed;inset:0 0 auto 0;z-index:5;display:flex;justify-content:space-between;align-items:center;
  padding:16px clamp(16px,3vw,44px);pointer-events:none}
.top>*{pointer-events:auto}
.logo{width:clamp(40px,4.2vw,54px);aspect-ratio:64/92;cursor:pointer;transition:transform .2s;filter:drop-shadow(0 0 10px rgba(255,90,50,.45)) drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.logo .lg-glow{animation:lgglow 3.2s ease-in-out infinite}
@keyframes lgglow{0%,100%{opacity:0}50%{opacity:.12}}
.logo:hover{transform:rotate(-8deg) scale(1.08)}
.top-right{display:flex;gap:14px;align-items:center}
.round,.pill{height:clamp(44px,5vw,58px);border:1px solid rgba(242,239,232,.45);background:rgba(10,10,12,.28);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--cream);
  transition:background .2s,border-color .2s,color .2s}
.round{width:clamp(44px,5vw,58px);border-radius:50%;display:grid;place-items:center}
.pill{border-radius:999px;padding:0 clamp(18px,2vw,30px);display:flex;align-items:center;gap:18px;
  font-family:Silkscreen,monospace;font-size:clamp(12px,1.05vw,15px);letter-spacing:.28em}
.round:hover,.pill:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.plus{position:relative;width:16px;height:16px;transition:transform .25s}
.plus::before,.plus::after{content:"";position:absolute;background:currentColor}
.plus::before{left:0;right:0;top:5px;height:6px}
.plus::after{top:0;bottom:0;left:5px;width:6px}
.pill.open .plus{transform:rotate(45deg)}

/* ---------- console ---------- */
.stage{position:fixed;inset:86px 14px 14px 14px;z-index:1;display:grid;place-items:center;container-type:size}
.console{
  --ar:1.74; --u:1cqw;
  width:min(100cqw,calc(100cqh * var(--ar)));height:min(100cqh,calc(100cqw / var(--ar)));
  position:relative;container-type:size;
  display:grid;grid-template-columns:19% 1fr 19%;grid-template-areas:"left bezel right";
  border-radius:2.4% 2.4% 9% 2.4% / 4% 4% 15% 4%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .32 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' fill='none' stroke='%23300' stroke-opacity='.34' stroke-width='3'%3E%3Cpath d='M0 30h50v40h40V20h60v50h30M20 180v-50h50v-30h60v40h50M90 0v20M150 70v40h-30M70 130v50M0 110h30v20'/%3E%3Cg fill='%23300' fill-opacity='.26' stroke='none'%3E%3Crect x='96' y='96' width='44' height='34'/%3E%3Crect x='14' y='44' width='26' height='18'/%3E%3Crect x='128' y='140' width='34' height='22'/%3E%3Crect x='60' y='8' width='18' height='12'/%3E%3Ccircle cx='50' cy='70' r='5'/%3E%3Ccircle cx='150' cy='20' r='5'/%3E%3Ccircle cx='70' cy='130' r='5'/%3E%3C/g%3E%3Cg stroke='%23f88' stroke-opacity='.10' stroke-width='2'%3E%3Cpath d='M100 104h36M100 112h36M100 120h36M18 50h18M132 148h26'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(155deg,#c2333a 0%,#a82229 38%,#8c181e 72%,#74121a 100%);
  box-shadow:
    inset 0 2px 1px rgba(255,190,190,.35),
    inset 0 0 0 2px rgba(70,6,10,.55),
    inset 0 -10px 24px rgba(40,0,4,.55),
    inset 10px 0 24px rgba(255,120,120,.06),
    0 40px 90px rgba(0,0,0,.65),0 0 0 1px rgba(0,0,0,.5);
}
.hinge{position:absolute;left:0;right:0;top:0;height:4.6cqh;border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0;
  border-bottom:2px solid rgba(60,5,9,.7);box-shadow:0 1px 0 rgba(255,150,150,.18);
  background:linear-gradient(rgba(255,255,255,.10),rgba(0,0,0,.08))}
.hinge::before,.hinge::after{content:"";position:absolute;top:0;bottom:0;width:2px;background:rgba(60,5,9,.7)}
.hinge::before{left:9%}.hinge::after{right:9%}
.screw{position:absolute;width:1.5cqw;height:1.5cqw;border-radius:50%;
  background:radial-gradient(circle,rgba(50,4,8,.7) 28%,rgba(0,0,0,.18) 30%,rgba(0,0,0,.18) 60%,transparent 62%)}
.s1{left:1.6%;top:8%}.s2{right:1.6%;top:8%}.s3{left:1.6%;bottom:3.5%}.s4{right:5%;bottom:3.5%}

/* ---------- screen ---------- */
.bezel{grid-area:bezel;position:relative;margin:8.2cqh 0 5cqh;padding:4.2cqh 3.4cqw;
  border-radius:1.8cqw 1.8cqw 6cqw 1.8cqw;
  background:linear-gradient(160deg,#757371,#565452 60%,#454341);
  box-shadow:inset 0 2px 2px rgba(255,255,255,.22),inset 0 -4px 10px rgba(0,0,0,.45),0 0 0 3px rgba(50,4,8,.55),0 6px 16px rgba(0,0,0,.4)}
.led{position:absolute;left:1.15cqw;top:38%;width:1.05cqw;height:1.05cqw;border-radius:50%;
  background:var(--or);box-shadow:0 0 8px 2px rgba(255,106,43,.75)}
.lcdwrap{width:100%;height:100%;container-type:size;display:grid;place-items:center}
.lcd{position:relative;width:min(100cqw,calc(100cqh * 320 / 216));aspect-ratio:320/216;background:#d8d6cf;overflow:hidden;
  box-shadow:0 0 0 3px #1a1918,0 0 0 5px rgba(0,0,0,.35)}
.lcd canvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}
.lcd::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    linear-gradient(to right,rgba(0,0,0,.13) 0,rgba(0,0,0,.13) 18%,transparent 18%) 0 0/calc(100% / 320) 100%,
    linear-gradient(to bottom,rgba(0,0,0,.13) 0,rgba(0,0,0,.13) 18%,transparent 18%) 0 0/100% calc(100% / 216)}
.lcd::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  box-shadow:inset 0 0 26px rgba(0,0,0,.35),inset 0 0 3px rgba(0,0,0,.6);
  background:linear-gradient(125deg,rgba(255,255,255,.10) 0,transparent 32%)}

/* ---------- controls ---------- */
.side{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*1.4);padding-top:6cqh}
.left{grid-area:left}.right{grid-area:right}
.engrave{font-family:Silkscreen,monospace;font-size:max(7px,calc(var(--u)*.72));letter-spacing:.14em;color:rgba(34,1,5,.85);
  text-shadow:0 1px 0 rgba(255,150,150,.22);white-space:nowrap}
.engrave.small{margin-top:calc(var(--u)*-.6)}

.dpad-well{width:calc(var(--u)*13.4);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:rgba(96,12,18,.55);box-shadow:inset 0 4px 10px rgba(30,0,3,.6),0 1px 0 rgba(255,160,160,.22)}
.dpad{position:relative;width:78%;aspect-ratio:1;filter:drop-shadow(0 4px 3px rgba(30,0,3,.55))}
.bar{position:absolute;background:linear-gradient(150deg,#f4ead2,var(--btn) 45%,var(--btn-d));border-radius:10%}
.bar.h{left:0;right:0;top:34%;height:32%}
.bar.v{top:0;bottom:0;left:34%;width:32%}
.dimple{position:absolute;left:41%;top:41%;width:18%;height:18%;border-radius:50%;
  background:radial-gradient(circle,#f4ead2 30%,#b9ac8d 34%,#b9ac8d 48%,transparent 52%)}
.d{position:absolute;z-index:2}
.d.up{left:28%;right:28%;top:-8%;height:44%}
.d.down{left:28%;right:28%;bottom:-8%;height:44%}
.d.left{top:28%;bottom:28%;left:-8%;width:44%}
.d.right{top:28%;bottom:28%;right:-8%;width:44%}
.dpad:has(.up.on){transform:perspective(300px) rotateX(10deg)}
.dpad:has(.down.on){transform:perspective(300px) rotateX(-10deg)}
.dpad:has(.left.on){transform:perspective(300px) rotateY(-10deg)}
.dpad:has(.right.on){transform:perspective(300px) rotateY(10deg)}

.ab-well{width:calc(var(--u)*15);height:calc(var(--u)*7.4);border-radius:999px;transform:rotate(-27deg);
  display:flex;align-items:center;justify-content:space-between;padding:0 calc(var(--u)*.7);
  background:rgba(96,12,18,.55);box-shadow:inset 0 4px 10px rgba(30,0,3,.6),0 1px 0 rgba(255,160,160,.22)}
.ab{width:calc(var(--u)*6);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#f7efd9,var(--btn) 50%,var(--btn-d));
  box-shadow:0 4px 0 #8f8468,0 6px 8px rgba(30,0,3,.6);transition:transform .05s,box-shadow .05s}
.ab em{display:block;transform:rotate(27deg);font:700 calc(var(--u)*1.5) Silkscreen,monospace;color:rgba(110,98,70,.75);font-style:normal}
.ab.on{transform:translateY(3px);box-shadow:0 1px 0 #8f8468,0 2px 4px rgba(30,0,3,.6)}

.ss{display:flex;gap:calc(var(--u)*1.6);margin-top:calc(var(--u)*1.2)}
.slant{width:calc(var(--u)*4.6);height:calc(var(--u)*1.5);border-radius:999px;transform:rotate(-27deg);
  background:linear-gradient(#f4ead2,var(--btn-d));box-shadow:0 3px 0 #8f8468,0 4px 6px rgba(30,0,3,.6)}
.slant.on{transform:rotate(-27deg) translateY(2px);box-shadow:0 1px 0 #8f8468}

.grille{position:absolute;right:calc(var(--u)*1.8);bottom:calc(var(--u)*1.6);display:flex;gap:calc(var(--u)*.75);transform:skewX(-27deg)}
.grille i{width:calc(var(--u)*.8);height:calc(var(--u)*5.2);border-radius:999px;background:rgba(60,5,9,.82);box-shadow:inset 0 2px 3px rgba(0,0,0,.6),1px 0 0 rgba(255,150,150,.18)}
.sticker{position:absolute;filter:drop-shadow(0 2px 2px rgba(30,0,3,.5))}
.sticker.bomb{width:calc(var(--u)*5);left:calc(var(--u)*2.2);bottom:calc(var(--u)*2);transform:rotate(-8deg)}
.sticker.star{width:calc(var(--u)*4);right:calc(var(--u)*3);top:10cqh;transform:rotate(14deg)}

/* ---------- portrait / phone ---------- */
@media (max-aspect-ratio:1/1){
  .console{--ar:.6;--u:2.5cqw;grid-template-columns:1fr 1fr;grid-template-rows:50% 1fr;grid-template-areas:"bezel bezel" "left right";
    border-radius:5% 5% 16% 5% / 3% 3% 10% 3%}
  .hinge{height:2.6cqh}
  .bezel{margin:4.4cqh 5cqw 0;padding:2.2cqh 6cqw;border-radius:3cqw 3cqw 11cqw 3cqw}
  .led{left:2cqw;width:1.8cqw;height:1.8cqw}
  .side{padding-top:0}
  .screw{width:3cqw;height:3cqw}
  .sticker.star{top:1cqh}
}

/* ---------- portrait console as a reusable class (home hero) ---------- */
.console.portrait{--ar:.6;--u:2.5cqw;grid-template-columns:1fr 1fr;grid-template-rows:50% 1fr;grid-template-areas:"bezel bezel" "left right";
  border-radius:5% 5% 16% 5% / 3% 3% 10% 3%}
.portrait .hinge{height:2.6cqh}
.portrait .bezel{margin:4.4cqh 5cqw 0;padding:2.2cqh 6cqw;border-radius:3cqw 3cqw 11cqw 3cqw}
.portrait .led{left:2cqw;width:1.8cqw;height:1.8cqw}
.portrait .side{padding-top:0}
.portrait .screw{width:3cqw;height:3cqw}
.portrait .sticker.star{top:1cqh}
.mini .engrave{display:none}
.mini button{pointer-events:none}
.mini .led{animation:led 1.4s steps(2) infinite}
.mini .lcd{animation:lcdglow 2.6s ease-in-out infinite}
@keyframes led{50%{opacity:.35;box-shadow:none}}
@keyframes lcdglow{0%,100%{box-shadow:0 0 0 3px #1a1918,0 0 22px 2px rgba(214,232,98,.45)}50%{box-shadow:0 0 0 3px #1a1918,0 0 46px 10px rgba(214,232,98,.8)}}

/* ---------- game console enter / asleep ---------- */
.stage.asleep{visibility:hidden}
.stage.enter .console{animation:enter .7s cubic-bezier(.2,1.25,.35,1) both}
@keyframes enter{0%{transform:scale(.55) rotate(-4deg);opacity:0;filter:brightness(3)}60%{opacity:1}100%{transform:none;opacity:1;filter:none}}

/* ---------- home ---------- */
#home{position:fixed;inset:0;z-index:3;overflow:hidden;background:#0a0408;transition:opacity .6s}
#home[hidden]{display:none}
#home.gone{opacity:0;pointer-events:none}
#home.arrive{animation:arrive .7s both}
@keyframes arrive{from{opacity:0}}
#homeBg{position:absolute;inset:0;width:100%;height:100%;display:block}
.scan{position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.14) 0 1px,transparent 1px 4px),radial-gradient(120% 95% at 50% 46%,transparent 45%,rgba(4,0,10,.78) 100%)}
.flash{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 46%,#fff8d8 0,#ffb24a 22%,#ff5a2a 46%,rgba(120,10,20,0) 75%)}
#home.launching .flash{animation:flash .95s ease-out both}
@keyframes flash{0%{opacity:0;transform:scale(.2)}45%{opacity:1;transform:scale(1.6)}100%{opacity:0;transform:scale(2.6)}}

.hero{--hh:min(60vh,640px,calc(92vw / .6));--hw:calc(var(--hh) * .6);
  position:absolute;left:50%;top:47%;width:var(--hw);height:var(--hh);transform:translate(-50%,-50%);cursor:pointer;outline:none;
  perspective:1100px;transition:transform .35s cubic-bezier(.2,1.4,.4,1)}
.hero:hover,.hero:focus-visible{transform:translate(-50%,-50%) scale(1.035)}
.hero:active{transform:translate(-50%,-50%) scale(.985)}
.mini-stage{position:absolute;inset:0;z-index:2;container-type:size;transform-style:preserve-3d}
.tilt{width:100%;height:100%;display:grid;place-items:center;container-type:size;will-change:transform;
  filter:drop-shadow(0 0 26px rgba(255,80,40,.55)) drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.hero:hover .tilt{filter:drop-shadow(0 0 44px rgba(255,120,50,.85)) drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.tilt .console{box-shadow:inset 0 2px 1px rgba(255,190,190,.4),inset 0 0 0 2px rgba(70,6,10,.55),inset 0 -10px 24px rgba(40,0,4,.55),0 0 0 1px rgba(255,120,90,.5)}
.tilt .console::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(115deg,transparent 30%,rgba(255,220,200,.34) 46%,transparent 58%);background-size:260% 100%;animation:sheen 4.2s ease-in-out infinite}
@keyframes sheen{0%{background-position:130% 0}55%,100%{background-position:-60% 0}}

.halo,.rays,.ring{position:absolute;left:50%;top:50%;border-radius:50%;pointer-events:none;z-index:0}
.halo{width:240%;aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(255,150,60,.62) 0,rgba(255,84,40,.36) 26%,rgba(190,30,50,.14) 48%,transparent 66%);animation:halo 3.2s ease-in-out infinite}
@keyframes halo{50%{transform:translate(-50%,-50%) scale(1.12);opacity:.78}}
.rays{width:330%;aspect-ratio:1;transform:translate(-50%,-50%);opacity:.5;
  background:repeating-conic-gradient(from 0deg,rgba(255,170,80,.42) 0 5deg,transparent 5deg 20deg);
  -webkit-mask:radial-gradient(circle,#000 12%,transparent 62%);mask:radial-gradient(circle,#000 12%,transparent 62%);animation:spin 46s linear infinite}
.ring{width:176%;aspect-ratio:1;margin:-88% 0 0 -88%;border:2px dashed rgba(255,190,120,.5);animation:spin 30s linear infinite reverse}
.ring.r2{width:214%;margin:-107% 0 0 -107%;border:1px dotted rgba(242,239,232,.35);animation:spin 60s linear infinite}
@keyframes spin{to{rotate:360deg}}
.shadow{position:absolute;left:8%;right:8%;bottom:-17%;height:9%;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.7),transparent 70%);animation:shadow 5.65s ease-in-out infinite}
@keyframes shadow{50%{transform:scale(.88);opacity:.7}}
.pog{position:absolute;left:50%;top:50%;width:28%;aspect-ratio:1;pointer-events:none;will-change:transform;
  filter:drop-shadow(0 6px 6px rgba(0,0,0,.5))}
.pog svg{display:block;width:100%;height:100%;filter:drop-shadow(0 3px 0 #b9a58c)}

#home.launching .hero{transition:transform .62s cubic-bezier(.6,0,.9,.4),filter .62s;transform:translate(-50%,-50%) scale(3.1);filter:brightness(2.6) blur(3px)}
#home.launching .pog{transition:opacity .25s;opacity:0}
#home.launching .cta,#home.launching .home-bar{opacity:0;transition:opacity .2s}

.cta{position:absolute;left:0;right:0;top:calc(47% + min(30vh,320px) + 5.2vh);text-align:center;pointer-events:none;
  font:700 clamp(13px,1.25vw,19px) Silkscreen,monospace;letter-spacing:.3em;color:var(--cream);text-shadow:0 0 14px rgba(255,120,50,.9);animation:blink 1.1s steps(2) infinite}
.cta i{display:inline-block;margin-right:.9em;border-left:.62em solid var(--or);border-top:.42em solid transparent;border-bottom:.42em solid transparent}
@keyframes blink{50%{opacity:.25}}
.home-bar{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:clamp(12px,2.2vh,24px) clamp(16px,3vw,44px);border-top:1px solid rgba(242,239,232,.12);background:linear-gradient(rgba(10,4,8,0),rgba(10,4,8,.7));
  font:400 clamp(9px,.8vw,12px) Silkscreen,monospace;letter-spacing:.24em;color:rgba(242,239,232,.6)}
.home-bar em{font-style:normal;color:var(--or);margin:0 .5em}
.home-bar .mid{color:var(--cream)}

/* lava lamp on the sill */
.lamp{position:absolute;left:84%;bottom:20vh;width:clamp(26px,3vw,46px);aspect-ratio:1/2.9;display:flex;flex-direction:column;align-items:center}
.lamp .glow{position:absolute;left:50%;top:45%;width:900%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(255,150,50,.55) 0,rgba(255,90,40,.2) 30%,transparent 62%);animation:halo 4s ease-in-out infinite}
.lamp .cap{position:relative;width:34%;height:9%;background:#2a1626;clip-path:polygon(18% 0,82% 0,100% 100%,0 100%)}
.lamp .glass{position:relative;width:74%;height:61%;overflow:hidden;clip-path:polygon(27% 0,73% 0,100% 100%,0 100%);
  background:linear-gradient(#ff5a3a,#ff8a2a 55%,#ffc24a)}
.lamp .glass b{position:absolute;left:28%;width:44%;aspect-ratio:1;border-radius:50%;background:#ffe27a;animation:blob 7s ease-in-out infinite}
.lamp .glass b:nth-child(1){bottom:4%}
.lamp .glass b:nth-child(2){left:40%;width:30%;animation-duration:9.5s;animation-delay:-3s;background:#ffd05a}
.lamp .glass b:nth-child(3){left:20%;width:24%;animation-duration:12s;animation-delay:-7s}
@keyframes blob{0%,100%{bottom:2%;transform:scale(1.15,.9)}50%{bottom:66%;transform:scale(.8,1.2)}}
.lamp .base{position:relative;width:86%;height:30%;background:linear-gradient(90deg,#3a1420,#7a2a22 60%,#b8481f);clip-path:polygon(8% 0,92% 0,62% 46%,100% 100%,0 100%,38% 46%)}

@media (max-aspect-ratio:1/1){
  .home-bar span:last-child{display:none}
  .lamp{left:78%}
}
@media (prefers-reduced-motion:reduce){
  .rays,.ring,.halo,.tilt .console::after,.cta,.lamp .glass b{animation:none}
}

/* ---------- game room ---------- */
.room{position:absolute;left:50%;top:50%;width:max(100vw,177.78vh);height:max(100vh,56.25vw);transform:translate(-50%,-50%);container-type:size;will-change:transform}
.room-art{position:absolute;inset:0;width:100%;height:100%;display:block}
.room-art .tw{animation:tw 4s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:1}50%{opacity:.25}}
.room-art .pg{animation:pg 1s steps(1) infinite}
@keyframes pg{0%{opacity:.15}50%{opacity:1}}
.room-art .hop{animation:hop 1.1s ease-in-out infinite}
@keyframes hop{0%,100%{transform:translate(0,0)}25%{transform:translate(1.2cqw,-1.6cqh)}50%{transform:translate(2.4cqw,0)}75%{transform:translate(1.2cqw,-1.6cqh)}}
.room-art .flick{animation:flick .14s steps(2) infinite}
@keyframes flick{50%{opacity:.11}}
.room-art .flick2{animation:tw 3.3s ease-in-out infinite}
.room-art .lampglow{animation:lampglow 4.5s ease-in-out infinite}
@keyframes lampglow{50%{opacity:.72}}
.room-art .wob{transform-box:fill-box;transform-origin:center;animation:wob 3.4s ease-in-out infinite}
@keyframes wob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-10%) rotate(3deg)}}
.mote{position:absolute;width:3px;height:3px;border-radius:50%;background:#ffcf9a;opacity:0;pointer-events:none;animation:mote 14s linear infinite}
@keyframes mote{0%{opacity:0;transform:translate(0,0)}15%{opacity:.55}85%{opacity:.4}100%{opacity:0;transform:translate(40px,-110px)}}

.room .hero{--hh:42cqh;left:63.5%;top:65%}
.room .hero .halo{width:210%;opacity:.8}
.room .hero .rays{width:270%;opacity:.3}
.room .hero .shadow{left:-12%;right:-12%;bottom:-13%;height:12%;background:radial-gradient(ellipse,rgba(255,84,40,.5),rgba(190,30,50,.18) 45%,transparent 70%);z-index:0}
.room .hero .cta{position:absolute;left:50%;top:auto;right:auto;bottom:-13%;transform:translateX(-50%);white-space:nowrap;z-index:3;font-size:clamp(11px,1.5cqh,17px)}
.strap{position:absolute;left:-17%;top:-1%;width:26%;z-index:-1;overflow:visible}
.tilt{position:relative}
.flash{background:radial-gradient(circle at 63% 62%,#fff8d8 0,#ffb24a 22%,#ff5a2a 46%,rgba(120,10,20,0) 75%)}
.scan{background:repeating-linear-gradient(to bottom,rgba(0,0,0,.12) 0 1px,transparent 1px 4px),radial-gradient(120% 100% at 55% 55%,transparent 50%,rgba(6,0,12,.72) 100%)}
@media (max-aspect-ratio:1/1){ .room .hero{left:50%;top:60%;--hh:36cqh} }
@media (prefers-reduced-motion:reduce){ .room-art *,.mote{animation:none!important} }

/* ---------- home bar: official links + credit ---------- */
.home-bar{z-index:4;gap:clamp(10px,2vw,28px);padding:clamp(10px,1.8vh,18px) clamp(16px,3vw,44px);
  background:linear-gradient(rgba(10,4,8,0),rgba(10,4,8,.82) 55%);border-top:1px solid rgba(242,239,232,.14)}
.home-bar::before{content:"";position:absolute;left:clamp(16px,3vw,44px);top:-1px;width:54px;height:1px;background:var(--or)}
.hb-group{display:flex;align-items:center;gap:clamp(8px,.8vw,12px);min-width:0}
.hb-label{color:rgba(242,239,232,.42);white-space:nowrap}
.hb-hint{color:rgba(242,239,232,.55);white-space:nowrap;animation:blink 2.4s steps(2) infinite}
.chip{display:inline-flex;align-items:center;gap:9px;height:clamp(28px,3.6vh,34px);padding:0 clamp(10px,1vw,15px);border-radius:999px;white-space:nowrap;
  border:1px solid rgba(242,239,232,.38);background:rgba(10,10,12,.34);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:var(--cream);text-decoration:none;font:inherit;letter-spacing:.2em;transition:background .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s}
.chip svg{flex:none;opacity:.85}
.chip .arr{width:6px;height:6px;border-top:2px solid currentColor;border-right:2px solid currentColor;opacity:.55;transform:translate(-1px,1px);transition:transform .2s,opacity .2s}
.chip:hover,.chip:focus-visible{background:var(--cream);color:var(--ink);border-color:var(--cream);transform:translateY(-2px);box-shadow:0 6px 18px rgba(255,106,43,.35);outline:none}
.chip:hover .arr,.chip:focus-visible .arr{transform:translate(1px,-1px);opacity:1}
.chip.me{border-color:rgba(255,106,43,.75);box-shadow:inset 0 0 0 1px rgba(255,106,43,.18)}
.chip.me svg{color:var(--or)}
.chip.me:hover svg,.chip.me:focus-visible svg{color:var(--ink)}
#home.launching .home-bar{pointer-events:none}
@media (max-width:1100px){ .hb-hint{display:none} }
@media (max-width:760px){
  .home-bar{flex-direction:column;align-items:flex-start;gap:8px}
  .hb-label{min-width:9.5em}
}
@media (max-aspect-ratio:1/1){ .home-bar span:last-child{display:revert} }

/* ---------- "click for sound" prompt (browsers block audio until a gesture) ---------- */
.round{position:relative}
.tap-hint{display:none;position:absolute;right:calc(100% + 12px);top:50%;transform:translateY(-50%);white-space:nowrap;pointer-events:none;
  padding:7px 12px;border-radius:999px;background:var(--or);color:var(--ink);font:700 clamp(9px,.8vw,11px) Silkscreen,monospace;letter-spacing:.18em;
  box-shadow:0 0 18px rgba(255,106,43,.55);animation:blink 1.4s steps(2) infinite}
.tap-hint::after{content:"";position:absolute;left:100%;top:50%;margin-top:-5px;border-left:7px solid var(--or);border-top:5px solid transparent;border-bottom:5px solid transparent}
.round.needs-tap .tap-hint{display:block}
.round.needs-tap{border-color:var(--or)}