@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
  --ink: #080912;
  --outline: #111220;
  --wall: #24243b;
  --floor: #151522;
  --cyan: #6de6e3;
  --pink: #ff4bb4;
  --purple: #8e42d7;
  --yellow: #ffd34f;
  --orange: #ff7b36;
  --red: #ff465c;
  --cream: #f4ecd8;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--ink); }
body { color: var(--cream); font-family: "Press Start 2P", "Courier New", monospace; image-rendering: pixelated; }
button, a { font: inherit; }
button { color: inherit; }

.building {
  position: relative;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  background: var(--ink);
}

.upper-room, .lower-room { position: absolute; left: 0; width: 100%; height: 50%; overflow: hidden; }
.upper-room { top: 0; background: linear-gradient(#272740 0 74%, #181827 74%); }
.upper-room::after, .lower-room::after {
  content: ""; position: absolute; z-index: 30; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 clamp(3px, .7vw, 8px) #0d0e1a, inset 0 0 8vw rgba(5,5,12,.5);
}
.lower-room { bottom: 0; background: #100e18; }

.wall-grid { position: absolute; inset: 0 0 26%; opacity: .2; background: radial-gradient(#777692 1px, transparent 1px); background-size: 11px 11px; }
.upper-room::before { content: ""; position: absolute; inset: 74% 0 0; background: repeating-linear-gradient(90deg, transparent 0 18%, #23233a 18% 18.6%), repeating-linear-gradient(0deg, #12121e 0 47%, #1b1b2d 48% 100%); }
.pink-glow { position: absolute; z-index: 0; right: 0; top: 0; width: 42%; height: 75%; background: radial-gradient(circle at 75% 30%, rgba(255,79,157,.2), transparent 50%); animation: roomPulse 5s steps(3) infinite; }

.photo-frame { position: absolute; z-index: 2; margin: 0; overflow: hidden; background: #0b0c13; border: clamp(3px,.55vw,7px) solid #11121f; box-shadow: clamp(3px,.7vw,9px) clamp(3px,.7vw,9px) #11121e; }
.photo-frame img { width: 100%; height: 100%; display: block; object-fit: cover; image-rendering: auto; filter: saturate(.88) contrast(1.08); }
.sign-frame { left: 4%; top: 8%; width: 20%; height: 31%; transform: rotate(-1deg); }
.sign-frame::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 1.2vw #ffd034; pointer-events: none; }
.mannequin-frame { right: 3.5%; top: 6%; width: 14%; height: 55%; border-color: #1d1725; }
.mannequin-frame img { object-position: 50% 34%; }
.mannequin-frame figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 5%; color: var(--orange); background: rgba(8,9,18,.85); text-align: center; font-size: clamp(4px,.52vw,8px); }

.top-shelf { position: absolute; z-index: 2; left: 4%; top: 47%; width: 21%; height: 3%; background: #9e6168; border: .25vw solid #111220; box-shadow: 0 .55vw #111220; }
.top-shelf i { position: absolute; display: block; bottom: 100%; }
.plant { left: 7%; width: 16%; height: 190%; background: #b9675e; border: .2vw solid #111220; }
.plant::before { content: ""; position: absolute; left: -45%; bottom: 70%; width: 190%; height: 130%; background: #5b9568; clip-path: polygon(50% 100%,0 28%,38% 45%,48% 0,64% 45%,100% 25%,72% 100%); }
.book { width: 8%; border: .16vw solid #111220; }.book.pink { left: 44%; height: 170%; background: #ed579a; }.book.yellow { left: 54%; height: 220%; background: #eec554; }
.mini-console { right: 8%; width: 22%; height: 75%; background: var(--cyan); clip-path: polygon(0 70%,35% 70%,46% 0,58% 70%,100% 70%,78% 100%,20% 100%); }

.coop-neon { position: absolute; z-index: 3; left: 36%; top: 8%; width: 29%; height: 24%; display: grid; grid-template-columns: 31% 1fr; grid-template-rows: 48% 27% 25%; align-items: center; padding: 1.2% 1.6%; overflow: hidden; background: linear-gradient(135deg,#160d13,#25131c 52%,#0c0d18); border: clamp(3px,.4vw,6px) solid #10111f; outline: clamp(1px,.16vw,3px) solid #6d422d; box-shadow: .45vw .45vw #10111d,0 0 1.5vw rgba(255,78,39,.2); transform: rotate(.5deg); }
.coop-neon::before,.coop-neon::after { content: ""; position: absolute; top: -23%; width: clamp(2px,.2vw,3px); height: 24%; background: #111220; }.coop-neon::before { left: 22%; }.coop-neon::after { right: 22%; }
.coop-neon strong { align-self: end; color: #ffc34c; font-size: clamp(8px,1.55vw,25px); letter-spacing: .04em; text-shadow: .13vw .13vw #8d2b22,0 0 .7vw rgba(255,82,37,.7); animation: coopGlow 3s steps(3) infinite; }
.coop-neon > span { grid-column: 2; align-self: center; color: #f05a35; font-size: clamp(6px,1vw,16px); letter-spacing: .15em; text-shadow: .1vw .1vw #671a20; }
.coop-neon small { grid-column: 1 / -1; align-self: center; color: #d6a961; font-size: clamp(3px,.42vw,7px); letter-spacing: .14em; text-align: center; animation: hintBlink 1.4s steps(2) infinite; }
.mk-emblem { position: relative; grid-row: 1 / 3; width: 72%; aspect-ratio: 1; display: grid; place-items: center; border: clamp(2px,.25vw,4px) solid #ffad39; border-radius: 50%; background: #0b0c14; box-shadow: 0 0 .7vw rgba(255,78,39,.65),inset 0 0 .5vw #9e201e; }
.mk-emblem::before { content: ""; position: absolute; right: 7%; top: 5%; width: 46%; height: 65%; background: #e24b28; clip-path: polygon(0 0,100% 15%,65% 34%,100% 55%,48% 53%,78% 100%,18% 67%,0 35%); }
.mk-emblem b { position: relative; z-index: 2; color: #ffd059; font-size: clamp(5px,.75vw,12px); text-shadow: 2px 2px #8d221f; }

.floor-lamp { position: absolute; z-index: 4; left: 28%; bottom: 13%; width: 8%; height: 45%; }
.floor-lamp i:nth-child(1) { position: absolute; top: 0; width: 100%; height: 25%; background: #e4a751; border: .3vw solid #111220; clip-path: polygon(20% 0,80% 0,100% 100%,0 100%); box-shadow: 0 .7vw 1.4vw rgba(255,182,68,.18); }
.floor-lamp i:nth-child(2) { position: absolute; left: 47%; top: 24%; width: 7%; height: 69%; background: #b37c61; }
.floor-lamp i:nth-child(3) { position: absolute; left: 18%; bottom: 0; width: 65%; height: 7%; background: #9b6266; border: .2vw solid #111220; }
.top-rug { position: absolute; z-index: 1; left: 18%; right: 20%; bottom: 2%; height: 20%; background: repeating-linear-gradient(135deg,#36325c 0 14%,#4c426f 14% 24%,#79466d 24% 28%); border: .35vw solid #10111f; transform: skewX(-7deg); }

.sofa { position: absolute; z-index: 5; left: 4%; bottom: 5%; width: 48%; height: 40%; }
.sofa-back, .sofa-seat, .sofa-arm { position: absolute; display: block; background: #48537d; border: clamp(2px,.4vw,5px) solid #111220; }
.sofa-back { left: 8%; top: 0; width: 84%; height: 62%; box-shadow: inset 0 -.5vw #353d62; }
.sofa-back::after { content: ""; position: absolute; left: 50%; top: 0; width: .3vw; height: 100%; background: #2c324f; }
.sofa-seat { left: 7%; bottom: 4%; width: 86%; height: 39%; background: #3e486e; }
.sofa-arm { bottom: 2%; width: 14%; height: 54%; background: #57628a; }.sofa-arm.left { left: 0 }.sofa-arm.right { right: 0 }

.gamers { position: absolute; z-index: 8; left: 10%; bottom: 10%; width: 37%; height: 43%; pointer-events: none; }
.gamer { position: absolute; bottom: 0; width: 40%; height: 100%; transform-origin: 50% 85%; }
.gamer-one { left: 0; --skin:#c98262; --hair:#28243b; --shirt:#5f8bc2; }.gamer-two { right: 0; --skin:#e2a174; --hair:#74394e; --shirt:#bd5e89; }
.gamer-head { position: absolute; z-index: 5; left: 28%; top: 0; width: 48%; height: 34%; transition: transform .12s steps(2); }
.gamer-face { position: absolute; left: 8%; top: 23%; width: 84%; height: 72%; display: block; background: var(--skin); border: .25vw solid #111220; }
.gamer-hair { position: absolute; z-index: 2; left: 3%; top: 0; width: 94%; height: 43%; background: var(--hair); border: .2vw solid #111220; clip-path: polygon(0 0,100% 0,100% 68%,82% 65%,82% 100%,64% 69%,46% 100%,27% 67%,0 82%); }
.gamer-two .gamer-hair { height: 52%; }
.gamer-face b { position: absolute; top: 35%; width: 9%; height: 12%; background: #161522; animation: blink 5s steps(1) infinite; }.gamer-face b:first-child { left: 24%; }.gamer-face b:nth-child(2) { right: 24%; }
.gamer-face em { position: absolute; left: 40%; bottom: 15%; width: 21%; height: 6%; background: #7a3b4b; }
.gamer-body { position: absolute; z-index: 2; left: 20%; top: 32%; width: 65%; height: 48%; background: var(--shirt); border: .3vw solid #111220; clip-path: polygon(12% 0,88% 0,100% 100%,0 100%); }
.gamer-body::after { content: ""; position: absolute; left: 42%; top: 21%; width: 16%; aspect-ratio: 1; background: #f4d36d; box-shadow: .35vw .35vw #fff0a8; }
.gamer-arm { position: absolute; z-index: 6; top: 48%; width: 43%; height: 13%; background: var(--shirt); border: .25vw solid #111220; animation: hands .62s steps(2) infinite; }
.gamer-arm.left { left: 1%; transform: rotate(18deg); transform-origin: 85% 50%; }.gamer-arm.right { right: -2%; transform: rotate(-18deg); transform-origin: 15% 50%; animation-delay: .3s; }
.gamer-arm i { position: absolute; top: 8%; width: 22%; height: 84%; display: block; background: var(--skin); border: .2vw solid #111220; }
.gamer-arm.left i { right: -10%; }.gamer-arm.right i { left: -10%; }
.gamepad { position: absolute; z-index: 9; left: 34%; top: 55%; width: 45%; height: 19%; background: #dddde3; border: .25vw solid #111220; clip-path: polygon(10% 0,90% 0,100% 70%,82% 100%,66% 70%,34% 70%,17% 100%,0 70%); animation: padTap .7s steps(2) infinite; }
.gamepad i { position: absolute; left: 19%; top: 27%; width: 8%; height: 30%; background: #333648; box-shadow: -.2vw .08vw #333648,.2vw .08vw #333648; }.gamepad b { position: absolute; width: 7%; aspect-ratio: 1; right: 18%; top: 27%; background: #ed579a; }.gamepad b:last-child { right: 8%; top: 48%; background: var(--cyan); }
.gamer-legs { position: absolute; z-index: 1; left: 16%; bottom: 0; width: 75%; height: 28%; }.gamer-legs i { position: absolute; bottom: 0; width: 43%; height: 100%; background: #252b47; border: .3vw solid #111220; }.gamer-legs i:first-child { left: 0; transform: rotate(6deg); }.gamer-legs i:last-child { right: 0; transform: rotate(-6deg); }
.anger-cloud,.anger-mark { position: absolute; z-index: 12; opacity: 0; visibility: hidden; }
.anger-cloud { left: -17%; top: -12%; padding: 7%; color: #111220; background: #f4ecd8; border: .25vw solid #111220; font-size: clamp(5px,.7vw,11px); }
.anger-mark { right: -3%; top: -5%; color: var(--red); font-size: clamp(18px,2.4vw,38px); text-shadow: .2vw .2vw #8c263e; }
.gamer-two .anger-cloud { left: auto; right: -22%; }

.console-unit { position: absolute; z-index: 5; right: 21%; bottom: 8%; width: 8%; height: 30%; }
.console-wing,.console-core { position: absolute; bottom: 0; height: 100%; display: block; }.console-wing { width: 38%; background: #f0eee7; border: .2vw solid #111220; }.console-wing.left { left: 8%; clip-path: polygon(30% 0,100% 6%,83% 100%,0 100%); }.console-wing.right { right: 8%; clip-path: polygon(0 6%,70% 0,100% 100%,17% 100%); }.console-core { left: 42%; width: 20%; background: #151724; }
.console-unit b { position: absolute; z-index: 2; left: 34%; top: 13%; width: 4%; height: 60%; background: var(--cyan); box-shadow: 0 0 .5vw var(--cyan); animation: consoleGlow 2s steps(2) infinite; }
.lounge-table { position: absolute; z-index: 9; right: 2.5%; bottom: 5%; width: 17%; height: 31%; }
.lounge-top { position: absolute; z-index: 3; left: 0; top: 58%; width: 100%; height: 11%; display: block; background: #9f6262; border: clamp(2px,.28vw,4px) solid #111220; box-shadow: inset 0 -.35vw #693f49; transform: skewX(-5deg); }
.lounge-leg { position: absolute; z-index: 2; top: 66%; width: 7%; height: 34%; display: block; background: #69434b; border: clamp(1px,.18vw,3px) solid #111220; }.lounge-leg.left { left: 13%; }.lounge-leg.right { right: 13%; }
.hookah { position: absolute; z-index: 5; left: 7%; top: 1%; width: 30%; height: 59%; }
.hookah-bowl { position: absolute; left: 34%; top: 0; width: 34%; height: 15%; background: #d68b48; border: clamp(1px,.16vw,3px) solid #111220; clip-path: polygon(15% 0,85% 0,100% 40%,78% 100%,22% 100%,0 40%); }
.hookah-stem { position: absolute; left: 46%; top: 13%; width: 12%; height: 51%; background: #c5b079; border-inline: clamp(1px,.12vw,2px) solid #111220; }
.hookah-flask { position: absolute; left: 23%; bottom: 0; width: 55%; height: 39%; background: linear-gradient(#65d3cf 0 48%,#427c94 49%); border: clamp(2px,.2vw,3px) solid #111220; clip-path: polygon(32% 0,68% 0,100% 70%,83% 100%,17% 100%,0 70%); }
.hookah-hose { position: absolute; left: 52%; top: 33%; width: 100%; height: 57%; border: clamp(2px,.2vw,3px) solid #d77b9f; border-left: 0; border-top: 0; border-radius: 0 0 90% 0; transform: rotate(-8deg); }
.smoke { position: absolute; left: 42%; width: 34%; height: 19%; border: clamp(2px,.18vw,3px) solid rgba(211,229,232,.72); border-bottom: 0; border-radius: 50% 50% 0 0; animation: hookahSmoke 2.2s steps(4) infinite; }.smoke.one { top: -18%; }.smoke.two { top: -37%; left: 61%; animation-delay: 1.1s; }
.juice-carafe { position: absolute; z-index: 5; left: 48%; top: 26%; width: 22%; height: 34%; background: linear-gradient(90deg,rgba(221,238,224,.72),rgba(255,247,212,.35)); border: clamp(2px,.2vw,3px) solid #111220; clip-path: polygon(35% 0,67% 0,72% 22%,95% 40%,100% 100%,0 100%,5% 40%,30% 22%); }
.juice-carafe::before { content: ""; position: absolute; inset: 48% 10% 8%; background: #ec8a2e; box-shadow: inset 0 .3vw #ffc34f; }.juice-carafe::after { content: ""; position: absolute; right: -43%; top: 31%; width: 45%; height: 43%; border: clamp(2px,.18vw,3px) solid #d9ddd0; border-left: 0; }
.juice-carafe i { position: absolute; z-index: 2; left: 28%; top: -10%; width: 45%; height: 10%; background: #e4dfcc; border: 1px solid #111220; }
.juice-glass { position: absolute; z-index: 5; top: 43%; width: 10%; height: 18%; background: linear-gradient(transparent 0 35%,#ec8a2e 36%); border: clamp(1px,.15vw,2px) solid #dce2d8; clip-path: polygon(0 0,100% 0,85% 100%,15% 100%); }.glass-one { left: 75%; }.glass-two { left: 87%; }
.controller-wire { position: absolute; z-index: 3; left: 45%; bottom: 3%; width: 25%; height: 20%; border: .25vw solid #090a12; border-top: 0; }
.upper-label,.lower-label { position: absolute; z-index: 14; margin: 0; color: rgba(190,231,224,.58); font-size: clamp(4px,.48vw,8px); letter-spacing: .08em; }.upper-label { right: 3%; bottom: 2%; }

.floor-divider { position: absolute; z-index: 35; left: 0; top: 50%; width: 100%; height: clamp(18px,3.2vh,34px); transform: translateY(-50%); display: flex; overflow: hidden; background: #151620; border-block: clamp(3px,.4vw,6px) solid #070810; box-shadow: 0 0 1.2vw rgba(0,0,0,.9); }
.floor-divider i { flex: 1; background: var(--yellow); clip-path: polygon(0 0,55% 0,100% 50%,55% 100%,0 100%,45% 50%); margin-right: -2%; }
.floor-divider i:nth-child(even) { background: #20212b; }

.lower-photo { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 52%; filter: saturate(1.08) contrast(1.06) brightness(.9); opacity: .96; image-rendering: pixelated; }
.lower-shade { position: absolute; z-index: 1; inset: 0; background: radial-gradient(circle at 20% 38%,rgba(255,42,170,.16),transparent 36%), radial-gradient(circle at 80% 32%,rgba(102,30,220,.16),transparent 37%), linear-gradient(rgba(7,6,13,.02),rgba(7,6,13,.24)); }
.brick-grid { position: absolute; z-index: 2; inset: 0; opacity: .22; background: repeating-linear-gradient(0deg,transparent 0 13%,#030308 13% 14%), repeating-linear-gradient(90deg,transparent 0 24%,#030308 24% 25%); mix-blend-mode: multiply; }
.neon-cable { position: absolute; z-index: 4; top: 8%; height: 5%; border-top: clamp(2px,.4vw,5px) solid var(--pink); filter: drop-shadow(0 0 .45vw var(--pink)); animation: neonFlicker 3.4s steps(4) infinite; }.cable-one { left: -3%; width: 52%; transform: rotate(3deg); border-radius: 50%; }.cable-two { right: -4%; width: 59%; transform: rotate(-4deg); border-radius: 50%; animation-delay: .7s; }
.hanging-lamp { position: absolute; z-index: 4; top: 0; width: .25vw; height: 25%; background: #67516d; }.hanging-lamp::after { content: ""; position: absolute; left: 50%; bottom: 0; width: clamp(8px,1.5vw,18px); aspect-ratio: 1; transform: translateX(-50%); background: var(--pink); border: .25vw solid #111220; box-shadow: 0 0 1.2vw var(--pink); }.lamp-one { left: 32%; }.lamp-two { right: 18%; height: 20%; }

.graffiti { position: absolute; z-index: 3; left: 2%; top: 22%; width: 42%; height: 51%; transform: rotate(-3deg); pointer-events: none; }
.graffiti strong { position: absolute; left: 0; top: 20%; color: #c7ef1d; font-size: clamp(14px,3.5vw,54px); letter-spacing: -.08em; -webkit-text-stroke: clamp(1px,.22vw,3px) #101112; text-shadow: .3vw .3vw #15151c; }
.graffiti-face { position: absolute; left: 8%; top: -4%; color: #ece7dc; font-size: clamp(13px,3vw,48px); transform: rotate(4deg); }.graffiti-bolt { position: absolute; right: 3%; top: 0; color: var(--yellow); font-size: clamp(22px,5vw,70px); }
.tag { position: absolute; font-size: clamp(5px,.65vw,10px); }.tag-one { left: 23%; bottom: 1%; color: var(--pink); }.tag-two { right: 9%; bottom: 15%; color: var(--orange); font-size: clamp(8px,1.3vw,20px); }

.riot-zone { position: absolute; z-index: 9; left: 27%; right: 4%; top: 12%; bottom: 2%; }
.riot-person { position: absolute; bottom: 4%; width: 24%; height: 60%; transform-origin: 50% 90%; }
.riot-one { left: 20%; animation: riotBounce .8s steps(3) infinite; }.riot-two { right: 16%; animation: riotBounce .75s steps(3) .2s infinite reverse; }
.riot-head { position: absolute; z-index: 7; left: 26%; top: 0; width: 49%; height: 27%; }
.hood { position: absolute; inset: 0; display: block; background: #e7e8df; border: clamp(2px,.3vw,4px) solid #10111c; clip-path: polygon(20% 0,80% 0,100% 35%,88% 100%,12% 100%,0 35%); }
.visor { position: absolute; z-index: 2; left: 23%; top: 15%; width: 55%; height: 44%; background: #222637; border: .22vw solid #10111c; box-shadow: inset .4vw .3vw #5a315f; }
.mask { position: absolute; z-index: 3; left: 25%; bottom: 6%; width: 52%; height: 34%; background: #a8a7a0; border: .2vw solid #10111c; clip-path: polygon(15% 0,85% 0,100% 75%,65% 100%,35% 100%,0 75%); }
.mask::after { content: ""; position: absolute; inset: 25% 32%; background: #3a3c45; }
.riot-body { position: absolute; z-index: 4; left: 18%; top: 24%; width: 66%; height: 47%; background: #ecece4; border: clamp(2px,.35vw,5px) solid #10111c; clip-path: polygon(14% 0,86% 0,100% 100%,0 100%); box-shadow: inset 0 -.7vw #c3c7c5; }
.riot-body i { position: absolute; left: 47%; top: 0; width: 7%; height: 100%; background: #328dcc; }.riot-body b { position: absolute; left: 10%; top: 63%; width: 81%; height: 7%; background: #328dcc; }
.riot-arm { position: absolute; z-index: 3; top: 34%; width: 48%; height: 14%; background: #e8e9e2; border: clamp(2px,.3vw,4px) solid #10111c; box-shadow: inset 0 -.35vw #c4c8c6; }
.riot-arm i { position: absolute; top: -15%; width: 22%; height: 130%; background: #e58a3f; border: clamp(2px,.2vw,3px) solid #10111c; }
.riot-one .arm-up { left: 68%; transform: rotate(-30deg); transform-origin: 0 50%; animation: armSmash .55s steps(2) infinite; }.riot-one .arm-up i { right: -14%; }
.riot-one .arm-bat { right: 68%; transform: rotate(24deg); transform-origin: 100% 50%; }.riot-one .arm-bat i { left: -14%; }
.riot-two .arm-up { right: 68%; transform: rotate(30deg); transform-origin: 100% 50%; animation: armSmashRight .58s steps(2) infinite; }.riot-two .arm-up i { left: -14%; }
.riot-two .arm-bat { left: 68%; transform: rotate(-24deg); transform-origin: 0 50%; }.riot-two .arm-bat i { right: -14%; }
.pixel-bat { position: absolute; z-index: 8; width: 9%; height: 65%; transform-origin: 50% 92%; background: #e3b43a; border: clamp(2px,.25vw,4px) solid #10111c; box-shadow: inset .55vw 0 #6f473c; }
.pixel-bat::before { content: ""; position: absolute; left: -35%; bottom: -4%; width: 170%; height: 9%; background: #d77b39; border: 2px solid #10111c; }
.bat-one { left: -9%; top: -9%; transform: rotate(-20deg); animation: batSwing .55s steps(2) infinite; }.bat-two { right: -9%; top: -9%; transform: rotate(20deg); animation: batSwingRight .58s steps(2) infinite; }
.riot-legs { position: absolute; z-index: 2; left: 17%; bottom: 0; width: 68%; height: 34%; }.riot-legs i { position: absolute; bottom: 0; width: 43%; height: 100%; background: #e5e7df; border: .35vw solid #10111c; box-shadow: inset 0 -.8vw #babfbd; }.riot-legs i:first-child { left: 0; transform: rotate(7deg); }.riot-legs i:last-child { right: 0; transform: rotate(-7deg); }
.riot-legs i::after { content: ""; position: absolute; bottom: -4%; width: 125%; height: 15%; background: #4b382f; border: .2vw solid #10111c; }
.impact { position: absolute; z-index: 12; padding: 1.2%; color: #111220; background: var(--yellow); border: .25vw solid #111220; font-size: clamp(5px,.8vw,13px); opacity: 0; animation: impactPop 1.1s steps(3) infinite; }.impact-one { left: 3%; top: 17%; transform: rotate(-10deg); }.impact-two { right: 0; top: 25%; color: #fff; background: var(--pink); animation-delay: .45s; }
.debris { position: absolute; z-index: 11; width: 2%; aspect-ratio: 1; background: var(--yellow); animation: debris 1.1s steps(4) infinite; }.d1 { left: 11%; top: 41%; }.d2 { left: 44%; top: 21%; animation-delay:.3s;background:var(--pink); }.d3 { right: 8%; top: 49%; animation-delay:.5s; }.d4 { right: 38%; top: 31%; animation-delay:.7s;background:var(--cyan); }

.barrel { position: absolute; z-index: 7; left: 4%; bottom: 3%; width: 13%; height: 27%; background: #5a334b; border: .35vw solid #10111c; border-radius: 45% 45% 12% 12%; box-shadow: inset 0 .8vw #90465e; transform: rotate(-4deg); }.barrel i { position: absolute; left: 0; right: 0; top: 45%; height: 9%; background: #161621; }.barrel span { position: absolute; left: 13%; top: 20%; color: var(--pink); font-size: clamp(7px,1.2vw,19px); transform: rotate(-8deg); }
.broken-table { position: absolute; z-index: 6; right: -2%; bottom: 2%; width: 21%; height: 22%; }.broken-table i { position: absolute; bottom: 0; width: 6%; height: 72%; background: #5c3a42; border: .2vw solid #10111c; }.broken-table i:first-child { left: 13%; transform: rotate(8deg); }.broken-table i:nth-child(2) { right: 17%; transform: rotate(-13deg); }.broken-table span { position: absolute; top: 5%; left: 0; width: 100%; height: 28%; background: #9b5b65; border: .3vw solid #10111c; transform: rotate(4deg); }
.wrecked-monitor { position: absolute; z-index: 6; left: 43%; bottom: 3%; width: 13%; height: 23%; transform: rotate(-8deg); animation: monitorRattle .45s steps(2) infinite; }
.monitor-screen { position: absolute; left: 0; top: 0; width: 100%; height: 64%; display: block; overflow: hidden; background: #1b1c29; border: clamp(3px,.4vw,6px) solid #090a12; box-shadow: inset 0 0 1vw rgba(255,70,92,.45); }
.monitor-screen::after { content: ""; position: absolute; inset: 14%; background: repeating-linear-gradient(0deg,#30142c 0 15%,#702443 15% 19%); }
.monitor-screen b { position: absolute; z-index: 2; left: 48%; top: 0; width: 3%; height: 65%; background: var(--cyan); transform-origin: bottom; }.monitor-screen b:nth-child(1) { transform: rotate(35deg); }.monitor-screen b:nth-child(2) { transform: rotate(-42deg); }.monitor-screen b:nth-child(3) { top: 45%; transform: rotate(78deg); }
.monitor-neck { position: absolute; left: 45%; top: 62%; width: 12%; height: 27%; display: block; background: #5f5262; }.monitor-foot { position: absolute; left: 22%; bottom: 3%; width: 58%; height: 8%; display: block; background: #6f5665; border: 2px solid #10111c; transform: rotate(-5deg); }
.wrecked-monitor span { position: absolute; z-index: 3; left: 9%; top: 18%; color: var(--red); font-size: clamp(4px,.5vw,8px); line-height: 1.5; }
.flying-chair { position: absolute; z-index: 5; right: 2%; bottom: 7%; width: 10%; height: 17%; transform: rotate(-18deg); opacity: .82; }
.flying-chair i { position: absolute; display: block; background: #9a5963; border: clamp(2px,.22vw,3px) solid #10111c; }.flying-chair i:nth-child(1) { left: 10%; top: 2%; width: 76%; height: 39%; }.flying-chair i:nth-child(2) { left: 4%; top: 40%; width: 90%; height: 19%; }.flying-chair i:nth-child(3),.flying-chair i:nth-child(4) { bottom: 0; width: 10%; height: 47%; }.flying-chair i:nth-child(3) { left: 12%; transform: rotate(8deg); }.flying-chair i:nth-child(4) { right: 10%; transform: rotate(-8deg); }
.smash-crater { position: absolute; z-index: 5; left: 18%; bottom: 2%; width: 19%; height: 12%; animation: craterFlash .7s steps(2) infinite; }.smash-crater i { position: absolute; left: 48%; bottom: 0; width: 4%; height: 100%; background: var(--yellow); transform-origin: bottom; }.smash-crater i:nth-child(2) { transform: rotate(45deg); }.smash-crater i:nth-child(3) { transform: rotate(-45deg); }.smash-crater i:nth-child(4) { transform: rotate(72deg); }.smash-crater i:nth-child(5) { transform: rotate(-72deg); }
.chaos-words { position: absolute; z-index: 15; inset: 0; pointer-events: none; }.chaos-words span { position: absolute; padding: .6%; color: #111220; background: var(--yellow); border: clamp(2px,.22vw,3px) solid #111220; font-size: clamp(6px,1vw,16px); text-shadow: none; animation: wordPunch 1.2s steps(3) infinite; }.chaos-words span:nth-child(1) { left: 19%; top: 38%; transform: rotate(-12deg); }.chaos-words span:nth-child(2) { right: 8%; top: 31%; color: #fff; background: var(--pink); animation-delay: .45s; }.chaos-words span:nth-child(3) { left: 49%; bottom: 14%; color: #fff; background: var(--red); animation-delay: .8s; }
.floor-debris { position: absolute; z-index: 13; inset: 45% 4% 1%; pointer-events: none; }.floor-debris i { position: absolute; width: clamp(5px,1vw,14px); aspect-ratio: 1; background: var(--cyan); border: 2px solid #10111c; animation: shardFly 1.3s steps(4) infinite; }.floor-debris i:nth-child(1){left:8%;top:65%}.floor-debris i:nth-child(2){left:26%;top:32%;background:var(--yellow);animation-delay:.2s}.floor-debris i:nth-child(3){left:42%;top:72%;background:var(--pink);animation-delay:.4s}.floor-debris i:nth-child(4){left:59%;top:18%;background:var(--red);animation-delay:.6s}.floor-debris i:nth-child(5){left:72%;top:66%;background:var(--yellow);animation-delay:.8s}.floor-debris i:nth-child(6){left:86%;top:27%;background:var(--pink);animation-delay:1s}.floor-debris i:nth-child(7){left:94%;top:77%;animation-delay:.5s}
.lower-label { left: 2%; bottom: 2%; color: rgba(255,83,182,.7); }

.tv-bridge { position: absolute; z-index: 50; left: 50%; top: 50%; width: clamp(270px,60vw,760px); height: clamp(128px,23vh,270px); transform: translate(-50%,-50%); }
.tv-zone { position: absolute; z-index: 4; inset: 0 8%; cursor: pointer; outline: none; }
.tv-set { position: absolute; inset: 0; background: #141623; border: clamp(5px,.7vw,10px) solid #090a12; box-shadow: clamp(4px,.6vw,8px) clamp(5px,.8vw,11px) #080910,0 0 2vw rgba(90,226,229,.24); }
.tv-screen { position: absolute; inset: 5% 4% 9%; overflow: hidden; background: #214c61; border: clamp(2px,.25vw,4px) solid #43465c; }
.game-scene { position: absolute; inset: 0; overflow: hidden; background: #387d91; transition: filter .1s steps(2),opacity .1s steps(2); animation: gameDrift 3.5s steps(4) infinite; }
.game-sky { position: absolute; inset: 0 0 45%; background: linear-gradient(#294b70,#55a0a0); }
.mountain { position: absolute; bottom: 31%; background: #2e516b; clip-path: polygon(50% 0,100% 100%,0 100%); }.mountain.one { left: -5%; width: 58%; height: 51%; }.mountain.two { right: -7%; width: 69%; height: 62%; background: #263f5c; }
.game-ground { position: absolute; inset: 63% 0 0; background: repeating-linear-gradient(90deg,#326b55 0 9%,#3b795d 9% 18%); border-top: clamp(2px,.35vw,5px) solid #77b367; }
.game-hero,.game-enemy { position: absolute; z-index: 2; bottom: 15%; width: 5%; height: 19%; }.game-hero { left: 29%; background: var(--yellow); box-shadow: 0 -.65vw var(--cream),-.35vw .7vw #3558a0,.35vw .7vw #3558a0; animation: heroMove 1s steps(2) infinite; }.game-enemy { right: 23%; background: var(--red); box-shadow: 0 -.6vw #6e2d4f,-.4vw .5vw #7d3544,.4vw .5vw #7d3544; }
.game-hud { position: absolute; z-index: 3; top: 6%; left: 4%; display: flex; gap: 3px; color: #fff; font-size: clamp(4px,.45vw,7px); }.game-hud i { width: clamp(4px,.55vw,8px); height: clamp(3px,.4vw,6px); background: var(--red); }
.scanlines { position: absolute; z-index: 8; inset: 0; pointer-events: none; opacity: .12; background: repeating-linear-gradient(0deg,transparent 0 3px,#fff 3px 4px); animation: screenFlicker 2.8s steps(3) infinite; }
.tv-led { position: absolute; right: 6%; bottom: 2%; width: 1.5%; aspect-ratio: 1; background: var(--cyan); box-shadow: 0 0 .6vw var(--cyan); }
.speaker { position: absolute; z-index: 3; top: 18%; width: 8%; height: 65%; background: #191a29; border: clamp(3px,.35vw,5px) solid #090a12; }.speaker-left { left: 0; }.speaker-right { right: 0; }.speaker i { position: absolute; left: 23%; width: 54%; aspect-ratio: 1; background: #0d0e18; border: clamp(1px,.2vw,3px) solid #55586e; border-radius: 50%; }.speaker i:first-child { top: 12%; }.speaker i:last-child { bottom: 11%; }
.tv-hint { position: absolute; z-index: 5; left: 50%; bottom: -15%; width: max-content; margin: 0; transform: translateX(-50%); color: rgba(225,242,236,.62); font-size: clamp(5px,.55vw,9px); animation: hintBlink 1.8s steps(2) infinite; }.touch-hint { display: none; }

.pause-menu { position: absolute; z-index: 7; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2%; background: rgba(5,7,16,.84); opacity: 0; visibility: hidden; transform: translateY(-3%); transition: opacity .08s steps(2),transform .08s steps(2),visibility .08s; }
.pause-menu p { margin: 0 0 1%; color: var(--yellow); font-size: clamp(7px,1vw,15px); text-shadow: .15vw .15vw #8b3d5d; }.pause-menu a { position: relative; min-width: 72%; padding: clamp(4px,.55vh,7px) 4% clamp(4px,.55vh,7px) 11%; color: #eff8ed; text-decoration: none; line-height: 1.1; font-size: clamp(6px,.7vw,11px); border: 2px solid transparent; }.pause-menu a span { position: absolute; left: 4%; color: var(--cyan); opacity: .5; }.pause-menu a.phone-link { color: #ffd68a; }.pause-menu a:hover,.pause-menu a:focus-visible { color: #10111d; background: var(--cyan); border-color: #e9ffff; outline: 2px solid #10111d; transform: translateX(2%); }.pause-menu a:hover span,.pause-menu a:focus-visible span { color: #10111d; opacity: 1; }.pause-menu small { margin-top: 1%; color: #8794a7; font-size: clamp(4px,.42vw,7px); }

.building.pause-active .game-scene { filter: brightness(.28) saturate(.45); opacity: .7; animation-play-state: paused; }.building.pause-active .pause-menu { opacity: 1; visibility: visible; transform: none; }.building.pause-active .tv-set { box-shadow: .5vw .6vw #080910,0 0 2.2vw rgba(255,70,92,.36); }.building.pause-active .tv-hint { opacity: 0; }
.building.pause-active .gamer { animation: angryShake .16s steps(2) infinite; }.building.pause-active .gamer-two { animation-delay: .08s; }.building.pause-active .anger-cloud,.building.pause-active .anger-mark { opacity: 1; visibility: visible; animation: ragePop .35s steps(2) both; }.building.pause-active .gamer-face b { top: 31%; height: 8%; transform: rotate(13deg); animation: none; }.building.pause-active .gamer-face b:nth-child(2) { transform: rotate(-13deg); }.building.pause-active .gamer-face em { transform: rotate(-8deg); }.building.pause-active .gamer-two .gamer-head { transform: translateX(8%) rotate(7deg); }.building.pause-active .gamepad { animation: angryPad .12s steps(2) infinite; }

.project-tag { position: absolute; z-index: 70; left: max(12px,env(safe-area-inset-left)); top: max(12px,env(safe-area-inset-top)); padding: clamp(7px,.8vw,12px); color: var(--cyan); background: #10121e; border: clamp(2px,.2vw,3px) solid #526c7e; box-shadow: 4px 4px #080910; font-size: clamp(6px,.6vw,10px); cursor: pointer; }.project-tag span { color: var(--pink); }.project-tag:hover,.project-tag:focus-visible { color: #111220; background: var(--cyan); outline: none; transform: translate(2px,2px); box-shadow: 2px 2px #080910; }
.pixel-modal { position: absolute; z-index: 100; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(5,6,14,.78); }.pixel-modal[hidden] { display: none; }.modal-window { position: relative; width: min(84vw,520px); padding: clamp(35px,6vw,65px) clamp(22px,5vw,52px) clamp(24px,4vw,45px); color: #eef0e4; background: #252642; border: clamp(5px,.65vw,9px) solid #10111e; outline: 3px solid var(--cyan); box-shadow: 10px 10px #070811; text-align: center; }.modal-window::before { content: ""; position: absolute; inset: 3%; border: 2px dashed #565c78; pointer-events: none; }.modal-label { color: var(--cyan); font-size: clamp(7px,1vw,11px); }.modal-window h1 { margin: 8% 0; color: var(--yellow); font-size: clamp(15px,2vw,26px); }.modal-window > p:not(.modal-label) { margin: 0 auto 9%; line-height: 2; font-size: clamp(8px,1vw,12px); }.modal-close { position: absolute; z-index: 2; top: 7%; right: 5%; width: 34px; aspect-ratio: 1; padding: 0; color: var(--red); background: #111326; border: 2px solid #6a3650; cursor: pointer; }.modal-ok { position: relative; z-index: 2; padding: 10px 28px; color: #111220; background: var(--yellow); border: 3px solid #111220; box-shadow: 4px 4px #10111e; cursor: pointer; }

@keyframes roomPulse { 50%{opacity:.65} }
@keyframes coopGlow { 0%,100%{opacity:1} 48%{opacity:.72} 50%{opacity:.25} 53%{opacity:1} }
@keyframes hookahSmoke { 0%{opacity:0;transform:translate(0,25%) scale(.7)} 35%{opacity:.72} 100%{opacity:0;transform:translate(45%,-85%) scale(1.15)} }
@keyframes blink { 0%,94%,100%{transform:scaleY(1)} 95%,98%{transform:scaleY(.12)} }
@keyframes hands { 50%{margin-top:1.8%} }
@keyframes padTap { 50%{transform:translateY(5%)} }
@keyframes consoleGlow { 50%{background:#e4ffff;box-shadow:0 0 .7vw var(--cyan)} }
@keyframes neonFlicker { 0%,92%,100%{opacity:1} 93%{opacity:.25} 96%{opacity:.7} }
@keyframes riotBounce { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-2%) rotate(1deg)} }
@keyframes armSmash { 0%{transform:rotate(-34deg)} 100%{transform:rotate(5deg)} }
@keyframes armSmashRight { 0%{transform:rotate(34deg)} 100%{transform:rotate(-5deg)} }
@keyframes batSwing { 0%{transform:rotate(-18deg)} 100%{transform:rotate(-48deg)} }
@keyframes batSwingRight { 0%{transform:rotate(18deg)} 100%{transform:rotate(48deg)} }
@keyframes impactPop { 0%,54%,100%{opacity:0;transform:scale(.5) rotate(-10deg)} 58%,78%{opacity:1;transform:scale(1) rotate(-10deg)} }
@keyframes debris { 0%{transform:translate(0) rotate(0);opacity:0} 20%{opacity:1} 100%{transform:translate(180%,-300%) rotate(180deg);opacity:0} }
@keyframes monitorRattle { 0%{transform:rotate(-10deg) translateX(-2%)} 100%{transform:rotate(-6deg) translateX(2%)} }
@keyframes chairFly { 0%{transform:translate(0,25%) rotate(5deg)} 50%{transform:translate(-28%,-18%) rotate(95deg)} 100%{transform:translate(-55%,18%) rotate(185deg)} }
@keyframes craterFlash { 50%{filter:brightness(1.8);transform:scale(1.08)} }
@keyframes wordPunch { 0%,45%,100%{opacity:0;transform:scale(.4) rotate(-12deg)} 50%,78%{opacity:1;transform:scale(1) rotate(-12deg)} }
@keyframes shardFly { 0%{transform:translate(0,0) rotate(0);opacity:0} 18%{opacity:1} 100%{transform:translate(80%,-220%) rotate(180deg);opacity:0} }
@keyframes gameDrift { 0%,100%{transform:translate(0)} 50%{transform:translate(-1%,1%)} }
@keyframes heroMove { 50%{transform:translateY(-10%)} }
@keyframes screenFlicker { 0%,100%{opacity:.08} 48%{opacity:.16} 50%{opacity:.04} }
@keyframes hintBlink { 50%{opacity:.22} }
@keyframes angryShake { 0%{transform:translate(-1.5%) rotate(-1deg)} 100%{transform:translate(1.5%) rotate(1deg)} }
@keyframes angryPad { 0%{transform:translate(-2%,-4%) rotate(-4deg)} 100%{transform:translate(2%,4%) rotate(4deg)} }
@keyframes ragePop { 0%{transform:scale(.2)} 60%{transform:scale(1.2)} 100%{transform:scale(1)} }

@media (max-width: 600px) {
  .sign-frame { left: 4%; top: 9%; width: 26%; height: 25%; }
  .mannequin-frame { right: 2%; top: 8%; width: 22%; height: 41%; }
  .coop-neon { left: 34%; top: 9%; width: 34%; height: 19%; grid-template-columns: 29% 1fr; padding: 1.5%; }
  .coop-neon strong { font-size: clamp(7px,2.7vw,14px); }
  .coop-neon > span { font-size: clamp(5px,1.7vw,8px); }
  .coop-neon small { font-size: clamp(3px,.95vw,5px); }
  .top-shelf { top: 40%; width: 26%; }
  .floor-lamp { left: 29%; bottom: 15%; width: 10%; height: 35%; }
  .sofa { left: 2%; bottom: 5%; width: 64%; height: 38%; }
  .gamers { left: 9%; bottom: 9%; width: 51%; height: 40%; }
  .console-unit { right: 21%; bottom: 7%; width: 11%; height: 23%; }
  .lounge-table { z-index: 20; left: 71%; right: auto; bottom: 21%; width: 27%; height: 29%; transform: translateX(-52%); }
  .upper-label { display: none; }
  .tv-bridge { width: min(98vw,540px); height: clamp(132px,20.5vh,190px); }
  .tv-zone { inset-inline: 7%; }
  .speaker { width: 7%; }
  .pause-menu { gap: 1.5%; }
  .pause-menu a { min-width: 86%; padding-block: clamp(4px,.55vh,6px); font-size: clamp(6px,1.75vw,9px); }
  .pause-menu p { font-size: clamp(8px,2.7vw,14px); }
  .pause-menu small { display: none; }
  .touch-hint { display: inline; }.desktop-hint { display: none; }
  .tv-hint { bottom: -14%; font-size: clamp(6px,1.8vw,9px); }
  .lower-photo { object-position: 43% center; }
  .graffiti { left: 1%; top: 25%; width: 47%; }
  .graffiti strong { font-size: clamp(14px,5.2vw,31px); }
  .graffiti-face { font-size: clamp(14px,5vw,28px); }
  .riot-zone { left: 8%; right: 5%; top: 18%; bottom: 2%; }
  .riot-person { bottom: 6%; width: 23%; height: 55%; }
  .riot-one { left: 19%; }.riot-two { left: 58% !important; right: auto !important; }
  .barrel { left: 2%; width: 17%; height: 22%; }
  .broken-table { width: 27%; }
  .project-tag { top: max(9px,env(safe-area-inset-top)); left: max(9px,env(safe-area-inset-left)); }
}

@media (max-width: 360px) {
  .mannequin-frame { width: 20%; height: 34%; }
  .coop-neon { left: 33%; width: 35%; height: 17%; }
  .top-shelf { display: none; }
  .sofa { width: 68%; }
  .gamers { width: 55%; }
  .floor-lamp { left: 30%; }
  .tv-bridge { width: 98vw; }
  .riot-zone { left: 5%; right: 3%; }
  .riot-person { width: 22%; height: 53%; }
  .riot-one { left: 18%; }.riot-two { left: 58% !important; right: auto !important; }
  .graffiti strong { font-size: 16px; }
}

@media (max-height: 600px) {
  .sign-frame { top: 5%; height: 28%; }
  .mannequin-frame { top: 4%; height: 44%; }
  .top-shelf { display: none; }
  .floor-lamp { height: 38%; }
  .sofa { height: 48%; bottom: 1%; }
  .gamers { height: 51%; bottom: 5%; }
  .tv-bridge { height: min(31vh,155px); }
  .tv-hint { display: none; }
  .riot-zone { top: 8%; bottom: 0; }
  .riot-person { height: 69%; }
  .graffiti { top: 15%; }
  .barrel { height: 35%; }
}

@media (hover: hover) and (pointer: fine) {
  .touch-hint { display: none; }.desktop-hint { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; }
}