/* Layout and motion polish. Loaded last; every rule here corrects a measured defect. */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--dur-hover:.18s;--dur-press:.1s;--dur-release:.16s;--dur-disclosure:.26s;--dur-exit:.15s}

/* Menu screens: corner controls scroll with the page instead of floating over panels. */
.minimal-shell{position:static}
.minimal-shell>.settings-trigger,.minimal-shell>.account-entry{position:absolute}
@media(min-width:801px){
 .home-social-nav{top:max(16px,env(safe-area-inset-top))}
 .home-social-nav button{min-height:44px}
 .home-shell{padding-top:80px}
}

/* Lobby: the nickname sits on the card's centre line with the flag and seat counter;
   the country name is a caption above it. Titles centre on their action. */
.lobby-room .lobby-team-row{grid-template-rows:minmax(0,1fr) auto minmax(0,1fr)}
.lobby-team-copy>.lobby-team-country{grid-area:1/2;align-self:end}
.lobby-team-copy>.lobby-team-nicknames,.lobby-team-copy>.lobby-team-nickname{grid-area:2/2;align-self:center}
.lobby-room .lobby-team-row>.flag{grid-area:2/1;align-self:center}
.lobby-room .lobby-team-row>span:last-child{grid-area:2/3;align-self:center}
.section-title>h2{margin-block:0}

/* The game header stays pinned on wider screens; keep keyboard focus from scrolling under it. */
@media(min-width:801px){html{scroll-padding-top:132px}}

/* Game header: the turn tag matches the other status chips. */
@media(min-width:801px){header .session>.tag:not(.war-badge):not(.action-budget){min-height:32px}}

/* Country bar on laptops: trade and events buttons share the country chip height. */
@media(min-width:801px) and (max-width:1650px){aside .sidebar-trade{height:44px;padding-block:0}}

/* Stat cards: footers sit on one line across the row, with or without a button. */
.stat-footer{min-height:33px}

/* City cards: action buttons keep one right edge and one height in every card. */
.city-actions button{min-height:36px}
.city-actions .tiny{min-width:36px}
@media(min-width:801px){.city-actions .upgrade-cost{flex:1 1 auto;min-width:0}}
@media(max-width:800px){.city-actions .tiny{min-height:44px;min-width:44px}}
.city-scene .scene-label{top:14px;left:16px}
.city-scene .scene-label span{display:inline-flex;align-items:center;height:24px;padding:0 8px}
.city-scene .level{top:14px;right:16px;height:24px;display:inline-flex;align-items:center;padding:0 8px;line-height:1}

/* Leaderboard and friends: no visible scrollbar, wheel and touch scrolling only. MMR values end on
   the same edge as the header button; the bottom edge fades while more rows remain below. */
