/* =============================================================
   portal.css — the landing portal ("/"): patch screen, locked one-screen layout, a world with real ground depth, login card on the left,
   an adventuring-party group photo (four Summoner + Pixelmon pairs, two stepped rows) on the lower right, official logo with FX.
   Loaded after home.css (which still styles the shared header, buttons, auth forms and the Game Guide cards).
   ============================================================= */
html.portal-html, html.portal-html body.portal-page { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
body.portal-page { display: flex; flex-direction: column; background: #0b1630; }
body.portal-page.booting { overflow: hidden; }

/* ---------------------------------------------------------------- 1 · patch / loading screen */
.boot { position: fixed; inset: 0; z-index: 100010; display: grid; place-items: center; padding: 20px; background: radial-gradient(ellipse at 50% 40%, #1b2d63 0%, #0a1230 62%, #050914 100%); transition: opacity .6s ease, visibility .6s; }
.boot[hidden] { display: none; }
.boot.out { opacity: 0; visibility: hidden; }
.boot-inner { width: min(560px, 100%); text-align: center; }
.boot-logo { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 18px; }
.boot-logo .l1 { font-family: var(--pix); font-size: clamp(22px, 5vw, 38px); color: #fff; letter-spacing: 3px; text-shadow: 0 3px 0 #9c1f4e, 0 0 24px rgba(255, 207, 74, .45); }
.boot-logo .l2 { font-family: var(--pix); font-size: clamp(12px, 2.4vw, 18px); color: var(--gold); letter-spacing: 12px; text-shadow: 0 2px 0 #5a3a10; }
.logo-img.boot-logo-img { width: min(460px, 78vw); max-height: 34vh; object-fit: contain; margin: 0 auto 24px; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .6)) drop-shadow(0 0 26px rgba(90, 170, 255, .45)); animation: logoPulse 4.2s ease-in-out infinite, pFloat 5.5s ease-in-out infinite; }
.boot-track { height: 14px; border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .6), 0 0 0 1px rgba(160, 200, 255, .25); overflow: hidden; }
.boot-track i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #3fd8c4, #ffe18a 70%, #ff9a4a); box-shadow: 0 0 16px rgba(255, 225, 138, .7); position: relative; }
.boot-track i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%); animation: bootShine 1.4s linear infinite; }
.boot-row { display: flex; justify-content: space-between; margin-top: 12px; font-size: 14.5px; color: #c9d8f5; }
.boot-row b { color: #fff; font-family: var(--pix); font-size: 13px; letter-spacing: 1px; }
.boot-tip { margin: 26px 0 0; color: #8fa6d0; font-size: 13.5px; min-height: 1.4em; }
@keyframes bootShine { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes pFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes logoPulse { 0%, 100% { filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .6)) drop-shadow(0 0 16px rgba(90, 170, 255, .3)); } 50% { filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .6)) drop-shadow(0 0 40px rgba(130, 200, 255, .75)); } }

/* ---------------------------------------------------------------- 2 · the world: sky, far landscape, receding ground (the horizon sits at 46 % of the screen) */
.stage { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; --horizon: 46%; }
.stage-sky { position: absolute; inset: 0; background: linear-gradient(180deg, #2f6cc2 0%, #6aa8e6 38%, #bfe0f2 var(--horizon), #8fc08a 100%); }
.stage-far { position: absolute; inset: 0 0 auto 0; height: calc(var(--horizon) + 14%); background: url('/assets/ui/landing-bg-keyart.png') 100% 0 / auto 225% no-repeat; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); filter: saturate(1.05); animation: farDrift 60s ease-in-out infinite alternate; }
@keyframes farDrift { from { background-position: 100% 0; } to { background-position: 97% 3%; } }
.stage-beams { position: absolute; inset: 0 0 40% 0; mix-blend-mode: screen; opacity: .5; }
.stage-beams i { position: absolute; top: -20%; width: 16vw; height: 140%; background: linear-gradient(180deg, rgba(255, 244, 200, .55), rgba(255, 244, 200, 0) 80%); transform: rotate(18deg); filter: blur(10px); animation: beam 14s ease-in-out infinite alternate; }
.stage-beams i:nth-child(1) { left: 38%; } .stage-beams i:nth-child(2) { left: 62%; width: 10vw; animation-delay: -5s; } .stage-beams i:nth-child(3) { left: 84%; width: 13vw; animation-delay: -9s; }
.stage-clouds i { position: absolute; width: 46vw; height: 14vh; border-radius: 50%; background: radial-gradient(ellipse, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 70%); filter: blur(12px); animation: cloud 80s linear infinite; }
.stage-clouds i:nth-child(1) { top: 6%; left: -50vw; } .stage-clouds i:nth-child(2) { top: 18%; left: -50vw; animation-duration: 110s; animation-delay: -45s; opacity: .7; } .stage-clouds i:nth-child(3) { top: 30%; left: -50vw; animation-duration: 140s; animation-delay: -90s; opacity: .5; }
/* the ground: the world art laid flat and tilted away from the viewer, so characters can really stand on it */
.stage-floor { position: absolute; left: 0; right: 0; top: var(--horizon); bottom: 0; overflow: hidden; perspective: 760px; perspective-origin: 50% 0; background: linear-gradient(180deg, #a9cdbd 0%, #6fa56a 30%, #3f7a47 62%, #2b5b38 100%); }
.floor-tex { position: absolute; left: -60%; right: -60%; bottom: -12%; height: 260%; transform-origin: 50% 100%; transform: rotateX(64deg); }
.stage-bg { position: absolute; inset: 0; background-size: 760px auto; background-repeat: repeat; opacity: 0; transition: opacity 3.5s ease; filter: saturate(1.15) brightness(.95); }
.stage-bg.on { opacity: .8; }
.stage-floor::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 46%; z-index: 1; background: linear-gradient(180deg, rgba(196, 222, 232, .55), rgba(196, 222, 232, 0)); }   /* haze at the horizon */
.stage-floor::after { content: ''; position: absolute; inset: auto 0 0 0; height: 34%; z-index: 1; background: linear-gradient(0deg, rgba(5, 14, 30, .55), rgba(5, 14, 30, 0)); }
.stage-wisps i { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, #fff 0%, rgba(160, 255, 230, .9) 30%, rgba(120, 220, 255, 0) 70%); box-shadow: 0 0 18px 6px rgba(140, 240, 220, .55); animation: wisp 16s ease-in-out infinite; }
.stage-wisps i:nth-child(1) { left: 44%; top: 70%; } .stage-wisps i:nth-child(2) { left: 56%; top: 52%; animation-delay: -4s; animation-duration: 19s; } .stage-wisps i:nth-child(3) { left: 68%; top: 78%; animation-delay: -8s; }
.stage-wisps i:nth-child(4) { left: 78%; top: 60%; animation-delay: -2s; animation-duration: 21s; } .stage-wisps i:nth-child(5) { left: 90%; top: 72%; animation-delay: -11s; } .stage-wisps i:nth-child(6) { left: 36%; top: 58%; animation-delay: -6s; animation-duration: 17s; }
.stage-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 62% 55%, rgba(6, 12, 28, 0) 0%, rgba(6, 12, 28, .22) 60%, rgba(4, 8, 20, .7) 100%), linear-gradient(90deg, rgba(6, 12, 30, .62) 0%, rgba(6, 12, 30, .18) 34%, rgba(6, 12, 30, 0) 52%); }
#ambient-particles { position: fixed; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
@keyframes beam { from { opacity: .25; transform: rotate(18deg) translateX(-2vw); } to { opacity: .75; transform: rotate(22deg) translateX(3vw); } }
@keyframes cloud { from { transform: translateX(0); } to { transform: translateX(190vw); } }
@keyframes wisp { 0%, 100% { transform: translate(0, 0) scale(.8); opacity: .25; } 25% { transform: translate(26px, -60px) scale(1.1); opacity: .95; } 50% { transform: translate(-18px, -130px) scale(.9); opacity: .5; } 75% { transform: translate(30px, -200px) scale(1.15); opacity: .9; } }

/* ---------------------------------------------------------------- the cast: every figure stands on the ground (shadow under its feet, aura around it), size follows depth */
.stage-cast { position: absolute; inset: 0; }
.cast { position: absolute; left: var(--x); top: var(--y); height: min(var(--s), var(--cap, 9999px)); transform: translate(-50%, -100%); z-index: var(--z, 5); margin: 0; --aura: rgba(255, 255, 255, .5); }
.cast img { position: relative; z-index: 1; display: block; height: 100%; width: auto; image-rendering: auto; user-select: none; -webkit-user-drag: none; animation: castBob 3.6s ease-in-out infinite; animation-delay: var(--d, 0s); transform-origin: 50% 100%; }
.cast.c-sum { --cap: 320px; } .cast.c-mon { --cap: 256px; }   /* never above the source resolution (portraits 320 px tall, sprites 256 px): scaled-up sprites are what looked blurry */
.cast.flip img { animation-name: castBobFlip; }
.cast::before { content: ''; position: absolute; left: 50%; bottom: -3%; width: 78%; height: 9%; min-height: 7px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .3) 45%, rgba(0, 0, 0, 0) 72%); z-index: 0; }   /* ambient ground shadow */
.cast::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 150%; height: 120%; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 62%, var(--aura) 0%, rgba(255, 255, 255, 0) 62%); opacity: .55; filter: blur(8px); z-index: 0; animation: auraBreath 4.4s ease-in-out infinite; animation-delay: var(--d, 0s); }   /* soft magical aura */
.cast.hover img { animation-name: castHover; }
.cast.hover.flip img { animation-name: castHoverFlip; }
.cast.hover::before { transform: translateX(-50%) scale(.72); }
@keyframes castBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes castBobFlip { 0%, 100% { transform: scaleX(-1) translateY(0); } 50% { transform: scaleX(-1) translateY(-4px); } }
@keyframes castHover { 0%, 100% { transform: translateY(-22px); } 50% { transform: translateY(-30px); } }
@keyframes castHoverFlip { 0%, 100% { transform: scaleX(-1) translateY(-22px); } 50% { transform: scaleX(-1) translateY(-30px); } }
@keyframes auraBreath { 0%, 100% { opacity: .35; } 50% { opacity: .8; } }
/* the party: every member is equally sharp (no blur, no haze); the back row only stands a step higher and slightly behind */
.cast { filter: none; image-rendering: auto; }
.cast.row-f { --aura: rgba(255, 224, 150, .75); }
.cast.row-f::after, .cast.row-b::after { opacity: .5; }
.cast.row-b::before { opacity: .8; }
.cast.aura-fire { --aura: rgba(255, 140, 60, .85); } .cast.aura-volt { --aura: rgba(255, 235, 110, .85); } .cast.aura-sky { --aura: rgba(130, 200, 255, .8); } .cast.aura-warm { --aura: rgba(255, 200, 150, .8); } .cast.aura-cool { --aura: rgba(160, 190, 255, .8); }

