.account-loading > main,.account-loading > header,.account-loading > .world { display:none!important; }
#account-gate { position:fixed; inset:0; z-index:100; display:grid; place-content:center; justify-items:center; padding:24px; background:#10151b url('assets/start-background.png') center/cover no-repeat; font-family:'Barlow Condensed',sans-serif; color:#fff0de; }
#account-gate>img { width:200px; margin-bottom:30px; }
#account-gate form { width:min(360px,85vw); text-align:center; }
#account-gate [hidden] { display:none!important; }
#account-gate.is-loading #enter-game[hidden] { display:block!important; visibility:hidden; pointer-events:none; }
#account-gate label { display:block; font-size:24px; margin:14px 0; }
#account-gate input { box-sizing:border-box; width:100%; padding:14px; color:#fff; background:#141923; border:2px solid #566077; border-radius:5px; font:22px 'Barlow Condensed',sans-serif; }
#account-gate button,#reveal-code { display:block; width:100%; padding:14px 24px; margin-top:15px; border:2px solid #ff343b; border-radius:5px; background:#aa0d13; color:#fff0de; text-transform:uppercase; font:700 22px 'Barlow Condensed',sans-serif; cursor:pointer; }
#account-gate #enter-game { width:180px; }
#account-gate .account-secondary { background:#141923; border-color:#566077; font-size:18px; }
#account-gate button:disabled { opacity:.5; cursor:wait; }
#account-gate [role=status] { min-height:24px; line-height:24px; max-width:360px; text-align:center; font-size:19px; }
.account-settings { border-top:1px solid #566077; margin-top:20px; padding-top:12px; }
.account-settings p { font-size:15px; }
#recovery-output { display:block; margin:18px 0; font:20px monospace; overflow-wrap:anywhere; user-select:all; }
#recovery-output[hidden] {display:none;}
/* Transparent stage: only the illustrated tokens cover the scene. */
.token-transition { position:fixed; inset:0; z-index:1000; overflow:hidden; pointer-events:all; }
.transition-wave { position:absolute; top:0; left:0; max-width:none; will-change:transform; transition:none!important; animation:none!important; }

/* Top-layer cover also crosses modal screens without being hidden by them. */
dialog.token-transition { width:100vw; height:100dvh; max-width:none; max-height:none; margin:0; padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; animation:none; }
dialog.token-transition::backdrop { background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; }
/* Quiet courtyard entry, with the same slow clouds behind opaque masonry. */
#account-gate { background:#378cdd; isolation:isolate; overflow:auto; }
.entry-scenery { position:absolute; inset:0; overflow:hidden; z-index:-1; pointer-events:none; }
.entry-stage { position:absolute; left:50%; top:50%; width:max(100vw,175dvh); height:max(100dvh,57.143vw); transform:translate(-50%,-50%); background:#378cdd; }
.entry-buildings { position:absolute; inset:0; width:100%; height:100%; }
.entry-clouds { position:absolute; top:-3%; left:0; width:200%; height:100%; display:flex; animation:entry-cloud-drift 200s linear infinite; }
.entry-clouds img { width:50%; height:100%; max-width:none; flex:0 0 50%; object-fit:contain; }
@keyframes entry-cloud-drift { from { transform:translateX(-50%); } to { transform:translateX(0); } }
#account-gate>img { width:clamp(210px,23vw,350px); margin-bottom:32px; }
#account-gate button { border:0; border-radius:2px; background:#fff5df; color:#151922; font-weight:600; box-shadow:none; transition:background-color .16s,color .16s; }
#account-gate #enter-game { display:flex; align-items:center; justify-content:center; gap:16px; min-height:50px; }
#enter-game .nav-icon { width:22px; height:22px; filter:invert(24%) sepia(99%) saturate(3269%) hue-rotate(337deg) brightness(103%) contrast(103%); }
#account-gate button:hover { background:#e52b3f; color:#fff; }
#enter-game:hover .nav-icon { filter:brightness(0) invert(1); }
#account-gate button:focus-visible { outline:2px solid #151922; outline-offset:4px; }
#account-gate .account-secondary { background:#191c23; color:#fff5df; }
#account-gate [role=status],#account-gate label { color:#191c23; }
@media(prefers-reduced-motion:reduce) { .entry-clouds { animation:none; } }
.reduce-motion .entry-clouds { animation:none; }
/* Reserve the exact ready-button layout throughout loading. */
#account-gate.is-loading #enter-game[hidden] { display:flex!important; }
/* Front-facing tokens occupy the play button slot, keeping the logo still. */
.entry-action-slot { position:relative; display:grid; place-items:center; width:180px; height:54px; margin-top:15px; }
#account-gate .entry-action-slot #enter-game { margin:0; height:54px; }
.entry-token-loader { position:absolute; inset:0 -24px; display:none; align-items:center; justify-content:center; gap:12px; pointer-events:none; }
.is-loading .entry-token-loader { display:flex; }
.loading-coin { flex:0 0 32px; height:32px; border-radius:50%; background:#ee293e; border:2px solid #711420; box-shadow:inset 0 2px 0 #ffffff38,0 3px 0 #00000020; opacity:0; transform:translateY(-12px) scale(.75); }
.loading-coin.loader-gold { background:#ffcc26; border-color:#986613; }
.loading-coin.is-loaded { opacity:1; transform:none; animation:entry-coin-arrive .42s cubic-bezier(.2,.7,.3,1) both; }
@keyframes entry-coin-arrive {
 from { opacity:0; transform:translateY(-14px) scale(.8); }
 65% { opacity:1; transform:translateY(2px) scale(1.04); }
 to { opacity:1; transform:translateY(0) scale(1); }
}
@media(prefers-reduced-motion:reduce) { .loading-coin.is-loaded { animation:none; } }
.reduce-motion .loading-coin.is-loaded { animation:none; }
#account-gate:not(.is-loading) .entry-action-slot:has(#enter-game[hidden]) { display:none; }