/* ════════════════════════════════════════════════════════════════ ELEVATOR — Climb & Cash Out Realistic skyscraper elevator. Muted, grounded palette. Zone theming via [data-zone] CSS variables on . ════════════════════════════════════════════════════════════════ */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent} html,body{width:100%;height:100%;overflow:hidden} button{touch-action:manipulation} /* rapid taps (CASH OUT!) must never trigger double-tap zoom or tap delay */ :root{ --ink:#e8eaef; --ink-dim:rgba(232,234,239,.45); --ink-faint:rgba(232,234,239,.22); --panel:rgba(10,12,18,.66); --panel-line:rgba(255,255,255,.07); --steel-1:#c4c8cf; --steel-2:#9aa0a9; --steel-3:#6c727c; --steel-4:#3a3f47; --good:#4cc66e; --bad:#e05151; --warn:#e0a33a; --amber:#ff9d3a; /* elevator segment display */ } /* make --accent animatable so a zone change re-lights the whole scene smoothly (graceful fallback: snaps) */ @property --accent{syntax:'';inherits:true;initial-value:#d8a24a;} /* Default zone (reception). Each zone overrides these. */ body{ --accent:#d8a24a; /* zone accent (warm brass) */ --bg1:#15110d; --bg2:#241b12; /* sky gradient */ --glow:rgba(216,162,74,.16); font-family:'Inter',sans-serif;color:var(--ink); min-height:100vh;min-height:100dvh;position:relative;overflow:hidden; display:flex;align-items:center;justify-content:center;background:#06070a; transition:--accent 1.8s ease; /* zone re-light */ } /* ── ZONE PALETTES — each tier its own light: amber → teal → champagne → violet → cold metallic ── */ body[data-zone="reception"]{--accent:#e0a04a;--glow:rgba(224,160,74,.16);} /* Lobby — warm amber, welcome */ body[data-zone="office"] {--accent:#5fb3ad;--glow:rgba(95,179,173,.16);} /* Office — cool steel/teal */ body[data-zone="luxury"] {--accent:#e6c074;--glow:rgba(230,192,116,.20);} /* Luxury — refined champagne */ body[data-zone="penthouse"] {--accent:#c96be0;--glow:rgba(201,107,224,.20);} /* Penthouse — violet/magenta drama */ body[data-zone="summit"] {--accent:#bcdcec;--glow:rgba(188,220,236,.24);} /* Sky Vault — cold metallic, dangerous */ /* ░░ ATMOSPHERE ░░ */ /* page background = LUXURY TOWER ATRIUM. Confident, symmetric architecture that actually READS: fluted onyx wall panelling, twin gold light stelae flanking the stage, a warm ceiling cone, and a grounded dark-marble base with a gold skirting line. Few elements, strong composition. */ .sky{position:fixed;inset:0;z-index:0;pointer-events:none; background: /* warm ceiling light cone onto the stage */ radial-gradient(ellipse 46% 42% at 50% 0%,rgba(212,165,74,.13),transparent 72%), /* ambient glow pooling behind the shaft */ radial-gradient(ellipse 46% 54% at 50% 46%,rgba(66,58,42,.38),transparent 74%), /* light fixtures at the stelae heads — the light has a visible source */ radial-gradient(ellipse 120px 80px at calc(50% - 341px) 10%,rgba(244,208,138,.22),transparent 70%), radial-gradient(ellipse 120px 80px at calc(50% + 341px) 10%,rgba(244,208,138,.22),transparent 70%), /* twin gold light stelae — visible vertical light blades flanking the stage (off-screen on phones) */ linear-gradient(90deg,transparent calc(50% - 350px),rgba(240,205,140,.06) calc(50% - 345px), rgba(246,214,150,.4) calc(50% - 342px) calc(50% - 340px),rgba(240,205,140,.06) calc(50% - 335px),transparent calc(50% - 330px)), linear-gradient(90deg,transparent calc(50% + 330px),rgba(240,205,140,.06) calc(50% + 335px), rgba(246,214,150,.4) calc(50% + 340px) calc(50% + 342px),rgba(240,205,140,.06) calc(50% + 345px),transparent calc(50% + 350px)), /* stelae answered by soft reflections on the polished base */ radial-gradient(ellipse 14px 110px at calc(50% - 341px) 90%,rgba(246,214,150,.10),transparent 72%), radial-gradient(ellipse 14px 110px at calc(50% + 341px) 90%,rgba(246,214,150,.10),transparent 72%), /* fluted wall panelling — rib highlight + deep shadow reveal */ repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 1.5px,transparent 1.5px 30px,rgba(0,0,0,.5) 30px 32px,transparent 32px 62px), /* gold skirting line where wall meets base */ linear-gradient(180deg,transparent 79.6%,rgba(206,158,86,.16) 79.8% 80.1%,transparent 80.4%), /* grounded dark-marble base */ linear-gradient(180deg,transparent 80%,rgba(8,7,5,.72) 90%,#0d0a07 100%), /* deep charcoal atrium walls */ linear-gradient(180deg,#131318 0%,#0b0b0f 42%,#060609 100%); transition:background 2.2s ease} /* whole-screen parallax: floor slabs + section dividers drifting by as you climb */ .bg-sections{position:fixed;left:0;right:0;top:-50%;height:200%;z-index:1;opacity:.08;pointer-events:none; background: repeating-linear-gradient(180deg,transparent 0 74px,rgba(255,255,255,.05) 74px 76px,transparent 76px 150px), repeating-linear-gradient(180deg,transparent 0 150px, color-mix(in srgb,var(--accent) 22%,transparent) 150px 153px,transparent 153px 300px); transition:opacity 1.5s} .bg-sections.moving{animation:bgScroll 2.4s linear infinite} @keyframes bgScroll{from{background-position:0 0,0 0}to{background-position:0 150px,0 300px}} /* casino-room vignette */ .vignette{position:fixed;inset:0;z-index:2;pointer-events:none; background:radial-gradient(ellipse 82% 76% at 50% 42%,transparent 56%,rgba(0,0,0,.46) 100%)} /* ░░ TIER ATMOSPHERE — grows with --tier (0 lobby → 1 summit): richer gold + more danger ░░ */ /* ZONE LIGHT — colours the room with the current zone accent; re-lights smoothly via animated --accent */ .zone-amb{position:fixed;inset:0;z-index:3;pointer-events:none;mix-blend-mode:screen;opacity:.55; background: radial-gradient(ellipse 72% 38% at 50% 12%,color-mix(in srgb,var(--accent) 32%,transparent),transparent 70%), radial-gradient(ellipse 96% 48% at 50% 100%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 72%)} .luxe{position:fixed;inset:0;z-index:150;pointer-events:none;mix-blend-mode:screen; opacity:calc(var(--tier,0) * .5);transition:opacity 2.2s ease; background: radial-gradient(ellipse 95% 46% at 50% 2%,rgba(255,206,112,.2),transparent 60%), radial-gradient(ellipse 75% 40% at 50% 100%,rgba(255,188,96,.14),transparent 66%)} .peril{position:fixed;inset:0;z-index:151;pointer-events:none; opacity:calc(var(--tier,0) * .85);transition:opacity 2.2s ease; box-shadow:inset 0 0 150px rgba(214,42,42,.5),inset 0 0 46px rgba(214,42,42,.22)} .peril::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 95px rgba(255,46,46,.55); opacity:0;animation:perilPulse 1.5s ease-in-out infinite} @keyframes perilPulse{0%,100%{opacity:0}50%{opacity:calc(var(--tier,0) * .55)}} /* ░░ SHAKE ░░ */ @keyframes shake{0%,100%{transform:translate(0,0)} 20%{transform:translate(-4px,2px)}40%{transform:translate(5px,-3px)} 60%{transform:translate(-5px,3px)}80%{transform:translate(3px,-2px)}} .shaking{animation:shake .35s cubic-bezier(.36,.07,.19,.97) both} /* fits the quicker ~620ms jolt beat */ /* ════════════════════════════════════════════════════════════════ LAYOUT — narrow sides, elevator dominates the centre ════════════════════════════════════════════════════════════════ */ /* desktop = contained app stage; the elevator tower is the commanding centrepiece, side space kept tight */ .shell{position:relative;z-index:10;width:100%;max-width:1120px;height:100vh;height:100dvh; display:grid;grid-template-rows:54px 1fr 78px;grid-template-columns:200px 1fr 200px; gap:14px;padding:10px 16px} /* minimal premium top bar — utility icons · status capsule · wallet. No logo weight; the elevator is the logo. */ .hdr{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px} .hdr-l{display:flex;align-items:center;gap:8px;flex:0 0 auto} /* quiet status capsule — carries the zone identity; pulses + re-lights on a zone change (no banner over gameplay) */ .status-cap{display:flex;align-items:center;gap:8px;min-width:0;max-width:48%; padding:6px 14px;border-radius:99px; background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 60%),rgba(10,12,18,.6); border:1px solid var(--panel-line);backdrop-filter:blur(10px); box-shadow:inset 0 1px 0 rgba(255,255,255,.04)} .cap-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--accent); box-shadow:0 0 9px var(--accent);transition:background 1.8s,box-shadow 1.8s} .cap-zone{font-size:.62rem;font-weight:700;letter-spacing:2px;text-transform:uppercase; color:color-mix(in srgb,var(--accent) 22%,var(--ink-dim)); /* quiet — the accent dot carries the zone colour */ white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color 1.8s} .status-cap.zone-in{animation:capPulse 1.2s cubic-bezier(.2,.8,.2,1)} @keyframes capPulse{0%{transform:scale(1)} 16%{transform:scale(1.045);box-shadow:0 0 22px color-mix(in srgb,var(--accent) 42%,transparent),inset 0 1px 0 rgba(255,255,255,.04)} 100%{transform:scale(1)}} .status-cap.zone-in .cap-dot{animation:dotPulse 1.2s ease-out} @keyframes dotPulse{0%,100%{transform:scale(1)}22%{transform:scale(1.55)}} /* refined wallet — smoked-glass pill, champagne coin, condensed numerals */ .bal{display:flex;align-items:center;gap:9px; background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 60%),rgba(10,12,18,.72); border:1px solid rgba(255,232,170,.16);border-top-color:rgba(255,232,170,.32); border-radius:99px;padding:6px 16px 6px 7px;box-shadow:0 2px 10px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05); backdrop-filter:blur(10px)} .bal-num{font-family:'Share Tech Mono',monospace;font-size:1.04rem;font-weight:400; letter-spacing:1px;color:var(--ink);text-shadow:0 0 10px rgba(255,232,170,.18)} .coin{width:18px;height:18px;border-radius:50%;flex-shrink:0; background:radial-gradient(circle at 36% 30%,#ffe9a8,#e0b14a 55%,#9c7320); box-shadow:0 0 0 1px rgba(0,0,0,.3),0 0 8px rgba(224,177,74,.4)} .coin.sm{width:14px;height:14px} /* ░░ CARDS ░░ */ .card{background: linear-gradient(180deg,rgba(255,255,255,.04),transparent 40%),var(--panel); border:1px solid var(--panel-line);border-top:1px solid color-mix(in srgb,var(--accent) 22%,transparent); border-radius:12px;padding:10px 12px;backdrop-filter:blur(10px);transition:border-color 2s; box-shadow:0 6px 24px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05)} .clbl{font-size:.5rem;font-weight:800;letter-spacing:2.5px;color:var(--ink-faint); text-transform:uppercase;margin-bottom:8px} /* LEFT COLUMN — compact */ .lcol{grid-column:1;grid-row:2;display:flex;flex-direction:column;gap:10px;overflow:hidden} /* bet stepper — one premium control unit (inset track + embedded round buttons) */ .bet-ctrl{display:flex;align-items:center;gap:6px;margin-bottom:9px; background:rgba(0,0,0,.26);border:1px solid var(--panel-line);border-radius:12px;padding:5px} .adj{width:36px;height:36px;border-radius:9px;flex-shrink:0;cursor:pointer; border:1px solid rgba(255,232,170,.16);color:var(--ink);font-size:1.2rem;font-weight:700; background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02)); display:flex;align-items:center;justify-content:center;transition:background .12s,border-color .15s,transform .1s} .adj:hover{border-color:rgba(255,232,170,.4)} .adj:active{background:color-mix(in srgb,var(--accent) 30%,transparent);transform:scale(.94)} .bnum{flex:1;text-align:center;font-family:'Bebas Neue',sans-serif;font-size:1.8rem;color:var(--ink); letter-spacing:1px;text-shadow:0 0 12px color-mix(in srgb,var(--accent) 40%,transparent)} /* preset chips — premium, with a clear selected state */ .prs{display:flex;gap:6px} .pr{flex:1;padding:7px 0;background:rgba(255,255,255,.035);border:1px solid var(--panel-line); border-radius:9px;color:var(--ink-dim);font-size:.72rem;font-weight:800;letter-spacing:.5px;cursor:pointer; transition:background .14s,border-color .14s,color .14s,box-shadow .14s,transform .1s} .pr:hover{color:var(--ink);border-color:color-mix(in srgb,var(--accent) 40%,var(--panel-line))} .pr:active{transform:scale(.96)} .pr.on{color:#fff;border-color:color-mix(in srgb,var(--accent) 70%,transparent); background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 30%,transparent),color-mix(in srgb,var(--accent) 13%,transparent)); box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent),0 4px 14px color-mix(in srgb,var(--accent) 18%,transparent)} .mini-card{display:flex;flex-direction:column;gap:8px} .row-lbl{display:flex;justify-content:space-between;align-items:center;font-size:.62rem;color:var(--ink-dim)} .potamt{font-family:'Bebas Neue',sans-serif;font-size:1.4rem;color:var(--accent);transition:color 2s} .rsk-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px} .rsk-lbl{font-size:.56rem;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--ink-dim)} .rsk-flr{font-family:'Share Tech Mono',monospace;font-weight:400;letter-spacing:0;color:var(--ink-faint)} /* status chip = confidence surface: a glowing dot (meaning isn't carried by colour alone) + a bold state word */ .rbadge{display:inline-flex;align-items:center;gap:5px;font-size:.56rem;font-weight:800;letter-spacing:1.4px; padding:3px 9px 3px 8px;border-radius:99px;border:1px solid transparent} .rbadge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 7px currentColor} .rb-s{background:rgba(76,198,110,.13);border-color:rgba(76,198,110,.34);color:#63d488} .rb-r{background:rgba(242,181,68,.15);border-color:rgba(242,181,68,.42);color:#f2b544} .rb-d{background:rgba(244,91,105,.18);border-color:rgba(244,91,105,.5);color:#f4657a} .rsk-track{height:7px;background:rgba(255,255,255,.06);border-radius:99px;overflow:hidden; box-shadow:inset 0 1px 2px rgba(0,0,0,.4)} .rsk-bar{height:100%;width:0%;border-radius:99px; background:linear-gradient(90deg,var(--good),var(--warn),var(--bad));transition:width .5s cubic-bezier(.4,0,.2,1)} .stat-card{margin-top:auto} .srow{display:flex;justify-content:space-between;align-items:center;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.04)} .srow:last-child{border-bottom:none} .sk{font-size:.54rem;font-weight:700;letter-spacing:1px;color:var(--ink-faint);text-transform:uppercase} .sv{font-family:'Share Tech Mono',monospace;font-size:.84rem;font-weight:700} .vg{color:var(--accent)}.vgr{color:var(--good)}.vc{color:#8fc0e0}.vt{color:var(--ink)} /* RIGHT COLUMN — muted social panels (kept low-key so the elevator stays the focus) */ .rcol{grid-column:3;grid-row:2;display:flex;flex-direction:column;gap:10px;overflow:hidden} .rcol .card{background:rgba(9,11,16,.6);border-color:rgba(255,255,255,.05);box-shadow:0 4px 16px rgba(0,0,0,.35)} .rcol .clbl{color:var(--ink-faint)} .live-card{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column} /* kept for Live Bets reintroduction */ .live-card #liveD{flex:1;min-height:0;overflow-y:auto} .hist-card{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden} .hist-card #rndsD{flex:1;min-height:0;overflow-y:auto} .empty{font-size:.6rem;color:var(--ink-faint);text-align:center;padding:14px 0} .rndrow{display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.022); border-radius:7px;padding:5px 9px;margin-bottom:5px} .rndrow:last-child{margin-bottom:0} .rfl{font-family:'Bebas Neue',sans-serif;font-size:1rem;color:var(--ink-dim)} .rmx{font-family:'Share Tech Mono',monospace;font-size:.66rem;color:var(--ink-dim)} .rtag{font-size:.46rem;font-weight:800;letter-spacing:1px;padding:2px 6px;border-radius:99px} .rt-w{background:rgba(76,198,110,.10);color:rgba(124,200,152,.85)} .rt-l{background:rgba(224,81,81,.08);color:rgba(198,132,132,.8)} .lrow{display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.022); border-radius:6px;padding:5px 9px;margin-bottom:4px;font-size:.62rem} .lrow:last-child{margin-bottom:0} .ln{color:var(--ink-dim)}.lbet{font-family:'Share Tech Mono',monospace;color:var(--ink-dim)} .lst{color:var(--ink-faint)} /* ════════════════════════════════════════════════════════════════ CENTRE — THE ELEVATOR ════════════════════════════════════════════════════════════════ */ /* centre stage: panoramic windows fill the gap, elevator stays centred */ .stage{grid-column:2;grid-row:2;display:flex;align-items:stretch;justify-content:center;gap:14px;min-height:0} .scol{flex:0 1 500px;min-width:0;display:flex;flex-direction:column;min-height:0;position:relative; filter:drop-shadow(0 16px 42px rgba(0,0,0,.55))} /* Floor indicator (the lit panel above hall doors in a real building) */ /* clean, minimal floor/multiplier bar */ /* slim, centred floor readout — the only thing above the shaft, so the cabin stays the focus */ .indicator{flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:10px; padding:7px 18px;border-radius:10px 10px 0 0; background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 55%),rgba(9,11,15,.94); border:1px solid var(--steel-4);border-bottom:none; box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--accent) 32%,transparent)} /* gold lintel edge above the shaft */ .ind-arr{font-family:'Share Tech Mono',monospace;font-size:.9rem;color:var(--amber);opacity:.22;transition:opacity .2s} .ind-arr.on{opacity:.9;animation:arrB .7s ease-in-out infinite alternate} @keyframes arrB{from{opacity:.45}to{opacity:.95}} .ind-cap{font-size:.5rem;font-weight:800;letter-spacing:3px;color:var(--ink-faint);text-transform:uppercase} .ind-num{font-family:'Share Tech Mono',monospace;font-size:clamp(1.3rem,3vw,1.7rem);color:var(--amber); letter-spacing:2px;min-width:42px;text-align:center;text-shadow:0 0 9px rgba(255,157,58,.32)} /* Shaft */ .shaft{flex:1;position:relative;min-height:0; background:linear-gradient(90deg,#171a1f 0 18px,transparent 18px), linear-gradient(270deg,#171a1f 0 18px,transparent 18px); background-repeat:no-repeat;background-position:left,right; border-left:2px solid var(--steel-4);border-right:2px solid var(--steel-4)} /* polished guide rails — thin, with a fine specular centre line */ .rail{position:absolute;top:0;bottom:0;width:5px;z-index:4;opacity:.5;border-radius:2px; background:linear-gradient(90deg,#16181d,#464c56 46%,#2b2f36 54%,#141619); box-shadow:0 0 5px rgba(0,0,0,.6),inset 0 0 0 .5px rgba(255,255,255,.05)} .rail-l{left:24px}.rail-r{right:24px} /* slim tensioned hoist cables — run from the top of the shaft down onto the cabin roof */ .cable{position:absolute;top:0;width:2px;height:calc(62% - 76px);z-index:3;opacity:.85; background:repeating-linear-gradient(180deg,#8a919c 0 6px,#4a505a 6px 11px); box-shadow:0 0 4px rgba(0,0,0,.5);transform-origin:top center; animation:cableScroll .55s linear infinite} /* small gold clamp where the cable meets the cabin roof */ .cable::after{content:'';position:absolute;bottom:-3px;left:50%;transform:translateX(-50%); width:7px;height:5px;border-radius:2px;background:linear-gradient(180deg,#e6c477,#9c7a2e)} .cable.paused{animation:none} .cable-l{left:calc(50% - 21px)}.cable-r{left:calc(50% + 18px)} @keyframes cableScroll{from{background-position:0 0}to{background-position:0 -22px}} /* on a crash the cables snap and recoil upward */ .cable.snapped{animation:cableSnap .3s ease-out forwards} @keyframes cableSnap{0%{transform:translateY(0) scaleY(1);opacity:.9} 25%{transform:translateY(-6px)}100%{transform:translateY(-42px) scaleY(.7);opacity:0}} .shaft-vp{position:absolute;inset:0 18px;overflow:hidden; background: radial-gradient(ellipse 110% 34% at 50% 72%,color-mix(in srgb,var(--accent) 11%,transparent),transparent 62%), /* subtle zone light at the cabin — kept dim so the gold cabin pops on dark */ radial-gradient(ellipse 110% 55% at 50% 4%,rgba(54,74,104,.20),transparent 70%), /* cooler, higher = farther up */ linear-gradient(90deg,rgba(2,3,5,.55),transparent 15% 85%,rgba(2,3,5,.55)), /* side walls fall away into dark — pushes the centre forward */ linear-gradient(90deg,transparent 0 24%,rgba(0,0,0,.32) 40% 60%,transparent 76%), /* recessed centre channel — the cabin travels in it */ repeating-linear-gradient(90deg,rgba(255,255,255,.016) 0 1px,transparent 1px 58px), /* back-wall panel seams */ #070809; box-shadow:inset 0 0 70px 8px rgba(4,5,8,.6)} /* darken the edges so the cabin owns the centre */ .shaft-vp::before,.shaft-vp::after{content:'';position:absolute;left:0;right:0;height:18%;z-index:14;pointer-events:none} .shaft-vp::before{top:0;background:linear-gradient(180deg,#070809,transparent)} .shaft-vp::after{bottom:0;background:linear-gradient(0deg,#070809,transparent)} /* scrolling world of floors */ /* the ride is compositor-only: anchored at bottom:0, moved via translateY (set in JS) */ .shaft-world{position:absolute;left:0;right:0;bottom:0;will-change:transform} .shaft-world.mblur{filter:blur(1.2px)} /* motion blur while travelling (desktop only — see mobile block) */ /* ── floor rows — architectural level bands. The central axis stays CLEAR for cabin + cables; level numerals live on the shaft wall (left), zone signage appears once per zone. ── */ .floor-row{position:absolute;left:0;right:0;height:150px;overflow:hidden} /* soffit shadow — the slab above casts down the wall (the strongest depth cue in the shaft) */ .floor-row::before{content:'';position:absolute;left:0;right:0;top:0;height:26px;z-index:1;pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.44),transparent)} /* refined platform edge: light lip → steel body → deep underside, with a gold hairline */ .floor-row::after{content:'';position:absolute;left:0;right:0;bottom:0;height:7px;z-index:1;pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.1) 0 1px,#3a3f48 1px 3px,#14151a 3px 100%); border-top:1px solid color-mix(in srgb,var(--accent) 24%,rgba(255,255,255,.07))} .fr-scene{position:absolute;inset:0;z-index:0;filter:brightness(1.02) saturate(1.12)} /* atmosphere, not a competitor to the cabin */ .fr-scene::before{content:'';position:absolute;inset:0} /* zone interior look */ .fr-scene::after{content:'';position:absolute;left:0;right:0;bottom:0;height:54px;z-index:1;pointer-events:none;opacity:.34; background-repeat:repeat-x;background-position:center bottom;background-size:auto 54px} /* furniture silhouette — quiet */ /* level marker — centred in the floor band (passes behind the cabin as it scrolls) */ .fr-meta{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2; display:flex;flex-direction:column;align-items:center;gap:2px} .fr-num{font-family:'Bebas Neue',sans-serif;font-size:2.3rem;line-height:.9;letter-spacing:1px;opacity:.48; transition:opacity .3s;text-shadow:0 2px 8px rgba(0,0,0,.65)} .fr-mult{font-family:'Share Tech Mono',monospace;font-size:.6rem;letter-spacing:.5px;color:var(--ink-faint)} /* zone threshold sign — an elegant building sign where the zone begins */ .fr-zone{position:absolute;top:11px;left:50%;transform:translateX(-50%);z-index:2;white-space:nowrap; font-family:'Bebas Neue',sans-serif;font-size:.92rem;letter-spacing:7px;padding-left:7px; text-transform:uppercase;opacity:.6} /* ground/entrance foundation at the very bottom of the shaft */ .ground-base{position:absolute;left:0;right:0;bottom:0;height:70px;z-index:1;pointer-events:none; background:linear-gradient(180deg,transparent,#19120a 55%,#0a0705); box-shadow:inset 0 3px 0 rgba(216,162,74,.22)} /* ZONE INTERIORS — lighter washes + recognizable furniture silhouettes (::after) */ /* Lobby: deep petrol/blue-black foundation — gold lives on the cabin and platform accents, NOT the walls */ .z-rec .fr-scene::before{background: /* faint warm platform-light spill near the floor line (accent only) */ radial-gradient(ellipse 74% 42% at 50% 100%,rgba(224,170,92,.14),transparent 68%), /* dark premium lobby walls: petrol → blue-black */ linear-gradient(180deg,#121a23 0%,#0b1119 55%,#070b11 100%)} .z-rec .fr-scene::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='144' height='46'%3E%3Crect y='40' width='144' height='6' fill='%23dcae58' opacity='.42'/%3E%3Cg fill='%23dcae58' opacity='.55'%3E%3Crect x='30' y='24' width='84' height='16' rx='2'/%3E%3Crect x='26' y='20' width='92' height='5' rx='2'/%3E%3Crect x='8' y='30' width='8' height='10'/%3E%3Cellipse cx='12' cy='25' rx='7' ry='6' opacity='.6'/%3E%3Crect x='128' y='30' width='8' height='10'/%3E%3Cellipse cx='132' cy='25' rx='7' ry='6' opacity='.6'/%3E%3C/g%3E%3C/svg%3E")} .z-rec .fr-num{color:#f3d8a2}.z-rec .fr-zone{color:#e0b25e} /* Office: dark charcoal-teal foundation — teal lives in the window-strip lights, not the walls */ .z-off .fr-scene::before{background: repeating-linear-gradient(90deg,rgba(120,206,198,.1) 0 18px,transparent 18px 42px), radial-gradient(ellipse 74% 42% at 50% 100%,rgba(95,179,173,.12),transparent 68%), linear-gradient(180deg,#0e191b 0%,#091113 55%,#060b0c 100%)} .z-off .fr-scene::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='144' height='46'%3E%3Crect y='42' width='144' height='4' fill='%237ac4bd' opacity='.4'/%3E%3Cg opacity='.6'%3E%3Crect x='4' y='34' width='30' height='8' fill='%237ac4bd'/%3E%3Crect x='52' y='34' width='30' height='8' fill='%237ac4bd'/%3E%3Crect x='100' y='34' width='30' height='8' fill='%237ac4bd'/%3E%3Crect x='12' y='22' width='15' height='10' rx='1' fill='%23c8f0ea'/%3E%3Crect x='60' y='22' width='15' height='10' rx='1' fill='%23c8f0ea'/%3E%3Crect x='108' y='22' width='15' height='10' rx='1' fill='%23c8f0ea'/%3E%3Crect x='18' y='32' width='3' height='3' fill='%237ac4bd'/%3E%3Crect x='66' y='32' width='3' height='3' fill='%237ac4bd'/%3E%3Crect x='114' y='32' width='3' height='3' fill='%237ac4bd'/%3E%3C/g%3E%3C/svg%3E")} .z-off .fr-num{color:#c4ece6}.z-off .fr-zone{color:#79c4bd} /* Luxury: espresso-black foundation — the chandelier glow is the accent, not the wall colour */ .z-lux .fr-scene::before{background: radial-gradient(circle at 50% 16%,rgba(236,196,120,.16),transparent 50%), radial-gradient(ellipse 74% 42% at 50% 100%,rgba(230,192,116,.1),transparent 68%), linear-gradient(180deg,#181310 0%,#0f0b08 55%,#090705 100%)} .z-lux .fr-scene::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='144' height='46'%3E%3Crect y='42' width='144' height='4' fill='%23e8c072' opacity='.42'/%3E%3Cg fill='%23ecc888' opacity='.6'%3E%3Crect x='35' width='2' height='6'/%3E%3Cpath d='M22 12 Q36 4 50 12 Q36 18 22 12Z' opacity='.55'/%3E%3Ccircle cx='26' cy='13' r='1.6'/%3E%3Ccircle cx='32' cy='15' r='1.6'/%3E%3Ccircle cx='36' cy='16' r='1.6'/%3E%3Ccircle cx='40' cy='15' r='1.6'/%3E%3Ccircle cx='46' cy='13' r='1.6'/%3E%3Crect x='107' width='2' height='6'/%3E%3Cpath d='M94 12 Q108 4 122 12 Q108 18 94 12Z' opacity='.55'/%3E%3Ccircle cx='98' cy='13' r='1.6'/%3E%3Ccircle cx='104' cy='15' r='1.6'/%3E%3Ccircle cx='108' cy='16' r='1.6'/%3E%3Ccircle cx='112' cy='15' r='1.6'/%3E%3Ccircle cx='118' cy='13' r='1.6'/%3E%3C/g%3E%3C/svg%3E")} .z-lux .fr-num{color:#f6daa0}.z-lux .fr-zone{color:#ecc47a} /* Penthouse: deep violet-black foundation — magenta stays in the skyline lights and top glow */ .z-pen .fr-scene::before{background: radial-gradient(ellipse 100% 42% at 50% 8%,rgba(201,107,224,.14),transparent 68%), linear-gradient(180deg,#190f22 0%,#100a16 55%,#09060d 100%)} .z-pen .fr-scene::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='144' height='46'%3E%3Crect y='42' width='144' height='4' fill='%23c96be0' opacity='.4'/%3E%3Cg fill='%23a96bd0' opacity='.55'%3E%3Crect x='6' y='22' width='12' height='20'/%3E%3Crect x='22' y='14' width='10' height='28'/%3E%3Crect x='36' y='26' width='13' height='16'/%3E%3Crect x='52' y='10' width='10' height='32'/%3E%3Crect x='66' y='20' width='12' height='22'/%3E%3Crect x='82' y='28' width='12' height='14'/%3E%3Crect x='98' y='14' width='10' height='28'/%3E%3Crect x='112' y='24' width='13' height='18'/%3E%3Crect x='128' y='18' width='10' height='24'/%3E%3C/g%3E%3Cg fill='%23f0b8ff' opacity='.75'%3E%3Crect x='9' y='26' width='2' height='2'/%3E%3Crect x='25' y='20' width='2' height='2'/%3E%3Crect x='55' y='16' width='2' height='2'/%3E%3Crect x='101' y='20' width='2' height='2'/%3E%3Crect x='131' y='24' width='2' height='2'/%3E%3C/g%3E%3C/svg%3E")} .z-pen .fr-num{color:#e7b6f2}.z-pen .fr-zone{color:#c96be0} /* Sky Vault: dark slate-blue foundation — the cold light reads as altitude, not as a bright wall */ .z-sum .fr-scene::before{background: radial-gradient(ellipse 92% 60% at 50% 26%,rgba(190,224,238,.16),transparent 70%), radial-gradient(ellipse 42% 22% at 27% 66%,rgba(255,255,255,.09),transparent 70%), radial-gradient(ellipse 38% 20% at 74% 56%,rgba(255,255,255,.07),transparent 70%), linear-gradient(180deg,#101a23 0%,#0a1119 55%,#060a0e 100%)} .z-sum .fr-scene::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='144' height='46'%3E%3Crect y='42' width='144' height='4' fill='%23bcdcec' opacity='.45'/%3E%3Ccircle cx='72' cy='14' r='9' fill='%23bcdcec' opacity='.5'/%3E%3Cg fill='%23ffffff' opacity='.42'%3E%3Cellipse cx='30' cy='30' rx='18' ry='6'/%3E%3Cellipse cx='104' cy='26' rx='16' ry='5'/%3E%3C/g%3E%3C/svg%3E")} .z-sum .fr-num{color:#e2f3ff;text-shadow:0 0 12px rgba(180,220,240,.5)}.z-sum .fr-zone{color:#bcdcec} /* active / passed floor states */ .floor-row.active .fr-num{opacity:1;text-shadow:0 0 16px currentColor,0 2px 8px rgba(0,0,0,.65)} .floor-row.active .fr-mult{color:var(--ink-dim)} .floor-row.active .fr-scene{filter:brightness(1.35) saturate(1.2)} .floor-row.active::after{border-top-color:color-mix(in srgb,var(--accent) 42%,transparent)} .floor-row.passed .fr-scene{filter:brightness(.38) saturate(.55)} .floor-row.passed .fr-num{opacity:.2} /* ── ELEVATOR CABIN — slim, tall, big clear interior ── */ .car{position:absolute;left:50%;top:62%;transform:translate(-50%,-50%);z-index:20; width:166px;display:flex;flex-direction:column;align-items:center} /* gold roof cap — brushed, with a bright specular top edge */ .car-roof{width:150px;height:9px;border-radius:5px 5px 0 0; background:linear-gradient(180deg,#fdefc0 0%,#e6c477 42%,#b58c3d 100%); box-shadow:inset 0 1px 0 rgba(255,248,224,.9),0 -2px 8px rgba(0,0,0,.5),0 0 15px rgba(214,170,96,.32)} /* premium GOLD BEZEL — a substantial brushed-gold frame (directional light) around a dark glass face */ .car-body{width:166px;height:150px;position:relative;border-radius:7px;border:1.5px solid #5e4718; background: linear-gradient(150deg,#fbe7ad 0%,#e7c579 15%,#caa24e 38%,#a57e33 64%,#7c5d22 100%), linear-gradient(90deg,rgba(255,255,255,.16),transparent 26%); box-shadow: inset 0 1px 0 rgba(255,246,214,.7),inset 0 -3px 5px rgba(70,50,16,.5), 0 0 0 1px #0d0b06,-6px 0 16px rgba(0,0,0,.55),6px 0 16px rgba(0,0,0,.55), 0 12px 30px rgba(0,0,0,.6),0 0 40px rgba(206,158,86,.26)} /* dark recessed glass face */ .car-cabin{position:absolute;inset:7px 8px;border-radius:3px;overflow:hidden;border:1px solid #000; background:linear-gradient(180deg,#212c3e 0%,#131c29 52%,#0a1017 100%); box-shadow:inset 0 2px 12px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.03); display:flex;align-items:center;justify-content:center} /* subtle glass reflection sweeping across the top of the face */ .car-cabin::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(157deg,rgba(255,255,255,.10) 0 10%,transparent 26%)} /* luxurious gold inner lining that grows with tier */ .car-cabin::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:3px; background:radial-gradient(ellipse 100% 82% at 50% 46%,transparent 42%,rgba(255,200,104,.55) 122%); opacity:calc(var(--tier,0) * .34);transition:opacity 2.2s} /* crisp warm ceiling light bar */ .cab-ceiling{position:absolute;top:0;left:0;right:0;height:30%;z-index:1;pointer-events:none; background:radial-gradient(ellipse 66% 130% at 50% -20%,rgba(255,241,214,.42),rgba(230,210,180,.08) 55%,transparent 80%)} .cab-ceiling::before{content:'';position:absolute;top:3px;left:50%;transform:translateX(-50%); width:52px;height:3px;border-radius:3px;background:rgba(255,247,226,.92);box-shadow:0 0 12px 2px rgba(255,226,168,.6)} /* multiplier is the big focal read-out (neon); floor is the small label */ .cab-screen{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px} /* floor row removed — only the multiplier is shown in the cabin */ /* bright white multiplier — purple glow intensifies via JS --mx-glow (0→1) as the multiplier rises */ .cab-mult{font-family:'Bebas Neue',sans-serif;font-size:3.6rem;line-height:.88;color:#fff; white-space:nowrap;letter-spacing:2px;font-weight:700;font-variant-numeric:tabular-nums; text-shadow: 0 0 calc(var(--mx-glow,0) * 9px) rgba(216,180,255,calc(var(--mx-glow,0) * .9)), /* tight, crisp violet core */ 0 0 calc(var(--mx-glow,0) * 26px) rgba(176,96,240,calc(var(--mx-glow,0) * .5)), 0 0 calc(var(--mx-glow,0) * 58px) rgba(140,60,220,calc(var(--mx-glow,0) * .26)), 0 2px 4px rgba(0,0,0,.78)} .car-base{width:166px;height:11px;border-radius:0 0 6px 6px; background:linear-gradient(180deg,#dcb669,#a57e33 52%,#6e5420); box-shadow:inset 0 1px 0 rgba(255,240,204,.35),0 5px 12px rgba(0,0,0,.6)} /* CRASH — cabin jolts up as cables snap, then plunges down the shaft */ .car.falling{animation:carFall 1s cubic-bezier(.6,0,.85,.45) forwards;z-index:22} @keyframes carFall{ 0%{transform:translate(-50%,-50%) rotate(0)} 12%{transform:translate(-50%,-66%) rotate(-2deg)} 100%{transform:translate(-50%,310%) rotate(6deg)}} /* longer plunge — the cabin now starts higher (62%) */ /* impact burst at the bottom of the shaft */ .impact{position:absolute;left:0;right:0;bottom:0;height:64px;z-index:21;opacity:0;pointer-events:none; transform-origin:bottom; background:radial-gradient(ellipse 60% 100% at 50% 100%,rgba(255,140,60,.6),rgba(150,90,50,.25) 45%,transparent 72%)} .impact.boom{animation:boom .55s ease-out} @keyframes boom{0%{opacity:0;transform:scaleY(.15)}18%{opacity:1;transform:scaleY(1)}100%{opacity:0;transform:scaleY(1.4)}} /* jolt warning */ .jolt-ov{position:absolute;inset:0;z-index:18;pointer-events:none;display:flex;align-items:center;justify-content:center; background:rgba(224,120,40,0);transition:background .12s} .jolt-ov.show{background:rgba(224,120,40,.14)} .jolt-txt{font-family:'Bebas Neue',sans-serif;font-size:1.4rem;letter-spacing:4px;color:#ffb46a; text-shadow:0 0 16px rgba(255,140,40,.6);opacity:0;transition:opacity .15s} .jolt-ov.show .jolt-txt{opacity:1} /* ── HALL DOORS — stainless steel ── */ .doors{position:absolute;inset:0;z-index:30;display:flex;pointer-events:none} .door{flex:1;height:100%;position:relative;overflow:hidden; background:linear-gradient(90deg,#3a3f47,#5a616b 30%,#4a5059 50%,#5a616b 70%,#3a3f47); transition:transform .65s cubic-bezier(.77,0,.18,1)} .door::before{content:'';position:absolute;inset:0; background:repeating-linear-gradient(90deg,transparent 0 13px,rgba(0,0,0,.14) 13px 14px)} .door-l{transform-origin:left}.door-r{transform-origin:right} .door-seam{position:absolute;top:0;bottom:0;left:50%;width:2px;transform:translateX(-50%);z-index:31; background:rgba(0,0,0,.5);transition:opacity .3s} .doors.open .door-l{transform:translateX(-101%)} .doors.open .door-r{transform:translateX(101%)} .doors.open .door-seam{opacity:0} .doors.jolt .door-l{transform:translateX(-22%)} .doors.jolt .door-r{transform:translateX(22%)} .dflash{position:absolute;inset:0;z-index:33;pointer-events:none;background:rgba(224,81,81,0);transition:background .08s} .dflash.on{background:rgba(224,81,81,.5)} .dflash.warn{background:rgba(224,120,40,.24)} .dsign{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:34;text-align:center; opacity:0;pointer-events:none;transition:opacity .25s .2s;width:200px} .dsign.show{opacity:1} .ds-ct{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;color:var(--bad);letter-spacing:2px; text-shadow:0 0 14px rgba(224,81,81,.5)} .ds-cs{font-size:.5rem;color:var(--ink-dim);letter-spacing:2px;margin-top:3px} .ds-wt{font-family:'Bebas Neue',sans-serif;font-size:1.2rem;color:var(--good);letter-spacing:2px; text-shadow:0 0 14px rgba(76,198,110,.5)} .shaft-floor{flex-shrink:0;height:14px;border-radius:0 0 10px 10px; background:linear-gradient(180deg,#1c1c22,#0d0f13); border:2px solid var(--steel-4);border-top:none; box-shadow:inset 0 2px 0 color-mix(in srgb,var(--accent) 26%,transparent),0 6px 18px rgba(0,0,0,.5)} /* gold base trim closing the stage frame */ /* ════════════════════════════════════════════════════════════════ BOTTOM BAR ════════════════════════════════════════════════════════════════ */ .bot{grid-column:1/-1;grid-row:3;display:grid;grid-template-columns:1fr 200px 1fr;gap:10px;align-items:stretch; width:100%;max-width:780px;margin:0 auto} /* keep the action bar grouped under the elevator */ /* idle = polished green ghost (not dead); active (.on) = vivid, dominant green */ .btn-co{position:relative;border:1px solid rgba(76,198,110,.28);border-radius:14px;cursor:pointer; color:rgba(214,246,224,.5); background:linear-gradient(180deg,rgba(45,168,85,.1),rgba(18,26,21,.62)); display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px;gap:2px; pointer-events:none;transition:color .18s,transform .1s,box-shadow .2s,border-color .2s,background .2s} .btn-co.on{color:#fff;border-color:transparent;pointer-events:all; background:linear-gradient(170deg,#1f7a3c,#2da855); box-shadow:0 6px 22px rgba(45,168,85,.42),inset 0 1px 0 rgba(255,255,255,.2)} .btn-co:active{transform:translateY(2px)} .co-t{font-family:'Bebas Neue',sans-serif;font-size:clamp(1.2rem,2.4vw,1.7rem);letter-spacing:2px} .co-a{font-family:'Bebas Neue',sans-serif;font-size:clamp(.9rem,1.8vw,1.2rem);color:rgba(255,255,255,.9); display:flex;align-items:center;gap:5px} .bot-mid{background:var(--panel);border:1px solid var(--panel-line);border-radius:12px;padding:7px 12px; display:flex;flex-direction:column;gap:3px;backdrop-filter:blur(10px)} .bc-lbl{font-size:.44rem;letter-spacing:2px;color:var(--ink-faint);text-transform:uppercase} .bc-svg{flex:1;width:100%;min-height:26px} .btn-st{position:relative;overflow:hidden;background:linear-gradient(175deg,#f0d27a,#cba049 42%,#a87c2c); border:1px solid rgba(255,232,170,.5); border-radius:14px;color:#1c1305;font-family:'Bebas Neue',sans-serif;font-size:clamp(1.2rem,2.4vw,1.7rem); letter-spacing:3px;cursor:pointer;padding:10px;text-shadow:0 1px 0 rgba(255,255,255,.25); box-shadow:0 5px 18px rgba(180,140,40,.32),inset 0 1px 0 rgba(255,255,255,.45); transition:transform .1s,filter .15s} .btn-st::before{content:'';position:absolute;inset:0;border-radius:14px; background:linear-gradient(180deg,rgba(255,255,255,.35),transparent 45%)} .btn-st:active{transform:translateY(2px)} .btn-st:disabled{opacity:.4;pointer-events:none;filter:saturate(.6)} .btn-st:not(:disabled):hover{filter:brightness(1.06)} /* desktop: the bottom controls read as one machine console deck, not a floating form strip */ @media(min-width:701px){ .bot{padding:9px;border-radius:16px; background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 60%),rgba(9,11,16,.55); border:1px solid var(--panel-line);border-top-color:color-mix(in srgb,var(--accent) 16%,var(--panel-line)); backdrop-filter:blur(10px);box-shadow:0 10px 34px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04)} .bot-mid{background:rgba(0,0,0,.28);border-color:rgba(255,255,255,.05)} /* DESKTOP HERO — the elevator tower reads as the clear, commanding centrepiece */ .scol{flex:0 1 600px} /* wider central stage (was 500) — ~19% more shaft */ .car{transform:translate(-50%,-50%) scale(1.12)} /* cabin minimally larger, all proportions intact */ .cable{height:calc(62% - 86px)} /* re-seat the cables onto the larger cabin roof */ /* more substantial, higher-quality shaft side frames: brushed-metal pillars with a bronze reveal */ .shaft{background: linear-gradient(90deg,#0d0f13 0 4px,#1a1d24 4px 20px,#262a33 20px 24px,transparent 24px), linear-gradient(270deg,#0d0f13 0 4px,#1a1d24 4px 20px,#262a33 20px 24px,transparent 24px); border-left:2px solid color-mix(in srgb,var(--accent) 22%,var(--steel-4)); border-right:2px solid color-mix(in srgb,var(--accent) 22%,var(--steel-4))} .shaft-vp{inset:0 24px} /* clear the wider frames */ .rail-l{left:30px}.rail-r{right:30px} /* left rail = ONE premium console (matches the mobile deck language), not three floating cards */ .lcol{position:relative;gap:0; background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 55%),rgba(9,11,16,.6); border:1px solid var(--panel-line);border-top-color:color-mix(in srgb,var(--accent) 16%,var(--panel-line)); border-radius:16px;padding:4px 0;backdrop-filter:blur(10px); box-shadow:0 8px 26px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04)} .lcol .card{background:none;border:none;box-shadow:none;backdrop-filter:none;border-radius:0;padding:14px} .lcol .bet-card,.lcol .mini-card{border-bottom:1px solid rgba(255,255,255,.06)} .lcol .stat-card{margin-top:0;border-bottom:1px solid rgba(255,255,255,.06)} /* sections flow — no stranded void in the middle */ /* section labels get a small gold tick — console sections read as engineered, not floating */ .lcol .clbl{display:flex;align-items:center;gap:7px} .lcol .clbl::before{content:'';width:10px;height:1px;flex-shrink:0; background:color-mix(in srgb,var(--accent) 55%,transparent)} /* the remaining panel space is closed intentionally: a quiet embossed cabin emblem (the elevator IS the logo) */ .lcol::after{content:'';position:absolute;left:50%;bottom:22px;transform:translateX(-50%); width:26px;height:34px;border-radius:3px;border:1.5px solid rgba(206,158,86,.2); background:linear-gradient(180deg,rgba(206,158,86,.07),transparent); box-shadow:inset 0 3px 0 rgba(206,158,86,.13)} } /* ════════════════════════════════════════════════════════════════ OVERLAYS / TOASTS ════════════════════════════════════════════════════════════════ */ .ov{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center; background:rgba(4,5,8,.5);backdrop-filter:blur(9px)} .ov.show{display:flex} /* premium result card — dark glass, thin state-light rule across the top (no loud coloured borders) */ .ovbox{position:relative;overflow:hidden;border-radius:20px;padding:30px 38px 26px;text-align:center; max-width:320px;width:90%; background:linear-gradient(180deg,rgba(255,255,255,.045),transparent 32%),linear-gradient(180deg,#14161c,#0a0b0f); border:1px solid rgba(255,255,255,.09); box-shadow:0 30px 90px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.06); animation:pop .3s cubic-bezier(.4,0,.2,1)} .ovbox::before{content:'';position:absolute;top:0;left:18%;right:18%;height:2px;border-radius:99px; background:linear-gradient(90deg,transparent,var(--ov-accent,#d3a54a),transparent); box-shadow:0 0 20px var(--ov-accent,#d3a54a)} @keyframes pop{from{transform:scale(.6) translateY(24px);opacity:0}to{transform:scale(1);opacity:1}} .ovt{font-family:'Bebas Neue',sans-serif;font-size:2.6rem;line-height:1;letter-spacing:3px} .ovs{font-size:.8rem;color:var(--ink-dim);margin:7px 0 12px} .ovd{font-family:'Share Tech Mono',monospace;font-size:.76rem;color:var(--ink-dim);margin-top:8px} .ov-big{font-family:'Bebas Neue',sans-serif;font-size:3.4rem;color:var(--accent);line-height:1; font-variant-numeric:tabular-nums;text-shadow:0 0 26px var(--glow)} .ovbtn{margin-top:18px;width:100%;border:none;border-radius:12px;font-family:'Bebas Neue',sans-serif; font-size:1.15rem;letter-spacing:2.5px;padding:13px;cursor:pointer;color:#fff; box-shadow:0 6px 18px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.18);transition:filter .12s,transform .1s} .ovbtn:hover{filter:brightness(1.07)} .ovbtn:active{transform:translateY(1px)} #crashOv .ovbox{--ov-accent:#f45b69} #crashOv .ovt{color:#f4657a;text-shadow:0 0 24px rgba(244,91,105,.45)} #crashOv .ovbtn{background:linear-gradient(170deg,#a32833,#d84350)} #winOv .ovbox{--ov-accent:#2fd06f} #winOv .ovt{color:#4cc66e;text-shadow:0 0 24px rgba(47,208,111,.4)} #winOv .ovbtn{background:linear-gradient(170deg,#1c7a36,#2da855)} /* ════════════════════════════════════════════════════════════════ ENTRY GATE — one-line hook, then PLAY. The single place the brand speaks. ════════════════════════════════════════════════════════════════ */ .entry{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center; padding:max(20px,env(safe-area-inset-top)) 24px max(20px,env(safe-area-inset-bottom)); background: radial-gradient(ellipse 60% 50% at 50% 38%,rgba(66,58,42,.4),transparent 72%), linear-gradient(180deg,#101014 0%,#08080b 55%,#050507 100%); opacity:1;transition:opacity .45s ease} .entry.hide{opacity:0;pointer-events:none} .entry-box{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:340px} /* the brand IS the cabin — a quiet gold emblem above the name */ .entry-glyph{width:44px;height:58px;border-radius:5px;margin-bottom:18px; border:2px solid rgba(206,158,86,.55); background:linear-gradient(180deg,rgba(206,158,86,.14),rgba(206,158,86,.03)); box-shadow:inset 0 4px 0 rgba(206,158,86,.35),0 0 30px rgba(206,158,86,.18)} .entry-name{font-family:'Bebas Neue',sans-serif;font-size:2.7rem;line-height:1;color:var(--ink); letter-spacing:12px;padding-left:12px;text-shadow:0 0 30px rgba(206,158,86,.25)} .entry-tag{margin-top:9px;font-size:.56rem;font-weight:800;letter-spacing:2.4px;text-transform:uppercase; color:rgba(230,192,116,.85);padding:4px 12px;border-radius:99px; border:1px solid rgba(206,158,86,.3);background:rgba(206,158,86,.07)} .entry-hook{margin:20px 0 26px;font-size:.94rem;line-height:1.55;color:var(--ink-dim)} .entry-play{width:100%;max-width:280px;padding:16px;border-radius:14px;cursor:pointer; font-family:'Bebas Neue',sans-serif;font-size:1.5rem;letter-spacing:4px;color:#1c1305; background:linear-gradient(175deg,#f0d27a,#cba049 42%,#a87c2c); border:1px solid rgba(255,232,170,.5);text-shadow:0 1px 0 rgba(255,255,255,.25); box-shadow:0 6px 22px rgba(180,140,40,.35),inset 0 1px 0 rgba(255,255,255,.45); transition:transform .1s,filter .15s} .entry-play:hover{filter:brightness(1.06)} .entry-play:active{transform:translateY(2px)} .entry-foot{margin-top:16px;font-size:.6rem;letter-spacing:1.2px;color:var(--ink-faint)} /* provably-fair modal */ .fair-ov{z-index:230} .fairbox{background:#0c0e12;border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:22px 22px 18px; width:92%;max-width:440px;animation:pop .3s cubic-bezier(.4,0,.2,1)} .fair-h{font-family:'Bebas Neue',sans-serif;font-size:1.5rem;letter-spacing:2px;color:var(--ink)} .fair-p{font-size:.72rem;line-height:1.5;color:var(--ink-dim);margin:8px 0 14px} .fair-l{font-size:.56rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-faint)} .fair-row{display:flex;gap:6px;margin:5px 0 14px} .fair-in{flex:1;min-width:0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:8px; color:var(--ink);font-family:'Share Tech Mono',monospace;font-size:.78rem;padding:8px 10px} .fair-rnd{width:38px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);color:var(--ink); border-radius:8px;cursor:pointer;font-size:1rem} .fair-rnd:active{background:rgba(255,255,255,.14)} .fair-grid{display:grid;grid-template-columns:auto 1fr;gap:7px 12px;align-items:center; background:rgba(255,255,255,.03);border-radius:10px;padding:11px 13px} .fair-grid>span:nth-child(odd){font-size:.58rem;font-weight:700;letter-spacing:.5px;color:var(--ink-faint);text-transform:uppercase} .fair-grid code{font-family:'Share Tech Mono',monospace;font-size:.64rem;color:var(--ink-dim);word-break:break-all;line-height:1.3} .fair-v{font-family:'Share Tech Mono',monospace;font-size:.72rem;font-weight:700;color:var(--ink-dim)} .fair-v.ok{color:var(--good)}.fair-v.bad{color:var(--bad)} .fair-close{background:linear-gradient(135deg,#2a2e35,#3c424b);margin-top:14px} .jolt-t{position:fixed;top:124px;left:50%;transform:translateX(-50%) translateY(-12px);z-index:300; opacity:0;pointer-events:none;border-radius:99px;padding:4px 18px;white-space:nowrap; transition:opacity .18s,transform .18s; background:rgba(224,120,40,.14);border:1px solid rgba(224,120,40,.55);color:#e0a33a; font-family:'Bebas Neue',sans-serif;font-size:.9rem;letter-spacing:3px} .jolt-t.show{opacity:1;transform:translateX(-50%) translateY(0)} /* ════════════════════════════════════════════════════════════════ HYPE EFFECTS — escalating juice, kept tasteful ════════════════════════════════════════════════════════════════ */ /* header utility buttons */ .sfx-btn{width:36px;height:36px;border-radius:12px;border:1px solid var(--panel-line); background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 60%),rgba(10,12,18,.66); color:var(--ink);font-size:.95rem;cursor:pointer;backdrop-filter:blur(10px); display:flex;align-items:center;justify-content:center;transition:transform .1s,border-color .15s,opacity .15s} .sfx-btn:active{transform:scale(.92)} .sfx-btn.muted{opacity:.55} .trust-btn{opacity:.66} /* fairness sits quietly; still a clear touch target */ .trust-btn:hover{opacity:1;border-color:rgba(255,232,170,.3)} /* multiplier "pop" when it ticks up + bigger pop at milestones */ @keyframes mxPop{0%{transform:scale(1)}45%{transform:scale(1.22)}100%{transform:scale(1)}} .cab-mult.pop{animation:mxPop .3s ease-out} /* floating milestone banner near the cabin */ .milestone{position:fixed;left:50%;top:46%;z-index:190;pointer-events:none;opacity:0; transform:translate(-50%,-50%);font-family:'Bebas Neue',sans-serif;font-size:clamp(2rem,5vw,3.2rem); letter-spacing:2px;color:var(--accent);text-shadow:0 0 26px var(--accent),0 0 60px var(--glow);white-space:nowrap} .milestone.show{animation:mileShow 1.05s cubic-bezier(.22,1,.36,1)} @keyframes mileShow{0%{opacity:0;transform:translate(-50%,-40%) scale(.5)} 22%{opacity:1;transform:translate(-50%,-52%) scale(1.12)} 60%{opacity:1;transform:translate(-50%,-60%) scale(1)} 100%{opacity:0;transform:translate(-50%,-86%) scale(1)}} /* cabin glow tiers — intensify with the multiplier */ .car-body{transition:box-shadow .6s ease} .car.hype1 .car-body{box-shadow:0 0 0 1px #0d0b06,-5px 0 12px rgba(0,0,0,.55),5px 0 12px rgba(0,0,0,.55),0 0 24px var(--glow)} .car.hype2 .car-body{box-shadow:0 0 0 1px #0d0b06,-5px 0 12px rgba(0,0,0,.55),5px 0 12px rgba(0,0,0,.55),0 0 36px var(--glow),0 0 64px var(--glow)} .car.hype3 .car-body{animation:carPulse 1s ease-in-out infinite} @keyframes carPulse{0%,100%{box-shadow:0 0 0 1px #0d0b06,-5px 0 12px rgba(0,0,0,.55),5px 0 12px rgba(0,0,0,.55),0 0 30px var(--accent),0 0 52px var(--glow)} 50%{box-shadow:0 0 0 1px #0d0b06,-5px 0 12px rgba(0,0,0,.55),5px 0 12px rgba(0,0,0,.55),0 0 56px var(--accent),0 0 104px var(--accent)}} /* CASH OUT button — gentle breathing while live, draws the eye */ .btn-co.on{animation:coBreathe 1.6s ease-in-out infinite} @keyframes coBreathe{0%,100%{box-shadow:0 5px 18px rgba(45,168,85,.32),inset 0 1px 0 rgba(255,255,255,.18)} 50%{box-shadow:0 6px 26px rgba(45,168,85,.6),inset 0 1px 0 rgba(255,255,255,.22)}} .btn-co.bump{animation:coBump .28s ease-out} @keyframes coBump{0%{transform:scale(1)}45%{transform:scale(1.035)}100%{transform:scale(1)}} /* danger heartbeat — subtle red edge pulse when crash risk is high */ .danger-vig{position:fixed;inset:0;z-index:188;pointer-events:none;opacity:0; box-shadow:inset 0 0 120px rgba(224,60,60,.55);transition:opacity .4s} .danger-vig.on{animation:heartbeat 1.15s ease-in-out infinite} @keyframes heartbeat{0%,100%{opacity:.12}50%{opacity:.5}} /* ════════════════════════════════════════════════════════════════ STATE CINEMATICS — danger, crash and cash-out as unmistakable beats (transform/opacity only; the cabin itself responds to the game state) ════════════════════════════════════════════════════════════════ */ /* DANGER — a red glow gathers under the cabin and breathes with the heartbeat */ .car::before{content:'';position:absolute;inset:-24px -22px;z-index:-1;border-radius:20px;opacity:0; background:radial-gradient(ellipse at 50% 55%,rgba(224,60,60,.36),transparent 70%); transition:opacity .6s;pointer-events:none} body.danger .car::before{opacity:1;animation:dangerBreath 1.15s ease-in-out infinite} @keyframes dangerBreath{0%,100%{opacity:.4}50%{opacity:1}} /* CRASH — the read-out dies: drains to red and flickers out like a failing sign */ .cab-mult.mx-dead{color:#ff5460; text-shadow:0 0 16px rgba(255,60,70,.55),0 2px 4px rgba(0,0,0,.8); animation:mxDie .85s steps(1) forwards} @keyframes mxDie{0%{opacity:1}14%{opacity:.25}22%{opacity:1}34%{opacity:.15} 46%{opacity:.8}60%{opacity:.1}74%{opacity:.45}100%{opacity:.08}} /* CASH OUT — the read-out turns gold and the cabin releases one golden burst */ .cab-mult.mx-cashed{color:#ffe9ad; text-shadow:0 0 14px rgba(255,214,120,.85),0 0 42px rgba(230,180,90,.5),0 2px 4px rgba(0,0,0,.7)} .car.car-win::after{content:'';position:absolute;inset:-34px -30px;z-index:-1;border-radius:24px; background:radial-gradient(ellipse at 50% 50%,rgba(255,216,130,.55),transparent 70%); animation:winBurst .95s ease-out forwards;pointer-events:none} @keyframes winBurst{0%{opacity:0;transform:scale(.7)}25%{opacity:1;transform:scale(1.05)}100%{opacity:0;transform:scale(1.3)}} /* win confetti */ .confetti{position:fixed;inset:0;z-index:210;pointer-events:none;overflow:hidden} .confetti i{position:absolute;top:42%;left:50%;width:9px;height:14px;border-radius:2px;opacity:0; will-change:transform,opacity} .confetti i.go{animation:conFall var(--d,1.4s) cubic-bezier(.2,.7,.4,1) forwards} @keyframes conFall{0%{opacity:1;transform:translate(0,0) rotate(0)} 100%{opacity:0;transform:translate(var(--x,0),var(--y,400px)) rotate(var(--r,540deg))}} /* ════════════════════════════════════════════════════════════════ RESPONSIVE — phone = vertical stack, elevator stays the hero ════════════════════════════════════════════════════════════════ */ @media(max-width:700px){ /* app-shell: fill the screen, respect the notch + home indicator (no browser feel) */ .shell{display:flex;flex-direction:column;max-width:none;width:100%;height:100dvh;gap:7px; padding:max(7px,env(safe-area-inset-top)) max(9px,env(safe-area-inset-right)) max(9px,env(safe-area-inset-bottom)) max(9px,env(safe-area-inset-left))} .hdr{order:0;flex:0 0 auto} .sfx-btn{width:40px;height:40px} /* comfortable thumb targets */ .bal{padding:6px 14px 6px 7px} .bal-num{font-size:1.04rem} .status-cap{max-width:46%;padding:5px 11px;gap:6px} .cap-zone{font-size:.56rem;letter-spacing:1.2px} /* secondary side content is desktop-only → on mobile the elevator gets the full screen */ .rcol{display:none} /* elevator fills the rest */ .stage{order:2;flex:1 1 auto;min-height:0;gap:0} .scol{flex:1 1 auto;max-width:none} .floor-row{height:128px} /* THE multiplier is the hero — bigger cabin, bigger read-out, nothing competes */ .car{width:204px} .car-roof{width:186px} .car-body{width:204px;height:164px} .car-base{width:204px} .cab-mult{font-size:clamp(60px,16vw,88px);letter-spacing:1px} /* hero scales with device width, stays largest live text */ /* lower deck = ONE control system: a single panel holding the bet stepper + risk, split by a divider */ .lcol{order:3;flex:0 0 auto;flex-direction:row;align-items:stretch;gap:0; background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 55%),rgba(9,11,16,.6); border:1px solid var(--panel-line);border-top-color:color-mix(in srgb,var(--accent) 16%,var(--panel-line)); border-radius:14px;padding:10px;backdrop-filter:blur(10px); box-shadow:0 8px 26px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04)} .lcol .card{background:none;border:none;box-shadow:none;backdrop-filter:none;border-radius:0;padding:0 12px} .lcol .bet-card{flex:1.2;padding-left:2px} .lcol .mini-card{flex:1;justify-content:center;border-left:1px solid var(--panel-line);padding-right:2px} .lcol .stat-card{display:none} .adj{width:34px;height:34px} .bnum{font-size:1.45rem} .pr{padding:7px 0;font-size:.66rem} .rsk-lbl{font-size:.6rem} .rbadge{font-size:.58rem;padding:3px 9px} /* ONE dominant, state-driven primary action filling the thumb zone */ .bot{order:4;flex:0 0 auto;display:flex;gap:9px} .bot-mid{display:none} .btn-st{flex:1 1 auto;padding:16px 8px;font-size:1.5rem} .btn-co{display:none} /* idle → only START shows */ body.playing .btn-st{display:none} /* ascending → START steps aside */ body.playing .btn-co{display:flex;flex:1 1 auto;padding:14px 8px} body.playing .co-t{font-size:1.5rem} /* calmer ambience — the full-screen tier glows dominate a small display, so soften them */ .peril{opacity:calc(var(--tier,0) * .5); box-shadow:inset 0 0 90px rgba(214,42,42,.32),inset 0 0 30px rgba(214,42,42,.14)} .peril::after{box-shadow:inset 0 0 60px rgba(255,46,46,.38)} .luxe{opacity:calc(var(--tier,0) * .34)} .danger-vig{box-shadow:inset 0 0 80px rgba(224,60,60,.38)} .danger-vig.on{animation-duration:1.5s} /* ── PHONE PERFORMANCE — the expensive effects that jank mobile GPUs ── */ .shaft-world.mblur{filter:none} /* blurring the huge world layer mid-ride is the #1 jank source */ .cable{animation:none} /* background-position animations repaint every frame */ .bg-sections.moving{animation:none} .card,.status-cap,.bal,.sfx-btn,.lcol,.bot,.bot-mid{backdrop-filter:none} /* stacked backdrop blurs are very costly on phones */ body{transition:--accent .9s ease} /* shorter zone re-light = shorter full-screen gradient repaint */ } /* short phones — shrink the cabin a touch so everything fits */ @media(max-width:700px) and (max-height:700px){ .car{transform:translate(-50%,-50%) scale(.86)} .floor-row{height:118px} } /* short desktop / landscape */ @media(min-width:701px) and (max-height:640px){.shell{grid-template-rows:44px 1fr 70px}.floor-row{height:126px}} /* ── Accessibility: honour the OS "reduce motion" setting — kill the ambient loops ── */ @media(prefers-reduced-motion:reduce){ .car.hype3 .car-body,.btn-co.on,.danger-vig.on,.peril::after,.cable,.confetti i.go, body.danger .car::before,.cab-mult.mx-dead,.car.car-win::after{ animation:none!important} .danger-vig{display:none} /* meaning survives as static colour: red under-glow stays lit, dead read-out stays red-dim */ .cab-mult.mx-dead{opacity:.35} }