/* ---------------------------------------------------------------- header */
.portal-page .topbar { position: sticky; top: 0; z-index: 100002; padding: 6px 24px; min-height: 84px; background: linear-gradient(180deg, rgba(6, 10, 24, .72), rgba(6, 10, 24, 0)); border-bottom: 0; backdrop-filter: none; }
.portal-page .auth-profile-control { z-index: 100003; }
.portal-page .profile-menu-panel { z-index: 100004; }
.portal-page #nav { justify-content: flex-start; }
.portal-page #nav a { font-weight: 700; padding: 6px 12px; border-radius: 999px; background: rgba(8, 14, 34, .5); backdrop-filter: blur(6px); }
.portal-page .icon-btn { width: 40px; height: 40px; padding: 0; justify-content: center; font-size: 18px; border-radius: 50%; }
.portal-page .ghost { background: rgba(8, 14, 34, .55); backdrop-filter: blur(6px); }
.portal-page .logo { height: 76px; flex-direction: row; align-items: center; }
.logo-img.logo-mini { height: 76px; width: auto; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .65)) drop-shadow(0 0 14px rgba(90, 170, 255, .4)); transition: transform .25s; }
.portal-page .logo:hover .logo-img.logo-mini { transform: scale(1.06); }
body.portal-page:not(.no-logo) .logo .l1, body.portal-page:not(.no-logo) .logo .l2 { display: none; }
.logo-fallback { display: contents; }
.logo-img { display: block; width: auto; height: auto; image-rendering: auto; }
body.portal-page:not(.no-logo) .logo-fallback, body.portal-page:not(.no-logo) .logo-text { display: none; }
body.portal-page.no-logo .logo-img, body.portal-page.no-logo .logo-art { display: none; }
body.portal-page.no-logo .logo-text { display: flex; }

