/* Illustrated gates, with text actions floating directly inside each portal. */
.on-hub-home .hub-modes{gap:20px;align-items:stretch}
.on-hub-home .hub-mode.portal-mode{--portal-glow:#edbc6b;position:relative;isolation:isolate;height:368px;min-height:0;display:grid;grid-template-areas:'art' 'title' 'description' 'action';grid-template-rows:64px 32px minmax(0,1fr) 88px;gap:4px;padding:94px 19% 36px;margin:0;background:none;border:0;border-radius:0;box-shadow:none;backdrop-filter:none;overflow:visible;text-align:center}
.on-hub-home .hub-mode.portal-mode.mode-tower{--portal-glow:#79cfff}
.on-hub-home .hub-mode.portal-mode.mode-challenges{--portal-glow:#f4a090}
.on-hub-home .portal-mode:before{content:none;background:none}
.on-hub-home .portal-mode:after{content:'';position:absolute;inset:14% 15% 9%;z-index:-1;pointer-events:none;clip-path:polygon(50% 0,77% 10%,100% 34%,100% 92%,80% 100%,20% 100%,0 92%,0 34%,23% 10%);background:linear-gradient(180deg,#080f241a,#080f247d 42%,#080f24d4 100%)}
.portal-mode .portal-frame{position:absolute;inset:0;z-index:-2;display:block;width:100%;height:100%;object-fit:fill;pointer-events:none;filter:drop-shadow(0 7px 14px #02071985);transition:filter .2s ease}
.on-hub-home .portal-mode .hub-mode-art{grid-area:art;position:static;height:64px;width:100%;margin:0;display:grid;place-items:center;transition:transform .2s ease}
.on-hub-home .portal-mode .hub-mode-art .menu-icon{height:64px;width:150px;max-width:100%;object-fit:contain}
.on-hub-home .portal-mode h2{grid-area:title;align-self:center;font-size:28px;line-height:1.05;letter-spacing:0;color:#fff1db;margin:0;text-shadow:0 2px 6px #03081c}
.on-hub-home .portal-mode p{grid-area:description;align-self:center;max-width:none;color:#f2eaf6;font-size:16px;font-weight:500;line-height:1.4;margin:0;text-shadow:0 1px 5px #03091c}
.on-hub-home .portal-actions{grid-area:action;display:flex;flex-direction:column;justify-content:center;align-items:stretch;min-width:0}
.on-hub-home .portal-mode button{position:relative;display:flex;align-items:center;justify-content:center;gap:5px;min-height:40px;width:100%;max-width:none;margin:0;padding:5px 0;border:0;border-radius:0;background:none;box-shadow:none;color:#ffe0a1;font-size:16px;font-weight:700;line-height:1.3;text-shadow:0 2px 5px #03091c}
.on-hub-home .portal-mode .hub-play:after{content:none}
.on-hub-home .portal-mode .hub-continue{color:#fff4d7;font-weight:800;text-decoration:underline;text-decoration-color:#eec27899;text-underline-offset:5px}
.on-hub-home .portal-mode button:hover:enabled{background:none;border:0;color:#fff9e9;text-shadow:0 0 12px #f9d17a99}
.on-hub-home .portal-mode>button:disabled{grid-area:action;align-self:center;min-height:40px;background:none;border:0;box-shadow:none;color:#e0d7ed;opacity:1;font-size:15px;font-weight:600}
.on-hub-home .portal-mode:focus-within .portal-frame{filter:brightness(1.12) drop-shadow(0 0 11px color-mix(in srgb,var(--portal-glow) 55%,transparent))}
@media(hover:hover) and (pointer:fine){.on-hub-home .portal-mode:hover .portal-frame{filter:brightness(1.1) drop-shadow(0 0 12px color-mix(in srgb,var(--portal-glow) 38%,transparent))}.on-hub-home .portal-mode:hover .hub-mode-art{transform:translateY(-3px)}}
@media(min-width:761px) and (max-height:740px){.on-hub-home .hub-mode.portal-mode{height:324px;padding-top:82px;padding-bottom:29px;grid-template-rows:52px 28px minmax(0,1fr) 88px}.on-hub-home .portal-mode .hub-mode-art,.on-hub-home .portal-mode .hub-mode-art .menu-icon{height:52px}.on-hub-home .portal-mode h2{font-size:25px}.on-hub-home .portal-mode p{font-size:15px}}
@media(min-width:761px) and (max-height:620px){.on-hub-home .hub-logo{height:90px}.on-hub-home .hub-heading{margin-bottom:10px}.on-hub-home .hub-mode.portal-mode{height:258px;padding:63px 18% 22px;grid-template-rows:44px 28px 0 88px;gap:3px}.on-hub-home .portal-mode p{display:none}.on-hub-home .portal-mode .hub-mode-art,.on-hub-home .portal-mode .hub-mode-art .menu-icon{height:44px}.on-hub-home .portal-mode h2{font-size:22px}.on-hub-home .hub-heading>p{display:none}}
@media(max-width:760px){.on-hub-home .hub-modes{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.on-hub-home .hub-heading>p{display:none}.on-hub-home .hub-logo{height:104px}.on-hub-home .hub-heading{margin-bottom:12px}.on-hub-home .hub-mode.portal-mode{height:324px;padding:83px 12% 26px;grid-template-rows:60px 42px minmax(0,1fr) 96px;gap:4px}.on-hub-home .portal-mode .hub-mode-art{position:static;width:100%;height:60px;margin:0}.on-hub-home .portal-mode .hub-mode-art .menu-icon{width:78px;height:60px;max-width:100%}.on-hub-home .portal-mode h2{font-size:19px;line-height:1.03;align-self:center;overflow-wrap:normal}.on-hub-home .portal-mode p{display:none}.on-hub-home .portal-mode button,.on-hub-home .portal-mode>button:disabled{font-size:14px;line-height:1.3;padding:4px 0;min-height:44px;width:100%;max-width:none;overflow-wrap:normal}.on-hub-home .portal-mode .hub-play{gap:3px;flex-wrap:wrap}.on-hub-home .hub-home-note{margin-top:13px}}
@media(max-width:760px) and (max-height:620px){.on-hub-home .hub-logo{height:88px}.on-hub-home .hub-mode.portal-mode{height:300px;padding-top:77px;padding-bottom:23px;grid-template-rows:52px 40px minmax(0,1fr) 96px;gap:3px}.on-hub-home .portal-mode .hub-mode-art,.on-hub-home .portal-mode .hub-mode-art .menu-icon{height:52px}.on-hub-home .portal-mode h2{font-size:20px}}
@media(max-width:360px){.on-hub-home .hub-modes{gap:4px}.on-hub-home .portal-mode h2{font-size:19px}.on-hub-home .portal-mode button,.on-hub-home .portal-mode>button:disabled{font-size:13px}}
@media(prefers-reduced-motion:reduce){html:not([data-reduce-motion=false]) .portal-mode .portal-frame,html:not([data-reduce-motion=false]) .on-hub-home .portal-mode .hub-mode-art{transition:none}html:not([data-reduce-motion=false]) .on-hub-home .portal-mode:hover .hub-mode-art{transform:none}}