.social-list{scrollbar-width:none;margin-right:0;padding-right:0}
.social-list::-webkit-scrollbar{display:none}
.social-list>.social-player:last-child{border-bottom:0}
@property --social-fade{syntax:'<length>';inherits:false;initial-value:0px}
@keyframes social-fade{from{--social-fade:48px}to{--social-fade:0px}}
@supports (animation-timeline:scroll()){
 @media(min-width:801px){.social-list{mask-image:linear-gradient(#000 calc(100% - var(--social-fade)),transparent);animation:social-fade linear both;animation-timeline:scroll(self)}}
}
/* Phones: one page scroll instead of a short list scrolling inside the page. */
@media(max-width:800px){
 .social-panel{max-height:none}
 .social-list{max-height:none;overflow:visible;margin-right:0;padding-right:0}
}

/* Host panel: the rules tile starts on the same top line as the country tiles. */
.admin-redesigned .admin-rules-navigation{justify-content:flex-start}

/* Buttons: one physics. Hover changes colour only; press compresses quickly and returns without bounce. */
button{transition:background-color var(--dur-hover) ease,background var(--dur-hover) ease,border-color var(--dur-hover) ease,color var(--dur-hover) ease,box-shadow var(--dur-hover) ease,opacity var(--dur-hover) ease,transform var(--dur-release) var(--ease-out)}
button:hover:not(:disabled){transform:none}
button:active:not(:disabled){transform:scale(.97);transition-duration:var(--dur-press);transition-timing-function:var(--ease-out)}
.home-social-nav button:active:not(:disabled){transform:scale(.97)}
.simple-actions .home-action:active:not(:disabled){transform:scale(.98)}
.simple-actions .primary.home-action:active:not(:disabled){background:linear-gradient(120deg,#d9d9d9,#bababa)}
.simple-actions .ghost.home-action:active:not(:disabled){background:#ffffff0d}
.draft-aspect:active:not(:disabled),.admin-redesigned .admin-nation:active:not(:disabled),aside .country:active:not(:disabled){transform:scale(.985)}
.simple-actions .home-action{transition:background var(--dur-hover) ease,border-color var(--dur-hover) ease,box-shadow var(--dur-hover) ease,transform var(--dur-release) var(--ease-out)}
.home-action-arrow{transition:transform var(--dur-hover) var(--ease-out),opacity var(--dur-hover) ease}
/* Touch screens fire :hover on tap; keep the arrow nudge for real pointers only. */
@media not ((hover:hover) and (pointer:fine)){.home-action:hover .home-action-arrow{transform:none}}

/* Screen changes happen tens of times per game: shorter, no full-screen blur. */
@keyframes screen-arrive{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.screen-enter{animation-duration:.22s;animation-timing-function:var(--ease-out)}
.screen-enter .stats>.stat,.screen-enter .science-grid>article,.screen-enter .simple-actions>.home-action{animation-duration:.24s;animation-timing-function:var(--ease-out)}
dialog[open]::backdrop{animation-timing-function:var(--ease-out)}

/* Toast rises from below; it leaves faster than it arrives. */
#toast{transform:translate(-50%,8px);transition:opacity var(--dur-exit) var(--ease-out),transform var(--dur-exit) var(--ease-out),visibility 0s linear var(--dur-exit)}
#toast[data-visible="true"]{transform:translateX(-50%);transition:opacity .22s var(--ease-out),transform .22s var(--ease-out),visibility 0s}

/* World event banner: exit is quicker than entry and never blocks clicks while fading. */
.world-event-announcement.leaving{animation-duration:.4s;animation-timing-function:var(--ease-out);pointer-events:none}

/* Lists and drawers that slide open use the shared curve instead of the default ease. */
.my-parties-content{transition:grid-template-rows var(--dur-disclosure) var(--ease-out),opacity .2s ease,visibility var(--dur-disclosure)}
.my-parties-arrow{transition:transform var(--dur-disclosure) var(--ease-out),color .2s ease}

/* Disclosures expand to their height instead of jumping open. */
@supports (interpolate-size:allow-keywords){
 :root{interpolate-size:allow-keywords}
 details::details-content{block-size:0;overflow:clip;transition:block-size var(--dur-disclosure) var(--ease-out),content-visibility var(--dur-disclosure) allow-discrete}
 details[open]::details-content{block-size:auto}
}

@media(prefers-reduced-motion:reduce){
 button,.simple-actions .home-action,.home-social-nav button{transition:background-color .12s,background .12s,border-color .12s,color .12s,box-shadow .12s,opacity .12s}
 button:active:not(:disabled),.home-social-nav button:active:not(:disabled),.simple-actions .home-action:active:not(:disabled),.draft-aspect:active:not(:disabled),.admin-redesigned .admin-nation:active:not(:disabled),aside .country:active:not(:disabled){transform:none;filter:brightness(.9)}
 details::details-content{transition:none}
 #toast,#toast[data-visible="true"]{transform:translateX(-50%)}
 .my-parties-content,.my-parties-arrow{transition:none}
}