@import url('./game-loading.css');
.intro-screen{--intro-gold:#e8c78b;--intro-muted:#c6bba4;position:fixed;inset:0;z-index:70;isolation:isolate;overflow:hidden;background:#111513;color:#f5ead4;display:flex;flex-direction:column;font-family:"Segoe UI",Arial,sans-serif;opacity:1;transition:opacity .25s ease;color-scheme:dark}
.intro-screen.intro-leaving{opacity:0;pointer-events:none}
.intro-art,.intro-shade,.intro-haze,.intro-grain,.intro-frame{position:absolute;inset:0;pointer-events:none}
.intro-art{z-index:-6;background:#282c28 url('./world-assets/Breisach-Uebersicht.jpg') center 48%/cover no-repeat;transform:scale(1.015);transition:transform 12s ease-out}
.intro-shade{z-index:-5;background:linear-gradient(180deg,#080f13a8 0%,#0b111449 21%,#0b101235 43%,#0b1112b8 76%,#090e12ed 100%),radial-gradient(ellipse at 50% 31%,transparent 12%,#090e1166 95%)}
.intro-haze{z-index:-4;inset:20% -20% -10%;opacity:.18;filter:blur(35px);background:radial-gradient(ellipse at 30% 63%,#c6bfa11c 0 11%,transparent 38%),radial-gradient(ellipse at 65% 50%,#e7d8b94a,transparent 45%);transform:translateX(0)}
.intro-haze-two{z-index:-3;inset:35% -35% -20%;opacity:.1;transform:translateX(9%);background:radial-gradient(ellipse at 55% 75%,#dad6bd75,transparent 50%)}
.intro-grain{z-index:-2;opacity:.2;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23g)' opacity='.2' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.intro-frame{z-index:-1;inset:23px;border:1px solid #d2bd8240}
.intro-frame::before,.intro-frame::after{content:"";position:absolute;top:-3px;bottom:-3px;width:13px;border-top:5px double #bba16c77;border-bottom:5px double #bba16c77}
.intro-frame::before{left:-3px;border-left:5px double #bba16c77}.intro-frame::after{right:-3px;border-right:5px double #bba16c77}
.intro-topline{height:94px;display:flex;align-items:flex-start;justify-content:space-between;padding:48px 52px 0;gap:20px;flex-shrink:0;color:#e0d4be9c;font-size:9px;letter-spacing:2.5px;line-height:1.6}
.intro-composition{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 32px;text-align:center;transform:translateY(-5px)}
.intro-identity{width:100%;max-width:1010px;text-shadow:0 3px 14px #020707,0 1px 2px #000}
.intro-emblem{position:relative;height:64px;width:110px;margin:0 auto 17px;display:grid;place-items:center;color:#d1ad66}
.intro-emblem span{position:absolute;width:55px;height:55px;border:1px solid #d0af6977;border-radius:50%;box-shadow:0 0 0 5px #c7ab5820,inset 0 0 14px #030909a1}
.intro-emblem::before,.intro-emblem::after{content:"";position:absolute;top:50%;width:45px;height:1px;background:linear-gradient(90deg,transparent,#bd9d56)}
.intro-emblem::before{right:87px}.intro-emblem::after{left:87px;transform:scaleX(-1)}
.intro-emblem i{position:absolute;width:63px;height:63px;transform:rotate(45deg);border:1px solid #bfa16955}
.intro-emblem b{font-size:53px;line-height:1;font-weight:400;text-shadow:0 2px 0 #453017,0 0 23px #080d0d}
.intro-kicker{font-size:9px;letter-spacing:3px;color:#e6d8b7d6;margin:0 0 12px}
.intro-screen h1{font:400 clamp(52px,8.2vw,112px)/1.02 Georgia,"Times New Roman",serif;letter-spacing:.055em;color:#e8c78b;margin:0 -0.055em 16px 0;background:linear-gradient(180deg,#fff0c8 5%,#ebcf96 31%,#b48a42 62%,#f1d499 80%,#a87f3d 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 3px 1px #080908) drop-shadow(0 0 18px #030a0cbb);text-shadow:none}
.intro-subtitle{display:flex;align-items:center;justify-content:center;gap:17px;margin:0;color:#e5d4af;font-size:10px;letter-spacing:3.5px;white-space:nowrap}
.intro-subtitle>span{width:72px;height:1px;background:linear-gradient(90deg,transparent,#c5a86e99)}
.intro-subtitle>span:last-child{transform:scaleX(-1)}
.intro-menu{width:min(100%,360px);margin-top:38px;animation:intro-menu-in .8s ease both}
.intro-invitation{color:#d2c9b5;font:italic 15px/1.5 Georgia,serif;text-shadow:0 2px 7px #000;margin:0 0 20px}
.intro-actions{display:flex;flex-direction:column;gap:9px;width:100%;padding:0 20px}
.intro-button{position:relative;min-height:48px;padding:12px 38px 12px 20px;background:linear-gradient(180deg,#171d1ddd,#0d1414ed);border:1px solid #bda16486;border-radius:1px;color:#e6d6b3;box-shadow:inset 0 0 0 3px #090d0d77,0 4px 15px #0004;font-size:12px;letter-spacing:1.5px;transition:border-color .15s,background .15s,box-shadow .15s}
.intro-button>span{position:absolute;right:18px;top:50%;transform:translateY(-50%);font-size:20px;font-weight:300;color:#d2b67c8c}
.intro-primary{background:linear-gradient(180deg,#493b22ee,#2a2518f5);border:1px solid #dfbc75;color:#fff0cb;box-shadow:inset 0 0 0 3px #100f0c88,inset 0 1px #ffe8a933,0 4px 23px #050909ba;font-size:13px;letter-spacing:2px}
.intro-primary>span{color:#eed19a}
.intro-button:hover:not(:disabled){background:linear-gradient(180deg,#5c4827f5,#302719);border-color:#ffe0a2;filter:none;box-shadow:inset 0 0 0 3px #100f0c88,0 3px 25px #e7c17617}
.intro-button:disabled{opacity:.42}
.intro-help{align-self:center;color:#d9c6a0;background:none;border:none;padding:9px 15px;min-height:36px;font-size:10px;letter-spacing:1.2px}
.intro-help>span{margin-left:8px;color:#a99670}.intro-help:hover:not(:disabled){color:#fff1ce}
.intro-access-note{font-size:10px;line-height:1.5;color:#c5b8a0;margin:8px 0 0}
.intro-status{min-height:16px;font-size:11px;line-height:1.5;color:#f5bc8c;margin:6px 0 0}
.intro-footer{height:74px;flex-shrink:0;display:flex;justify-content:space-between;align-items:center;padding:0 52px 7px;color:#a99f88;font-size:8px;letter-spacing:2px}
.intro-sound{padding:8px 0 8px 14px;background:transparent;border:0;color:#cabb9d;font-size:10px;letter-spacing:.6px;min-height:36px;min-width:85px;white-space:nowrap}
.intro-sound>span{font-size:15px;margin-right:6px;vertical-align:-1px;color:#dbc48b}.intro-sound[aria-pressed="true"]{color:#fff1cf}
.intro-skip{position:absolute;right:50px;bottom:44px;z-index:2;min-height:42px;padding:10px 14px;background:#0c1414ba;border:1px solid #bca6756b;border-radius:1px;color:#e0cfac;font-size:11px;letter-spacing:1px}
.intro-skip>span{margin-left:12px;color:#e6c78b}
.intro-screen button:focus-visible{outline:2px solid #ffe3a1;outline-offset:4px;box-shadow:0 0 0 6px #101b1be6}
.intro-playing .intro-art{animation:intro-camera var(--intro-duration,9.5s) cubic-bezier(.1,.4,.4,1) both}
.intro-playing .intro-haze-one{animation:intro-drift 10s ease-out both}.intro-playing .intro-haze-two{animation:intro-drift 13s ease-out reverse both}
.intro-playing .intro-emblem{animation:intro-logo-in 2s .45s both}.intro-playing .intro-kicker{animation:intro-logo-in 1.8s 1.1s both}
.intro-playing h1{animation:intro-title-in 2.6s 1.3s both}.intro-playing .intro-subtitle{animation:intro-logo-in 1.6s 2.7s both}
.intro-playing .intro-identity{transform:translateY(40px)}
.intro-ready .intro-identity{transform:translateY(0);transition:transform 1s cubic-bezier(.2,.7,.2,1)}
@keyframes intro-camera{from{transform:scale(1.085) translateY(1.5%);filter:brightness(.65)}to{transform:scale(1.015) translateY(0);filter:brightness(1)}}
@keyframes intro-logo-in{from{opacity:0;transform:translateY(10px);filter:blur(3px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes intro-title-in{from{opacity:0;transform:translateY(12px) scale(.96);filter:blur(4px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0) drop-shadow(0 3px 1px #080908) drop-shadow(0 0 18px #030a0cbb)}}
@keyframes intro-menu-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes intro-drift{from{transform:translateX(-6%);opacity:0}35%{opacity:.22}to{transform:translateX(7%);opacity:.13}}
@media(min-width:1500px){.intro-menu{margin-top:45px}.intro-emblem{margin-bottom:22px}.intro-composition{transform:translateY(-15px)}}
@media(max-height:730px) and (min-width:641px){.intro-topline{height:73px;padding-top:41px}.intro-emblem{height:51px;margin-bottom:12px;transform:scale(.85)}.intro-kicker{margin-bottom:9px}.intro-screen h1{font-size:clamp(60px,8vw,100px);margin-bottom:12px}.intro-menu{margin-top:24px}.intro-invitation{margin-bottom:15px}.intro-footer{height:56px}.intro-status{margin-top:2px}.intro-button{min-height:44px}.intro-actions{gap:7px}.intro-help{min-height:30px;padding:6px 15px}}
@media(max-width:640px){.intro-frame{inset:15px}.intro-topline{padding:36px 31px 0;height:90px;font-size:7px;letter-spacing:1.6px;gap:15px}.intro-topline>span:first-child{max-width:110px}.intro-topline>span:last-child{text-align:right;max-width:100px}.intro-composition{padding:0 24px;transform:translateY(-8px)}.intro-art{background-position:53% 46%}.intro-shade{background:linear-gradient(180deg,#080f13a8 0%,#0b111459 23%,#0b10124d 41%,#0b1112b8 70%,#090e12f5 100%),radial-gradient(ellipse at 50% 31%,transparent 12%,#090e1166 95%)}.intro-emblem{margin-bottom:22px}.intro-kicker{font-size:7px;letter-spacing:2.1px;margin-bottom:13px}.intro-screen h1{font-size:clamp(37px,10.4vw,67px);letter-spacing:.035em;margin-right:-.035em;margin-bottom:17px}.intro-subtitle{font-size:7px;letter-spacing:2.1px;gap:9px}.intro-subtitle>span{width:25px}.intro-menu{margin-top:48px;max-width:330px}.intro-invitation{font-size:13px;margin-bottom:22px}.intro-actions{padding:0 11px;gap:11px}.intro-button{min-height:49px;font-size:11px}.intro-primary{font-size:12px}.intro-help{font-size:10px;min-height:42px}.intro-access-note{font-size:9px}.intro-footer{height:80px;padding:0 31px 15px;gap:13px;font-size:6px;letter-spacing:1.4px}.intro-footer>span{max-width:155px;line-height:1.7}.intro-sound{font-size:9px;min-width:78px}.intro-skip{right:30px;bottom:39px;font-size:10px}.intro-playing .intro-identity{transform:translateY(28px)}}
@media(max-height:660px) and (max-width:640px){.intro-topline{height:65px;padding-top:29px}.intro-emblem{height:45px;transform:scale(.7);margin-bottom:13px}.intro-menu{margin-top:23px}.intro-screen h1{margin-bottom:11px}.intro-kicker{margin-bottom:8px}.intro-footer{height:55px;padding-bottom:6px}.intro-invitation{margin-bottom:13px}.intro-actions{gap:7px}.intro-button{min-height:42px}.intro-help{min-height:30px;padding:5px}.intro-status{min-height:12px;font-size:10px}}
@media(max-height:460px) and (min-width:641px){.intro-topline{height:45px;padding-top:24px}.intro-frame{inset:12px}.intro-composition{display:grid;grid-template-columns:1fr 1fr;gap:40px;padding:0 50px;transform:none}.intro-screen h1{font-size:clamp(36px,5.8vw,70px)}.intro-emblem{margin-bottom:8px}.intro-menu{margin:0;max-width:320px}.intro-invitation{font-size:12px}.intro-subtitle{font-size:7px;letter-spacing:1.5px;gap:8px}.intro-subtitle>span{width:30px}.intro-footer{height:40px;padding-bottom:0}.intro-playing .intro-identity{grid-column:1/-1;transform:none}.intro-skip{bottom:20px;right:30px}}
@media(prefers-reduced-motion:reduce){.intro-screen,.intro-screen *{animation:none!important;transition:none!important}.intro-art{transform:none}.intro-haze{display:none}.intro-ready .intro-identity{transform:none}}
.intro-footer{gap:24px}
.intro-audio{display:flex;align-items:center;justify-content:center;gap:14px;margin-left:auto}
.intro-developer{display:flex;align-items:center;justify-content:center;flex:0 0 110px;width:110px;height:32px;overflow:hidden;padding:0;border:0;background:transparent;cursor:pointer;border-radius:2px;transform:translateY(-8px);opacity:.6;filter:saturate(.65)}
.intro-developer img{display:block;flex:0 0 auto;width:130px;max-width:none;height:auto}
.intro-developer[hidden]{display:none}
.intro-developer:hover{background:transparent;opacity:.9}
.intro-developer:focus-visible{outline:1px solid var(--intro-gold);outline-offset:3px}
@media(min-width:641px) and (max-width:960px){.intro-footer{height:96px;display:grid;grid-template-columns:1fr 110px;grid-template-areas:"tag brand" "audio brand";gap:0 20px}.intro-footer>span{grid-area:tag;align-self:end}.intro-audio{grid-area:audio;margin-left:0;justify-content:flex-start}.intro-developer{grid-area:brand;width:110px;height:32px}.intro-developer img{width:130px}}
@media(max-width:640px){.intro-footer{display:grid;grid-template-columns:1fr 100px;grid-template-areas:"tag brand" "audio audio";height:120px;gap:0 8px}.intro-footer>span{grid-area:tag}.intro-audio{grid-area:audio;justify-content:space-between;margin-left:0;gap:8px}.intro-sound{padding-left:0}.intro-developer{grid-area:brand;width:100px;height:30px}.intro-developer img{width:120px}}
@media(max-height:660px) and (max-width:640px){.intro-footer{height:96px}}
@media(max-height:460px) and (min-width:961px){.intro-footer{height:52px}.intro-developer{height:32px;width:110px;flex-basis:110px}.intro-developer img{width:215px}}

@media(max-width:960px){.intro-developer{transform:none}}

.intro-tutorial{display:flex;align-items:center;justify-content:space-between;text-decoration:none;min-height:40px}

.intro-tip{display:grid;grid-template-columns:23px minmax(0,1fr);gap:12px;box-sizing:border-box;width:min(100%,620px);margin:30px auto 0;padding:15px 18px;border:1px solid #c7aa6655;border-left:2px solid #dcc084;border-radius:3px;background:#13251ee8;color:#eee5cf;text-align:left;text-shadow:none}
.intro-tip-icon{width:22px;height:22px;fill:none;stroke:#ddc28b;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.intro-tip-heading{display:flex;align-items:baseline;gap:8px 15px;flex-wrap:wrap;margin-bottom:5px}
.intro-tip-heading b{font:600 13px/1.4 'Segoe UI',sans-serif;color:#ecd397}.intro-tip-topic{font:10px/1.4 'Segoe UI',sans-serif;color:#b7c5ad}
.intro-tip-text{margin:0;font:14px/1.55 'Segoe UI',sans-serif;color:#e3e4d3;overflow-wrap:anywhere}
.intro-playing .intro-identity{transform:none}.intro-playing .intro-tip{animation:intro-menu-in .8s .5s both}
.intro-ready .intro-tip{width:100%;margin:0 0 18px;padding:12px 16px;background:#263c2c;border-color:#8d9d6b66;border-left-color:#c6aa68}
@media(max-width:640px){.intro-tip{margin-top:27px;padding:13px 14px;gap:9px;grid-template-columns:20px minmax(0,1fr)}.intro-tip-icon{width:19px;height:19px}.intro-tip-heading{gap:3px 10px}.intro-tip-heading b{font-size:12px}.intro-tip-text{font-size:13px;line-height:1.5}.intro-ready .intro-tip{margin-bottom:14px;padding:11px 12px}}
@media(max-height:660px) and (max-width:640px){.intro-playing .intro-tip{margin-top:18px;padding:10px 12px}.intro-playing .intro-tip-text{font-size:12px}.intro-playing .intro-tip-heading{margin-bottom:3px}}
@media(max-height:460px) and (min-width:641px){.intro-playing .intro-composition{display:flex;gap:0}.intro-playing .intro-emblem{display:none}.intro-playing .intro-tip{margin-top:16px;padding:9px 14px;width:min(100%,650px)}.intro-playing .intro-tip-text{font-size:12px}.intro-playing .intro-subtitle{margin-bottom:0}}