:root{--portal-ink:#06111f;--portal-paper:#f4f7fb;--portal-muted:color-mix(in srgb, var(--portal-ink) 58%, white);--portal-live:#0ea5a8;--portal-live-deep:#0b6f78;--portal-host:#e8873a;--portal-host-deep:#c4651f;--portal-hw:#2f9e6e;--portal-hw-deep:#1f7a52;--portal-tycoon:#3b82f6;--portal-tycoon-deep:#1d4ed8;--portal-arena:#8b5cf6;--portal-arena-deep:#6d28d9;--portal-font:"Baloo 2", "Fredoka", "Trebuchet MS", sans-serif;--portal-sans:"Fredoka", "Avenir Next", "Segoe UI", sans-serif;--portal-radius:1.65rem}*,:before,:after{box-sizing:border-box}html,body{min-height:100%;font-family:var(--portal-sans);color:var(--portal-ink);background:var(--portal-ink);margin:0}body.portal-page{background-color:#0000;background-image:radial-gradient(90% 70% at 12% -8%,#0ea5a847 0%,#0000 55%),radial-gradient(70% 55% at 100% 0,#e8873a38 0%,#0000 50%),radial-gradient(55% 45% at 8% 88%,#3b82f629 0%,#0000 50%),radial-gradient(50% 40% at 92% 82%,#8b5cf629 0%,#0000 48%),radial-gradient(80% 60% at 50% 110%,#2f9e6e2e 0%,#0000 45%),linear-gradient(165deg,#07131f 0%,#0a1a2e 48%,#10253a 100%);background-position:0 0,0 0,0 0,0 0,0 0,0 0;background-repeat:repeat,repeat,repeat,repeat,repeat,repeat;background-size:auto,auto,auto,auto,auto,auto;background-attachment:fixed;background-origin:padding-box,padding-box,padding-box,padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box,border-box,border-box,border-box;overflow-x:hidden}.portal-page #rt-root{isolation:isolate;place-items:center;min-height:100dvh;padding:clamp(1.25rem,4vw,2.5rem);display:grid;position:relative}.portal-fx{z-index:0;pointer-events:none;position:absolute;inset:0;overflow:hidden}.portal-fx__shape{opacity:.06;color:#fff;-webkit-user-select:none;user-select:none;font-weight:800;animation:14s ease-in-out infinite portal-drift;position:absolute}.portal-fx__shape--q{font-size:4.5rem;animation-delay:0s;top:12%;left:8%}.portal-fx__shape--bolt{font-size:3.2rem;animation-delay:-3s;top:18%;right:10%}.portal-fx__shape--check{font-size:3rem;animation-delay:-6s;bottom:18%;left:12%}.portal-fx__shape--x{font-size:3.4rem;animation-delay:-9s;bottom:22%;right:14%}.portal-fx__shape--circle{opacity:.045;border:2px solid #fff;border-radius:50%;width:9rem;height:9rem;animation-delay:-2s;top:42%;left:46%}@keyframes portal-drift{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(-12px)rotate(4deg)}}.portal{z-index:1;text-align:center;justify-items:center;gap:clamp(1.5rem,3vw,2.25rem);width:min(74rem,100%);animation:.42s cubic-bezier(.22,1,.36,1) portal-in;display:grid;position:relative}@keyframes portal-in{0%{opacity:0;transform:translateY(18px)scale(.98)}to{opacity:1;transform:none}}.portal__brand{justify-items:center;gap:.55rem;display:grid}.portal__logo{filter:drop-shadow(0 10px 24px #0ea5a859);width:clamp(3.5rem,8vw,4.5rem);height:auto}.portal__title{font-family:var(--portal-font);letter-spacing:-.03em;color:#fff;text-shadow:0 8px 32px #00000059;margin:0;font-size:clamp(2.6rem,8vw,4rem);font-weight:800;line-height:.95}.portal__subtitle{color:#ffffffb8;max-width:28rem;margin:0;font-size:clamp(1rem,2.4vw,1.2rem);font-weight:500}.portal__modes{grid-template-columns:1fr;gap:1rem;width:100%;display:grid}@media (min-width:720px){.portal__modes{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:1.1rem}}@media (min-width:1100px){.mode-card{min-height:17.5rem;padding:1.2rem 1.05rem 1.1rem}}.mode-card{--mode-accent:var(--portal-live);--mode-deep:var(--portal-live-deep);border-radius:var(--portal-radius);min-height:18.5rem;color:inherit;isolation:isolate;background:linear-gradient(160deg, color-mix(in srgb, var(--mode-accent) 22%, #101c2c), #0d1826 58%);border:1px solid color-mix(in srgb, var(--mode-accent) 35%, transparent);grid-template-rows:auto 1fr auto;gap:1rem;padding:1.35rem 1.3rem 1.25rem;text-decoration:none;transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s,border-color .22s,background .22s;display:grid;position:relative;overflow:hidden;transform:translateY(0)scale(1);box-shadow:0 18px 40px #00000047,inset 0 1px #ffffff14}.mode-card--live,.mode-card--join{--mode-accent:var(--portal-live);--mode-deep:var(--portal-live-deep)}.mode-card--host{--mode-accent:var(--portal-host);--mode-deep:var(--portal-host-deep)}.mode-card--homework{--mode-accent:var(--portal-hw);--mode-deep:var(--portal-hw-deep)}.mode-card--tycoon{--mode-accent:var(--portal-tycoon);--mode-deep:var(--portal-tycoon-deep)}.mode-card--arena{--mode-accent:var(--portal-arena);--mode-deep:var(--portal-arena-deep)}.mode-card:before{content:"";pointer-events:none;z-index:1;background:linear-gradient(115deg,#0000 28%,#ffffff24 46%,#0000 62%);transition:transform .7s;position:absolute;inset:0;transform:translate(-120%)}.mode-card:hover,.mode-card:focus-visible{border-color:color-mix(in srgb, var(--mode-accent) 75%, white);box-shadow:0 28px 56px #00000061, 0 0 0 1px color-mix(in srgb, var(--mode-accent) 45%, transparent), 0 0 42px color-mix(in srgb, var(--mode-accent) 35%, transparent);outline:none;transform:translateY(-8px)scale(1.02)}.mode-card:hover:before,.mode-card:focus-visible:before{transform:translate(120%)}.mode-card:hover .mode-card__art,.mode-card:focus-visible .mode-card__art{transform:rotate(3deg)scale(1.06)}.mode-card:hover .mode-card__cta,.mode-card:focus-visible .mode-card__cta{color:var(--mode-deep);box-shadow:0 10px 24px color-mix(in srgb, var(--mode-accent) 35%, transparent);background:#fff}.mode-card__badge{z-index:2;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:color-mix(in srgb, var(--mode-accent) 78%, black);border-radius:999px;justify-self:start;align-items:center;gap:.35rem;padding:.28rem .7rem;font-size:.72rem;font-weight:700;display:inline-flex;position:relative}.mode-card__art{z-index:2;width:4.75rem;height:4.75rem;margin:.15rem auto 0;transition:transform .28s cubic-bezier(.22,1,.36,1);position:relative}.mode-card__art svg,.mode-card__logo,.mode-card__logo img{object-fit:contain;filter:drop-shadow(0 10px 18px #00000047);pointer-events:none;width:100%;height:100%;display:block}.mode-card__body{z-index:2;text-align:left;align-content:start;gap:.55rem;display:grid;position:relative}.mode-card__name{font-family:var(--portal-font);letter-spacing:-.02em;color:#fff;margin:0;font-size:clamp(1.55rem,3vw,1.9rem);font-weight:800;line-height:1}.mode-card__desc{color:#ffffffb8;margin:0;font-size:.95rem;line-height:1.4}.mode-card__perks{border-top:1px solid #ffffff24;gap:.4rem;margin:.35rem 0 0;padding:.75rem 0 0;list-style:none;display:grid}.mode-card__perks li{color:#ffffffd6;align-items:center;gap:.5rem;font-size:.86rem;font-weight:600;display:flex}.mode-card__perk-icon{text-align:center;opacity:.9;width:1.15rem}.mode-card__cta{z-index:2;color:#fff;background:color-mix(in srgb, var(--mode-accent) 88%, black);border-radius:999px;justify-content:center;align-items:center;gap:.4rem;min-height:2.85rem;padding:0 1.1rem;font-size:.95rem;font-weight:700;transition:background .22s,color .22s,box-shadow .22s;display:inline-flex;position:relative}.mode-card__cta-arrow{transition:transform .22s}.mode-card:hover .mode-card__cta-arrow,.mode-card:focus-visible .mode-card__cta-arrow{transform:translate(3px)}body.portal-mode-open{overflow:hidden}.play-mode{z-index:40;-webkit-backdrop-filter:blur(14px);background:#06111f9e;place-items:center;padding:1.25rem;animation:.18s ease-out play-mode-in;display:grid;position:fixed;inset:0}.play-mode[hidden]{display:none}@keyframes play-mode-in{0%{opacity:0}to{opacity:1}}.play-mode__panel{background:radial-gradient(120% 80% at 0 0,#0ea5a829,#0000 55%),linear-gradient(165deg,#122033 0%,#0c1828 100%);border:1px solid #ffffff1a;border-radius:1.5rem;width:min(56rem,100%);max-height:min(92vh,40rem);padding:1.4rem 1.35rem 1.5rem;animation:.22s cubic-bezier(.22,1,.36,1) play-mode-panel;overflow:auto;box-shadow:0 28px 80px #00000073}@keyframes play-mode-panel{0%{opacity:0;transform:translateY(12px)scale(.98)}to{opacity:1;transform:none}}.play-mode__head{text-align:left;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.2rem;display:flex}.play-mode__eyebrow{letter-spacing:.14em;text-transform:uppercase;color:var(--portal-live);margin:0 0 .25rem;font-size:.72rem;font-weight:800}.play-mode__head h2{font-family:var(--portal-font);color:#fff;margin:0;font-size:clamp(1.45rem,3vw,1.9rem);line-height:1.1}.play-mode__sub{color:#ffffffad;margin:.4rem 0 0;font-size:.95rem;line-height:1.4}.play-mode__close{cursor:pointer;color:#ffffffb8;background:#ffffff0f;border:1px solid #ffffff24;border-radius:999px;flex:none;width:2.4rem;height:2.4rem;font-size:1.45rem;line-height:1;transition:color .15s,border-color .15s,transform .15s}.play-mode__close:hover,.play-mode__close:focus-visible{color:#fff;border-color:#fff6;outline:none;transform:scale(1.04)}.play-mode__grid{grid-template-columns:1fr;gap:.9rem;display:grid}@media (min-width:720px){.play-mode__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}.play-mode__tile{--tile-accent:var(--portal-live);border:1px solid color-mix(in srgb, var(--tile-accent) 38%, transparent);background:linear-gradient(160deg, color-mix(in srgb, var(--tile-accent) 22%, #101c2c), #0d1826 62%);color:#fff;text-align:left;border-radius:1.25rem;flex-direction:column;align-items:stretch;gap:.85rem;min-height:16.5rem;padding:1.15rem 1.05rem 1.1rem;text-decoration:none;transition:transform .18s cubic-bezier(.22,1,.36,1),border-color .15s,box-shadow .18s;display:flex;position:relative}.play-mode__tile--live{--tile-accent:var(--portal-live)}.play-mode__tile--tycoon{--tile-accent:var(--portal-tycoon)}.play-mode__tile--arena{--tile-accent:var(--portal-arena)}.play-mode__tile:hover,.play-mode__tile:focus-visible{border-color:color-mix(in srgb, var(--tile-accent) 75%, white);box-shadow:0 18px 40px #00000052, 0 0 28px color-mix(in srgb, var(--tile-accent) 30%, transparent);outline:none;transform:translateY(-4px)scale(1.01)}.play-mode__art{background:color-mix(in srgb, var(--tile-accent) 16%, #ffffff0f);border-radius:1.1rem;place-items:center;width:4.75rem;height:4.75rem;display:grid;box-shadow:inset 0 1px #ffffff1f}.play-mode__logo,.play-mode__logo img{object-fit:contain;pointer-events:none;filter:drop-shadow(0 6px 14px #00000047);width:72px;height:72px;display:block}.play-mode__copy{flex-direction:column;flex:auto;gap:.28rem;display:flex}.play-mode__kicker{letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb, var(--tile-accent) 70%, white);font-size:.68rem;font-weight:800}.play-mode__name{font-family:var(--portal-font);letter-spacing:-.03em;font-size:1.35rem;font-weight:800;line-height:1.15}.play-mode__blurb{color:#ffffffb8;font-size:.9rem;line-height:1.4}.play-mode__cta{color:color-mix(in srgb, var(--tile-accent) 55%, white);margin-top:.2rem;font-size:.88rem;font-weight:700;transition:transform .15s}.play-mode__tile:hover .play-mode__cta,.play-mode__tile:focus-visible .play-mode__cta{transform:translate(3px)}@media (prefers-reduced-motion:reduce){.portal,.portal-fx__shape,.mode-card,.mode-card__art,.mode-card:before,.mode-card__cta,.mode-card__cta-arrow,.play-mode,.play-mode__panel,.play-mode__tile,.play-mode__cta{transition:none!important;animation:none!important}.mode-card:hover,.mode-card:focus-visible,.play-mode__tile:hover,.play-mode__tile:focus-visible,.mode-card:hover:before,.mode-card:focus-visible:before{transform:none}}