/* ---------------------------------------------------------------- 3 · the portal column (left): logo, login / profile card, links — scaled to fit, never scrolls */
.portal { position: relative; z-index: 3; flex: 1 1 auto; min-height: 0; overflow: hidden; display: block; padding: 0 16px 0 clamp(16px, 5vw, 96px); opacity: 0; transform: translateY(10px); transition: opacity .7s ease .1s, transform .7s ease .1s; animation: pReveal .01s linear 7s forwards; pointer-events: none; }
@keyframes pReveal { to { opacity: 1; transform: none; } }
body.portal-page[data-ready="1"] .portal { opacity: 1; transform: none; pointer-events: auto; }
.portal > * { pointer-events: auto; }
.portal-fit { width: min(480px, 100%); margin: 0; display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 1.8vh, 20px); transform-origin: 50% 0; padding-bottom: 6px; }
.p-logo { text-align: center; width: 100%; }
.p-tag { margin: 2px 0 0; color: #f1f6ff; font-size: clamp(14px, 1.6vw, 16px); text-shadow: 0 2px 8px rgba(0, 0, 0, .85); }
/* the logo with FX: aura pulse, a glint sweeping through the letters, twinkling sparkles */
.logo-wrap { position: relative; display: inline-block; max-width: 100%; line-height: 0; animation: pFloat 5.5s ease-in-out infinite; }
.logo-wrap .logo-art { position: relative; z-index: 1; width: min(520px, 100%); max-height: 28vh; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .6)) drop-shadow(0 0 26px rgba(90, 170, 255, .5)); }
.logo-aura { position: absolute; inset: -10% -6% -4%; z-index: 0; background: radial-gradient(ellipse at 50% 55%, rgba(120, 190, 255, .6), rgba(120, 190, 255, 0) 66%); filter: blur(16px); animation: auraPulse 4.6s ease-in-out infinite; }
.logo-glint { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen;
  -webkit-mask: url('/assets/ui/logo-pixelmonster-hd.png') center / contain no-repeat; mask: url('/assets/ui/logo-pixelmonster-hd.png') center / contain no-repeat;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 36%, rgba(255, 255, 255, .95) 50%, rgba(255, 255, 255, 0) 64%) 130% 0 / 260% 100% no-repeat; animation: glint 5.8s ease-in-out infinite; }
