:root{--purple-deep: #1a0b2e;--purple: #3a1a5e;--purple-lit: #6d3aa8;--magenta: #b14bff;--neon: #e6a6ff;--ink: #0c0416;--paper: #f4f0ff}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;background:#08040f;color:var(--paper);font-family:Helvetica Neue,Arial,sans-serif;overflow:hidden;-webkit-font-smoothing:antialiased}#app{height:100vh;width:100vw;position:relative;display:grid;place-items:center;padding:2.5vmin}.stage{position:relative;width:min(94vw,1400px);aspect-ratio:3 / 2;border-radius:14px;overflow:hidden;perspective:1400px;box-shadow:0 40px 120px #000000b3;background:radial-gradient(120% 100% at 50% 0%,var(--purple) 0%,var(--purple-deep) 55%,var(--ink) 100%);cursor:crosshair}.room{position:absolute;top:0;right:0;bottom:0;left:0;transform-style:preserve-3d;transition:transform .25s ease-out}.wall{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(115deg,rgba(255,255,255,.04) 0%,transparent 40%),repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 2px,transparent 2px 120px);mix-blend-mode:screen;pointer-events:none}.wall.right{left:62%;background:linear-gradient(90deg,#00000059,#0000008c);clip-path:polygon(0 8%,100% 0,100% 100%,0 92%)}.floor{position:absolute;left:0;right:0;bottom:0;height:26%;background:linear-gradient(180deg,#0000001a,#b464ff1f);box-shadow:inset 0 20px 40px #00000080;pointer-events:none}.neon{position:absolute;top:16%;left:50%;transform:translate(-50%) rotate(-2deg);font-weight:900;font-size:clamp(28px,5.2vw,74px);letter-spacing:2px;color:#fff;text-shadow:0 0 6px #fff,0 0 16px var(--magenta),0 0 40px var(--magenta),0 0 80px var(--magenta);animation:flicker 5s infinite;-webkit-user-select:none;user-select:none;pointer-events:none;white-space:nowrap}.neon sup{font-size:.4em;vertical-align:super}@keyframes flicker{0%,19%,21%,55%,57%,to{opacity:1}20%,56%{opacity:.45}}.sign{position:absolute;background:#000;color:#fff;font-weight:800;font-size:clamp(9px,1vw,13px);letter-spacing:1px;padding:6px 10px;line-height:1.15;border:1px solid rgba(255,255,255,.15);-webkit-user-select:none;user-select:none;pointer-events:none;text-transform:uppercase}.sign small{color:var(--magenta)}.sign.camera{top:24%;right:6%}.sign.whatsup{top:55%;left:21%;transform:rotate(-1deg)}.band{position:absolute;left:-10%;width:130%;overflow:hidden;white-space:nowrap;font-weight:800;font-size:clamp(9px,1vw,12px);letter-spacing:3px;color:#fff;pointer-events:none;opacity:.85}.band span{display:inline-block;padding-right:24px}.band .track{display:inline-block;animation:scroll-left 18s linear infinite}.band.b1{top:42%;transform:rotate(-2deg);color:var(--neon)}.band.b2{top:58%;transform:rotate(-2deg)}.band.b3{bottom:12%;background:#000;padding:8px 0;font-size:clamp(11px,1.4vw,18px);transform:rotate(-1.5deg);box-shadow:0 0 30px #0009}.band.b3 .track{animation-duration:26s}@keyframes scroll-left{0%{transform:translate(0)}to{transform:translate(-50%)}}.figure{position:absolute;left:8%;bottom:0;height:78%;width:22%;font-size:clamp(80px,18vw,240px);display:grid;place-items:end center;filter:drop-shadow(0 20px 30px rgba(0,0,0,.6));animation:sway 6s ease-in-out infinite;transform-origin:bottom center;-webkit-user-select:none;user-select:none}@keyframes sway{0%,to{transform:rotate(-1deg)}50%{transform:rotate(1.5deg)}}.product{position:absolute;transform:translate(-50%,-50%);border:none;background:none;cursor:pointer;line-height:1;filter:drop-shadow(0 12px 18px rgba(0,0,0,.55));transition:transform .18s cubic-bezier(.2,1.4,.4,1),filter .18s ease;will-change:transform;padding:0;z-index:5}.product .glyph{display:block;animation:float 4s ease-in-out infinite}.product:hover{filter:drop-shadow(0 0 22px var(--magenta)) drop-shadow(0 16px 24px rgba(0,0,0,.6));z-index:20}.product:hover .glyph{animation:wobble .6s ease-in-out infinite}.product:focus-visible{outline:2px dashed var(--neon);outline-offset:8px}.product.pop{animation:pop .4s ease}@keyframes float{0%,to{transform:translateY(0) rotate(0)}50%{transform:translateY(-10px) rotate(-2deg)}}@keyframes wobble{0%,to{transform:translateY(-4px) rotate(-8deg) scale(1.18)}50%{transform:translateY(-8px) rotate(8deg) scale(1.22)}}@keyframes pop{0%{transform:translate(-50%,-50%) scale(1)}40%{transform:translate(-50%,-50%) scale(1.4)}to{transform:translate(-50%,-50%) scale(1)}}.product .tag{position:absolute;top:-14px;left:50%;transform:translate(-50%,-6px);background:var(--neon);color:var(--ink);font-weight:900;font-size:12px;padding:2px 8px;border-radius:20px;white-space:nowrap;opacity:0;transition:opacity .15s ease,transform .15s ease;pointer-events:none}.product:hover .tag{opacity:1;transform:translate(-50%)}.hud{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:18px 28px;z-index:100;pointer-events:none}.brand{font-weight:900;letter-spacing:1px;font-size:15px;text-transform:uppercase}.brand b{color:var(--neon)}.brand span{opacity:.6;font-weight:500}.hud-right{display:flex;align-items:center;gap:10px}.music{pointer-events:auto;display:grid;place-items:center;width:38px;height:38px;background:#00000080;border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:50%;cursor:pointer;font-size:16px;-webkit-user-select:none;user-select:none;transition:transform .15s ease,border-color .2s}.music:hover{border-color:var(--magenta);transform:translateY(-1px)}.music.on{border-color:var(--neon)}.cart{pointer-events:auto;display:flex;align-items:center;gap:10px;background:#00000080;border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:8px 14px;border-radius:40px;cursor:pointer;font-weight:800;font-size:13px;transition:transform .15s ease,border-color .2s}.cart:hover{border-color:var(--magenta);transform:translateY(-1px)}.cart .count{min-width:22px;height:22px;border-radius:50%;background:var(--magenta);display:grid;place-items:center;font-size:12px}.cart.bump{animation:bump .35s ease}@keyframes bump{50%{transform:scale(1.15)}}.toast-layer{position:fixed;bottom:22px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;gap:8px;z-index:200;pointer-events:none}.toast{background:#000c;border:1px solid var(--magenta);color:#fff;padding:10px 16px;border-radius:10px;font-size:13px;font-weight:600;box-shadow:0 10px 30px #00000080;animation:toast-in .3s ease,toast-out .3s ease 2.4s forwards}@keyframes toast-in{0%{opacity:0;transform:translateY(10px)}}@keyframes toast-out{to{opacity:0;transform:translateY(-8px)}}.modal-back{position:fixed;top:0;right:0;bottom:0;left:0;background:#04010abf;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:grid;place-items:center;z-index:300;opacity:0;pointer-events:none;transition:opacity .2s ease}.modal-back.open{opacity:1;pointer-events:auto}.modal{width:min(90vw,420px);background:linear-gradient(160deg,var(--purple-lit),var(--purple-deep));border:1px solid rgba(255,255,255,.15);border-radius:18px;padding:30px 28px;text-align:center;transform:scale(.9);transition:transform .2s cubic-bezier(.2,1.4,.4,1);box-shadow:0 30px 80px #0009}.modal-back.open .modal{transform:scale(1)}.modal .big{font-size:84px;line-height:1;margin-bottom:8px}.modal h2{font-size:24px;margin-bottom:6px}.modal p{opacity:.85;font-size:14px;margin-bottom:6px}.modal .price{font-size:30px;font-weight:900;color:var(--neon);margin:12px 0 20px}.modal button.buy{width:100%;padding:14px;border:none;border-radius:12px;background:var(--magenta);color:#fff;font-weight:900;font-size:15px;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:transform .12s ease,filter .2s}.modal button.buy:hover{filter:brightness(1.15);transform:translateY(-2px)}.modal .close{position:absolute;top:16px;right:20px;background:none;border:none;color:#fff;font-size:22px;cursor:pointer;opacity:.7}.modal .close:hover{opacity:1}.hint{position:fixed;bottom:16px;left:20px;font-size:12px;opacity:.5;letter-spacing:1px;z-index:100;pointer-events:none}
