/* IRAS cosmic identity. Palette sampled from the supplied IRAS wordmark. */
:root{--brand-blue:#74f8fc;--brand-periwinkle:#5255ff;--brand-violet:#8b22fd;--brand-pink:#e543fc;--brand-gradient:linear-gradient(90deg,var(--brand-blue) 0%,var(--brand-periwinkle) 36%,var(--brand-violet) 68%,var(--brand-pink) 100%);--bg:#080817}
main{position:relative;isolation:isolate}
body{background:var(--bg)}
.gradient,.headline-line>.gradient{display:inline-block;width:fit-content;max-width:100%;background:var(--brand-gradient);background-clip:text;-webkit-background-clip:text;color:transparent}
.primary{background:var(--brand-gradient);color:#080c22;box-shadow:0 8px 32px #8b22fd30}
.button:disabled{background:#28243e;color:#c5bcdf}
.ambient-light{position:absolute;z-index:-1;inset:0 0 auto;height:2400px;pointer-events:none;background:radial-gradient(ellipse at 80% 16%,#9b22f52c,transparent 42%),radial-gradient(ellipse at 10% 28%,#27bdfe18,transparent 42%);transform:translate3d(0,var(--ambient-y,0px),0);animation:ambient-enter 1.6s ease-out both}
.brand-symbol{display:inline-block;vertical-align:middle;object-fit:contain}
.eyebrow .brand-symbol{margin-right:10px}
.ticker .brand-symbol{width:12px;height:12px}
.wordmark-frame{display:block;position:relative;width:178px;height:64px;overflow:hidden;animation:wordmark-enter 1.3s .15s ease-out both}
.brand .official-logo{position:absolute;display:block;width:290px;height:auto;max-width:none;left:-56px;top:-46px;aspect-ratio:1671/941;object-fit:contain}
.header .brand{min-width:178px}
.footer .wordmark-frame{width:154px;height:56px}
.footer .official-logo{width:252px;left:-49px;top:-40px;height:auto}
.hero-story{position:relative;height:265vh;min-height:1700px}
.hero-story .hero{position:sticky;top:0;height:100svh;min-height:650px;padding-block:35px;align-items:center}
.headline-line{display:block;padding-bottom:.06em;overflow:hidden}
.headline-line>span{display:block;animation:headline-enter 1s .25s cubic-bezier(.22,.7,.25,1) both}
.headline-line:nth-child(2)>span{animation-delay:.42s}
.headline-drift{transform:translate3d(0,var(--headline-y,0px),0);opacity:var(--headline-opacity,1)}
.hero-copy .intro,.hero-copy .actions,.hero-note{position:relative;z-index:3}
.hero-art{height:min(82svh,760px);min-height:560px;perspective:1400px;background:radial-gradient(ellipse,#9b22fd24,transparent 62%)}
.phone-scene{position:relative;transform-style:preserve-3d;transform:translate3d(var(--phone-x,0px),var(--phone-y,0px),0) rotateX(var(--phone-tilt,3deg)) rotateY(var(--phone-yaw,-13deg)) rotateZ(var(--phone-turn,8deg)) scale(var(--phone-scale,.82))}
.phone-glow{position:absolute;inset:10% -30%;background:radial-gradient(ellipse,#d239ed33,transparent 60%);filter:blur(30px);pointer-events:none}
.hero-art .poster{position:relative;height:570px;width:321px;padding:7px;border-radius:37px;transform:none;background:linear-gradient(135deg,#ada1c3,#262137 22%,#76608a 65%,#14111e);box-shadow:24px 35px 80px #000a,0 0 0 1px #ddd0ff50;overflow:hidden}
.poster img{border-radius:30px;display:block;object-fit:cover}
.phone-camera{position:absolute;z-index:2;top:12px;left:50%;width:70px;height:15px;transform:translateX(-50%);background:#06060d;border-radius:20px;border:1px solid #8c77aa3b}
.hero-emblem{position:absolute;top:3%;right:4%;opacity:.65}
.hero-emblem img{width:38px;height:auto}
.hero-progress{position:sticky;bottom:20px;width:110px;height:2px;background:#29233a;margin:0 auto;pointer-events:none;z-index:4}
.hero-progress{display:none}
.hero-progress span{display:block;width:100%;height:100%;background:var(--brand-gradient);transform-origin:left;scale:var(--hero-progress,.01) 1}
.drop-transition{position:relative;height:380vh;min-height:2300px;margin:0;background:radial-gradient(ellipse at 50% 50%,#5b1a862b,transparent 60%)}
.drop-stage{position:sticky;top:0;height:100svh;min-height:600px;overflow:clip;isolation:isolate}
.drop-scene-heading{position:absolute;z-index:2;top:6%;left:0;width:100%;text-align:center;pointer-events:none}
.drop-scene-heading .eyebrow{margin-bottom:14px;color:#b4b5d0}
.drop-scene-heading h2{font-size:clamp(34px,4vw,54px)}
#stack-canvas{display:block;width:100%;height:100%;pointer-events:none}
.drop-status{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);width:min(420px,75%);display:flex;flex-wrap:wrap;justify-content:space-between;gap:15px;font-size:9px;letter-spacing:2px;color:#bab3cd}
.sequence-progress{width:100%;height:2px;background:#29233a}
.sequence-progress>span{display:block;width:100%;height:100%;background:var(--brand-gradient);transform-origin:left;scale:var(--drop-progress,.01) 1}
.stack-fallback{position:absolute;top:27%;left:50%;transform:translateX(-50%);width:min(380px,70%);height:auto}
#games{position:relative}
.motion-enabled .game-card{transform:translate3d(0,var(--game-rise,0px),0) scale(var(--game-scale,1));transform-origin:center top}
.game-card{background:linear-gradient(125deg,#19102c,#0d1428);border-color:#8140ad66;box-shadow:0 30px 70px #0003}
.card-art img{object-position:center 35%}
.game-title-row{display:flex;align-items:center;gap:18px;margin-bottom:20px}
.game-title-row h3{margin:0}
.game-icon{width:76px;height:76px;border-radius:20px;object-fit:contain;flex-shrink:0;box-shadow:0 0 22px #c022fa22}
.web-test-label{font-size:9px;letter-spacing:2px;color:#a7d6ea;margin-top:10px}
.brand-scene{grid-column:1/-1;position:relative;width:100%;aspect-ratio:1671/941;overflow:hidden;border:1px solid #c24cf14a;border-radius:20px;box-shadow:0 35px 90px #0006,0 0 45px #9b22fd16;transform:translate3d(0,var(--studio-y,0px),0)}
.brand-scene img{display:block;width:100%;height:auto}
.ticker{overflow:hidden;padding-block:18px}
.ticker-track{display:flex;width:max-content;animation:ticker-travel 34s linear infinite;will-change:transform}
.ticker-group{display:flex;align-items:center;flex:none}
.ticker-group span{display:inline-flex;align-items:center;white-space:nowrap;padding-inline:34px;color:#b8b4d0;font-size:10px;font-weight:700;letter-spacing:2.5px}
.ticker-group span:after{content:'';width:6px;height:6px;margin-left:68px;border-radius:50%;background:var(--brand-gradient);box-shadow:0 0 12px #aa5bff8c}
.ticker-group span:last-child:after{margin-left:68px}
.rainbow-words,.rainbow-button{background:linear-gradient(90deg,#5b77ff 0%,#a13bff 23%,#ed35d1 47%,#ff4c77 72%,#ffe45b 100%);background-clip:text;-webkit-background-clip:text;color:transparent}
.rainbow-button{border:1px solid #cf63ef66;background-image:linear-gradient(90deg,#5b77ff 0%,#a13bff 23%,#ed35d1 47%,#ff4c77 72%,#ffe45b 100%);background-clip:border-box;-webkit-background-clip:border-box;color:#090817;box-shadow:0 8px 32px #e43bdd27}
.rainbow-button:hover{color:#090817;filter:brightness(1.12)}
.rainbow-button:disabled{background:#28243e;color:#c5bcdf}
.closing h2.gradient{width:fit-content;max-width:100%;margin-inline:auto}
@keyframes ticker-travel{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker-track{animation:none;transform:none}.ticker-group[aria-hidden="true"]{display:none}}
.arcade-section{background:radial-gradient(ellipse at 50% 45%,#261234,#0b0d20 65%)}
.arcade{border-color:#7046a66b}
.arcade-cover-icon{width:100px;height:100px;object-fit:contain;margin-bottom:16px;border-radius:25px}
.game-stage{background:radial-gradient(ellipse at 50% 20%,#6c258b33,transparent 65%),#090c1a;min-height:480px}
.game-stage .button{margin-top:10px}
.external-test{font-size:11px;color:#b7bfdd;margin-top:18px}
.game-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px;width:100%;padding:14px;background:#141527}
.game-toolbar button,.game-toolbar a{font-size:12px;border:1px solid #63517d;border-radius:6px;padding:8px 12px;background:transparent;color:#ece7ff;cursor:pointer}
.game-toolbar a{color:#a9dafa}
.game-frame-wrap{position:relative;width:100%;background:#060611;min-height:400px}
.game-stage .game-frame-wrap iframe{width:100%;height:min(80svh,800px);display:block}
.game-load-note{font-size:12px;color:#ccc1e1;max-width:550px;text-align:center;padding:12px 20px;margin:0 auto}
.game-frame-wrap:fullscreen{background:#060611;display:grid;place-items:center}
.game-frame-wrap:fullscreen iframe{height:100svh;width:100%}
@keyframes ambient-enter{from{opacity:0}to{opacity:1}}
@keyframes wordmark-enter{from{opacity:0;filter:drop-shadow(0 0 0 transparent)}to{opacity:1;filter:drop-shadow(0 0 10px #a93fff50)}}
@keyframes headline-enter{from{opacity:0;transform:translateY(110%)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1600px){.hero-story .hero{min-height:760px}.hero-art .poster{width:350px;height:622px}}
@media(max-width:1000px){.hero-art .poster{width:270px;height:480px}.hero-art{min-height:490px}.hero-story .hero{gap:18px}.wordmark-frame{width:155px}.brand .official-logo{width:253px;left:-49px;top:-40px}}
@media(max-width:700px){.header{height:82px}.header .brand{min-width:128px}.wordmark-frame{width:128px;height:50px}.brand .official-logo{width:209px;left:-40px;top:-33px}.footer .wordmark-frame{width:128px;height:50px}.footer .official-logo{width:209px;left:-40px;top:-33px}.hero-story{height:235vh;min-height:1500px}.hero-story .hero{height:100svh;min-height:740px;grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);padding-block:24px 4px;gap:0}.hero-copy h1{font-size:clamp(37px,10vw,52px);margin:10px 0 12px;line-height:1.03}.hero-copy .intro{font-size:13px;line-height:1.5;margin:0}.hero-copy .intro br:first-of-type{display:none}.hero-copy .actions{margin-top:14px;gap:15px}.hero-copy .button{font-size:11px;padding:12px 15px}.hero-copy .text-link{font-size:11px}.hero-note{font-size:7px;letter-spacing:1.2px;margin-top:17px}.hero-art{height:100%;min-height:0;margin:0;overflow:visible}.hero-art .poster{width:185px;height:329px;border-radius:26px;padding:5px}.poster img{border-radius:21px}.phone-camera{top:9px;width:43px;height:10px}.hero .orbit{width:260px;height:260px}.hero-progress{bottom:12px;width:75px}.ticker{padding-block:14px}.ticker-group span{font-size:8px;letter-spacing:1.5px;padding-inline:20px}.ticker-group span:after{width:5px;height:5px;margin-left:40px}.ticker-group span:last-child:after{margin-left:40px}.drop-transition{height:350vh;min-height:2100px}.drop-stage{height:100svh;min-height:600px}.drop-scene-heading{top:6%}.drop-scene-heading h2{font-size:32px}.drop-scene-heading .eyebrow{font-size:7px;letter-spacing:1.5px}.drop-status{bottom:20px;font-size:8px}.game-title-row{gap:13px}.game-title-row h3{font-size:31px}.game-icon{width:58px;height:58px;border-radius:15px}.brand-scene{border-radius:12px}.game-stage .game-frame-wrap iframe{height:75svh}.game-toolbar{gap:7px}.game-toolbar button,.game-toolbar a{font-size:10px;padding:7px 9px}}
.hero-story .hero{min-height:0}
@media(max-width:700px){.hero-story .hero{min-height:100svh}.hero-art{align-self:stretch}}
@media(max-height:720px) and (min-width:701px){.hero-story .hero{min-height:600px}.hero-art .poster{height:470px;width:265px}.hero-art{min-height:480px}.hero-copy h1{font-size:60px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ambient-light,.wordmark-frame,.headline-line>span{animation:none!important}.hero-story{height:auto;min-height:0}.hero-story .hero{position:relative;height:auto;min-height:700px}.hero-progress{display:none}.headline-drift,.phone-scene,.brand-scene,.motion-enabled .game-card,.ambient-light{transform:none!important;opacity:1!important}.drop-transition{height:760px;min-height:0}.drop-stage{position:relative;height:760px;min-height:0}.drop-instruction{display:none}.hero-art{height:580px}.hero-art .poster{transform:none!important}@media(max-width:700px){.hero-story .hero{min-height:780px}.hero-art{height:380px;min-height:0}.drop-transition,.drop-stage{height:650px}}}
/* Preserve the full supplied wordmark, including the GAMES baseline. */
.wordmark-frame{height:78px}
.brand .official-logo{top:-43px}
.footer .wordmark-frame{height:68px}
.footer .official-logo{top:-37px}
@media(max-width:1000px){.wordmark-frame{height:68px}.brand .official-logo{top:-37px}}
@media(max-width:700px){.wordmark-frame,.footer .wordmark-frame{height:57px}.brand .official-logo,.footer .official-logo{top:-30px}}

/* Layout corrections: preserve descenders and align each section to its frame. */
.headline-line { padding-bottom: .22em; margin-bottom: -.12em; }
.headline-line > span { line-height: 1.2; padding-bottom: .12em; }
.rainbow-button { border: 0; background-origin: border-box; }
#games .section-heading > p { text-align: right; }
.motion-enabled .game-card { transform: translate3d(0,var(--game-rise,0px),0); }
.closing { display: flex; flex-direction: column; align-items: center; }
.closing .closing-symbol { display: block; margin: 0; }
.closing h2.gradient { display: block; margin: 17px auto 23px; }
.ticker-group span:after { width: 28px; height: 28px; border-radius: 0; background: url('assets/emblem-ice.png') center / contain no-repeat; box-shadow: none; flex: none; }
@media (max-width:700px) {
  #games .section-heading > p { text-align: left; }
  .ticker-group span:after { width: 22px; height: 22px; }
}

/* Shared Perfect Drop spectrum, exactly matching the browser play button. */
:root { --rainbow-gradient: linear-gradient(90deg,#5b77ff 0%,#a13bff 23%,#ed35d1 47%,#ff4c77 72%,#ffe45b 100%); }
.rainbow-words { display:inline-block; width:fit-content; max-width:100%; background-image:var(--rainbow-gradient); }
.rainbow-button { background-image:var(--rainbow-gradient); }
.hero-story { height:182.5svh; min-height:0; }
.studio { row-gap:28px; }
.studio .brand-scene { transform:translate3d(0,calc(var(--studio-y,0px) * .25),0); }
.closing-motto { font-size:clamp(16px,2vw,23px); margin:0 0 28px; color:#c2bdd5; }
.closing-motto b { color:#e9dcff; text-shadow:0 0 14px #b55bff88; }
.identity-story { height:165svh; position:relative; }
.identity-stage { position:sticky; top:0; height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; }
.identity-logo { position:absolute; top:25%; opacity:var(--identity-logo,1); transform:translateY(calc(var(--identity-expand,0) * -30px)); }
.identity-logo .wordmark-frame { width:178px; height:78px; }
.identity-logo .official-logo { position:absolute; width:290px; max-width:none; height:auto; left:-56px; top:-43px; }
.identity-words { display:flex; align-items:baseline; justify-content:center; gap:calc(6px + var(--identity-expand,0) * 14px); opacity:var(--identity-text,0); font-size:clamp(24px,4.3vw,64px); font-weight:700; letter-spacing:-.04em; }
.identity-word { display:flex; align-items:baseline; }
.identity-word b { color:#e8dfff; text-shadow:0 0 22px #a649ff88; }
.identity-tail { display:block; overflow:hidden; white-space:nowrap; width:calc(var(--tail-width,0px) * var(--identity-expand,0)); opacity:var(--identity-expand,0); background:var(--brand-gradient); background-clip:text; -webkit-background-clip:text; color:transparent; padding-bottom:.15em; margin-bottom:-.15em; }
.identity-hint { position:absolute; bottom:12%; font-size:9px; letter-spacing:2px; color:#a5a1bd; opacity:calc(1 - var(--identity-expand,0)); }
@media(max-width:700px) {
  .hero-story { height:167.5svh; min-height:0; }
  .identity-words { flex-direction:column; align-items:flex-start; font-size:clamp(32px,9vw,48px); gap:8px; }
  .identity-word { transform:translateX(calc((1 - var(--identity-expand,0)) * 12px)); }
  .identity-logo { top:12%; }
  .studio { row-gap:20px; }
}
@media(prefers-reduced-motion:reduce) {
  .identity-story { height:auto; }
  .identity-stage { position:relative; height:auto; min-height:65svh; padding:100px 20px 60px; }
  .identity-logo { top:10px; opacity:1; transform:none; }
  .identity-words,.identity-tail { opacity:1; }
  .identity-tail { width:auto; }
  .identity-hint { display:none; }
  .hero-story { height:auto; }
}

/* The original PNG glyphs physically travel into their four words. */
.identity-logo { top:50%; left:50%; width:min(520px,94vw); transform:translate(-50%,-50%); opacity:var(--identity-logo,1); }
.identity-logo > img { display:block; width:100%; height:auto; }
.identity-words { display:flex; flex-direction:column; align-items:flex-start; gap:12px; opacity:1; font-size:clamp(36px,5.2vw,66px); letter-spacing:-.035em; }
.identity-word { align-items:center; transform:none; line-height:1.15; }
.identity-letter { height:1em; flex:none; overflow:hidden; transform-origin:0 0; transform:translate(calc(var(--glyph-x,0px) * (1 - var(--identity-expand,0))),calc(var(--glyph-y,0px) * (1 - var(--identity-expand,0)))) scale(calc(var(--glyph-scale,1) + (1 - var(--glyph-scale,1)) * var(--identity-expand,0))); opacity:var(--glyph-opacity,0); }
.identity-tail { width:auto; opacity:var(--identity-expand,0); background-image:linear-gradient(90deg,var(--word-from),var(--word-to)); transform:translateX(calc((1 - var(--identity-expand,0)) * 16px)); }
.nav-play { display:inline-flex; gap:20px; align-items:center; border:0; color:#080c22; }
.ui-arrow { display:inline-block; width:1em; height:1em; flex:none; vertical-align:-.12em; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.drop-transition { height:310svh; min-height:0; }
@media(max-width:700px){.identity-words{font-size:clamp(36px,9vw,52px)}.nav-play{display:none}.drop-transition{height:290svh;min-height:0}}
@media(prefers-reduced-motion:reduce){.identity-logo{display:none}.identity-letter{opacity:1;transform:none}.identity-tail{opacity:1;transform:none}.drop-transition{height:760px}}

/* Staged reveal: original glyph travel, cyan recolor, then parallel letter reveals. */
.identity-tail { opacity:1; transform:none; background:none; color:inherit; font-family:"Arial Black",Arial,Helvetica,sans-serif; font-weight:900; letter-spacing:-.055em; }
.identity-char { display:inline-block; opacity:0; background:var(--brand-gradient); background-size:calc((var(--char-count) + 1) * 100%) 100%; background-position:calc((var(--char-index) + 1) / var(--char-count) * 100%) 0; background-clip:text; -webkit-background-clip:text; color:transparent; }
.closing .closing-motto { font-family:inherit; font-size:37px; line-height:1.14; letter-spacing:-2px; font-weight:700; margin:0 auto 28px; }
.closing-motto b { color:inherit; text-shadow:none; }
@media(max-width:700px){.closing .closing-motto{font-size:30px}}
@media(prefers-reduced-motion:reduce){.identity-char{opacity:1!important}}

/* Rounded letterforms and true ink-baseline alignment. */
.identity-word { align-items:baseline; }
.identity-letter { vertical-align:baseline; }
.identity-tail { font-family:"Trebuchet MS",Arial,Helvetica,sans-serif; font-weight:700; letter-spacing:-.04em; }
.identity-char { background-image:linear-gradient(90deg,#5866ff 0%,#8b22fd 52%,#e543fc 100%); }
.closing .closing-motto { font-family:Arial,Helvetica,sans-serif; font-weight:400; color:transparent; background:var(--brand-gradient); background-clip:text; -webkit-background-clip:text; }
.closing .closing-motto b { font-family:inherit; font-weight:700; color:inherit; }

/* Full-word spectrum measured once across glyph + tail, with ink overhang room. */
.identity-tail { font-family:"Arial Black",Arial,Helvetica,sans-serif; font-weight:900; letter-spacing:0; overflow:visible; }
.identity-char { padding-inline:.075em; margin-inline:-.075em; background-image:var(--brand-gradient); background-size:var(--word-paint-width,300px) 100%; background-position:var(--char-paint-x,0px) 0; }
.closing h2.gradient { font-size:42px; }
.closing .closing-motto,.closing .closing-motto b { font-weight:700; }
@media(max-width:700px){.closing h2.gradient{font-size:34px}}

/* Approved vector lettering: shared spectrum and individually revealed glyphs. */
.identity-words { width:min(780px,calc(100vw - 48px),calc((100svh - 140px) * .96)); gap:0; font-size:inherit; container-type:inline-size; }
.identity-word { display:block; position:relative; width:100%; height:27.5cqw; line-height:1; container-type:inline-size; }
.identity-letter { position:absolute; height:auto; overflow:hidden; }
.identity-letter > image { opacity:calc(1 - var(--glyph-color,0)); }
.identity-tail { position:static; display:contents; padding:0; margin:0; background:none; }
.identity-char { display:block; position:absolute; padding:0; margin:0; background:none; overflow:hidden; color:inherit; }
@media(prefers-reduced-motion:reduce){.identity-letter > image{opacity:0}.identity-letter svg{opacity:1!important}.identity-char{opacity:1!important}}

/* Thick brand-spectrum navigation, replacing the header wordmark. */
.header { position:relative; z-index:30; }
.menu-toggle { display:flex; flex-direction:column; justify-content:center; gap:7px; width:60px; height:54px; padding:10px 5px; background:transparent; border:0; cursor:pointer; }
.menu-toggle span { display:block; width:48px; height:5px; border-radius:4px; background:var(--brand-gradient); transition:transform .22s ease,opacity .22s ease; }
.menu-toggle[aria-expanded="true"] span:first-child { transform:translateY(12px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.menu-toggle[aria-expanded="true"] span:last-child { transform:translateY(-12px) rotate(-45deg); }
.header #main-navigation { position:absolute; left:0; top:calc(100% - 1px); width:min(320px,calc(100vw - 40px)); padding:14px; display:flex; flex-direction:column; align-items:stretch; gap:2px; background:#101024f5; border:1px solid #34304d; border-radius:14px; box-shadow:0 18px 55px #0007; }
.header #main-navigation[hidden] { display:none; }
.header #main-navigation a { display:block; padding:14px 16px; border-radius:8px; }
.header #main-navigation a:hover,.header #main-navigation a:focus-visible { background:#8b22fd24; }
.menu-toggle:focus-visible { outline:2px solid #74f8fc; outline-offset:4px; border-radius:8px; }

/* Separate the original light streaks so they can spread as GAMES fades. */
.identity-logo > img { clip-path:polygon(0 0,100% 0,100% 62%,73% 62%,73% 75%,27% 75%,27% 62%,0 62%); }
.identity-rays { position:absolute; top:50%; left:50%; width:min(520px,94vw); aspect-ratio:1671/941; transform:translate(-50%,-50%); pointer-events:none; opacity:var(--identity-rays-opacity,1); }
.identity-ray { position:absolute; top:62.168%; height:11.69%; overflow:hidden; transform:scaleX(var(--identity-rays-scale,1)); }
.ray-left { left:0; width:27.828%; transform-origin:right center; }
.ray-right { right:0; width:27.588%; transform-origin:left center; }
.closing h2.gradient { font-size:37px; }
@media(max-width:700px){.closing h2.gradient{font-size:30px}}
@media(prefers-reduced-motion:reduce){.identity-rays{display:none}.menu-toggle span{transition:none}}

.header .header-quicklinks { display:flex; align-items:center; gap:36px; }
.header-quicklinks .nav-play { display:inline-flex; padding:14px 18px; border-radius:8px; }
@media(max-width:700px){
  .header .header-quicklinks{gap:12px;font-size:10px}
  .header-quicklinks .nav-play{display:inline-flex;padding:11px 12px;gap:10px;font-size:10px}
  .menu-toggle{width:50px;flex:none}
  .menu-toggle span{width:40px}
}
@media(max-width:360px){.header .header-quicklinks{gap:8px}.header-quicklinks .nav-play{padding:10px 8px;gap:6px}.menu-toggle{width:44px}.menu-toggle span{width:35px}}

/* A restrained highlight travels across the actual logo alpha while idle. */
.identity-logo::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(105deg,transparent 43%,#ffffff08 47%,#ffffffa8 50%,#ffffff08 53%,transparent 57%); background-size:300% 100%; mask:url('assets/wordmark-ice.png') center/100% 100% no-repeat; -webkit-mask:url('assets/wordmark-ice.png') center/100% 100% no-repeat; clip-path:polygon(0 0,100% 0,100% 62%,73% 62%,73% 75%,27% 75%,27% 62%,0 62%); mix-blend-mode:screen; animation:identity-sheen 7s ease-in-out infinite; }
@keyframes identity-sheen { from{background-position:100% 0} to{background-position:0% 0} }
.identity-logo::after { background-size:200% 100%; animation:identity-sheen 5.5s ease-in-out infinite alternate; }
.identity-stage { isolation:isolate; }
.identity-stage::before { content:""; position:absolute; z-index:-1; inset:-18%; pointer-events:none; background:radial-gradient(ellipse at 28% 38%,#327bff38,transparent 48%),radial-gradient(ellipse at 72% 58%,#b02bff40,transparent 50%); animation:identity-atmosphere 12s ease-in-out infinite alternate; }
@keyframes identity-atmosphere { from{transform:translate3d(-6%,-3%,0) scale(1);opacity:.72} to{transform:translate3d(7%,5%,0) scale(1.13);opacity:1} }
#stack-canvas { mask-image:linear-gradient(to bottom,#000 0%,#000 82%,transparent 100%); -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 82%,transparent 100%); }
.ticker-track { animation-duration:58s; }
body { overflow-x:clip; }
@media(prefers-reduced-motion:reduce){.identity-logo::after,.identity-stage::before{animation:none}.identity-logo::after{display:none}}

/* One continuous animated atmosphere across the entire Site. */
body { isolation:isolate; }
body::before { content:""; position:fixed; z-index:-1; inset:-22%; pointer-events:none; background:radial-gradient(ellipse at 24% 34%,#327bff55,transparent 48%),radial-gradient(ellipse at 76% 60%,#a62bff60,transparent 49%),radial-gradient(ellipse at 48% 88%,#d82dff20,transparent 42%); animation:site-atmosphere 10s ease-in-out infinite alternate; will-change:transform; }
@keyframes site-atmosphere { from{transform:translate3d(-8%,-6%,0) scale(1);opacity:.72} to{transform:translate3d(9%,7%,0) scale(1.14);opacity:1} }
.identity-stage::before { display:none; }
.arcade-section { background:#0d0f2080; }
.identity-logo::after { display:none; }
.identity-highlight { position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen; filter:drop-shadow(0 0 2px #bcfaffb0) drop-shadow(0 0 6px #ac77ff78); }
.identity-highlight > span { display:block; width:100%; height:100%; background:linear-gradient(105deg,transparent 43%,#ffffff12 47%,#ffffffb8 50%,#ffffff12 53%,transparent 57%); background-size:200% 100%; mask:url('assets/wordmark-ice.png') center/100% 100% no-repeat; -webkit-mask:url('assets/wordmark-ice.png') center/100% 100% no-repeat; animation:identity-sheen 5.5s ease-in-out infinite alternate; }
.identity-ray { transform:scale(var(--identity-rays-scale,1),var(--identity-rays-thickness,1)); filter:drop-shadow(0 0 3px #a392ff88); }
@media(prefers-reduced-motion:reduce){body::before{animation:none;transform:none;opacity:.65}.identity-highlight{display:none}}

/* Keep the shared atmosphere uninterrupted between sections. */
.ticker { background:transparent; border-color:#ab94ec24; }
.arcade-section { background:transparent; border-block:0; }
.ray-left { left:calc(var(--identity-rays-join,0) * (22.172% + var(--identity-rays-scale,1) * .9%)); }
.ray-right { right:calc(var(--identity-rays-join,0) * (22.412% + var(--identity-rays-scale,1) * .9%)); }
.identity-highlight { filter:drop-shadow(0 0 2px #bcfaffb0) drop-shadow(0 0 6px #ac77ff78); }
.identity-highlight > span { background-image:linear-gradient(105deg,transparent 43%,#ffffff08 47%,#ffffffa8 50%,#ffffff08 53%,transparent 57%); }
.identity-ray { filter:drop-shadow(0 0 3px #a392ff88) grayscale(var(--identity-rays-white,0)) brightness(calc(1 + var(--identity-rays-white,0) * 2)); }
@property --glint-x { syntax:'<percentage>'; inherits:false; initial-value:0%; }
.identity-glints { position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen; filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px #d7dfff) drop-shadow(0 0 13px #ae8affb0); }
.identity-glints::before { clip-path:polygon(0 0,100% 0,100% 100%,73% 100%,73% 62%,27% 62%,27% 100%,0 100%); content:""; display:block; width:100%; height:100%; background:radial-gradient(ellipse 10px 5px at var(--glint-x) 28.3%,#fff 0%,#fff 28%,#e5f1ffb0 58%,transparent 100%),radial-gradient(ellipse 10px 5px at var(--glint-x) 56.9%,#fff 0%,#fff 28%,#e5f1ffb0 58%,transparent 100%),radial-gradient(ellipse 14px 3px at var(--glint-x) 67.16%,#fff 0%,#fff 28%,#e5f1ffb0 58%,transparent 100%); mask:url('assets/wordmark-ice.png') center/100% 100% no-repeat; -webkit-mask:url('assets/wordmark-ice.png') center/100% 100% no-repeat; animation:identity-glint-travel 5.5s ease-in-out infinite alternate; }
@keyframes identity-glint-travel { from{--glint-x:0%} to{--glint-x:100%} }
@media(prefers-reduced-motion:reduce){.identity-glints{display:none}}

/* Anchor Y scaling at the photographed laser core (source row 632). */
.ray-left { transform-origin:right 42.7272727%; }
.ray-right { transform-origin:left 42.7272727%; }
.identity-ray { filter:drop-shadow(0 0 3px #dce2ffb0) grayscale(var(--identity-rays-white,0)) brightness(calc(1 + var(--identity-rays-white,0) * 2)); }
/* The same alpha-masked sheen, now driven entirely by exit scroll position. */
.shine-exit-effect { display:block; position:absolute; left:0; top:0; width:100%; height:24cqw; pointer-events:none; opacity:var(--shine-exit-active,0); mix-blend-mode:screen; }
.shine-exit-effect { filter:none; }
.shine-exit-band { display:block; width:100%; height:100%; background:linear-gradient(105deg,transparent 42%,#ffffff10 45%,#ffffff80 48%,#fff 50%,#ffffff80 52%,#ffffff10 55%,transparent 58%); background-size:200% 100%; background-position:var(--shine-sweep-position,100%) 0; mask:url('assets/shine-mask.svg') center/100% 100% no-repeat; -webkit-mask:url('assets/shine-mask.svg') center/100% 100% no-repeat; }
@media(prefers-reduced-motion:reduce){.shine-exit-effect{display:none}}



.primary,.nav-play,.rainbow-button,.rainbow-button:hover { color:#000; }
.primary { background-image:linear-gradient(#ffffff1f,#ffffff1f),var(--brand-gradient); }
.rainbow-button { background-image:linear-gradient(#ffffff1f,#ffffff1f),var(--rainbow-gradient); }

/* Browser zoom reduces CSS viewport size: let short/narrow layouts reflow. */
@media(max-height:550px),(max-width:360px){
  .header{height:auto;min-height:76px;flex-wrap:wrap;gap:12px;padding-block:14px}
  .header .header-quicklinks{flex-wrap:wrap;gap:12px}
  .header .header-quicklinks .nav-play{white-space:normal}
  .wrap{width:calc(100% - 32px)}
  .identity-story{height:auto!important;min-height:0}
  .identity-stage{position:relative;height:auto;min-height:0;padding:32px 0;overflow:visible}
  .identity-logo,.identity-rays,.identity-hint{display:none}
  .identity-words{width:min(520px,calc(100vw - 40px))}
  .identity-letter{transform:none!important;opacity:1!important}
  .identity-letter>image{opacity:0}
  .identity-letter svg,.identity-char{opacity:1!important}
  .shine-exit-effect{display:none}
  .hero-story{height:auto!important;min-height:0!important}
  .hero-story .hero{position:relative;top:auto;height:auto;min-height:0;display:flex;flex-direction:column;gap:28px;padding-block:32px}
  .hero-copy{width:100%;min-width:0}
  .hero-copy h1{font-size:clamp(28px,8vw,48px);letter-spacing:-.04em}
  .headline-drift{transform:none;opacity:1}
  .hero-copy .intro{font-size:14px}
  .hero-copy .actions{display:flex;flex-wrap:wrap;gap:18px}
  .hero-copy .button{max-width:100%;white-space:normal}
  .hero-art{width:100%;height:auto;min-height:0;margin:0;perspective:none;background:none}
  .phone-scene{transform:none;display:flex;justify-content:center}
  .hero-art .poster{width:min(220px,80vw);height:auto;aspect-ratio:321/570}
  .poster img{width:100%;height:100%}
  .hero-art .orbit,.phone-glow{display:none}
  .drop-transition{height:auto!important;min-height:0!important}
  .drop-stage{position:relative;height:650px;min-height:0}
  .drop-scene-heading h2{font-size:clamp(24px,7vw,34px)}
  .motion-enabled .game-card,.studio .brand-scene{transform:none}
  .section-heading h2,h2{font-size:clamp(26px,8vw,38px)}
  .game-title-row{flex-wrap:wrap}
  .game-title-row h3{font-size:28px;overflow-wrap:anywhere}
}

/* Give the portrait splash its full frame and align the availability caption. */
.game-card{grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr)}
.card-art img{object-fit:contain;object-position:center}
.game-description{white-space:pre-line;max-width:440px}
.card-copy .web-test-label{margin:16px 0 0;padding:0;text-align:left}
@media(max-width:700px){.game-card{grid-template-columns:1fr}.card-art{min-height:420px}}

/* A centered, content-sized card: no gutters around the portrait artwork. */
.game-card{width:fit-content;max-width:100%;margin-inline:auto;grid-template-columns:278px minmax(0,530px);min-height:0}
.card-art{min-height:0;aspect-ratio:941/1672}
.card-art img{inset:0;width:100%;height:100%;object-fit:contain}
.card-copy{min-width:0;padding:42px 40px}
.art-caption{left:18px;bottom:18px;font-size:8px;letter-spacing:2px}
@media(max-width:900px){.game-card{grid-template-columns:minmax(0,250px) minmax(0,1fr)}.card-copy{padding:30px 24px}}
@media(max-width:700px){.game-card{width:min(100%,440px);grid-template-columns:minmax(0,1fr)}.card-art{width:100%;min-height:0;aspect-ratio:941/1672}.card-copy{padding:32px 24px}}

/* Selectable chapters, arranged as one gently fanned deck. */
.deck-tabs{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:0 0 85px}
.deck-tab{font:inherit;font-size:12px;color:#bdb5d1;border:1px solid #7d5bb94d;border-radius:24px;background:#15122b;padding:10px 18px;cursor:pointer}
.deck-tab[aria-pressed="true"]{color:#fff;border-color:#b174ff;background:#752ee633}
.game-deck{display:grid;width:min(808px,calc(100% - 48px));margin:0 auto 30px;position:relative;isolation:isolate}
.game-deck .game-card{grid-area:1/1;width:100%;margin:0;transition:transform .55s cubic-bezier(.22,.7,.25,1),filter .4s;position:relative;transform-origin:center bottom;box-shadow:0 24px 65px #0005;background:#111125}
.game-deck .game-card[data-slot="0"]{z-index:3;transform:none;filter:none}
.game-deck .game-card[data-slot="1"]{z-index:2;transform:translate(18px,-30px) rotate(2deg) scale(.97);filter:brightness(.8)}
.game-deck .game-card[data-slot="2"]{z-index:1;transform:translate(-18px,-60px) rotate(-2deg) scale(.94);filter:brightness(.65)}
.deck-select{position:absolute;inset:0;z-index:5;border:0;color:#d8d1eb;background:transparent;cursor:pointer;text-align:left;display:flex;align-items:flex-start;padding:8px 22px;font-size:10px;letter-spacing:2px}
.deck-select[hidden]{display:none}
.incoming-art{display:grid;place-items:center;background:radial-gradient(ellipse at 30% 30%,#5255ff77,transparent 65%),radial-gradient(ellipse at 70% 70%,#d333ec55,transparent 70%),#100d22}
.incoming-number{font-size:100px;font-weight:800;color:#a884e955;line-height:1}
.incoming-badge{display:inline-block;border:1px solid #9b71db66;border-radius:30px;color:#d5b6ff;padding:9px 15px;font-size:10px;letter-spacing:2px;margin-top:22px}
.game-deck .incoming-card h3{font-size:42px}

/* The real web game and its launch screen share a portrait phone viewport. */
.arcade-section .arcade{position:relative;width:min(390px,100%);margin-inline:auto;padding:11px;border:1px solid #b2a0d263;border-radius:48px;background:linear-gradient(130deg,#a293b8,#30283f 25%,#6c5a83 70%,#241b32);box-shadow:0 28px 70px #0005}
.arcade-section .arcade::before{content:"";position:absolute;z-index:10;top:22px;left:50%;transform:translateX(-50%);width:112px;height:25px;border-radius:20px;background:#050509;pointer-events:none}
.arcade .arcade-bar,.arcade .arcade-bottom{display:none}
.arcade #game-stage{width:100%;aspect-ratio:9/19.5;height:auto;min-height:0;border-radius:37px;overflow:hidden;padding:64px 22px 30px;gap:0}
.arcade .arcade-cover-icon{width:88px;height:88px;margin-bottom:8px}
.arcade .game-stage h3{font-size:25px;line-height:1.25;max-width:100%}
.arcade .game-stage p:not(.eyebrow){font-size:12px}
.arcade .game-stage .button{font-size:12px;padding:14px 16px;gap:20px}
.arcade #game-stage.loaded{display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:43px 0 14px;aspect-ratio:9/19.5}
.arcade .game-toolbar{gap:5px;padding:6px;background:#121024}
.arcade .game-toolbar button,.arcade .game-toolbar a{font-size:9px;padding:6px;gap:4px}
.arcade .game-frame-wrap{height:100%;min-height:0;overflow:hidden}
.arcade .game-frame-wrap iframe{height:100%!important;width:100%;border:0}
.arcade .game-load-note{font-size:9px!important;line-height:1.4;padding:7px 12px;margin:0}
.arcade .game-frame-wrap:fullscreen{height:100svh}
@media(max-width:700px){.game-deck{width:min(440px,calc(100% - 32px))}.deck-tabs{gap:6px}.deck-tab{font-size:10px;padding:9px 12px}.game-deck .game-card{grid-template-columns:minmax(0,1fr)}.game-deck .incoming-card{grid-template-rows:1fr auto}.game-deck .incoming-art{aspect-ratio:auto;min-height:200px}.incoming-number{font-size:80px}.arcade-section .arcade{max-width:370px}}
@media(prefers-reduced-motion:reduce){.game-deck .game-card{transition:none}}

/* Five chapters spread across a wide fan; the selected card takes the center. */
.game-deck{width:100%;padding-block:16px 80px;justify-items:center}
.game-deck .game-card{width:min(68%,808px);grid-template-columns:34.4% minmax(0,1fr);transform-origin:50% 85%}
.game-deck .game-card[data-slot="0"]{z-index:5;transform:none;filter:none}
.game-deck .game-card[data-slot="1"]{z-index:3;transform:translate(18%,28px) rotate(7deg) scale(.88);filter:brightness(.78)}
.game-deck .game-card[data-slot="-1"]{z-index:3;transform:translate(-18%,28px) rotate(-7deg) scale(.88);filter:brightness(.78)}
.game-deck .game-card[data-slot="2"]{z-index:2;transform:translate(36%,70px) rotate(14deg) scale(.76);filter:brightness(.65)}
.game-deck .game-card[data-slot="-2"]{z-index:2;transform:translate(-36%,70px) rotate(-14deg) scale(.76);filter:brightness(.65)}
.game-deck .card-copy{padding:36px 28px}
.game-deck .game-title-row{gap:12px;flex-wrap:wrap}
.game-deck .game-title-row h3{font-size:36px}
.game-deck .game-icon{width:64px;height:64px}
.game-deck .stores{flex-wrap:wrap}
.game-deck .deck-select{padding:18px 12px;font-size:11px;writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:1px;background:linear-gradient(90deg,#22204488,transparent 35%)}
.game-deck .game-card[data-slot="1"] .deck-select,.game-deck .game-card[data-slot="2"] .deck-select{align-items:flex-end}
.deck-tabs{margin-bottom:24px}
@media(max-width:900px){.game-deck .game-card{width:68%;grid-template-columns:1fr}.game-deck .card-art{aspect-ratio:941/1672;max-height:360px}.game-deck .card-copy{padding:24px}.game-deck .incoming-art{min-height:250px}.game-deck .game-card[data-slot="1"] .deck-select,.game-deck .game-card[data-slot="2"] .deck-select{align-items:flex-start;justify-content:flex-end}.game-deck .incoming-card{grid-template-rows:minmax(250px,1fr) auto}}
@media(max-width:480px){.game-deck .game-card{width:72%}.game-deck .card-copy{padding:20px 16px}.game-deck .game-title-row h3{font-size:26px}.game-deck .game-icon{width:48px;height:48px}.game-deck .game-description{font-size:13px}.game-deck .button{font-size:11px;padding:12px;gap:10px}.game-deck .store{min-width:0;padding:8px}.deck-tab{padding:8px 10px}.game-deck .deck-select{font-size:9px;padding:12px 6px}}