/* A miniature city on a collectible board. Scoped to the opening screen. */
:root{color-scheme:dark}
.game-splash{position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;justify-content:space-between;overflow-x:hidden;overflow-y:auto;background:radial-gradient(ellipse at 75% 42%,#16465a80,transparent 49%),#06121e;color:#f4f5ef;font-family:Segoe UI,system-ui,sans-serif;padding:clamp(24px,4vw,56px);box-sizing:border-box;isolation:isolate}
.game-splash::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(115deg,#06121ef5 10%,#06121ecc 50%,#06121e88),url('../assets/city-office-v1.png') center/cover;opacity:.5}
.game-splash::after{content:"";position:absolute;inset:14px;pointer-events:none;border:1px solid #e5c77d17;z-index:-1}
.game-splash[hidden]{display:none}.game-loading .app-shell,.game-loading dialog,.game-loading .toast{visibility:hidden}.game-loading{overflow:hidden!important}
.splash-masthead{display:flex;align-items:center;gap:14px;font-size:8px;line-height:1.9;letter-spacing:1.8px;color:#9eafba;flex-shrink:0}.splash-masthead b{font-weight:500;color:#dfded4}.splash-monogram{display:grid;place-items:center;width:40px;height:44px;border:1px solid #d5b66780;color:#eed59a;font:18px Georgia,serif;letter-spacing:-2px;background:#15314055;clip-path:polygon(0 0,100% 0,100% 83%,50% 100%,0 83%)}
.splash-layout{display:grid;grid-template-columns:.9fr 1.3fr;align-items:center;width:min(1240px,100%);margin:auto;gap:20px;padding:38px 0 44px;flex-shrink:0}.splash-content{position:relative;z-index:2;min-width:0;animation:splash-arrive .8s ease-out both}
.splash-eyebrow{display:flex;align-items:center;gap:10px;font-size:9px;font-weight:600;letter-spacing:2px;color:#d8c18c;margin:0 0 26px}.splash-eyebrow>span{width:22px;height:1px;background:#dbbd74}
.splash-content h1{margin:0;line-height:.85;font-weight:800}.splash-content h1>span{display:block;font-size:clamp(25px,3.4vw,47px);letter-spacing:.32em;margin-left:5px;color:#f1f4f4}.splash-content h1 strong{display:block;font-size:clamp(94px,12vw,164px);font-weight:900;letter-spacing:-.045em;margin:12px 0 0;color:#f0cd77;text-shadow:0 2px 0 #aa8135,0 5px 0 #705020,0 12px 34px #0007}.splash-content h1 strong span{color:#f4eee0}
.splash-tagline{font-size:clamp(22px,2.25vw,30px);font-weight:300;line-height:1.35;letter-spacing:-.6px;margin:30px 0 15px;color:#fbf5e9}.splash-tagline em{font-style:normal;color:#e6ca89}.splash-description{font-size:12px;line-height:1.8;color:#9daebb;margin:0}
.splash-loader{max-width:375px;margin-top:38px}.splash-progress-label{display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:11px;color:#d3dfe5;margin-bottom:13px;line-height:1.5}.splash-progress-label b{font-size:12px;color:#ead097;font-variant-numeric:tabular-nums}.splash-progress{height:4px;border-radius:6px;background:#c6dce41a;overflow:hidden}.splash-progress i{display:block;width:0;height:100%;border-radius:6px;background:linear-gradient(90deg,#a98342,#ffe4a2);box-shadow:0 0 16px #edd39980;transition:width .35s ease}
.splash-footer{display:flex;justify-content:space-between;gap:12px;margin-top:12px;font-size:7px;letter-spacing:1.1px;line-height:1.5;color:#869da9}.splash-footer b{font-size:9px;letter-spacing:.3px;font-weight:400;white-space:nowrap;font-variant-numeric:tabular-nums}.splash-content button{margin:22px 0 0;border:1px solid #dec486;background:#233a43;color:#fff1ce;border-radius:6px;min-height:44px;padding:12px 22px;cursor:pointer;font-size:11px;letter-spacing:1px}.splash-content button:focus-visible{outline:3px solid #fae3a6;outline-offset:4px}.splash-content noscript{display:block;margin:20px 0;color:#edc79a}
.splash-scene{position:relative;width:100%;aspect-ratio:1.15;min-width:0;animation:splash-arrive 1.1s ease-out both;pointer-events:none}.splash-halo{position:absolute;inset:0 -5% 4%;border-radius:50%;background:radial-gradient(ellipse,#dfb76219,transparent 64%);border:1px solid #d1be850c;transform:rotate(-15deg)}.splash-halo::before,.splash-halo::after{content:"";position:absolute;inset:9%;border:1px solid #cfbc8d14;border-radius:50%}.splash-halo::after{inset:20%}
.splash-board{position:absolute;width:70%;aspect-ratio:1;left:15%;top:25%;border:5px solid #d7bd7e;border-radius:9px;background:#dad8b7;transform:perspective(1000px) rotateX(57deg) rotateZ(-29deg);box-shadow:0 7px 0 #897044,0 12px 0 #423f32,0 17px 0 #0a2736,0 30px 35px #0009;overflow:hidden}
.splash-track{display:flex;position:absolute;gap:2px;background:#526559}.splash-track-top,.splash-track-bottom{height:13%;left:0;right:0}.splash-track-top{top:0}.splash-track-bottom{bottom:0;transform:rotate(180deg)}.splash-track-left,.splash-track-right{width:13%;top:13%;bottom:13%;flex-direction:column}.splash-track-left{left:0}.splash-track-right{right:0;transform:rotate(180deg)}.splash-track i{position:relative;flex:1;background:linear-gradient(#269ea0 0 24%,#fff2cf 24%);border:1px solid #344d48}.splash-track i:nth-child(3n){background:linear-gradient(#d19b42 0 24%,#fff2cf 24%)}.splash-track i:nth-child(3n + 2){background:linear-gradient(#357baf 0 24%,#fff2cf 24%)}.splash-track i::after{content:"";position:absolute;left:30%;right:30%;top:51%;height:14%;border-top:2px solid #48584999;border-bottom:2px solid #48584955}.splash-board-inlay{position:absolute;inset:15%;display:grid;place-items:center;border:2px solid #85917b;outline:1px solid #85917b;outline-offset:-7px;background:radial-gradient(#ccdac5,#9aafa0)}.splash-board-inlay span{font:700 90px Georgia,serif;color:#526f6360}
.splash-city{position:absolute;left:0;top:18%;width:100%;height:auto;filter:drop-shadow(0 20px 12px #0007);transform:rotate(-3deg)}
.splash-pawn{position:absolute;width:7%;height:17%;background:linear-gradient(95deg,#795019,#ffe5a0 43%,#bc8529 80%,#684419);clip-path:polygon(32% 0,68% 0,82% 8%,82% 23%,67% 34%,70% 52%,80% 72%,98% 83%,100% 94%,87% 100%,13% 100%,0 94%,2% 83%,20% 72%,30% 52%,33% 34%,18% 23%,18% 8%)}.splash-pawn-gold{left:14%;top:53%;transform:rotate(-10deg)}.splash-pawn-blue{right:9%;top:47%;transform:rotate(9deg) scale(.85);background:linear-gradient(95deg,#124364,#8ad8ea 43%,#2385a9 80%,#09314c)}
.splash-dice{position:absolute;width:11%;aspect-ratio:1;border-radius:19%;background:linear-gradient(135deg,#fff9e8,#dbca9e);border:1px solid #fff5d5;box-shadow:3px 5px 0 #a89771,5px 8px 0 #645d4d,10px 18px 20px #0008;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);gap:10%;padding:1.6%}.splash-dice i{background:#203b45;border-radius:50%;box-shadow:inset 1px 2px 2px #0008}.splash-dice-one{left:34%;top:75%;transform:rotate(-18deg)}.splash-dice-one i:nth-child(2){grid-area:1/3}.splash-dice-one i:nth-child(3){grid-area:2/2}.splash-dice-one i:nth-child(4){grid-area:3/1}.splash-dice-one i:nth-child(5){grid-area:3/3}.splash-dice-two{left:49%;top:80%;transform:rotate(14deg) scale(.85)}.splash-dice-two i:nth-child(2){grid-area:2/2}.splash-dice-two i:nth-child(3){grid-area:3/3}
.splash-scene-caption{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:10px;font-size:7px;letter-spacing:1.7px;color:#b4c3c7}.splash-scene-caption>span{width:5px;height:5px;transform:rotate(45deg);background:#dac185;box-shadow:0 0 14px #dac185}
.splash-bottom{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #d0bea321;padding-top:19px;font-size:8px;letter-spacing:1.8px;color:#99aeb7;line-height:1.8;flex-shrink:0}.splash-bottom i{font-style:normal;color:#c2a46d;margin:0 12px}.splash-bottom>span:last-child{color:#d0bc8e}
@keyframes splash-arrive{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@media(min-width:1600px){.splash-layout{max-width:1400px}.splash-content h1 strong{font-size:180px}.splash-scene{max-width:760px}.splash-tagline{font-size:34px}}
@media(max-width:760px){.game-splash{padding:26px 26px 20px}.splash-masthead{font-size:7px;letter-spacing:1.3px}.splash-monogram{width:32px;height:36px;font-size:15px}.splash-layout{grid-template-columns:1fr;gap:0;padding:30px 0 24px;max-width:440px}.splash-content{text-align:center}.splash-eyebrow{justify-content:center;font-size:7px;letter-spacing:1.5px;margin-bottom:20px}.splash-content h1>span{font-size:26px;letter-spacing:.36em}.splash-content h1 strong{font-size:100px;margin-top:10px}.splash-tagline{font-size:23px;margin:22px 0 10px}.splash-description{font-size:11px}.splash-loader{margin:26px auto 0;text-align:left}.splash-scene{grid-row:2;max-width:330px;justify-self:center;margin-top:4px;aspect-ratio:1.55}.splash-board{width:62%;left:19%;top:9%}.splash-city{top:5%;left:6%;width:88%}.splash-pawn-gold{top:44%;left:19%}.splash-pawn-blue{top:38%;right:15%}.splash-dice-one{top:70%;left:38%;width:10%}.splash-dice-two{top:73%;left:52%;width:10%}.splash-scene-caption{display:none}.splash-bottom{font-size:7px;justify-content:center;letter-spacing:1.5px;padding-top:14px}.splash-bottom>span:last-child{display:none}.splash-footer{font-size:6px}}
@media(max-width:760px) and (max-height:740px){.splash-masthead{display:none}.splash-layout{padding:8px 0 16px}.splash-content h1 strong{font-size:86px}.splash-eyebrow{margin-bottom:16px}.splash-tagline{font-size:21px;margin-top:18px}.splash-description{display:none}.splash-scene{max-width:270px}.splash-loader{margin-top:24px}}
@media(min-width:761px) and (max-height:680px){.game-splash{padding:24px 36px}.splash-layout{max-width:1030px;padding:20px 0}.splash-content h1 strong{font-size:110px}.splash-content h1>span{font-size:32px}.splash-eyebrow{margin-bottom:18px}.splash-tagline{font-size:23px;margin-top:22px}.splash-loader{margin-top:24px}.splash-scene{max-width:530px}.splash-description{font-size:11px}}
@media(prefers-reduced-motion:reduce){.splash-content,.splash-scene{animation:none}.splash-progress i{transition:none}}
