:root{color-scheme:dark;--bg:#0a0d16;--surface:#141a28;--stroke:#30384b;--text:#f5f6ff;--muted:#9ca9bf;--mint:#b8f7dc;--lilac:#c7b6ff;--peach:#ffbdb3;--amber:#ffd793;--apph:100dvh;--accent:#b8f7dc}*{box-sizing:border-box}html{height:100%;-webkit-text-size-adjust:100%}body{margin:0;min-height:100%;background:#070a12;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;overscroll-behavior:none}button,a{font:inherit}button{cursor:pointer;border:0;color:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--mint);outline-offset:3px}button:disabled{opacity:.52;cursor:default}.shell{width:100%;max-width:470px;min-height:var(--apph);height:var(--apph);margin:auto;display:flex;flex-direction:column;overflow:hidden;background:radial-gradient(80% 36% at 50% -10%,#3f40642b,transparent 95%),#0e121d;position:relative;isolation:isolate;box-shadow:0 0 90px #0006;border-inline:1px solid #ffffff08}.shell:before{content:"";pointer-events:none;position:absolute;inset:0;background:radial-gradient(70% 55% at 10% 65%,#40407d08,transparent);z-index:-1}.nav{height:calc(62px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 16px 0;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;z-index:15;position:relative}.switcher{display:flex;align-items:center;gap:10px;background:transparent;padding:5px 9px 5px 3px;min-height:48px;border-radius:14px;text-align:left;max-width:74%}.switcher:hover,.switcher[aria-expanded=true]{background:#ffffff08}.mark{height:36px;width:36px;flex:0 0 36px;display:grid;place-items:center;border:1px solid #ffffff20;border-radius:12px;background:#1b2332;box-shadow:inset 0 1px #ffffff19}.mark svg{width:27px;height:27px}.mark.time{color:var(--amber);background:#372a272e}.mark.shape{color:var(--lilac);background:#372e472b}.mark.sound{color:#91d6ff;background:#24405230}.mark.spectrum{color:#b5f7d8}.mark.all{color:#fff}.brand-name{display:flex;flex-direction:column;gap:2px;min-width:0}.brand-name small{font-size:9px;letter-spacing:2.2px;font-weight:850;color:#9daec3;line-height:1}.brand-name strong{font-size:18px;line-height:1.08;letter-spacing:-.65px;white-space:nowrap}.caret-box{width:23px;height:23px;display:grid;place-items:center;border-radius:7px;background:#ffffff13;color:#d2dbf0;margin-left:3px;border:1px solid #ffffff12;transition:transform .2s}.switcher[aria-expanded=true] .caret-box{transform:rotate(180deg)}.nav-right{display:flex;align-items:center;gap:7px}.tiny-button{height:40px;min-width:40px;padding:0 10px;display:grid;place-items:center;background:#1b2230;border:1px solid #343b4f;border-radius:12px;font-size:12px;font-weight:850}.tiny-button:hover{background:#293247}.tiny-button svg{width:19px;height:19px}.drop{position:absolute;left:15px;top:calc(58px + env(safe-area-inset-top));width:min(350px,calc(100vw - 30px));z-index:30;background:#192030;border:1px solid #4a556d;border-radius:21px;padding:9px;box-shadow:0 22px 65px #000b;animation:dropin .18s ease-out}.drop[hidden]{display:none}.drop-label{font-size:10px;font-weight:850;color:#8898b2;letter-spacing:1.7px;padding:10px 12px 7px}.drop a{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:13px;min-height:52px}.drop a:hover,.drop a.selected{background:#2a3347}.drop a .mark{width:32px;height:32px;flex-basis:32px;border-radius:9px}.drop a .mark svg{width:24px;height:24px}.drop a b{font-size:13px}.drop a small{display:block;font-size:10px;color:#a1acc1;margin-top:2px}.drop .check{margin-left:auto;color:var(--mint)}.drop .divider{height:1px;background:#ffffff12;margin:6px 9px}.drop .logic-mark{font-size:22px;font-weight:900}.drop-scrim{position:fixed;inset:0;z-index:14;background:transparent}.drop-scrim[hidden]{display:none}.screen{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:8px 17px calc(13px + env(safe-area-inset-bottom));gap:11px;overflow:hidden}.eyebrow{font-size:10px;letter-spacing:2.2px;font-weight:900;color:#9ba9c2}.section-head{display:flex;align-items:center;justify-content:space-between;min-height:26px;gap:8px;flex:0 0 auto}.pill{padding:7px 10px;border:1px solid #394256;border-radius:99px;color:#cad5e7;background:#202738;font-size:10px;font-weight:850;white-space:nowrap}.hero-title{font-size:clamp(30px,8vw,38px);letter-spacing:-1.7px;margin:0;font-weight:900;line-height:1.07}.tagline{font-size:13px;color:#acb8ca;line-height:1.45;margin:0}.bottom{margin-top:auto;display:flex;flex-direction:column;gap:9px;flex:0 0 auto}.cta{width:100%;height:57px;flex:0 0 auto;border-radius:17px;background:linear-gradient(110deg,var(--accent),#c7c9ff);color:#111827;font-size:14px;font-weight:900;position:relative;overflow:hidden;box-shadow:0 9px 24px #82bdb61b;display:flex;justify-content:center;align-items:center;gap:9px;transition:transform .12s,filter .15s}.cta:hover{filter:brightness(1.07)}.cta:active,.tile:active,.tiny-button:active{transform:scale(.975)}.cta:after{position:absolute;inset:0;content:"";transform:translateX(-160%);background:linear-gradient(110deg,transparent 15%,#fff7 50%,transparent 80%);pointer-events:none}.cta.celebrate:after{animation:shine .65s ease-out}.cta.secondary{border:1px solid #404c61;background:#202838;color:#f1f5ff;box-shadow:none}.cta.compact{height:48px}.tile-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:0 0 auto}.tile{min-height:84px;border-radius:17px;border:1px solid #343e52;background:linear-gradient(145deg,#20283a,#171f2d);padding:12px;text-align:left;display:flex;flex-direction:column;gap:7px}.tile svg{width:22px;height:22px;color:var(--accent)}.tile b{font-size:13px}.tile small{font-size:10px;color:#a9b5ca;line-height:1.3}.float-stage{flex:1 1 auto;min-height:115px;display:grid;place-items:center;position:relative}.stage-orb{width:min(61vw,232px,31vh);height:min(61vw,232px,31vh);min-width:105px;min-height:105px;border-radius:50%;position:relative;display:grid;place-items:center;background:radial-gradient(circle at 31% 23%,#41425a 0,#282e45 28%,#141927 71%,#131724 100%);border:1px solid #ffffff3e;box-shadow:inset -20px -23px 42px #0008,inset 9px 8px 20px #ffffff11,0 20px 80px #7b75b525;animation:orbFloat 6s ease-in-out infinite}.stage-orb:before{content:"";position:absolute;inset:-10px;border-radius:50%;border:7px solid transparent;border-top-color:var(--accent);border-right-color:#a7a6fe;transform:rotate(-33deg);opacity:.85;filter:drop-shadow(0 0 9px #a7a6fe33)}.stage-orb:after{content:"";position:absolute;width:11px;height:11px;border-radius:50%;background:#f5f8ff;top:-19px;left:49%;box-shadow:0 0 20px var(--accent);animation:satellite 5s ease-in-out infinite}.stage-orb svg{width:62%;height:62%;color:var(--accent)}.stage-orb.tone:before{border-color:transparent;border-left-color:#8bcfff;border-bottom-color:#c9c0ff;animation:orbSpin 9s linear infinite}.stage-orb.shape:before{border-color:transparent;border-top-color:#cbb9ff;border-left-color:#edc1ff;animation:orbSpin 11s linear infinite}.scene{flex:1 1 auto;min-height:0;position:relative;border-radius:24px;background:linear-gradient(165deg,#161d2c,#111723);border:1px solid #ffffff18;display:grid;place-items:center;overflow:hidden;isolation:isolate}.scene-head{position:absolute;top:15px;left:16px;right:16px;display:flex;justify-content:space-between;align-items:center;z-index:2}.scene-note{font-size:11px;font-weight:900;letter-spacing:1.5px;color:#bfcbdf}.countdown{min-width:44px;height:44px;border-radius:50%;background:#ffffff11;display:grid;place-items:center;font-size:18px;font-weight:900;border:1px solid #ffffff24}.scene-foot{position:absolute;bottom:14px;left:16px;right:16px;display:flex;align-items:center;justify-content:space-between;gap:6px;color:#aab7ce;font-size:11px;font-weight:750}.big-number{font-size:clamp(57px,15vw,89px);font-weight:950;letter-spacing:-5px;line-height:1;font-variant-numeric:tabular-nums}.big-number small{font-size:16px;color:#a5b4c9;letter-spacing:0}.feedback-text{font-size:20px;line-height:1.15;font-weight:900;text-align:center;letter-spacing:-.6px;max-width:95%}.feedback-sub{font-size:12px;line-height:1.35;color:#afbed0;text-align:center;margin-top:8px;max-width:96%}.round-dots{display:flex;gap:6px}.round-dots i{height:5px;width:22px;background:#343b4a;border-radius:7px}.round-dots i.done{background:var(--accent)}.round-dots i.active{background:#b5a8ff}.results-panel{flex:1 1 auto;min-height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.score-num{font-size:clamp(57px,16vw,84px);line-height:1;font-weight:950;letter-spacing:-4px}.score-num small{font-size:16px;letter-spacing:0;color:#a9b7cb}.compare{display:grid;grid-template-columns:1fr 1fr;gap:9px;width:100%;flex:0 0 auto}.compare>div{background:#1c2535;border:1px solid #374155;border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:6px;min-height:79px}.compare b{font-size:19px;font-variant-numeric:tabular-nums;letter-spacing:-.5px}.compare small{font-size:10px;color:#a5b4c7}.micro{font-size:10px;color:#8e9cb0;font-weight:800;letter-spacing:1px}.status-line{min-height:24px;display:flex;justify-content:center;align-items:center;gap:5px;font-size:11px;color:#a8b6cc}.status-line strong{color:var(--accent)}.quick-note{font-size:11px;color:#9ca8bc;text-align:center;margin:0}.result-bars{display:flex;gap:6px;align-items:flex-end;justify-content:center;max-height:80px;flex:0 0 auto}.result-bars div{width:38px;height:64px;border-radius:9px;background:#253044;position:relative;overflow:hidden;display:flex;align-items:flex-end}.result-bars div span{width:100%;background:var(--accent);display:block;border-radius:9px 9px 4px 4px}.result-bars div b{position:absolute;top:5px;left:0;right:0;text-align:center;font-size:10px;color:#e9efff}.stack{display:flex;flex-direction:column;gap:8px}.selection{display:flex;gap:6px;align-items:center;justify-content:center}.selection button{padding:9px 14px;border-radius:13px;border:1px solid #374259;background:#1b2332;font-size:11px;font-weight:900}.selection button.active{background:#30364e;color:#fff;border-color:#a5a9df}.track{touch-action:none;user-select:none}.modal-back{position:fixed;inset:0;background:#070a11bb;backdrop-filter:blur(11px);z-index:50;display:grid;place-items:end center;padding:16px}.modal-back[hidden]{display:none}.modal{width:min(440px,100%);padding:23px;background:#1b2433;border:1px solid #59647b;border-radius:25px;box-shadow:0 20px 80px #000c;animation:sheet .2s ease-out}.modal h2{font-size:22px;margin:0 0 9px}.modal p{font-size:13px;color:#bfcbdd;line-height:1.5}.modal .cta{margin-top:14px}.modal .secondary{margin-top:8px}.hub{overflow-y:auto;scrollbar-width:none}.hub::-webkit-scrollbar{display:none}.hub-intro{padding-top:10px}.hub-kicker{color:#b4dfd4;font-size:10px;letter-spacing:2.5px;font-weight:900}.hub h1{font-size:clamp(35px,8.5vw,48px);line-height:1.02;letter-spacing:-2.5px;margin:9px 0}.hub p{color:#adbbce;font-size:13px;line-height:1.45;margin:5px 0 0}.hub-art{height:clamp(115px,22vh,200px);flex:0 0 auto;position:relative;display:grid;place-items:center}.hub-art svg{height:100%;width:100%;overflow:visible;max-width:390px}.games{display:grid;grid-template-columns:1fr 1fr;gap:10px}.game-card{display:flex;flex-direction:column;align-items:flex-start;min-height:140px;padding:15px;border-radius:20px;border:1px solid #ffffff20;background:linear-gradient(160deg,var(--card-bg,#23283b),#171c2a 88%);position:relative;overflow:hidden;transition:transform .18s,filter .18s}.game-card:hover{transform:translateY(-3px);filter:brightness(1.12)}.game-card .card-icon{width:41px;height:41px;border-radius:13px;background:#ffffff0e;display:grid;place-items:center;border:1px solid #ffffff23;margin-bottom:auto}.game-card .card-icon svg{width:29px;height:29px;color:var(--card-accent,#fff)}.game-card strong{font-size:19px;letter-spacing:-.6px;margin-top:13px}.game-card small{font-size:11px;color:#bdc8d8;margin-top:4px}.game-card .card-arrow{position:absolute;right:14px;bottom:17px;color:var(--card-accent,#fff);font-size:19px}.hub-end{padding:10px 0;color:#76849b;font-size:10px;text-align:center}.full-link{padding:14px;border:1px solid #354054;border-radius:16px;background:#181f2c;display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:850}.toast{position:absolute;bottom:85px;left:50%;transform:translateX(-50%);background:#28364c;color:#f7fbff;padding:9px 14px;font-size:12px;border:1px solid #57718a;border-radius:11px;white-space:nowrap;z-index:20;pointer-events:none}.toast[hidden]{display:none}@keyframes orbFloat{50%{transform:translateY(-8px)}}@keyframes satellite{50%{transform:translate(7px,-5px)}}@keyframes orbSpin{to{transform:rotate(327deg)}}@keyframes shine{to{transform:translateX(160%)}}@keyframes sheet{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes dropin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@media(min-width:600px){body{background:radial-gradient(ellipse at 50% 40%,#303050,#080a12 80%)}.shell{height:min(var(--apph),930px);min-height:0;max-height:930px;top:50%;transform:translateY(-50%);border-radius:25px;border:1px solid #ffffff15}}@media(max-height:630px){.screen{gap:7px;padding-bottom:calc(9px + env(safe-area-inset-bottom))}.nav{height:calc(53px + env(safe-area-inset-top))}.stage-orb{width:min(46vw,23vh);height:min(46vw,23vh);min-height:80px;min-width:80px}.hero-title{font-size:28px}.tile{min-height:68px;padding:10px}.tile small{display:none}.cta{height:49px}.scene{border-radius:18px}.compare>div{min-height:60px;padding:10px}.result-bars div{height:45px}.hub-art{height:100px}.game-card{min-height:122px}}@media(max-height:450px){.tagline{display:none}.hub-art{display:none}.scene{min-height:85px}.screen{gap:5px}.section-head{min-height:20px}.results-panel{gap:5px}.feedback-sub{margin-top:2px}.score-num{font-size:49px}.float-stage{min-height:65px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
/* Home-page art is integrated into the background, never inside a boxed media frame. */
.hub-intro{overflow:visible;flex:0 0 auto}.hub-art{background:transparent;border:0;isolation:auto}
/* Keep the brand trigger above the outside-click layer so it toggles both ways. */
.switcher{position:relative;z-index:21}.nav-right{position:relative;z-index:21}
@media(min-width:600px){body{min-height:100dvh;display:grid;place-items:center}.shell{top:auto;transform:none}}


/* SENSES PREMIUM v2: unified restrained tactile system, zero external assets. */
:root{--premium-stroke:#ffffff22;--glow:color-mix(in srgb,var(--accent) 22%,transparent)}
.shell{background:radial-gradient(ellipse 90% 50% at 50% -17%,#34375535,transparent 78%),linear-gradient(180deg,#121723 0%,#0c111b 65%,#0b101a 100%)}
.shell:before{background:radial-gradient(ellipse 60% 45% at 50% -15%,#af9fff0d,transparent 80%);pointer-events:none}
.nav{border-bottom:0!important;background:transparent!important}
.switcher{background:linear-gradient(138deg,#1f2635dd,#181e2b90);border:1px solid #ffffff16;box-shadow:inset 0 1px #ffffff0c,0 5px 18px #00000019;transition:background .22s,border-color .22s,transform .14s}
.switcher:hover,.switcher[aria-expanded=true]{border-color:#8e9aab60;background:#262d3e}
.caret-box{border:1px solid #ffffff15;background:#ffffff08;border-radius:9px}
.tiny-button{background:linear-gradient(150deg,#222b3c,#182131);border-color:#ffffff21;box-shadow:inset 0 1px #ffffff13}
.screen{background:transparent!important}
.cta{background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 83%,white),#d6d2ff);color:#13202a;border:1px solid #fff7;box-shadow:inset 0 1px #ffffffa1,0 8px 26px var(--glow),0 4px 12px #0005;letter-spacing:-.2px;font-weight:900;position:relative;isolation:isolate;transition:transform .16s cubic-bezier(.2,.85,.2,1),filter .16s,box-shadow .16s}
.cta:active:not(:disabled){transform:translateY(2px) scale(.991);filter:brightness(.97);box-shadow:inset 0 2px 9px #0003,0 3px 12px var(--glow)}
.cta.secondary{background:linear-gradient(130deg,#252d3f,#1a2432);color:#eff6ff;border:1px solid #ffffff28;box-shadow:inset 0 1px #ffffff11}
.tile{background:linear-gradient(145deg,#1f2b3b,#192332);border:1px solid #ffffff23;box-shadow:inset 0 1px #ffffff0f;transition:border-color .2s,transform .16s}
.tile:hover{border-color:var(--accent)}
.pill{background:#252b3e;border-color:#ffffff24}
.scene{background:radial-gradient(circle at 50% 40%,#253149,#141c29 75%);border:1px solid #ffffff24;box-shadow:inset 0 1px #ffffff14,0 14px 34px #0003}
.scene-note{letter-spacing:2px}
.score-num{position:relative;filter:drop-shadow(0 4px 22px var(--glow))}
.score-sign{font-size:15px;display:inline-block;vertical-align:top;margin:7px 5px 0 0;color:var(--accent)}
.results-panel{border:1px solid #ffffff19;border-radius:20px;background:radial-gradient(ellipse at 20% 0%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 74%),#161e2cb8;box-shadow:inset 0 1px #ffffff0a}
.feedback-text{letter-spacing:-.4px;text-wrap:balance}
.compare>div{background:linear-gradient(145deg,#202b3b,#1a2330);border:1px solid #ffffff23;box-shadow:inset 0 1px #ffffff11}
.status-line{color:#9dacbd}
.drop{box-shadow:0 22px 70px #000c,0 0 0 1px #ffffff0c;border-color:#ffffff30;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.hub-art svg{width:100%;height:100%}
.passport{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 13px;background:linear-gradient(110deg,#1b2733b8,#1d2131aa);border:1px solid #ffffff21;border-radius:14px;min-height:49px;flex:0 0 auto;box-shadow:inset 0 1px #ffffff10}
.passport-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.passport-text strong{font-size:10px;letter-spacing:1.45px;color:#d5e7ef;font-weight:900}
.passport-text small{font-size:10px;color:#8fa8b7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.passport-progress{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.passport-progress b{font-size:17px;font-weight:950;letter-spacing:-.8px;color:#edfff6}
.passport-progress em{font-size:11px;font-weight:600;color:#708595;font-style:normal}
.passport-dots{display:flex;gap:4px}
.passport-dots i{width:7px;height:7px;background:#334154;border:1px solid #596778;border-radius:50%;transition:background .2s}
.passport-dots i.lit{background:#b9f5d8;border-color:#dcffe8;box-shadow:0 0 8px #8fe1c76b}
.game-card{transition:transform .16s cubic-bezier(.2,.9,.2,1),border-color .18s,filter .18s;box-shadow:inset 0 1px #ffffff1a,0 10px 24px #0002;overflow:hidden}
.game-card:before{content:'';position:absolute;inset:0;background:linear-gradient(125deg,#ffffff12,transparent 45%,#00000010);pointer-events:none}
.game-card:hover{border-color:var(--card-accent);filter:brightness(1.07)}
.game-card:active{transform:scale(.979)}
.game-done{position:absolute;right:13px;top:13px;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;background:#c9f8dd;color:#1e3a30;font-size:12px;font-weight:950;box-shadow:0 0 14px #b6ffda55}
.game-card.played .card-arrow{opacity:.5}
.card-icon{box-shadow:inset 0 1px #ffffff40}
.full-link{min-height:45px;gap:8px;background:linear-gradient(115deg,#1c2634,#171d2a);border-color:#ffffff25;box-shadow:inset 0 1px #ffffff10}
.logic-mini{width:20px;height:20px;display:inline-flex;flex:0 0 auto;color:white}
.logic-mini svg{height:100%;width:100%}
.logic-desc{font-size:10px;color:#8b9bab;flex:1;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
.logic-arrow{margin-left:auto;color:#c6d5ff}
/* animated hero glyphs live directly on transparent background, no visible rectangle */
.stage-orb.immersive{width:min(62vw,31vh,248px);height:min(62vw,31vh,248px);max-width:248px;max-height:248px;min-height:110px;min-width:110px;background:transparent;border:0;box-shadow:none;border-radius:0;animation:none;padding:0;overflow:visible;filter:drop-shadow(0 7px 27px var(--glow))}
.stage-orb.immersive:before,.stage-orb.immersive:after{display:none}
.stage-orb.immersive svg.scene-hero{width:100%;height:100%;display:block;overflow:visible}
.time-hero .time-ring{transform-origin:120px 120px;animation:rotateSlow 26s linear infinite}
.time-hero .time-hand{transform-origin:120px 120px;animation:rotateSlow 9s linear infinite}
.shape-hero .shape-drift{transform-origin:120px 120px;animation:shapeFloat 6s ease-in-out infinite}
.shape-hero .shape-ghost{animation:shapeGhost 6s ease-in-out infinite}
.sound-hero .audio-wave-bar{transform-origin:center;transform-box:fill-box;animation:wavePremium 1.16s ease-in-out infinite alternate}
@keyframes rotateSlow{to{transform:rotate(360deg)}}
@keyframes shapeFloat{50%{transform:translate(5px,-6px) rotate(7deg)}}
@keyframes shapeGhost{50%{opacity:.38}}
@keyframes wavePremium{to{transform:scaleY(.32)}}
@media(max-height:710px){.passport{min-height:43px;padding:5px 10px}.stage-orb.immersive{width:min(49vw,26vh);height:min(49vw,26vh)}.hub-end{display:none}}
@media(max-height:600px){.passport-text small{display:none}.passport{min-height:36px}.passport-text strong{font-size:9px}.game-card{min-height:95px}.hub-art{height:82px}.hub-intro p{display:none}}
@media(max-height:420px){.passport{display:none}}
@media(prefers-reduced-motion:reduce){.time-hero .time-ring,.time-hero .time-hand,.shape-hero .shape-drift,.shape-hero .shape-ghost,.sound-hero .audio-wave-bar{animation:none!important}}

/* Final compact breakpoints: primary controls never disappear below viewport. */
.hub-end{display:none}
@media(max-height:780px){
 .hub-art{height:95px}
 .games{gap:8px}
 .game-card{min-height:110px;padding:11px 12px;border-radius:16px}
 .card-icon{width:34px;height:34px}
 .hub-intro{padding-top:0}
 .hub-intro h1{font-size:clamp(23px,7vw,30px);line-height:1.04}
 .hub-intro p{font-size:11px;line-height:1.3}
 .hub .screen,.hub{gap:8px}
 .passport{min-height:40px;padding:6px 11px}
 .full-link{min-height:42px;padding:9px 11px}
}
@media(max-height:640px){
 .hub-art{display:none}
 .hub-intro p{display:none}
 .game-card{min-height:96px;padding:9px 11px}
 .game-card strong{font-size:14px}
 .game-card small{font-size:10px}
 .hub-kicker{font-size:9px}
 .hub-intro h1{font-size:clamp(23px,7vw,30px)}
 .passport{min-height:38px;padding:5px 10px}
 .hub{gap:8px}
}
@media(max-height:440px){
 .hub-intro h1{font-size:23px;letter-spacing:-.8px}
 .hub-kicker{display:none}
 .hub-intro{padding:0}
 .hub{gap:6px}
 .game-card{min-height:75px;padding:7px 9px;border-radius:13px}
 .card-icon{width:26px;height:26px}
 .game-card strong{font-size:13px;line-height:1.1;margin-top:4px}
 .game-card small{display:none}
 .game-card .card-arrow{bottom:11px;right:10px;font-size:16px}
 .full-link{min-height:35px;padding:7px 10px;font-size:10px}
 .passport{display:none}
 .screen{padding-top:4px;padding-bottom:5px}
 .nav{height:calc(48px + env(safe-area-inset-top))}
 .logic-desc{display:none}
}

.feedback-text{width:100%;max-width:100%;white-space:nowrap;font-size:clamp(15px,4.6vw,20px);overflow:hidden;text-overflow:ellipsis}
.install-soft{min-height:30px;border:1px solid #ffffff20;background:#1c2935;border-radius:11px;color:#d6e8f4;font-size:11px;font-weight:820;letter-spacing:.1px;padding:6px 12px;align-self:center}
.install-soft:active{transform:scale(.98)}
@media(max-height:590px){.install-soft{min-height:24px;padding:3px 9px;font-size:10px}}
@media(max-height:450px){.install-soft{display:none}}

/* PUZRU GALAXY v3 — hub and shared tactile refinements */
:root{--portal-speed:420ms}
.shell{background:radial-gradient(ellipse 70% 32% at 50% -14%,#41446a30,transparent 92%),linear-gradient(180deg,#111521 0%,#0b111c 80%);}
.hub.screen{display:flex;flex-direction:column;gap:clamp(7px,1.45vh,13px);padding:clamp(7px,1.2vh,12px) 16px calc(12px + env(safe-area-inset-bottom));overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scrollbar-width:none;}
.hub::-webkit-scrollbar{display:none}
.hub-intro{flex:0 0 auto;min-height:0;padding:0}
.hub-kicker{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:2.2px;color:#b4e9d7;line-height:1.2}
.live-dot{width:5px;height:5px;flex:0 0 auto;border-radius:50%;background:#a3f5d4;box-shadow:0 0 11px #b3ffe988}
.hub-intro h1{font-size:clamp(25px,7.35vw,36px);letter-spacing:-1.35px;line-height:1.11;font-weight:900;margin:8px 0 4px;white-space:normal;text-wrap:balance}
.hub-intro p{font-size:clamp(10px,2.7vw,12px);line-height:1.4;color:#aebed0;margin:0;white-space:normal;max-width:370px}
.hub-art{height:clamp(98px,19vh,171px);min-height:0;flex:0 0 auto;display:grid;place-items:center;position:relative;cursor:pointer;outline-offset:-4px;border-radius:20px;isolation:auto;overflow:visible;}
.hub-art svg{max-width:360px;height:100%;width:100%;overflow:visible;filter:drop-shadow(0 7px 27px #aca3ff10)}
.hub-art-hint{position:absolute;right:12%;bottom:12%;color:#d5d1ffb8;font-size:10px;animation:hubTwinkle 3.8s ease-in-out infinite}
@keyframes hubTwinkle{50%{opacity:.26;transform:scale(.72)}}
.passport{flex:0 0 auto;min-width:0;min-height:43px;padding:8px 12px;gap:8px;border-radius:15px;background:linear-gradient(100deg,#1c2b36bf,#22243baa);border-color:#ffffff20}
.passport-text strong{font-size:10px;letter-spacing:1.1px}.passport-text small{font-size:10px}
.passport-progress{gap:7px}.passport-dots{gap:3px}.passport-dots i{width:7px;height:7px}
.games{flex:0 0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;align-content:start;grid-auto-rows:minmax(0,auto);}
.game-card{min-width:0;min-height:116px;height:clamp(112px,16.5vh,137px);padding:12px 12px 11px;border-radius:19px;display:flex;flex-direction:column;justify-content:space-between;gap:8px;position:relative;overflow:hidden;isolation:isolate;transition:transform .18s cubic-bezier(.2,.85,.2,1),border-color .18s,box-shadow .18s,background .18s;transform:translateZ(0)}
.game-card:before{z-index:-1;background:linear-gradient(145deg,#ffffff17,transparent 46%,#0000000b);}
.game-card:after{content:'';position:absolute;right:-36px;top:-34px;width:104px;height:104px;border:1px solid var(--card-accent);border-radius:50%;opacity:.17;pointer-events:none;transition:transform .55s ease,opacity .35s}
.game-card:hover:after,.game-card:focus-visible:after{transform:scale(1.22) rotate(25deg);opacity:.34}
.game-card:hover{transform:translateY(-2px);box-shadow:inset 0 1px #ffffff2a,0 12px 28px #0003}
.game-card:active{transform:translateY(1px) scale(.991)}
.game-card-top,.game-card-foot{width:100%;display:flex;justify-content:space-between;align-items:center;gap:6px;min-width:0;position:relative;z-index:1}
.game-card-top{height:34px;flex:0 0 auto}
.game-card .card-icon{width:32px;height:32px;min-width:32px;flex:0 0 32px;border-radius:11px;margin:0;box-shadow:inset 0 1px #ffffff23,0 0 20px color-mix(in srgb,var(--card-accent) 10%,transparent)}
.game-card .card-icon svg{width:23px;height:23px}
.card-micro{color:var(--card-accent);font-size:9px;font-weight:850;letter-spacing:1px;opacity:.75;white-space:nowrap}
.game-card-foot{align-items:flex-end;flex:1 1 auto;min-height:0}
.card-title{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto}
.game-card strong{display:block;font-size:clamp(15px,4.35vw,19px);line-height:1.02;letter-spacing:-.5px;margin:0;white-space:nowrap}
.game-card small{display:block;margin:0;font-size:clamp(9px,2.6vw,11px);line-height:1.15;color:#c0ccdb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.game-card .card-arrow{position:static;flex:0 0 23px;width:23px;height:23px;border-radius:8px;display:grid;place-items:center;font-size:18px;font-weight:750;color:var(--card-accent);background:#ffffff0d;transition:transform .2s}
.game-card:hover .card-arrow{transform:translate(2px,-2px)}
.game-done{top:8px;right:8px;width:16px;height:16px;font-size:10px;z-index:3;}
.game-done~.card-ambient{opacity:.7}
.card-ambient{position:absolute;left:10%;right:10%;top:-12px;height:50px;background:radial-gradient(ellipse,color-mix(in srgb,var(--card-accent) 16%,transparent),transparent 72%);pointer-events:none;z-index:-1}
.world-time .card-icon svg{animation:hubIconTime 9s ease-in-out infinite}.world-shape .card-icon svg{animation:hubIconShape 8s ease-in-out infinite}.world-sound .card-icon svg{animation:hubIconSound 3.2s ease-in-out infinite}.world-spectrum .card-icon svg{animation:hubIconSpectrum 10s ease-in-out infinite}
@keyframes hubIconTime{50%{transform:rotate(32deg)}}@keyframes hubIconShape{50%{transform:rotate(16deg) scale(.92)}}@keyframes hubIconSound{50%{transform:scaleY(.76)}}@keyframes hubIconSpectrum{50%{transform:rotate(46deg)}}
.full-link{flex:0 0 auto;min-height:44px;height:auto;padding:10px 12px;gap:9px;border-radius:14px;overflow:hidden;min-width:0}
.logic-mini{width:21px;height:21px}.logic-desc{min-width:0;font-size:10px}.logic-arrow{flex:0 0 auto}
.hub-end{display:none}
/* World portals emphasize which universe you're entering while preserving fast navigation. */
.puzru-portal{position:fixed;inset:0;z-index:9999;display:flex;justify-content:center;align-items:center;pointer-events:none;background:radial-gradient(circle at 50% 50%,var(--portal-glow,#9bc7ff26),#0b0e1b 76%);opacity:0;transition:opacity .24s ease;isolation:isolate}
.puzru-portal.visible{opacity:1}
.puzru-portal .portal-circle{width:min(65vw,240px);height:min(65vw,240px);display:grid;place-items:center;position:relative;border-radius:50%;border:1px solid #ffffff30;box-shadow:0 0 60px var(--portal-glow,#9bc7ff40),inset 0 0 45px #ffffff0a;transform:scale(.67) rotate(-30deg);transition:transform .42s cubic-bezier(.21,.83,.25,1.05)}
.puzru-portal.visible .portal-circle{transform:scale(1) rotate(0)}
.puzru-portal .portal-circle:before{content:'';position:absolute;inset:-16px;border:3px solid transparent;border-top-color:var(--portal-color,#c8c5ff);border-right-color:#ffffff70;border-radius:50%;animation:portalSpin 1.2s linear infinite}
.puzru-portal .portal-name{font-size:clamp(23px,7vw,36px);letter-spacing:-1.2px;font-weight:900;text-shadow:0 4px 16px #0008}
.puzru-portal.arrival{animation:portalArrival .36s ease both}
@keyframes portalArrival{from{opacity:.95}to{opacity:0}}
@keyframes portalSpin{to{transform:rotate(360deg)}}
.shell.world-time{--world-haze:#f5b86b12}.shell.world-shape{--world-haze:#ba9cff13}.shell.world-sound{--world-haze:#76baff13}.shell.world-spectrum{--world-haze:#c1e6cb13}
.shell.world-time,.shell.world-shape,.shell.world-sound{background:radial-gradient(ellipse 75% 43% at 52% 4%,var(--world-haze),transparent 80%),linear-gradient(180deg,#111521,#0a101a 83%)}
.game-intro .hero-title{letter-spacing:-1.05px}
.stage-orb.immersive{filter:drop-shadow(0 10px 34px color-mix(in srgb,var(--accent) 24%,transparent))}
.scene{transition:box-shadow .28s}
.scene:focus-within{box-shadow:inset 0 1px #ffffff16,0 0 0 1px var(--accent)}
.cta,.tiny-button,.pill{touch-action:manipulation}
.cta{transition:transform .14s ease,filter .14s ease,box-shadow .14s ease}
.cta:active:not(:disabled){transform:translateY(2px) scale(.991)}
.score-num{animation:scoreLanding .42s cubic-bezier(.22,.83,.24,1.15) both}
@keyframes scoreLanding{from{opacity:.24;transform:translateY(11px) scale(.87)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-height:800px){.hub-art{height:clamp(72px,15vh,120px)}.game-card{height:clamp(101px,15vh,123px);min-height:0}.hub{gap:8px}.hub-intro h1{margin:4px 0}.passport{min-height:39px}}
@media(max-height:685px){.hub-art{height:70px}.game-card{height:97px}.hub-intro p{display:none}.hub-intro h1{font-size:clamp(23px,6.5vw,29px);margin:5px 0 0}.hub .passport{min-height:37px;padding:6px 10px}}
@media(max-height:570px){.hub-art{display:none}.game-card{height:94px}.hub.screen{gap:7px;padding-top:6px;padding-bottom:6px}.passport-text small{display:none}.hub .passport{min-height:33px;padding:5px 9px}}
@media(max-height:440px){.hub-kicker{display:none}.hub-intro h1{font-size:21px;margin:0}.hub .passport{display:none}.game-card{height:67px;padding:7px 10px;gap:4px;border-radius:12px}.game-card-top{height:23px}.game-card .card-icon{width:23px;height:23px;min-width:23px;flex-basis:23px;border-radius:7px}.game-card .card-icon svg{width:18px;height:18px}.game-card strong{font-size:14px}.game-card small,.card-micro{display:none}.game-card .card-arrow{width:20px;height:20px;flex-basis:20px}.full-link{min-height:33px;padding:6px 10px}.hub.screen{gap:6px}}
@media(max-width:320px){.hub.screen{padding-left:10px;padding-right:10px}.games{gap:7px}.game-card{padding-left:9px;padding-right:9px}.game-card strong{font-size:15px}.game-card small{font-size:9px}.nav{padding-left:10px;padding-right:10px}}
@media(prefers-reduced-motion:reduce){.hub-art-hint,.world-time .card-icon svg,.world-shape .card-icon svg,.world-sound .card-icon svg,.world-spectrum .card-icon svg,.puzru-portal .portal-circle:before{animation:none!important}.puzru-portal,.puzru-portal .portal-circle{transition:none!important}}

/* Sound control mirrors the refinement of Spectrum's compact native control. */
#volume svg{display:block;margin:auto}#volume{color:#d6e9ff}#language{letter-spacing:.4px}#volume:active,#language:active{transform:translateY(1px) scale(.985)}
/* Unique gameplay atmospheres without loading bitmap assets. */
.world-time .scene{background:radial-gradient(ellipse at 50% 54%,#3b302c65,#181c29 73%)}
.world-shape .scene{background:radial-gradient(ellipse at 50% 52%,#302c4b75,#151b2a 72%)}
.world-sound .scene{background:radial-gradient(ellipse at 50% 51%,#1e405467,#151d2b 78%)}
.world-time .time-button{background:radial-gradient(circle at 36% 27%,#4b3e37,#1b232e 69%)}
.world-shape .shape-arena{background:radial-gradient(circle at 50% 46%,#8f7eb70d,transparent 75%)}
.world-sound .sound-pad{background:radial-gradient(ellipse at 49% 45%,#376888,#1b3344 65%,#101f2e)}

@media(max-width:300px){.logic-desc{display:none}.full-link{justify-content:space-between}.full-link .logic-arrow{margin-left:auto}}

/* Galaxy v4: hard layout invariants. No hero graphics over progress or buttons. */
.hub.screen{overflow:hidden;gap:clamp(8px,1.3vh,12px);display:flex;flex-direction:column;min-height:0;align-items:stretch;justify-content:flex-start}
.hub .hub-intro{flex:0 0 auto;min-width:0;position:relative;z-index:2}
.hub .hub-intro h1{font-size:clamp(25px,6.5vw,35px);line-height:1.08;letter-spacing:-1.25px;margin:6px 0;overflow-wrap:normal;text-wrap:balance}
.hub .hub-intro p{font-size:clamp(11px,2.8vw,12px);line-height:1.45;max-width:100%}
.hub .hub-art{flex:0 1 clamp(96px,18vh,178px);height:clamp(96px,18vh,178px);min-height:0;max-height:178px;overflow:hidden;isolation:isolate;border:0;border-radius:0;position:relative;z-index:1;contain:paint}
.hub .hub-art svg{width:100%;height:100%;max-width:360px;overflow:hidden;display:block;filter:none}
.hub .hub-art-hint{display:none}
.hub .passport{position:relative;z-index:2;flex:0 0 auto;min-height:46px;overflow:hidden}
.hub .games{position:relative;z-index:2;flex:0 0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;grid-auto-rows:auto}
.hub .game-card{height:clamp(106px,15vh,135px);min-height:0;flex:0 0 auto;min-width:0;display:flex;flex-direction:column;justify-content:space-between;padding:12px;position:relative;contain:layout paint;overflow:hidden;isolation:isolate}
.hub .game-card .game-card-foot,.hub .game-card .game-card-top{min-width:0}
.hub .game-card .card-title{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:3px}
.hub .game-card strong{font-size:clamp(16px,4.1vw,20px);margin:0;white-space:nowrap}
.hub .game-card small{font-size:clamp(9px,2.6vw,11px);line-height:1.18;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.hub .full-link{position:relative;z-index:2;flex:0 0 auto;min-height:44px;padding:10px 12px;min-width:0}
.hub .full-link .logic-desc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hub .game-card .card-arrow{flex:0 0 23px}
.hub .hub-art svg g{will-change:auto}
@media(max-height:780px){.hub .hub-art{height:clamp(72px,13.2vh,105px);flex-basis:clamp(72px,13.2vh,105px)}.hub .game-card{height:clamp(96px,13.6vh,115px)}}
@media(max-height:670px){.hub .hub-art{display:none}.hub .hub-intro p{display:none}.hub .game-card{height:96px}.hub .passport{min-height:40px;padding:6px 10px}}
@media(max-height:510px){.hub .hub-kicker{display:none}.hub .hub-intro h1{font-size:clamp(20px,5vw,26px);margin:0}.hub .passport{display:none}.hub .game-card{height:70px;padding:7px 10px}.hub .game-card .game-card-top{height:20px}.hub .game-card .card-icon{width:21px;height:21px;min-width:21px;flex-basis:21px}.hub .game-card .card-icon svg{width:16px;height:16px}.hub .game-card small,.hub .card-micro{display:none}.hub .full-link{min-height:34px;padding:6px 9px}}
@media(max-width:320px){.hub.screen{padding-left:10px;padding-right:10px}.hub .games{gap:7px}.hub .game-card{padding-left:9px;padding-right:9px}.hub .game-card strong{font-size:15px}.hub .passport{gap:4px}}
@media(prefers-reduced-motion:reduce){.hub .hub-art svg *{animation:none!important}}

/* 280–320px: keep game names and arrows in distinct tap-safe regions. */
@media(max-width:320px){.hub .game-card-foot{gap:3px}.hub .game-card strong{font-size:13px;letter-spacing:-.45px;line-height:1.1;overflow:visible}.hub .game-card .card-arrow{width:17px;height:18px;flex:0 0 17px;font-size:15px;border-radius:6px}.hub .game-card .card-title{min-width:0;max-width:calc(100% - 20px)}.hub .game-card small{font-size:9px}}

/* v5 foundation refinements */
@media (max-width:360px){.nav .switcher{min-width:0;flex:1 1 auto;max-width:calc(100% - 96px)}.nav-right{flex:0 0 auto}.nav .brand-name{min-width:0}.nav .brand-name strong{overflow:hidden;text-overflow:ellipsis}.nav .mark{flex-shrink:0}}
.hub .hub-art{z-index:0;pointer-events:auto}.hub .passport,.hub .games,.hub .full-link{z-index:1;position:relative}
.hub .game-card:focus-visible{outline-offset:2px}
@media(prefers-reduced-motion:reduce){.hub-art svg *{animation:none!important}}

/* Galaxy v6 desktop hub composition: a true wide, height-filling game gallery. */
@media (min-width:850px) and (min-height:640px){
 body:has(.hub.screen){background:radial-gradient(ellipse 65% 90% at 50% 5%,#26223f,#0a0e17 72%);}
 body:has(.hub.screen) .shell{width:min(100%,1160px);max-width:1160px;min-height:var(--apph);height:var(--apph);background:radial-gradient(ellipse 55% 50% at 25% 45%,#1b273437,transparent 92%),radial-gradient(ellipse 75% 45% at 80% 0,#2a27383e,transparent 90%),#0e121d;}
 body:has(.hub.screen) .nav{padding-inline:clamp(24px,3.5vw,45px);height:76px;}
 body:has(.hub.screen) .hub.screen{display:grid;grid-template-columns:minmax(0, .85fr) minmax(0, 1.15fr);grid-template-rows:minmax(118px,.7fr) minmax(165px,1.3fr) minmax(58px,.38fr) 60px;gap:clamp(12px,2vh,23px) clamp(20px,3vw,38px);padding:clamp(24px,3.1vh,46px) clamp(24px,3.7vw,52px) clamp(22px,3vh,42px);align-items:stretch;justify-content:stretch;min-height:0;overflow:hidden;}
 body:has(.hub.screen) .hub-intro{grid-area:1/1/2/2;align-self:end;display:flex;flex-direction:column;justify-content:flex-end;}
 body:has(.hub.screen) .hub-kicker{font-size:12px;letter-spacing:2.6px}
 body:has(.hub.screen) .hub-intro h1{font-size:clamp(39px,4vw,58px);line-height:1.03;letter-spacing:-2.2px;max-width:450px;margin:13px 0 14px;}
 body:has(.hub.screen) .hub-intro p{font-size:clamp(13px,1.1vw,16px);line-height:1.5;max-width:400px;}
 body:has(.hub.screen) .hub-art{grid-area:2/1/3/2;height:100%;max-height:none;min-height:0;display:grid;place-items:center;overflow:hidden;contain:paint;}
 body:has(.hub.screen) .hub-art svg{height:100%;width:100%;max-width:510px;filter:none;}
 body:has(.hub.screen) .passport{grid-area:3/1/4/2;align-self:stretch;min-height:0;padding:13px 18px;border-radius:17px;}
 body:has(.hub.screen) .games{grid-area:1/2/4/3;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(12px,1.65vh,20px);min-height:0;align-self:stretch;}
 body:has(.hub.screen) .game-card{height:100%;min-height:0;padding:clamp(14px,2vw,25px);border-radius:22px;}
 body:has(.hub.screen) .game-card .card-icon{width:51px;height:51px;flex-basis:51px;border-radius:14px;}
 body:has(.hub.screen) .game-card .card-icon svg{width:34px;height:34px;}
 body:has(.hub.screen) .game-card strong{font-size:clamp(22px,2.4vw,29px);}
 body:has(.hub.screen) .game-card small{font-size:clamp(12px,1.1vw,14px);}
 body:has(.hub.screen) .card-micro{font-size:12px;letter-spacing:2px;}
 body:has(.hub.screen) .full-link{grid-area:4/1/5/3;min-height:0;align-self:stretch;padding:14px 21px;border-radius:16px;}
 body:has(.hub.screen) .full-link .logic-desc{margin-left:8px;}
}
@media(min-width:1000px) and (min-height:460px) and (max-height:639px){
 body:has(.hub.screen) .shell{width:min(100%,1160px);max-width:1160px;min-height:var(--apph);height:var(--apph);}
 body:has(.hub.screen) .hub.screen{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);grid-template-rows:minmax(80px,.6fr) minmax(100px,1fr) 46px;gap:10px 22px;padding:15px 26px;overflow:hidden;}
 body:has(.hub.screen) .hub-intro{grid-area:1/1/2/2;align-self:center;}
 body:has(.hub.screen) .hub-intro h1{font-size:clamp(29px,3vw,39px);line-height:1.05;margin:5px 0;}
 body:has(.hub.screen) .hub-art{grid-area:2/1/3/2;display:grid;height:100%;min-height:0;max-height:none;overflow:hidden;}
 body:has(.hub.screen) .hub-art svg{height:100%;width:100%;max-width:380px;}
 body:has(.hub.screen) .passport{display:none;}
 body:has(.hub.screen) .games{grid-area:1/2/3/3;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:9px;min-height:0;}
 body:has(.hub.screen) .game-card{height:100%;padding:10px 15px;}
 body:has(.hub.screen) .full-link{grid-area:3/1/4/3;padding:8px 16px;min-height:0;}
}
@media(min-width:850px) and (min-height:640px) and (max-height:760px){
 body:has(.hub.screen) .hub.screen{grid-template-rows:minmax(100px,.65fr) minmax(130px,1.15fr) minmax(50px,.38fr) 53px;padding-top:18px;padding-bottom:18px;gap:12px 22px;}
 body:has(.hub.screen) .hub-intro h1{font-size:clamp(32px,3.5vw,46px);margin:8px 0;}
}

/* Galaxy 7: mobile hub fills available vertical space without overlaying content. */
@media (max-width:849px) and (min-height:690px) {
  body:has(.hub.screen) .hub.screen {justify-content:space-between;gap:clamp(9px,1.35vh,15px);padding-block:clamp(12px,2.1vh,22px) calc(18px + env(safe-area-inset-bottom,0px));}
  body:has(.hub.screen) .hub-art{flex:1 1 auto;height:auto;max-height:none;min-height:118px;display:grid;place-items:center;overflow:hidden;contain:paint;}
  body:has(.hub.screen) .hub-art svg {width:100%;height:100%;max-width:420px;max-height:100%;}
  body:has(.hub.screen) .hub .games{flex:0 0 auto;}
  body:has(.hub.screen) .game-card{height:clamp(111px,15.5vh,145px);}
  body:has(.hub.screen) .passport{min-height:51px;}
  body:has(.hub.screen) .full-link{min-height:47px;}
}
@media (max-width:849px) and (min-height:840px) {
  body:has(.hub.screen) .hub-art{min-height:150px;}
  body:has(.hub.screen) .game-card{height:clamp(121px,16.2vh,155px);}
}
@media (max-width:340px) and (min-height:690px){
  body:has(.hub.screen) .hub-art{min-height:94px;}
  body:has(.hub.screen) .game-card{height:clamp(105px,14.2vh,121px);}
}
/* Compact handsets still deserve breathing room: reveal the micro galaxy when possible. */
@media(max-width:849px) and (min-height:520px) and (max-height:689px){
 body:has(.hub.screen) .hub.screen{justify-content:space-between;}
 body:has(.hub.screen) .hub-art{display:grid;place-items:center;flex:0 0 67px;height:67px;min-height:67px;max-height:67px;}
 body:has(.hub.screen) .hub-art svg{height:100%;max-height:67px;}
}

/* Galaxy 11: no touch-hover residue or square GPU afterimages on route cards. */
@media (hover:none) { .hub .game-card:hover {transform:none!important;filter:none!important} }
.hub .game-card:active,.hub .game-card:focus:active,.hub .full-link:active{transform:none!important;filter:none!important}
.hub .game-card,.hub .full-link{backface-visibility:hidden; -webkit-backface-visibility:hidden;contain:layout paint;isolation:isolate}
.hub .game-card .card-ambient{z-index:0;opacity:.24}.hub .game-card > :not(.card-ambient){position:relative;z-index:1}
html.puzru-in-transit .hub .game-card{transform:none!important;filter:none!important}
@media (hover:hover) {.hub .game-card:hover{filter:brightness(1.055)}}
.hub .game-card:focus-visible{outline:2px solid var(--card-accent);outline-offset:3px}

/* PUZRU Galaxy 12 • measured-performance & daily mastery design */
.hub .passport-v12{display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:8px;min-height:70px;padding:10px 13px 11px;border-radius:18px;background:linear-gradient(112deg,#1d3035,#212739 78%,#26263d);border:1px solid #ffffff25;box-shadow:inset 0 1px #ffffff12;overflow:hidden;contain:layout paint}
.passport-v12 .passport-top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.passport-v12 .passport-text strong{font-size:10px;letter-spacing:1.5px;color:#effbf7;line-height:1.2}
.passport-v12 .passport-text small{font-size:10px;color:#abb9cc;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.passport-v12 .passport-progress{display:block}
.passport-v12 .passport-progress b{font-size:20px;letter-spacing:-.8px;font-variant-numeric:tabular-nums;color:#f3fffa}
.passport-v12 .passport-progress em{font-size:11px;color:#99acbb;font-style:normal}
.passport-path{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;width:100%;align-items:center}
.passport-step{min-width:0;display:flex;align-items:center;gap:5px;height:15px;color:#7e93aa;position:relative}
.passport-step-icon{height:15px;width:15px;min-width:15px;display:grid;place-items:center;border:1px solid #74869a45;border-radius:5px;background:#ffffff05;transition:color .22s,background .22s,border-color .22s}
.passport-step-icon svg{display:block;width:10px;height:10px;color:inherit}
.passport-step-line{display:block;height:3px;flex:1;border-radius:5px;background:#5a687a5a;min-width:0}
.passport-step.step-done .passport-step-icon{color:#101c23;border-color:var(--step-accent);background:var(--step-accent);box-shadow:0 0 12px color-mix(in srgb,var(--step-accent) 18%,transparent)}
.passport-step.step-done .passport-step-line{background:var(--step-accent);opacity:.75}
.passport-v12.all-complete{border-color:#9deec165}
.game-card.played{border-color:color-mix(in srgb,var(--card-accent) 39%,#ffffff20)}
.game-card .card-micro-done{display:inline-flex;gap:4px;align-items:center;justify-content:flex-end;color:var(--card-accent);font-size:9px;letter-spacing:.35px;opacity:1;white-space:nowrap}
.game-card .card-micro-done svg{width:15px;height:15px;border-radius:50%;background:color-mix(in srgb,var(--card-accent) 20%,#131a25);padding:2px;flex:0 0 auto}
.game-card.played .card-arrow{opacity:.8}
/* Use only composited transforms, never large blur/filter layers in the continuously animated hub. */
.hub-art svg{filter:none!important}
.hub .game-card .card-icon{box-shadow:inset 0 1px #ffffff20}
.hub .game-card:hover{filter:none}
/* Pause decorative animation when hidden and reduce constant repaints on older processors. */
html.puzru-perf-lite .hub-orbit1,html.puzru-perf-lite .hub-orbit2,
html.puzru-perf-lite .hub-float1,html.puzru-perf-lite .hub-float2,
html.puzru-perf-lite .hub-float3,html.puzru-perf-lite .hub-float4,
html.puzru-perf-lite .hub .game-card .card-icon svg,
html.puzru-perf-lite .hub-art-hint{animation:none!important}
html.puzru-perf-lite .stage-orb:after{animation:none!important}
html.puzru-perf-lite .scene{box-shadow:inset 0 1px #ffffff11}
html.puzru-perf-lite .game-card,html.puzru-perf-lite .game-card:hover{filter:none!important;box-shadow:inset 0 1px #ffffff14}
html.puzru-perf-lite .hub-art svg{filter:none!important}
html.puzru-is-hidden .hub *,html.puzru-is-hidden .stage-orb,html.puzru-is-hidden .scene *{animation-play-state:paused!important}
@media(max-height:720px){.hub .passport-v12{min-height:56px;gap:5px;padding:7px 10px 8px}.passport-step{height:12px}.passport-step-icon{width:13px;min-width:13px;height:13px}.passport-step-icon svg{width:9px;height:9px}}
@media(max-height:560px){.hub .passport-v12{min-height:43px;gap:3px;padding:5px 9px}.passport-v12 .passport-text small{display:none}.passport-step-line{height:2px}}
@media(max-height:440px){.hub .passport-v12{display:none}}
@media(max-width:325px){.game-card .card-micro-done{font-size:8px;gap:2px}.game-card .card-micro-done svg{width:13px;height:13px}.passport-v12 .passport-text strong{font-size:9px;letter-spacing:1px}}
@media(prefers-reduced-motion:reduce){.passport-step-icon{transition:none}}

/* Galaxy v13 hero: no rectangular interaction overlay or shadow. */
.hub-art,.hub-art:hover,.hub-art:active,.hub-art:focus{background:transparent!important;box-shadow:none!important;filter:none!important;outline-offset:-3px;}





/* v14 result graph: strong text contrast on dark tracks, independently of theme accents. */
.time-visual{background:#111b2a!important;border:1px solid #3c4c62!important;gap:14px!important;padding:16px 13px!important;color:#f6f9ff!important;}
.time-visual .duration-row{display:grid!important;grid-template-columns:52px minmax(0,1fr) 52px!important;gap:9px;align-items:center;min-height:24px;}
.time-visual .duration-label{color:#f6f9ff!important;opacity:1!important;font-size:11px!important;font-weight:900!important;width:auto!important;text-shadow:none!important;}
.time-visual .duration-value{color:#e2eafa!important;font-size:11px;font-weight:850;text-align:right;white-space:nowrap;letter-spacing:0;}
.time-visual .duration-track{height:13px!important;border-radius:99px!important;overflow:hidden;background:#303e53!important;border:1px solid #526079!important;min-width:0;}
.time-visual .duration-track i{height:100%;display:block;background:linear-gradient(90deg,#f7c28d,#ffdfaa);border-radius:99px;}
.time-visual .guess-duration .duration-track i{background:linear-gradient(90deg,#91cbff,#cbbcff);}
.icon-awake{animation:puzru-icon-awake .5s cubic-bezier(.18,.8,.22,1)!important;transform-box:fill-box;transform-origin:center;}
@keyframes puzru-icon-awake{0%,100%{transform:scale(1)}28%{transform:scale(1.14) rotate(-7deg)}65%{transform:scale(.97) rotate(4deg)}}
@media (prefers-reduced-motion:reduce){.icon-awake{animation:none!important}}


/* v15 polish: remove tap-rect artifacts, prevent stray text selection, and refine result bar labels */
a:focus:not(:focus-visible),button:focus:not(:focus-visible),[tabindex]:focus:not(:focus-visible){outline:none}
html,body,.shell,.screen,.hub-art,.hub-art *,button,a,.game-card,.game-card *{-webkit-tap-highlight-color:transparent}
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,[contenteditable="true"]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
svg,svg *{-webkit-user-select:none;user-select:none}
.hub-art{outline:none!important;border-radius:24px;touch-action:manipulation;-webkit-user-select:none;user-select:none;background:transparent!important}
.hub-art:focus,.hub-art:focus-visible,.hub-art:active{outline:none!important;box-shadow:none!important;background:transparent!important}
.result-bars div b{color:var(--accent)!important;text-shadow:0 0 10px color-mix(in srgb,var(--accent) 28%,transparent)}
.result-bars div{border:1px solid color-mix(in srgb,var(--accent) 20%,#253044 80%)}
.result-bars div span{box-shadow:0 0 14px color-mix(in srgb,var(--accent) 32%,transparent)}

/* Galaxy v16 • true per-icon interaction. Parent/SVG must never scale or repaint as a card. */
.hub-art,.hub-art:hover,.hub-art:active,.hub-art:focus,.hub-art:focus-within{transform:none!important;animation:none!important;filter:none!important;background:transparent!important;box-shadow:none!important;border:0!important;outline:0!important;-webkit-tap-highlight-color:transparent!important;-webkit-touch-callout:none}
.hub-art > svg,.hub-art > svg:hover,.hub-art > svg:active,.hub-art > svg:focus{transform:none!important;animation:none!important;filter:none!important;outline:0!important;background:transparent!important;box-shadow:none!important}
.hub-art svg [data-hero-world]{cursor:pointer;outline:0!important;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.hub-art svg [data-hero-world]:focus{outline:0!important;filter:none!important}
.hub-art svg [data-hero-world]:focus-visible .hub-symbol-inner{stroke-width:inherit;filter:drop-shadow(0 0 2px #e6ecff88)}
/* No perpetual floating transform on tappable icons: prevents an animation swap jumping at touch. */
.hub-art svg .hub-float1,.hub-art svg .hub-float2,.hub-art svg .hub-float3,.hub-art svg .hub-float4{animation:none!important;transform:none!important}
.hub-art svg .hub-symbol-inner{transform-box:fill-box;transform-origin:center;animation:none;will-change:auto}
.hub-art svg .hub-symbol-inner.icon-awake.hero-time-awake{animation:galaxyTimeTick .52s cubic-bezier(.18,.83,.22,1) both!important}
.hub-art svg .hub-symbol-inner.icon-awake.hero-shape-awake{animation:galaxyShapeTurn .52s cubic-bezier(.16,.83,.25,1) both!important}
.hub-art svg .hub-symbol-inner.icon-awake.hero-sound-awake{animation:galaxySoundBeat .55s cubic-bezier(.18,.7,.22,1) both!important}
.hub-art svg .hub-symbol-inner.icon-awake.hero-spectrum-awake{animation:galaxySpectrumBloom .56s cubic-bezier(.16,.85,.24,1) both!important}
@keyframes galaxyTimeTick{0%,100%{transform:rotate(0deg) scale(1)}32%{transform:rotate(10deg) scale(1.07)}60%{transform:rotate(-3deg) scale(1.035)}}
@keyframes galaxyShapeTurn{0%,100%{transform:rotate(0deg) scale(1)}48%{transform:rotate(16deg) scale(1.07)}75%{transform:rotate(-4deg) scale(1.02)}}
@keyframes galaxySoundBeat{0%,100%{transform:scale(1)}22%{transform:scale(1.11,.96)}47%{transform:scale(.97,1.12)}72%{transform:scale(1.055,.98)}}
@keyframes galaxySpectrumBloom{0%,100%{transform:scale(1) rotate(0deg)}43%{transform:scale(1.12) rotate(9deg)}75%{transform:scale(1.035) rotate(-3deg)}}
@media(prefers-reduced-motion:reduce){.hub-art svg .hub-symbol-inner.icon-awake{animation:none!important}}