/* Selected Figma 276:2931, 28 September. Geometry is separate from motion.
   All five scenes share a seven-second cohort and the app's visibility pause. */
.hub-soft-grid{gap:12px 14px;margin-inline:2px}
.hub-tile.hub-soft{border:.9px solid #ffffff70;border-radius:18px;box-shadow:inset 0 1px 0 #ffffff30;transition:transform .2s,filter .2s,box-shadow .2s,border-color .2s}
.hub-tile.hub-soft::before,.hub-tile.hub-soft::after{display:none}
.hub-tile.hub-soft img{animation:none;object-fit:contain;max-width:none}
.hub-tile.hub-soft.hub-upgrade{background:linear-gradient(90deg,#008459,#17c96d 50%,#adff66);border-color:#adff66cc;border-radius:20px}
.hub-tile.hub-soft.hub-mines{background:linear-gradient(0deg,#0051bcf2,transparent 40%),linear-gradient(110deg,#008cf1,#37cffb)}
.hub-tile.hub-soft.hub-plinko{background:linear-gradient(110deg,#a118f1,#d871ff)}
.hub-tile.hub-soft.hub-craft{background:linear-gradient(0deg,#c62449f2,transparent 40%),linear-gradient(110deg,#ff506c,#ffa267)}
.hub-tile.hub-soft.hub-dice{background:linear-gradient(110deg,#2862fa,#77a9ff)}
.hub-tile.hub-soft>.hub-soft-copy{left:15px;right:4px;top:120px;bottom:auto;gap:1px;padding:0;background:none;pointer-events:none}
.hub-tile.hub-soft strong{font-size:20px;line-height:26px;font-weight:800}
.hub-tile.hub-soft small{font-size:11px;line-height:14.3px;font-weight:500;white-space:nowrap}
.hub-tile.hub-soft.hub-upgrade>.hub-soft-copy{top:37px;right:170px}
.hub-tile.hub-soft.hub-upgrade strong{font-size:24px;line-height:31.2px}
.hub-tile.hub-soft.hub-upgrade small{margin-top:5px}
.hub-soft-art{position:absolute;left:50%;top:0;width:172px;height:128px;transform:translateX(-50%) scale(var(--hub-art-scale,1));pointer-events:none;user-select:none}
.hub-soft-art img{display:block}
.hub-soft-layer,.hub-soft-gift{position:absolute}
.hub-soft-layer>img{width:auto;height:auto}
.hub-soft-gift>img{width:100%;height:100%}
.hub-soft-art.hub-upgrade-art{width:358px;left:auto;right:0;transform:none}
.hub-soft-upgrade-back{left:-4px;top:-16px}
.hub-soft-halo{left:242px;top:-6px;animation:hub-soft-glow 7s ease-in-out infinite}
.hub-soft-orbit{left:244px;top:4px;animation:hub-soft-orbit 7s linear infinite}
.hub-soft-cap-shadow{left:190px;top:109px}
.hub-soft-cap{left:188px;top:65px;width:56px;height:56px}
.hub-soft-arrow{left:235.45px;top:54px}
.hub-soft-peach{left:262px;top:20px;width:87px;height:87px;animation:hub-soft-lift 7s ease-in-out infinite}
.hub-soft-ice-back{left:-32px;top:0}
.hub-ice-tile{position:absolute;width:39.8px;height:35.4px;transform:rotate(8deg);perspective:180px}
.hub-ice-base{inset:0}
.hub-ice-lid{inset:0;transform-origin:50% 2px;backface-visibility:hidden;animation:hub-soft-lid 7s ease-in-out infinite;animation-delay:var(--lid-delay)}
.hub-soft-board{left:10px;top:18px}
.hub-pearl-field{position:absolute;left:16px;top:15px;width:137.6px;height:101px}
.hub-pearl{animation:hub-soft-pearl 7s ease-out infinite;animation-delay:var(--peg-delay)}
.hub-soft-ball{left:60.6px;top:-5px;animation:hub-soft-ball-path 7s linear infinite,hub-soft-ball-fade 7s ease-in-out infinite}
.hub-soft-bag-back{left:84px;top:-2px}
.hub-soft-warm{left:48px;top:-12px}
.hub-soft-plus{left:0;top:10px}
.hub-soft-craft-peach{left:3px;top:40px;width:64px;height:64px;animation:hub-soft-sway 7s ease-in-out infinite}
.hub-soft-craft-bag{left:105px;top:37px;width:64px;height:64px;animation:hub-soft-sway 7s ease-in-out infinite reverse}
.hub-soft-cube-back{left:12px;top:0}
.hub-soft-cube-light{left:15px;top:7px}
.hub-cube-stage{position:absolute;left:27px;top:5px;width:118px;height:112px;perspective:440px}
.hub-cube-shadow{position:absolute;left:17px;top:97px;width:84px;height:13px;border-radius:50%;background:radial-gradient(ellipse,#1938a86b,transparent 70%)}
.hub-cube-rotor{position:absolute;left:31px;top:28px;width:56px;height:56px;transform-style:preserve-3d;transform:rotateX(-24deg) rotateY(-34deg) rotateZ(7deg);animation:hub-soft-cube 7s infinite linear}
.hub-cube-face{position:absolute;inset:0;display:grid;place-items:center;border:1px solid #f8fcff;border-radius:7px;background:linear-gradient(145deg,#fff,#deedff 58%,#b2d1f5);box-shadow:inset 2px 2px 3px #fff,inset -3px -3px 4px #8dabd380;backface-visibility:hidden}
.hub-cube-face::after{content:'';position:absolute;inset:2px;border-radius:5px;border-top:1px solid #fff9;pointer-events:none}
.hub-cube-face>img{width:44px;height:44px;object-fit:contain}
.hub-cube-front{transform:translateZ(28px)}.hub-cube-back{transform:rotateY(180deg) translateZ(28px)}
.hub-cube-right{transform:rotateY(90deg) translateZ(28px)}.hub-cube-left{transform:rotateY(-90deg) translateZ(28px)}
.hub-cube-top{transform:rotateX(90deg) translateZ(28px)}.hub-cube-bottom{transform:rotateX(-90deg) translateZ(28px)}
.hub-tile.hub-soft:focus-visible{outline:3px solid #fff;outline-offset:3px}
.hub-tile.hub-soft.is-engaged{border-color:#fff;filter:brightness(1.08);box-shadow:inset 0 0 0 1px #ffffffb3,0 0 0 2px #bacbff60,0 8px 20px #0003}
:where(html:not([data-motion="reduced"])) .hub-tile.hub-soft.is-engaged{transform:scale(1.012)}
:where(html[data-motion="reduced"]) .hub-tile.hub-soft{transition:none}
@keyframes hub-soft-glow{0%,50%,100%{opacity:.6}25%,75%{opacity:1}}
@keyframes hub-soft-orbit{to{transform:rotate(360deg)}}
@keyframes hub-soft-lift{0%,50%,100%{transform:translateY(0)}25%,75%{transform:translateY(-3px)}}
@keyframes hub-soft-lid{0%,100%{transform:rotateX(0deg)}8.57%,22.86%{transform:rotateX(-100deg)}31.43%{transform:rotateX(0deg)}}
@keyframes hub-soft-pearl{0%,8%,100%{filter:none}4%{filter:brightness(1.35);transform:scale(1.12)}}
@keyframes hub-soft-ball-path{0%,100%{transform:translate(0,0)}7.857%{transform:translate(-8px,14px)}15.714%{transform:translate(8px,28px)}23.571%{transform:translate(-16px,42px)}31.429%{transform:translate(0,56px)}42.857%,50%{transform:translate(16px,72px)}50.143%{transform:translate(0,0)}}
@keyframes hub-soft-ball-fade{0%,42.857%,100%{opacity:1}47.857%,95.714%{opacity:0}}
@keyframes hub-soft-sway{0%,50%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-2.5px) rotate(-2deg)}75%{transform:translateY(2.5px) rotate(2deg)}}
/* 1s anticipation, 3.4s smooth rotation, then 2.6s at the same resting angle. */
@keyframes hub-soft-cube{0%,14.286%{transform:rotateX(-24deg) rotateY(-34deg) rotateZ(7deg);animation-timing-function:cubic-bezier(.42,0,.58,1)}62.857%,100%{transform:rotateX(336deg) rotateY(326deg) rotateZ(7deg)}}
.hub-soft-still .hub-soft-art *{animation:none!important}
.hub-soft-still .hub-soft-ball{display:none}
.hub-soft-still .hub-ice-lid{display:none}
:where(html[data-motion="reduced"]) .hub-soft-art *{animation:none!important}:where(html[data-motion="reduced"]) .hub-soft-ball,:where(html[data-motion="reduced"]) .hub-ice-lid{display:none}
@media(max-width:375px){.hub-soft-art{--hub-art-scale:.9}.hub-tile.hub-soft.hub-upgrade>.hub-soft-copy{right:150px}.hub-tile.hub-soft.hub-upgrade strong{font-size:22px}.hub-tile.hub-soft.hub-upgrade small{font-size:10px}.hub-soft-art.hub-upgrade-art{transform:scale(.9);transform-origin:right center}}

/* Mines geometry is the
   approved localhost:8772 study; its reveal/crystal are deliberately absent. */
.hub-current-grid{row-gap:16px}
.hub-current-grid .hub-tile.hub-mines{background:#078ce9 url('/assets/hub-current/MinesCleanOpaqueBackground.webp') center/cover;border-color:#37cffbcc;box-shadow:0 3px 12px #008cf138}
.hub-current-grid .hub-tile.hub-plinko{background:#9c29f5 url('/assets/hub-current/PlinkoCleanOpaqueBackground.webp') center/cover;border-color:#d76cffcc;box-shadow:0 3px 12px #9c29f538}
.hub-current-grid .hub-tile.hub-dice{background:linear-gradient(45deg,#0031fc,#0b68ff 50%,#1787ff 65%,#79cff5);border-color:#77a9ffcc;box-shadow:0 3px 12px #2862fa38}
.hub-current-grid .hub-mines-stage{position:absolute;width:112px;height:112px;top:3px;left:calc(50% - 56px);perspective:420px}
.hub-tile-board{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;transform:rotateX(31deg) rotateZ(-8deg);transform-style:preserve-3d}
.hub-mine-tile{position:relative;border-radius:6px;background:radial-gradient(ellipse,#56efbc,#077bca);box-shadow:0 4px 0 #006cb7,0 6px 5px #00379455;transform-style:preserve-3d}
.hub-tile-lid{position:absolute;inset:0;border-radius:6px;background:linear-gradient(135deg,#d7faff,#74daff 25%,#22a8ec 72%,#087dcb);border:1px solid #b5efff;box-shadow:inset 2px 2px 2px #fff9,inset -2px -2px 3px #007abb88;transform-origin:50% 0;backface-visibility:hidden}
.hub-tile-lid:after{content:'';position:absolute;inset:5px;border:1px solid #e4fbff66;border-radius:2px;background:linear-gradient(145deg,#e5ffff22,transparent)}
.hub-current .hub-pearl,.hub-current .hub-soft-ball{animation:none}
.hub-current .hub-soft-cube-back,.hub-current .hub-soft-cube-light{display:none}
.hub-dice-periphery{position:absolute;inset:0;pointer-events:none;mask:radial-gradient(ellipse 58px 54px at 50% 37%,transparent 96%,#000 100%)}
.hub-dice-backdrop{position:absolute;inset:-8px;pointer-events:none;background:url('/assets/hub-current/DiceCleanOpaqueBackground.webp') center/cover;mask:url('/assets/hub-current/DiceBackdropMask.svg') center/100% 100% no-repeat;transform-origin:50% 50%;animation:hub-dice-background-drift 24s ease-in-out infinite}
.hub-current .hub-cube-stage{top:5px}
.hub-cube-position{position:absolute;inset:0}
.hub-current .hub-cube-position{animation:hub-dice-lift 10s infinite}
.hub-current .hub-cube-rotor{animation:hub-dice-demo-turn 10s infinite}
.hub-current .hub-cube-shadow{animation:hub-dice-shadow 10s infinite}
/* Demo smoothstep (x=t, y=3t²-2t³) expressed exactly as a cubic Bezier.
   Add 0.8s of background anticipation; preserve the demo's 2.35/1.5s turn. */
@keyframes hub-dice-demo-turn{0%,9.667%{transform:rotateX(-24deg) rotateY(-34deg) rotateZ(7deg);animation-timing-function:cubic-bezier(.333333,0,.666667,1)}25.333%,100%{transform:rotateX(336deg) rotateY(326deg) rotateZ(7deg)}}
@keyframes hub-dice-lift{0%,8%,27.333%,100%{transform:translateY(0);animation-timing-function:cubic-bezier(.333333,0,.666667,1)}11%,22%{transform:translateY(-4px);animation-timing-function:cubic-bezier(.333333,0,.666667,1)}}
@keyframes hub-dice-shadow{0%,8%,27.333%,100%{transform:scale(1);opacity:1}11%,22%{transform:scale(.86);opacity:.72}}
@keyframes hub-dice-background-drift{0%,100%{transform:translate(-5px,3px) rotate(-8deg) scale(1.06)}25%{transform:translate(4px,-4px) rotate(0deg) scale(1.08)}50%{transform:translate(6px,2px) rotate(8deg) scale(1.06)}75%{transform:translate(-3px,5px) rotate(0deg) scale(1.08)}}
.hub-soft-still .hub-dice-backdrop{animation:none}
:where(html[data-motion="reduced"]) .hub-dice-backdrop{animation:none}
.hub-current-grid .hub-soft-ball{display:block}
.hub-deferred{margin:20px 0;color:#b2c7e8}
.hub-card.mines{background:linear-gradient(120deg,#15beef,#0566e6);--tilt:-8deg;--lift:4px;transform:rotate(-8deg) translateY(4px)}
.hub-card.plinko{background:linear-gradient(120deg,#b639fe,#6814d9)}
.hub-card.dice{background:linear-gradient(120deg,#71b7ff,#1d58ef);--tilt:9deg;--lift:4px;transform:rotate(9deg) translateY(4px)}
.hub-banner-art{display:block;position:relative;width:52px;height:52px;pointer-events:none}
.hub-banner-art>.hub-mines-stage{position:absolute;width:112px;height:112px;left:-30px;top:-30px;transform:scale(.44);perspective:420px}
.hub-banner-art>.hub-soft-board{left:-49px;top:-23px;transform:scale(.36)}
.hub-banner-art>.hub-pearl-field{left:-43px;top:-22px;transform:scale(.36)}
.hub-banner-art img{object-fit:contain}
.hub-banner-art>img{width:52px;height:52px}
.hub-banner-art .hub-soft-ball,.hub-banner-art .hub-pearl{animation:none}

/* Restored gift-game cards use the compact five-card showcase composition. */
.hub-current.hub-craft .hub-soft-gift,.hub-upgrade-compact .hub-soft-art *{animation:none}
.hub-current-grid .hub-tile.hub-upgrade-compact{grid-column:auto;height:171px;border-radius:18px}
.hub-current-grid .hub-tile.hub-upgrade-compact>.hub-soft-copy{left:15px;right:4px;top:120px}
.hub-current-grid .hub-tile.hub-upgrade-compact strong{font-size:22px;line-height:26px}
.hub-current-grid .hub-tile.hub-upgrade-compact small{font-size:10px;margin-top:1px}
.hub-upgrade-compact .hub-soft-halo{left:68px;top:-8px;transform:scale(.86);transform-origin:top left}
.hub-upgrade-compact .hub-soft-orbit{left:82px;top:14px;transform:scale(.81,.935);transform-origin:top left}
.hub-upgrade-compact .hub-soft-cap-shadow{left:9px;top:106px;transform:scale(.893,.875);transform-origin:top left}
.hub-upgrade-compact .hub-soft-cap{left:6px;top:58px;width:54px;height:54px}
.hub-upgrade-compact .hub-soft-peach{left:88px;top:22px;width:76px;height:76px}
.hub-upgrade-compact .hub-soft-arrow{left:60.45px;top:59px}