@font-face{font-family:Vazirmatn;src:url('./assets/fonts/vazirmatn-variable.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Vazirmatn Round;src:url('./assets/fonts/vazirmatn-round-dots-variable.woff2') format('woff2');font-weight:100 900;font-display:swap}
/* The playful face is reserved for high-emphasis UI; running copy stays familiar to the game. */
h1,h2,h3,.btn,.nav-cta,.text-link,.preview-selector strong,.sample-actions button,.category-controls button,.coming-soon{font-family:Vazirmatn Round,Vazirmatn,Tahoma,sans-serif}
:root{--bg:#030014;--panel:#130a2c;--text:#f8eeff;--muted:#bda8cd;--accent:#ffd159;--violet:#b277ff;--pink:#ff82a5;--line:#b268ff29;--ink:#452b0b}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:radial-gradient(ellipse 80% 14% at 50% 8%,#24104e80,transparent),var(--bg);color:var(--text);font:16px/1.9 Vazirmatn,Tahoma,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}img{display:block;max-width:100%;height:auto}h1,h2,h3,p{margin:0}[hidden]{display:none!important}::selection{background:#b277ff;color:#fff}button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex="0"]:focus-visible{outline:3px solid #ffd159;outline-offset:5px}.container{width:min(1200px,calc(100% - 72px));margin-inline:auto}.section{padding-block:100px}.section h2{font-size:clamp(32px,4vw,50px);font-weight:800;line-height:1.6;letter-spacing:-1.4px}em{font-style:normal;color:#d2adff}.eyeline{display:block;color:#ca9ef2;font-size:12px;font-weight:700;margin-bottom:14px}.skip-link{position:fixed;top:-100px;right:20px;z-index:99;background:var(--accent);color:var(--ink);padding:12px 20px;border-radius:14px}.skip-link:focus{top:10px}.text-link{display:inline-flex;gap:20px;align-items:center;font-size:14px;font-weight:800;color:#e2c6fc}.text-link span{font-size:23px}.text-link:hover{color:var(--accent)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:28px;min-height:58px;padding:14px 25px;border-radius:18px;border:1px solid #fff4bc80;font-size:14px;font-weight:800;transition:transform .2s,box-shadow .2s}.btn-primary{background:linear-gradient(165deg,#ffed9a,#ffd159 43%,#f3a732);color:var(--ink);box-shadow:inset 0 2px 1px #fff8d5b0,0 4px 0 #8e4e1b,0 10px 32px #ffb12c27}.btn-primary:hover{transform:translateY(-3px);box-shadow:inset 0 2px 1px #fff8d5b0,0 6px 0 #8e4e1b,0 14px 35px #ffb12c40}.btn-primary:active{transform:translateY(2px)}
/* Materials and colors are shared with the native game, not a separate brand. */
.header{position:sticky;top:0;z-index:30;background:#060218df;border-bottom:1px solid #b268ff1c;backdrop-filter:blur(22px)}.header-inner{height:90px;display:flex;align-items:center;gap:25px}.brand{margin-inline-end:40px}.brand img{width:100px;height:64px;object-fit:contain;filter:drop-shadow(0 0 15px #f15b8e29)}.desktop-nav{display:flex;gap:30px;margin-inline-end:auto}.desktop-nav a{font-size:13px;color:#d2bfdf}.desktop-nav a:hover{color:#ffd159}.nav-cta{padding:10px 20px;border:1px solid #d49bff66;border-radius:14px;background:linear-gradient(130deg,#43205d,#25113b);font-size:13px;font-weight:700;box-shadow:inset 0 1px #ffffff16}.nav-cta span{margin-inline-start:22px;color:var(--accent)}.motion-toggle{color:#c9aff1;border:1px solid #c999ff30;background:#1a0d30;width:36px;height:36px;border-radius:50%;font-size:16px;flex-shrink:0}.motion-toggle:hover{border-color:#d49bff}.menu-toggle{display:none}.mobile-nav{padding:10px 24px 24px;background:#0c0521;border-top:1px solid var(--line)}.mobile-nav a{display:block;padding:12px 4px;border-bottom:1px solid var(--line)}
/* Hero: original vector artwork placed on a lit, dimensional stage. */
.hero{display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:26px;min-height:730px;padding-block:25px 60px;position:relative}.hero-copy{position:relative;z-index:3}.eyebrow{display:flex;align-items:center;gap:9px;font-size:12px;color:#d5b4eb}.eyebrow i{width:6px;height:6px;background:#ffd159;box-shadow:0 0 15px #ffd159;border-radius:50%}.hero h1{font-size:clamp(68px,7.8vw,106px);line-height:1.36;letter-spacing:-4px;font-weight:900;margin-block:22px 20px;text-shadow:0 6px 28px #050015}.hero h1 em{text-shadow:none;background:linear-gradient(100deg,#ffc77d 3%,#ff82ae 48%,#bd8bff 96%);background-clip:text;-webkit-background-clip:text;color:transparent;filter:drop-shadow(0 5px 25px #f35d9a24)}.hero-copy>p{color:#c0accf;max-width:415px;font-size:16px;line-height:2.3}.hero-buttons{display:flex;align-items:center;gap:25px;flex-wrap:wrap;margin-block:29px}.hero-signals{display:flex;flex-wrap:wrap;gap:16px;font-size:10px;color:#a88cbe}.hero-signals span+span:before{content:'✦';font-size:8px;color:#9a68c4;margin-inline-end:16px}.hero-art{position:relative;isolation:isolate;min-height:640px;min-width:0;overflow:clip}.arena-aura{position:absolute;inset:4% -10% 0;background:radial-gradient(ellipse,#723ac16b 0,#49218130 42%,transparent 68%);z-index:-1}.arena-platform{position:absolute;bottom:42px;left:9%;right:4%;height:80px;border-radius:50%;background:radial-gradient(ellipse,#b772f142,#42217b24 50%,transparent 72%);border-top:1px solid #d7a2ff32;box-shadow:0 -10px 80px #9d4df322;transform:rotate(-7deg)}.arena-orbit{position:absolute;left:4%;top:19%;width:93%;height:51%;border:1px solid #ce88ff3b;border-radius:50%;transform:rotate(-24deg);box-shadow:0 0 18px #8249dc16}.orbit-two{left:18%;top:12%;width:62%;height:67%;transform:rotate(34deg);border-color:#ffbe8526}.hero-word-orb{transform:translate3d(var(--scene-x,0px),var(--scene-y,0px),0);transition:transform .25s ease-out;position:absolute;top:12%;left:20%;width:64%;aspect-ratio:1;filter:drop-shadow(0 20px 35px #020015a0);animation:orb-hover 8s ease-in-out infinite}.hero-word-orb>img{position:absolute;inset:0;width:100%;height:100%}.hero-word-orb .orb-bezel{inset:7%;width:86%;height:86%}.hero-word-orb .orb-surface{inset:8.2%;width:83.6%;height:83.6%}.orb-word{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-shadow:0 2px 14px #070d39}.orb-word strong{font-size:clamp(42px,4.8vw,64px);font-weight:800;line-height:1.6}.orb-word small{color:#dbe6ffb5;font-size:10px}.orb-word>span{font-size:11px;color:#ffd888}.hero-character{position:absolute;filter:drop-shadow(0 18px 12px #0009);transform-origin:bottom center;animation:character-idle 7s ease-in-out infinite}.character-blue{width:35%;left:4%;bottom:10%;z-index:5;rotate:-10deg;animation-delay:-2s}.character-pink{width:32%;right:2%;bottom:9%;z-index:5;rotate:12deg;animation-delay:-4s}.character-gold{width:25%;left:38%;bottom:2%;z-index:6;rotate:-3deg;animation-delay:-1s}.scene-card{position:absolute;width:10%;filter:drop-shadow(0 10px 12px #0007);animation:card-drift 9s ease-in-out infinite}.scene-card-blue{left:8%;top:19%;rotate:-24deg}.scene-card-pink{right:3%;top:9%;rotate:23deg;animation-delay:-4s}.scene-spark{position:absolute;color:#ffe29b;text-shadow:0 0 20px #ffd15988;font-size:28px}.spark-a{left:16%;top:8%;font-size:36px}.spark-b{right:9%;top:42%;color:#f59ed9}.spark-c{left:33%;bottom:16%;font-size:15px}.scene-bubble{position:absolute;left:3%;bottom:42%;font-size:12px;line-height:1.5;font-weight:700;border:1px solid #85d8ff66;border-radius:18px 18px 3px 18px;padding:11px 16px;background:linear-gradient(130deg,#2f527aef,#20204eea);box-shadow:0 7px 24px #0004;rotate:-8deg;z-index:7}.scene-caption{position:absolute;bottom:0;inset-inline:0;text-align:center;color:#8f74aa;font-size:10px}.facts-bar{position:relative;background:linear-gradient(90deg,#120721,#1d0f35,#120721);border-block:1px solid #c18aff26}.facts-inner{display:flex;align-items:center;justify-content:space-around;gap:24px;padding-block:24px}.facts-inner p{display:flex;align-items:center;gap:14px;color:#baa5cd;font-size:12px}.facts-inner b{font-size:27px;color:#ffe39a;font-weight:800}.facts-inner>span{color:#694082;font-size:21px}
/* A native-looking word surface, with a deliberately small tutorial interaction. */
.sample-section{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:110px;padding-block:110px}.sample-copy>p{font-size:15px;line-height:2.2;color:var(--muted);max-width:425px;margin-top:22px}.sample-copy .small-note{font-size:11px;color:#8e78a0}.sample-card{position:relative;min-width:0;padding:22px 30px 25px;background:radial-gradient(ellipse at 50% 30%,#3a2c64,#180e31 65%);border:1px solid #a176cb55;border-radius:30px;box-shadow:inset 0 1px #ffffff15,0 25px 60px #0005;isolation:isolate}.sample-card:before{content:'';position:absolute;inset:12px;border:1px solid #ac7dd917;border-radius:23px;z-index:-1}.sample-top{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#c7ace9}.sample-top>span:last-child{direction:ltr;color:#8d75ac}.live-dot{display:inline-block;width:6px;height:6px;background:#65e4a1;border-radius:50%;box-shadow:0 0 10px #65e4a1;margin-inline-end:7px}.practice-orb{position:relative;width:235px;max-width:85%;aspect-ratio:1;margin:16px auto 0;filter:drop-shadow(0 13px 22px #0005)}.practice-orb img{position:absolute;inset:0;width:100%;height:100%}.practice-orb h3{position:absolute;inset:0;display:grid;place-items:center;font-size:42px;font-weight:800;text-align:center;text-shadow:0 3px 10px #080527}.sample-rule{text-align:center;font-size:11px;color:#e6d0f9}.sample-answer{display:grid;place-items:center;min-height:86px;text-align:center;font-size:13px;line-height:2.1;padding:15px 8px;color:#f1dca0}.sample-answer #sample-prompt{color:#a993bd}.sample-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid #b17bda26;padding-top:18px}.sample-actions button{font-size:12px;font-weight:800;border:0;min-height:44px;padding:10px 12px;background:none;color:#dbb9f4;border-radius:12px}.sample-actions button:first-child{background:linear-gradient(160deg,#fff0a6,#ffd159,#eda337);color:#452b0b;box-shadow:inset 0 1px #fff6c2,0 3px 0 #976024}.sample-actions button:last-child span{margin-inline-start:10px}.practice-buddy{position:absolute;width:88px;height:88px;right:-34px;top:10%;rotate:12deg;filter:drop-shadow(0 12px 15px #0005)}
/* Each mode uses its own real in-game icon and capture. */
.modes-section{position:relative;background:radial-gradient(ellipse at 10% 40%,#28135380,transparent 55%),#0b051e;border-block:1px solid #a268d51c}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:35px;margin-bottom:40px}.section-heading>p{font-size:14px;color:var(--muted);padding-bottom:8px}.mode-explorer{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center}.preview-selector{display:grid;gap:10px}.preview-selector button{display:flex;align-items:center;gap:18px;text-align:right;background:linear-gradient(110deg,#221238,#160b2c);border:1px solid #9e63c92b;border-radius:19px;min-height:100px;padding:12px 16px;color:var(--text);transition:background .2s,border-color .2s,transform .2s;box-shadow:inset 0 1px #ffffff08}.preview-selector button:hover{transform:translateX(-4px);border-color:#b481e780}.preview-selector [aria-selected="true"]{background:linear-gradient(110deg,#4c2b66,#25153c);border-color:#c99bffad;box-shadow:inset 0 1px #fff2,0 9px 30px #0003,0 0 22px #a256d515}.mode-icon{width:66px;height:66px;flex-shrink:0;filter:drop-shadow(0 7px 6px #0005)}.preview-selector button>span:not(.mode-tag){min-width:0}.preview-selector strong{display:block;font-size:20px;line-height:1.6}.preview-selector small{display:block;font-size:10px;color:#b7a0ca}.mode-tag{margin-inline-start:auto;white-space:nowrap;font-size:9px;color:#dbc3ee;border-radius:8px;background:#ffffff08;padding:4px 8px;border:1px solid #d39bff26}.preview-selector [aria-selected="true"] strong{color:#ffe39a}.preview-detail{font-size:13px;line-height:2.2;min-height:85px;margin-top:23px;color:#c8b5d9}.mode-more{border:0;background:none;padding:5px 0;min-height:44px;color:#e3b7ff}.preview-stage{--mode-color:#bd98ff;position:relative;isolation:isolate;display:grid;place-items:center;align-content:center;min-height:660px;padding-bottom:55px;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--mode-color) 14%,transparent),transparent 63%)}.preview-stage[data-preview-theme="mystery"]{--mode-color:#ffae68}.preview-stage[data-preview-theme="roulette"]{--mode-color:#ff84ce}.preview-stage[data-preview-theme="survival"]{--mode-color:#65e4a1}.stage-orbit{position:absolute;width:100%;aspect-ratio:1;border:1px solid #c388ff22;border-radius:50%;z-index:-1;transform:rotateX(30deg)}.stage-orbit:after{content:'';position:absolute;inset:15%;border:1px solid #c388ff19;border-radius:50%}.stage-number{position:absolute;left:0;bottom:10%;font-size:130px;line-height:1;font-weight:800;color:#cf9fff09}.phone{width:242px;aspect-ratio:966/2072;border:2px solid #9980ba;padding:6px;background:#110b21;border-radius:34px;box-shadow:0 0 0 2px #2f1c48,18px 25px 60px #0009,0 0 55px #925de127;rotate:-5deg;overflow:hidden;z-index:1}.phone>img{width:100%;height:100%;max-height:none;object-fit:contain;border-radius:26px}.shot-fallback{height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:28px;background:#100c22;border-radius:26px;text-align:center;padding:20px}.shot-fallback strong{font-size:25px}.shot-fallback span{font-size:12px;color:var(--muted)}.selected-mode-art{position:absolute;width:145px;height:145px;right:-10%;top:10%;z-index:2;rotate:12deg;filter:drop-shadow(0 14px 15px #0008);pointer-events:none}.gallery-controls{position:absolute;bottom:0;inset-inline:0;display:flex;justify-content:center;align-items:center;gap:20px}.gallery-controls>span{font-size:10px;color:#ab8fbf;max-width:190px;text-align:center}.gallery-controls button{width:44px;height:44px;border:1px solid #bd8aed5c;border-radius:14px;background:#28143f;color:#e6cbff;font-size:22px}.gallery-controls button:hover{background:#482163;color:var(--accent)}
/* Original character roster on a single continuous platform. */
.cast-section{background:radial-gradient(ellipse 65% 45% at 50% 76%,#46207159,transparent);padding-block:105px 45px;overflow:clip}.center-heading{text-align:center;max-width:750px;margin-inline:auto}.center-heading p{font-size:14px;color:var(--muted);margin-top:12px}.character-lineup{display:flex;align-items:flex-end;justify-content:center;position:relative;padding-top:42px;min-height:270px;isolation:isolate}.character-lineup:before{content:'';position:absolute;bottom:5%;left:4%;right:4%;height:65px;border-radius:50%;background:radial-gradient(ellipse,#9260ca22,transparent 70%);border-top:1px solid #b77de31f;z-index:-1}.cast-member{width:18%;margin-inline:-1%;transition:transform .3s;filter:drop-shadow(0 12px 14px #0006)}.cast-member:nth-child(2n){width:20%;transform:translateY(-12px)}.cast-member:nth-child(3){width:21%}.cast-member:hover{transform:translateY(-18px) rotate(-5deg)}.formats-section{padding-top:50px}.formats-section h2{margin-bottom:32px}.format-grid{display:grid;grid-template-columns:1fr 1fr;gap:25px}.format{position:relative;overflow:hidden;border:1px solid #a66fcb38;border-radius:27px;background:radial-gradient(ellipse at 0 90%,#7039ad45,transparent 60%),linear-gradient(125deg,#23113c,#120b25);padding:34px;min-height:320px}.format:nth-child(2){background:radial-gradient(ellipse at 0 90%,#dd9f4426,transparent 60%),linear-gradient(125deg,#2e1736,#150c25)}.format-number{display:block;font-size:35px;line-height:1.4;color:#e3bcff;font-weight:800}.format-number>span{font-size:13px;margin-inline-start:8px;font-weight:400}.format h3{font-size:25px;margin-block:18px 8px}.format p{font-size:12px;color:#baa2cd;line-height:2.1;max-width:220px}.format-label{display:inline-block;font-size:10px;color:#ffd888;border:1px solid #e2ba7740;border-radius:30px;padding:3px 10px;margin-top:18px}.format-cast{position:absolute;left:0;bottom:10px;width:43%;display:flex;justify-content:center;align-items:flex-end;pointer-events:none}.format-cast img{width:70%;margin-inline:-20%;filter:drop-shadow(0 8px 10px #0005)}.format-cast img:nth-child(2){transform:translateY(-20px);z-index:1}.format:nth-child(2) .format-cast{width:43%;left:10px}.format:nth-child(2) .format-cast img{width:59%}
.how-section{background:radial-gradient(ellipse at 80% 50%,#39215b32,transparent 55%),#0c051e;border-block:1px solid #9e63c91a}.how-grid{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:100px}.steps{list-style:none;counter-reset:steps;padding:0;margin:30px 0 0}.steps li{counter-increment:steps;display:flex;align-items:flex-start;gap:20px;padding:22px 0;border-top:1px solid #b98ae321}.steps li:before{content:counter(steps,persian);display:grid;place-items:center;width:37px;height:37px;flex-shrink:0;font-size:16px;color:#f5d8ff;border:1px solid #c18aff60;border-radius:13px;background:linear-gradient(150deg,#694389,#361f51);box-shadow:inset 0 1px #fff2;margin-top:3px}.steps h3{font-size:17px}.steps p{font-size:12px;color:var(--muted);line-height:2.1;margin-top:4px}.tutorial-art{position:relative;text-align:center;display:grid;justify-items:center}.tutorial-art:before{content:'';position:absolute;inset:7% -3% 23%;border-radius:50%;background:radial-gradient(ellipse,#6c3eb132,transparent 70%);border:1px solid #ae75e51c}.tutorial-phone{width:215px;position:relative;border:2px solid #79608d;padding:5px;background:#1b112e;border-radius:29px;transform:rotate(7deg);box-shadow:18px 24px 50px #0007}.tutorial-phone img{width:100%;aspect-ratio:942/2048;object-fit:contain;border-radius:22px}.tutorial-art p{font-size:11px;color:#9578ae;line-height:2.1;margin-top:27px}.tutorial-art strong{color:#d4b6e9}
/* Bundled category art, with no invented icons or external images. */
.category-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}.category-item{display:flex;flex-direction:column;align-items:center;padding:18px 10px 20px;border-radius:22px;background:linear-gradient(#25133d88,#10092166);border:1px solid #ad76e128;transition:transform .25s,border-color .25s}.category-item:hover{transform:translateY(-6px);border-color:#b778e177}.category-item img{width:110px;height:110px;object-fit:contain;filter:drop-shadow(0 9px 9px #0005);margin-bottom:14px}.category-item span{font-size:12px;color:#d9c3eb}.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px;padding-top:20px}.faq-list details{border-bottom:1px solid #ae73dd30}.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:20px;list-style:none;cursor:pointer;font-size:14px;padding:23px 0;color:#e5d1f2}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary span{color:#b482e0;font-size:24px}.faq-list details[open] summary span{transform:rotate(45deg)}.faq-list p{font-size:13px;line-height:2.2;color:#b9a0cc;padding-bottom:22px}.release{padding-bottom:75px}.release-panel{position:relative;overflow:hidden;background:radial-gradient(ellipse at 15% 100%,#8b3ac84d,transparent 55%),linear-gradient(120deg,#36204d,#1e1034);border:1px solid #bb89e75e;border-radius:35px;padding:52px 65px;min-height:400px;box-shadow:inset 0 1px #ffffff17,0 28px 70px #0004}.release h2{font-size:clamp(40px,5vw,62px);line-height:1.5;letter-spacing:-2px;font-weight:800;position:relative;z-index:2}.release h2 em{color:#ffd888}.release p{font-size:13px;line-height:2.1;color:#bba3cb;margin:18px 0 26px;position:relative;z-index:2}.coming-soon{display:inline-flex;align-items:center;gap:9px;font-size:12px;color:#ffe39a;border:1px solid #f4d0844a;border-radius:15px;background:#372540;padding:12px 20px;position:relative;z-index:2}.coming-soon i{width:6px;height:6px;border-radius:50%;background:#ffd159}.release-mascot{position:absolute;width:320px;left:5%;bottom:-22px;transform:rotate(-9deg);filter:drop-shadow(0 18px 25px #0006);z-index:1}.release-card{position:absolute;width:80px;left:35%;top:15%;transform:rotate(23deg);filter:drop-shadow(0 10px 15px #0006)}.footer{border-top:1px solid #aa78d229;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:25px;padding-block:28px}.footer img{width:83px}.footer p{font-size:12px;color:#987cad}.footer>a:last-of-type{font-size:12px;color:#bca1d1}.footer>a:last-of-type span{color:#ffd159;margin-inline-start:15px}.footer small{grid-column:1/-1;font-size:10px;color:#715b86;border-top:1px solid #aa78d21f;padding-top:18px}.mode-dialog{width:min(480px,calc(100% - 32px));margin:auto;padding:36px;border-radius:28px;border:1px solid #bb86e77c;background:radial-gradient(ellipse at 90% 0,#4a2866,#180d2c 70%);color:var(--text);max-height:calc(100dvh - 40px);overflow:auto;box-shadow:0 25px 80px #0008}.mode-dialog::backdrop{background:#030014c9;backdrop-filter:blur(9px)}.dialog-close{position:absolute;top:13px;left:13px;width:44px;height:44px;border:1px solid #c696e649;border-radius:50%;background:#ffffff08;color:#e6c6fa;font-size:25px}.mode-dialog h2{font-size:32px;color:#ffe39a;margin:22px 0 16px}.mode-dialog p{font-size:14px;line-height:2.2;color:var(--muted)}#dialog-tags{display:flex;flex-wrap:wrap;gap:8px;margin-block:24px}#dialog-tags span{font-size:11px;padding:5px 12px;border-radius:30px;border:1px solid #c18aff30;background:#ffffff05}.dialog-cta{width:100%;font-size:12px}
html[data-background="true"] *, .hero-art[data-offscreen="true"] *{animation-play-state:paused!important}
@keyframes orb-hover{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes character-idle{0%,100%{translate:0 0;scale:1}50%{translate:0 -7px;scale:1.015}}
@keyframes card-drift{0%,100%{translate:0 0}50%{translate:3px -12px}}
html[data-motion="paused"] *,html[data-motion="paused"] *:before,html[data-motion="paused"] *:after{animation-play-state:paused!important}
@media(max-width:1100px){.container{width:calc(100% - 56px)}.brand{margin-inline-end:12px}.desktop-nav{gap:20px}.hero{gap:8px;min-height:650px}.hero h1{font-size:83px}.hero-art{min-height:570px}.hero-word-orb{top:18%}.character-blue{bottom:13%}.character-pink{bottom:12%}.character-gold{bottom:6%}.hero-buttons{gap:18px}.hero-buttons .text-link{font-size:12px}.hero-copy>p{font-size:14px}.sample-section{gap:65px}.mode-explorer{gap:60px}.mode-tag{display:none}.preview-selector button{gap:15px}.selected-mode-art{width:125px;height:125px;right:-4%}.how-grid{gap:60px}.category-grid{gap:12px}.format{padding:28px}.format p{max-width:190px}.format-cast{width:40%}.release-mascot{left:0}}
@media(max-width:800px){.container{width:calc(100% - 40px)}.section{padding-block:65px}.header-inner{height:75px;gap:15px}.brand{margin-inline-end:auto}.brand img{width:80px;height:54px}.desktop-nav,.nav-cta{display:none}.menu-toggle{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;width:43px;height:43px;border:1px solid #a572d14d;border-radius:13px;background:#211033}.menu-toggle span{width:18px;height:2px;background:#dfc3f1}.motion-toggle{margin-inline-end:0}.hero{grid-template-columns:1fr;gap:0;padding-top:35px;padding-bottom:26px;min-height:0}.hero-copy{text-align:center}.hero h1{font-size:80px;line-height:1.25;letter-spacing:-3px;margin-block:18px}.eyebrow,.hero-buttons,.hero-signals{justify-content:center}.hero-copy>p{max-width:450px;margin-inline:auto;font-size:13px}.hero-buttons{margin-block:24px}.hero-art{width:min(590px,100%);margin:auto;min-height:565px}.hero-word-orb{top:13%;left:21%;width:60%}.orb-word strong{font-size:57px}.orb-word small{font-size:10px}.character-blue{width:34%;left:3%;bottom:11%}.character-pink{width:32%;right:2%;bottom:10%}.character-gold{width:25%;left:38%;bottom:3%}.scene-bubble{left:7%;bottom:43%}.scene-card-blue{left:10%;top:16%}.scene-card-pink{right:6%;top:8%}.arena-orbit{top:18%;left:7%;width:85%}.orbit-two{left:21%;width:60%;top:10%}.facts-inner{gap:8px;padding-block:20px}.facts-inner p{font-size:10px;flex-direction:column;gap:2px;text-align:center}.facts-inner b{font-size:23px}.facts-inner>span{font-size:17px}.sample-section{grid-template-columns:1fr;gap:35px}.sample-copy{text-align:center}.sample-copy>p{margin-inline:auto;max-width:480px}.sample-card{width:min(440px,calc(100% - 24px));margin:auto}.practice-buddy{width:70px;height:70px;right:-24px}.section-heading{gap:20px}.section-heading>p{font-size:12px;max-width:205px}.mode-explorer{grid-template-columns:1fr;gap:24px}.preview-selector{grid-template-columns:1fr 1fr;gap:10px}.preview-selector button{padding:12px;gap:12px;min-height:100px}.preview-selector button:hover{transform:translateY(-2px)}.mode-icon{width:62px;height:62px}.preview-selector strong{font-size:19px}.preview-selector small{font-size:10px}.preview-detail{min-height:60px;margin-top:20px}.preview-stage{min-height:600px;width:min(450px,100%);margin:auto}.selected-mode-art{right:0;top:12%;width:130px;height:130px}.phone{width:225px}.stage-orbit{width:95%}.character-lineup{min-height:200px;padding-top:30px}.cast-section .container{width:100%}.cast-section .center-heading{padding-inline:24px}.character-lineup{padding-inline:12px}.center-heading p{font-size:12px}.format-grid{gap:16px}.format{padding:25px;min-height:350px}.format h3{font-size:22px}.format p{font-size:12px;max-width:180px}.format-cast{opacity:.75;width:45%;left:-5px;bottom:5px}.format:nth-child(2) .format-cast{width:45%;left:0}.format-label{position:relative;z-index:2;background:#1d0d33bb}.how-grid{grid-template-columns:1fr;gap:40px}.tutorial-phone{width:200px}.tutorial-art:before{inset:5% 12% 22%}.category-grid{grid-template-columns:repeat(3,1fr);gap:15px}.category-item img{width:110px;height:110px}.faq-grid{grid-template-columns:1fr;gap:25px}.faq-grid h2 br{display:none}.release-panel{padding:35px;min-height:370px}.release-mascot{width:250px;left:-35px;bottom:-25px;opacity:.9}.release-card{left:30%;width:60px;top:10%}.release h2{font-size:47px}.release p{font-size:12px;max-width:65%}}
@media(max-width:520px){.hero{padding-top:28px}.hero h1{font-size:72px}.hero-copy>p{font-size:13px;line-height:2.3;padding-inline:8px}.hero-buttons{gap:17px}.btn{font-size:12px;min-height:53px;padding:12px 20px;gap:22px;border-radius:16px}.hero-buttons .text-link{font-size:11px;gap:10px}.hero-signals{font-size:10px;gap:10px}.hero-signals span+span:before{margin-inline-end:10px}.hero-art{min-height:410px;margin-top:8px}.hero-word-orb{top:12%;width:65%;left:18%}.orb-word strong{font-size:40px}.orb-word small{font-size:8px}.orb-word>span{font-size:9px}.scene-caption{font-size:9px}.character-blue{width:34%;left:4%;bottom:10%}.character-pink{width:32%;right:3%;bottom:10%}.character-gold{width:27%;left:37%;bottom:3%}.scene-bubble{font-size:9px;left:1%;bottom:43%;padding:9px 11px}.scene-card-blue{left:4%;top:17%;width:12%}.scene-card-pink{width:12%;right:2%;top:7%}.spark-a{font-size:24px;left:13%;top:5%}.spark-b{font-size:22px;right:6%}.arena-platform{bottom:26px}.facts-inner p{font-size:9px}.facts-inner b{font-size:22px}.facts-inner>span{font-size:14px}.section h2{font-size:32px;letter-spacing:-1px}.eyeline{font-size:11px}.sample-copy>p{font-size:13px}.sample-card{padding:20px 22px;border-radius:26px}.practice-orb{width:215px}.practice-orb h3{font-size:37px}.sample-actions{gap:6px}.sample-actions button{font-size:10px;padding-inline:9px}.sample-answer{font-size:12px;min-height:90px}.practice-buddy{right:-20px;width:62px;height:62px}.section-heading{display:block;margin-bottom:28px}.section-heading>p{max-width:none;margin-top:15px}.section-heading>p br{display:none}.preview-selector button{gap:8px;padding:10px 7px;min-height:87px;border-radius:15px}.mode-icon{width:48px;height:48px}.preview-selector strong{font-size:16px}.preview-selector small{font-size:10px;line-height:1.8}.preview-detail{font-size:12px;min-height:82px}.preview-stage{min-height:560px}.phone{width:208px}.selected-mode-art{width:100px;height:100px;right:-2%;top:16%}.stage-number{font-size:100px}.cast-section{padding-bottom:25px}.character-lineup{min-height:150px;padding-top:25px;padding-bottom:12px;flex-wrap:wrap;max-width:380px;margin:auto}.cast-member{width:31%;margin-inline:0}.cast-member:nth-child(2n){width:34%;transform:translateY(-6px)}.cast-member:nth-child(3){width:31%}.cast-member:nth-child(n+4){margin-top:-12px}.character-lineup:before{inset:55% 10% 6%;height:auto;background:radial-gradient(ellipse,#9260ca22,transparent 70%)}.format-grid{grid-template-columns:1fr;gap:18px}.format{min-height:300px;padding:28px}.format p{max-width:56%}.format-cast,.format:nth-child(2) .format-cast{width:43%;left:4px;bottom:15px;opacity:1}.format h3{font-size:25px}.format-number{font-size:32px}.how-grid{gap:30px}.steps{margin-top:25px}.steps li{gap:15px}.steps h3{font-size:16px}.steps p{font-size:12px}.tutorial-phone{width:190px}.category-grid{gap:10px}.category-item{border-radius:17px;padding:13px 7px}.category-item img{width:85px;height:85px;margin-bottom:9px}.category-item span{font-size:12px}.faq-list summary{font-size:13px}.release-panel{padding:30px 25px;min-height:480px;border-radius:28px}.release h2{font-size:40px}.release p{max-width:100%;font-size:12px;margin-top:14px}.release-mascot{width:180px;left:0;bottom:-22px}.release-card{width:50px;left:66%;top:auto;bottom:30px}.coming-soon{padding:10px 15px;font-size:11px}.footer{grid-template-columns:auto 1fr;gap:18px}.footer>a:last-of-type{grid-column:1/-1}.footer p{font-size:11px}.mode-dialog{padding:30px 25px}.mode-dialog p{font-size:13px}}
@media(max-width:360px){.container{width:calc(100% - 32px)}.hero h1{font-size:64px}.hero-art{min-height:355px}.orb-word strong{font-size:34px}.orb-word small{font-size:7px}.scene-bubble{font-size:8px}.hero-buttons{gap:14px}.hero-signals{font-size:9px}.mode-icon{width:38px;height:38px}.preview-selector strong{font-size:14px}.preview-selector small{font-size:9px}.category-item img{width:70px;height:70px}.format{padding:24px}.format p{max-width:57%;font-size:11px}.section h2{font-size:29px}.facts-inner p{font-size:8px}.facts-inner b{font-size:20px}}
@media(prefers-reduced-motion:reduce){.motion-toggle{display:none}html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* Stage motion follows the actual word, cards and character artwork. */
.hero-world{position:relative;isolation:isolate;overflow:clip}
.hero-world::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(circle 260px at var(--glow-x,52%) var(--glow-y,46%),#9a59dd2b,transparent 100%),radial-gradient(ellipse 32% 45% at 33% 45%,#592b9c4d 0,#3b1b6b24 42%,transparent 100%),radial-gradient(ellipse 35% 55% at 70% 50%,#6326a156 0,#32106325 55%,transparent 100%)}
.hero-world::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.38;background-image:linear-gradient(90deg,#9a72be11 1px,transparent 1px),linear-gradient(#9a72be0d 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 54% 58% at 50% 47%,#000 10%,transparent 100%)}
.hero-copy>*{animation:rise-into .75s cubic-bezier(.16,1,.3,1) both}
.hero-copy>.eyebrow{animation-delay:.05s}.hero-copy>h1{animation-delay:.14s}.hero-copy>p{animation-delay:.24s}.hero-copy>.hero-buttons{animation-delay:.33s}.hero-copy>.hero-signals{animation-delay:.43s}
.hero h1 em{background-size:190% 100%;animation:headline-light 10s ease-in-out infinite alternate}
.hero-art{overflow:visible;animation:stage-arrive .9s cubic-bezier(.16,1,.3,1) both}
.arena-aura{animation:stage-breathe 7s ease-in-out infinite alternate}
.orbit-one{animation:orbit-one 28s linear infinite}.orbit-two{animation:orbit-two 23s linear infinite}
.arena-orbit::after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;top:3%;left:35%;background:#fbd77b;box-shadow:0 0 11px 4px #e7b6529c,0 0 28px 9px #d1835b55}
.orbit-two::after{width:6px;height:6px;top:80%;left:17%;background:#ff8be8;box-shadow:0 0 11px 4px #df7bedaa}
.hero-word-orb{will-change:transform;backface-visibility:hidden}
.hero-word-orb{appearance:none;border:0;background:transparent;padding:0;color:inherit;text-align:center;cursor:pointer;border-radius:50%;scale:1;transition:transform .25s ease-out,scale .28s cubic-bezier(.16,1,.3,1)}
.hero-word-orb:hover{scale:1.035}.hero-word-orb:active{scale:.98}
.hero-word-orb:focus-visible{outline:3px solid #ffe095;outline-offset:5px}
.hero-word-orb::before{content:"";position:absolute;inset:2%;border-radius:50%;z-index:-1;box-shadow:0 0 0 1px #e5c4ff18,0 0 46px #aa70ff2e;opacity:.6;transition:opacity .3s,box-shadow .3s}
.hero-word-orb:hover::before,.hero-word-orb:focus-visible::before{opacity:1;box-shadow:0 0 0 2px #ffe2ae50,0 0 65px #b77aff78}
.orb-burst{position:absolute;z-index:4;inset:-12%;border-radius:50%;pointer-events:none;opacity:0;background:repeating-conic-gradient(from 9deg,#ffe49b 0 2deg,transparent 2deg 27deg,#eab9ff 27deg 29deg,transparent 29deg 45deg);mask-image:radial-gradient(circle,transparent 0 56%,#000 58% 60%,transparent 64%)}
.hero-word-orb.is-bursting .orb-burst{animation:orb-burst .7s cubic-bezier(.16,1,.3,1) both}
.hero-word-orb::after{content:"";position:absolute;inset:12%;z-index:2;border-radius:50%;pointer-events:none;opacity:.56;background:linear-gradient(105deg,transparent 38%,#e6eeff00 45%,#ffffff27 50%,#e6eeff00 55%,transparent 62%);background-size:220% 100%;animation:orb-glint 7s ease-in-out infinite}
.hero-word-orb .orb-ring{animation:ring-turn 35s linear infinite}
.orb-word strong{white-space:nowrap;line-height:1.35;text-shadow:0 4px 9px #020c3d,0 0 26px #d3def286}
.hero-character{transform:translate(var(--scene-near-x,0px),var(--scene-near-y,0px));transition:transform .28s ease-out;will-change:transform}
.character-gold{transform:translate(var(--scene-far-x,0px),var(--scene-near-y,0px))}
.scene-card{transform:translate(var(--scene-far-x,0px),var(--scene-far-y,0px));transition:transform .3s ease-out}
.scene-spark{animation:spark-twinkle 3.8s ease-in-out infinite}.spark-b{animation-delay:-1.3s}.spark-c{animation-delay:-2.2s}
.scene-bubble{animation:bubble-bob 5s ease-in-out infinite}
.hero-signals{border-top:1px solid #bd86db29;padding-top:13px;width:fit-content}
.section h2 em{background:linear-gradient(100deg,#ffc3e4,#c99aff 75%);background-clip:text;-webkit-background-clip:text;color:transparent}
.sample-section{position:relative;isolation:isolate;overflow:clip}
.sample-section::before{content:attr(data-word);position:absolute;z-index:-1;top:13%;right:20%;font-size:clamp(160px,22vw,280px);font-weight:900;line-height:1;letter-spacing:-8px;white-space:nowrap;color:transparent;-webkit-text-stroke:1px #be8cf244;opacity:.62;pointer-events:none;transform:rotate(-8deg)}
.sample-card{background:radial-gradient(ellipse 80% 48% at 50% 26%,#4a387c,#1a0e34 72%);box-shadow:inset 0 1px #ffffff28,0 25px 60px #0006,0 0 70px #8050bb16}
.sample-card::after{content:"";position:absolute;top:0;left:11%;right:11%;height:1px;background:linear-gradient(90deg,transparent,#ffdb9b9c,transparent);pointer-events:none}
.practice-orb{animation:practice-breathe 6s ease-in-out infinite}
.practice-buddy{animation:buddy-tilt 5.5s ease-in-out infinite}
.preview-selector button{position:relative;overflow:hidden}
.preview-selector button::before{content:"";position:absolute;right:0;top:22%;bottom:22%;width:3px;border-radius:5px;background:#ffd159;box-shadow:0 0 15px #ffd159;opacity:0;transform:scaleY(.35);transition:opacity .25s,transform .25s}
.preview-selector button[aria-selected="true"]::before{opacity:1;transform:scaleY(1)}
.preview-selector button[aria-selected="true"] .mode-icon{animation:mode-icon-pop .38s cubic-bezier(.16,1,.3,1)}
.modes-section{--mode-accent:#bd98ff;overflow:clip;isolation:isolate}
.modes-section[data-active-mode="mystery"]{--mode-accent:#ffab69}
.modes-section[data-active-mode="roulette"]{--mode-accent:#ff86c8}
.modes-section[data-active-mode="survival"]{--mode-accent:#75eab1}
.modes-section::before{content:"";position:absolute;z-index:-1;width:54%;aspect-ratio:1;top:12%;left:-8%;border-radius:50%;background-color:var(--mode-accent);opacity:.17;filter:blur(105px);transition:background-color .6s ease;pointer-events:none}
.preview-selector [data-preview-mode="classic"]{--card-accent:#ffdc88}
.preview-selector [data-preview-mode="mystery"]{--card-accent:#ffae77}
.preview-selector [data-preview-mode="roulette"]{--card-accent:#ff92d0}
.preview-selector [data-preview-mode="survival"]{--card-accent:#90efb5}
.preview-selector button[aria-selected="true"]{border-color:color-mix(in srgb,var(--card-accent) 65%,transparent);box-shadow:inset 0 1px #fff2,0 10px 35px #0004,0 0 29px color-mix(in srgb,var(--card-accent) 18%,transparent)}
.preview-selector button[aria-selected="true"] strong{color:var(--card-accent)}
.preview-selector button[aria-selected="true"]::before{background:var(--card-accent);box-shadow:0 0 17px var(--card-accent)}
.phone{border-color:color-mix(in srgb,var(--mode-color) 72%,#9980ba)}
.preview-stage{background:radial-gradient(ellipse 42% 43% at 49% 47%,color-mix(in srgb,var(--mode-color) 24%,transparent),transparent 100%),radial-gradient(ellipse at center,color-mix(in srgb,var(--mode-color) 10%,transparent),transparent 70%);transition:background .4s}
.preview-stage::before{content:"";position:absolute;width:85%;aspect-ratio:1;z-index:-1;border-radius:50%;background:repeating-conic-gradient(from 0deg,#cba4ff1b 0 1deg,transparent 1deg 12deg);mask-image:radial-gradient(circle,transparent 0 61%,#000 62%,transparent 65%);animation:ring-turn 60s linear infinite}
.stage-orbit{animation:ring-turn 33s linear infinite}
.phone{animation:phone-bob 7s ease-in-out infinite;transition:box-shadow .3s,rotate .3s}
.preview-stage:hover .phone{box-shadow:0 0 0 2px #2f1c48,18px 28px 68px #000a,0 0 75px color-mix(in srgb,var(--mode-color) 42%,transparent)}
.selected-mode-art{animation:mode-art-float 6s ease-in-out infinite}
.gallery-controls button{transition:transform .18s,background .18s,border-color .18s}.gallery-controls button:active{transform:scale(.88)}
.cast-member{animation:cast-idle 6s ease-in-out infinite;animation-delay:calc(var(--cast-order,0) * -.65s)}
.cast-member:nth-child(1){--cast-order:1}.cast-member:nth-child(2){--cast-order:2}.cast-member:nth-child(3){--cast-order:3}.cast-member:nth-child(4){--cast-order:4}.cast-member:nth-child(5){--cast-order:5}.cast-member:nth-child(6){--cast-order:6}
.character-lineup::after{content:"";position:absolute;inset-inline:7%;bottom:4%;height:2px;z-index:-1;background:linear-gradient(90deg,transparent,#a879d147 18%,#ffe6ac85 50%,#a879d147 82%,transparent);box-shadow:0 0 22px #b66df083;transform:perspective(200px) rotateX(65deg)}
.cast-member{position:relative;isolation:isolate;--cast-glow:#9b74f6}
.cast-member:nth-child(1){--cast-glow:#57dfff}.cast-member:nth-child(2){--cast-glow:#a0ee91}.cast-member:nth-child(3){--cast-glow:#ff73b6}.cast-member:nth-child(4){--cast-glow:#ffd47a}.cast-member:nth-child(5){--cast-glow:#65d6f5}.cast-member:nth-child(6){--cast-glow:#ca87f7}
.cast-member::before{content:"";position:absolute;z-index:-1;inset:30% 16% 7%;border-radius:50%;background:radial-gradient(circle,var(--cast-glow),transparent 72%);filter:blur(21px);opacity:.19;transition:opacity .3s,scale .3s}
.cast-member:hover::before{opacity:.42;scale:1.16}
.format{transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}.format:hover{transform:translateY(-5px);border-color:#d6a4f576;box-shadow:0 20px 45px #0004,0 0 32px #b872e518}
.format-cast img{transition:translate .3s ease}.format:hover .format-cast img:nth-child(2){translate:0 -8px}
.category-item{transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}.category-item:hover{box-shadow:0 15px 38px #0005,0 0 20px #c883f323}
.category-item img{transition:transform .35s cubic-bezier(.16,1,.3,1)}.category-item:hover img{transform:translateY(-7px) rotate(-5deg) scale(1.08)}
.release-panel::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 30% 50% at 18% 85%,#d79ce935,transparent 78%);z-index:0}
.release-mascot{animation:cast-idle 5.5s ease-in-out infinite}.release-card{animation:card-drift 7s ease-in-out infinite}
.dialog-heading{display:flex;align-items:center;gap:18px;padding-inline-end:25px}.dialog-heading img{width:96px;height:96px;flex:none;filter:drop-shadow(0 10px 18px #0008)}.dialog-heading .eyeline{margin:0}.mode-dialog .dialog-heading h2{margin:4px 0 0}
#dialog-facts{list-style:none;display:grid;gap:13px;margin:24px 0 28px;padding:0}#dialog-facts li{position:relative;padding-inline-start:21px;color:#e3d1ee;font-size:13px;line-height:2}#dialog-facts li::before{content:"✦";position:absolute;inset-inline-start:0;color:#ffd159}
@keyframes rise-into{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes stage-arrive{from{opacity:0;scale:.88;translate:0 30px}to{opacity:1;scale:1;translate:0 0}}
@keyframes headline-light{from{background-position:0% 50%}to{background-position:100% 50%}}
@keyframes stage-breathe{0%,100%{opacity:.67;scale:.97}50%{opacity:1;scale:1.04}}
@keyframes orbit-one{from{transform:rotate(-24deg)}to{transform:rotate(336deg)}}
@keyframes orbit-two{from{transform:rotate(34deg)}to{transform:rotate(-326deg)}}
@keyframes ring-turn{to{transform:rotate(360deg)}}
@keyframes orb-glint{0%,22%{background-position:120% 0}48%,100%{background-position:-120% 0}}
@keyframes spark-twinkle{0%,100%{opacity:.25;scale:.7}48%{opacity:1;scale:1.18}}
@keyframes bubble-bob{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes practice-breathe{0%,100%{scale:1}50%{scale:1.035}}
@keyframes buddy-tilt{0%,100%{rotate:8deg}50%{rotate:18deg}}
@keyframes mode-icon-pop{from{scale:.75;opacity:.45}to{scale:1;opacity:1}}
@keyframes phone-bob{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes mode-art-float{0%,100%{translate:0 0;rotate:12deg}50%{translate:0 -12px;rotate:19deg}}
@keyframes cast-idle{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes orb-burst{0%{opacity:0;scale:.72;rotate:-17deg}30%{opacity:.85}100%{opacity:0;scale:1.16;rotate:13deg}}
@keyframes deck-back-left{50%{transform:translate(-43px,14px) rotate(-21deg)}}
@keyframes deck-back-right{50%{transform:translate(40px,15px) rotate(19deg)}}
@media(max-width:800px){.hero-signals{margin-inline:auto}.hero-copy>*{animation-duration:.6s}.format:hover{transform:none}.sample-section::before{display:none}.modes-section::before{width:100%;top:20%;left:-30%;opacity:.12}}
@media(max-width:520px){.hero-world::after{background-size:38px 38px}.hero-word-orb::after{opacity:.42}.hero-signals{padding-top:10px}.hero-word-orb{will-change:auto}.hero-character{will-change:auto}.preview-stage::before{width:100%}.cast-member{animation-duration:7s}.release-panel::after{background:radial-gradient(ellipse 40% 35% at 0 100%,#d79ce929,transparent 78%)}.dialog-heading img{width:76px;height:76px}#dialog-facts li{font-size:12px}}
@media(max-width:520px){.hero-word-orb:hover{scale:1}}

/* A few practical tools from the actual game, styled as collectible cards. */
.extras-section{padding-top:40px}
.extras-grid{display:grid;grid-template-columns:1.24fr 1fr 1fr;gap:18px}
.extra-card{position:relative;isolation:isolate;overflow:hidden;min-height:300px;padding:28px;border:1px solid #bd89e347;border-radius:28px;background:radial-gradient(ellipse 90% 80% at 0 100%,#562d8b60,transparent 78%),linear-gradient(145deg,#27123e,#120a27 74%);box-shadow:inset 0 1px #ffffff1b,0 24px 55px #0003;transition:transform .28s,border-color .28s,box-shadow .28s}
.extra-card:hover{transform:translateY(-6px);border-color:#d9a2fb8c;box-shadow:inset 0 1px #ffffff2d,0 28px 60px #0005,0 0 28px #a970e01b}
.extra-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,#ffffff08,transparent 35%);z-index:-1}
.extra-index{display:inline-block;padding:5px 10px;border:1px solid #d9bbf542;border-radius:999px;color:#e7c8f4;font-size:10px;font-weight:700;background:#ffffff0a}
.extra-card h3{position:relative;z-index:2;margin-top:18px;font-size:22px;line-height:1.6;font-weight:800;color:#fff4ff}
.extra-card p{position:relative;z-index:2;margin-top:9px;max-width:240px;color:#c9b6d5;font-size:12px;line-height:2.1}
.extra-card img{position:absolute;z-index:1;left:12px;bottom:7px;width:128px;filter:drop-shadow(0 15px 16px #0008);transform:rotate(-8deg);transition:transform .3s cubic-bezier(.16,1,.3,1)}
.extra-card:hover img{transform:translateY(-9px) rotate(-3deg) scale(1.05)}
.extra-help{background:radial-gradient(ellipse 70% 65% at 0 100%,#be7a3e35,transparent 80%),radial-gradient(ellipse 100% 100% at 100% 0,#61317c77,transparent 83%),#1b0d31}
.extra-help img{left:12px;width:145px;bottom:6px}
.extra-pack{background:radial-gradient(ellipse 90% 80% at 0 100%,#a4419a5a,transparent 78%),linear-gradient(145deg,#361640,#160924 74%)}
.extra-pack img{left:19px;bottom:8px;width:94px;transform:rotate(-17deg)}
.extra-pack:hover img{transform:translateY(-9px) rotate(-10deg) scale(1.05)}
.extra-share{background:radial-gradient(ellipse 90% 80% at 0 100%,#3f8fc555,transparent 78%),linear-gradient(145deg,#1c2a4e,#0d102a 74%)}
.extra-share img{left:12px;bottom:6px;width:128px}
@media(max-width:900px){.extras-grid{grid-template-columns:1fr 1fr}.extra-help{grid-column:1/-1}.extra-card{min-height:270px}.extra-help img{width:155px}}
@media(max-width:580px){.extras-section{padding-top:24px}.extras-grid{grid-template-columns:1fr;gap:14px}.extra-help{grid-column:auto}.extra-card{min-height:245px;padding:23px}.extra-card h3{font-size:20px}.extra-card p{max-width:68%;font-size:11px}.extra-help p{max-width:72%}.extra-card img{width:112px}.extra-help img{width:125px}.extra-pack img{width:82px}.extra-share img{width:118px}}
@media(max-width:360px){.extra-card p{max-width:72%;font-size:10px}.extra-card img{opacity:.75}}

/* The six real word packs become a small, browsable card deck. */
.categories-section{padding-bottom:84px}
.category-explorer{--category-color:#7b52e8;display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);align-items:stretch;gap:22px}
.category-explorer[data-category-theme="gaming"]{--category-color:#6d5dfb}
.category-explorer[data-category-theme="food"]{--category-color:#f28c28}
.category-explorer[data-category-theme="sports"]{--category-color:#43a834}
.category-explorer[data-category-theme="music"]{--category-color:#e34862}
.category-explorer[data-category-theme="fantasy"]{--category-color:#8157e6}
.category-explorer .category-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.category-explorer .category-item{position:relative;justify-content:center;min-width:0;min-height:204px;border:1px solid #ae79d344;color:#e6d6f3;font:inherit;cursor:pointer;box-shadow:inset 0 1px #ffffff10;transition:transform .28s,border-color .28s,box-shadow .28s,background .28s}
.category-explorer .category-item img{width:116px;height:116px;margin-bottom:3px}
.category-explorer .category-item span{font-size:13px;font-weight:700}
.category-explorer .category-item[aria-pressed="true"]{transform:translateY(-5px);border-color:color-mix(in srgb,var(--category-color) 72%,#fff);background:radial-gradient(ellipse at 50% 25%,color-mix(in srgb,var(--category-color) 29%,transparent),transparent 72%),#221136;box-shadow:inset 0 1px #ffffff24,0 12px 28px #0005,0 0 22px color-mix(in srgb,var(--category-color) 22%,transparent)}
.category-explorer .category-item[aria-pressed="true"]::after{content:"";position:absolute;bottom:-1px;width:46%;height:3px;border-radius:5px;background:var(--category-color);box-shadow:0 0 15px var(--category-color)}
.category-stage{position:relative;isolation:isolate;display:grid;place-items:center;min-width:0;min-height:422px;padding:40px 18px 73px;border:1px solid #bd8ce94f;border-radius:30px;background:radial-gradient(ellipse 72% 70% at 50% 45%,color-mix(in srgb,var(--category-color) 33%,transparent),transparent 85%),linear-gradient(155deg,#281744,#120a28 80%);box-shadow:inset 0 1px #ffffff1b,0 26px 60px #0004;transition:background .45s,border-color .45s}
.category-stage::before,.category-stage::after{content:"";position:absolute;width:230px;height:290px;top:48px;left:calc(50% - 115px);border-radius:26px;border:1px solid #e7c4ff52;background:linear-gradient(135deg,#9a54cb,#411a77 68%,#210e4f);box-shadow:0 16px 30px #0005;z-index:-1;transform:translate(-29px,9px) rotate(-16deg)}
.category-stage::after{background:linear-gradient(135deg,#eb78a8,#63216c 68%,#270d46);transform:translate(27px,8px) rotate(12deg)}
.category-stage.is-dealing::before{animation:deck-back-left .52s cubic-bezier(.16,1,.3,1)}
.category-stage.is-dealing::after{animation:deck-back-right .52s cubic-bezier(.16,1,.3,1)}
.category-preview-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:min(255px,80%);min-height:306px;padding:68px 18px 25px;border:2px solid #e1baff88;border-radius:26px;text-align:center;background:radial-gradient(circle at 50% 25%,color-mix(in srgb,var(--category-color) 50%,#3956af),#231756 57%,#171033 100%);box-shadow:inset 0 2px 2px #fff5,inset 0 0 0 8px #ffffff0b,0 24px 34px #0008,0 0 36px color-mix(in srgb,var(--category-color) 32%,transparent);transform:rotate(-5deg);transition:background .45s,box-shadow .45s,transform .35s}
.category-preview-card:hover{transform:translateY(-6px) rotate(-2deg)}
.category-preview-card::after{content:"✦";position:absolute;right:20px;bottom:17px;color:#ffde9b;font-size:16px;text-shadow:0 0 15px #ffd159}
.category-preview-card img{position:absolute;width:88px;height:88px;object-fit:contain;top:-29px;filter:drop-shadow(0 9px 12px #0007)}
.category-preview-label{font-size:10px;color:#e9d7fd;line-height:1.8}
.category-preview-card strong{display:block;max-width:100%;margin:14px 0 5px;font-size:clamp(25px,3vw,39px);line-height:1.55;font-weight:800;color:#fff7ff;text-shadow:0 4px 12px #030322;overflow-wrap:anywhere}
.category-preview-card small{font-size:11px;font-weight:700;color:#ffd984}
.category-controls{position:absolute;bottom:18px;inset-inline:22px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.category-controls>span{direction:ltr;font-size:11px;color:#b89ad0}
.category-controls button{display:inline-flex;align-items:center;gap:10px;min-height:38px;padding:5px 13px;border:1px solid #e6ba7580;border-radius:11px;background:linear-gradient(160deg,#ffec9c,#ffc94c);color:#4d2e0a;font-size:11px;font-weight:800;box-shadow:0 3px 0 #89511d,0 9px 18px #0004;transition:transform .2s,box-shadow .2s}
.category-controls button:hover{transform:translateY(-2px);box-shadow:0 5px 0 #89511d,0 12px 20px #0004}
.category-controls button:active{transform:translateY(2px);box-shadow:0 1px 0 #89511d}
.category-note{margin-top:15px;color:#9780ad;font-size:11px}
@media(max-width:900px){.category-explorer{grid-template-columns:minmax(0,1fr)}.category-stage{min-height:410px}.category-explorer .category-item{min-height:175px}}
@media(max-width:520px){.categories-section{padding-bottom:65px}.category-explorer{gap:18px}.category-explorer .category-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.category-explorer .category-item{min-height:120px;padding:9px 4px;border-radius:16px}.category-explorer .category-item img{width:65px;height:65px;margin-bottom:4px}.category-explorer .category-item span{font-size:10px}.category-stage{min-height:375px;padding-top:35px}.category-stage::before,.category-stage::after{top:44px;width:206px;height:260px;left:calc(50% - 103px)}.category-preview-card{width:min(226px,100%);min-height:274px;padding-top:55px}.category-preview-card img{width:75px;height:75px;top:-25px}.category-preview-card strong{font-size:30px}.category-note{font-size:10px;line-height:2}}
@media(max-width:360px){.category-explorer .category-item img{width:58px;height:58px}.category-stage::before,.category-stage::after{width:170px;height:238px;top:56px;left:calc(50% - 85px)}.category-stage::before{transform:translate(-14px,8px) rotate(-8deg)}.category-stage::after{transform:translate(14px,8px) rotate(8deg)}}
@media(max-width:360px){.category-stage.is-dealing::before,.category-stage.is-dealing::after{animation:none}}

.scroll-progress{position:absolute;inset-inline-start:0;bottom:-1px;width:100%;height:2px;z-index:2;pointer-events:none;background:linear-gradient(90deg,#8b6eff,#ff85bd 55%,#ffe18b);box-shadow:0 0 13px #ff93c396;transform:scaleX(var(--page-progress,0));transform-origin:right center;transition:transform .1s linear}
.tutorial-phone{z-index:2}
.tutorial-float{position:absolute;z-index:3;width:78px;filter:drop-shadow(0 13px 16px #0009);animation:card-drift 6.5s ease-in-out infinite;pointer-events:none}
.tutorial-float-blue{left:5%;top:12%;rotate:-20deg}
.tutorial-float-pink{right:6%;top:43%;width:70px;rotate:22deg;animation-delay:-3s}
@media(max-width:800px){.tutorial-float-blue{left:12%;top:10%;width:66px}.tutorial-float-pink{right:13%;top:44%;width:62px}}
@media(max-width:520px){.tutorial-float-blue{left:0;width:53px}.tutorial-float-pink{right:1%;width:50px}}

/* A compact game-style chevron replaces the loose Unicode arrows. */
.ui-arrow{display:inline-grid;place-items:center;inline-size:24px;block-size:24px;flex:0 0 24px;border:1px solid #c794ee66;border-radius:8px;background:#9d5bdc20;color:inherit;line-height:1;font-size:0;vertical-align:middle;transition:transform .22s cubic-bezier(.16,1,.3,1),background .22s,border-color .22s}
.ui-arrow::before{content:"";display:block;inline-size:8px;block-size:8px;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateX(2px) rotate(45deg);border-radius:1px}
.ui-arrow.is-back::before{transform:translateX(-2px) rotate(225deg)}
.ui-arrow.is-up::before{transform:translateY(2px) rotate(135deg)}
.text-link{gap:8px;white-space:nowrap}.text-link .ui-arrow{color:#ffda8d;background:#ae6fe629;border-color:#c892f075}
.text-link:hover .ui-arrow{transform:translateX(-3px);background:#ae6fe64d;border-color:#f2cbffb0}
.btn{gap:12px}.btn-primary .ui-arrow{color:#5c370e;background:#92591a1a;border-color:#88511d5c}
.btn-primary:hover .ui-arrow{transform:translateX(-2px)}
.nav-cta{display:inline-flex;align-items:center;gap:9px}.nav-cta .ui-arrow{margin-inline-start:0;inline-size:22px;block-size:22px;flex-basis:22px;color:#ffe29b;background:#ad64df26}
.sample-actions button:last-child{display:inline-flex;align-items:center;gap:7px}.sample-actions button:last-child .ui-arrow{margin-inline-start:0;inline-size:20px;block-size:20px;flex-basis:20px;color:#f6d68f}
.category-controls button{gap:6px}.category-controls button .ui-arrow{inline-size:19px;block-size:19px;flex-basis:19px;border-color:#88511d49;background:#915b1c1a}
.gallery-controls button{display:grid;place-items:center}.gallery-controls button .ui-arrow{border:0;background:none;inline-size:22px;block-size:22px;flex-basis:22px;color:#e6cbff}
.gallery-controls button:hover .ui-arrow{transform:translateX(-2px)}.gallery-controls button:hover .ui-arrow.is-back{transform:translateX(2px)}
.footer>a:last-of-type{display:inline-flex;align-items:center;gap:8px}.footer>a:last-of-type .ui-arrow{margin-inline-start:0;inline-size:21px;block-size:21px;flex-basis:21px;color:#ffd159}
@media(max-width:800px){.nav-cta{display:none}}
@media(max-width:520px){.hero-buttons .text-link{gap:7px}.hero-buttons .text-link .ui-arrow{inline-size:21px;block-size:21px;flex-basis:21px}.btn-primary .ui-arrow{inline-size:22px;block-size:22px;flex-basis:22px}}

/* Let the pointer light dissolve below the hero instead of ending at its edge. */
.hero-world{overflow:visible}
.hero-world::before{inset:-80px 0 -300px;mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 63%,transparent 100%)}
.hero h1{font-size:clamp(52px,5.7vw,78px);letter-spacing:-2px}
.hero h1 em{white-space:nowrap}
.motion-toggle{display:grid;place-items:center;padding:0;line-height:0}
.motion-icon{display:flex;align-items:center;justify-content:center;gap:3px;width:16px;height:16px}
.motion-icon::before,.motion-icon::after{content:"";display:block;width:3px;height:12px;border-radius:2px;background:currentColor}
.motion-toggle[aria-pressed="true"] .motion-icon::before{width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:10px solid currentColor;border-radius:0;background:none;transform:translateX(1px)}
.motion-toggle[aria-pressed="true"] .motion-icon::after{display:none}
.dialog-close{display:grid;place-items:center;padding:0;font-size:0;line-height:0}
.dialog-close span{position:relative;display:block;width:17px;height:17px}
.dialog-close span::before,.dialog-close span::after{content:"";position:absolute;top:50%;left:50%;width:17px;height:2px;border-radius:2px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}
.dialog-close span::after{transform:translate(-50%,-50%) rotate(-45deg)}
.gallery-controls>span:empty{display:none}
.journey-section{position:relative;background:radial-gradient(ellipse 58% 70% at 50% 48%,#31165765,transparent 76%),#08031a;border-block:1px solid #b887ea20}
.journey-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.journey-card{position:relative;min-width:0;padding:22px 22px 28px;border:1px solid #b789e93e;border-radius:25px;background:linear-gradient(150deg,#2a1646,#130a2d 72%);box-shadow:inset 0 1px #fff1,0 20px 45px #0003;overflow:hidden}
.journey-index{position:absolute;top:19px;right:20px;color:#ffdb8a;font-size:13px;font-weight:800;z-index:2}
.journey-visual{position:relative;display:grid;place-items:center;height:260px;margin:-2px -4px 17px;background:radial-gradient(ellipse at 50% 75%,#9559d43c,transparent 65%);border-radius:19px;overflow:hidden}
.journey-visual::after{content:"";position:absolute;inset:auto 10% 12px;height:20px;border-radius:50%;background:#0a031ab0;filter:blur(12px)}
.journey-art{position:relative;z-index:1;width:155px;height:155px;object-fit:contain;filter:drop-shadow(0 13px 17px #0008)}
.journey-shot{position:relative;z-index:1;height:245px;width:auto;max-width:90%;object-fit:contain;border:2px solid #b790e4;border-radius:19px;box-shadow:0 13px 23px #0007}
.journey-card h3{font-size:22px;color:#fff4ff;line-height:1.7}
.journey-card p{font-size:12px;color:#bda8cd;line-height:2;margin-top:6px}
@media(max-width:800px){.journey-grid{gap:12px}.journey-card{padding:17px}.journey-visual{height:210px}.journey-shot{height:195px}.journey-art{width:120px;height:120px}.journey-card h3{font-size:17px}.journey-card p{font-size:11px}.hero h1{font-size:clamp(49px,9vw,72px)}}
@media(max-width:620px){.journey-grid{grid-template-columns:1fr;gap:14px}.journey-card{display:grid;grid-template-columns:105px 1fr;column-gap:17px;align-items:center;min-height:125px}.journey-index{display:none}.journey-visual{grid-row:1/3;grid-column:1;height:105px;margin:0}.journey-art{width:80px;height:80px}.journey-shot{height:98px;border-radius:10px}.journey-card h3{grid-column:2;align-self:end}.journey-card p{grid-column:2;align-self:start;margin:0}.hero h1{font-size:clamp(43px,9.3vw,59px)}}
body{overflow-x:clip}
.screen-rail-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:54px 0 18px}
.screen-rail-heading h3{font-size:22px;line-height:1.6;color:#f8eeff}
.screen-rail-actions{display:flex;gap:8px}
.screen-rail-actions button{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid #bc88eb61;border-radius:12px;background:#28143f;color:#f1d1ff}
.screen-rail-actions button:hover{background:#462562;border-color:#e4b6ff}
.screen-rail-actions .ui-arrow{border:0;background:none}
.screen-rail{display:grid;grid-auto-flow:column;grid-auto-columns:185px;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-inline:contain;scrollbar-width:thin;scrollbar-color:#9f69cb #170b2d;padding:5px 2px 20px}
.screen-tile{scroll-snap-align:start;min-width:0;margin:0;padding:10px 10px 13px;border:1px solid #aa74df3f;border-radius:19px;background:linear-gradient(160deg,#24143e,#130a28);box-shadow:inset 0 1px #ffffff12}
.screen-tile img{display:block;width:100%;aspect-ratio:1320/2868;object-fit:cover;border-radius:12px;background:#09031c}
.screen-tile figcaption{padding:11px 3px 0;text-align:center;color:#e8d3f7;font-size:12px;font-weight:700;line-height:1.7}
@media(max-width:620px){.screen-rail-heading{margin-top:42px}.screen-rail-heading h3{font-size:17px}.screen-rail{grid-auto-columns:145px;gap:10px}.screen-tile{padding:7px}.screen-tile figcaption{font-size:10px}}

/* A single highlight crosses the orb; it never pauses on the word. */
.hero-word-orb::after{opacity:0;animation:orb-glint-once 1.55s ease-in-out 1.1s both}
@keyframes orb-glint-once{0%{opacity:0;background-position:120% 0}18%{opacity:.45}78%{opacity:.45}100%{opacity:0;background-position:-120% 0}}
@media(prefers-reduced-motion:reduce){.hero-word-orb::after{opacity:0}}

.desktop-nav{gap:13px;margin-inline-end:auto}
.desktop-nav a{font-size:11.5px;white-space:nowrap}
@media(max-width:1190px){.desktop-nav{display:none}.brand{margin-inline-end:auto}.menu-toggle{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px;width:43px;height:43px;border:1px solid #a572d14d;border-radius:13px;background:#211033}.menu-toggle span{width:18px;height:2px;background:#dfc3f1}}

/* The rule becomes a compact playable scene, not a second copy of the hero orb. */
.sample-section{grid-template-columns:.86fr 1.14fr;gap:54px;min-height:585px;align-items:center;margin-block:90px;padding:56px;border:1px solid #be86eb53;border-radius:38px;background:radial-gradient(ellipse 54% 80% at 85% 55%,#582c965a,transparent 85%),linear-gradient(120deg,#1d0e36,#0b051f 72%);box-shadow:inset 0 1px #ffffff1c,0 35px 80px #0004;overflow:hidden}
.sample-section::before{z-index:0;top:auto;right:-2%;bottom:-23%;font-size:clamp(140px,19vw,230px);-webkit-text-stroke:1px #c497f52a;opacity:.45;transform:rotate(-11deg)}
.sample-copy{position:relative;z-index:2}
.sample-copy .eyeline{color:#ffd786}
.sample-copy h2{font-size:clamp(38px,4.4vw,58px);line-height:1.48;letter-spacing:-1.8px}
.sample-copy>p{margin-top:18px;max-width:390px;color:#d0badf;font-size:14px;line-height:2.2}
.rule-steps{list-style:none;display:grid;gap:11px;margin:28px 0 0;padding:0}
.rule-steps li{display:flex;align-items:center;gap:12px;width:fit-content;min-width:205px;padding:8px 13px 8px 18px;border:1px solid #bd88eb35;border-radius:13px;background:#ffffff08;color:#e8d6f4;font-size:12px;font-weight:700;transition:transform .25s,border-color .25s,background .25s}
.rule-steps li:hover{transform:translateX(-5px);border-color:#e4b8ff90;background:#a868dc23}
.rule-steps b{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:9px;background:linear-gradient(155deg,#8c50c0,#4e2b74);color:#ffe59d;font-size:13px;box-shadow:inset 0 1px #ffffff4a}
.sample-card{position:relative;z-index:2;padding:24px 28px 27px;border-color:#dfb47c8a;border-radius:29px;background:radial-gradient(ellipse at 50% 0,#4e3376,#1b0f36 66%);box-shadow:inset 0 2px #fff2,0 0 0 7px #b47ce20d,0 22px 60px #0008;transform:rotate(-1deg)}
.sample-card::before{border-color:#ffe2a627}
.sample-top{color:#ddcaed;font-weight:700}
.practice-orb{width:100%;max-width:none;aspect-ratio:auto;min-height:170px;margin:18px auto 15px;padding:22px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;border:1px solid #aee0ff80;border-radius:25px;background:radial-gradient(ellipse at 25% 15%,#91dfff55,transparent 48%),linear-gradient(135deg,#426fb2,#28316e 68%,#1b1c51);box-shadow:inset 0 2px #ffffff38,inset 0 -8px 22px #08104775,0 9px 0 #151046,0 18px 30px #0008;filter:none;overflow:hidden}
.practice-orb::before{content:"";position:absolute;inset:12px;border:1px solid #e6f3ff25;border-radius:17px;pointer-events:none}
.word-card-kicker{position:relative;color:#dfebffb8;font-size:10px}
.practice-orb h3{position:relative;inset:auto;display:block;place-items:unset;font-size:clamp(33px,4vw,48px);line-height:1.5;overflow-wrap:anywhere}
.word-card-mark{position:absolute;left:20px;top:12px;color:#ffe69d;text-shadow:0 0 12px #ffe69d94;font-size:19px}
.sample-rule{color:#ffe2a3;font-size:11px;font-weight:700;margin-top:22px}
.sample-answer{min-height:72px;padding:12px 8px;font-size:12px}
.sample-actions{padding-top:15px}
.practice-buddy{width:78px;height:78px;right:-24px;top:-20px;z-index:3;animation:rule-buddy-float 5s ease-in-out infinite}
@keyframes rule-buddy-float{50%{translate:0 -9px;rotate:-5deg}}

.how-section{position:relative;isolation:isolate;overflow:hidden}
.how-section::after{content:"";position:absolute;z-index:-1;inset:5% 0 5% auto;width:50%;pointer-events:none;background:radial-gradient(ellipse,#7b4ac52b,transparent 72%);animation:how-glow 8s ease-in-out infinite alternate}
@keyframes how-glow{from{opacity:.55;scale:.9}to{opacity:1;scale:1.13}}
.steps li{transition:padding-inline-start .3s,border-color .3s,background .3s}
.steps li:hover{padding-inline-start:8px;border-color:#cda3f17b;background:linear-gradient(90deg,#9b5ed41a,transparent 76%)}
.steps li::before{animation:step-badge 5s ease-in-out infinite;animation-delay:calc((var(--step-order,0)) * -.8s)}
.steps li:nth-child(1){--step-order:1}.steps li:nth-child(2){--step-order:2}.steps li:nth-child(3){--step-order:3}
@keyframes step-badge{0%,100%{box-shadow:inset 0 1px #fff2,0 0 0 #b875ef00}50%{box-shadow:inset 0 1px #fff5,0 0 22px #b875ef61}}
.tutorial-phone{animation:how-phone-float 7s ease-in-out infinite}
@keyframes how-phone-float{0%,100%{translate:0 0}50%{translate:0 -11px}}
.extra-card img{animation:extra-art-float 6.5s ease-in-out infinite}
.extra-card:nth-child(2) img{animation-delay:-2s}.extra-card:nth-child(3) img{animation-delay:-4s}
@keyframes extra-art-float{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -9px;rotate:3deg}}
.extra-card::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at 10% 90%,#e4afff24,transparent 48%);opacity:.45;transition:opacity .3s}
.extra-card:hover::before{opacity:1}
@media(max-width:800px){.sample-section{grid-template-columns:1fr;gap:35px;padding:42px 34px;margin-block:60px}.sample-copy>p{max-width:600px}.rule-steps{grid-template-columns:repeat(3,1fr);gap:8px}.rule-steps li{min-width:0;width:100%;padding:8px;gap:7px;font-size:10px}.sample-card{width:min(500px,100%)}.sample-section::before{display:none}}
@media(max-width:520px){.sample-section{padding:30px 20px 34px;border-radius:27px;margin-block:45px}.sample-copy h2{font-size:36px}.sample-copy>p{font-size:12px}.rule-steps{grid-template-columns:1fr;gap:7px;margin-top:20px}.rule-steps li{font-size:11px}.sample-card{padding:18px 18px 22px;transform:none}.practice-orb{min-height:145px;border-radius:20px}.practice-orb h3{font-size:37px}.practice-buddy{width:58px;height:58px;right:-14px;top:-17px}.how-section::after{width:100%}}

/* The three real game captures take turns in the spotlight. */
.journey-card{transition:transform .35s,border-color .35s,box-shadow .35s;animation:journey-spotlight 10.5s ease-in-out infinite}
.journey-card:nth-child(2){animation-delay:-7s}.journey-card:nth-child(3){animation-delay:-3.5s}
.journey-card:hover{transform:translateY(-8px);border-color:#ffd980a8;box-shadow:0 26px 55px #0006,0 0 30px #bc7ce442}
.journey-visual::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(110deg,transparent 27%,#fff0c900 41%,#fff3bd27 49%,#fff0c900 57%,transparent 73%);background-size:250% 100%;animation:journey-shine 10.5s ease-in-out infinite;pointer-events:none}
.journey-card:nth-child(2) .journey-visual::before{animation-delay:-7s}.journey-card:nth-child(3) .journey-visual::before{animation-delay:-3.5s}
.journey-shot:not([hidden]),.journey-art:not([hidden]){animation:journey-float 5s ease-in-out infinite}
.journey-card:nth-child(2) .journey-shot,.journey-card:nth-child(2) .journey-art{animation-delay:-1.5s}.journey-card:nth-child(3) .journey-shot,.journey-card:nth-child(3) .journey-art{animation-delay:-3s}
@keyframes journey-spotlight{0%,24%,100%{border-color:#b789e93e;box-shadow:inset 0 1px #fff1,0 20px 45px #0003}8%,16%{border-color:#ffe09a9e;box-shadow:inset 0 1px #fff2,0 20px 45px #0005,0 0 35px #c77ef23b}}
@keyframes journey-shine{0%,4%{background-position:130% 0;opacity:0}8%,17%{opacity:1}23%,100%{background-position:-130% 0;opacity:0}}
@keyframes journey-float{0%,100%{translate:0 0;rotate:-1deg}50%{translate:0 -10px;rotate:1deg}}

.faq-list details{overflow:hidden}.faq-list summary span{transition:transform .3s,color .3s}.faq-list details[open] summary{color:#ffe2a1}.faq-list details[open] summary span{color:#ffe2a1}.faq-answer{overflow:hidden}.faq-answer p{margin:0}
@media(prefers-reduced-motion:reduce){.journey-card,.journey-visual::before,.journey-shot,.journey-art{animation:none!important}}

/* A playable miniature of the word round, with the same core controls. */
.round-demo{position:relative;z-index:2;min-width:0;padding:21px 22px 17px;border:1px solid #9e79de95;border-radius:32px;background:radial-gradient(ellipse at 50% 58%,#172454 0,#11133b 37%,#100827 75%);box-shadow:inset 0 2px #fff2,0 30px 60px #0008,0 0 55px #7146ab26;overflow:hidden}
.round-demo::before{content:"";position:absolute;inset:12% -20% 9%;pointer-events:none;background:radial-gradient(ellipse at 50% 60%,#438cf521,transparent 65%)}
.round-demo-head,.round-demo-players,.round-demo-center,.round-demo-actions,.round-demo-status{position:relative;z-index:1}
.round-demo-head{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#bca9d5;font-size:11px;font-weight:800}.round-demo-head img{width:72px;height:auto;object-fit:contain}.round-demo-head span:last-child{color:#ffe1a4}
.round-demo-players{display:flex;justify-content:space-between;gap:14px;margin:3px 20px 0}.round-demo-players>div{display:flex;align-items:center;gap:8px;color:#e8dcf8;font-size:11px}.round-demo-players img{width:47px;height:47px;object-fit:contain;filter:drop-shadow(0 5px 7px #0008)}
.round-demo-center{text-align:center;margin-top:0}.round-demo-kicker{display:block;color:#ffe3a2;font-size:11px;font-weight:800;margin-bottom:6px}.round-demo-orb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:min(265px,74%);aspect-ratio:1;margin:auto;padding:20px;border:3px solid #88bcf7bd;border-radius:50%;background:radial-gradient(circle at 30% 22%,#acdfff77,transparent 36%),radial-gradient(circle at 73% 85%,#225faf80,transparent 42%),linear-gradient(145deg,#324d79,#101735 68%);box-shadow:inset 0 0 0 5px #091229,inset 0 5px 27px #d7f1ff35,0 0 0 8px #688bda27,0 18px 35px #0009;color:#fff5ff;font:inherit;cursor:pointer;transition:box-shadow .25s,scale .25s;animation:round-orb-breathe 5.5s ease-in-out infinite}
.round-demo-orb:hover{scale:1.035;box-shadow:inset 0 0 0 5px #091229,inset 0 5px 27px #d7f1ff45,0 0 0 8px #688bda3f,0 0 35px #7ebaff85,0 18px 35px #0009}.round-demo-orb:active{scale:.97}.round-demo-orb>span{color:#ffe2a3;font-size:10px;font-weight:800}.round-demo-orb strong{font-size:clamp(36px,4vw,58px);line-height:1.4;text-shadow:0 5px 9px #0008}.round-demo-orb small{font-size:10px;color:#c8d6f3}
.round-demo-hint,.round-demo-prompt{min-height:28px;margin:17px 0 2px;color:#d5c4e8;font-size:11px;line-height:2}.round-demo-hint{color:#ffe1a0;font-weight:700}
.round-demo-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:13px}.round-demo-actions button{display:grid;justify-items:center;gap:7px;padding:5px;border:0;background:none;color:#e9dcf7;font:inherit;font-size:11px;cursor:pointer}.round-action-icon{display:grid;place-items:center;width:50px;height:50px;border:2px solid #b185e1;border-radius:50%;background:linear-gradient(145deg,#754b9c,#291543);box-shadow:inset 0 1px #fff5,0 6px 18px #0007;color:#ffe7a4;font-size:23px;transition:scale .25s,box-shadow .25s}.round-demo-actions button:nth-child(2) .round-action-icon{border-color:#ffd26f;background:linear-gradient(145deg,#9c681f,#57300e)}.round-demo-actions button:hover .round-action-icon{scale:1.1;box-shadow:0 0 22px #c28cf27a}.round-demo-actions button:disabled{opacity:.42;cursor:not-allowed}
.round-demo-status{text-align:center;min-height:18px;margin-top:15px;color:#bba6d4;font-size:10px}.round-demo.is-paused .round-demo-orb{animation-play-state:paused;filter:saturate(.5)}
@keyframes round-orb-breathe{0%,100%{box-shadow:inset 0 0 0 5px #091229,inset 0 5px 27px #d7f1ff35,0 0 0 8px #688bda27,0 18px 35px #0009}50%{box-shadow:inset 0 0 0 5px #091229,inset 0 5px 27px #d7f1ff35,0 0 0 12px #688bda3a,0 0 29px #568eea69,0 18px 35px #0009}}
@media(max-width:800px){.round-demo{width:min(500px,100%);margin:auto}}
@media(max-width:520px){.round-demo{padding:16px 13px 14px;border-radius:25px}.round-demo-head{font-size:9px}.round-demo-head img{width:58px}.round-demo-players{margin-inline:5px}.round-demo-players>div{font-size:9px}.round-demo-players img{width:38px;height:38px}.round-demo-orb{width:min(230px,72%)}.round-demo-orb strong{font-size:39px}.round-demo-orb small{font-size:8px}.round-demo-actions{gap:3px}.round-action-icon{width:45px;height:45px}}
@media(prefers-reduced-motion:reduce){.round-demo-orb{animation:none!important}}

/* Leave space for the full float and shadow, including both animation extrema. */
.journey-card{overflow:visible}
.journey-visual{height:285px;margin:0 0 18px;overflow:visible}
.journey-visual::before{inset:16px 8px;border-radius:18px}
.journey-shot{height:220px;max-height:calc(100% - 45px)}
.journey-art{max-height:calc(100% - 45px)}
@media(max-width:800px){.journey-visual{height:245px}.journey-shot{height:182px}}
@media(max-width:620px){.journey-visual{height:110px;margin:0}.journey-shot{height:83px;max-height:none}.journey-art{max-height:80px}}

/* Present the interactive round as a scaled game screen. */
.sample-section{grid-template-columns:.85fr 1.15fr;gap:70px;padding:35px 20px;margin-block:85px;border:0;background:none;box-shadow:none;overflow:visible}
.sample-section::before{display:none}
.sample-copy{padding-inline:22px}.sample-copy>p{max-width:420px}
.round-demo-instruction{padding:15px 19px;border-right:2px solid #ffd98a;background:linear-gradient(270deg,#48286666,transparent);border-radius:0 12px 12px 0;color:#e0c9ed!important;font-size:12px!important}
.round-demo{width:min(410px,100%);min-height:730px;margin-inline:auto;padding:22px 18px 18px;border-radius:34px;background:radial-gradient(ellipse at 50% 64%,#263c7d6b,transparent 48%),radial-gradient(ellipse at 50% 90%,#542aa252,transparent 50%),linear-gradient(155deg,#08051c,#0a092c 63%,#10072c);box-shadow:inset 0 0 0 6px #ffffff08,inset 0 1px #d6acfc5c,0 32px 80px #0009,0 0 55px #7046ae26}
.round-demo::before{inset:0;background:radial-gradient(circle at 13% 45%,#b380fd55 0 2px,transparent 3px),radial-gradient(circle at 86% 27%,#e1bdff69 0 2px,transparent 3px),radial-gradient(circle at 87% 67%,#ffcc7388 0 3px,transparent 4px);opacity:.8}
.round-demo-head{flex-direction:row-reverse;font-size:10px}.round-demo-head img{width:78px}
.round-demo-team{position:relative;z-index:1;display:flex;justify-content:space-between;gap:25px;margin:18px 26px 6px}
.round-demo-team>div{display:grid;justify-items:center;gap:3px;color:#b8a4cf;font-size:10px;font-weight:700}.round-demo-team img{width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 5px 6px #0008)}
.round-demo-center{margin-top:4px}.round-demo-kicker{margin-bottom:13px;color:#74beff;font-size:13px}
.round-demo-orb{position:relative;display:grid;place-items:center;width:min(295px,86%);padding:32px;border:3px solid #a4ccfcbd;background:radial-gradient(circle at 31% 19%,#a6c5dd85,transparent 32%),radial-gradient(circle at 79% 85%,#1160ab70,transparent 32%),linear-gradient(145deg,#2b3c5c,#10172e 60%,#102c51);box-shadow:inset 0 0 0 4px #091429,inset 0 0 0 7px #ffffff24,inset 0 15px 45px #a2d5ff18,0 0 0 9px #5c8bd631,0 0 0 16px #265a9940,0 22px 35px #0009}
.round-orb-front,.round-orb-back{grid-area:1/1;display:grid;justify-items:center;align-content:center;gap:12px;width:100%;height:100%;backface-visibility:hidden;transition:opacity .35s,transform .45s}.round-orb-front small,.round-orb-back small{font-size:10px;color:#ffe4a7;font-weight:800}.round-orb-front strong{font-size:clamp(37px,4vw,62px)}.round-orb-front small:last-child{color:#c2d4ee}.round-orb-back{opacity:0;transform:rotateY(90deg);line-height:1.8}.round-orb-back>span{font-size:14px;font-weight:700;color:#fff1d2}.round-demo.is-hinted .round-demo-orb{background:radial-gradient(circle at 25% 20%,#fff1a34d,transparent 32%),linear-gradient(145deg,#724c8e,#25244e 67%,#17254b)}.round-demo.is-hinted .round-orb-front{opacity:0;transform:rotateY(-90deg)}.round-demo.is-hinted .round-orb-back{opacity:1;transform:rotateY(0)}
.round-demo-prompt{margin-top:25px;min-height:24px;color:#edd2f7;font-size:10px}
.round-demo-players{justify-content:space-around;margin:18px 0 0;padding-top:2px;border-top:2px solid #8079d65e;border-radius:50%}.round-demo-players>div{display:grid;justify-items:center;gap:0;transform:translateY(-16px)}.round-demo-players img{width:80px;height:80px}.round-demo-players strong{font-size:10px;color:#e8dcf8}
.round-demo-actions{margin-top:7px;gap:5px}.round-demo-actions button{font-size:10px}.round-action-icon{width:52px;height:52px}.round-demo-actions button:nth-child(1) .round-action-icon{border-color:#b884e8}.round-demo-actions button:nth-child(2) .round-action-icon{border-color:#ffdc7a}.round-demo-actions button:nth-child(3) .round-action-icon{border-color:#d1a0f1}
.round-demo-status{margin-top:10px;font-size:9px}
@media(max-width:800px){.sample-section{grid-template-columns:1fr;gap:30px;padding:35px 10px;margin-block:55px}.sample-copy{padding-inline:5px}.round-demo{width:min(410px,100%)}}
@media(max-width:520px){.sample-section{padding:20px 0;margin-block:35px}.round-demo{width:min(390px,100%);min-height:670px;padding:16px 12px;border-radius:28px}.round-demo-team{margin:14px 17px 5px}.round-demo-team img{width:42px;height:42px}.round-demo-orb{width:min(270px,82%)}.round-demo-players img{width:72px;height:72px}.round-demo-instruction{font-size:11px!important}}

/* Hero identity and distinct destinations. */
.hero-title-logo{display:inline-block;width:clamp(170px,17vw,260px);height:auto;vertical-align:middle;margin-block:-.12em -.18em;filter:drop-shadow(0 9px 18px #e6459c52)}
.cta-orb{display:grid;place-items:center;flex:none;width:27px;height:27px;border:1px solid #8a4b14a6;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff8c5,#ffc45c 60%,#dd8b24);color:#7b3e10;font-size:18px;line-height:1;box-shadow:inset 0 1px #fff8d4,0 2px 5px #8e481b55}
.mode-dots{display:grid;grid-template-columns:repeat(2,7px);gap:3px;align-content:center;justify-content:center;flex:none;width:27px;height:27px;border:1px solid #b887e470;border-radius:8px;background:#4b286d8c;box-shadow:inset 0 1px #fff2}
.mode-dots i{width:7px;height:7px;border-radius:2px;background:#6bd7ff}.mode-dots i:nth-child(2){background:#ff80b6}.mode-dots i:nth-child(3){background:#ffc967}.mode-dots i:nth-child(4){background:#ab86ff}
.hero-buttons .text-link:hover .mode-dots{box-shadow:0 0 15px #bc76ea6b}
@media(max-width:520px){.hero-title-logo{width:clamp(145px,43vw,215px)}}

/* Native game-style controls keep their artwork centered in the hit targets. */
.round-action-icon,.round-demo-actions button:nth-child(1) .round-action-icon,.round-demo-actions button:nth-child(2) .round-action-icon,.round-demo-actions button:nth-child(3) .round-action-icon{display:grid;place-items:center;width:58px;height:58px;padding:0;border:0;background:none;box-shadow:none;line-height:0}
.round-action-icon img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.round-demo-actions button:hover .round-action-icon{box-shadow:none;filter:drop-shadow(0 0 10px #c28cf29c)}
.round-demo-prompt{height:32px;min-height:32px;margin-top:25px;margin-bottom:2px}
@media(max-width:520px){.round-action-icon,.round-demo-actions button:nth-child(1) .round-action-icon,.round-demo-actions button:nth-child(2) .round-action-icon,.round-demo-actions button:nth-child(3) .round-action-icon{width:52px;height:52px}}

.cta-orb i{display:block;font-style:normal;line-height:1;transform:translateY(2px)}

/* Keep the screenshot gallery steady while entering the viewport. */
#screens .journey-card,#screens .journey-visual::before,#screens .journey-shot,#screens .journey-art{animation:none!important}
#screens .journey-card,#screens .screen-tile{cursor:zoom-in}
#screens .journey-card:focus-visible,#screens .screen-tile:focus-visible{outline:3px solid #ffe090;outline-offset:4px}
#screens .journey-card:hover{transform:translateY(-3px)}
#screens .screen-tile:hover{border-color:#ffe090a6;box-shadow:0 12px 30px #0005}
.screen-dialog{position:fixed;inset:0;margin:auto;width:min(620px,calc(100% - 24px));max-width:calc(100% - 24px);height:min(94dvh,1050px);max-height:94dvh;padding:48px 16px 14px;border:1px solid #c592ee8a;border-radius:25px;background:linear-gradient(150deg,#26143e,#0b0621);color:#fff;box-shadow:0 25px 90px #000b;overflow:hidden;text-align:center}
.screen-dialog::backdrop{background:#050012dc;backdrop-filter:blur(8px)}
.screen-dialog img{display:block;width:auto;max-width:100%;height:calc(100% - 32px);margin:auto;object-fit:contain;border-radius:13px}
.screen-dialog p{height:32px;margin:0;display:grid;place-items:center;color:#f2dbff;font-size:13px;font-weight:800}
.screen-dialog-close{z-index:2;top:9px;left:9px;background:#311c4e}
@media(max-width:620px){.screen-dialog{height:94dvh;padding:48px 10px 12px}}

/* Keep game artwork and copy visually attached to the page. */
html,body,body *{-webkit-user-select:none;user-select:none}
img{-webkit-user-drag:none;user-drag:none;-webkit-touch-callout:none}

/* Capture hydration: a neutral panel appears while the next image loads.
   Deliberate no-copy/no-drag styles and existing animations stay unchanged. */
.shot-loading:not([hidden]){position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-width:0;min-height:100%;padding:18px;border-radius:inherit;background:radial-gradient(ellipse at 40% 30%,#342459,#0c081f 72%);color:#ead7ff;text-align:center;font-size:12px;font-weight:800;line-height:1.9}
.shot-loading-spinner{display:block;width:37px;height:37px;border:3px solid #a174e958;border-top-color:#ffda8b;border-radius:50%;animation:shot-loading-turn .85s linear infinite}
@keyframes shot-loading-turn{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.shot-loading-spinner{animation:none;border-top-color:#ffda8b}}