:root{ --pink-1:#fff0f6; --pink-2:#ffc2e2; --pink-3:#ff8fc7; --pink-4:#ff4fa3; --pink-5:#e6197e; --pink-6:#b3005c; --pink-deep:#7a0043; --gold:#ffd166; --violet:#8f5bff; --cyan:#4fe0ff; --bg:#12010e; --text:#fff0f8; --font: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif; --font-display: "Baloo 2", var(--font); --hue:0deg; } *{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;} body{ font-family:var(--font); background:var(--bg); color:var(--text); overflow-x:hidden; min-height:100vh; } /* Party mode tints everything EXCEPT via a filter on . A filter on the body would make every position:fixed child resolve against the document instead of the viewport, turning the fixed backdrop layers into document-tall blurred surfaces that fail to composite past the fold. */ body.party .aurora, body.party .hero, body.party .ribbon-wrap, body.party main, body.party footer{ filter:hue-rotate(var(--hue)); } ::selection{ background:var(--pink-4); color:#fff; } :focus-visible{ outline:3px solid var(--gold); outline-offset:3px; border-radius:4px; } /* ---------- scroll progress ---------- */ .scroll-progress{ position:fixed; top:0;left:0;right:0; height:3px; z-index:60; background:linear-gradient(90deg,var(--pink-3),var(--gold),var(--violet),var(--pink-4)); transform:scaleX(0); transform-origin:0 50%; will-change:transform; pointer-events:none; } /* ---------- aurora backdrop ---------- Big soft colour fields that drift and rotate against each other. Animating only transform/opacity keeps this entirely on the compositor. */ .aurora{ position:fixed; inset:-20vmax; z-index:0; pointer-events:none; overflow:hidden; filter:blur(70px) saturate(140%); } .au{ position:absolute; border-radius:45% 55% 52% 48% / 50% 45% 55% 50%; mix-blend-mode:screen; opacity:.55; will-change:transform; } .a1{ width:60vmax;height:60vmax; top:-12vmax;left:-10vmax; background:radial-gradient(circle at 40% 40%, #ff2f92 0%, rgba(255,47,146,0) 68%); animation:drift1 26s ease-in-out infinite; } .a2{ width:52vmax;height:52vmax; top:18vmax;right:-14vmax; background:radial-gradient(circle at 55% 45%, #8f5bff 0%, rgba(143,91,255,0) 68%); animation:drift2 32s ease-in-out infinite; } .a3{ width:48vmax;height:48vmax; bottom:-14vmax;left:14vmax; background:radial-gradient(circle at 50% 50%, #ff7ac0 0%, rgba(255,122,192,0) 68%); animation:drift3 24s ease-in-out infinite; } .a4{ width:36vmax;height:36vmax; bottom:8vmax;right:10vmax; background:radial-gradient(circle at 50% 50%, #4fe0ff 0%, rgba(79,224,255,0) 70%); opacity:.28; animation:drift2 38s ease-in-out infinite reverse; } @keyframes drift1{ 0%,100%{ transform:translate3d(0,0,0) rotate(0deg) scale(1); } 33%{ transform:translate3d(6vmax,4vmax,0) rotate(120deg) scale(1.12); } 66%{ transform:translate3d(-4vmax,7vmax,0) rotate(240deg) scale(.94); } } @keyframes drift2{ 0%,100%{ transform:translate3d(0,0,0) rotate(0deg) scale(1); } 50%{ transform:translate3d(-7vmax,-5vmax,0) rotate(180deg) scale(1.15); } } @keyframes drift3{ 0%,100%{ transform:translate3d(0,0,0) rotate(0deg) scale(1.05); } 40%{ transform:translate3d(5vmax,-6vmax,0) rotate(140deg) scale(.9); } 75%{ transform:translate3d(-6vmax,2vmax,0) rotate(280deg) scale(1.1); } } /* ---------- film grain ---------- Static SVG noise, nudged around so it shimmers like real film grain. */ .grain{ position:fixed; inset:-150px; z-index:1; pointer-events:none; opacity:.16; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); animation:grainShift .6s steps(2) infinite; will-change:transform; } @keyframes grainShift{ 0%{ transform:translate3d(0,0,0); } 25%{ transform:translate3d(-40px,20px,0); } 50%{ transform:translate3d(30px,-30px,0); } 75%{ transform:translate3d(-20px,-15px,0); } 100%{ transform:translate3d(25px,35px,0); } } /* ---------- sparkle canvas ---------- */ #sparkleCanvas{ position:fixed;inset:0; z-index:40; pointer-events:none; } /* ---------- floating buttons ---------- */ .party-btn, .music-btn{ position:fixed; top:18px; z-index:50; font-family:var(--font-display); font-weight:800; font-size:.8rem; padding:.6rem 1rem; border-radius:999px; cursor:pointer; transition:transform .15s ease, box-shadow .25s ease, background .25s ease; } .party-btn{ right:18px; background:linear-gradient(135deg,var(--pink-4),var(--gold)); border:none; color:#2a0518; box-shadow:0 6px 24px rgba(255,79,163,.5); animation:jelly 3s ease-in-out infinite; } .party-btn:hover{transform:scale(1.08) rotate(-3deg);} .party-btn:active{transform:scale(.94);} @keyframes jelly{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.05,.95);} } body.party .party-btn{animation:jelly .4s ease-in-out infinite;} .music-btn{ left:18px; background:rgba(255,255,255,.07); border:2px solid var(--pink-3); color:var(--pink-1); backdrop-filter:blur(8px); } .music-btn:hover{ transform:scale(1.06); border-color:var(--gold); } .music-btn:active{ transform:scale(.94); } .music-btn.playing{ background:linear-gradient(135deg,var(--pink-4),var(--pink-6)); border-color:var(--pink-2); box-shadow:0 0 22px rgba(255,79,163,.55); animation:notebob 1.4s ease-in-out infinite; } @keyframes notebob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } } /* ---------- confetti ---------- */ .confetti-layer{position:fixed;inset:0;pointer-events:none;z-index:41;overflow:hidden;} .confetti-piece{ position:absolute; top:-10px; width:8px;height:14px; opacity:.9; animation:fall linear infinite; will-change:transform; } @keyframes fall{ to{ transform: translate3d(0,110vh,0) rotate(600deg); } } /* ---------- hero ---------- */ .hero{ position:relative; z-index:2; text-align:center; padding:7rem 1.5rem 4rem; overflow:hidden; min-height:min(100vh, 900px); display:flex; align-items:center; justify-content:center; } .hero-inner{ position:relative; z-index:3; transform:translate3d(0, var(--parallax, 0px), 0); opacity:var(--hero-fade, 1); will-change:transform, opacity; } /* scrim behind the copy only — strongest at the headline, gone by the sun */ .hero-inner::before{ content:""; position:absolute; inset:-8% -14% 25%; z-index:-1; background: radial-gradient(ellipse 70% 60% at 50% 35%, rgba(18,1,14,.8) 0%, rgba(18,1,14,.5) 55%, transparent 78%); pointer-events:none; } /* neon horizon — same language as the game's road */ .horizon{ position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; } .neon-sun{ position:absolute; left:50%; bottom:12%; width:min(38vmin, 290px); aspect-ratio:1; transform:translateX(-50%); border-radius:50%; background:linear-gradient(180deg, #ffe9a8 0%, var(--gold) 26%, var(--pink-4) 62%, var(--pink-6) 100%); box-shadow:0 0 90px rgba(255,120,190,.45), 0 0 180px rgba(255,79,163,.25); opacity:.62; animation:sunPulse 7s ease-in-out infinite; } /* dark scanline bands across the lower half of the disc */ .neon-sun::after{ content:""; position:absolute;inset:0; border-radius:50%; background:repeating-linear-gradient(to bottom, rgba(18,1,14,.9) 0 5px, transparent 5px 13px); mask-image:linear-gradient(to bottom, transparent 40%, #000 52%); -webkit-mask-image:linear-gradient(to bottom, transparent 40%, #000 52%); } @keyframes sunPulse{ 0%,100%{ filter:brightness(1); } 50%{ filter:brightness(1.15); } } .grid-floor{ position:absolute; left:-50%; bottom:0; width:200%; height:42%; background-image: repeating-linear-gradient(to right, rgba(255,79,163,.85) 0 2px, transparent 2px 78px), repeating-linear-gradient(to bottom, rgba(255,143,199,.85) 0 2px, transparent 2px 78px); transform:perspective(300px) rotateX(72deg); transform-origin:bottom center; filter:drop-shadow(0 0 6px rgba(255,79,163,.6)); animation:gridRun 2.4s linear infinite; mask-image:linear-gradient(to bottom, transparent, #000 45%); -webkit-mask-image:linear-gradient(to bottom, transparent, #000 45%); } @keyframes gridRun{ to{ background-position:0 78px, 0 78px; } } .floaters{position:absolute;inset:0;pointer-events:none;z-index:2;} .boob-float{position:absolute;width:120px;opacity:.45;filter:drop-shadow(0 0 14px var(--pink-4));animation:drift 9s ease-in-out infinite;} .f1{top:10%;left:6%;animation-duration:8s;} .f2{top:62%;right:8%;width:90px;animation-duration:11s;animation-delay:-2s;} .f3{top:20%;right:20%;width:70px;animation-duration:7s;animation-delay:-4s;} @keyframes drift{ 0%,100%{transform:translate3d(0,0,0) rotate(-4deg);} 50%{transform:translate3d(0,-25px,0) rotate(4deg);} } .eyebrow{ display:inline-block; font-weight:700; letter-spacing:.1em; color:var(--pink-3); margin-bottom:1rem; text-shadow:0 0 18px rgba(255,143,199,.6); animation:pulse 2.4s ease-in-out infinite; } @keyframes pulse{0%,100%{opacity:.7;}50%{opacity:1;}} .title{ font-family:var(--font-display); font-size:clamp(2.6rem,9vw,6rem); line-height:1.05; font-weight:800; text-transform:uppercase; } .wiggle{ display:inline-block; background:linear-gradient(90deg,var(--pink-3),var(--gold),var(--violet),var(--pink-5),var(--pink-3)); background-size:300% auto; -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 26px rgba(255,79,163,.55)); animation:wiggle 3s ease-in-out infinite, shine 7s linear infinite; } /* when JS splits the word, each letter animates on its own offset */ .wiggle .letter{ display:inline-block; background:inherit; background-size:inherit; -webkit-background-clip:text; background-clip:text; color:transparent; animation:letterIn .7s cubic-bezier(.2,.8,.2,1) backwards, letterFloat 4s ease-in-out infinite; } @keyframes letterIn{ from{ opacity:0; transform:translate3d(0,44px,0) rotate(-12deg) scale(.7); filter:blur(8px); } to{ opacity:1; transform:none; filter:blur(0); } } @keyframes letterFloat{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-7px) rotate(1.5deg); } } @keyframes wiggle{ 0%,100%{transform:rotate(-1.5deg);} 50%{transform:rotate(1.5deg);} } @keyframes shine{ to{background-position:300% center;} } .title-sub{ display:block; font-size:.36em; font-family:var(--font); font-weight:700; color:var(--pink-1); margin-top:.6rem; text-shadow:0 2px 20px rgba(0,0,0,.5); } .strike{ position:relative; color:#ff9dc9; display:inline-block; } .strike::after{ content:""; position:absolute; left:-4%;right:-4%;top:50%; height:4px; background:var(--pink-5); box-shadow:0 0 10px var(--pink-4); transform:rotate(-4deg) scaleX(0); transform-origin:left; animation:strikeIn .5s 1.1s ease forwards; } @keyframes strikeIn{ to{ transform:rotate(-4deg) scaleX(1); } } .date-line{ margin-top:1.2rem; font-size:1.1rem; color:var(--pink-2); font-weight:600; letter-spacing:.04em; text-shadow:0 2px 14px rgba(0,0,0,.5); } /* ---------- countdown ---------- */ .countdown{ display:flex; justify-content:center; gap:1rem; margin:2.5rem auto 1.5rem; flex-wrap:wrap; perspective:900px; } .c-box{ position:relative; background:linear-gradient(160deg, rgba(60,4,36,.78), rgba(30,2,20,.62)); border:2px solid var(--pink-4); border-radius:18px; padding:1rem 1.4rem; min-width:96px; backdrop-filter:blur(6px); box-shadow:0 0 28px rgba(255,79,163,.35), inset 0 0 22px rgba(255,79,163,.12); animation:breathe 2.6s ease-in-out infinite; transition:transform .25s ease, box-shadow .25s ease; } .c-box::before{ content:""; position:absolute;inset:-2px; border-radius:inherit; background:linear-gradient(135deg,var(--gold),transparent 40%,transparent 60%,var(--violet)); opacity:0; transition:opacity .3s ease; z-index:-1; filter:blur(8px); } .c-box:hover{ transform:translateY(-6px) rotateX(8deg) scale(1.05); box-shadow:0 14px 34px rgba(255,79,163,.5), inset 0 0 22px rgba(255,79,163,.18); } .c-box:hover::before{ opacity:.8; } .c-box:nth-child(2){animation-delay:-.4s;} .c-box:nth-child(3){animation-delay:-.8s;} .c-box:nth-child(4){animation-delay:-1.2s;} @keyframes breathe{ 0%,100%{transform:translateY(0) scale(1);} 50%{transform:translateY(-6px) scale(1.03);} } .c-num{ display:block; font-family:var(--font-display); font-size:2.5rem; font-weight:700; color:#fff; text-shadow:0 0 18px var(--pink-4); font-variant-numeric:tabular-nums; } .c-num.tick{ animation:flip .38s ease; } @keyframes flip{ 0%{ transform:rotateX(0); } 50%{ transform:rotateX(62deg) translateY(-2px); opacity:.55; } 100%{ transform:rotateX(0); } } .c-label{ display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:var(--pink-2); margin-top:.25rem; } .subtext{ color:#ffd6ec; max-width:520px; margin:1rem auto 0; line-height:1.55; text-shadow:0 2px 12px rgba(0,0,0,.5); } /* ---------- buttons ---------- */ .cta{ position:relative; display:inline-block; margin-top:2.2rem; padding:.9rem 1.8rem; background:linear-gradient(135deg,var(--pink-4),var(--pink-6)); border:none; border-radius:999px; color:#fff; font-family:var(--font); font-weight:700; text-decoration:none; cursor:pointer; font-size:1rem; overflow:hidden; box-shadow:0 10px 30px rgba(230,25,126,.45); transition:transform .2s ease, box-shadow .2s ease; } /* sweeping highlight */ .cta::after{ content:""; position:absolute; top:0;bottom:0;left:-60%; width:40%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transform:skewX(-20deg); animation:sweep 3.6s ease-in-out infinite; } @keyframes sweep{ 0%,60%{ left:-60%; } 100%{ left:130%; } } .cta:hover{ transform:translateY(-3px) scale(1.04); box-shadow:0 16px 40px rgba(230,25,126,.65); } .cta:active{ transform:translateY(-1px) scale(.99); } .cta.small{ margin-top:0; padding:.6rem 1.1rem; font-size:.85rem; } .scroll-cue{ margin:2.6rem auto 0; width:26px;height:42px; border:2px solid var(--pink-3); border-radius:14px; position:relative; opacity:.7; } .scroll-cue span{ position:absolute;top:6px;left:50%; width:5px;height:5px; background:var(--pink-3); border-radius:50%; transform:translateX(-50%); animation:scrollDown 1.8s ease-in-out infinite; } @keyframes scrollDown{ 0%{ top:6px; opacity:1; } 70%{ opacity:1; } 100%{ top:24px; opacity:0; } } /* ---------- marquee ribbon ---------- */ /* Endless marquee. The colour band lives on the stationary wrapper so it never scrolls out; only the text track moves. The track is duplicated and translated by exactly -50% (= one full copy), which is seamless *provided one copy is at least as wide as the viewport* — JS repeats the phrases until that holds, otherwise the text runs out and the banner visibly stalls each loop. */ .ribbon-wrap{ position:relative; z-index:2; transform:rotate(-1.4deg); margin:1rem 0 2.5rem; overflow:hidden; border-block:2px solid rgba(255,209,102,.35); background:linear-gradient(90deg,var(--pink-5),var(--violet),var(--pink-6),var(--pink-4),var(--pink-5)); background-size:200% auto; box-shadow:0 4px 26px rgba(0,0,0,.4); animation:ribbonHue 12s linear infinite; } .ribbon{ display:flex; width:max-content; padding:.6rem 0; animation:scrollLeft var(--ribbon-dur, 26s) linear infinite; will-change:transform; } .ribbon-track{ display:flex; flex-shrink:0; white-space:nowrap; font-family:var(--font-display); font-weight:700; font-size:1.1rem; letter-spacing:.05em; color:var(--pink-1); text-shadow:0 1px 6px rgba(0,0,0,.35); } .ribbon-track span{ flex-shrink:0; } @keyframes scrollLeft{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } } @keyframes ribbonHue{ to{ background-position:200% center; } } /* ---------- panels ---------- */ main{ position:relative;z-index:2; max-width:940px;margin:0 auto; padding:0 1.5rem 4rem; display:flex;flex-direction:column;gap:2.5rem; } .panel{ position:relative; background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); border:1px solid rgba(255,143,199,.22); border-radius:24px; padding:2.2rem; backdrop-filter:blur(10px); overflow:hidden; transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; } /* soft glow that follows the cursor across the surface */ .panel::before{ content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(255,209,102,.13), transparent 65%); opacity:var(--spot,0); transition:opacity .35s ease; pointer-events:none; } /* 1px gradient border lit at the cursor */ .panel::after{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), var(--gold), rgba(255,79,163,.5) 40%, transparent 70%); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude; -webkit-mask-composite:xor; opacity:var(--spot,0); transition:opacity .35s ease; pointer-events:none; } .panel:hover{ transform:translateY(-4px); box-shadow:0 22px 60px rgba(0,0,0,.45); } .panel h2{ font-family:var(--font-display); color:var(--pink-3); font-size:1.75rem; margin-bottom:1rem; text-transform:uppercase; letter-spacing:.03em; text-shadow:0 0 22px rgba(255,143,199,.4); } .panel p{color:#ffe3f2;line-height:1.65;} .panel .tiny{font-size:.6em;color:var(--pink-2);text-transform:none;font-weight:400;} .panel strong{ color:#fff; } /* scroll reveal */ .reveal{ opacity:0; transform:translate3d(0,44px,0) scale(.985); transition:opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); } .reveal.in-view{ opacity:1; transform:none; } .badge-row{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.2rem;} .badge{ background:rgba(255,79,163,.15); border:1px solid var(--pink-4); padding:.4rem .9rem; border-radius:999px; font-size:.85rem; color:var(--pink-1); transition:transform .2s ease, background .2s ease; } .badge:hover{ transform:translateY(-3px) rotate(-2deg); background:rgba(255,79,163,.28); } /* ---------- groom dossier ---------- */ .dossier-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:1rem; margin-top:1.4rem; } .trait{ position:relative; background:rgba(255,255,255,.04); border:1px solid rgba(255,143,199,.28); border-radius:16px; padding:1.2rem 1.2rem 1.3rem; transition:transform .25s ease, border-color .25s ease, background .25s ease; } .trait:hover{ transform:translateY(-4px); border-color:var(--gold); background:rgba(255,255,255,.06); } .trait-ico{ display:block; font-size:1.9rem; line-height:1; margin-bottom:.5rem; filter:drop-shadow(0 0 12px rgba(255,79,163,.6)); } .trait h3{ font-family:var(--font-display); font-size:1.15rem; color:var(--pink-2); margin-bottom:.45rem; letter-spacing:.02em; } .trait p{ font-size:.92rem; line-height:1.6; } .trait em{ color:var(--gold); font-style:italic; } .trait-note{ margin-top:.7rem; padding-top:.7rem; border-top:1px dashed rgba(255,143,199,.3); color:var(--pink-2); font-size:.86rem; } .coffee-btn{ margin-top:.9rem; } .coffee-verdict{ margin-top:.7rem; min-height:1.4em; font-size:.9rem; color:var(--gold); font-weight:600; } .coffee-verdict em{ color:var(--pink-2); font-weight:400; } .coffee-verdict.pop{ animation:verdictPop .4s cubic-bezier(.2,.9,.3,1.2); } @keyframes verdictPop{ from{ opacity:0; transform:translateY(6px) scale(.96); } to{ opacity:1; transform:none; } } /* ---------- Spain plan ---------- */ .plan-list{ list-style:none; margin-top:1.2rem; display:flex; flex-direction:column; gap:.75rem; } .plan-list li{ display:flex; gap:.85rem; align-items:flex-start; background:rgba(255,79,163,.07); border-left:3px solid var(--pink-4); border-radius:0 12px 12px 0; padding:.7rem .9rem; transition:background .2s ease, transform .2s ease; } .plan-list li:hover{ background:rgba(255,79,163,.14); transform:translateX(4px); } .plan-list li > span{ font-size:1.3rem; line-height:1.3; flex-shrink:0; } .plan-list div{ color:#ffe3f2; line-height:1.55; font-size:.94rem; } .plan-list strong{ color:#fff; } /* ---------- the crew ---------- */ .crew-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:1rem; margin-top:1.2rem; } .crew-card{ background:linear-gradient(160deg, rgba(143,91,255,.12), rgba(255,79,163,.06)); border:1px solid rgba(255,143,199,.25); border-radius:16px; padding:1.1rem; transition:transform .25s ease, box-shadow .25s ease; } .crew-card:hover{ transform:translateY(-4px) rotate(-.6deg); box-shadow:0 14px 34px rgba(0,0,0,.35); } .crew-card h3{ font-family:var(--font-display); font-size:1.05rem; color:var(--gold); margin-bottom:.4rem; } .crew-card p{ font-size:.9rem; line-height:1.55; } /* ---------- gallery ---------- */ .gallery-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:.8rem; margin-top:1rem; } .photo-slot{ aspect-ratio:1; border:2px dashed var(--pink-3); border-radius:14px; display:flex;align-items:center;justify-content:center; font-size:1.8rem; opacity:.55; background:rgba(255,143,199,.05); transition:transform .25s ease, opacity .25s ease, box-shadow .25s ease; } .photo-slot:hover{ transform:scale(1.06) rotate(-2deg); opacity:1; box-shadow:0 0 24px rgba(255,79,163,.4); } .hint{margin-top:1rem;font-size:.85rem;color:var(--pink-2);} .hint code{background:rgba(255,255,255,.08);padding:.1rem .4rem;border-radius:6px;} /* ---------- game ---------- */ .game-panel kbd{ background:rgba(255,255,255,.12); border:1px solid var(--pink-3); border-radius:6px; padding:.1rem .5rem; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.85em; } /* prize callout above the board */ .prize-note{ margin-top:1rem; padding:.85rem 1.1rem; border-radius:14px; background:linear-gradient(100deg, rgba(255,209,102,.18), rgba(255,79,163,.12)); border:1px solid rgba(255,209,102,.45); font-size:.95rem; line-height:1.55; } .prize-note strong{ color:var(--gold); } .prize-note .tiny{ display:block; margin-top:.25rem; opacity:.75; font-size:.8rem; } .prize-tag{ margin:-.4rem 0 .7rem; font-size:.78rem; font-weight:600; color:var(--gold); background:rgba(255,209,102,.12); border:1px dashed rgba(255,209,102,.5); border-radius:999px; padding:.3rem .6rem; text-align:center; } .game-layout{ display:flex; gap:1.4rem; margin-top:1.4rem; align-items:flex-start; flex-wrap:wrap; } .game-wrap{ position:relative; flex:1 1 520px; min-width:280px; border-radius:18px; overflow:hidden; border:2px solid var(--pink-4); box-shadow:0 0 40px rgba(255,79,163,.28), inset 0 0 40px rgba(0,0,0,.4); } #gameCanvas{ display:block; width:100%; height:auto; /* JS sets an explicit height once it has measured */ background:#12010e; touch-action:none; } /* fullscreen toggle, sits inside the board */ .fs-btn{ position:absolute; left:10px; top:8px; z-index:3; width:34px; height:34px; border-radius:10px; border:1px solid rgba(255,194,226,.45); background:rgba(18,1,14,.5); color:var(--pink-1); font-size:1rem; line-height:1; cursor:pointer; backdrop-filter:blur(4px); transition:background .2s ease, transform .15s ease; } .fs-btn:hover{ background:rgba(255,79,163,.35); transform:scale(1.06); } /* thumb zones — touch only, and only while a run is in progress */ .touch-zones{ display:none; } @media (hover: none){ .touch-zones{ display:block; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0; transition:opacity .3s ease; } .game-wrap.playing .touch-zones{ opacity:1; } .tz{ position:absolute; top:0; bottom:0; width:26%; display:flex; align-items:flex-end; justify-content:center; padding-bottom:12px; font-family:var(--font-display); font-size:2.4rem; font-weight:800; color:rgba(255,240,248,.5); text-shadow:0 2px 10px rgba(0,0,0,.7); } .tz-left{ left:0; background:linear-gradient(90deg, rgba(255,79,163,.18), transparent); } .tz-right{ right:0; background:linear-gradient(270deg, rgba(255,79,163,.18), transparent); } } /* fullscreen: let the board fill the screen and centre it */ .game-wrap:fullscreen{ width:100vw; height:100vh; border:none; border-radius:0; display:flex; align-items:center; justify-content:center; background:#12010e; } .game-wrap:fullscreen #gameCanvas{ width:100%; } .game-overlay{ position:absolute;inset:0; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem; background:rgba(18,1,14,.62); backdrop-filter:blur(3px); padding:1rem; text-align:center; } .game-overlay.hidden{display:none;} .play-btn{margin-top:0;} .score-line{color:var(--pink-1);font-weight:600;} .hud{ position:absolute;top:10px;right:14px; display:flex;gap:1rem;align-items:center; font-size:.85rem; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.8); pointer-events:none; } .hud .combo{ font-family:var(--font-display); font-weight:800; color:var(--gold); opacity:0; transform:scale(.6); transition:opacity .2s ease, transform .2s ease; } .hud .combo.active{ opacity:1; transform:scale(1); animation:comboPop .35s ease; text-shadow:0 0 14px var(--gold); } @keyframes comboPop{ 0%{ transform:scale(1.5) rotate(-6deg); } 100%{ transform:scale(1) rotate(0); } } .name-form.hidden{ display:none; } .name-form{ display:flex; flex-direction:column; gap:.5rem; align-items:center; margin-top:.4rem; } .name-form label{ font-size:.85rem; color:var(--gold); font-weight:600; } .name-form-row{ display:flex; gap:.5rem; } .name-form input{ background:rgba(255,255,255,.1); border:2px solid var(--pink-3); border-radius:999px; padding:.55rem 1rem; color:#fff; font-family:var(--font); font-size:.9rem; width:150px; } .name-form input::placeholder{ color:rgba(255,240,248,.5); } .name-form input:focus{ outline:none; border-color:var(--gold); } /* leaderboard */ .leaderboard{ flex:1 1 220px; min-width:220px; background:rgba(255,255,255,.04); border:1px solid rgba(255,143,199,.3); border-radius:18px; padding:1.2rem 1.3rem; max-height:480px; display:flex; flex-direction:column; } .leaderboard h3{ font-family:var(--font-display); color:var(--gold); margin-bottom:.8rem; font-size:1.15rem; text-shadow:0 0 16px rgba(255,209,102,.4); } .board-list{ list-style:none; display:flex; flex-direction:column; gap:.4rem; overflow-y:auto; } .board-list li{ display:flex; justify-content:space-between; gap:.6rem; padding:.45rem .6rem; border-radius:10px; background:rgba(255,255,255,.03); font-size:.88rem; } .board-list li .rank{ color:var(--pink-3); font-weight:700; width:1.6em; flex-shrink:0; } .board-list li .bname{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .board-list li .bscore{ font-weight:700; color:var(--pink-1); font-variant-numeric:tabular-nums; } .board-list li.top1{ background:linear-gradient(90deg, rgba(255,209,102,.22), transparent); } .board-list li.top1 .rank{ color:var(--gold); } .board-list li.top2{ background:rgba(255,255,255,.06); } .board-list li.top3{ background:rgba(255,143,199,.1); } .board-empty{ color:var(--pink-2); opacity:.7; font-size:.85rem; text-align:center; padding:1rem 0; } .board-status{ margin-top:.6rem; font-size:.72rem; color:var(--pink-2); opacity:.7; } /* ---------- footer ---------- */ footer{ position:relative;z-index:2; text-align:center; padding:2rem 1.5rem 3rem; color:var(--pink-2); font-size:.8rem; opacity:.7; } /* ---------- responsive ---------- */ @media (max-width:600px){ .hero{ padding:5.5rem 1.2rem 3rem; } .c-box{min-width:72px;padding:.8rem;} .c-num{font-size:1.8rem;} .boob-float{display:none;} .game-layout{ flex-direction:column; gap:1rem; } .panel{ padding:1.5rem; } .party-btn{top:auto;bottom:14px;right:14px;font-size:.7rem;padding:.5rem .8rem;} .music-btn{top:auto;bottom:14px;left:14px;font-size:.7rem;padding:.5rem .8rem;} .aurora{ filter:blur(50px) saturate(130%); } /* The board breaks out of BOTH the panel's padding and

's side padding, so the playfield spans the full screen width instead of being squeezed into a ~320px strip on a 375px phone. */ .game-panel{ padding-inline:0; } .game-panel > h2, .game-panel > p{ padding-inline:1.5rem; } .game-wrap{ flex:1 1 auto; width:auto; min-width:0; margin-inline:-1.5rem; /* cancel

's padding */ border-radius:0; border-inline:none; } .leaderboard{ margin-inline:1.5rem; max-height:none; } .hud{ font-size:.78rem; gap:.7rem; top:8px; right:10px; } .name-form input{ width:130px; } } /* Phones in landscape: the board is short, so keep it compact and let the player see the road rather than the page chrome. */ @media (max-width:900px) and (orientation:landscape){ .game-wrap{ max-height:88vh; } } /* Coarse pointers get no hover-driven spotlight. */ @media (hover: none){ .panel::before, .panel::after{ display:none; } .panel:hover{ transform:none; } } /* ---------- adaptive quality ---------- The game measures real frame times and adds these classes when it needs headroom. Backdrop-filter and the big blurred aurora are the two most expensive things on the page, so they go first. */ body.perf-med .grain{ display:none; } body.perf-med .aurora{ filter:blur(38px) saturate(125%); } body.perf-med .panel, body.perf-med .c-box, body.perf-med .music-btn, body.perf-med .game-overlay{ backdrop-filter:none; } body.perf-low .grain, body.perf-low .aurora, body.perf-low .boob-float{ display:none; } body.perf-low .panel, body.perf-low .c-box, body.perf-low .music-btn, body.perf-low .game-overlay{ backdrop-filter:none; } body.perf-low .panel::before, body.perf-low .panel::after{ display:none; } body.perf-low .c-box, body.perf-low .game-wrap{ box-shadow:none; } body.perf-low .neon-sun{ box-shadow:none; } body.perf-low .grid-floor{ filter:none; } body.perf-low #sparkleCanvas{ display:none; } @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } .grain, .aurora{ display:none; } .reveal{ opacity:1; transform:none; } .hero-inner{ transform:none; opacity:1; } }