.game-entry-pending #app>:not(#loadingScreen){visibility:hidden!important}[data-world-loading-blocked],[data-world-loading-blocked] *{visibility:hidden!important;pointer-events:none!important}
#app #loadingScreen{--story-progress:0%;position:fixed;inset:0;z-index:99999;display:block;overflow:hidden;isolation:isolate;background:#101a2b;color:#fff9ee;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s,visibility .18s;font-family:'Segoe UI',Arial,sans-serif;color-scheme:dark;text-align:center}
#app #loadingScreen.is-open{opacity:1;visibility:visible;pointer-events:auto}#app #loadingScreen [hidden]{display:none!important}#app #loadingScreen::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 50% 54%,#08141d88,transparent 62%);pointer-events:none}#app #loadingScreen::after{display:none}
#app #loadingScreen .loading-scenes{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}#app #loadingScreen .loading-scene{position:absolute;inset:0;display:block;opacity:0;background-size:cover;background-position:var(--scene-position,50% 50%);background-repeat:no-repeat;transition:opacity .18s;filter:none;transform:none}#app #loadingScreen .loading-scene.is-visible{opacity:1}#app #loadingScreen:not(.has-story-art) .loading-scene:first-child{background-image:var(--early-loading-art,none);opacity:1}
#app #loadingScreen .loading-scene::before{display:none}#app #loadingScreen .loading-scene.has-drawn-sketch::before{content:'';position:absolute;inset:0;display:block;background-image:var(--scene-sketch);background-size:cover;background-position:inherit;mask-image:linear-gradient(90deg,transparent calc(var(--story-progress) - 2%),#000 calc(var(--story-progress) + 2%));filter:none;transition:mask-position .18s,opacity .18s}#app #loadingScreen.is-ready .loading-scene::before,#app #loadingScreen.is-art-complete .loading-scene::before{opacity:0}
#app #loadingScreen .loading-card{display:block;position:absolute;left:50%;top:calc(50% - 3px);right:auto;bottom:auto;transform:translateX(-50%);width:min(680px,86vw);max-width:none;min-height:0;gap:0;margin:0;padding:0;border:0;background:none;box-shadow:none;border-radius:0;backdrop-filter:none;animation:none;text-align:center}
#app #loadingScreen .loading-progress{display:block;position:relative;width:min(400px,100%);height:6px;margin:0 auto;border:1px solid #ffffff6b;border-radius:4px;overflow:hidden;background:#07151d85;box-shadow:0 1px 9px #0009;box-sizing:border-box}
#app #loadingScreen .loading-progress::before,#app #loadingScreen .loading-progress::after,#app #loadingScreen:not(.has-recovery) .loading-scenes::after{display:none}
#app #loadingScreen #loadingProgressBar{display:block;position:absolute;inset:0;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#b8e8de,#fff2cc);border-radius:3px;transition:transform .18s linear;box-shadow:none}
#app #loadingScreen .loading-advice{display:block;margin:22px 0 0;padding:0;border:0;background:none;box-shadow:none;text-align:center;text-shadow:0 2px 7px #000,0 0 14px #00101c}
#app #loadingScreen #loadingTipTitle{display:block;font-size:12px;color:#f7dfac;font-weight:600;line-height:1.4}#app #loadingScreen #loadingTip{margin:10px auto 0;max-width:650px;font-size:16px;line-height:1.5;font-weight:500;color:#fffaf1}
#app #loadingScreen .loading-a11y{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;margin:0!important;padding:0!important;border:0!important}
#app #loadingScreen .loading-failure-label,#app #loadingScreen #loadingFailureReason{display:none}#app #loadingScreen .loading-slow{font-size:11px;line-height:1.5;color:#eee3c6;margin:15px auto 0;text-shadow:0 2px 7px #000}

