/* Paint the document before the app stylesheet arrives; no default white gutter. */
html{min-height:100%;background:#000;color-scheme:dark}body{margin:0;min-height:100vh}
#village-loading{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;overflow:hidden;background:#000;color:#fff2da;font-family:system-ui,"Malgun Gothic",sans-serif;transition:opacity .3s ease}
#village-loading::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 53%,#17112155,transparent 68%);z-index:1;pointer-events:none}
#village-loading .loading-stage{position:relative;width:min(940px,94vw,132svh);aspect-ratio:3/2;margin-bottom:3svh;isolation:isolate;z-index:2}
#village-loading .loading-ui-art{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;filter:drop-shadow(0 2px 6px #1c123a66)}
#village-loading .loading-track{position:absolute;left:11.75%;right:11.75%;top:81.2%;height:5.3%;border-radius:999px;background:#281d4077;overflow:hidden;z-index:1}
#village-loading .loading-fill{height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#9c7bc6,#d9b8ef 65%,#ffe1a5);box-shadow:0 0 15px #d9b8ef66}
#village-loading .loading-actor{position:absolute;left:0;top:0;pointer-events:none;z-index:3;filter:drop-shadow(0 7px 5px #15102388)}
#village-loading .loading-spark{position:absolute;left:11.75%;top:81.2%;width:12px;height:12px;background:#ffebb9;transform:translate(-50%,-25%) rotate(45deg);box-shadow:0 0 20px #f9d7a5;border-radius:2px;z-index:3}
#village-loading .loading-caption{position:absolute;top:91%;left:5%;width:90%;display:flex;align-items:center;justify-content:center;gap:18px;font-size:clamp(11px,1.65vw,15px);color:#f1e6ff;text-shadow:0 2px 8px #0e0924;letter-spacing:.03em}
#village-loading .loading-percent{font-variant-numeric:tabular-nums;color:#ffe9b5;font-weight:700}
#village-loading .loading-error{position:fixed;bottom:max(16px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(580px,84vw);padding:12px;border-radius:16px;background:#21152ee8;text-align:center;font-size:13px;line-height:1.5;color:#fff1d4;z-index:4}
#village-loading .loading-error[hidden]{display:none}
#village-loading .loading-error p{margin:0 0 10px}
#village-loading .loading-retry{padding:9px 20px;border:1px solid #d9bb85;border-radius:999px;background:#372742;color:#fff0d0;font:inherit;font-weight:600;cursor:pointer}
#village-loading.is-complete{opacity:0;pointer-events:none}
#village-loading .loading-screen-reader{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-height:560px){#village-loading .loading-stage{width:min(800px,94vw,117svh);margin-bottom:7svh}#village-loading .loading-caption{font-size:11px}}
@media(prefers-reduced-motion:reduce){#village-loading{transition:none}}

#village-loading[hidden]{display:none}
#village-startup{position:fixed;inset:0;display:grid;place-content:center;gap:16px;padding:24px;background:#130e20;color:#ede5f5;text-align:center;font:14px/1.6 system-ui,"Malgun Gothic",sans-serif}
#village-startup button{justify-self:center;padding:10px 20px;border:1px solid #a88bbd;border-radius:12px;background:#39274f;color:#fff0cc;cursor:pointer}
#village-startup button[hidden]{display:none}
:is(#village-loading,.login-page,.village-background) .loading-sky,:is(#village-loading,.login-page,.village-background) .loading-sky>i{position:absolute;inset:0;pointer-events:none}
:is(#village-loading,.login-page,.village-background) .loading-sky>i{animation:loading-starlight 5s ease-in-out infinite alternate}
:is(#village-loading,.login-page,.village-background) .loading-sky>i:nth-child(1){background:radial-gradient(circle at 4% 10%,#fff 1.5px,transparent 2.5px),radial-gradient(circle at 41% 39%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 78% 68%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 17% 3%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 54% 32%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 91% 61%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 30% 90%,#fff 1.5px,transparent 2.5px),radial-gradient(circle at 67% 25%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 6% 54%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 43% 83%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 80% 18%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 19% 47%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 56% 76%,#fff 1.5px,transparent 2.5px),radial-gradient(circle at 93% 11%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 32% 40%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 69% 69%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 8% 4%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 45% 33%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 82% 62%,#fff 1.5px,transparent 2.5px),radial-gradient(circle at 21% 91%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 58% 26%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 95% 55%,#fff 0.8px,transparent 1.8px);animation-delay:-1s;animation-duration:5s}
:is(#village-loading,.login-page,.village-background) .loading-sky>i:nth-child(2){background:radial-gradient(circle at 17% 41%,#fff 1.5px,transparent 2.5px),radial-gradient(circle at 54% 70%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 91% 5%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 30% 34%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 67% 63%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 6% 92%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 43% 27%,#fff 1.5px,transparent 2.5px),radial-gradient(circle at 80% 56%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 19% 85%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 56% 20%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 93% 49%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 32% 78%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 69% 13%,#fff 1.5px,transparent 2.5px),radial-gradient(circle at 8% 42%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 45% 71%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 82% 6%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 21% 35%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 58% 64%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 95% 93%,#fff 1.5px,transparent 2.5px),radial-gradient(circle at 34% 28%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 71% 57%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 10% 86%,#fff 0.8px,transparent 1.8px);animation-delay:-3s;animation-duration:6s}
:is(#village-loading,.login-page,.village-background) .loading-sky>i:nth-child(3){background:radial-gradient(circle at 30% 72%,#fff 1.5px,transparent 2.5px),radial-gradient(circle at 67% 7%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 6% 36%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 43% 65%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 80% 94%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 19% 29%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 56% 58%,#fff 1.5px,transparent 2.5px),radial-gradient(circle at 93% 87%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 32% 22%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 69% 51%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 8% 80%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 45% 15%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 82% 44%,#fff 1.5px,transparent 2.5px),radial-gradient(circle at 21% 73%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 58% 8%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 95% 37%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 34% 66%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 71% 95%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 10% 30%,#fff 1.5px,transparent 2.5px),radial-gradient(circle at 47% 59%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 84% 88%,#fff 0.8px,transparent 1.8px),radial-gradient(circle at 23% 23%,#fff 0.8px,transparent 1.8px);animation-delay:-5s;animation-duration:7s}

:is(#village-loading,.login-page,.village-background) .loading-sky>b{position:absolute;width:10px;height:10px;background:#fff;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:loading-starlight 4s ease-in-out infinite alternate}
:is(#village-loading,.login-page,.village-background) .loading-sky>b:nth-of-type(1){left:11%;top:27%;animation-delay:-1s}
:is(#village-loading,.login-page,.village-background) .loading-sky>b:nth-of-type(2){left:88%;top:18%;width:14px;height:14px;animation-delay:-3s}
:is(#village-loading,.login-page,.village-background) .loading-sky>b:nth-of-type(3){left:22%;top:82%;animation-delay:-2s}
:is(#village-loading,.login-page,.village-background) .loading-sky>b:nth-of-type(4){left:79%;top:65%;width:8px;height:8px;animation-delay:-4s}
#village-loading.art-missing .loading-screen-reader{width:90%;height:auto;left:5%;margin:0;clip-path:none;white-space:normal;text-align:center;color:#ffedc9}
#village-loading.art-missing h1{top:18%;font-size:clamp(24px,5vw,54px);text-shadow:0 0 20px #c5aedc66}
#village-loading.art-missing p.loading-screen-reader{top:34%;font-size:clamp(12px,2vw,18px);color:#eee3fc}
#village-loading.art-missing .loading-track{outline:2px solid #dcc596;outline-offset:3px;background:#23192f}
#village-loading.is-paused .loading-sky>*{animation-play-state:paused}
@keyframes loading-starlight{from{opacity:.24}to{opacity:.9}}
@media(prefers-reduced-motion:reduce){:is(#village-loading,.login-page,.village-background) .loading-sky>*{animation:none;opacity:.65}}

#village-loading.art-missing .loading-ui-art{visibility:hidden}

/* The same loading scene can cover an open game-room dialog. */
dialog.game-loading-dialog{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#000;overflow:hidden;box-shadow:none}dialog.game-loading-dialog::backdrop{background:#000}#village-loading .loading-cancel{margin-left:8px;padding:9px 20px;border:1px solid #a18bb7;border-radius:999px;background:transparent;color:#eee2fc;font:inherit;font-weight:600;cursor:pointer}#village-loading .loading-cancel[hidden]{display:none}