/* The welcome screen reaches every edge; buttons stay inside the safe area. */
html.pixplay-intro-active, html.pixplay-intro-active body { overflow: hidden !important; background: #071421 !important; }
html.pixplay-intro-active body > :not(#pixplay-intro):not(#pixplay-boot) { visibility: hidden !important; pointer-events: none !important; }
#pixplay-intro { position: fixed !important; inset: 0 !important; z-index: 2147483647 !important; overflow: hidden; isolation: isolate; display: grid; place-items: center; background: #071421; color: #f4fbff; opacity: 1; visibility: visible !important; font: 500 13px/1.5 Inter, "Segoe UI", sans-serif; transition: opacity .62s cubic-bezier(.22,1,.36,1); }
#pixplay-intro::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 48%, #13486277, transparent 55%), linear-gradient(125deg, #071421, #0a1f32 48%, #071421); }
#pixplay-intro::after { content: ""; position: absolute; width: 66vw; height: 66vw; max-width: 880px; max-height: 880px; border: 1px solid #4084a222; transform: rotate(-24deg); border-radius: 13%; z-index: -1; box-shadow: 0 0 0 60px #285b7e0a, 0 0 0 120px #285b7e07; }
#pixplay-intro .pixpro-intro-stage { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; gap: 27px; padding: max(35px, env(safe-area-inset-top)) 25px max(35px, env(safe-area-inset-bottom)); }
#pixplay-intro .pixpro-intro-eyebrow { color: #7bb8d0; font-size: 9px; font-weight: 650; letter-spacing: .23em; animation: pixpro-intro-caption 1s both; }
#pixplay-intro .pixpro-intro-logo { display: block; width: min(410px, 77vw); height: auto; max-height: 175px; object-fit: contain; animation: pixpro-intro-logo 1.2s cubic-bezier(.15,.7,.25,1) both; }
#pixplay-intro .pixpro-intro-line { height: 2px; width: 135px; background: #244456; overflow: hidden; border-radius: 2px; margin-top: 12px; }
#pixplay-intro .pixpro-intro-line i { display: block; height: 100%; background: #32d5f4; transform-origin: left; animation: pixpro-intro-progress 2.2s cubic-bezier(.22,.7,.28,1) both; }
#pixplay-intro .pixpro-intro-stage p { margin: -10px 0 0; color: #a9c8db; font-size: 12px; letter-spacing: .06em; animation: pixpro-intro-caption 1s .25s both; }
#pixplay-intro .pixplay-intro-controls { position: absolute; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); left: max(24px, env(safe-area-inset-left)); display: flex; justify-content: flex-end; }
#pixplay-intro button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid #537c9170; border-radius: 9px; background: #102a3fcc; color: #c6e4f2; padding: 10px 18px; font: 500 12px/1.4 Inter, "Segoe UI", sans-serif; cursor: pointer; }
#pixplay-intro button:hover { background: #1c455c; border-color: #32d5f4; }
#pixplay-intro button:focus-visible { outline: 2px solid #32d5f4; outline-offset: 4px; }
#pixplay-intro [hidden] { display: none !important; }
#pixplay-intro.pixplay-intro-exit { opacity: 0; pointer-events: none !important; }
@keyframes pixpro-intro-logo { from { opacity: 0; transform: translateY(17px) scale(.96); filter: blur(5px); } to { opacity: 1; transform: translateY(0) scale(1); filter: none; } }
@keyframes pixpro-intro-caption { from { opacity: 0; } to { opacity: 1; } }
@keyframes pixpro-intro-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 600px) { #pixplay-intro .pixpro-intro-stage { gap: 23px; } #pixplay-intro .pixpro-intro-eyebrow { font-size: 8px; } #pixplay-intro::after { width: 120vw; height: 120vw; } }
@media (prefers-reduced-motion: reduce) { #pixplay-intro { transition: opacity .12s linear; } #pixplay-intro .pixpro-intro-logo, #pixplay-intro .pixpro-intro-eyebrow, #pixplay-intro .pixpro-intro-stage p, #pixplay-intro .pixpro-intro-line i { animation: none; } }
.platform-shell .sidebar { padding-top: calc(27px + env(safe-area-inset-top)); }
.platform-shell .topbar { padding-top: calc(15px + env(safe-area-inset-top)); }
body .skip-link:focus { top: calc(12px + env(safe-area-inset-top)); }
body .auth-scene { padding-top: max(clamp(26px,3vw,46px), calc(16px + env(safe-area-inset-top))); }
body .auth-panel { padding-top: calc(80px + env(safe-area-inset-top)); }
@media (max-width: 850px) { body .auth-panel { padding-top: calc(100px + env(safe-area-inset-top)); } body .auth-panel__brand { top: calc(25px + env(safe-area-inset-top)); } body .auth-back { top: calc(43px + env(safe-area-inset-top)); } }
@media (max-width: 620px) { body .auth-panel__brand { top: calc(22px + env(safe-area-inset-top)); } body .auth-back { top: calc(90px + env(safe-area-inset-top)); } }
/* Shared game safe areas retained from the existing platform shell. */
body .candy-platform-header { padding-top: calc(18px + env(safe-area-inset-top)); }
body .fruit-entry { padding-top: calc(30px + env(safe-area-inset-top)); }
body .fruit-game__head { min-height: calc(66px + env(safe-area-inset-top)); padding-top: calc(13px + env(safe-area-inset-top)); }
body.tg-body .tg-header { height: calc(100px + env(safe-area-inset-top)); padding-top: calc(12px + env(safe-area-inset-top)); }
body.tg-body .tg-hud { top: calc(105px + env(safe-area-inset-top)); }
body.tg-body .tg-overlay { padding-top: calc(95px + env(safe-area-inset-top)); }
@media (max-width: 760px) { body .fruit-entry { padding-top: calc(18px + env(safe-area-inset-top)); } }
@media (max-width: 700px) { body .candy-platform-header { padding-top: calc(14px + env(safe-area-inset-top)); } }
@media (max-width: 600px) { body.tg-body .tg-header { height: calc(84px + env(safe-area-inset-top)); padding-top: calc(8px + env(safe-area-inset-top)); } body.tg-body .tg-hud { top: calc(96px + env(safe-area-inset-top)); } body.tg-body .tg-overlay { padding-top: calc(85px + env(safe-area-inset-top)); } }
@media (max-width: 600px) and (max-height: 710px) { body.tg-body .tg-hud { top: calc(83px + env(safe-area-inset-top)); } }