.logo-sparks { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.logo-sparks i { position: absolute; width: 18px; height: 18px; opacity: 0; animation: twinkle 3.6s ease-in-out infinite; }
.logo-sparks i::before, .logo-sparks i::after { content: ''; position: absolute; left: 50%; top: 50%; background: #fff; border-radius: 2px; transform: translate(-50%, -50%); box-shadow: 0 0 8px 2px rgba(190, 230, 255, .9); }
.logo-sparks i::before { width: 2px; height: 100%; } .logo-sparks i::after { width: 100%; height: 2px; }
.logo-sparks i:nth-child(1) { left: 14%; top: 24%; } .logo-sparks i:nth-child(2) { left: 31%; top: 14%; animation-delay: -.7s; } .logo-sparks i:nth-child(3) { left: 50%; top: 4%; animation-delay: -1.5s; width: 24px; height: 24px; }
.logo-sparks i:nth-child(4) { left: 69%; top: 16%; animation-delay: -2.2s; } .logo-sparks i:nth-child(5) { left: 87%; top: 26%; animation-delay: -2.9s; } .logo-sparks i:nth-child(6) { left: 40%; top: 72%; animation-delay: -1.1s; width: 14px; height: 14px; } .logo-sparks i:nth-child(7) { left: 63%; top: 76%; animation-delay: -3.1s; width: 14px; height: 14px; }
@keyframes auraPulse { 0%, 100% { opacity: .45; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes glint { 0%, 52% { background-position: 130% 0; } 82%, 100% { background-position: -30% 0; } }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.3) rotate(0deg); } 45% { opacity: 1; transform: scale(1) rotate(45deg); } 70% { opacity: 0; transform: scale(.4) rotate(90deg); } }
.logo-text { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; animation: pFloat 5.5s ease-in-out infinite; }
.logo-text .a { font-family: var(--pix); font-size: clamp(26px, 4vw, 48px); line-height: 1.15; color: #fff; letter-spacing: 3px; text-shadow: 0 4px 0 #9c1f4e, 0 0 30px rgba(255, 207, 74, .5); }
.logo-text .b { font-family: var(--pix); font-size: clamp(13px, 2vw, 20px); color: var(--gold); letter-spacing: clamp(8px, 1.6vw, 16px); text-shadow: 0 2px 0 #5a3a10, 0 0 16px rgba(255, 207, 74, .5); }
.logo-art[hidden] { display: none; }

.p-slot { flex: none; width: min(430px, 100%); }
.portal-page #auth.auth { position: static; z-index: auto; display: block; padding: 0; background: none; backdrop-filter: none; }
.portal-page #auth .auth-x { display: none; }
.portal-page #auth .auth-box { width: 100%; padding: 16px 22px 18px; color: #eaf1ff; background: linear-gradient(160deg, rgba(24, 38, 82, .66), rgba(10, 18, 42, .76)); border: 1px solid rgba(190, 220, 255, .38); border-radius: 22px; box-shadow: 0 24px 70px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .25), 0 0 0 1px rgba(8, 14, 34, .6); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); }
.portal-page #auth .auth-box::before { display: none !important; }
.portal-page #auth .auth-tabs button { background: rgba(255, 255, 255, .08); color: #cfe0ff; border-color: rgba(190, 220, 255, .28); }
.portal-page #auth .auth-tabs button.on { background: linear-gradient(180deg, #ffe9a0, #f0a830); color: #3a2200; border-color: #ffd36e; }
.portal-page #auth label span { color: #b9cdf0; }
.portal-page #auth input { background: rgba(4, 10, 28, .55); color: #fff; border: 1px solid rgba(190, 220, 255, .32); border-radius: 10px; }
.portal-page #auth input:focus { outline: none; border-color: #ffd36e; box-shadow: 0 0 0 3px rgba(255, 211, 110, .25); }
.portal-page #auth .auth-or, .portal-page #auth .auth-note { color: #9fb4d8; } .portal-page #auth .auth-err { color: #ff9aa3; }
.portal-page #auth #auth-submit { width: 100%; justify-content: center; }
body.portal-page[data-portal="in"] #auth { display: none; }
.p-card { animation: cardIn .6s cubic-bezier(.2, 1, .3, 1) both; }
@keyframes cardIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
.p-profile { padding: 24px 24px 22px; text-align: center; color: #eaf1ff; border-radius: 22px; background: linear-gradient(160deg, rgba(24, 38, 82, .66), rgba(10, 18, 42, .78)); border: 1px solid rgba(190, 220, 255, .4); box-shadow: 0 24px 70px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .25); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); }
.p-profile[hidden] { display: none; }
.pi-welcome { margin: 0 0 12px; color: #9fd8ff; font-weight: 700; letter-spacing: .5px; }
.pi-id { display: flex; align-items: center; gap: 16px; justify-content: center; text-align: left; margin-bottom: 14px; }
.pi-avatar { flex: none; width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 35%, #3a58a8, #0c1536 72%); box-shadow: 0 0 0 3px #ffd36e, 0 6px 16px rgba(0, 0, 0, .5); overflow: hidden; }
.pi-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; image-rendering: auto; }
.pi-name { display: block; font-size: 22px; color: #fff; overflow-wrap: anywhere; } .pi-guest { margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: #3d8ee2; font-size: 10px; letter-spacing: 1px; vertical-align: middle; }
.pi-level { display: block; margin-top: 2px; color: #ffe49a; font-size: 14.5px; } .pi-level i { font-style: normal; font-weight: 800; font-size: 17px; color: #fff; }
.pi-list { list-style: none; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin: 0 0 14px; padding: 0; color: #c9d8f5; font-size: 13px; } .pi-list li { padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .09); } .pi-list i { font-style: normal; color: #ffe49a; }
.pi-start { width: 100%; justify-content: center; animation: startPulse 2.4s ease-in-out infinite; }
@keyframes startPulse { 0%, 100% { box-shadow: 0 3px 0 #a86a08, 0 0 0 rgba(255, 211, 110, 0); } 50% { box-shadow: 0 3px 0 #a86a08, 0 0 28px rgba(255, 211, 110, .75); } }
.p-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.p-links .btn { backdrop-filter: blur(6px); }
.portal-page .fb-link { margin: 0; }
.portal-page .me-line { margin: 0; min-height: 1em; color: #ffb6bd; text-align: center; }
.portal-page .foot { position: relative; z-index: 3; flex: none; padding: 5px 12px; font-size: 11.5px; line-height: 1.3; background: rgba(4, 8, 20, .72); }
.portal-page .foot p { margin: 0; } .portal-page .foot p + p { display: none; }
body.portal-page[data-portal="in"] #register-btn { display: none; }
@media (max-height: 900px) { .portal-page #auth .auth-note, .p-tag { display: none; } }

/* ---------------------------------------------------------------- tablets and phones: the column is centred, the cast shrinks to the two hero duos behind it */
@media (max-width: 1100px) { .stage-vignette { background: radial-gradient(ellipse at 50% 55%, rgba(6, 12, 28, 0) 0%, rgba(4, 8, 20, .6) 100%), linear-gradient(90deg, rgba(6, 12, 30, .5), rgba(6, 12, 30, .15) 60%); } }
@media (max-width: 900px) {
  .portal { padding-left: 16px; } .portal-fit { margin: 0 auto; }
  .cast.row-b { display: none; }
  .stage-far { background-size: auto 100%; }
  .cast.pa-s { --x: 84% !important; --s: 27vh !important; } .cast.pa-m { --x: 68% !important; --s: 19vh !important; } .cast.pb-s { --x: 14% !important; --s: 25vh !important; } .cast.pb-m { --x: 29% !important; --s: 17vh !important; }
  .cast.row-f { opacity: .5; }
  .portal-page #auth .auth-box, .p-profile { background: rgba(12, 20, 46, .88); }
}
@media (max-width: 760px) { .portal-page .topbar { min-height: 64px; } .portal-page .logo { display: block; height: 52px; } .logo-img.logo-mini { height: 52px; } .portal-page #nav { display: none; } .portal-page .top-actions { margin-left: auto; } }
@media (prefers-reduced-motion: reduce) {
  .stage-far, .stage-beams i, .stage-clouds i, .stage-wisps i, .logo-wrap, .logo-aura, .logo-glint, .logo-sparks i, .boot-logo-img, .boot-track i::after, .cast img, .cast::after, .pi-start, .p-card { animation: none !important; }
  .logo-sparks { display: none; }
  .portal { transition: none; opacity: 1; transform: none; }
}