.header-actions{gap:10px}
.header-actions .login-link,.header-actions .nav-register,.header-actions .nav-download{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:10px 17px;font:700 12px Cairo,Arial,sans-serif;line-height:1.6;white-space:nowrap;margin:0;border:1px solid #877448;cursor:pointer;transition:background .2s,box-shadow .2s,color .2s}
.header-actions .login-link{background:#1b2924;color:#d6c496;border-color:#786b4d}
.header-actions .login-link:hover,.header-actions .nav-register:hover{background:#314538;color:#e8d8b0;box-shadow:0 0 18px #bb9c5120}
.header-actions :focus-visible{outline:2px solid #e0c788;outline-offset:4px}
.header-login{position:fixed;inset:auto;margin:0;top:110px;left:20px;width:350px;max-width:calc(100vw - 32px);padding:29px;background:linear-gradient(135deg,#283a2e,#122321);color:#d7cba7;border:1px solid #a18a53;box-shadow:0 18px 65px #0009;font-family:Cairo,Arial,sans-serif;direction:rtl}
.header-login::backdrop{background:#07131038}
.header-login h2{font-size:24px;margin:4px 0 20px}.header-login .eyebrow{font-size:11px}
.header-login label{display:block;font-size:12px;margin:13px 0 5px}
.header-login input{display:block;width:100%;min-height:47px;background:#0d1d19;color:#e5d9b8;border:1px solid #65765e;padding:10px 13px;font:14px Cairo,Arial,sans-serif;outline-offset:3px}
.header-login form>.button{width:100%;margin-top:20px;cursor:pointer}
.header-login .login-status{font-size:11px;line-height:1.8;margin:12px 0}.header-login .text-link{font-size:12px}
.login-close{position:absolute;left:13px;top:10px;display:grid;place-items:center;width:30px;height:30px;background:transparent;color:#d3c49a;border:0;font-size:25px;cursor:pointer}
/* Images stay inside their columns, preserving the full-resolution artwork. */
.faction-stage{direction:rtl;grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr);align-items:start}
.faction.empire{order:0}.faction-divider{order:1}.faction.league{order:2}
.factions{background:radial-gradient(ellipse at 78% 50%,#593b2a58,transparent 48%),radial-gradient(ellipse at 20% 50%,#28545b50,transparent 46%),linear-gradient(#142224,#101a1b)}
.faction .character{position:relative;width:100%;max-width:none;height:auto;aspect-ratio:1.15;overflow:visible;pointer-events:auto;padding:10px 0}
.faction .character img{position:static;display:block;width:100%;height:100%;max-width:100%;margin:0;object-fit:contain;object-position:center bottom;animation:character-idle 5s ease-in-out infinite;filter:drop-shadow(0 12px 18px #0007);transition:filter .35s}
.faction.empire .character img{animation-delay:-2.2s}
.faction .character:hover img{filter:drop-shadow(0 12px 20px #0007) drop-shadow(0 0 10px #b9ba7626)}
.faction .character::before{content:'';position:absolute;inset:25% 8% 7%;border-radius:50%;background:radial-gradient(ellipse,#54a49b24,transparent 68%);pointer-events:none;animation:faction-aura 4s ease-in-out infinite alternate}
.empire .character::before{background:radial-gradient(ellipse,#c58b442a,transparent 68%);animation-delay:-2s}.faction-copy{padding-top:20px}
@keyframes faction-aura{from{opacity:.45;transform:scale(.96)}to{opacity:1;transform:scale(1.04)}}
.ships .hero-art{object-position:center}
.ships .hero-art,.ships .scene-effects{animation:none}
.scene-effects{position:absolute;inset:0 auto 0 0;width:72%;height:100%;pointer-events:none;overflow:hidden}
.hero-slide:not(.is-active) .scene-effects *{animation-play-state:paused}
.cannon-shot{fill:none;stroke:#ffe1a2;stroke-width:3;stroke-linecap:round;stroke-dasharray:14 500;stroke-dashoffset:15;opacity:0;filter:drop-shadow(0 0 5px #ffa432);animation:cannon-flight 3.5s linear infinite;animation-delay:var(--delay)}
.cannon-flash{fill:#fff1be;opacity:0;transform-box:fill-box;transform-origin:center;filter:drop-shadow(0 0 10px #ffad3f);animation:cannon-burst 3.5s ease-out infinite;animation-delay:var(--delay)}
@keyframes cannon-flight{0%,12%{opacity:0;stroke-dashoffset:15}14%{opacity:1}36%{opacity:1;stroke-dashoffset:-350}38%,100%{opacity:0;stroke-dashoffset:-350}}
@keyframes cannon-burst{0%,11%,24%,100%{opacity:0;transform:scale(.4)}13%{opacity:.95;transform:scale(1.5)}20%{opacity:.2;transform:scale(2)}}
@media(min-width:1251px) and (max-width:1430px){.nav-wrap{gap:14px}.nav-wrap nav{gap:13px}.header-actions .login-link,.header-actions .nav-register,.header-actions .nav-download{padding-inline:13px}}
@media(max-width:1250px){.header-login{top:155px}}
@media(max-width:760px){.header-actions .login-link,.header-actions .nav-register,.header-actions .nav-download{min-height:43px;padding:9px 12px;font-size:11px}.header-actions{justify-content:space-between;gap:8px}.header-login{top:145px;left:16px;padding:24px}.faction-stage{grid-template-columns:1fr;gap:42px}.faction .character{max-width:540px;aspect-ratio:1.1}.faction-copy{padding-top:6px}.scene-effects{width:100%}}
@media(prefers-reduced-motion:reduce){.faction .character img,.faction .character::before,.cannon-shot,.cannon-flash{animation:none}.cannon-shot,.cannon-flash{display:none}}