#app #loadingScreen.has-recovery .loading-scenes::after{content:'';display:block;position:absolute;inset:0;background:#11172c url('/assets/loading/story-r2/porygon-error.png') center/cover no-repeat}
#app #loadingScreen.has-recovery .loading-progress,#app #loadingScreen.has-recovery .loading-advice,#app #loadingScreen.has-recovery #loadingSlow{display:none}
/* Error surface R3: keep the illustration, one explanation and four clear actions. */
#app #loadingScreen.has-recovery .loading-card,#app #loadingScreen.has-recovery #loadingRecovery button,#app #loadingScreen.has-recovery #loadingRecovery a{box-sizing:border-box}
#app #loadingScreen.has-recovery .loading-card{left:55%;top:50%;right:auto;bottom:auto;width:min(480px,39vw);max-width:none;min-height:0;max-height:calc(100svh - 40px);transform:translateY(-50%);display:block;padding:8px!important;margin:0!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;filter:none!important;text-align:left;overflow:auto}
#app #loadingScreen.has-recovery::before{background:linear-gradient(90deg,transparent 32%,#070f2866 53%,#070f28de 76%,#070f28ed)}
#app #loadingScreen.has-recovery .loading-a11y#loadingTitle{position:static!important;width:auto!important;height:auto!important;overflow:visible!important;clip:auto!important;white-space:normal!important;font:600 clamp(28px,2.5vw,36px)/1.16 'Segoe UI',Arial,sans-serif;letter-spacing:-.8px;color:#f7f8ff;text-shadow:none;margin:0 0 16px!important}
#app #loadingScreen.has-recovery #loadingSubtitle{position:absolute!important;width:1px!important;height:1px!important;clip:rect(0,0,0,0)!important;overflow:hidden!important;white-space:nowrap!important;margin:0!important;padding:0!important}
#app #loadingScreen.has-recovery #loadingFailureReason{display:block;margin:0!important;padding:0;font:400 15px/1.65 'Segoe UI',Arial,sans-serif;color:#cbd4e6;text-shadow:0 1px 8px #050c2244;max-width:450px}
#app #loadingScreen.has-recovery #loadingRecovery{display:block;margin:25px 0 0;padding:0;border:0;background:none!important;box-shadow:none!important}
#app #loadingScreen.has-recovery #loadingRecovery .loading-actions{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:10px;align-items:stretch;margin:0;padding:0;border:0}
#app #loadingScreen.has-recovery #loadingRecovery .loading-actions button{display:inline-flex;justify-content:center;align-items:center;gap:8px;min-height:48px;margin:0;padding:11px 15px;border-radius:12px;font:600 13px/1.3 'Segoe UI',Arial,sans-serif;letter-spacing:0;text-decoration:none;box-shadow:none;transition:background .15s,border-color .15s,transform .15s}
#app #loadingScreen.has-recovery #retryWorldConnection{color:#30283c;background:#ffda8a;border:1px solid #ffe2a5}
#app #loadingScreen.has-recovery #retryWorldConnection:hover{background:#ffe5ab;border-color:#ffedc8;transform:translateY(-1px)}
#app #loadingScreen.has-recovery #retryWorldConnection:disabled{opacity:.55;transform:none;cursor:wait}
#app #loadingScreen.has-recovery #cancelWorldConnection{color:#e1e6f4;background:#ffffff08;border:1px solid #d0d9ff33}
#app #loadingScreen.has-recovery #cancelWorldConnection:hover{background:#ffffff13;border-color:#d0d9ff66}
#app #loadingScreen.has-recovery #retryWorldConnection::before,#app #loadingScreen.has-recovery #cancelWorldConnection::before{content:'';display:block;width:16px;height:16px;flex:none;background:currentColor;mask:var(--action-icon) center/contain no-repeat}
#app #loadingScreen.has-recovery #retryWorldConnection{--action-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 7v5h-5M4 17v-5h5'/%3E%3Cpath d='M6.1 6.1A8 8 0 0 1 19.7 11M17.9 17.9A8 8 0 0 1 4.3 13'/%3E%3C/svg%3E")}
#app #loadingScreen.has-recovery #cancelWorldConnection{--action-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 10 9-7 9 7M5 9v11h5v-6h4v6h5V9'/%3E%3C/svg%3E")}
#app #loadingScreen.has-recovery .loading-communities{margin:27px 0 0;padding:20px 0 0;border:0;border-top:1px solid #c2cfee20;background:none!important;box-shadow:none!important}
#app #loadingScreen.has-recovery .loading-communities>p{margin:0 0 11px;padding:0;color:#9faecb;font:400 12px/1.4 'Segoe UI',Arial,sans-serif}
#app #loadingScreen.has-recovery #loadingRecovery .loading-communities nav{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0;padding:0}
#app #loadingScreen.has-recovery #loadingRecovery a.loading-community{display:flex;align-items:center;justify-content:flex-start;gap:10px;min-height:46px;width:auto;min-width:0;margin:0;padding:10px 13px;border:1px solid #c2cfee25;border-radius:11px;color:#dee7fa;background:#ffffff06;box-shadow:none;font:500 13px/1.3 'Segoe UI',Arial,sans-serif;text-decoration:none;transition:background .15s,border-color .15s}
#app #loadingScreen.has-recovery #loadingRecovery a.loading-community:hover{background:#4a9bea18;border-color:#69abf15c}
#app #loadingScreen.has-recovery #loadingRecovery a.loading-community>svg{display:block;width:21px;height:21px;flex:none;color:#76b9ff}
#app #loadingScreen.has-recovery #loadingRecovery a.loading-community-tg>svg{color:#71c9f4}
#app #loadingScreen.has-recovery #loadingRecovery a.loading-community>svg.community-arrow{width:14px;height:14px;margin-left:auto;color:#98abc9}
#app #loadingScreen.has-recovery #loadingRecovery a.loading-community:focus-visible,#app #loadingScreen.has-recovery #loadingRecovery button:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(orientation:portrait){#app #loadingScreen.has-recovery .loading-card{left:6%;top:auto;bottom:max(5%,calc(env(safe-area-inset-bottom) + 12px));width:88%;transform:none;max-height:calc(100svh - 32px)}#app #loadingScreen.has-recovery .loading-a11y#loadingTitle{font-size:28px;margin-bottom:13px!important}#app #loadingScreen.has-recovery #loadingFailureReason{font-size:14px;line-height:1.6}#app #loadingScreen.has-recovery #loadingRecovery{margin-top:21px}#app #loadingScreen.has-recovery .loading-communities{margin-top:23px;padding-top:17px}}
@media(max-width:380px){#app #loadingScreen.has-recovery #loadingRecovery .loading-actions button{font-size:12px;padding:10px 8px;gap:6px}#app #loadingScreen.has-recovery #loadingRecovery a.loading-community{font-size:12px;padding:10px;gap:8px}}
@media(max-height:580px) and (orientation:landscape){#app #loadingScreen.has-recovery .loading-card{left:52%;width:45%;max-height:calc(100svh - 24px)}#app #loadingScreen.has-recovery .loading-a11y#loadingTitle{font-size:26px;margin-bottom:12px!important}#app #loadingScreen.has-recovery #loadingFailureReason{font-size:13px}#app #loadingScreen.has-recovery #loadingRecovery{margin-top:18px}#app #loadingScreen.has-recovery .loading-communities{margin-top:18px;padding-top:15px}}

#app #loadingScreen.has-recovery .loading-card::before,#app #loadingScreen.has-recovery .loading-card::after{display:none!important;content:none!important}
@media(max-width:720px){#app #loadingScreen .loading-scene{background-position:var(--scene-mobile-position,50% 50%)}#app #loadingScreen .loading-progress{width:min(320px,76vw)}#app #loadingScreen #loadingTip{font-size:14px;line-height:1.5}#app #loadingScreen #loadingTipTitle{font-size:11px}}
@media(orientation:portrait){#app #loadingScreen.has-recovery .loading-scenes::after{background-position:13% 35%}#app #loadingScreen.has-recovery::before{background:linear-gradient(transparent 24%,#070f2888 50%,#070f28f2)}}
@media(prefers-reduced-motion:reduce){#app #loadingScreen,#app #loadingScreen *,#app #loadingScreen *::before{animation:none!important;transition:none!important}}

/* One labelled, accessible meter; sketch and paint share the same immutable art pair. */
#app #loadingScreen:not(.has-recovery) .loading-card{top:calc(50% - 5px)}
#app #loadingScreen .loading-meter{position:relative;width:min(420px,100%);margin:0 auto}
#app #loadingScreen .loading-meter-header{position:absolute;left:0;right:0;bottom:calc(100% + 13px);display:flex;align-items:center;justify-content:space-between;gap:16px;color:#fff8e8;text-shadow:0 1px 8px #05121ecc}
#app #loadingScreen .loading-meter-title{display:flex;align-items:center;gap:9px;font:600 14px/1.3 'Segoe UI',Arial,sans-serif}
#app #loadingScreen .loading-meter-title svg{display:block;width:19px;height:19px;flex:none;color:#f8dfac}
#app #loadingScreen .loading-meter #loadingPercent{display:block;position:static;width:auto;height:auto;clip:auto;margin:0;padding:0;font:600 13px/1.3 'Segoe UI',Arial,sans-serif;font-variant-numeric:tabular-nums;color:#f4ead4;letter-spacing:0}
#app #loadingScreen .loading-meter .loading-progress{width:100%;height:10px;border:1px solid #ffffff69;border-radius:6px;background:#07131f9c;box-shadow:0 2px 12px #03101b80;overflow:hidden}
#app #loadingScreen .loading-meter #loadingProgressBar{border-radius:5px;background:linear-gradient(90deg,#9bded2,#f9dc96);box-shadow:0 0 10px #d4edcf44;transition:transform .35s ease-out}
#app #loadingScreen .loading-tip-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:7px;color:#f1dfb8;font:400 11px/1.5 'Segoe UI',Arial,sans-serif}
#app #loadingScreen .loading-tip-meta svg{display:block;width:15px;height:15px;flex:none}
#app #loadingScreen .loading-tip-meta i{font-style:normal;color:#c3cbbf}
#app #loadingScreen .loading-tip-meta #loadingTipTitle{display:inline;margin:0;font:600 11px/1.5 'Segoe UI',Arial,sans-serif;color:#f3e5c7}
#app #loadingScreen #loadingTip{margin-top:10px;font-size:15px;line-height:1.6}
#app #loadingScreen.has-recovery .loading-meter{display:none}
#app #loadingScreen .loading-scene.has-drawn-sketch::before{display:none!important}
#app #loadingScreen .loading-scene.has-drawn-sketch::after{content:'';display:block;position:absolute;inset:0;background-image:var(--scene-color);background-size:cover;background-position:inherit;opacity:1;mask-image:radial-gradient(ellipse farthest-corner at 18% 22%,#000 calc(var(--loading-paint-a,0%) - 2%),transparent var(--loading-paint-a,0%)),radial-gradient(ellipse farthest-corner at 73% 31%,#000 calc(var(--loading-paint-b,0%) - 2%),transparent var(--loading-paint-b,0%)),radial-gradient(ellipse farthest-corner at 42% 74%,#000 calc(var(--loading-paint-c,0%) - 2%),transparent var(--loading-paint-c,0%)),radial-gradient(ellipse farthest-corner at 86% 79%,#000 calc(var(--loading-paint-d,0%) - 2%),transparent var(--loading-paint-d,0%)),radial-gradient(ellipse farthest-corner at 47% 29%,#000 calc(var(--loading-paint-e,0%) - 2%),transparent var(--loading-paint-e,0%)),radial-gradient(ellipse farthest-corner at 12% 78%,#000 calc(var(--loading-paint-f,0%) - 2%),transparent var(--loading-paint-f,0%)),radial-gradient(ellipse farthest-corner at 83% 12%,#000 calc(var(--loading-paint-g,0%) - 2%),transparent var(--loading-paint-g,0%)),radial-gradient(ellipse farthest-corner at 64% 58%,#000 calc(var(--loading-paint-h,0%) - 2%),transparent var(--loading-paint-h,0%));mask-composite:add;transition:--loading-paint-a .5s ease-out,--loading-paint-b .5s ease-out,--loading-paint-c .5s ease-out,--loading-paint-d .5s ease-out,--loading-paint-e .5s ease-out,--loading-paint-f .5s ease-out,--loading-paint-g .5s ease-out,--loading-paint-h .5s ease-out}
#app #loadingScreen.is-ready .loading-scene.has-drawn-sketch::after,#app #loadingScreen.is-art-complete .loading-scene.has-drawn-sketch::after{mask-image:none;transition:none}
@media(max-width:720px){#app #loadingScreen .loading-meter{width:min(340px,84vw)}#app #loadingScreen .loading-meter-title{font-size:13px}#app #loadingScreen #loadingTip{font-size:14px}#app #loadingScreen .loading-tip-meta{font-size:10px}}
@media(prefers-reduced-motion:reduce){#app #loadingScreen .loading-scene.has-drawn-sketch::after,#app #loadingScreen .loading-meter #loadingProgressBar{transition:none!important}}