.game-welcome { box-sizing: border-box; position: relative; width: min(100%,760px); margin: 0 auto; padding-bottom: 130px; background: #041b30; }
.game-welcome-art { display: block; width: 100%; height: auto; }
.game-welcome-actions { box-sizing: border-box; position: fixed; z-index: 20; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%,760px); padding: 22px 24px max(14px,env(safe-area-inset-bottom)); background: linear-gradient(transparent,#031a30 30%); text-align: center; }
.game-welcome-start { display: flex; justify-content: center; align-items: center; gap: 24px; width: min(100%,420px); min-height: 62px; margin: 0 auto; border: 2px solid #ffe39b; border-radius: 999px; background: linear-gradient(#ffe396,#efb844); color: #082140; box-shadow: 0 5px 0 #9b631d,0 8px 24px #0006; font-size: clamp(20px,4vw,27px); font-weight: 800; text-decoration: none; transition: transform .2s,filter .2s; }
.game-welcome-start:hover { filter: brightness(1.08); transform: translateY(-2px); }
.game-welcome-start:active { transform: translateY(2px); }
.game-welcome-back { display: inline-block; padding: 8px; margin-top: 12px; color: #fbe5b0; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.game-welcome-actions a:focus-visible { outline: 3px solid white; outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .game-welcome-start { transition: none; transform: none; } }

/* Province intro: gentle atmosphere without moving the artwork or its text. */
.province-intro { overflow: hidden; }
.province-intro .game-welcome-art { animation: province-reveal .7s ease-out both; }
.province-sparkles { position: absolute; inset: 0 0 130px; pointer-events: none; overflow: hidden; }
.province-sparkles span { position: absolute; left: var(--left); top: var(--top); width: var(--size); height: var(--size); border-radius: 50%; background: #fff4b3; box-shadow: 0 0 8px 2px #ffdc7680; opacity: 0; animation: province-drift 5s ease-in-out var(--delay) infinite; }
.province-intro .game-welcome-start { position: relative; overflow: hidden; isolation: isolate; animation: province-button-glow 3s ease-in-out infinite; }
.province-intro .game-welcome-start::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg,transparent 30%,#fff9 50%,transparent 70%); transform: translateX(-130%); animation: province-shine 4.5s ease-in-out 1s infinite; }
.province-intro .game-welcome-start span { transition: transform .2s ease; }
@media (hover: hover) and (pointer: fine) {
 .province-intro .game-welcome-start:hover { transform: translateY(-3px) scale(1.025); }
 .province-intro .game-welcome-start:hover span { transform: translateX(5px); }
 .province-intro .game-welcome-back:hover { color: white; }
}
.province-intro .game-welcome-start:active { transform: translateY(2px) scale(.97); }
@keyframes province-reveal { from { opacity: .4; } to { opacity: 1; } }
@keyframes province-drift { 0%,100% { opacity: 0; transform: translate(0,14px) scale(.5); } 40% { opacity: .8; } 75% { opacity: .3; transform: translate(12px,-45px) scale(1); } }
@keyframes province-shine { 0%,65% { transform: translateX(-130%); } 90%,100% { transform: translateX(130%); } }
@keyframes province-button-glow { 0%,100% { box-shadow: 0 5px 0 #9b631d,0 8px 24px #0006; } 50% { box-shadow: 0 5px 0 #9b631d,0 0 26px #ffd56b65; } }
@media (prefers-reduced-motion: reduce) {
 .province-intro .game-welcome-art, .province-intro .game-welcome-start, .province-intro .game-welcome-start::before { animation: none; }
 .province-sparkles { display: none; }
 .province-intro .game-welcome-start:hover, .province-intro .game-welcome-start:active, .province-intro .game-welcome-start:hover span { transform: none; }
 .province-intro .game-welcome-start span { transition: none; }
}