/* Short motion attached to navigation, interaction, and battle events. */
.preview-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.game-mode-card{animation:modeEnter .4s ease-out backwards}.game-mode-card:nth-child(2){animation-delay:.07s}.game-mode-card:nth-child(3){animation-delay:.14s}
.content-panel,.room-heading,.room-layout,.room-footer{animation:panelEnter .3s ease-out backwards}
.room-layout{animation-delay:.04s}.room-footer{animation-delay:.08s}
button,a.nav-item{transition:background-color .15s,border-color .15s,box-shadow .15s,transform .12s ease}
button:not(:disabled):active{transform:translateY(2px) scale(.98)}
dialog[open]{animation:dialogEnter .22s ease-out}dialog[open]::backdrop{animation:shadeEnter .18s ease-out}
.nav-item.active,.mobile-nav button.active{animation:navSelect .2s ease-out}
@media(hover:hover){.game-card-action button:not(:disabled):hover,.primary:not(:disabled):hover,.intro-replay:hover{transform:translateY(-2px)}.team-option:hover{transform:translateY(-2px)}}
@keyframes panelEnter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes modeEnter{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes dialogEnter{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes shadeEnter{from{opacity:0}to{opacity:1}}
@keyframes navSelect{from{transform:scale(.94)}to{transform:scale(1)}}

.match-start{position:fixed;inset:0;z-index:180;display:grid;place-items:center;overflow:hidden;color:#ffedbd;isolation:isolate}
.start-world{position:absolute;inset:-4%;z-index:-4;background:#208da1 url('assets/conquest-world.png') center/cover;animation:worldDeploy 2.4s cubic-bezier(.18,.6,.2,1) both}
.start-shade{position:absolute;inset:0;z-index:-3;background:radial-gradient(ellipse at center,#0b314378,#071f35b8);animation:deployShade 2.4s ease both}
.start-shutter{position:absolute;left:0;right:0;height:52%;z-index:3;background:#0e3447;border-color:#deb65f;border-style:solid;animation:shutterOpen 1.05s cubic-bezier(.6,0,.2,1) both}.top-shutter{top:0;border-width:0 0 3px;--shutter-y:-104%}.bottom-shutter{bottom:0;border-width:3px 0 0;--shutter-y:104%}
.start-banner{position:relative;isolation:isolate;width:min(700px,88vw);text-align:center;padding:26px 25px 25px;animation:bannerDeploy 2.4s ease both}
.start-banner:before{content:'';position:absolute;inset:21% -15% -5%;z-index:-1;background:linear-gradient(90deg,transparent,#103345f5 17%,#103345f5 83%,transparent);border-block:1px solid #e7c46d60;transform:skewY(-3deg)}
.start-crest{height:114px;width:124px;margin:0 auto 5px}.start-crest svg{height:100%;width:100%;overflow:visible}
.start-sword{transform-origin:60px 55px;animation:swordCross .5s cubic-bezier(.2,.8,.3,1) .32s backwards}.left-sword{--sword-x:-37px;--sword-angle:-35deg}.right-sword{--sword-x:37px;--sword-angle:35deg}.start-spark{transform-origin:60px 55px;animation:swordSpark .32s ease-out .7s both}
.start-map-name{font:800 11px var(--font);letter-spacing:6px;color:#e9edd2;display:block;margin:0 0 11px}
.start-banner h1{font:400 clamp(36px,6.5vw,76px)/1 var(--heading);color:#ffdf87;text-shadow:0 4px #8c652f,0 7px #0b293c;letter-spacing:1px;margin:0;white-space:nowrap}
.start-rule{height:2px;background:#e6bb64;width:85px;margin:22px auto 17px;animation:deployRule .45s ease .85s backwards}
.start-banner p{font:800 11px var(--font);letter-spacing:1.4px;margin:0;color:#e8eddb;display:flex;gap:20px;justify-content:center}.start-banner p span{border-left:1px solid #9aac9d;padding-left:20px;color:#c4d4ce}
.start-actions{position:absolute;left:max(24px,var(--app-safe-left, env(safe-area-inset-left)));right:max(24px,var(--app-safe-right, env(safe-area-inset-right)));top:max(20px,var(--app-safe-top, env(safe-area-inset-top)));display:flex;justify-content:space-between;align-items:center;gap:10px;z-index:4}.start-actions>span{font:800 9px var(--font);letter-spacing:1px}.start-actions .secondary{min-height:44px;font-size:11px;background:#183e51;border-color:#a6b9b7;padding:10px 14px}
.match-reveal .battlefield>svg{animation:mapDeploy 2.4s cubic-bezier(.18,.6,.2,1) both}
.match-reveal .map-help,.match-reveal .map-zoom{visibility:hidden}
.match-reveal .arena-side{animation:commandsDeploy .45s ease 1.65s backwards}.match-reveal .game-hud{animation:hudDeploy .4s ease 1.55s backwards}.match-reveal .arena-header{animation:hudDeploy .4s ease 1.6s backwards}
.room-footer .room-actions:has([data-action=preview-match-start]){flex-wrap:wrap;justify-content:flex-end}.room-footer .room-actions [data-action=preview-match-start]{min-width:120px}
.team-seat .empty-avatar{background:var(--army);border:1px solid #e7edcf;color:#fff0ca}.team-seat{border-left:3px solid var(--army)}
@keyframes shutterOpen{0%,8%{transform:translateY(0)}100%{transform:translateY(var(--shutter-y))}}
@keyframes swordCross{from{transform:translateX(var(--sword-x)) rotate(var(--sword-angle));opacity:0}to{transform:translateX(0) rotate(0);opacity:1}}
@keyframes swordSpark{0%{opacity:0;transform:scale(.2)}20%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.7)}}
@keyframes deployRule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes bannerDeploy{0%,12%{opacity:0;transform:translateY(25px) scale(.93)}38%,75%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-16px) scale(1.03)}}
@keyframes worldDeploy{from{transform:scale(1.18) translateY(18px)}to{transform:scale(1) translateY(0)}}
@keyframes mapDeploy{from{transform:scale(1.16) translateY(22px)}to{transform:scale(1) translateY(0)}}
@keyframes deployShade{0%,72%{opacity:1}100%{opacity:0}}
@keyframes commandsDeploy{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:translateX(0)}}
@keyframes hudDeploy{from{opacity:0;translate:0 -10px}to{opacity:1;translate:0 0}}
@media(max-width:680px){.preview-actions{gap:5px}.preview-actions button{font-size:9px;padding:7px 8px;min-height:35px}.preview-actions svg{width:12px}.start-banner{width:94vw;padding:15px 8px}.start-banner h1{font-size:clamp(30px,10vw,48px);letter-spacing:.5px}.start-crest{height:95px;width:105px}.start-map-name{font-size:9px;letter-spacing:4px}.start-banner p{font-size:9px;gap:13px;letter-spacing:.8px}.start-banner p span{padding-left:13px}.start-rule{margin-top:17px;margin-bottom:15px}.start-actions{left:15px;right:15px;top:max(14px,var(--app-safe-top, env(safe-area-inset-top)))}.start-actions>span{font-size:7px}.start-actions .secondary{font-size:10px;padding:8px 10px}.match-reveal .arena-side{animation-name:panelEnter}.room-footer .room-actions:has([data-action=preview-match-start]){display:grid;grid-template-columns:1fr 1fr}.room-footer .room-actions [data-action=preview-match-start]{grid-column:1/-1;min-height:40px}}
@media(prefers-reduced-motion:reduce){.match-start *,.match-reveal *,dialog[open],dialog[open]::backdrop,.game-mode-card,.content-panel,.room-heading,.room-layout,.room-footer,.nav-item.active,.mobile-nav button.active{animation:none!important}.start-shutter,.start-spark{display:none}.start-shade{opacity:1}.start-banner{opacity:1;transform:none}button,a.nav-item{transition:none!important}button:not(:disabled):active,.primary:not(:disabled):hover,.game-card-action button:hover,.intro-replay:hover,.team-option:hover{transform:none}}