body.is-loading #viewport { visibility: hidden; pointer-events: none; }
body.is-loading #game { background-image: none!important; }
body.is-loading :is(#modal-root,#toasts,#tooltip) { visibility: hidden; }
.asset-loader { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; overflow: auto; padding: 28px 20px; color: #eadbb6; background: radial-gradient(ellipse at 50% 43%, #342217 0%, #1b120c 46%, #100a07 100%); font-family: 'Microsoft YaHei', sans-serif; }
.asset-loader[hidden] { display: none; }
.loader-card { position: relative; width: min(480px,100%); text-align: center; padding: 25px 26px 32px; }
.loader-eyebrow { font: 12px/1.5 Georgia,serif; letter-spacing: 5px; color: #ac9568; margin-bottom: 16px; }
.loader-mascot { position: relative; height: 205px; display: flex; align-items: end; justify-content: center; margin-bottom: 16px; }
.loader-mascot::after { content: ''; position: absolute; bottom: -6px; width: 120px; height: 10px; border-radius: 50%; background: #0006; filter: blur(5px); animation: paw-shadow .85s ease-in-out infinite; }
.loader-mascot img { width: 190px; height: 195px; position: relative; z-index: 1; object-fit: contain; animation: palico-trot .85s ease-in-out infinite; }
.loader-spark { position: absolute; top: 50px; left: calc(50% + 84px); color: #dbc186; font-size: 20px; animation: scout-spark 1.7s ease-in-out infinite; }
.loader-card h1 { font: 600 26px/1.5 'Noto Serif SC',SimSun,serif; letter-spacing: 3px; color: #f0dfb6; margin: 22px 0 8px; }
.loader-copy { font-size: 14px; line-height: 1.8; color: #b9b59d; margin: 0 0 29px; }
.loader-progress-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 9px; font-size: 13px; color: #c9bc99; }
.loader-percent { font: 23px/1.3 Georgia,serif; color: #e5c98c; font-variant-numeric: tabular-nums; }
.loader-track { position: relative; height: 15px; padding: 3px; background: #100a06; border: 1px solid #8e7950; clip-path: polygon(6px 0,calc(100% - 6px) 0,100% 50%,calc(100% - 6px) 100%,6px 100%,0 50%); }
.loader-fill { display: block; height: 100%; width: 0%; background: linear-gradient(90deg,#8b5d32,#bb9759 75%,#e0c485); transition: width .13s linear; }
.loader-details { display: flex; justify-content: space-between; gap: 10px; margin-top: 9px; color: #b39c7e; font-size: 12px; font-variant-numeric: tabular-nums; }
.loader-hint { padding-top: 26px; color: #aaa58b; font-size: 12px; line-height: 1.8; }
.loader-hint::before { content: '◇'; display: block; color: #907a51; font-size: 18px; margin-bottom: 10px; }
.loader-error { margin: 18px 0 0; color: #e5ba99; font-size: 14px; line-height: 1.7; }
.loader-retry { margin-top: 16px; min-height: 44px; padding: 8px 28px; border: 1px solid #ab925d; color: #f1dfb2; background: #59432b; clip-path: polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px); cursor: pointer; }
.loader-retry:focus-visible { outline: 2px solid #eed08d; outline-offset: 3px; }
.loader-card noscript { display: block; color: #e5ba99; line-height: 1.8; margin-top: 20px; }
@keyframes palico-trot { 0%,100% { transform: translateY(0) rotate(-3deg); } 45% { transform: translateY(-12px) rotate(3deg); } 75% { transform: translateY(-3px) rotate(-1deg); } }
@keyframes paw-shadow { 0%,100% { transform: scaleX(1); opacity: .8; } 45% { transform: scaleX(.72); opacity: .4; } }
@keyframes scout-spark { 0%,100% { opacity: .2; transform: scale(.6) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(15deg); } }
@media (max-width:480px) { .loader-card { padding-inline: 4px; } .loader-card h1 { font-size: 23px; } .loader-mascot { height: 180px; } .loader-mascot img { width: 170px; height: 175px; } .loader-details { font-size: 11px; } }
@media (prefers-reduced-motion:reduce) { .loader-mascot img,.loader-mascot::after,.loader-spark { animation: none; } .loader-fill { transition: none; } }