/* Old SRO Empire — shared styles */
:root{
  --night:#1b150e; --night-2:#241b12; --night-3:#2f2418; --cream:#f3e7cb; --cream-2:#cdbd9c; --cream-3:#9d8d70;
  --paper:#efe3c4; --paper-2:#e4d4ac; --ink:#241a10; --ink-2:#5c4b38;
  --verm:#a8361f; --verm-hi:#e07a5c; --gold:#cfa65a; --green:#2f6a4f; --green-hi:#9fd0b6;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--night);color:var(--cream);font-family:"Inter Tight",system-ui,sans-serif;font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
button{font:inherit;color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.serif{font-family:"Cormorant Garamond",Georgia,serif}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.eyebrow{font:600 12px "IBM Plex Mono",monospace;color:var(--gold);text-transform:uppercase;letter-spacing:.2em}
h2{font:700 clamp(36px,4.8vw,60px)/1 "Cormorant Garamond",Georgia,serif;letter-spacing:-.005em}
h2 em{font-style:italic;color:var(--gold)}
.lede{color:var(--cream-2);max-width:56ch;margin-top:14px;font-size:18px}

/* nav */
.nav{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:20px clamp(16px,4vw,48px)}
.nav.solid{position:sticky;background:rgba(27,21,14,.92);backdrop-filter:blur(8px);border-bottom:1px solid rgba(207,166,90,.18)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 22px "Cormorant Garamond",Georgia,serif;color:var(--cream)}
.logo svg{width:28px;height:28px}
.nav-r{display:flex;align-items:center;gap:22px;font-size:15px}
.nav-r a{text-decoration:none;color:var(--cream-2)}
.nav-r a:hover,.nav-r a[aria-current]{color:var(--cream)}
.nav-r .dl{background:var(--cream);color:var(--night);padding:8px 16px;border-radius:9px;font-weight:600}
.lang{display:flex;border:1px solid rgba(243,231,203,.3);border-radius:999px;overflow:hidden}
.lang button{background:none;border:0;color:var(--cream-3);font:500 12.5px "Inter Tight",sans-serif;padding:5px 11px;cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--cream);color:var(--night)}
@media (max-width:820px){.nav-r a:not(.dl){display:none}}
@media (max-width:520px){.nav{padding:14px 16px}.logo{font-size:18px;white-space:nowrap;gap:8px}.logo svg{width:24px;height:24px}.nav-r{gap:10px}.nav-r .dl{padding:7px 12px;font-size:14px}}

.btn{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:600;font-size:15px;padding:13px 20px;border-radius:10px;border:1px solid rgba(243,231,203,.5);color:var(--cream);background:none;cursor:pointer}
.btn.primary{background:var(--cream);color:var(--night);border-color:var(--cream)}
.btn svg{width:18px;height:18px}

/* map linework — shared by every map on the site */
.land,.road,.rh,.wave,.shallow,.river,.lake,.hachure,.pole,.trail,.siege-ring,.coastline,.ring-line,.seal-ring,.arrow-dash{vector-effect:non-scaling-stroke}
.land{fill:url(#landGrad)}
.shallow{fill:none;stroke:#cfdccf;stroke-width:9;stroke-linejoin:round;opacity:.7}
.coastline{fill:none;stroke:var(--ink);stroke-width:1.2;stroke-linejoin:round}
.relief{opacity:.55;mix-blend-mode:multiply}
.paperfx{opacity:.35;mix-blend-mode:multiply}
.rh{stroke:rgba(36,26,16,.10);stroke-width:.8}
.wave{fill:none;stroke:rgba(36,26,16,.28);stroke-width:1.1;stroke-linecap:round}
.road{fill:none;stroke:rgba(36,26,16,.45);stroke-width:1.6;stroke-dasharray:1 7;stroke-linecap:round}
.sea-label{font:italic 600 30px "Cormorant Garamond",Georgia,serif;fill:#45695a;letter-spacing:.22em;opacity:.8}
.strait{font:italic 600 15px "Cormorant Garamond",Georgia,serif;fill:#3a5c4e}
.strait-tag{font:600 10px "IBM Plex Mono",monospace;fill:#3a5c4e;letter-spacing:.08em}
.castle .name{font:700 22px "Cormorant Garamond",Georgia,serif;fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-width:5px;stroke-linejoin:round}
.castle.big .name{font-size:30px}
.castle .name .mult{font:600 13px "IBM Plex Mono",monospace;fill:var(--verm);stroke-width:4px}
.castle.big .name .mult{font-size:16px}
.pole{stroke:var(--ink);stroke-width:1.6}
.flag{transform-box:fill-box;transform-origin:left center;animation:flutter 1.6s ease-in-out infinite}
.tail{transform-box:fill-box;transform-origin:top center;animation:sway 2.2s ease-in-out infinite}
@keyframes flutter{0%,100%{transform:skewY(0deg) scaleX(1)}50%{transform:skewY(-6deg) scaleX(.92)}}
@keyframes sway{0%,100%{transform:rotate(4deg)}50%{transform:rotate(-6deg)}}
.unit .plate rect{fill:#fbf4e2;stroke:var(--ink);stroke-width:1.1}
.unit .plate text{font:600 13px "IBM Plex Mono",monospace;fill:var(--ink)}
.trail{fill:none;stroke-width:2.4;stroke-dasharray:6 6;stroke-linecap:round;opacity:.8}
.trail.sea{stroke-dasharray:2 7;stroke-width:2.8}
.dust{fill:rgba(120,90,60,.28)}
.siege-ring{fill:none;stroke:var(--verm);stroke-width:2.4}
.flip-burst{fill:none;stroke-width:3}
.eqplate rect.bg{fill:var(--ink);stroke:var(--gold);stroke-width:1.2}
.eqplate text{font:600 15px "IBM Plex Mono",monospace;fill:var(--cream)}
.eqplate .lbl{font:600 10px "Inter Tight",sans-serif;letter-spacing:.14em;fill:var(--gold)}
.eqplate .good{fill:var(--green-hi)} .eqplate .bad{fill:#f08a6c}

/* toasts */
.toast{background:rgba(27,21,14,.9);color:var(--cream);border:1px solid rgba(207,166,90,.35);border-left:3px solid var(--c,var(--gold));border-radius:9px;padding:9px 12px;font-size:13.5px;line-height:1.4;backdrop-filter:blur(6px);animation:tin .5s ease-out both}
.toast .t{font:500 11px "IBM Plex Mono",monospace;color:var(--gold);display:block;margin-bottom:2px}
@keyframes tin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

footer.site{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:40px clamp(16px,4vw,48px) 48px;font-size:13.5px;color:var(--cream-3);border-top:1px solid rgba(207,166,90,.15)}
footer.site a{text-decoration:none}
footer.site a:hover{color:var(--cream)}
footer.site .proj{font-size:12px;opacity:.75}
@media (prefers-reduced-motion:reduce){.flag,.tail{animation:none}html{scroll-behavior:auto}}

/* terrain */
.river{fill:none;stroke:#6f97a0;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.lake{fill:#b4c8be;stroke:#4f6f68;stroke-width:1}
.hump{fill:url(#mtnGrad);stroke:#5c4b38;stroke-width:.9}
.hachure{fill:none;stroke:rgba(60,45,30,.45);stroke-width:.8}
.mtn .snow{fill:#f7f2e4;stroke:#8a7a5e;stroke-width:.5}
.pine{fill:#4d6a46;stroke:#2f4430;stroke-width:.5}
.oak{fill:#7a9358;stroke:#4c5f38;stroke-width:.5}
.oak-sh{fill:#58703f;opacity:.6}
.trunk{stroke:#5a4027;stroke-width:1}
.mtn-label{font-style:italic;font-weight:600;font-family:"Cormorant Garamond",Georgia,serif;fill:#5c4b38;letter-spacing:.12em;paint-order:stroke;stroke:#eadfbf;stroke-width:.25em}
.water-label{font-style:italic;font-weight:600;font-family:"Cormorant Garamond",Georgia,serif;fill:#3f6670;letter-spacing:.08em;paint-order:stroke;stroke:#e6dcbd;stroke-width:.25em}
/* castles */
.castle .stone{fill:#e7dbbb;stroke:#3a2c1d;stroke-width:1.1;stroke-linejoin:round}
.castle .stone.sh{fill:#c9b98f}
.castle .rock{fill:#b9a679;stroke:#3a2c1d;stroke-width:1.1;stroke-linejoin:round}
.castle .rock.sh{fill:#a39064}
.castle .mound{fill:#a8956a;opacity:.55}
.castle .dome{fill:#9aa7a6;stroke:#3a2c1d;stroke-width:1.1}
.castle .gate{fill:#2a1f14}
.castle .slit{stroke:#2a1f14;stroke-width:1.1}
.castle .joints{fill:none;stroke:rgba(58,44,29,.35);stroke-width:.7}
/* figures */
.fig .horse{fill:#6b4a2b;stroke:#241a10;stroke-width:.8;stroke-linejoin:round}
.fig .cloth{stroke:#241a10;stroke-width:.6}
.fig .skin{fill:#e3c9a0;stroke:#241a10;stroke-width:.6}
.fig .helm{fill:#8f8a7e;stroke:#241a10;stroke-width:.6}
.fig .bow{fill:none;stroke:#3a2a18;stroke-width:1.2}
.fig .string{stroke:#3a2a18;stroke-width:.4}
.fig .lance{stroke:#3a2a18;stroke-width:1}
.fig .legs{stroke:#3a2a18;stroke-width:1.1;stroke-linecap:round}
.fig .tunic{fill:#8a7458;stroke:#241a10;stroke-width:.6}
.fig .boss{fill:#d8c48a}
.ship .hull{fill:#6b4a2b;stroke:#241a10;stroke-width:1.2;stroke-linejoin:round}
.ship .sail{stroke:#241a10;stroke-width:1}
.ship .oar{stroke:#3a2a18;stroke-width:1}
.ship .yard{stroke:#3a2a18;stroke-width:1.3}
.wake{fill:none;stroke:rgba(255,255,255,.8);stroke-width:1.4;stroke-linecap:round}

/* animated figures: everything runs only while a unit moves or fights */
.fig *,.ship *{transform-box:fill-box}
.unit .march,.unit .gallop,.unit .legs,.unit .hleg,.unit .tail-h,.unit .thrust,.unit .draw,.unit .arrow,.unit .couch,.unit .puff,.ship .oar,.ship .pitch,.ship .sail{animation-play-state:paused}
.unit.moving .march,.unit.moving .legs,.unit.moving .gallop,.unit.moving .hleg,.unit.moving .tail-h,.unit.moving .puff,
.unit.fighting .thrust,.unit.fighting .draw,.unit.fighting .arrow,.unit.fighting .couch,.unit.fighting .gallop,.unit.fighting .hleg,
.ship .oar,.ship .pitch,.ship .sail{animation-play-state:running}
.legs{transform-origin:50% 0;animation:stepA .48s ease-in-out infinite}
.legs.stepB{animation-name:stepB}
.march{animation:bobY .48s ease-in-out infinite}
.hleg{stroke:#241a10;stroke-width:1.5;stroke-linecap:round;transform-origin:50% 0;animation:gallopF .42s ease-in-out infinite}
.hleg.bl,.hleg.br{animation-name:gallopB}
.hleg.fr,.hleg.br{animation-delay:-.21s !important}
.gallop{transform-origin:50% 100%;animation:rock .42s ease-in-out infinite}
.tail-h{transform-origin:100% 0;animation:sway .42s ease-in-out infinite}
.thrust{animation:thrust .55s ease-in-out infinite}
.couch{transform-origin:20% 60%;animation:couch .7s ease-in-out infinite}
.draw{transform-origin:0 50%;animation:draw 1.1s ease-in-out infinite}
.arrow{stroke:#2a1d12;stroke-width:.8;opacity:0;animation:fly 1.1s linear infinite}
.arrow.a2{animation-delay:-.55s}
.dust-trail{opacity:0;transition:opacity .3s}
.unit.moving .dust-trail{opacity:1}
.unit.fleet .dust-trail{display:none}
.puff{fill:rgba(140,110,70,.32);transform-box:fill-box;transform-origin:center;animation:puff .75s ease-out infinite}
.oar{transform-origin:50% 0;animation:row 1.2s ease-in-out infinite}
.pitch{transform-origin:50% 80%;animation:pitch 2.6s ease-in-out infinite}
.ship .sail{transform-origin:0 100%;animation:billow 2.6s ease-in-out infinite}
@keyframes stepA{0%,100%{transform:rotate(24deg)}50%{transform:rotate(-24deg)}}
@keyframes stepB{0%,100%{transform:rotate(-24deg)}50%{transform:rotate(24deg)}}
@keyframes bobY{0%,100%{transform:translateY(0)}25%,75%{transform:translateY(-.8px)}}
@keyframes gallopF{0%,100%{transform:rotate(-30deg)}50%{transform:rotate(25deg)}}
@keyframes gallopB{0%,100%{transform:rotate(28deg)}50%{transform:rotate(-26deg)}}
@keyframes rock{0%,100%{transform:rotate(-2.5deg) translateY(0)}50%{transform:rotate(2.5deg) translateY(-1.2px)}}
@keyframes thrust{0%,100%{transform:translate(0,0)}40%{transform:translate(2.2px,-1px)}60%{transform:translate(2.2px,-1px)}}
@keyframes couch{0%,100%{transform:rotate(0)}50%{transform:rotate(6deg)}}
@keyframes draw{0%,60%{transform:scaleX(1)}45%{transform:scaleX(.7)}}
@keyframes fly{0%,45%{opacity:0;transform:translateX(0)}50%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(26px) translateY(4px)}}
@keyframes puff{0%{opacity:.8;transform:scale(.4)}100%{opacity:0;transform:scale(1.6) translateX(-4px)}}
@keyframes row{0%,100%{transform:rotate(-16deg)}50%{transform:rotate(14deg)}}
@keyframes pitch{0%,100%{transform:rotate(-1.6deg)}50%{transform:rotate(1.6deg) translateY(.8px)}}
@keyframes billow{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.94)}}
@media (prefers-reduced-motion:reduce){.unit *,.ship *{animation:none !important}}