/* Shop and inventory. The inventory button sits between the profile chip and settings. */
.minimal-shell>.inventory-trigger{position:absolute;top:max(16px,env(safe-area-inset-top));right:calc(max(16px,env(safe-area-inset-right)) + 56px);z-index:35;display:grid;place-items:center;width:44px;height:44px;padding:0;border-color:#ffffff25;border-radius:10px;background:#141414;color:#d0d0d0;box-shadow:inset 0 1px 0 #ffffff06}
.minimal-shell>.inventory-trigger svg{width:20px;height:20px}
.minimal-shell>.inventory-trigger:hover:not(:disabled){background:#202020;border-color:#ffffff4d;color:#eee}
.minimal-shell>.inventory-trigger:focus-visible{outline:2px solid #9b9b9b;outline-offset:4px}
.minimal-shell:has(>.inventory-trigger)>.account-entry{right:calc(max(16px,env(safe-area-inset-right)) + 112px);max-width:min(220px,calc(100vw - 160px))}
.ENG{background:linear-gradient(90deg,transparent 42%,#c65859 42%,#c65859 58%,transparent 58%),linear-gradient(transparent 38%,#c65859 38%,#c65859 62%,transparent 62%),#e5e9e8}

.simple-actions .home-shop .home-action-arrow{margin-left:auto}
.store-panel{display:grid;gap:24px;text-align:left}
.store-panel .section-title{align-items:center!important;margin:0!important}
.store-panel .section-title h2{margin:0!important}
.store-link{display:flex;align-items:center;justify-content:center;gap:8px}
.store-link svg{width:16px;height:16px}

/* Inventory: square tiles, empty slots show the room left. */
.inventory-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.inventory-tile{position:relative;display:grid;place-items:center;align-content:center;gap:9px;aspect-ratio:1;min-width:0;margin:0;padding:8px;border:1px solid #ffffff16;border-radius:12px;background:#121212;color:#d8d8d8;cursor:pointer;transition:border-color .18s ease,background-color .18s ease,transform .18s cubic-bezier(.23,1,.32,1)}
button.inventory-tile:hover:not(:disabled){border-color:#ffffff4a;background:#1a1a1a;transform:translateY(-2px);box-shadow:none}
button.inventory-tile:active:not(:disabled){transform:scale(.97)}
.inventory-tile .flag{width:46px;height:31px;border-radius:4px}
.inventory-tile small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:500;color:#a8a8a8}
.inventory-tile.is-empty{border-style:dashed;border-color:#ffffff0d;background:#ffffff02;cursor:default}
/* Item card: photo banner with the flag and name, then the cities as photo tiles. */
dialog.inventory-dialog{width:min(480px,calc(100vw - 32px));max-width:none;padding:0;overflow:hidden;border-color:#ffffff1f;border-radius:18px;background:#121212}
.item-banner{position:relative;display:grid;align-content:end;min-height:190px;padding:20px 22px;background-size:cover;background-position:center;isolation:isolate}
.item-banner::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#12121226 0%,#121212b3 62%,#121212 100%)}
.item-title{display:flex;align-items:center;gap:16px}
.item-title .flag{flex:0 0 64px;width:64px;height:43px;border-radius:6px;box-shadow:0 6px 20px #0008,0 0 0 1px #ffffff1f}
.item-title .eyebrow{color:#c8c8c8}
.item-title h2{margin:3px 0 0;font-family:'Dela Gothic One',Unbounded,Arial,sans-serif;font-size:28px;letter-spacing:-.5px;color:#fff}
.item-source{position:absolute;top:18px;left:22px;padding:6px 10px;border:1px solid #ffffff2e;border-radius:999px;background:#0e0e0ebf;backdrop-filter:blur(8px);font-size:11px;font-weight:600;color:#e6e6e6}
.item-source.is-bought{border-color:#e0c48380;color:#e0c483}
dialog .item-close{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:36px;height:36px;min-height:0;padding:0;border:1px solid #ffffff2e;border-radius:10px;background:#0e0e0ebf;backdrop-filter:blur(8px);font-size:14px;color:#e6e6e6}
dialog .item-close:hover:not(:disabled){background:#1e1e1ef2;border-color:#ffffff59}
.item-body{display:grid;gap:12px;padding:6px 22px 22px}
.item-cities{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.item-city{position:relative;display:grid;align-content:end;aspect-ratio:16/10;overflow:hidden;border:1px solid #ffffff17;border-radius:12px;background:#181818;animation:item-city-in .4s cubic-bezier(.23,1,.32,1) both}
.item-city:nth-child(2){animation-delay:.04s}.item-city:nth-child(3){animation-delay:.08s}.item-city:nth-child(4){animation-delay:.12s}
.item-city img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.item-city::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,#0b0b0dd9 100%)}
.item-city.no-photo{background-color:#181818;background-repeat:no-repeat;background-size:auto 150%}
.item-city>span{position:relative;z-index:1;display:grid;gap:2px;padding:10px 12px}
.item-city strong{font-size:13px;font-weight:600;color:#f2f2f2}
.item-city em{font-size:9px;font-style:normal;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:#e0c483}
@keyframes item-city-in{from{opacity:0;transform:translateY(6px)}}
@media(max-width:600px){.item-banner{min-height:160px;padding:18px}.item-title h2{font-size:22px}.item-body{padding:4px 18px 18px}.item-cities{gap:8px}}
@media(prefers-reduced-motion:reduce){.item-city{animation:none}}
@media(max-width:600px){.inventory-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.inventory-tile .flag{width:38px;height:26px}.inventory-tile small{font-size:10px}}

/* Full-page shop: logo on the left, title in the middle, offers across the page. */
.shop-shell>.minimal-brand,.shop-shell>.local-note{display:none}
.minimal-shell.shop-shell:not(.home-shell){max-width:none;width:100%;padding:0 clamp(16px,3vw,40px) 48px;justify-content:flex-start}
.shop-page{display:grid;gap:28px;width:100%;max-width:1400px;margin:0 auto;padding-top:max(16px,env(safe-area-inset-top));text-align:left}
.shop-top{display:grid;justify-items:center;align-items:center;min-height:60px;padding-top:30px}
/* The globe mirrors the corner buttons: 16px from the screen edge, centred on their row. The left offset cancels the shell's side padding. */
.shop-brand{position:absolute;top:max(10px,calc(env(safe-area-inset-top) - 6px));left:calc(max(16px,env(safe-area-inset-left)) - 4px - clamp(16px,3vw,40px));z-index:35;display:flex;align-items:center;gap:14px;font:600 12px/1.55 'Dela Gothic One',Unbounded,Arial;letter-spacing:1.2px;color:#b0b0b0}
.shop-brand .game-logo{width:48px;height:48px}
.shop-top h1{margin:0;font-family:'Dela Gothic One',Unbounded,Arial,sans-serif;font-size:clamp(34px,4.2vw,56px);line-height:1.1;letter-spacing:-1px;color:#f2f2f2}
.shop-balance{display:flex;align-items:center;gap:8px;justify-self:center;padding:9px 16px;border:1px solid #ffffff1c;border-radius:999px;background:#141414;font-size:12px;color:#9a9a9a}
.shop-balance svg{width:16px;height:16px;color:#e0c483}
.shop-balance strong{font-size:15px;font-variant-numeric:tabular-nums;color:#f0f0f0}
.shop-section{display:grid;gap:14px}
.shop-offer{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:24px;min-height:clamp(380px,46vh,520px);overflow:hidden;border:1px solid #ffffff1c;border-radius:18px;background:#101012;isolation:isolate}
.shop-offer-art{position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center bottom;transition:transform .6s cubic-bezier(.23,1,.32,1)}
.shop-offer-art::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#0b0b0de6 0%,#0b0b0db3 38%,#0b0b0d00 70%)}
@media(hover:hover){.shop-offer:hover .shop-offer-art{transform:scale(1.03)}}
.shop-offer-copy{display:grid;gap:12px;max-width:460px;padding:34px}
.shop-tag{justify-self:start;padding:5px 9px;border:1px solid #e0c48366;border-radius:6px;font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#e0c483}
.shop-offer-title{display:flex;align-items:center;gap:14px}
.shop-offer-title .flag{width:44px;height:30px;border-radius:4px}
.shop-offer-title h3{margin:0;font-family:'Dela Gothic One',Unbounded,Arial,sans-serif;font-size:clamp(28px,4vw,44px);letter-spacing:-1px;color:#fff}
.shop-offer-copy>p{margin:0;font-size:13px;color:#b8b8b8}
.shop-offer-deal{display:grid;justify-items:end;gap:10px;margin:34px;padding:18px 20px;border:1px solid #ffffff17;border-radius:14px;background:#0b0b0dc7;backdrop-filter:blur(10px)}
.shop-offer-buy{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:16px}
.shop-offer-buy button{min-width:150px;min-height:46px}
.shop-price{display:flex;align-items:center;gap:10px}
.shop-price s{font-size:14px;color:#8a8a8a;text-decoration-thickness:1.5px}
.shop-price strong{display:flex;align-items:center;gap:6px;font-size:26px;font-variant-numeric:tabular-nums;color:#fff}
.shop-price strong svg{width:20px;height:20px;color:#e0c483}
.shop-price em{padding:4px 7px;border-radius:6px;background:#c65859;font-size:11px;font-style:normal;font-weight:700;color:#fff}
.shop-short{font-size:11px;color:#d08a6a}
@media(max-width:700px){
 .shop-top{padding-top:68px}
 .shop-brand{top:max(12px,calc(env(safe-area-inset-top) - 4px))}
 .shop-brand .game-logo{width:44px;height:44px}
 .shop-brand>span:last-child{display:none}
 .shop-offer{min-height:420px}
 .shop-offer-art{background-position:68% bottom}
 .shop-offer-art::after{background:linear-gradient(0deg,#0b0b0df2 0%,#0b0b0dcc 45%,#0b0b0d1a 100%)}
 .shop-offer{grid-template-columns:1fr;gap:0}
 .shop-offer-copy{padding:22px 22px 14px}
 .shop-offer-deal{justify-items:start;margin:0 22px 22px;padding:0;border:0;background:none;backdrop-filter:none}
 .shop-offer-buy{justify-content:flex-start}
}
@media(prefers-reduced-motion:reduce){.inventory-tile,.shop-offer-art{transition:none}}

/* Aspect draft search. */
.draft-search{position:relative;margin:0 0 12px}
.draft-search svg{position:absolute;left:14px;top:50%;width:17px;height:17px;transform:translateY(-50%);color:#8a8a8a;pointer-events:none}
.draft-search input{width:100%;height:44px;padding:0 14px 0 40px;border:1px solid #ffffff17;border-radius:10px;background:#0f0f0f;color:#eee;font-size:13px}
.draft-search input:focus{outline:none;border-color:#ffffff60}
.draft-empty{grid-column:1/-1;margin:0;padding:28px;border:1px dashed #ffffff17;border-radius:12px;text-align:center;font-size:13px;color:#8a8a8a}

/* Shop grid: the featured offer large on the left, upcoming slots stacked on the right. */
.shop-grid{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(260px,1fr);gap:16px}
.shop-grid>.shop-offer{min-height:clamp(440px,58vh,620px);border-color:#ffffff26;background:#1c1c1f;box-shadow:none;transition:box-shadow .4s ease,border-color .4s ease}
@media(hover:hover){.shop-grid>.shop-offer:hover{border-color:#c658593d;box-shadow:0 0 0 1px #c658591a,0 24px 70px -28px #c658594d}.shop-grid>.shop-offer:hover::before{opacity:.55}}
.shop-grid .shop-offer-art{filter:grayscale(1);background-position:center 70%}
.shop-grid .shop-offer-art::after{background:linear-gradient(90deg,#1c1c1ff2 0%,#1c1c1fb8 36%,#1c1c1f14 70%),linear-gradient(0deg,#1c1c1fcc 0%,transparent 40%)}
.shop-grid>.shop-offer::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;background:radial-gradient(42% 46% at 72% 74%,#c6585940,transparent 70%),radial-gradient(60% 40% at 50% 100%,#c6585926,transparent 75%);opacity:0;transition:opacity .4s ease}
.shop-grid .shop-offer-copy,.shop-grid .shop-offer-deal{position:relative;z-index:1}
.shop-grid .shop-offer-deal{background:#161618d9;border-color:#ffffff1f}
.shop-soon-col{display:grid;grid-template-rows:1fr 1fr;gap:16px}
.shop-soon{position:relative;display:grid;align-content:end;justify-items:start;gap:10px;min-height:0;padding:26px;overflow:hidden;border:1px solid #ffffff17;border-radius:18px;background:linear-gradient(155deg,#29292c,#1d1d1f 70%)}
.shop-soon .shop-soon-mark{position:absolute;top:-34px;right:-34px;width:170px;height:170px;opacity:.07}
.shop-soon .shop-tag{border-color:#ffffff30;color:#b4b4b4}
.shop-soon strong{font-family:'Dela Gothic One',Unbounded,Arial,sans-serif;font-size:20px;letter-spacing:-.3px;color:#cfcfcf}
@media(max-width:1100px){.shop-grid{grid-template-columns:1fr}.shop-soon-col{grid-template-rows:none;grid-template-columns:1fr 1fr}.shop-soon{min-height:160px}}
@media(max-width:700px){.shop-grid>.shop-offer{min-height:440px}.shop-grid .shop-offer-deal{border:0;background:none}.shop-grid .shop-offer-art::after{background:linear-gradient(0deg,#1c1c1ff5 0%,#1c1c1fd1 45%,#1c1c1f26 100%)}}
@media(max-width:480px){.shop-soon-col{grid-template-columns:1fr}.shop-soon{min-height:130px;padding:20px}}
@media(prefers-reduced-motion:reduce){.shop-grid>.shop-offer,.shop-grid>.shop-offer::before{transition:none}}

/* England: accent colours like the standard four, and its colour photos shown in black and white like the other cities. */
:root[data-country="ENG"]{--accent:#c9a0a0;--accent-rgb:201,160,160}
.arena-country[data-country="ENG"]{--arena-accent:#c9a0a0}
.target-country-option[data-country="ENG"]:hover strong{color:#c9a0a0}
.join-nation-option[data-country="ENG"]{--join-accent:201,160,160}
.lobby-team-nicknames[data-country="ENG"]{--nickname-color:#c9a0a0}
img[src*="assets/variants/"]{filter:grayscale(1) contrast(1.1)}
.item-banner{background-color:#808080;background-blend-mode:luminosity}
img[src$="eng/westminster.jpg"]{object-position:center 58%}
img[src$="eng/manchester.jpg"]{object-position:center 30%}
img[src$="eng/liverpool.jpg"]{object-position:center 40%}
.city-photo[src=""],.target-city-photo[src=""]{visibility:hidden}
.city-scene:has(.city-photo[src=""]){background:linear-gradient(160deg,#242426,#161618)}
.item-city.no-photo{background:linear-gradient(155deg,#29292c,#1b1b1d 70%)}
.country-picker-label{margin:18px 0 10px;font-size:10px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:#8a8a8a}

/* The shop logo is placed against the menu column; without this its anchor changed whenever the page re-rendered without a transition. */
.shop-shell>.menu-content{position:relative}
/* Abilities: the shop column of ability cards, the pack, the inventory card section and the party panel. */
.ability-icon{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border:1px solid #ffffff1f;border-radius:11px;background:#ffffff08;color:#e6e6e6}
.ability-icon svg{width:20px;height:20px}
[data-kind="active"]>.ability-icon{border-color:#c6585966;color:#e8b4b4}
.shop-grid>.shop-pack{grid-column:1/-1;min-height:clamp(300px,36vh,400px)}
.shop-pack .shop-offer-art::after{background:linear-gradient(90deg,#1c1c1ff5 0%,#1c1c1fcc 42%,#1c1c1f26 78%)}
.shop-pack-items{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 0;padding:0;list-style:none}
.shop-pack-items li{display:flex;align-items:center;gap:8px;padding:7px 11px;border:1px solid #ffffff1f;border-radius:9px;background:#0e0e10b3;font-size:12px;color:#e2e2e2}
.shop-pack-items .flag{width:20px;height:14px;border-radius:2px}
.shop-pack-items svg{width:16px;height:16px}
.shop-ability-col{display:grid;grid-template-rows:1fr 1fr;gap:16px}
.shop-ability{position:relative;display:grid;align-content:end;justify-items:start;gap:10px;padding:24px;border:1px solid #ffffff17;border-radius:18px;background:linear-gradient(155deg,#29292c,#1d1d1f 70%);transition:border-color .3s ease}
@media(hover:hover){.shop-ability:hover{border-color:#ffffff33}}
.shop-ability>.ability-icon{position:absolute;top:22px;right:22px}
.shop-ability .shop-tag{border-color:#ffffff30;color:#b4b4b4}
.shop-ability[data-kind="active"] .shop-tag{border-color:#c6585966;color:#e3a3a3}
.shop-ability strong{font-family:'Dela Gothic One',Unbounded,Arial,sans-serif;font-size:20px;letter-spacing:-.3px;color:#ececec}
.shop-ability p{margin:0;font-size:12px;line-height:1.5;color:#a8a8a8}
.shop-ability .shop-offer-buy{justify-content:flex-start;gap:14px;margin-top:4px}
.shop-ability .shop-offer-buy button{min-width:120px;min-height:40px}
.shop-ability .shop-price strong{font-size:20px}
.tile-badge{position:absolute;top:8px;right:8px;display:grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#c65859;font-size:10px;font-style:normal;font-weight:700;color:#fff}
dialog.inventory-dialog{max-height:calc(100vh - 32px);overflow-y:auto}
.item-about{margin:0;font-size:13px;line-height:1.6;color:#b4b4b4}
.item-abilities{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.item-ability{display:flex;gap:14px;padding:14px;border:1px solid #ffffff14;border-radius:12px;background:#171719;opacity:.62}
.item-ability.is-owned{opacity:1;border-color:#ffffff26}
.item-ability small{font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#8a8a8a}
.item-ability strong{display:block;margin:3px 0 4px;font-size:14px;color:#ececec}
.item-ability p{margin:0;font-size:12px;line-height:1.5;color:#a8a8a8}
.nation-abilities{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px;margin:0 0 24px}
.ability-row{display:flex;align-items:flex-start;gap:16px;padding:20px;border:1px solid #ffffff17;border-radius:14px;background:linear-gradient(120deg,#ffffff06,transparent 70%),#141416}
.ability-row.is-locked{opacity:.55}
.ability-copy{display:grid;gap:4px;flex:1;min-width:0}
.ability-copy small{font-size:10px;color:#8a8a8a}
.ability-copy strong{font-size:15px;color:#f0f0f0}
.ability-copy p{margin:0;font-size:12px;line-height:1.5;color:#a8a8a8}
.ability-status{margin-top:4px;font-size:12px;font-weight:600;color:#d8d8d8}
.ability-row[data-kind="active"] .ability-status{color:#e3a3a3}
.ability-actions{display:grid;gap:8px;justify-items:end;align-self:center}
.ability-actions .tiny{min-height:36px;white-space:nowrap}
.intel-dialog{width:min(480px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow-y:auto}
.intel-head{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.intel-head .flag{width:48px;height:32px;border-radius:5px}
.intel-head h2{margin:4px 0 0}
@media(max-width:1100px){.shop-ability-col{grid-template-rows:none;grid-template-columns:1fr 1fr}}
@media(max-width:700px){.shop-ability-col{grid-template-columns:1fr}.ability-row{flex-wrap:wrap}.ability-actions{justify-items:stretch;width:100%}}
@media(prefers-reduced-motion:reduce){.shop-ability{transition:none}}

/* Tags: a one-line box so capitals sit in the optical middle; the right padding absorbs the letter-spacing after the last letter. */
.shop-tag{line-height:1;padding:7px 8px 7px 9px}
/* The pack is not a country card: St George's cross across a dark cloth instead of the photo, in colour, with the contents on the left. */
.shop-grid>.shop-pack .shop-offer-art{filter:none;background:
 linear-gradient(90deg,transparent calc(66% - 34px),#a9444799 calc(66% - 34px),#a9444799 calc(66% + 34px),transparent calc(66% + 34px)),
 linear-gradient(transparent calc(50% - 30px),#a9444799 calc(50% - 30px),#a9444799 calc(50% + 30px),transparent calc(50% + 30px)),
 radial-gradient(70% 90% at 66% 50%,#3a3335,#1c1c1f 75%)}
.shop-grid>.shop-pack .shop-offer-art::after{background:linear-gradient(90deg,#1c1c1ff7 0%,#1c1c1fd9 34%,#1c1c1f40 62%,#1c1c1f1a 100%)}
.shop-grid>.shop-pack{border-color:#c6585940}
.shop-pack .shop-tag{border-color:#c6585980;color:#e8b0b0}
@media(max-width:700px){.shop-grid>.shop-pack .shop-offer-art::after{background:linear-gradient(0deg,#1c1c1ff7 0%,#1c1c1fd9 50%,#1c1c1f33 100%)}}

/* Attack modes: the choice in the create form, defence orders, the attack dialog fields and the «Точный удар» bar. */
.attack-mode-list{display:grid;gap:8px}
.attack-mode-option{position:relative;display:flex;flex-direction:row;align-items:center;text-align:left;gap:14px;margin:0;padding:14px 16px;border:1px solid #ffffff14;border-radius:12px;background:#0f0f0f;cursor:pointer;transition:border-color .18s ease,background-color .18s ease}
.attack-mode-option:hover{background:#141414}
.attack-mode-option input{position:absolute;opacity:0;pointer-events:none}
.attack-mode-option:has(input:checked){border-color:#ffffff4d;background:#161616}
.attack-mode-option:has(input:focus-visible){outline:2px solid #ffffffa0;outline-offset:2px}
.attack-mode-icon{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border:1px solid #ffffff1f;border-radius:10px;color:#cfcfcf}
.attack-mode-icon svg{width:18px;height:18px}
.attack-mode-copy{display:grid;gap:3px;flex:1;min-width:0}
.attack-mode-copy strong{font-size:13px;color:#ececec}
.attack-mode-copy small{font-size:11px;line-height:1.45;color:#8a8a8a}
.attack-mode-check{flex:0 0 18px;width:18px;height:18px;border:1.5px solid #ffffff40;border-radius:50%;transition:border-color .18s ease,box-shadow .18s ease}
.attack-mode-option:has(input:checked) .attack-mode-check{border-color:#e7e7e7;box-shadow:inset 0 0 0 4px #161616,inset 0 0 0 9px #e7e7e7}
.attack-mode-badge{display:inline-flex;align-items:center;gap:6px;margin-right:8px;padding:3px 8px;border:1px solid #ffffff26;border-radius:999px;font-size:11px;font-weight:600;color:#e6e6e6;vertical-align:1px}
.attack-mode-badge svg{width:13px;height:13px}
.attack-mode-fields{display:grid;gap:10px;margin:16px 0 14px}
.attack-mode-label{font-size:11px;font-weight:600;letter-spacing:.4px;color:#b3b3b3}
.troops-field{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px 12px;margin:0}
.troops-field>span{font-size:12px;color:#cfcfcf}
.troops-field output{font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;color:#f0f0f0}
.troops-field small{grid-column:1/-1;font-size:11px;color:#8a8a8a}
.share-editor{display:grid;gap:8px}
.share-row{display:grid;grid-template-columns:minmax(90px,140px) 1fr 44px 70px;align-items:center;gap:10px;margin:0}
.share-row>span{font-size:12px;color:#d0d0d0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.share-row output{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right;color:#f0f0f0}
.share-row small{font-size:11px;font-variant-numeric:tabular-nums;text-align:right;color:#8a8a8a}
.share-row input[type=range],.troops-field input[type=range]{width:100%;min-height:0;accent-color:#e7e7e7}
.share-total{display:flex;align-items:center;gap:10px;padding-top:6px;border-top:1px solid #ffffff12;font-size:12px;color:#a8a8a8}
.share-total strong{font-variant-numeric:tabular-nums;color:#e6e6e6}
.share-total strong.is-off{color:#e08a8a}
.share-total .tiny{margin-left:auto}
.tactic-choice{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border:1px solid #ffffff14;border-radius:11px;background:#0d0d0d}
.tactic-choice label{position:relative;display:flex;align-items:center;justify-content:center;min-height:40px;margin:0;border-radius:8px;font-size:13px;font-weight:600;color:#8d8d8d;cursor:pointer;transition:color .18s ease,background-color .18s ease}
.tactic-choice input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.tactic-choice label:has(input:checked){background:#262626;color:#f2f2f2}
.tactic-choice label:has(input:focus-visible){outline:2px solid #ffffffa0;outline-offset:-2px}
.defense-panel{display:grid;gap:14px;margin:0 0 24px;padding:20px;border:1px solid #ffffff17;border-radius:14px;background:#141416}
.defense-head{display:flex;align-items:flex-start;gap:16px}
.defense-head .tiny{align-self:center;min-height:36px}
.defense-chips{display:flex;flex-wrap:wrap;gap:8px}
.defense-chips span{display:grid;gap:2px;padding:9px 12px;border:1px solid #ffffff17;border-radius:10px;background:#0f0f11;font-size:12px;font-variant-numeric:tabular-nums;color:#cfcfcf}
.defense-chips b{font-size:10px;font-weight:600;letter-spacing:.4px;color:#8a8a8a}
.defense-dialog{width:min(520px,calc(100vw - 32px))}
.timing-dialog{width:min(520px,calc(100vw - 32px))}
.timing-bar{position:relative;height:46px;margin:18px 0 10px;border:1px solid #ffffff1f;border-radius:12px;background:#0d0d0f;overflow:hidden}
.timing-zone{position:absolute;top:0;bottom:0;background:#c6585933;border-inline:1px solid #c65859aa}
.timing-marker{position:absolute;top:4px;bottom:4px;width:4px;margin-left:-2px;border-radius:2px;background:#f2f2f2;box-shadow:0 0 12px #ffffff80}
.timing-bar.is-hit{border-color:#7fbf8f}
.timing-bar.is-hit .timing-zone{background:#7fbf8f40}
.timing-bar.is-miss{border-color:#e08a8a}
.timing-clock{height:3px;margin-bottom:16px;border-radius:2px;background:#ffffff12;overflow:hidden}
.timing-clock i{display:block;height:100%;background:#e7e7e7}
@media(max-width:600px){.share-row{grid-template-columns:1fr 44px 64px}.share-row input[type=range]{grid-column:1/-1;grid-row:2}}
@media(prefers-reduced-motion:reduce){.attack-mode-option,.tactic-choice label{transition:none}}

/* The pack: four city photos side by side instead of the cross, black and white like the other cards; the savings tag stays gold. */
.shop-grid>.shop-pack .shop-pack-mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;padding-left:34%;background:#1c1c1f;filter:grayscale(1)}
.shop-pack-mosaic i{display:block;min-width:0;background-size:cover;background-position:center}
.shop-grid>.shop-pack .shop-pack-mosaic::after{background:linear-gradient(90deg,#1c1c1f 0%,#1c1c1f 35%,#1c1c1fb3 46%,#1c1c1f1a 72%),linear-gradient(0deg,#1c1c1fb3 0%,transparent 45%)}
.shop-grid .shop-pack .shop-tag{border-color:#e0c48366;color:#e0c483}
@media(max-width:700px){.shop-grid>.shop-pack .shop-pack-mosaic{padding-left:0}.shop-grid>.shop-pack .shop-pack-mosaic::after{background:linear-gradient(0deg,#1c1c1ff7 0%,#1c1c1fd9 50%,#1c1c1f33 100%)}}

/* Header lockup: the wordmark sized to the 43px globe (28px on phones), the two lines 5px apart, their ink centred on the globe. */
.brand strong{font-size:10px;line-height:1.2}
.brand small{font-size:8px;line-height:1.2;margin-top:1px}
@media(min-width:1920px){.brand strong{font-size:11px}.brand small{font-size:8.5px}}
@media(max-width:800px){header .brand strong{font-size:9px;line-height:1.2}header .brand small{font-size:7.5px;line-height:1.2;margin-top:1px}}

/* Mod «Санкции»: the mode list under the switch in the create form, the country panel, the vote and the proposal dialog. */
.sanction-mode-list{display:none;margin-top:8px}
.cp-form:has([name=sanctionsMode]:checked) .sanction-mode-list{display:grid}
.sanction-panel{display:grid;gap:14px;margin:0 0 24px;padding:20px;border:1px solid #ffffff17;border-radius:14px;background:#141416}
.sanction-panel:has(.sanction-status.is-on){border-color:#c6585959}
.sanction-status{display:grid;gap:3px;margin:4px 0 0;font-size:12px;color:#9a9a9a}
.sanction-status b{font-size:13px;font-weight:600;color:#cfcfcf}
.sanction-status.is-on b{color:#e8a3a3}
.sanction-status.is-soon b{color:#e0c483}
.sanction-note{display:block;margin:6px 0 0;font-size:11px;line-height:1.45;color:#8a8a8a}
.sanction-meter{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 12px}
.sanction-meter>span{font-size:12px;color:#cfcfcf}
.sanction-meter strong{font-size:14px;font-variant-numeric:tabular-nums;color:#f0f0f0}
.sanction-meter i{grid-column:1/-1;height:6px;border-radius:3px;background:linear-gradient(90deg,#c65859 var(--fill),#ffffff12 var(--fill))}
.sanction-meter small{grid-column:1/-1;font-size:11px;line-height:1.45;color:#8a8a8a}
.sanction-vote{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid #ffffff17;border-radius:12px;background:#0f0f11}
.sanction-vote>.flag{flex:0 0 36px;width:36px;height:24px;border-radius:3px}
.sanction-vote>div:not(.sanction-ballot){display:grid;gap:3px;flex:1;min-width:0}
.sanction-vote small{font-size:10px;font-weight:600;letter-spacing:.4px;color:#8a8a8a;text-transform:uppercase}
.sanction-vote strong{font-size:14px;color:#ececec}
.sanction-vote p{margin:0;font-size:12px;color:#9a9a9a}
.sanction-ballot{display:flex;gap:8px}
.sanction-ballot .tiny{min-width:76px;min-height:36px}
.sanction-propose{display:flex;align-items:center;gap:16px}
.sanction-propose p{flex:1;margin:0;font-size:12px;line-height:1.5;color:#9a9a9a}
.sanction-propose .tiny{min-height:36px;white-space:nowrap}
.sanction-others{display:flex;flex-wrap:wrap;gap:8px}
.sanction-others>span{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #c6585933;border-radius:10px;background:#0f0f11;font-size:12px;color:#a8a8a8}
.sanction-others b{font-weight:600;color:#e2e2e2}
.sanction-others .flag{width:20px;height:14px;border-radius:2px}
.sanction-dialog{width:min(540px,calc(100vw - 32px))}
.sanction-targets{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin:16px 0}
.sanction-targets label,.sanction-packages label{position:relative;display:flex;align-items:center;gap:10px;margin:0;padding:12px 14px;border:1px solid #ffffff14;border-radius:11px;background:#0f0f0f;font-size:13px;font-weight:600;color:#cfcfcf;cursor:pointer;transition:border-color .18s ease,background-color .18s ease}
.sanction-targets input,.sanction-packages input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.sanction-targets label:has(input:checked),.sanction-packages label:has(input:checked){border-color:#ffffff4d;background:#1a1a1a;color:#f2f2f2}
.sanction-targets label:has(input:focus-visible),.sanction-packages label:has(input:focus-visible){outline:2px solid #ffffffa0;outline-offset:2px}
.sanction-targets label{flex-direction:row;justify-content:flex-start;text-align:left}
.sanction-targets .flag{flex:0 0 24px;width:24px;height:16px;border-radius:2px}
.sanction-packages{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 16px}
.sanction-packages label{display:grid;gap:3px;align-content:start}
.sanction-packages small{font-size:11px;font-weight:400;line-height:1.4;color:#8a8a8a}
@media(max-width:600px){.sanction-vote{flex-wrap:wrap}.sanction-ballot{width:100%}.sanction-ballot .tiny{flex:1}.sanction-propose{flex-direction:column;align-items:stretch}.sanction-packages{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.sanction-targets label,.sanction-packages label{transition:none}}

/* Host undo in the logs: a square arrow at the end of the row; an undone row is struck through and labelled. */
.logs li{align-items:center}
.log-undo{flex:0 0 32px;display:grid;place-items:center;width:32px;height:32px;margin-left:auto;padding:0;border:1px solid #ffffff1c;border-radius:8px;background:#151515;color:#bdbdbd;transition:background-color .16s ease,border-color .16s ease,color .16s ease,transform .12s ease}
.log-undo svg{width:16px;height:16px}
.log-undo:hover:not(:disabled){background:#222;border-color:#ffffff40;color:#f2f2f2}
.log-undo:active:not(:disabled){transform:scale(.92)}
.log-undo:focus-visible{outline:2px solid #ffffffa0;outline-offset:2px}
.logs li.is-undone>span{color:var(--muted);text-decoration:line-through;text-decoration-color:#ffffff40}
.log-undone{flex:0 0 auto;margin-left:auto;font-size:11px;font-style:normal;letter-spacing:.3px;color:var(--muted)}
/* «Позвать ведущего»: the accent-tinted item of the country sidebar, pinned to the bottom of the vertical sidebar. */
.sidebar-trade.sidebar-call{border-color:rgba(var(--accent-rgb),.45);background:rgba(var(--accent-rgb),.12);color:#f2f2f2;transition:background-color .16s ease,border-color .16s ease,transform .12s ease}
.sidebar-trade.sidebar-call>.sidebar-trade-icon{color:var(--accent)}
.sidebar-trade.sidebar-call:hover:not(:disabled){background:rgba(var(--accent-rgb),.2);border-color:rgba(var(--accent-rgb),.7)}
.sidebar-trade.sidebar-call:active:not(:disabled){transform:scale(.97)}
.sidebar-trade.sidebar-call:focus-visible{outline:2px solid rgba(var(--accent-rgb),.8);outline-offset:3px}
.sidebar-trade.sidebar-call:disabled{border-color:#ffffff14;background:#ffffff05;color:var(--muted);opacity:1}
.sidebar-trade.sidebar-call:disabled>.sidebar-trade-icon{color:var(--muted)}
@media(min-width:1651px){aside>.sidebar-call{margin-top:auto}}
@media(min-width:801px) and (max-width:1650px){aside{grid-template-columns:minmax(0,1fr);grid-auto-flow:column;grid-auto-columns:auto}}
@media(max-width:800px){aside>.sidebar-call{grid-column:1/-1}}
/* Main menu: leaderboard and friends as two equal squares, like the inventory button. */
.home-social-nav button.social-square{display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border:1px solid #ffffff25;border-radius:10px;background:#141414;color:#d0d0d0;box-shadow:inset 0 1px 0 #ffffff06}
.home-social-nav button.social-square svg{width:20px;height:20px}
.home-social-nav button.social-square:hover:not(:disabled){background:#202020;border-color:#ffffff4d;color:#eee}
.home-social-nav button.social-square:focus-visible{outline:2px solid #9b9b9b;outline-offset:4px}
/* The «Вся Англия» pack: a plain grey card with a slow sheen instead of photos. */
.shop-grid>.shop-pack .shop-pack-sheen{filter:none;background:linear-gradient(110deg,#1c1c1f 0%,#1c1c1f 30%,#2c2c30 44%,#3a3a3f 50%,#2c2c30 56%,#1c1c1f 70%,#1c1c1f 100%);background-size:260% 100%;background-position:100% 0;animation:pack-sheen 9s ease-in-out infinite}
.shop-grid>.shop-pack{border-color:#ffffff26}
.shop-grid>.shop-pack .shop-pack-sheen::after{background:linear-gradient(90deg,#1c1c1fcc 0%,#1c1c1f66 45%,#1c1c1f00 75%)}
@keyframes pack-sheen{0%,12%{background-position:100% 0}60%,100%{background-position:0 0}}
@media(prefers-reduced-motion:reduce){.shop-grid>.shop-pack .shop-pack-sheen{animation:none;background-position:50% 0}.log-undo,.sidebar-trade.sidebar-call{transition:none}}

/* Dela Gothic One: the savings tag of the pack stays on one line. */
.shop-pack .shop-tag{white-space:nowrap}

/* New aspects, events and research. Mod colours: events blue, culture gold, sanctions copper; rarity: grey, blue, gold. */
:root{--set-events:#7fa9dd;--set-culture:#d8b56a;--set-sanctions:#d48a68;--rare-common:#a3a3a3;--rare-rare:#6f9cf0;--rare-legendary:#e6c878}
.cardinal-mark{display:inline-grid;place-items:center;width:16px;height:16px;margin-left:7px;border-radius:50%;background:#d04848;color:#fff;font:700 11px/1 Manrope,Arial,sans-serif;font-style:normal;vertical-align:2px;box-shadow:0 0 0 2px #d0484833}
.aspect-set-tag{display:inline-flex;align-items:center;justify-self:start;width:fit-content;margin:6px 0 2px;padding:3px 8px;border:1px solid #ffffff26;border-radius:999px;font-size:10px;font-weight:600;letter-spacing:.3px;color:#bdbdbd;line-height:1.2}
.aspect-set-tag[data-set="events"]{border-color:color-mix(in srgb,var(--set-events) 55%,transparent);color:var(--set-events)}
.aspect-set-tag[data-set="culture"]{border-color:color-mix(in srgb,var(--set-culture) 55%,transparent);color:var(--set-culture)}
.aspect-set-tag[data-set="sanctions"]{border-color:color-mix(in srgb,var(--set-sanctions) 55%,transparent);color:var(--set-sanctions)}
.draft-aspect strong{display:inline-flex;align-items:center}
.nation-aspect .aspect-set-tag{margin:0 0 4px}
.aspect-status{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.aspect-status span{display:grid;gap:2px;padding:7px 10px;border:1px solid #ffffff17;border-radius:9px;background:#0f0f11;font-size:12px;color:#d0d0d0}
.aspect-status b{font-size:10px;font-weight:600;letter-spacing:.3px;color:#8a8a8a}
.rarity-badge{display:inline-flex;align-items:center;gap:6px;width:fit-content;padding:3px 9px;border:1px solid #ffffff30;border-radius:999px;font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--rare-common);line-height:1.2}
.rarity-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.rarity-badge[data-rarity="rare"]{border-color:color-mix(in srgb,var(--rare-rare) 60%,transparent);color:var(--rare-rare)}
.rarity-badge[data-rarity="legendary"]{border-color:color-mix(in srgb,var(--rare-legendary) 70%,transparent);color:var(--rare-legendary);box-shadow:0 0 14px -2px color-mix(in srgb,var(--rare-legendary) 55%,transparent)}
.world-event-banner .rarity-badge{margin-right:8px;vertical-align:1px}
.world-event-announcement .rarity-badge{margin:0 auto 10px}
.world-event-announcement.rarity-legendary>div{box-shadow:0 0 0 1px color-mix(in srgb,var(--rare-legendary) 45%,transparent),0 0 60px -10px color-mix(in srgb,var(--rare-legendary) 60%,transparent)}
.world-event-current[data-rarity="legendary"]{border-color:color-mix(in srgb,var(--rare-legendary) 40%,transparent)}
.world-event-current .rarity-badge{display:flex;margin:10px 0 4px}
/* With every pack on the draft has eleven filters: on a phone they become one scrolling row, so the list keeps its room. */
@media(max-width:700px){.draft-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;margin-inline:-2px;padding:2px}.draft-filters::-webkit-scrollbar{display:none}.draft-filters button{flex:0 0 auto}}
.world-events-history article .rarity-badge{align-self:center}
.event-choice,.event-forecast,.arena-forecast{animation:ov-in .22s cubic-bezier(.2,.8,.2,1) both}
.event-choice{display:grid;gap:10px;margin:0 0 18px;padding:18px 20px;border:1px solid #ffffff1f;border-radius:14px;background:#141416}
.event-choice[data-rarity="legendary"]{border-color:color-mix(in srgb,var(--rare-legendary) 40%,transparent)}
.event-choice-head{display:flex;align-items:center;gap:10px}
.event-choice-head strong{font-size:15px;color:#eee}
.event-choice p{margin:0;font-size:13px;color:#b8b8b8}
.event-choice-actions,.special-row,.arena-forecast-actions{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.ov-field{display:grid;gap:5px;margin:0;font-size:11px;color:#9a9a9a}
.ov-field span{letter-spacing:.3px}
.ov-field select,.ov-field input{min-width:120px;min-height:38px;padding:7px 10px;border:1px solid #ffffff24;border-radius:9px;background:#0d0d0f;color:#eee;font:inherit;font-size:13px}
.ov-field.ov-wide select{min-width:240px}
.event-forecast{display:grid;gap:6px;margin:0 0 18px;padding:16px 18px;border:1px dashed #ffffff26;border-radius:14px;background:#111113}
.event-forecast strong,.arena-forecast strong{font-size:15px;color:#eee}
.event-forecast p,.arena-forecast p{margin:0;font-size:12px;color:#a8a8a8}
.arena-forecasts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:0 0 18px}
.arena-forecast{display:grid;gap:7px;padding:16px 18px;border:1px solid #ffffff1f;border-radius:14px;background:#141416}
.arena-forecast[data-rarity="rare"]{border-color:color-mix(in srgb,var(--rare-rare) 35%,transparent)}
.arena-forecast[data-rarity="legendary"]{border-color:color-mix(in srgb,var(--rare-legendary) 45%,transparent)}
.arena-forecast small{font-size:11px;color:#8a8a8a}
.special-panel{display:grid;gap:14px;margin:0 0 24px;padding:20px;border:1px solid #ffffff17;border-radius:14px;background:#141416}
.special-head{display:flex;align-items:center;gap:14px}
.special-head small{display:block;font-size:10px;letter-spacing:.4px;color:#8a8a8a}
.special-head strong{font-size:15px;color:#eee}
.special-icon{display:grid;place-items:center;width:38px;height:38px;border:1px solid #ffffff1f;border-radius:10px;color:var(--accent)}
.special-icon svg{width:20px;height:20px}
.special-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px}
.special-item{display:grid;gap:10px;align-content:start;padding:14px 16px;border:1px solid #ffffff14;border-radius:12px;background:#0f0f11}
.special-item strong{font-size:13px;color:#e6e6e6}
.special-item p{margin:0;font-size:12px;color:#a8a8a8}
.special-armies{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.special-armies li{display:flex;align-items:center;gap:8px;font-size:12px;color:#cfcfcf}
.special-armies li b{margin-left:auto;font-variant-numeric:tabular-nums;color:#eee}
.special-armies .flag{width:20px;height:14px;border-radius:2px}
.city-extra{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin:12px 0;padding:12px 0;border-block:1px solid #ffffff10}
.city-extra+.city-extra{margin-top:-12px;border-top:0}
.city-extra .ov-field select{min-width:150px}
.science-tier{display:grid;gap:14px;margin:0 0 22px}
.science-tier-head{display:flex;align-items:center;gap:12px}
.science-tier-head h2{margin:0;font-size:18px}
.science-tier.is-locked .technology-card{opacity:.62}
.technology-locked{border-style:dashed}
.science-locked{display:grid;gap:8px;padding:24px}
.science-locked h2{display:flex;align-items:center;margin:0}
[data-ov].is-pending{opacity:.6;pointer-events:none}
[data-ov].is-armed{border-color:#d04848;color:#ffb3b3;box-shadow:0 0 0 3px #d0484822}
@keyframes ov-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:600px){.ov-field select,.ov-field input,.ov-field.ov-wide select{min-width:0;width:100%}.ov-field{flex:1 1 140px}.special-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.event-choice,.event-forecast,.arena-forecast{animation:none}}

/* Polish: the rarity badge sits on its own line in the announcement, the alternative-aspect mark is drawn, not typed,
   the ready card keeps the count and its bars on one row. */
.world-event-announcement .rarity-badge{display:flex;margin:0 auto 14px}
.cardinal-mark{font-size:0}
.cardinal-mark svg{display:block;width:10px;height:10px}
.turn-ready-card{grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:center}
.turn-ready-card>.turn-clock-label,.turn-ready-card>.tiny{grid-column:1/-1}
.turn-ready-card .turn-ready-dots{min-width:0}

/* Reference: the square on the main menu and the «Справка» page. */
.guide-open{position:fixed;left:max(24px,env(safe-area-inset-left));bottom:max(24px,env(safe-area-inset-bottom));z-index:3;display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:0;border:1px solid #ffffff25;border-radius:10px;background:#141414;color:#d0d0d0;box-shadow:inset 0 1px 0 #ffffff06;transition:background-color .12s,border-color .12s,color .12s,transform .16s cubic-bezier(.2,.8,.2,1)}
.guide-open svg{width:20px;height:20px}
.guide-open:hover{background:#202020;border-color:#ffffff4d;color:#eee}
.guide-open:active{transform:scale(.94)}
.guide-open:focus-visible{outline:2px solid #9b9b9b;outline-offset:4px}
.minimal-shell.guide-shell{max-width:1120px;width:100%;justify-content:flex-start}
.guide-panel{width:100%;min-width:0;padding:26px;border-radius:13px;background:#121212;border-color:#ffffff18}
.guide-panel>.section-title{gap:14px;align-items:center;flex-wrap:wrap;margin:0 0 22px}
.guide-panel>.section-title h2{margin:9px 0 0;font-size:23px}
.guide-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:28px;align-items:start}
/* Global nav rules style the game header; the reference list resets them. */
.guide-layout>.guide-nav{order:0;flex:none;width:auto;height:auto;position:sticky;top:20px;align-self:start;display:grid;align-content:start;justify-content:stretch;gap:4px;overflow:visible}
.guide-tab{display:flex;align-items:center;gap:11px;width:100%;min-height:42px;padding:9px 12px;border:1px solid transparent;border-radius:10px;background:transparent;color:#9a9a9a;font-size:13px;font-weight:500;text-align:left;transition:background-color .14s,border-color .14s,color .14s}
.guide-tab svg{flex:0 0 18px;width:18px;height:18px}
.guide-tab:hover{background:#1a1a1a;color:#e4e4e4}
.guide-tab[aria-selected="true"]{background:#1d1d1d;border-color:#ffffff22;color:#f2f2f2}
.guide-tab:active{transform:scale(.98)}
.guide-body{display:grid;gap:22px;min-width:0;scroll-margin-top:16px}
.guide-body:focus{outline:none}
.guide-body.is-entering{animation:guide-in .24s cubic-bezier(.2,.8,.2,1) both}
.guide-body .guide-title{margin:0;font-size:20px;line-height:1.3}
.guide-text{margin:0;max-width:68ch;font-size:14px;line-height:1.65;color:#c4c4c4}
.guide-block{display:grid;gap:12px}
.guide-body .guide-block h3{display:flex;align-items:center;gap:10px;margin:0;font-size:15px;color:#ececec}
.guide-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:0}
.guide-facts>div{display:grid;gap:6px;align-content:start;padding:13px 15px;border:1px solid #ffffff14;border-radius:12px;background:#0f0f11}
.guide-facts dt{font-size:11px;letter-spacing:.3px;color:#8a8a8a}
.guide-facts dd{margin:0;font-size:15px;font-weight:600;color:#ececec;font-variant-numeric:tabular-nums}
.guide-steps{display:grid;gap:10px;margin:0;padding:0;list-style:none;counter-reset:guide-step}
.guide-steps li{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:12px;row-gap:3px;counter-increment:guide-step}
.guide-steps li::before{content:counter(guide-step);grid-row:1/3;display:grid;place-items:center;width:28px;height:28px;border:1px solid #ffffff24;border-radius:50%;font-size:12px;font-weight:600;color:#d8d8d8}
.guide-steps strong{align-self:center;font-size:14px;color:#ececec}
.guide-steps span{font-size:13px;line-height:1.6;color:#a8a8a8}
.guide-entries{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.guide-entry{display:grid;gap:8px;align-content:start;padding:14px 16px;border:1px solid #ffffff14;border-radius:12px;background:#0f0f11}
.guide-entry>strong{display:flex;align-items:center;font-size:14px;color:#ececec}
.guide-entry p{margin:0;font-size:12.5px;line-height:1.6;color:#a8a8a8}
.guide-entry-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.guide-entry-tags .aspect-set-tag{margin:0}
.guide-share{font-size:12px;font-weight:500;color:#8a8a8a}
.guide-tag{display:inline-flex;align-items:center;padding:3px 8px;border:1px solid #ffffff1f;border-radius:999px;font-size:10px;font-weight:600;letter-spacing:.3px;color:#9a9a9a;line-height:1.2}
.guide-chips{display:flex;flex-wrap:wrap;gap:8px}
.guide-chips button[aria-pressed="true"]{background:#ececec;border-color:#ececec;color:#111}
.guide-table-wrap{overflow-x:auto;border:1px solid #ffffff14;border-radius:12px}
.guide-table{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.guide-table th,.guide-table td{padding:10px 14px;text-align:right;border-bottom:1px solid #ffffff10;white-space:nowrap}
.guide-table tr:last-child>*{border-bottom:0}
.guide-table th:first-child{text-align:left;color:#8a8a8a;font-weight:500}
.guide-table thead th{font-size:11px;font-weight:500;color:#8a8a8a;background:#0f0f11}
.guide-table td{color:#e4e4e4}
@keyframes guide-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:800px){
 .guide-panel{padding:20px 16px}
 .guide-layout{grid-template-columns:1fr;gap:18px}
 .guide-layout>.guide-nav{position:static;display:flex;justify-content:flex-start;gap:6px;overflow-x:auto;margin:0 -16px;padding:0 16px 2px;scrollbar-width:none;overscroll-behavior-x:contain}
 .guide-nav::-webkit-scrollbar{display:none}
 .guide-tab{flex:0 0 auto;width:auto;border-color:#ffffff16}
 .guide-entries{grid-template-columns:1fr}
 .guide-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
 .guide-chips{flex-wrap:nowrap;overflow-x:auto;margin:0 -16px;padding:0 16px;scrollbar-width:none}
 .guide-chips::-webkit-scrollbar{display:none}
 .guide-chips button{flex:0 0 auto}
}
@media(prefers-reduced-motion:reduce){.guide-body.is-entering{animation:none}.guide-open,.guide-tab{transition:none}}

/* Brighter country colours. Every place that tints by country (page accent, lobby, join list, arena, attack targets)
   takes the same four values. */
:root[data-country="ES"]{--accent:#e8c547;--accent-rgb:232,197,71}
:root[data-country="FR"]{--accent:#78a6f2;--accent-rgb:120,166,242}
:root[data-country="DE"]{--accent:#eb9b4a;--accent-rgb:235,155,74}
:root[data-country="IT"]{--accent:#68cf8a;--accent-rgb:104,207,138}
.join-nation-option[data-country="ES"]{--join-accent:232,197,71}
.join-nation-option[data-country="FR"]{--join-accent:120,166,242}
.join-nation-option[data-country="DE"]{--join-accent:235,155,74}
.join-nation-option[data-country="IT"]{--join-accent:104,207,138}
.lobby-team-nicknames[data-country="ES"]{--nickname-color:#e8c547}
.lobby-team-nicknames[data-country="FR"]{--nickname-color:#78a6f2}
.lobby-team-nicknames[data-country="DE"]{--nickname-color:#eb9b4a}
.lobby-team-nicknames[data-country="IT"]{--nickname-color:#68cf8a}
.arena-country[data-country="ES"]{--arena-accent:#e8c547}
.arena-country[data-country="FR"]{--arena-accent:#78a6f2}
.arena-country[data-country="DE"]{--arena-accent:#eb9b4a}
.arena-country[data-country="IT"]{--arena-accent:#68cf8a}
.target-country-option[data-country="ES"]:hover strong{color:#e8c547}
.target-country-option[data-country="FR"]:hover strong{color:#78a6f2}
.target-country-option[data-country="DE"]:hover strong{color:#eb9b4a}
.target-country-option[data-country="IT"]:hover strong{color:#68cf8a}
/* The aspect on the country page takes the country's colour, like its frame. */
.nation-aspect[data-group] .nation-aspect-icon{color:var(--accent)}

/* Promo codes */
.shop-wallet{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px}
.shop-wallet .shop-balance{justify-self:auto}
.shop-promo-open{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:9px 16px;border:1px solid #ffffff1c;border-radius:999px;background:#141414;color:#d6d6d6;font-size:12px;font-weight:600;transition:background-color .12s,border-color .12s,color .12s,transform .16s cubic-bezier(.2,.8,.2,1)}
.shop-promo-open svg{width:16px;height:16px;color:#e0c483}
.shop-promo-open:hover{background:#1f1f1f;border-color:#ffffff3a;color:#f2f2f2}
.shop-promo-open:active{transform:scale(.96)}
dialog.promo-dialog{width:calc(100% - 32px);max-width:420px}
.promo-dialog form{display:grid;gap:14px}
.promo-dialog h2{margin:0}
.promo-field{display:grid;gap:7px;font-size:12px;color:#9a9a9a}
.promo-field input{min-height:46px;padding:10px 14px;border:1px solid #ffffff24;border-radius:10px;background:#0d0d0f;color:#f2f2f2;font-size:16px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase}
.promo-field input::placeholder{letter-spacing:0;text-transform:none;font-weight:400;color:#6f6f6f}
.promo-field input[aria-invalid="true"]{border-color:#d0484899}
.promo-error{margin:-4px 0 0;font-size:12px;color:#ff9b9b;animation:guide-in .18s ease both}
.promo-dialog .is-pending{opacity:.7}
@media(prefers-reduced-motion:reduce){.shop-promo-open{transition:none}.promo-error{animation:none}}

/* Promo dialog: the field carries the ticket icon, the two actions share the width. The reel: coin tiles in the colours
   of their band (grey, blue, violet, gold), a gold marker in the centre, edges fading into the dialog. */
:root{--roll-0:#a3a3a3;--roll-1:#6f9cf0;--roll-2:#b48af2;--roll-3:#e6c878}
dialog.promo-dialog{width:calc(100% - 32px);max-width:440px;padding:28px}
dialog.promo-dialog.promo-rolling{max-width:600px}
.promo-dialog form,.promo-roll{display:grid;gap:16px}
.promo-dialog h2{margin:2px 0 0;font-size:22px;line-height:1.25}
.promo-input{position:relative}
.promo-input-icon{position:absolute;left:15px;top:50%;display:grid;width:20px;height:20px;margin-top:-10px;color:#e0c483;pointer-events:none}
.promo-input-icon svg{width:20px;height:20px}
.promo-input input{width:100%;min-height:52px;padding:12px 16px 12px 46px;border:1px solid #ffffff24;border-radius:12px;background:#0d0d0f;color:#f2f2f2;font-size:17px;font-weight:600;letter-spacing:2px;text-transform:uppercase;transition:border-color .14s,box-shadow .14s}
.promo-input input::placeholder{letter-spacing:0;text-transform:none;font-weight:400;color:#6f6f6f}
.promo-input input:focus{outline:none;border-color:#e0c48399;box-shadow:0 0 0 3px #e0c4831f}
.promo-input input[aria-invalid="true"]{border-color:#d0484899;box-shadow:0 0 0 3px #d048481a}
.promo-dialog .promo-error{margin:-6px 0 0}
.promo-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.promo-actions button{min-height:46px}
.promo-actions-single{grid-template-columns:1fr}
.promo-reel{position:relative;height:118px;margin:4px -28px 0;overflow:hidden;border-block:1px solid #ffffff12;background:#0c0c0e;-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
.promo-reel-track{display:flex;gap:8px;height:100%;padding:14px 0;will-change:transform}
.promo-tile{--tone:var(--roll-0);display:grid;place-items:center;align-content:center;gap:6px;flex:0 0 96px;border:1px solid color-mix(in srgb,var(--tone) 45%,transparent);border-radius:12px;background:linear-gradient(180deg,color-mix(in srgb,var(--tone) 16%,#141416),#111113 70%);box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--tone) 70%,transparent)}
.promo-tile svg{width:22px;height:22px;color:var(--tone)}
.promo-tile b{font-size:16px;font-weight:700;color:#f0f0f0;font-variant-numeric:tabular-nums}
.promo-tile[data-tier="1"]{--tone:var(--roll-1)}.promo-tile[data-tier="2"]{--tone:var(--roll-2)}.promo-tile[data-tier="3"]{--tone:var(--roll-3)}
.promo-reel-marker{position:absolute;inset:0 auto 0 50%;width:2px;margin-left:-1px;background:#e0c483;box-shadow:0 0 12px #e0c483aa;pointer-events:none}
.promo-reel-marker::before,.promo-reel-marker::after{content:'';position:absolute;left:50%;width:0;height:0;margin-left:-7px;border:7px solid transparent}
.promo-reel-marker::before{top:0;border-top-color:#e0c483}
.promo-reel-marker::after{bottom:0;border-bottom-color:#e0c483}
.promo-reel.is-stopped .promo-reel-marker{opacity:.35;transition:opacity .3s}
.promo-tile.is-won{animation:promo-won .6s cubic-bezier(.2,.9,.25,1.25) both;border-color:var(--tone);box-shadow:inset 0 -3px 0 var(--tone),0 0 26px color-mix(in srgb,var(--tone) 55%,transparent)}
.promo-roll-note{margin:-4px 0 0;font-size:13px;color:#a8a8a8;font-variant-numeric:tabular-nums}
.promo-odds{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.promo-odds li{--tone:var(--roll-0);display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border:1px solid #ffffff17;border-radius:999px;font-size:11px;color:#cfcfcf;font-variant-numeric:tabular-nums}
.promo-odds li i{width:7px;height:7px;border-radius:50%;background:var(--tone)}
.promo-odds li small{font-size:11px;color:#8a8a8a}
.promo-odds li[data-tier="1"]{--tone:var(--roll-1)}.promo-odds li[data-tier="2"]{--tone:var(--roll-2)}.promo-odds li[data-tier="3"]{--tone:var(--roll-3)}
@keyframes promo-won{0%{transform:scale(1)}45%{transform:scale(1.1)}100%{transform:scale(1.04)}}
@media(max-width:480px){dialog.promo-dialog{padding:22px}.promo-reel{margin-inline:-22px}.promo-tile{flex-basis:84px}}
@media(prefers-reduced-motion:reduce){.promo-tile.is-won{animation:none}.promo-input input{transition:none}}

/* After the first big playtest. Motion: 160–220 ms ease-out for opening, 120 ms for closing; colour comes from the
   country accent (--accent) so every panel matches its country. */
:root{--ov-ease:cubic-bezier(.2,.8,.2,1)}

/* Dropdown: a button in the field style, the list grows from it. */
select[data-ov-native]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.ov-select{position:relative;min-width:150px}
.ov-field .ov-select{min-width:150px}
.ov-field.ov-wide .ov-select{min-width:240px}
.ov-select-button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:40px;padding:8px 12px 8px 13px;border:1px solid #ffffff24;border-radius:10px;background:#0d0d0f;color:#eee;font-size:13px;font-weight:500;text-align:left;transition:border-color .14s,background-color .14s,box-shadow .14s}
.ov-select-button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-select-button svg{flex:0 0 16px;width:16px;height:16px;color:#9a9a9a;transition:transform .2s var(--ov-ease),color .14s}
.ov-select-button:hover:not(:disabled){border-color:#ffffff40;background:#121215}
.ov-select-button:focus-visible{outline:none;border-color:rgba(var(--accent-rgb),.7);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18)}
.ov-select.is-open .ov-select-button{border-color:rgba(var(--accent-rgb),.6)}
.ov-select.is-open .ov-select-button svg{transform:rotate(180deg);color:var(--accent)}
.ov-select-list{position:absolute;z-index:40;top:calc(100% + 6px);left:0;min-width:100%;max-height:260px;overflow-y:auto;margin:0;padding:5px;list-style:none;border:1px solid #ffffff22;border-radius:12px;background:#18181b;box-shadow:0 18px 40px #000a;transform-origin:top center;animation:ov-drop .18s var(--ov-ease) both;scrollbar-width:thin}
.ov-select.is-up .ov-select-list{top:auto;bottom:calc(100% + 6px);transform-origin:bottom center}
.ov-select-list li{padding:8px 11px;border-radius:8px;font-size:13px;color:#d8d8d8;white-space:nowrap;cursor:pointer;transition:background-color .1s,color .1s}
.ov-select-list li:hover,.ov-select-list li:focus{outline:none;background:#ffffff10;color:#fff}
.ov-select-list li[aria-selected="true"]{background:rgba(var(--accent-rgb),.16);color:var(--accent)}
.ov-select-list li[aria-disabled="true"]{opacity:.4;cursor:default}
@keyframes ov-drop{from{opacity:0;transform:translateY(-4px) scale(.97)}to{opacity:1;transform:none}}

/* Number stepper: − field + in one control, no browser arrows. */
.ov-num{display:inline-flex;align-items:stretch;min-height:40px;border:1px solid #ffffff24;border-radius:10px;background:#0d0d0f;overflow:hidden;transition:border-color .14s,box-shadow .14s}
.ov-num:focus-within{border-color:rgba(var(--accent-rgb),.7);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18)}
.ov-num input{width:72px;min-width:0;min-height:0;padding:6px 4px;border:0;border-radius:0;background:transparent;color:#eee;font:inherit;font-size:14px;font-weight:600;text-align:center;font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.ov-field .ov-num input{min-width:0;min-height:0;border:0}
.ov-num input:focus{outline:none}
.ov-num input::-webkit-outer-spin-button,.ov-num input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ov-num-step{display:grid;place-items:center;width:34px;min-height:0;padding:0;border:0;border-radius:0;background:#ffffff07;color:#cfcfcf;font-size:17px;line-height:1;transition:background-color .12s,color .12s}
.ov-num-step:hover{background:#ffffff14;color:#fff}
.ov-num-step:active{background:rgba(var(--accent-rgb),.22);color:var(--accent)}

/* Special panel touches */
.special-meta{margin:0;font-size:12px;color:#a8a8a8}.special-meta b{color:#eee;font-variant-numeric:tabular-nums}
.bet-rarity{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.bet-option{position:relative;display:grid;justify-items:start;gap:6px;padding:10px 11px;border:1px solid #ffffff17;border-radius:11px;background:#0d0d0f;cursor:pointer;transition:border-color .14s,background-color .14s,transform .14s var(--ov-ease)}
.bet-option input{position:absolute;opacity:0;pointer-events:none}
.bet-option b{font-size:18px;color:#eee;font-variant-numeric:tabular-nums}
.bet-option small{font-size:11px;color:#8a8a8a}
.bet-option:hover{border-color:#ffffff33}
.bet-option:has(input:checked){border-color:color-mix(in srgb,var(--tone,#a3a3a3) 70%,transparent);background:color-mix(in srgb,var(--tone,#a3a3a3) 9%,#0d0d0f);box-shadow:0 0 0 1px color-mix(in srgb,var(--tone,#a3a3a3) 35%,transparent)}
.bet-option:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.bet-option[data-rarity="common"]{--tone:var(--rare-common)}.bet-option[data-rarity="rare"]{--tone:var(--rare-rare)}.bet-option[data-rarity="legendary"]{--tone:var(--rare-legendary)}
.bet-quick{display:flex;gap:6px;align-self:end}
.bet-quick button{min-height:40px}
.bet-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.bet-preview{margin:0;font-size:12px;color:#a8a8a8}.bet-preview b{color:var(--accent);font-variant-numeric:tabular-nums}
.bet-placed{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;font-size:13px;color:#cfcfcf}.bet-placed b{color:#fff}
.special-item .tiny.primary{min-height:38px;padding-inline:16px}

/* Garrison assault */
.garrison-battle .siege{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;margin:16px 0 10px}
.siege-side{display:grid;gap:4px}.siege-defender{justify-items:end;text-align:right}
.siege-side .flag{width:30px;height:20px;border-radius:3px}
.siege-side strong{font-size:15px;color:#eee}.siege-side small{font-size:11px;color:#8a8a8a}
.siege-side b{font-size:26px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.siege-city{position:relative;display:grid;justify-items:center;gap:8px;width:96px;color:#d8d8d8}
.siege-city svg{width:64px;height:64px;transition:color .3s,transform .3s}
.siege-hp{display:flex;gap:3px}.siege-hp i{width:12px;height:5px;border-radius:2px;background:#ffffff14}.siege-hp i.on{background:#7fc495}
.siege-hp i.is-hit{background:#e05b5b;animation:siege-hit .5s ease both}
.siege-shield{position:absolute;top:-6px;right:-6px;padding:2px 7px;border-radius:999px;background:var(--accent);color:#111;font-size:10px;font-weight:700}
.siege.is-won .siege-city svg{color:#e05b5b;transform:scale(.94) rotate(-2deg)}
.siege.is-lost .siege-city svg{color:#7fc495}
.siege-front{--front:50%;position:relative;height:14px;margin:6px 0 16px;border-radius:999px;background:#0b0b0d;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff12}
.siege-push{position:absolute;top:0;bottom:0}
.siege-push-attack{left:0;width:var(--front);background:linear-gradient(90deg,rgba(var(--accent-rgb),.25),var(--accent))}
.siege-push-defend{right:0;width:calc(100% - var(--front));background:linear-gradient(270deg,#ffffff1a,#bdbdbd)}
.siege-line{position:absolute;top:-4px;bottom:-4px;left:var(--front);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 14px 4px #ffffffaa}
.siege-spark{position:absolute;top:50%;left:var(--front);width:4px;height:4px;margin:-2px;border-radius:50%;background:#fff;opacity:0;animation:siege-spark .9s calc(var(--i)*.13s) ease-out infinite}
.siege-front.is-won .siege-spark,.siege-front.is-lost .siege-spark{animation:none;opacity:0}
.siege-front.is-won .siege-line{background:var(--accent);box-shadow:0 0 18px 6px rgba(var(--accent-rgb),.7)}
@keyframes siege-spark{0%{opacity:1;transform:translate(0,0)}100%{opacity:0;transform:translate(calc((var(--i) - 3)*7px),calc((var(--i) - 3)*5px))}}
@keyframes siege-hit{0%,100%{transform:none}30%{transform:translateY(-3px) scale(1.3)}}
@media(max-width:560px){.garrison-battle .siege{grid-template-columns:1fr 1fr}.siege-city{grid-column:1/-1;grid-row:1;justify-self:center}}

/* Eliminated */
.eliminated-screen{position:fixed;inset:0;z-index:210;display:grid;place-items:center;padding:24px;background:#080808cc;backdrop-filter:blur(14px);animation:ov-in .3s var(--ov-ease) both}
.eliminated-screen>div{display:grid;justify-items:center;gap:12px;width:100%;max-width:520px;padding:38px 32px;border:1px solid #e05b5b55;border-radius:18px;background:radial-gradient(ellipse at 50% 0%,#e05b5b1f,transparent 70%),#121214;text-align:center;box-shadow:0 30px 90px #000a}
.eliminated-screen .flag{width:54px;height:36px;border-radius:5px;filter:grayscale(.7)}
.eliminated-screen h2{margin:0;font-size:24px}.eliminated-screen p{margin:0;font-size:14px;line-height:1.6;color:#b8b8b8}
.eliminated-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px}
body.is-spectator [data-action],body.is-spectator [data-ov],body.is-spectator [data-equipment],body.is-spectator [data-research],body.is-spectator #science-upgrade,body.is-spectator #attack-open,body.is-spectator [data-culture-buy],body.is-spectator [data-culture-hire],body.is-spectator [data-culture-start],body.is-spectator #culture-open,body.is-spectator [data-defense-edit],body.is-spectator [data-sanction-propose],body.is-spectator [data-sanction-vote],body.is-spectator [data-turn-ready],body.is-spectator #arena-ready,body.is-spectator .trade-chat-compose,body.is-spectator [data-trade-action],body.is-spectator #trade-invite-form{pointer-events:none;opacity:.35;filter:grayscale(1)}
body.is-spectator::after{content:'Страна выбыла · режим наблюдателя';position:fixed;left:50%;bottom:18px;z-index:150;transform:translateX(-50%);padding:9px 16px;border:1px solid #e05b5b66;border-radius:999px;background:#1a1012;color:#f0b4b4;font-size:12px;font-weight:600;pointer-events:none}

/* Treasury history */
.ledger-card .ledger-list{display:grid;gap:2px;max-height:260px;margin:4px 0 0;padding:0 4px 0 0;overflow-y:auto;list-style:none;scrollbar-width:thin;overscroll-behavior:contain}
.ledger-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;font-size:12px;animation:ov-in .2s var(--ov-ease) both}
.ledger-list li:nth-child(odd){background:#ffffff05}
.ledger-turn{font-size:10px;font-weight:600;letter-spacing:.3px;color:#7d7d7d;white-space:nowrap}
.ledger-text{min-width:0;color:#cfcfcf;overflow-wrap:anywhere}
.ledger-list b{font-variant-numeric:tabular-nums;white-space:nowrap}
.ledger-list .is-in b{color:#8fd19e}.ledger-list .is-out b{color:#e8908f}

/* World Arena */
.arena-cities{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:12px 0 0;padding:0;list-style:none}
.arena-cities li{display:grid;gap:5px;padding:7px 9px;border:1px solid #ffffff10;border-radius:8px;background:#0e0e10}
.arena-cities li>span:first-child{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:11px;color:#cfcfcf;overflow:hidden;white-space:nowrap}
.arena-cities li.is-down{opacity:.5}.arena-cities li.is-down>span:first-child{text-decoration:line-through}
.arena-city-shield{display:grid;place-items:center;width:15px;height:15px;color:var(--arena-accent,var(--accent))}.arena-city-shield svg{width:13px;height:13px}
.arena-city-hp{display:flex;gap:2px}.arena-city-hp i{flex:1;min-width:8px;height:4px;border-radius:2px;background:#ffffff12}.arena-city-hp i.on{background:#7fc495}
.arena-cities li:has(.arena-city-hp i:nth-child(3):not(.on)) .arena-city-hp i.on{background:#e3b25c}
.arena-cities li:has(.arena-city-hp i:nth-child(2):not(.on)) .arena-city-hp i.on{background:#e05b5b}
.arena-analytics{max-height:calc(100dvh - 210px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-right:6px}
.arena-mod-rows{display:grid;gap:7px;margin-top:10px}
.arena-mod-rows>div{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:#cfcfcf}
.arena-mod-rows span{display:flex;align-items:center;gap:7px}.arena-mod-rows span i{width:8px;height:8px;border-radius:50%}
.arena-mod-rows b{font-weight:600;color:#eee;font-variant-numeric:tabular-nums}.arena-mod-rows b.is-hot{color:#e8908f}
.arena-mod-note{margin:10px 0 0;font-size:11px;color:#a8a8a8}

/* Defence orders */
.defense-panel{border-color:rgba(var(--accent-rgb),.28);background:linear-gradient(115deg,rgba(var(--accent-rgb),.09),#ffffff02 60%)}
.defense-panel .ability-icon{color:var(--accent);border-color:rgba(var(--accent-rgb),.35);background:rgba(var(--accent-rgb),.1)}
.defense-panel .defense-head{align-items:center}
.defense-edit{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:9px 18px;font-weight:700}
.defense-edit svg{width:16px;height:16px}
.defense-posts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:16px}
.defense-post{display:grid;gap:8px;padding:12px 14px;border:1px solid #ffffff12;border-radius:11px;background:#0f0f11}
.defense-post>span:first-child{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.defense-post b{color:#eee;font-size:13px}.defense-post small{font-size:11px;color:#8a8a8a}.defense-post small.is-down{color:#e8908f}
.defense-bar{display:block;height:6px;border-radius:999px;background:#ffffff0d;overflow:hidden}
.defense-bar>i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,rgba(var(--accent-rgb),.5),var(--accent));transition:width .4s var(--ov-ease)}
.defense-share{display:flex;align-items:baseline;justify-content:space-between;font-size:12px;color:#a8a8a8;font-variant-numeric:tabular-nums}.defense-share b{font-size:15px;color:var(--accent)}
.defense-stance{display:grid;gap:4px;padding:12px 14px;border:1px solid rgba(var(--accent-rgb),.3);border-radius:11px;background:rgba(var(--accent-rgb),.06)}.defense-stance b{font-size:16px;color:var(--accent)}
.defense-army{margin:12px 0 0;font-size:12px;color:#8a8a8a}.defense-army b{color:#ddd;font-variant-numeric:tabular-nums}

/* Share editor */
.share-editor{display:grid;gap:10px}
.share-stack{display:flex;gap:3px;height:10px;margin-bottom:4px;border-radius:999px;overflow:hidden;background:#ffffff0a}
.share-stack i{flex-basis:0;min-width:0;background:var(--seg);transition:flex-grow .25s var(--ov-ease)}
.share-editor.is-off .share-stack{box-shadow:0 0 0 1px #e05b5b88}
.share-row{display:grid;grid-template-columns:minmax(120px,1.1fr) minmax(0,1.6fr) auto 72px;align-items:center;gap:12px;padding:8px 10px;border:1px solid #ffffff0e;border-radius:10px;background:#0f0f11}
.share-name{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:8px;font-size:13px;color:#eee}
.share-name i{grid-row:1/3;width:9px;height:9px;border-radius:50%;background:var(--seg)}
.share-name small{grid-column:2;font-size:11px;color:#8a8a8a}
.share-num{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:#8a8a8a}
.share-num .ov-num input{width:44px}
.share-troops{font-size:12px;color:#a8a8a8;text-align:right;font-variant-numeric:tabular-nums}
.share-total{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-top:10px;border-top:1px solid #ffffff12}
.share-total strong{font-size:16px;font-variant-numeric:tabular-nums}.share-total strong.is-off{color:#e8908f}
.share-hint{font-size:12px;color:#e8908f}.share-total button{margin-left:auto}
input[type=range]{accent-color:var(--seg,var(--accent))}
.share-row input[type=range]{width:100%;height:22px;margin:0;background:transparent;-webkit-appearance:none;appearance:none}
.share-row input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(90deg,var(--seg) 0 100%) 0/var(--fill,0%) 100% no-repeat,#ffffff14}
.share-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-6px;border:3px solid #111;border-radius:50%;background:var(--seg);box-shadow:0 0 0 1px var(--seg)}
.share-row input[type=range]::-moz-range-track{height:6px;border-radius:999px;background:#ffffff14}
.share-row input[type=range]::-moz-range-progress{height:6px;border-radius:999px;background:var(--seg)}
.share-row input[type=range]::-moz-range-thumb{width:14px;height:14px;border:3px solid #111;border-radius:50%;background:var(--seg)}
dialog.defense-dialog{max-width:680px;width:calc(100% - 32px)}
@media(max-width:600px){.share-row{grid-template-columns:1fr auto;row-gap:8px}.share-row input[type=range]{grid-column:1/-1;grid-row:2}.share-troops{grid-column:2}}

/* UN sanctions */
.sanction-pill{display:inline-flex;align-items:center;width:fit-content;margin-top:6px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:600}
.sanction-pill.is-clear{background:#7fc4951a;color:#8fd19e;box-shadow:inset 0 0 0 1px #7fc49544}
.sanction-pill.is-on{background:#e05b5b1f;color:#f0a2a2;box-shadow:inset 0 0 0 1px #e05b5b55}
.sanction-pill.is-soon{background:#e3b25c1c;color:#e9c27e;box-shadow:inset 0 0 0 1px #e3b25c55}
.sanction-panel.is-sanctioned{border-color:#e05b5b55;background:linear-gradient(115deg,#e05b5b12,transparent 60%)}
.sanction-effects{margin:6px 0 0;font-size:12px;line-height:1.5;color:#c9a0a0}
.sanction-propose{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.sanction-propose p{flex:1 1 320px;margin:0}
.sanction-propose button{flex:0 0 auto;min-height:42px;padding-inline:18px;margin-left:auto}
@media(max-width:700px){.sanction-propose button{flex:1 1 100%;margin-left:0}}
.sanction-tally{display:flex;gap:2px;height:5px;margin-top:8px;border-radius:999px;overflow:hidden;background:#ffffff0d}
.sanction-tally i{flex-basis:0;background:#ffffff14}.sanction-tally .is-yes{background:#8fd19e}.sanction-tally .is-no{background:#e8908f}
.sanction-others{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.sanction-others>small{flex-basis:100%;font-size:11px;color:#8a8a8a}

/* Country information */
dialog.country-info-dialog{width:calc(100% - 32px);max-width:520px;padding:28px;border:1px solid rgba(var(--accent-rgb),.35);background:radial-gradient(ellipse at 15% 0%,rgba(var(--accent-rgb),.16),transparent 55%),#141416;box-shadow:0 0 0 1px #00000080,0 30px 90px #000b,0 0 60px -20px rgba(var(--accent-rgb),.55);animation:ov-in .24s var(--ov-ease) both}
.country-info-dialog .info-heading{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.country-info-dialog .info-heading .flag{width:44px;height:30px;border-radius:4px;box-shadow:0 0 18px rgba(var(--accent-rgb),.45)}
.country-info-dialog .info-heading h2{margin:2px 0 0;color:var(--accent)}
.country-info-dialog .info-heading .sanction-pill{margin:0 0 0 auto}
.info-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.info-tiles>div{display:grid;gap:3px;padding:11px 12px;border:1px solid #ffffff12;border-radius:11px;background:#0f0f11}
.info-tiles span{font-size:10px;letter-spacing:.3px;color:#8a8a8a}.info-tiles strong{font-size:17px;color:#f2f2f2;font-variant-numeric:tabular-nums}.info-tiles small{font-size:11px;color:#8fd19e}
.info-city-list{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.info-city-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid #ffffff10;border-radius:10px;background:#0f0f11}
.info-city-list li>span:first-child{display:grid}.info-city-list b{font-size:13px;color:#eee}.info-city-list small{font-size:11px;color:#8a8a8a}
.info-city-list li.is-down{opacity:.55}
.info-city-state{display:flex;align-items:center;gap:10px}.info-city-state .arena-city-hp{width:70px}.info-city-state em{font-style:normal;font-size:12px;color:#cfcfcf;font-variant-numeric:tabular-nums;min-width:56px;text-align:right}
.info-shield{display:inline-flex;align-items:center;gap:4px;padding:2px 8px 2px 6px;border-radius:999px;background:var(--accent);color:#111;font-style:normal;font-size:10px;font-weight:700}.info-shield svg{width:11px;height:11px}
@media(max-width:480px){.info-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* City card: an active shield lights the card in the country colour; the badge turns solid with a dark shield. */
.city.has-shield{border-color:rgba(var(--accent-rgb),.55);box-shadow:0 0 0 1px rgba(var(--accent-rgb),.35),0 0 34px -8px rgba(var(--accent-rgb),.6);animation:shield-glow 3.2s ease-in-out infinite}
.city .shield.is-on{display:inline-flex;align-items:center;gap:5px;width:fit-content;padding:3px 9px 3px 7px;border-radius:999px;background:var(--accent);color:#111;font-weight:700}
.city .shield.is-on svg{width:12px;height:12px}
@keyframes shield-glow{0%,100%{box-shadow:0 0 0 1px rgba(var(--accent-rgb),.35),0 0 30px -10px rgba(var(--accent-rgb),.5)}50%{box-shadow:0 0 0 1px rgba(var(--accent-rgb),.5),0 0 42px -6px rgba(var(--accent-rgb),.75)}}

/* «Информация о государстве» button: the icon drawn and centred with the text. */
.country-info-button{display:inline-flex;align-items:center;gap:8px}
.country-info-button svg{flex:0 0 16px;width:16px;height:16px}

@media(prefers-reduced-motion:reduce){.ov-select-list,.ledger-list li,.eliminated-screen,dialog.country-info-dialog{animation:none}.city.has-shield{animation:none}.siege-spark{animation:none}.ov-select-button svg,.share-stack i,.defense-bar>i{transition:none}}

/* Fixes after the first look */
.hero .hero-actions .country-info-button svg{position:static!important;inset:auto!important;width:16px!important;height:16px!important;opacity:1!important;z-index:auto!important;transform:none!important}
.share-row .share-num{display:inline-flex;flex-direction:row;align-items:center;gap:6px;margin:0}
.share-row input[type=range]{min-height:0;padding:0;border:0;border-radius:0;box-shadow:none}
.share-name small{justify-self:start}
.ov-num input{flex:1 1 auto}


/* A destroyed city in the garrison orders: locked at 0%. */
.share-row:has(input[type=range]:disabled){opacity:.45}
.share-row:has(input[type=range]:disabled) .share-name{text-decoration:line-through}
/* Main menu: grey with one soft glow in the middle, no globe. */
.home-atmosphere{background:radial-gradient(ellipse 70% 60% at 50% 46%,#232323 0%,#151515 48%,#0c0c0c 100%)}
.home-atmosphere>:not(.home-halo){display:none}
.home-halo{left:50%;top:46%;width:min(1000px,130vw);height:min(1000px,130vw);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#ffffff17 0%,#ffffff0a 30%,transparent 68%);opacity:1}

/* Polish 2. Glows: one soft halo, slow and quiet. */
dialog.country-info-dialog{border-color:rgba(var(--accent-rgb),.22);background:radial-gradient(ellipse at 15% 0%,rgba(var(--accent-rgb),.08),transparent 60%),#141416;box-shadow:0 0 0 1px #00000080,0 30px 90px #000b,0 0 48px -30px rgba(var(--accent-rgb),.45)}
.country-info-dialog .info-heading .flag{box-shadow:0 0 0 1px #ffffff1a,0 4px 14px #0007}
.city.has-shield{border-color:rgba(var(--accent-rgb),.32);box-shadow:0 0 0 1px rgba(var(--accent-rgb),.14),0 0 28px -16px rgba(var(--accent-rgb),.5);animation:shield-breathe 6s ease-in-out infinite}
@keyframes shield-breathe{0%,100%{box-shadow:0 0 0 1px rgba(var(--accent-rgb),.12),0 0 26px -18px rgba(var(--accent-rgb),.4)}50%{box-shadow:0 0 0 1px rgba(var(--accent-rgb),.2),0 0 32px -14px rgba(var(--accent-rgb),.55)}}

/* Event choices: the text on the left, the decision on the right. */
.event-choice{grid-template-columns:minmax(0,1fr) auto;column-gap:24px;align-items:center}
.event-choice>.event-choice-head,.event-choice>p{grid-column:1}
.event-choice>.event-choice-actions{grid-column:2;grid-row:1/span 2;justify-content:flex-end;align-items:center}
@media(max-width:700px){.event-choice{grid-template-columns:1fr}.event-choice>.event-choice-actions{grid-column:1;grid-row:auto;justify-content:flex-start}}

/* City health: five short capsules with a soft top light, coloured by health, the same in every place. */
.arena-city-hp{display:inline-flex;align-items:center;gap:3px;flex:none;--hp:#7fc495}
.arena-city-hp[data-hp="3"],.arena-city-hp[data-hp="2"]{--hp:#e3b25c}
.arena-city-hp[data-hp="1"]{--hp:#e0635b}
.arena-city-hp i{flex:none;width:11px;min-width:0;height:6px;border-radius:3px;background:#ffffff12;box-shadow:inset 0 0 0 1px #ffffff08}
.arena-city-hp i.on{background:linear-gradient(180deg,color-mix(in srgb,var(--hp) 70%,#fff),var(--hp));box-shadow:0 0 6px -1px color-mix(in srgb,var(--hp) 55%,transparent)}
.arena-cities li:has(.arena-city-hp i:nth-child(3):not(.on)) .arena-city-hp i.on,.arena-cities li:has(.arena-city-hp i:nth-child(2):not(.on)) .arena-city-hp i.on{background:linear-gradient(180deg,color-mix(in srgb,var(--hp) 70%,#fff),var(--hp))}
.arena-cities li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px}
.arena-cities li>span:first-child{flex:1;min-width:0;justify-content:flex-start;gap:6px;text-overflow:ellipsis}
.arena-cities li.is-down .arena-city-hp{opacity:.4}
.info-city-state .arena-city-hp{width:auto}

/* World Arena statistics: as tall as the countries beside it, scrolled without a visible bar. */
@media(min-width:1101px){
 .arena-layout{align-items:stretch}
 .arena-layout>.arena-analytics{height:0;min-height:100%;max-height:none;overflow-y:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(#000 calc(100% - 36px),transparent);mask-image:linear-gradient(#000 calc(100% - 36px),transparent);padding-bottom:28px}
}
.arena-analytics::-webkit-scrollbar{display:none}
.arena-analytics{scrollbar-width:none}

/* Sanctions: the status sits next to the country's name. */
.sanction-title{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.sanction-title .sanction-pill{margin:0}
@media(prefers-reduced-motion:reduce){.city.has-shield{animation:none}}

/* Shield: the status is plain text again; the shield button turns the country's colour while the shield stands. */
.city .shield.is-on{display:inline-flex;padding:0;border-radius:0;background:none;color:var(--muted);font-weight:inherit}
.city .shield.is-on svg{width:11px;height:11px}
.city.has-shield .city-actions [data-action="shield"]{opacity:1;background:var(--accent);border-color:var(--accent);color:#111;box-shadow:0 0 16px -6px rgba(var(--accent-rgb),.6)}

/* Polish 3. Main menu: dull grey, a faint glow in the middle. */
.home-atmosphere{background:radial-gradient(ellipse 70% 60% at 50% 46%,#191919 0%,#121212 50%,#0c0c0c 100%)}
.home-halo{background:radial-gradient(circle,#ffffff09 0%,#ffffff04 32%,transparent 66%)}

/* Flags: official colours, fabric with a quiet highlight. */
.flag{position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #00000040}
.flag::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,#ffffff00 0%,#ffffff12 18%,#0000001f 36%,#ffffff0e 55%,#00000024 74%,#ffffff0a 90%,#00000010 100%);mix-blend-mode:soft-light}
.flag::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#ffffff0d,transparent 40%,#0000001f)}
.flag.ES{background:linear-gradient(#aa151b 25%,#f1bf00 25%,#f1bf00 75%,#aa151b 75%)}
.flag.FR{background:linear-gradient(90deg,#002395 33.3%,#f7f7f7 33.3%,#f7f7f7 66.6%,#ed2939 66.6%)}
.flag.DE{background:linear-gradient(#111 33.3%,#d00 33.3%,#d00 66.6%,#ffce00 66.6%)}
.flag.IT{background:linear-gradient(90deg,#009246 33.3%,#f4f5f0 33.3%,#f4f5f0 66.6%,#ce2b37 66.6%)}
.flag.ENG{background:linear-gradient(90deg,transparent 42%,#ce1124 42%,#ce1124 58%,transparent 58%),linear-gradient(transparent 38%,#ce1124 38%,#ce1124 62%,transparent 62%),#f7f7f7}

/* Russia. Flag. */
.RUS,.flag.RUS{background:linear-gradient(#f7f7f7 33.3%,#0039a6 33.3%,#0039a6 66.6%,#d52b1e 66.6%)}
/* Accent: winter ice, apart from the yellow, blue, orange, green and rose of the others. */
:root[data-country="RUS"]{--accent:#8ccbe0;--accent-rgb:140,203,224}
.arena-country[data-country="RUS"]{--arena-accent:#8ccbe0}
.target-country-option[data-country="RUS"]:hover strong{color:#8ccbe0}
.join-nation-option[data-country="RUS"]{--join-accent:140,203,224}
.lobby-team-nicknames[data-country="RUS"]{--nickname-color:#8ccbe0}

/* Active ability chosen with the country. */
dialog.active-pick-dialog{width:min(620px,calc(100vw - 32px))}
.active-pick-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.active-pick-head .flag{width:48px;height:32px;border-radius:5px;flex:none}
.active-pick-head h2{margin:2px 0 0}
.active-pick-passive{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid #ffffff14;border-radius:12px;background:#ffffff06}
.active-pick-passive small{display:block;color:var(--muted);font-size:11px}
.active-pick-passive strong{display:block;margin:2px 0 4px}
.active-pick-passive p{margin:0;color:#b4b4b4;font-size:12px;line-height:1.45}
.active-options{display:grid;gap:10px}
.active-option{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;width:100%;padding:14px;border:1px solid #ffffff1c;border-radius:12px;background:#151517;color:inherit;text-align:left;transition:border-color .14s,background-color .14s,transform .16s cubic-bezier(.2,.8,.2,1)}
.active-option:hover{border-color:#ffffff38;background:#1a1a1c}
.active-option:active{transform:scale(.985)}
.active-option[aria-pressed="true"]{border-color:rgba(var(--accent-rgb),.7);background:rgba(var(--accent-rgb),.07)}
.active-option-copy strong{display:block;font-size:15px}
.active-option-copy small{display:block;margin:2px 0 6px;color:var(--accent);font-size:11px}
.active-option-copy span{display:block;color:#b4b4b4;font-size:12px;line-height:1.45}
.active-option-check{width:18px;height:18px;margin-top:2px;border:1.5px solid #ffffff40;border-radius:50%;transition:border-color .14s,box-shadow .14s}
.active-option[aria-pressed="true"] .active-option-check{border-color:var(--accent);box-shadow:inset 0 0 0 4px #151517,inset 0 0 0 9px var(--accent)}
.active-option .ability-icon,.active-pick-passive .ability-icon{flex:none}

/* Транссиб: what to give, what to take. */
dialog.transsib-dialog{width:min(620px,calc(100vw - 32px))}
.transsib-columns{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:6px}
.transsib-list{display:grid;gap:8px}
.transsib-chip{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:1px solid #ffffff1c;border-radius:10px;background:#151517;color:inherit;text-align:left;transition:border-color .14s,background-color .14s,transform .16s cubic-bezier(.2,.8,.2,1)}
.transsib-chip:hover:not(:disabled){border-color:#ffffff38}
.transsib-chip:active:not(:disabled){transform:scale(.98)}
.transsib-chip[aria-pressed="true"]{border-color:rgba(var(--accent-rgb),.7);background:rgba(var(--accent-rgb),.08)}
/* Three abilities side by side: the action goes under the text so the description keeps its width. */
.nation-abilities:has(>.ability-row:nth-child(3)) .ability-row{flex-wrap:wrap}
.nation-abilities:has(>.ability-row:nth-child(3)) .ability-copy{flex:1 1 200px}
.nation-abilities:has(>.ability-row:nth-child(3)) .ability-actions{flex:1 0 100%;justify-items:start;padding-left:56px}
.transsib-chip strong{display:block;font-size:13px}
.transsib-chip small{display:block;color:var(--muted);font-size:11px}
.transsib-route{margin:16px 0 0;padding:10px 12px;border-radius:10px;background:#ffffff08;color:var(--muted);font-size:13px;text-align:center}
.transsib-route.is-ready{color:var(--text)}
@media(max-width:560px){.transsib-columns{grid-template-columns:1fr}}

/* «Железный занавес» seen by the others. */
.arena-power-bars>div.is-veiled .arena-power-track i{opacity:.18;background:repeating-linear-gradient(135deg,#ffffff55 0 6px,transparent 6px 12px)!important}
.arena-power-bars>div.is-veiled b{color:var(--muted);font-weight:500}
.intel-veiled strong{color:var(--accent)}

/* Shop: one row per country. */
.shop-rows{display:grid;gap:22px}

/* Patch notes: the button beside the reference square, and the dialog. */
.patch-open{position:fixed;left:calc(max(24px,env(safe-area-inset-left)) + 54px);bottom:max(24px,env(safe-area-inset-bottom));z-index:3;display:inline-flex;align-items:center;gap:8px;height:44px;min-height:44px;padding:0 16px 0 13px;border:1px solid #ffffff25;border-radius:10px;background:#141414;color:#d0d0d0;font-size:13px;font-weight:600;box-shadow:inset 0 1px 0 #ffffff06;transition:background-color .12s,border-color .12s,color .12s,transform .16s cubic-bezier(.2,.8,.2,1)}
.patch-open svg{width:18px;height:18px}
.patch-open:hover{background:#202020;border-color:#ffffff4d;color:#eee}
.patch-open:active{transform:scale(.96)}
.patch-open:focus-visible{outline:2px solid #9b9b9b;outline-offset:4px}
dialog.patch-dialog{width:min(680px,calc(100vw - 32px));max-height:min(780px,calc(100vh - 48px));padding:0;display:flex;flex-direction:column;overflow:hidden}
dialog.patch-dialog:not([open]){display:none}
.patch-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:24px 24px 16px;border-bottom:1px solid #ffffff12}
.patch-head h2{margin:4px 0 0}
.patch-head .item-close{position:static;flex:none}
.patch-body{overflow-y:auto;padding:8px 24px 24px;scrollbar-width:thin}
.patch-group{padding-top:18px}
.patch-group h3{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#d8d8d8}
.patch-group h3 small{display:grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#ffffff10;color:var(--muted);font-size:11px;letter-spacing:0}
.patch-group ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.patch-group li{position:relative;padding-left:16px;color:#c4c4c4;font-size:13px;line-height:1.5}
.patch-group li::before{content:'';position:absolute;left:2px;top:.62em;width:5px;height:5px;border-radius:50%;background:#ffffff40}
@media(prefers-reduced-motion:reduce){.active-option,.transsib-chip,.patch-open{transition:none}}

/* Patch notes: scrolled without a scrollbar. */
.patch-body{scrollbar-width:none;-webkit-mask-image:linear-gradient(#000 calc(100% - 32px),transparent);mask-image:linear-gradient(#000 calc(100% - 32px),transparent);padding-bottom:36px}
.patch-body::-webkit-scrollbar{display:none}

/* Shop glow in the country's colour: England keeps the red, Russia's cards glow blue. */
.shop-grid[data-shop-country="RUS"]>.shop-offer:hover{border-color:#4f86e84d;box-shadow:0 0 0 1px #4f86e81f,0 24px 70px -28px #4f86e866}
.shop-grid[data-shop-country="RUS"]>.shop-offer::before{background:radial-gradient(42% 46% at 72% 74%,#4f86e84d,transparent 70%),radial-gradient(60% 40% at 50% 100%,#4f86e830,transparent 75%)}
.shop-grid[data-shop-country="RUS"] .shop-ability:hover{border-color:#4f86e859;box-shadow:0 18px 50px -26px #4f86e866}
.shop-grid[data-shop-country="RUS"] .shop-ability[data-kind="active"] .shop-tag{border-color:#4f86e866;color:#a9c4f5}
.shop-grid[data-shop-country="RUS"] .shop-ability .ability-icon{border-color:#4f86e859;color:#a9c4f5}
.shop-grid[data-shop-country="ENG"] .shop-ability:hover{border-color:#c6585959;box-shadow:0 18px 50px -26px #c6585966}

/* Promo roulette «Сейф». */
.promo-safe{display:grid;justify-items:center;align-content:center;gap:20px;min-height:200px;padding:22px 12px;border:1px solid #ffffff10;border-radius:14px;background:#0c0c0e}
.promo-lamps{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.promo-lamp{padding:6px 12px;border:1px solid #ffffff14;border-radius:999px;color:#666;font-size:10px;line-height:1.2;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;transition:color .08s,border-color .08s,background-color .08s,box-shadow .08s}
.promo-lamp.on{--tone:var(--roll-0);color:#fff;border-color:var(--tone);background:color-mix(in srgb,var(--tone) 18%,transparent);box-shadow:0 0 18px -4px var(--tone)}
.promo-lamp.on[data-tier="1"]{--tone:var(--roll-1)}.promo-lamp.on[data-tier="2"]{--tone:var(--roll-2)}.promo-lamp.on[data-tier="3"]{--tone:var(--roll-3)}
.promo-wheels{display:flex;gap:8px;padding:10px;border:1px solid #ffffff12;border-radius:14px;background:#08080a}
.promo-wheel{position:relative;width:58px;height:84px;overflow:hidden;border-radius:9px;background:linear-gradient(#1a1a1d,#111114 50%,#1a1a1d);box-shadow:inset 0 0 0 1px #ffffff0d;transition:box-shadow .25s}
.promo-wheel::after{content:'';position:absolute;inset:0;background:linear-gradient(#08080acc,transparent 30%,transparent 70%,#08080acc);pointer-events:none}
.promo-wheel-strip{position:absolute;inset:0 0 auto;will-change:transform}
.promo-wheel-strip i{display:grid;place-items:center;height:84px;font:700 44px Manrope,Arial,sans-serif;font-style:normal;font-variant-numeric:tabular-nums;color:#ececec}
.promo-wheel.is-lead i{color:#3a3a3e}
.promo-wheel.is-set{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--win) 70%,transparent)}
.promo-wheel.is-set:not(.is-lead) i{color:var(--win)}
#promo-roll-title[data-tier="1"]{color:var(--roll-1)}#promo-roll-title[data-tier="2"]{color:var(--roll-2)}#promo-roll-title[data-tier="3"]{color:var(--roll-3)}
.promo-odds li.is-hit{border-color:var(--win);color:#fff}
@media(max-width:480px){.promo-wheel{width:48px;height:70px}.promo-wheel-strip i{height:70px;font-size:36px}}
@media(prefers-reduced-motion:reduce){.promo-lamp,.promo-wheel{transition:none}}

/* Polish 4. World Arena cities: quiet rows, the health as a thin bar in the country's colour. */
.arena-cities li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 10px;padding:9px 12px 10px;border:1px solid #ffffff0b;border-radius:10px;background:#ffffff04}
.arena-cities li>span:first-child{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:12px;color:#cfcfcf}
.arena-city-count{color:#7a7a7a;font-size:11px;font-variant-numeric:tabular-nums}
.arena-cities .arena-city-hp{grid-column:1/-1;display:flex;gap:3px;width:100%;--hp:var(--arena-accent,#9b9b9b)}
.arena-cities .arena-city-hp[data-hp="3"],.arena-cities .arena-city-hp[data-hp="2"]{--hp:#d9a84e}
.arena-cities .arena-city-hp[data-hp="1"]{--hp:#d9605a}
.arena-cities .arena-city-hp i{flex:1;width:auto;height:3px;border-radius:2px;background:#ffffff0f;box-shadow:none}
.arena-cities .arena-city-hp i.on{background:var(--hp);opacity:.75;box-shadow:none}
.arena-cities li.is-down{opacity:.5}
.arena-cities li.is-down>span:first-child{color:#8a8a8a;text-decoration:line-through;text-decoration-color:#ffffff40}
.arena-cities li.is-down .arena-city-count{color:#d9605a}

/* Sanctions: a smaller status next to the name, the proposal right under the title. */
.sanction-panel{gap:10px}
.sanction-title .sanction-pill{padding:2px 8px;font-size:10px;line-height:1.4}
.sanction-panel>.sanction-propose{padding-left:56px}
.sanction-panel>.sanction-propose p{margin-top:-4px}
@media(max-width:640px){.sanction-panel>.sanction-propose{padding-left:0}}

/* Patch notes: counts centred in their circles. */
.patch-group h3 small{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;box-sizing:border-box;line-height:1;font-variant-numeric:tabular-nums}
.patch-open svg{width:19px;height:19px}

/* Shop: a softer glow under a hovered card. */
.shop-grid>.shop-offer:hover{box-shadow:0 0 0 1px #c658591a,0 16px 44px -30px #c6585933}
.shop-grid>.shop-offer:hover::before{opacity:.3}
.shop-grid[data-shop-country="RUS"]>.shop-offer:hover{box-shadow:0 0 0 1px #4f86e81a,0 16px 44px -30px #4f86e840}
.shop-grid[data-shop-country="RUS"] .shop-ability:hover{box-shadow:0 12px 34px -28px #4f86e855}
.shop-grid[data-shop-country="ENG"] .shop-ability:hover{box-shadow:0 12px 34px -28px #c6585955}

/* Cosmetics, stage 1. Shop sections as a segmented control. */
.shop-tabs{display:flex;gap:4px;justify-self:center;max-width:100%;padding:4px;border:1px solid #ffffff17;border-radius:999px;background:#0e0e10;overflow-x:auto;scrollbar-width:none}
.shop-tabs::-webkit-scrollbar{display:none}
.shop-tab{flex:none;min-height:38px;padding:0 18px;border:0;border-radius:999px;background:transparent;color:#9a9a9a;font-size:13px;font-weight:600;box-shadow:none;transition:background-color .2s cubic-bezier(.2,.8,.2,1),color .2s cubic-bezier(.2,.8,.2,1),transform .16s cubic-bezier(.2,.8,.2,1)}
.shop-tab.is-active{background:#e7e7e7;color:#111}
.shop-tab:active{transform:scale(.96)}
.shop-tab:focus-visible{outline:2px solid #9b9b9b;outline-offset:2px}
.shop-soon-note{display:flex;align-items:center;gap:10px;margin:0;padding:12px 16px;border:1px solid #e0c48333;border-radius:12px;background:#e0c4830a;color:#d8c7a0;font-size:13px;line-height:1.45}
.shop-soon-note svg{width:18px;height:18px;flex:none;color:#e0c483}
.cos-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cos-head .cp-label{margin:0}
.cos-pill{padding:5px 10px;border:1px solid #ffffff21;border-radius:999px;font-size:11px;font-weight:600;color:#9a9a9a;white-space:nowrap}
.cos-lead{margin:-4px 0 0;color:#8f8f8f;font-size:13px;line-height:1.5}

/* Cosmetic cards: a dark stage with a live preview, the name, the future price and «Скоро». */
.cos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(236px,1fr));gap:14px}
.cos-card,.cos-case{display:grid;grid-template-rows:auto 1fr auto;gap:14px;padding:14px;border:1px solid #ffffff17;border-radius:16px;background:linear-gradient(155deg,#1f1f22,#161618 70%);transition:border-color .2s cubic-bezier(.2,.8,.2,1)}
.cos-stage{position:relative;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;height:112px;padding:0 14px;border:1px solid #ffffff0d;border-radius:12px;background:#0d0d0f;overflow:hidden;isolation:isolate}
.cos-stage-nick{flex-direction:column;flex-wrap:nowrap;gap:10px}
.cos-copy{display:grid;align-content:start;gap:4px}
.cos-copy strong{font-family:'Dela Gothic One',Unbounded,Arial,sans-serif;font-size:16px;font-weight:400;letter-spacing:-.2px;color:#ececec}
.cos-copy small{font-size:12px;line-height:1.4;color:#8f8f8f}
.cos-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cos-price{display:inline-flex;align-items:center;gap:6px;min-width:0;color:#e0c483;font-size:15px}
.cos-price svg{width:16px;height:16px;flex:none}
.cos-price strong{font-weight:700;font-variant-numeric:tabular-nums}
.cos-price small{color:#7d7d7d;font-size:11px}
.cos-price.is-free small{font-size:12px;color:#9a9a9a}
.cos-soon{flex:none;min-height:34px;padding:0 14px;font-size:12px}

/* Nicknames. */
.cos-nick{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:18px;font-weight:800;line-height:1.3;letter-spacing:.01em;color:#ececec}
.cos-swatches{display:flex;gap:6px}.cos-swatches i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px #ffffff26}
.cos-g-gold{background:linear-gradient(90deg,#f4d58d,#c9932f,#f4d58d);-webkit-background-clip:text;background-clip:text;color:transparent}
.cos-shimmer{background:linear-gradient(100deg,#bdbdbd 20%,#fff 40%,#e6c878 50%,#fff 60%,#bdbdbd 80%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:cos-shimmer 3.2s linear infinite}
@keyframes cos-shimmer{from{background-position:100% 0}to{background-position:-200% 0}}
.cos-scramble{font-family:'Dela Gothic One',Unbounded,Arial,sans-serif;font-weight:400;color:#e6c878}
.cos-neon{color:#ffe8f6;text-shadow:0 0 4px #ff6ad5,0 0 12px #ff6ad5aa;animation:cos-neon 4s infinite}
@keyframes cos-neon{0%,18%,22%,60%,64%,100%{opacity:1}20%,62%{opacity:.35}}
.cos-radar-nick{position:relative;color:#9fe6b3}
.cos-radar-nick::after{content:'';position:absolute;inset:-4px -40%;background:linear-gradient(90deg,transparent,#9fe6b366,transparent);transform:translateX(-100%);animation:cos-sweep 2.8s ease-in-out infinite}
@keyframes cos-sweep{to{transform:translateX(100%)}}
.cos-frost{color:#8ccbe0;animation:cos-frost 2.6s ease-in-out infinite}
@keyframes cos-frost{50%{text-shadow:0 0 14px #8ccbe0aa}}
.cos-fire{background:linear-gradient(0deg,#ff5a36,#ffb347,#fff1b0);background-size:100% 200%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:cos-fire 1.6s ease-in-out infinite alternate}
@keyframes cos-fire{to{background-position:0 100%}}

/* Avatar frames. */
.cos-av{position:relative;display:grid;place-items:center;flex:none;width:56px;height:56px;border:1px solid #ffffff22;border-radius:50%;background:#1b1b1e;color:#e9e9e9;font-size:20px;isolation:isolate}
.cos-av b{position:relative;z-index:1;font-weight:800}
.cos-laurel{box-shadow:0 0 0 2px #0d0d0f,0 0 0 4px #c9a24a}
.cos-laurel::before{content:'';position:absolute;inset:-9px;border:2px dashed #c9a24a88;border-radius:50%}
.cos-orbit::after{content:'';position:absolute;inset:-7px;border:1px solid #ffffff22;border-radius:50%}
.cos-orbit i{position:absolute;inset:-7px;animation:cos-spin 3s linear infinite}
.cos-orbit i::before{content:'';position:absolute;top:-3px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#8ccbe0;box-shadow:0 0 8px #8ccbe0}
@keyframes cos-spin{to{transform:rotate(360deg)}}
/* Radar: a dot in the centre, a translucent beam from it to the rim sweeps over the avatar. */
.cos-radar{border-color:#7fc49566;background:radial-gradient(circle,#132019,#0b120e);color:#cfe9d7;box-shadow:0 0 0 2px #0d0d0f,0 0 0 3.5px #7fc495aa,0 0 16px -4px #7fc49588}
.cos-radar::before{content:'';position:absolute;inset:0;z-index:2;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 260deg,#7fc49510 290deg,#7fc49550 350deg,#c9f5d6d9 359deg,transparent 360deg);animation:cos-spin 3.2s linear infinite}
.cos-radar::after{content:'';position:absolute;inset:0;z-index:3;border-radius:50%;background:radial-gradient(circle,#c9f5d6 0 2px,transparent 2.6px),radial-gradient(circle,transparent 0 47%,#7fc49538 48% 50%,transparent 51%)}
.cos-radar i{position:absolute;inset:0;z-index:2;border-radius:50%;background:linear-gradient(#7fc49526,#7fc49526) center/1px 100% no-repeat,linear-gradient(#7fc49526,#7fc49526) center/100% 1px no-repeat}
.cos-wire{box-shadow:0 0 0 2px #0d0d0f,0 0 0 3px #8a8a8a}
.cos-wire::before{content:'';position:absolute;inset:-8px;border-radius:50%;background:repeating-conic-gradient(#8a8a8a 0 6deg,transparent 6deg 24deg);-webkit-mask:radial-gradient(circle,transparent 30px,#000 31px);mask:radial-gradient(circle,transparent 30px,#000 31px)}
.cos-stars::before{content:'★ ★ ★';position:absolute;top:-17px;left:50%;transform:translateX(-50%);font-size:9px;letter-spacing:2px;color:#e6c878;white-space:nowrap}
.cos-av.cos-stars{margin-top:16px}
.cos-legend::before{content:'';position:absolute;inset:-4px;z-index:-1;border-radius:50%;background:conic-gradient(from 0deg,#c9932f,#f4d58d,#b48af2,#6f9cf0,#c9932f);animation:cos-spin 4s linear infinite}
.cos-legend::after{content:'';position:absolute;inset:-1px;z-index:-1;border-radius:50%;background:#1b1b1e}
.cos-flagframe{box-shadow:0 0 0 2px #0d0d0f}
.cos-flagframe::before{content:'';position:absolute;inset:-5px;z-index:-1;border-radius:50%;background:linear-gradient(#f2f2f2 33%,#2f5fb8 33% 66%,#c8423a 66%)}
.cos-flagframe::after{content:'';position:absolute;inset:-1px;z-index:-1;border-radius:50%;background:#1b1b1e}

/* Party effects. */
.cos-ready{position:relative;padding:10px 26px;border-radius:10px;background:#e1e1e1;color:#111;font-size:13px;font-weight:800}
.cos-stamp{position:absolute;right:-14px;top:-12px;padding:2px 8px;border:2px solid #d9605a;border-radius:4px;background:#e1e1e1;color:#d9605a;font:400 11px 'Dela Gothic One',Unbounded,Arial,sans-serif;transform:rotate(-12deg);animation:cos-stamp 2.4s ease-in infinite}
@keyframes cos-stamp{0%,40%{transform:rotate(-12deg) scale(2.2);opacity:0}52%{transform:rotate(-12deg) scale(.95);opacity:1}58%,100%{transform:rotate(-12deg) scale(1);opacity:1}}
.cos-salute{position:absolute;inset:0}
.cos-salute i{position:absolute;left:calc(50% + var(--ox));top:56%;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:var(--c);box-shadow:0 0 6px var(--c);opacity:0;animation:cos-spark 2.2s cubic-bezier(.2,.7,.3,1) infinite;animation-delay:var(--d)}
@keyframes cos-spark{0%{transform:translate(0,0) scale(1);opacity:0}8%{opacity:1}70%{opacity:.85}100%{transform:translate(calc(var(--x) - var(--ox)),calc(var(--y) + 10px)) scale(.3);opacity:0}}
.cos-trail{position:relative;width:78%;height:12px}
.cos-trail::after{content:'';position:absolute;right:-4px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#ffb347;box-shadow:0 0 10px #ff8a3d}
.cos-trail i{position:absolute;left:0;top:50%;width:100%;height:2px;margin-top:-1px;background:linear-gradient(90deg,transparent,#e05b5b,#ffb347);transform-origin:left;animation:cos-trail 1.8s ease-in-out infinite}
@keyframes cos-trail{0%{transform:scaleX(0);opacity:1}60%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
.cos-sticker{display:inline-grid;place-items:center;width:46px;height:38px;border-radius:10px;background:#e6c87822;color:#e6c878;font:400 16px 'Dela Gothic One',Unbounded,Arial,sans-serif;transform:rotate(-5deg)}
.cos-sticker.is-alt{background:#7fc49522;color:#9fe6b3;transform:rotate(4deg)}
.cos-entrance::after{content:'';position:absolute;inset:-3px;border:2px solid #e6c878;border-radius:50%;opacity:0;animation:cos-entrance 2.4s cubic-bezier(.2,.7,.3,1) infinite}
@keyframes cos-entrance{0%{transform:scale(.85);opacity:0}15%{opacity:1}60%,100%{transform:scale(1.4);opacity:0}}
.cos-sound{display:inline-flex;align-items:center;gap:10px;color:#d6d6d6}
.cos-sound svg{width:26px;height:26px}
.cos-bars{display:flex;align-items:center;gap:4px;height:26px}
.cos-bars i{width:3px;height:30%;border-radius:2px;background:#e0c483;animation:cos-bars 1.2s ease-in-out infinite}
.cos-bars i:nth-child(2){animation-delay:.15s}.cos-bars i:nth-child(3){animation-delay:.3s}.cos-bars i:nth-child(4){animation-delay:.45s}
@keyframes cos-bars{50%{height:100%}}

/* Flag styles: cloth as it is, metal with a sheen, pixel through a grid. */
.cos-flagwrap{position:relative;display:inline-grid;border-radius:3px;overflow:hidden}
.cos-flagwrap .flag{width:44px;height:30px;margin:0}
.cos-flagwrap.is-metal::after{content:'';position:absolute;inset:0;background:linear-gradient(115deg,#ffffff00 30%,#ffffff70 45%,#ffffff00 60%),linear-gradient(#00000040,#ffffff20);mix-blend-mode:overlay}
.cos-flagwrap.is-pixel{-webkit-mask:linear-gradient(90deg,#000 80%,transparent 0) 0 0/5px 100%,linear-gradient(#000 80%,transparent 0) 0 0/100% 5px;-webkit-mask-composite:source-in;mask:linear-gradient(90deg,#000 80%,transparent 0) 0 0/5px 100%,linear-gradient(#000 80%,transparent 0) 0 0/100% 5px;mask-composite:intersect}

/* HQ themes: a small headquarters in the theme's colours. */
.cos-theme{display:grid;grid-template-rows:6px 1fr 22px;gap:5px;width:132px;height:84px;padding:6px;border:1px solid color-mix(in srgb,var(--t-accent) 30%,transparent);border-radius:8px;background:var(--t-bg)}
.cos-theme i{display:block}
.cos-theme-bar{border-radius:2px;background:color-mix(in srgb,var(--t-accent) 22%,transparent)}
.cos-theme-hero{display:grid;align-content:center;gap:4px;padding:0 7px;border-radius:4px;background:var(--t-panel)}
.cos-theme-hero em{display:block;height:5px;width:60%;border-radius:2px;background:var(--t-accent)}
.cos-theme-hero em+em{height:3px;width:85%;opacity:.35}
.cos-theme-row{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.cos-theme-row i{border-radius:3px;background:var(--t-panel);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--t-accent) 18%,transparent)}
.cos-theme.is-crt{background:repeating-linear-gradient(0deg,#00000033 0 1px,transparent 1px 3px),var(--t-bg)}
.cos-theme.is-grid{background:repeating-linear-gradient(0deg,#8fb6ff14 0 1px,transparent 1px 8px),repeating-linear-gradient(90deg,#8fb6ff14 0 1px,transparent 1px 8px),var(--t-bg)}

/* Daily rotation and cases: question-mark slots. */
.cos-mystery{display:grid;place-items:center;align-content:center;gap:8px;min-height:180px;border:1px dashed #ffffff26;border-radius:16px;background:repeating-linear-gradient(135deg,#ffffff04 0 10px,transparent 10px 20px),#121214;color:#7a7a7a}
.cos-q{font-family:'Dela Gothic One',Unbounded,Arial,sans-serif;font-size:44px;line-height:1;color:#4d4d4d}
.cos-mystery small{font-size:12px}
.cos-case-art{position:relative;display:grid;place-items:center;height:150px;border:1px solid #ffffff0d;border-radius:12px;background:radial-gradient(circle at 50% 40%,#e0c48314,transparent 60%),#0d0d0f;color:#5c5c5c}
.cos-case-art svg{width:84px;height:84px;stroke-width:1}
.cos-case-art .cos-q{position:absolute;font-size:22px;color:#e0c483}

/* Purchase: for yourself or for a friend. */
.shop-have{font-size:12px;color:#9a9a9a;white-space:nowrap}
.shop-gift svg{width:16px;height:16px;flex:none}
.shop-offer-buy .shop-gift{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;overflow-wrap:normal}
.shop-tab,.cos-soon,.achievements-open,.profile-tag-add{white-space:nowrap;overflow-wrap:normal}
.buy-option,.gift-friend,.slot-option{overflow-wrap:break-word}
dialog.buy-dialog,dialog.gift-received-dialog,dialog.soon-dialog{max-width:500px}
:is(dialog.buy-dialog,dialog.gift-received-dialog,dialog.soon-dialog,dialog.profile-slot-dialog)>.eyebrow{display:block;margin-bottom:8px}
.buy-choice{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.buy-option{display:grid;align-content:start;justify-items:start;gap:12px;min-height:0;padding:16px;border:1px solid #ffffff1f;border-radius:14px;background:#1c1c1f;color:#e6e6e6;text-align:left;font:inherit;transition:border-color .15s,background-color .15s,transform .16s cubic-bezier(.2,.8,.2,1)}
.buy-option svg{width:22px;height:22px;color:#e0c483}
.buy-option span{display:grid;gap:3px}
.buy-option strong{font-size:15px}
.buy-option small{font-size:12px;line-height:1.4;color:#8f8f8f}
.buy-option:active:not(:disabled){transform:scale(.97)}
.buy-option:focus-visible{outline:2px solid #9b9b9b;outline-offset:2px}
.buy-option.is-pending{opacity:.6;pointer-events:none}
.buy-error{margin:14px 0 0;color:#e08a84;font-size:13px;line-height:1.5}
.buy-error:empty{display:none}
.gift-friends{display:grid;gap:8px;max-height:300px;margin-top:16px;overflow-y:auto;scrollbar-width:none;-webkit-mask:linear-gradient(#000 calc(100% - 28px),transparent);mask:linear-gradient(#000 calc(100% - 28px),transparent);padding-bottom:20px}
.gift-friends::-webkit-scrollbar{display:none}
.gift-friend{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:10px 12px;border:1px solid #ffffff17;border-radius:12px;background:#1c1c1f;color:#e6e6e6;text-align:left;font:inherit;transition:border-color .15s,background-color .15s,transform .16s cubic-bezier(.2,.8,.2,1)}
.gift-friend:active{transform:scale(.98)}
.gift-friend>span:nth-child(2){display:grid;flex:1;min-width:0}
.gift-friend strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.gift-friend small{font-size:11px;color:#8f8f8f}
.gift-skeleton{display:block;height:58px;border-radius:12px;background:linear-gradient(90deg,#1a1a1d 30%,#232327 50%,#1a1a1d 70%);background-size:200% 100%;animation:cos-shimmer 1.4s linear infinite}
.gift-empty{margin:0;padding:18px;border:1px dashed #ffffff21;border-radius:12px;text-align:center}
.gift-to{display:flex;align-items:center;gap:12px;margin:4px 0 6px;padding:12px;border:1px solid #ffffff17;border-radius:12px;background:#1c1c1f}
.gift-to>span:last-child{display:grid}
.gift-to small{font-size:11px;color:#8f8f8f}
.gift-to strong{font-size:15px}
[data-gift-send]{display:inline-flex;align-items:center;gap:8px}
[data-gift-send] svg{width:16px;height:16px}
.gift-badge{display:grid;place-items:center;width:52px;height:52px;margin-bottom:14px;border-radius:14px;background:#e0c48318;color:#e0c483}
.gift-badge svg{width:28px;height:28px}
.gift-received{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.gift-received li{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid #ffffff17;border-radius:12px;background:#1c1c1f}
.gift-received li>span:last-child{display:grid}
.gift-received small{font-size:11px;color:#8f8f8f}
.gift-received .ability-icon svg{width:22px;height:22px}

/* Achievements: the corner button and the «coming soon» window. */
.achievements-open{position:fixed;right:max(24px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));z-index:3;display:inline-flex;align-items:center;gap:8px;height:44px;min-height:44px;padding:0 16px 0 13px;border:1px solid #ffffff25;border-radius:10px;background:#141414;color:#d0d0d0;font-size:13px;font-weight:600;box-shadow:inset 0 1px 0 #ffffff06;transition:background-color .12s,border-color .12s,color .12s,transform .16s cubic-bezier(.2,.8,.2,1)}
.achievements-open svg{width:18px;height:18px}
.achievements-open:active{transform:scale(.94)}
.achievements-open:focus-visible{outline:2px solid #9b9b9b;outline-offset:4px}
.soon-medals{display:flex;gap:8px;margin-bottom:18px}
.soon-medals span{display:grid;place-items:center;width:44px;height:44px;border:1px dashed #ffffff26;border-radius:50%;color:#5a5a5a}
.soon-medals span:first-child{border-style:solid;border-color:#e0c48366;color:#e0c483}
.soon-medals svg{width:22px;height:22px}

/* Profile card: banner, avatar with a frame slot, the nickname and a tag slot, the main numbers. */
.profile-card{position:relative;margin-top:22px;overflow:hidden;border:1px solid #ffffff17;border-radius:18px;background:#141416}
.profile-banner{position:relative;height:124px;background:radial-gradient(circle at 74% 30%,rgba(var(--accent-rgb),.14),transparent 55%),repeating-linear-gradient(0deg,#ffffff07 0 1px,transparent 1px 22px),repeating-linear-gradient(90deg,#ffffff07 0 1px,transparent 1px 22px),#111113}
.profile-banner::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 35%,#141416)}
.profile-card-body{position:relative;display:grid;justify-items:start;gap:10px;margin-top:-48px;padding:0 24px 22px}
.profile-avatar{position:relative;display:inline-grid;padding:0;border:0;border-radius:50%;background:none;box-shadow:none}
button.profile-avatar{cursor:pointer;transition:transform .16s cubic-bezier(.2,.8,.2,1)}
button.profile-avatar:active{transform:scale(.96)}
button.profile-avatar:focus-visible{outline:2px solid #9b9b9b;outline-offset:4px}
.account-avatar.large.profile-card-avatar{width:92px;height:92px;border-radius:50%;font-size:34px;box-shadow:0 0 0 4px #141416}
.profile-slot-pen{position:absolute;right:0;bottom:0;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#e7e7e7;color:#111;box-shadow:0 0 0 3px #141416;transition:transform .16s cubic-bezier(.2,.8,.2,1)}
.profile-slot-pen svg{width:14px;height:14px}
.profile-name-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.profile-name-row h1{margin:0;font-family:'Dela Gothic One',Unbounded,Arial,sans-serif;font-size:28px;font-weight:400;line-height:1.2;letter-spacing:-.4px;color:#f2f2f2}
.profile-name-row h1{display:flex;min-width:0;overflow-wrap:break-word}
.profile-nick{max-width:100%;margin:0;padding:0;border:0;border-radius:6px;background:none;box-shadow:none;color:inherit;font:inherit;letter-spacing:inherit;text-align:left;overflow-wrap:break-word;cursor:pointer;transition:background-color .15s,box-shadow .15s}
.profile-nick:focus-visible{outline:2px solid #9b9b9b;outline-offset:2px}
.profile-tag-add{min-height:28px;padding:0 12px;border:1px dashed #ffffff38;border-radius:999px;background:none;box-shadow:none;color:#a9a9a9;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;transition:border-color .15s,color .15s,transform .16s cubic-bezier(.2,.8,.2,1)}
.profile-tag-add:active{transform:scale(.96)}
.profile-name-row .account-presence{white-space:nowrap}
.profile-handle{margin:-4px 0 0;color:#8f8f8f;font-size:13px}
.profile-stats3{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:4px}
.profile-stats3 span{display:grid;gap:2px;font-size:12px;color:#8f8f8f}
.profile-stats3 b{font-size:18px;font-weight:700;color:#ececec;font-variant-numeric:tabular-nums}
.profile-card .account-joined{margin:2px 0 0}

/* Profile slots: what can be chosen for the frame, the nickname and the tag. */
dialog.profile-slot-dialog{max-width:640px}
.slot-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;max-height:min(52vh,460px);margin-top:18px;padding:12px 0 24px;overflow-y:auto;scrollbar-width:none;-webkit-mask:linear-gradient(#000 calc(100% - 28px),transparent);mask:linear-gradient(#000 calc(100% - 28px),transparent)}
.slot-grid::-webkit-scrollbar{display:none}
.slot-option{display:grid;gap:8px;padding:8px;border:1px solid #ffffff17;border-radius:14px;background:#1c1c1f;color:#cfcfcf;font:inherit;text-align:center}
.slot-option.is-current{border-color:#e7e7e7}
.slot-option.is-locked{opacity:.6}
.slot-option small{font-size:11px;line-height:1.35}
.slot-stage{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;height:88px;padding:0 8px;border-radius:10px;background:#0d0d0f;overflow:hidden;isolation:isolate}
.slot-stage .cos-nick{font-size:14px}
.slot-stage .cos-swatches{display:none}
.slot-none{font-size:12px;color:#8f8f8f}
.slot-tag-ghost{display:grid;place-items:center;min-width:64px;height:24px;padding:0 10px;border:1px dashed #ffffff33;border-radius:999px;color:#6a6a6a;font-size:11px;font-weight:700}

@media(max-width:520px){
 .shop-tabs{display:grid;grid-template-columns:1fr 1fr;width:100%;border-radius:22px}
 .shop-tab{padding:0 10px}
}
@media(max-width:640px){
 .cos-grid{grid-template-columns:1fr 1fr;gap:10px}
 .cos-card,.cos-case{padding:10px;gap:10px}
 .cos-stage{height:96px}
 .cos-foot{flex-direction:column;align-items:stretch}
 .cos-soon{width:100%}
 .buy-choice{grid-template-columns:1fr}
 .achievements-open{padding:0 13px}
 .achievements-open span{display:none}
 .profile-card-body{padding:0 16px 18px}
 .profile-name-row h1{font-size:24px}
}
@media(prefers-reduced-motion:reduce){
 .cos-shimmer,.cos-neon,.cos-radar-nick::after,.cos-frost,.cos-fire,.cos-orbit i,.cos-radar::before,.cos-legend::before,.cos-stamp,.cos-salute i,.cos-trail i,.cos-entrance::after,.cos-bars i,.gift-skeleton{animation:none}
 .cos-salute i{opacity:.8;transform:translate(calc(var(--x) - var(--ox)),var(--y))}
 .shop-tab,.buy-option,.gift-friend,.achievements-open,.profile-tag-add,button.profile-avatar{transition:none}
}
/* Hover only where there is a pointer: a tap must not leave a card lit. */
@media(hover:hover) and (pointer:fine){
 .cos-card:hover,.cos-case:hover{border-color:#ffffff30}
 .shop-tab:hover{color:#e6e6e6;background:#ffffff08}
 .buy-option:hover:not(:disabled){border-color:#ffffff45;background:#222226}
 .gift-friend:hover{border-color:#ffffff40;background:#222226}
 .profile-tag-add:hover{border-color:#ffffff70;color:#e6e6e6}
 .profile-nick:hover{background:#ffffff0c;box-shadow:0 0 0 6px #ffffff0c}
 button.profile-avatar:hover .profile-slot-pen{transform:scale(1.08)}
 .achievements-open:hover{background:#202020;border-color:#ffffff4d;color:#eee}
}

/* Cosmetics 2. Nicknames get room for their glow; the radar sweeps the letters and its scan line fades at both ends. */
.cos-nick{padding:6px 18px}
.cos-radar-nick{position:relative;color:transparent;background:linear-gradient(90deg,#5f9f74 0 40%,#eafff2 50%,#5f9f74 60% 100%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;animation:cos-radar-text 3s linear infinite}
.cos-radar-nick::after{inset:2px 0;background:linear-gradient(90deg,transparent calc(50% - 1px),#c9f5d6 50%,transparent calc(50% + 1px));-webkit-mask:linear-gradient(transparent,#000 30%,#000 70%,transparent);mask:linear-gradient(transparent,#000 30%,#000 70%,transparent);filter:drop-shadow(0 0 4px #7fc495);animation:cos-radar-line 3s linear infinite}
@keyframes cos-radar-text{from{background-position:100% 0}to{background-position:0 0}}
@keyframes cos-radar-line{0%{transform:translateX(-62%);opacity:0}14%,86%{opacity:1}100%{transform:translateX(62%);opacity:0}}
.cos-case-art .cos-q{position:static;font-size:64px;color:#4d4d4d}
.gift-friend.is-blocked{opacity:.6}
.gift-friend.is-blocked small{color:#e08a84}
@media(prefers-reduced-motion:reduce){.cos-radar-nick{animation:none;background-position:50% 0}.cos-radar-nick::after{animation:none;opacity:0}}

/* Profile tags. DIABLO: a chamfered ember plate; heat moves inside it and a few sparks rise. */
.dt{--dt-h:30px;--dt-font:12.5px;--dt-pad:20px;--dt-cut:10px;position:relative;isolation:isolate;display:inline-grid;place-items:center;flex:none;height:var(--dt-h);vertical-align:middle;overflow:visible}
.dt--sm{--dt-h:20px;--dt-font:9px;--dt-pad:13px;--dt-cut:7px}
.dt-plate{position:relative;display:grid;place-items:center;height:100%;padding:0 var(--dt-pad);clip-path:polygon(var(--dt-cut) 0,calc(100% - var(--dt-cut)) 0,100% 50%,calc(100% - var(--dt-cut)) 100%,var(--dt-cut) 100%,0 50%);background:linear-gradient(180deg,#ff8a4a,#8a2a16 55%,#ff6a2b)}
.dt-plate::before{content:'';position:absolute;inset:1px;z-index:0;clip-path:polygon(calc(var(--dt-cut) - .5px) 0,calc(100% - var(--dt-cut) + .5px) 0,100% 50%,calc(100% - var(--dt-cut) + .5px) 100%,calc(var(--dt-cut) - .5px) 100%,0 50%);background:radial-gradient(60% 120% at var(--dt-heat,30%) 120%,#b8321a 0%,transparent 70%),radial-gradient(120% 140% at 50% 120%,#5e180f,transparent 60%),linear-gradient(180deg,#3a0f0c,#1d0809);animation:dt-heat 5s ease-in-out infinite alternate}
@property --dt-heat{syntax:'<percentage>';inherits:false;initial-value:30%}
@keyframes dt-heat{to{--dt-heat:70%}}
.dt-label{position:relative;z-index:1;margin-right:-.14em;font:400 var(--dt-font)/1 'Dela Gothic One',Unbounded,Arial,sans-serif;letter-spacing:.14em;color:#ffe6c4;text-shadow:0 0 6px #ff6a2b80,0 1px 0 #0009;white-space:nowrap}
.dt::after{content:'';position:absolute;z-index:-2;left:8%;right:8%;top:30%;bottom:-30%;border-radius:50%;background:#ff5a2a;opacity:.22;filter:blur(10px)}
.dt-sparks{position:absolute;z-index:-1;left:var(--dt-cut);right:var(--dt-cut);bottom:60%;height:calc(var(--dt-h) * 1.4);pointer-events:none}
.dt-sparks i{position:absolute;bottom:0;left:var(--x);width:2px;height:2px;border-radius:50%;background:#ffc46a;box-shadow:0 0 4px #ff8a3d;opacity:0;animation:dt-spark 2.6s ease-out infinite;animation-delay:var(--d)}
@keyframes dt-spark{0%{transform:translate(0,0);opacity:0}15%{opacity:1}100%{transform:translate(var(--dx),calc(var(--dt-h) * -1.3));opacity:0}}
.profile-tag-slot{display:inline-grid;padding:4px 2px;border:0;border-radius:8px;background:none;box-shadow:none;cursor:pointer;transition:transform .16s cubic-bezier(.2,.8,.2,1)}
.profile-tag-slot:active{transform:scale(.96)}
.profile-tag-slot:focus-visible{outline:2px solid #9b9b9b;outline-offset:4px}
.slot-option[data-tag-choice]{cursor:pointer;transition:border-color .15s,transform .16s cubic-bezier(.2,.8,.2,1)}
.slot-option[data-tag-choice]:active{transform:scale(.97)}
.slot-option[data-tag-choice]:disabled{opacity:.6;cursor:progress}
.slot-stage .dt{transform:scale(.9)}
dialog.tag-reward-dialog{max-width:440px;text-align:center}
dialog.tag-reward-dialog .dialog-actions{justify-content:center}
.tag-reward-stage{display:grid;place-items:center;height:110px;margin:-4px 0 18px;border:1px solid #ffffff12;border-radius:14px;background:radial-gradient(60% 80% at 50% 70%,#ff5a2a1f,transparent 70%),#0d0d0f}
.tag-reward-stage .dt{transform:scale(1.25);animation:dt-reveal .5s cubic-bezier(.23,1,.32,1) both}
@keyframes dt-reveal{from{transform:scale(1.05);opacity:0;filter:blur(4px)}to{transform:scale(1.25);opacity:1;filter:blur(0)}}
@media(hover:hover) and (pointer:fine){.slot-option[data-tag-choice]:hover{border-color:#ffffff40}}
@media(prefers-reduced-motion:reduce){.dt-plate::before,.dt-sparks i,.tag-reward-stage .dt{animation:none}.dt-sparks i{opacity:0}.profile-tag-slot,.slot-option[data-tag-choice]{transition:none}}

/* Home 2. Logo and beta label top left. */
.home-shell>.home-brand{position:fixed;top:max(26px,env(safe-area-inset-top));left:max(32px,env(safe-area-inset-left));z-index:30;display:flex;align-items:center;gap:14px;margin:0;justify-content:flex-start;color:#e6e6e6}
.home-brand .brand-mark{width:44px;height:44px}
.home-brand-copy{display:grid;gap:6px;text-align:left}
.home-brand-copy>span{font:400 13px/1.15 'Dela Gothic One',Unbounded,Arial,sans-serif;letter-spacing:.06em;color:#ececec}
.home-brand-copy small{display:flex;align-items:center;gap:8px;font:600 10px/1 Manrope,Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#8d8d8d}
.home-brand-copy small i{width:6px;height:6px;border-radius:50%;background:#e0c483;box-shadow:0 0 8px #e0c48380}
.home-shell>.local-note{display:none}

/* Top right: the player's numbers, then profile, inventory and settings in one row. */
.home-topbar{position:fixed;top:max(16px,env(safe-area-inset-top));right:max(24px,env(safe-area-inset-right));z-index:35;display:flex;align-items:center;gap:10px}
.home-topbar>:is(.settings-trigger,.inventory-trigger,.account-entry){position:static;inset:auto;margin:0}
.home-topbar .inventory-trigger{width:44px;height:44px;min-height:44px}
.home-topbar .inventory-trigger svg{width:20px;height:20px}
.home-stats{display:flex;align-items:stretch;height:44px;border:1px solid #ffffff1c;border-radius:10px;background:#141414ee;backdrop-filter:blur(10px);overflow:hidden}
.home-stats>span{display:grid;align-content:center;gap:2px;padding:0 14px;border-left:1px solid #ffffff12;line-height:1}
.home-stats>span:first-child{border-left:0}
.home-stats small{font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8d8d8d}
.home-stats b{font-size:14px;font-weight:700;color:#ececec;font-variant-numeric:tabular-nums}
.home-stats .home-stats-coins{display:flex;align-items:center;gap:7px;color:#e0c483}
.home-stats .home-stats-coins svg{width:16px;height:16px}
.home-stats .home-stats-coins b{color:#e0c483}

/* The menu: plain words. The hovered one lights up and grows, the others step back. */
.home-hub{display:contents}
.home-beta{display:none}
.home-nav{position:fixed;left:max(80px,calc(env(safe-area-inset-left) + 48px));top:50%;z-index:20;display:grid;grid-auto-rows:auto;align-content:start;justify-items:start;gap:clamp(2px,.8vh,8px);height:auto;transform:translateY(-50%)}
.home-link{position:relative;display:block;min-height:0;padding:4px 0;border:0;border-radius:0;background:none;box-shadow:none;color:#c4c4c4;font:400 clamp(26px,3.1vw,44px)/1.12 'Dela Gothic One',Unbounded,Arial,sans-serif;letter-spacing:.01em;text-transform:uppercase;text-align:left;white-space:nowrap;overflow-wrap:normal;cursor:pointer;transition:opacity .2s cubic-bezier(.23,1,.32,1),color .2s cubic-bezier(.23,1,.32,1)}
.home-link>span{display:inline-block;transform-origin:0 60%;transition:transform .22s cubic-bezier(.23,1,.32,1),text-shadow .22s cubic-bezier(.23,1,.32,1)}
.home-link::before{content:'';position:absolute;left:-26px;top:50%;width:8px;height:8px;margin-top:-4px;background:#e0c483;box-shadow:0 0 12px #e0c483aa;transform:rotate(45deg) scale(.4);opacity:0;transition:opacity .2s,transform .22s cubic-bezier(.23,1,.32,1)}
.home-link:is(:hover,:focus-visible){color:#fff}
.home-link:is(:hover,:focus-visible)>span{transform:scale(1.08);text-shadow:0 0 22px #ffffff59,0 0 2px #ffffff80}
.home-link:is(:hover,:focus-visible)::before{opacity:1;transform:rotate(45deg) scale(1)}
.home-nav:is(:hover,:has(.home-link:focus-visible)) .home-link:not(:hover):not(:focus-visible){opacity:.42}
.home-link:active>span{transform:scale(1.03);transition-duration:.09s}
.home-link:focus-visible{outline:none}
.home-link:focus-visible>span{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px;text-decoration-color:#e0c48399}

/* Patch notes card bottom right: the newest group, fading out at the bottom; the card opens the full notes. */
.home-patch{position:fixed;right:max(32px,env(safe-area-inset-right));bottom:max(32px,env(safe-area-inset-bottom));z-index:20;display:grid;grid-template-rows:auto auto 1fr auto;gap:10px;width:min(360px,30vw);height:min(440px,48vh);padding:20px 20px 18px;border:1px solid #ffffff1f;border-radius:16px;background:linear-gradient(180deg,#1b1b1e,#121214);box-shadow:0 24px 60px -30px #000;color:#ececec;text-align:left;font:inherit;overflow:hidden;cursor:pointer;transition:border-color .2s cubic-bezier(.23,1,.32,1),transform .2s cubic-bezier(.23,1,.32,1)}
.home-patch-head{display:flex;align-items:center;justify-content:space-between;gap:10px;line-height:16px}
.home-patch-head small,.home-patch-label{line-height:16px}
.home-patch-label{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#e0c483}
.home-patch-label svg{width:16px;height:16px}
.home-patch-head small{font-size:11px;color:#8d8d8d}
.home-patch>strong{font:400 19px/1.25 'Dela Gothic One',Unbounded,Arial,sans-serif;letter-spacing:-.2px;color:#f2f2f2}
.home-patch-list{min-height:0;overflow:hidden;-webkit-mask:linear-gradient(#000 55%,transparent);mask:linear-gradient(#000 55%,transparent)}
.home-patch-list em{display:block;margin-bottom:6px;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8d8d8d}
.home-patch-list ul{display:grid;gap:8px;margin:0;padding:0 0 0 16px}
.home-patch-list li{font-size:12.5px;line-height:1.5;color:#bdbdbd}
.home-patch-list li::marker{color:#e0c483}
.home-patch-more{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:#ececec}
.home-patch-more svg{width:16px;height:16px;transition:transform .2s cubic-bezier(.23,1,.32,1)}
.home-patch:active{transform:scale(.985)}
.home-patch:focus-visible{outline:2px solid #9b9b9b;outline-offset:4px}

@media(hover:hover) and (pointer:fine){
 .home-patch:hover{border-color:#ffffff40}
 .home-patch:hover .home-patch-more svg{transform:translateX(4px)}
}
@media(max-width:900px){
 .home-shell>.home-brand{left:16px;top:16px}
 .home-brand-copy{display:none}
 .home-topbar{right:16px;top:16px;gap:8px}
 .home-stats{position:fixed;top:calc(max(16px,env(safe-area-inset-top)) + 56px);right:16px}
 .home-hub{position:fixed;inset:0;z-index:15;display:grid;align-content:start;gap:24px;padding:140px 16px 32px;overflow-y:auto;scrollbar-width:none}
 .home-hub::-webkit-scrollbar{display:none}
 .home-beta{display:flex;align-items:center;gap:8px;margin:0;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#8d8d8d}
 .home-beta i{width:6px;height:6px;border-radius:50%;background:#e0c483;box-shadow:0 0 8px #e0c48380}
 .home-nav{position:static;order:1;transform:none;padding-left:0}
 .home-link::before{display:none}
 .home-beta{order:0}
 .home-patch{order:2}
 .home-link{font-size:clamp(20px,6vw,30px)}
 .home-patch{position:static;width:100%;height:300px}
}@media(max-width:520px){.home-brand-copy>span{display:none}}
@media(prefers-reduced-motion:reduce){.home-link,.home-link>span,.home-link::before,.home-patch,.home-patch-more svg{transition:none}.home-link:is(:hover,:focus-visible)>span{transform:none}}

/* Home 3. Hovered entry: gold, sharp text, a soft glow behind it. */
.home-link{isolation:isolate}
.home-link>span{position:relative}
.home-link>span::after{content:'';position:absolute;z-index:-1;inset:-18% -4% -10%;border-radius:999px;background:radial-gradient(closest-side,#e0c4832e,#e0c48312 60%,transparent);filter:blur(12px);opacity:0;transition:opacity .25s cubic-bezier(.23,1,.32,1)}
.home-link>span{transition:transform .22s cubic-bezier(.23,1,.32,1),color .2s cubic-bezier(.23,1,.32,1)}
.home-nav .home-link:is(:hover,:focus-visible)>span{color:#e6c878;text-shadow:none}
.home-link:is(:hover,:focus-visible)>span::after{opacity:1}
/* Lighter type, and the others step back only while the pointer is on an entry, not anywhere over the menu's box. */
.home-link{font-size:clamp(22px,2.4vw,34px)}
.home-link::before{pointer-events:none}
.home-nav:is(:hover,:has(.home-link:focus-visible)) .home-link:not(:hover):not(:focus-visible){opacity:1}
.home-nav:has(.home-link:hover,.home-link:focus-visible) .home-link:not(:hover):not(:focus-visible){opacity:.42}
/* The menu is centred in the free area under the header, not in the whole window. */
@media(min-width:901px){.home-nav{top:calc(50% + 30px)}}
/* Logo: the globe is as tall as the two-line name with the beta line, so the text sits in its middle. */
.home-shell>.home-brand{align-items:center}
.home-shell>.home-brand .brand-mark{width:46px;height:46px;flex:none}
.home-shell>.home-brand .brand-mark svg{width:100%;height:100%;display:block}
/* Inventory icon: a block in the middle of its square instead of a line of text. */
.home-topbar .inventory-trigger{display:grid;place-items:center;padding:0;line-height:0}
.home-topbar .inventory-trigger svg{display:block}
@media(prefers-reduced-motion:reduce){.home-link>span::after{transition:none}}

/* Admin. Promo codes from the shop and the status on another player's profile. */
.shop-wallet{flex-wrap:wrap}
dialog.promo-dialog.padmin-dialog{max-width:520px}
.padmin{display:grid;gap:16px}
.padmin h2{margin:2px 0 0;font-size:22px;line-height:1.25}
.padmin-tabs{display:grid;grid-template-columns:1fr 1fr;justify-self:stretch}
.padmin-tabs .shop-tab span{font-variant-numeric:tabular-nums;opacity:.6}
.padmin-pane{display:grid;gap:14px}
.padmin-pane[hidden]{display:none}
.padmin-scroll{display:grid;align-content:start;gap:20px;height:min(54vh,470px);margin:0 -4px;padding:4px 4px 24px;overflow-y:auto;scrollbar-width:none;-webkit-mask:linear-gradient(#000 calc(100% - 40px),transparent);mask:linear-gradient(#000 calc(100% - 40px),transparent)}
.padmin-scroll::-webkit-scrollbar{display:none}
.padmin-scroll.is-end{-webkit-mask:none;mask:none}
.padmin-field{display:grid;gap:10px;min-width:0}
.padmin-label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#8d8d8d}
.padmin .ov-num{display:flex;width:100%}
.padmin .ov-num input{flex:1;min-width:0}
.padmin-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border:1px solid #ffffff17;border-radius:12px;background:#0e0e10}
.padmin-seg label{position:relative;display:grid}
.padmin-seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.padmin-seg span{display:grid;place-items:center;min-height:36px;padding:0 8px;border-radius:9px;color:#9a9a9a;font-size:13px;font-weight:600;white-space:nowrap;transition:background-color .2s cubic-bezier(.23,1,.32,1),color .2s cubic-bezier(.23,1,.32,1),transform .16s cubic-bezier(.23,1,.32,1)}
.padmin-seg input:checked+span{background:#e7e7e7;color:#111}
.padmin-seg input:focus-visible+span{outline:2px solid #9b9b9b;outline-offset:2px}
.padmin-seg label:active span{transform:scale(.96)}
.padmin-coins{display:none;gap:12px}
#padmin-form[data-coins="fixed"] .padmin-coins[data-coins="fixed"],#padmin-form[data-coins="roll"] .padmin-coins[data-coins="roll"]{display:grid}
.padmin-range{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;color:#6f6f6f}
.padmin-odds:empty{display:none}
.padmin-group{display:grid;gap:8px}
.padmin-group small{font-size:12px;color:#8d8d8d}
.padmin-chips{display:flex;flex-wrap:wrap;gap:8px}
.padmin-chip{position:relative;display:inline-grid}
.padmin-chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.padmin-chip span{display:inline-flex;align-items:center;gap:9px;min-height:38px;padding:0 15px 0 12px;border:1px solid #ffffff1c;border-radius:999px;background:#141414;color:#cfcfcf;font-size:13px;font-weight:600;transition:background-color .16s cubic-bezier(.23,1,.32,1),border-color .16s cubic-bezier(.23,1,.32,1),color .16s cubic-bezier(.23,1,.32,1),transform .16s cubic-bezier(.23,1,.32,1)}
.padmin-chip span::before{content:'';flex:none;width:14px;height:14px;border:1.5px solid #ffffff42;border-radius:4px;background:center/10px no-repeat;transition:background-color .16s,border-color .16s}
.padmin-chip input:checked+span{border-color:#e0c48370;background:#e0c48314;color:#f2f2f2}
.padmin-chip input:checked+span::before{border-color:#e0c483;background-color:#e0c483;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2.5 6.2 2.3 2.3 4.7-5'/%3E%3C/svg%3E")}
.padmin-chip input:focus-visible+span{outline:2px solid #9b9b9b;outline-offset:2px}
.padmin-chip:active span{transform:scale(.96)}
.padmin-rows{gap:8px}
.padmin-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:12px 12px 12px 16px;border:1px solid #ffffff17;border-radius:12px;background:#121214}
.padmin-row strong{display:block;font-size:14px;letter-spacing:1.5px;color:#f2f2f2;overflow-wrap:anywhere}
.padmin-row small{display:block;margin-top:3px;font-size:12px;line-height:1.4;color:#8d8d8d}
.padmin-uses{font-size:13px;font-weight:700;color:#cfcfcf;font-variant-numeric:tabular-nums;white-space:nowrap}
.padmin-row.is-spent strong,.padmin-row.is-spent .padmin-uses{color:#6f6f6f}
.padmin-delete{min-height:34px;padding:0 12px;font-size:12px;white-space:nowrap}
.padmin-delete.is-armed{border-color:#d0484880;color:#ff9b9b}
.padmin-row.is-new{animation:padmin-new 1.2s cubic-bezier(.23,1,.32,1) both}
@keyframes padmin-new{from{border-color:#e0c483aa;background:#e0c4831c}}
.padmin-empty{margin:0;padding:28px 0;text-align:center;font-size:13px;color:#8d8d8d}
.admin-role{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:12px;padding:14px 14px 14px 18px;border:1px solid #ffffff17;border-radius:14px;background:#121214}
.admin-role>span{display:grid;gap:3px}
.admin-role b{font-size:14px;color:#ececec}
.admin-role.is-admin b{color:#e0c483}
.admin-role button{flex:none;min-height:38px;white-space:nowrap}
@media(hover:hover) and (pointer:fine){.padmin-chip:hover span{border-color:#ffffff3a;color:#f2f2f2}.padmin-seg label:hover input:not(:checked)+span{color:#e6e6e6;background:#ffffff08}}
@media(max-width:480px){.padmin-row{grid-template-columns:minmax(0,1fr) auto}.padmin-delete{grid-column:1/-1}}
/* No visible scrollbars: lists that scroll hide the bar and fade out at the bottom; the padding lets the last row clear the fade. */
:is(.ledger-list,.social-list,.lobby-roster-list,.arena-analytics,.patch-body,.ov-select-list){scrollbar-width:none}
:is(.ledger-list,.social-list,.lobby-roster-list,.arena-analytics,.patch-body,.ov-select-list)::-webkit-scrollbar{display:none}
:is(.ledger-list,.social-list,.lobby-roster-list,.arena-analytics){padding-right:0;padding-bottom:28px;-webkit-mask:linear-gradient(#000 calc(100% - 36px),transparent);mask:linear-gradient(#000 calc(100% - 36px),transparent)}
.patch-body{-webkit-mask:linear-gradient(#000 calc(100% - 36px),transparent);mask:linear-gradient(#000 calc(100% - 36px),transparent);padding-bottom:40px}
@media(prefers-reduced-motion:reduce){.padmin-seg span,.padmin-chip span,.padmin-chip span::before{transition:none}.padmin-row.is-new{animation:none}}

/* Scrollbars. Hidden on every element; scrolling itself still works with the wheel, touch and keys. */
*{scrollbar-width:none}
*::-webkit-scrollbar{display:none}

/* Scrollbars 2. The hide wins over every narrower rule. */
*{scrollbar-width:none!important}
*::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}

/* Fixes 1. Event choices: the field and the buttons share one bottom line, the buttons are one size. */
.event-choice>.event-choice-actions{align-items:flex-end}
.event-choice-actions>button{flex:0 0 172px;min-height:43px;padding-inline:12px}
.event-choice-actions .ov-select-button{min-height:43px}
@media(max-width:700px){.event-choice-actions>button{flex:1 1 140px;min-width:0}}

/* Promo form: «Add reward» opens sections; picked items are chips with a remove button. */
.padmin-gifts{display:flex;flex-wrap:wrap;gap:8px}
.padmin-gifts:empty{display:none}
.padmin-gift{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 5px 0 12px;border:1px solid #e0c48370;border-radius:999px;background:#e0c48314;color:#f2f2f2;font-size:13px;font-weight:600}
.padmin-gift>span{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#e0c483}
.padmin-gift button{display:grid;place-items:center;width:28px;height:28px;min-height:0;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:none;color:#bdbdbd;font-size:17px;line-height:1;transition:background-color .14s,color .14s,transform .16s cubic-bezier(.23,1,.32,1)}
.padmin-gift button:active{transform:scale(.9)}
.padmin-add{display:inline-flex;align-items:center;justify-content:center;gap:8px;justify-self:start;min-height:42px;padding:0 18px 0 14px;border:1px dashed #ffffff33;border-radius:12px;background:transparent;box-shadow:none;color:#d6d6d6;font-size:13px;font-weight:600;transition:border-color .14s,background-color .14s,color .14s,transform .16s cubic-bezier(.23,1,.32,1)}
.padmin-add svg{width:16px;height:16px;color:#e0c483}
.padmin-add[aria-expanded="true"]{border-style:solid;border-color:#ffffff3a;background:#ffffff08;color:#f2f2f2}
.padmin-add:active{transform:scale(.97)}
.padmin-menu{display:grid;gap:2px;padding:6px;border:1px solid #ffffff1c;border-radius:14px;background:#141416;animation:padmin-menu .18s cubic-bezier(.23,1,.32,1) both}
.padmin-menu[hidden]{display:none}
@keyframes padmin-menu{from{opacity:0;transform:translateY(-4px)}}
.padmin-sec-head{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:42px;padding:0 12px;border:0;border-radius:10px;background:transparent;box-shadow:none;color:#ececec;font-size:13px;font-weight:600;text-align:left;transition:background-color .14s}
.padmin-sec-head small{margin-left:8px;font-size:12px;font-weight:500;color:#8d8d8d}
.padmin-sec-head svg{width:16px;height:16px;color:#8d8d8d;transition:transform .2s cubic-bezier(.23,1,.32,1)}
.padmin-sec-head[aria-expanded="true"] svg{transform:rotate(180deg)}
.padmin-sec-items{display:flex;flex-wrap:wrap;gap:6px;padding:4px 8px 10px}
.padmin-sec-items[hidden]{display:none}
.padmin-item{min-height:34px;padding:0 13px;border:1px solid #ffffff1c;border-radius:999px;background:#0e0e10;box-shadow:none;color:#d6d6d6;font-size:12.5px;font-weight:600;transition:border-color .14s,color .14s,transform .16s cubic-bezier(.23,1,.32,1)}
.padmin-item:active:not(:disabled){transform:scale(.96)}
.padmin-item:disabled{opacity:.38;cursor:default}
.padmin-sec-head:focus-visible,.padmin-item:focus-visible,.padmin-add:focus-visible,.padmin-gift button:focus-visible{outline:2px solid #9b9b9b;outline-offset:2px}
@media(hover:hover) and (pointer:fine){.padmin-gift button:hover{background:#ffffff14;color:#fff}.padmin-add:hover{border-color:#ffffff55;color:#f2f2f2}.padmin-sec-head:hover{background:#ffffff08}.padmin-item:hover:not(:disabled){border-color:#e0c48370;color:#fff}}
@media(prefers-reduced-motion:reduce){.padmin-menu{animation:none}.padmin-sec-head svg,.padmin-gift button,.padmin-add,.padmin-item{transition:none}}

/* Nations. Flags. Georgia: the five-cross flag; India: saffron, white, green with the Ashoka chakra. */
.GEO,.flag.GEO{background:#f7f7f7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20' preserveAspectRatio='none'%3E%3Cpath fill='%23e8112d' d='M13 0h4v20h-4zM0 8h30v4H0zM6.4 2.6h1.2v4.8H6.4zM4.6 4.4h4.8v1.2H4.6zM22.4 2.6h1.2v4.8h-1.2zM20.6 4.4h4.8v1.2h-4.8zM6.4 12.6h1.2v4.8H6.4zM4.6 14.4h4.8v1.2H4.6zM22.4 12.6h1.2v4.8h-1.2zM20.6 14.4h4.8v1.2h-4.8z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.IND,.flag.IND{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Ccircle cx='15' cy='10' r='2.7' fill='none' stroke='%23000080' stroke-width='.55'/%3E%3Ccircle cx='15' cy='10' r='.55' fill='%23000080'/%3E%3Cpath stroke='%23000080' stroke-width='.18' d='M15 7.3v5.4M12.3 10h5.4M13.1 8.1l3.8 3.8M16.9 8.1l-3.8 3.8'/%3E%3C/svg%3E") center/auto 100% no-repeat,linear-gradient(#ff9933 33.3%,#f7f7f7 33.3%,#f7f7f7 66.6%,#138808 66.6%)}
/* Accents: Georgian crimson and Indian indigo, apart from the colours of the others. */
:root[data-country="GEO"]{--accent:#ef6f6c;--accent-rgb:239,111,108}
.arena-country[data-country="GEO"]{--arena-accent:#ef6f6c}
.target-country-option[data-country="GEO"]:hover strong{color:#ef6f6c}
.join-nation-option[data-country="GEO"]{--join-accent:239,111,108}
.lobby-team-nicknames[data-country="GEO"]{--nickname-color:#ef6f6c}
:root[data-country="IND"]{--accent:#9b97f2;--accent-rgb:155,151,242}
.arena-country[data-country="IND"]{--arena-accent:#9b97f2}
.target-country-option[data-country="IND"]:hover strong{color:#9b97f2}
.join-nation-option[data-country="IND"]{--join-accent:155,151,242}
.lobby-team-nicknames[data-country="IND"]{--nickname-color:#9b97f2}

/* Грузинское вино: how much of each raw material goes to the market. */
dialog.wine-dialog{width:min(520px,calc(100vw - 32px))}
.wine-note{margin:6px 0 0;color:var(--muted);font-size:13px}
.wine-list{display:grid;gap:8px;margin-top:16px}
.wine-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:0 8px 0 14px;border:1px solid #ffffff1c;border-radius:10px;background:#151517;transition:border-color .14s,background-color .14s}
.wine-row.is-on{border-color:rgba(var(--accent-rgb),.6);background:rgba(var(--accent-rgb),.06)}
.wine-row strong{display:block;font-size:13px}
.wine-row small{display:block;color:var(--muted);font-size:11px}
.wine-step{display:flex;align-items:center;gap:4px}
.wine-step button{display:grid;place-items:center;width:36px;height:36px;min-height:0;padding:0;border-radius:8px;font-size:17px;line-height:1;transition:background-color .14s,border-color .14s,transform .16s cubic-bezier(.23,1,.32,1)}
.wine-step button:active:not(:disabled){transform:scale(.92)}
.wine-step output{min-width:28px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}

/* Shop: abilities of the starter countries, one column per country. */
.shop-starter{margin-top:36px}
/* The countries share their rows (subgrid), so both cards line up across the columns and the prices sit on one line. */
.shop-starter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));column-gap:16px;row-gap:0}
.shop-starter-country{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:10px;margin-bottom:16px}
.shop-starter .shop-ability{display:flex;flex-direction:column}
.shop-starter .shop-ability>.shop-offer-buy{margin-top:auto}
.shop-starter-head{display:flex;align-items:center;gap:10px;min-height:28px}
.shop-starter-head .flag{width:30px;height:20px;border-radius:3px;flex:none}
.shop-starter-head h3{margin:0;font-size:15px}
@media(prefers-reduced-motion:reduce){.wine-row,.wine-step button{transition:none}}

/* Shop hover. No coloured glows: every card has a thin white edge with a quiet glow; the card under the pointer grows a
   little and the others step back, as the links of the main menu do. */
.shop-page{--shop-edge:#ffffff26;--shop-edge-hover:#ffffff66;--shop-ease:cubic-bezier(.23,1,.32,1)}
.shop-page :is(.shop-grid>.shop-offer,.shop-ability,.cos-mystery,.cos-case){border-color:var(--shop-edge);box-shadow:0 0 0 1px #ffffff05,0 0 22px -10px #ffffff1f;transition:transform .32s var(--shop-ease),opacity .26s ease,border-color .26s ease,box-shadow .26s ease}
.shop-page .shop-grid>.shop-offer::before{display:none}
.shop-page .shop-grid .shop-ability[data-kind="active"] .shop-tag,.shop-page .shop-grid .shop-ability .ability-icon{border-color:#ffffff30;color:#d6d6d6}
@media(hover:hover) and (pointer:fine){
 .shop-page :is(.shop-grid>.shop-offer,.shop-ability,.cos-mystery,.cos-case):hover{border-color:var(--shop-edge-hover);box-shadow:0 0 0 1px #ffffff12,0 0 34px -8px #ffffff33,0 24px 60px -30px #000000cc;transform:scale(1.02)}
 /* Large cards grow less, so their edges move about as far as a small card's. */
 .shop-page .shop-grid>.shop-offer:hover{transform:scale(1.008)}
 .shop-page:has(:is(.shop-grid>.shop-offer,.shop-ability,.cos-mystery,.cos-case):hover) :is(.shop-grid>.shop-offer,.shop-ability,.cos-mystery,.cos-case):not(:hover){opacity:.42}
 .shop-page :is(.shop-grid>.shop-offer,.shop-ability,.cos-mystery,.cos-case):hover{z-index:2}
}
@media(prefers-reduced-motion:reduce){.shop-page :is(.shop-grid>.shop-offer,.shop-ability,.cos-mystery,.cos-case){transition:opacity .2s ease,border-color .2s ease}.shop-page :is(.shop-grid>.shop-offer,.shop-ability,.cos-mystery,.cos-case):hover{transform:none}}

/* Banner scenes. The country text keeps its own column and the scene lives only to the right of it, so they never overlap. */
.hero:has(.hero-scene){display:grid;grid-template-columns:minmax(0,500px) minmax(0,1fr);column-gap:32px;align-items:start}
.hero:has(.hero-scene) .hero-content{grid-area:1/1}
.hero:has(.hero-scene) h1{overflow-wrap:anywhere}
.hero-scene{grid-area:1/2;position:relative;align-self:stretch;min-height:235px;margin:-27px -30px -27px 0;pointer-events:none}
/* The turn timer, «Страны готовы» and «Готово» at the bottom of the sidebar. Every block is a row as tall and as wide as
   «Позвать ведущего»: one under the other in the tall sidebar, side by side in the top bar. */
.sidebar-turn .hero-turn-timer,.sidebar-ready-count{position:static;inset:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;width:auto;height:44px;margin:0;padding:0 12px;border-radius:8px;box-sizing:border-box}
.sidebar-ready-count{border:1px solid #ffffff12;background:#ffffff02;color:#b4b4b4}
.sidebar-ready-count.is-ready{border-color:#7fd39a55;background:#7fd39a0d}
.sidebar-turn .turn-clock-label{font-size:11px;line-height:1.2;letter-spacing:.3px;color:#9a9a9a;text-transform:none}
.sidebar-turn strong{font-size:15px;line-height:1;color:#f2f2f2;white-space:nowrap;font-variant-numeric:tabular-nums}
.sidebar-turn .turn-clock-track{flex:0 0 40px;order:3}
.sidebar-turn .sidebar-ready{display:flex;align-items:center;justify-content:center;width:100%;height:44px;min-height:0;margin:0;padding:0 18px;border-radius:8px;font-size:12px;font-weight:700;transition:transform .12s ease,background-color .16s ease}
.sidebar-turn .sidebar-ready:active{transform:scale(.97)}
@media(min-width:1651px){
 aside>.sidebar-turn{margin-top:auto;margin-bottom:12px;display:grid;gap:12px}
 aside>.sidebar-turn~.sidebar-call{margin-top:0}
 .sidebar-turn .hero-turn-timer,.sidebar-ready-count,.sidebar-turn .sidebar-ready{height:52px}
}
@media(max-width:1650px){
 aside>.sidebar-turn{display:flex;gap:8px;align-items:stretch}
 .sidebar-ready-count{gap:12px}
 .sidebar-turn .sidebar-ready{width:auto}
}
@media(max-width:800px){aside>.sidebar-turn{grid-column:1/-1}aside>.sidebar-turn>*{flex:1}}
.hero-defs{position:absolute;width:0;height:0}
.hero-slide{position:absolute;inset:0;opacity:0;filter:blur(10px);transform:scale(.985);transition:opacity .9s cubic-bezier(.23,1,.32,1),filter .9s cubic-bezier(.23,1,.32,1),transform .9s cubic-bezier(.23,1,.32,1)}
.hero-slide.on{opacity:1;filter:none;transform:none}
.hero-caption{position:absolute;right:24px;bottom:18px;font-size:10px;letter-spacing:1.4px;color:#a0a0a0;text-transform:uppercase;white-space:nowrap}
.hero-dots{position:absolute;right:24px;top:24px;display:flex;gap:6px}
.hero-dots i{width:16px;height:2px;border-radius:2px;background:#ffffff26;overflow:hidden}
.hero-dots b{display:block;height:100%;width:0;background:#ffffffaa}
.hero-dots i.on b{animation:hero-dot 7s linear forwards;animation-delay:calc(var(--past,0ms) * -1)}
@keyframes hero-dot{to{width:100%}}
/* The capital: black and white, faint, fading out over most of its width to the left. */
.hero-photo{-webkit-mask-image:linear-gradient(90deg,transparent 0,#0003 25%,#0009 50%,#000 75%);mask-image:linear-gradient(90deg,transparent 0,#0003 25%,#0009 50%,#000 75%)}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32;filter:grayscale(1) contrast(1.1);transform-origin:60% 50%;animation:hero-pan 26s ease-in-out infinite alternate}
.hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#111 0,transparent 45%)}
@keyframes hero-pan{from{transform:scale(1)}to{transform:scale(1.08) translateX(-1.5%)}}
/* The outline: a soft uneven grid that dissolves before the edges, the border drawn in, cities with their levels. */
.hero-map svg{position:absolute;inset:10px 24px 28px 0;width:calc(100% - 24px);height:calc(100% - 38px);overflow:visible}
.hero-grid{fill:none;stroke:#ffffff1c;stroke-width:1;filter:url(#hero-rough)}
.hero-land{fill:rgba(var(--accent-rgb),.07);stroke:rgba(var(--accent-rgb),.7);stroke-width:1.1;stroke-linejoin:round;stroke-dasharray:1000;stroke-dashoffset:0}
.hero-map.enter .hero-land{animation:hero-draw 2.4s cubic-bezier(.23,1,.32,1) .2s backwards}
@keyframes hero-draw{from{stroke-dashoffset:1000}}
.hero-city .dot{fill:var(--accent)}
.hero-city .ring{fill:none;stroke:var(--accent);transform-box:fill-box;transform-origin:center;animation:hero-ping 2.6s ease-out infinite}
.hero-city text{fill:#d6d6d6;font:600 11px Manrope,Arial,sans-serif}
.hero-city .lvl{fill:var(--accent);font-weight:800;font-size:9px;letter-spacing:1px}
.hero-city.is-down .dot{fill:#5a5a5a}.hero-city.is-down text{fill:#7a7a7a}
@keyframes hero-ping{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.6);opacity:0}}
/* The summary: the number, under it how it changed, under that a bar against the strongest country. */
.hero-stat-row{position:absolute;inset:0 24px 0 8px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:center;gap:0 32px}
.hero-stat small{display:block;font-size:10px;letter-spacing:1.6px;color:#8c8c8c;text-transform:uppercase;font-weight:800}
.hero-stat b{display:block;font:36px/1.15 'Dela Gothic One',Unbounded,Arial,sans-serif;color:#fff;font-variant-numeric:tabular-nums;margin-top:4px;white-space:nowrap}
.hero-unit{font-size:.55em;margin-left:3px;color:#cfcfcf}
.hero-delta{display:block;margin-top:2px;font-size:11px;font-weight:700;color:#7fd39a;white-space:nowrap}
.hero-delta.is-down{color:#ef7a7a}.hero-delta.is-quiet{color:#8c8c8c}
.hero-delta .hero-unit{font-size:1em;margin-left:0;color:inherit}
.hero-bar{display:block;height:2px;margin-top:10px;border-radius:2px;background:#ffffff14;overflow:hidden}
.hero-bar i{display:block;height:100%;width:calc(var(--share) * 100%);background:var(--accent)}
.hero-stats.enter .hero-bar i{animation:hero-bar 1.4s cubic-bezier(.23,1,.32,1) backwards}
@keyframes hero-bar{from{width:0}}
@media(max-width:1180px){.hero-stat b{font-size:28px}.hero-stat-row{gap:0 20px}}
@media(max-width:800px){.hero:has(.hero-scene){display:block}.hero-scene{display:none}}
@media(prefers-reduced-motion:reduce){.hero-slide{transition:none;filter:none;transform:none}.hero-photo img,.hero-city .ring,.hero-dots i.on b{animation:none}.hero-map.enter .hero-land,.hero-stats.enter .hero-bar i{animation:none}}

/* Imperials. Wallet. Emerald next to the gold of coins: the chip in the top bar, the two boxes of the profile, the exchange. */
:root{--imperial:#5fd0a0;--imperial-rgb:95,208,160}
.home-stats .home-stats-imperials{display:flex;align-items:center;gap:7px;color:var(--imperial)}
.home-stats .home-stats-imperials svg{width:16px;height:16px}
.home-stats .home-stats-imperials b{color:var(--imperial)}
/* The profile button is a rounded rectangle like every block around it, not a pill. */
.account-entry,button.inventory-trigger{border-radius:10px}
.profile-wallet{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px}
.wallet-box{position:relative;display:flex;align-items:center;gap:14px;min-width:0;padding:16px;border:1px solid #c9bd9130;border-radius:11px;background:#c9bd9105}
.wallet-icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid #c9bd9129;border-radius:11px;color:#c9bd91;background:#c9bd9108}
.wallet-icon svg{width:22px;height:22px}
.wallet-box>div{min-width:0;flex:1}
.wallet-box strong{display:block;margin:6px 0 4px;font-size:22px;line-height:1.1;color:#e2d4a4;font-variant-numeric:tabular-nums}
.wallet-box small{display:block;color:#929292;font-size:10px;line-height:1.6}
.wallet-imperials{border-color:rgba(var(--imperial-rgb),.28);background:rgba(var(--imperial-rgb),.035)}
.wallet-imperials .wallet-icon{border-color:rgba(var(--imperial-rgb),.3);color:var(--imperial);background:rgba(var(--imperial-rgb),.06)}
.wallet-imperials strong{color:var(--imperial)}
.wallet-exchange{flex-shrink:0;align-self:center;min-height:36px;padding:0 14px;font-size:12px;transition:transform .12s ease,border-color .16s ease}
.wallet-exchange:active:not(:disabled){transform:scale(.97)}
/* Exchange dialog. */
.imperial-exchange{display:grid;gap:14px}
.imperial-exchange h2{margin:0}
.imperial-rate{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;font-weight:700}
.imperial-rate small{flex-basis:100%;color:#929292;font-size:11px;font-weight:400;line-height:1.6}
.imperial-chip,.coin-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:8px;font-variant-numeric:tabular-nums}
.imperial-chip{color:var(--imperial);border:1px solid rgba(var(--imperial-rgb),.3);background:rgba(var(--imperial-rgb),.06)}
.coin-chip{color:#e0c483;border:1px solid #c9bd9130;background:#c9bd9108}
.imperial-chip svg,.coin-chip svg{width:16px;height:16px}
.imperial-result{margin:0;min-height:20px;color:#bdbdbd;font-size:13px}
.imperial-result b{color:#e0c483}
.imperial-exchange form{display:grid;gap:12px}
@media(max-width:560px){.wallet-box{flex-wrap:wrap}.wallet-exchange{width:100%}}

/* Transitions. Blur dissolve. The new screen and every modal window come out of a blur; the old screen and a closing
   window dissolve into one. */
@keyframes screen-arrive{from{opacity:0;filter:blur(8px);transform:scale(.985)}to{opacity:1;filter:none;transform:none}}
/* backwards, not both: a finished animation must leave no transform or filter behind, or fixed children (the shop logo,
   the corner buttons) would be placed against the screen instead of the window. */
.screen-enter{animation:screen-arrive .26s cubic-bezier(.23,1,.32,1) backwards}
.screen-ghost{position:fixed;z-index:40;margin:0;overflow:hidden;pointer-events:none;animation:screen-leave .14s ease-out forwards}
@keyframes screen-leave{to{opacity:0;filter:blur(6px);transform:scale(1.01)}}
@keyframes dialog-arrive{from{opacity:0;filter:blur(8px);transform:scale(.96)}to{opacity:1;filter:none;transform:none}}
dialog[open]{animation:dialog-arrive .26s cubic-bezier(.23,1,.32,1) backwards}
dialog.dialog-ghost{position:fixed;inset:auto;z-index:1001;margin:0;max-height:none;overflow:hidden;pointer-events:none;animation:dialog-leave .16s ease-out forwards}
@keyframes dialog-leave{from{opacity:1}to{opacity:0;filter:blur(6px);transform:scale(.97)}}
.backdrop-ghost{position:fixed;inset:0;z-index:1000;background:#000000c9;backdrop-filter:blur(4px);pointer-events:none;animation:backdrop-leave .16s ease-out forwards}
@keyframes backdrop-leave{to{opacity:0;backdrop-filter:blur(0)}}
@media(prefers-reduced-motion:reduce){.screen-enter,dialog[open]{animation:none}.screen-ghost,.dialog-ghost,.backdrop-ghost{display:none}}

/* Shop logo. Same as the main menu: fixed in the top left corner, the 46px globe, the name and the beta line. */
.shop-top>.shop-brand-home{position:fixed;top:max(26px,env(safe-area-inset-top));left:max(32px,env(safe-area-inset-left));z-index:35;display:flex;align-items:center;gap:14px;margin:0;padding:0;border:0;background:none;color:#e6e6e6;font:inherit;letter-spacing:normal;text-align:left;transition:transform .16s ease}
.shop-top>.shop-brand-home .brand-mark{width:46px;height:46px;flex:none}
.shop-top>.shop-brand-home .brand-mark svg{width:100%;height:100%;display:block}
.shop-top>.shop-brand-home:active{transform:scale(.97)}
.shop-top>.shop-brand-home>span.home-brand-copy{display:grid}
/* The screen entrance blurs and scales its block, which would carry the fixed logo along and drop it into place at the
   end. In the shop the parts around the logo come out of the blur instead, and the logo stays put like on the main menu. */
.menu-content.screen-enter:has(>.shop-page){animation:none}
.menu-content.screen-enter>.shop-page>:not(.shop-top),.menu-content.screen-enter .shop-top>:not(.shop-brand-home){animation:screen-arrive .26s cubic-bezier(.23,1,.32,1) backwards}
@media(prefers-reduced-motion:reduce){.menu-content.screen-enter>.shop-page>*,.menu-content.screen-enter .shop-top>*{animation:none}}
@media(max-width:900px){.shop-top>.shop-brand-home{left:16px;top:16px}.shop-top>.shop-brand-home>span.home-brand-copy{display:none}}

/* Feedback. Report a problem, suggest an idea. A small row in the thin face at the bottom left, on the line of the patch
   card's bottom; «Обращения» for admins with the count of open ones; the form and the admin inbox in the promo dialog's language. */
.home-foot{position:fixed;left:max(80px,calc(env(safe-area-inset-left) + 48px));bottom:32px;z-index:20;display:flex;align-items:center;gap:28px}
.home-foot-link{display:inline-flex;align-items:center;min-height:28px;padding:0;border:0;background:none;color:#7d7d7d;font:500 12px/1 Manrope,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:color .16s ease}
.home-foot-link>span{display:inline-flex;align-items:center}
.home-foot-link:is(:hover,:focus-visible){color:#e6c878}
.home-foot-link:focus-visible{outline:2px solid #e0c48366;outline-offset:4px;border-radius:4px}
.home-foot-link:active{transform:scale(.97)}
.home-link-count{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:8px;padding:0 5px;border-radius:999px;background:#e0c483;color:#111;font:700 11px/1 Manrope,Arial,sans-serif;letter-spacing:0;font-variant-numeric:tabular-nums}
@media(max-width:900px){.home-foot{position:static;order:3;flex-wrap:wrap;gap:4px 24px}}
.feedback{display:grid;gap:18px}
.feedback>h2{margin:-10px 0 0}
.feedback-seg{grid-template-columns:repeat(2,1fr)}
.feedback-label{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.feedback-label small{font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;color:#6f6f6f;font-variant-numeric:tabular-nums}
.feedback-input{width:100%;min-height:48px;padding:12px 16px;border:1px solid #ffffff24;border-radius:12px;background:#0d0d0f;color:#f2f2f2;font:inherit;font-size:15px;line-height:1.5;transition:border-color .14s,box-shadow .14s}
textarea.feedback-input{min-height:150px;max-height:40vh;resize:vertical;scrollbar-width:none}
textarea.feedback-input::-webkit-scrollbar{display:none}
.feedback-input::placeholder{color:#6f6f6f}
.feedback-input:focus{outline:none;border-color:#e0c48399;box-shadow:0 0 0 3px #e0c4831f}
.feedback-input[aria-invalid="true"]{border-color:#d0484899;box-shadow:0 0 0 3px #d048481a}
.feedback-row{grid-template-columns:minmax(0,1fr);gap:8px;padding:14px 16px}
.feedback-head{display:flex;align-items:baseline;gap:10px;min-width:0}
.feedback-head strong{letter-spacing:0;font-size:15px}
.feedback-kind{flex:none;padding:3px 8px;border-radius:6px;background:#d0484826;color:#f08a8a;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.feedback-row[data-kind="idea"] .feedback-kind{background:#e0c48326;color:#e0c483}
.feedback-text{margin:0;font-size:14px;line-height:1.5;color:#cfcfcf;white-space:pre-wrap;overflow-wrap:anywhere}
.feedback-row .feedback-meta{margin:0}
.feedback-actions{display:flex;gap:8px;margin-top:4px}
.feedback-actions button{min-height:36px;padding:0 14px;font-size:13px}

/* Casino. Imperial games. The shop tab: the imperial balance and the game switch on top, then the stage of the game. */
.casino{--c-grey:#8f8f93;--c-blue:#5b8cff;--c-violet:#a77bff;--c-gold:#e0c483;--c-red:#c8463d;--c-black:#2a2a2e;--c-green:#2f9a63;display:grid;gap:20px}
.casino-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px}
.casino-balance{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 18px;border:1px solid #5fd0a033;border-radius:12px;background:#5fd0a00d;color:#9fdcc0;font-size:13px}
.casino-balance svg{width:20px;height:20px;color:var(--imperial)}
.casino-balance strong{color:#f2f2f2;font-size:20px;font-variant-numeric:tabular-nums}
.casino-games{display:flex;flex-wrap:wrap;gap:4px;padding:4px;border:1px solid #ffffff17;border-radius:12px;background:#0e0e10}
.casino-game{min-height:38px;padding:0 16px;border:0;border-radius:9px;background:none;color:#9a9a9a;font-size:13px;font-weight:600;cursor:pointer;transition:background-color .2s cubic-bezier(.23,1,.32,1),color .2s cubic-bezier(.23,1,.32,1),transform .16s cubic-bezier(.23,1,.32,1)}
.casino-game.is-active{background:#e7e7e7;color:#111}
.casino-game:active{transform:scale(.96)}
@media(hover:hover) and (pointer:fine){.casino-game:not(.is-active):hover{color:#e6e6e6;background:#ffffff08}}
.casino-stage{display:grid;gap:18px;min-width:0}
.casino-note{margin:0;font-size:12px;color:#6f6f6f}
.casino-round{display:grid;gap:12px;padding:18px;border:1px solid #ffffff17;border-radius:14px;background:#121214;min-width:0}
.casino-timer{position:relative;display:flex;justify-content:space-between;padding-bottom:10px;font-size:13px;font-weight:600;color:#cfcfcf;font-variant-numeric:tabular-nums}
.casino-timer i{position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:2px;background:var(--imperial);transform-origin:0 50%;transform:scaleX(0)}
.casino-timer::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:2px;background:#ffffff12;z-index:-1}
.casino-strip{position:relative;overflow:hidden;padding:8px 0;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.casino-track{display:flex;gap:6px;width:max-content;will-change:transform}
.casino-tile{display:grid;place-items:center;flex:none;width:76px;height:76px;border-radius:10px;background:#1c1c1f;border:1px solid #ffffff14;color:#f2f2f2;font:400 20px/1 'Dela Gothic One',Unbounded,sans-serif}
.casino-num{width:58px;height:58px;font-size:18px}
.casino-tile[data-tone="grey"]{background:#2a2a2e;color:#cfcfcf}
.casino-tile[data-tone="blue"]{background:#1d2a4d;border-color:#5b8cff55;color:#bcd0ff}
.casino-tile[data-tone="violet"]{background:#2d1f4a;border-color:#a77bff55;color:#dcc8ff}
.casino-tile[data-tone="gold"]{background:#3b311a;border-color:#e0c48399;color:#f2dfae}
.casino-tile[data-tone="red"]{background:#5a1f1b;border-color:#c8463d66}
.casino-tile[data-tone="black"]{background:#18181b}
.casino-tile[data-tone="green"]{background:#17402b;border-color:#2f9a6366}
.casino-tile.is-hit{outline:2px solid #f2f2f2;outline-offset:2px}
.casino-marker{position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:#f2f2f2;box-shadow:0 0 10px #ffffff80;border-radius:1px}
.casino-history{display:flex;gap:6px;min-height:26px;overflow:hidden}
.casino-history i{display:grid;place-items:center;flex:none;min-width:26px;height:26px;padding:0 6px;border-radius:6px;background:#2a2a2e;color:#cfcfcf;font-size:11px;font-weight:700;font-style:normal;font-variant-numeric:tabular-nums}
.casino-history i[data-tone="blue"]{background:#1d2a4d;color:#bcd0ff}.casino-history i[data-tone="violet"]{background:#2d1f4a;color:#dcc8ff}.casino-history i[data-tone="gold"]{background:#3b311a;color:#f2dfae}
.casino-history i[data-tone="red"]{background:#5a1f1b;color:#f2c9c5}.casino-history i[data-tone="black"]{background:#18181b;color:#cfcfcf;box-shadow:inset 0 0 0 1px #ffffff1a}.casino-history i[data-tone="green"]{background:#17402b;color:#bfe8d0}
.casino-amount{display:grid;gap:10px;min-width:0}
.casino-amount-row{display:flex;flex-wrap:wrap;gap:8px}
.casino-amount-input{position:relative;display:flex;align-items:center;flex:1 1 160px;min-width:0}
.casino-amount-input svg{position:absolute;left:14px;width:18px;height:18px;color:var(--imperial);pointer-events:none}
.casino-amount-input input{width:100%;min-height:44px;padding:0 14px;border:1px solid #ffffff24;border-radius:10px;background:#0d0d0f;color:#f2f2f2;font:inherit;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.casino-amount-input svg+input{padding-left:42px}
.casino-amount-input input:focus{outline:none;border-color:#5fd0a099;box-shadow:0 0 0 3px #5fd0a01f}
.casino-amount-input input:disabled{opacity:.5}
.casino-chip{min-height:44px;padding:0 14px;font-size:13px}
.casino-duel-new .casino-amount-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.casino-duel-new .casino-amount-input{grid-column:1/-1}
.casino-colors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.casino-color{display:grid;align-content:start;gap:8px;min-width:0}
.casino-pick{display:grid;gap:2px;min-height:64px;padding:10px;border:1px solid #ffffff1f;border-radius:12px;background:#1c1c1f;color:#f2f2f2;cursor:pointer;transition:transform .16s cubic-bezier(.23,1,.32,1),border-color .2s,opacity .2s}
.casino-pick strong{font:400 20px/1.1 'Dela Gothic One',Unbounded,sans-serif}
.casino-pick small{font-size:11px;color:#8d8d8d}
.casino-color[data-tone="grey"] .casino-pick{background:#2a2a2e}
.casino-color[data-tone="blue"] .casino-pick{background:#1d2a4d;border-color:#5b8cff55}
.casino-color[data-tone="violet"] .casino-pick{background:#2d1f4a;border-color:#a77bff55}
.casino-color[data-tone="gold"] .casino-pick{background:#3b311a;border-color:#e0c48399}
.casino-pick:active{transform:scale(.97)}
.casino-pick:disabled,.casino-bet:disabled{opacity:.45;cursor:default}
@media(hover:hover) and (pointer:fine){.casino-pick:not(:disabled):hover{border-color:#ffffff66}}
.casino-sum{display:flex;justify-content:space-between;padding:0 4px;font-size:12px;color:#8d8d8d}
.casino-sum b{color:#cfcfcf;font-variant-numeric:tabular-nums}
.casino-list{display:grid;gap:6px;min-width:0}
.casino-list .cp-label,.casino-duel .cp-label{margin:4px 0}
.casino-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;min-height:36px;padding:6px 12px;border-radius:9px;background:#161618;font-size:13px}
.casino-row:has(button){grid-template-columns:minmax(0,1fr) auto auto;padding-right:6px}
.casino-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#cfcfcf}
.casino-row small{color:#8d8d8d;white-space:nowrap}
.casino-row b{font-variant-numeric:tabular-nums;color:#e6e6e6}
.casino-row button{min-height:32px;padding:0 12px;font-size:12px}
.casino-row.is-mine{box-shadow:inset 2px 0 0 var(--imperial)}
.casino-row.is-win b{color:var(--imperial)}
.casino-row.is-lost{opacity:.55}
.casino-board{display:grid;gap:6px;min-width:0}
.casino-board-grid{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));grid-template-rows:repeat(3,44px);grid-auto-flow:column;gap:4px}
.casino-zero{grid-row:1/4}
.casino-board-out{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
.casino-board-out>:nth-child(-n+3){grid-column:span 2}
.casino-bet{position:relative;display:grid;place-items:center;min-height:40px;padding:0;border:1px solid #ffffff14;border-radius:8px;background:#1c1c1f;color:#f2f2f2;font-size:13px;font-weight:700;cursor:pointer;transition:transform .16s cubic-bezier(.23,1,.32,1),border-color .2s}
.casino-bet[data-tone="red"]{background:#5a1f1b}.casino-bet[data-tone="black"]{background:#18181b}.casino-bet[data-tone="green"]{background:#17402b}
.casino-bet:active{transform:scale(.95)}
@media(hover:hover) and (pointer:fine){.casino-bet:not(:disabled):hover{border-color:#ffffff66}}
.casino-stake{position:absolute;top:-6px;right:-4px;z-index:1;min-width:22px;padding:2px 5px;border-radius:999px;background:var(--imperial);color:#06140d;font-size:10px;font-weight:800;font-variant-numeric:tabular-nums}
.casino-crash .casino-sky{position:relative;height:260px;border-radius:10px;background:radial-gradient(120% 90% at 0 100%,#5fd0a014,transparent 60%),#0d0d0f;overflow:hidden}
.casino-sky svg{position:absolute;inset:0;width:100%;height:100%}
.casino-curve{fill:none;stroke:var(--imperial);stroke-width:3;vector-effect:non-scaling-stroke;stroke-linecap:round}
.casino-curve-fill{fill:#5fd0a01a;stroke:none}
.casino-sky[data-phase="crashed"] .casino-curve{stroke:#d04848}.casino-sky[data-phase="crashed"] .casino-curve-fill{fill:#d0484814}
.casino-mult{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:4px;pointer-events:none}
.casino-mult strong{font:400 clamp(40px,6vw,64px)/1 'Dela Gothic One',Unbounded,sans-serif;color:#f2f2f2;font-variant-numeric:tabular-nums}
.casino-sky[data-phase="crashed"] .casino-mult strong{color:#f08a8a}
.casino-mult span{font-size:13px;color:#8d8d8d}
.casino-crash-form{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;align-items:end;gap:14px}
.casino-go{min-height:44px;padding:0 22px;white-space:nowrap}
.casino-mines{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:20px;align-items:start}
.casino-field{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:14px;border:1px solid #ffffff17;border-radius:14px;background:#121214}
.casino-cell{display:grid;place-items:center;aspect-ratio:1;border:1px solid #ffffff17;border-radius:10px;background:#1c1c1f;cursor:pointer;transition:transform .16s cubic-bezier(.23,1,.32,1),background-color .25s,border-color .25s}
.casino-cell{color:#4a4a50}
.casino-cell svg{width:44%;height:44%;transition:transform .25s cubic-bezier(.23,1,.32,1),color .25s}
.casino-cell .casino-fist{display:none}
.casino-cell:not(:disabled):active{transform:scale(.94)}
@media(hover:hover) and (pointer:fine){.casino-cell:not(:disabled):hover{border-color:#ffffff55}}
.casino-cell:disabled{cursor:default}
.casino-cell.is-safe{background:#17302a;border-color:#5fd0a066;color:var(--imperial)}.casino-cell.is-safe svg{transform:scale(1.12)}
.casino-cell.is-mine{background:#2a1716;border-color:#d0484855;color:#f08a8a}.casino-cell.is-mine .casino-city{display:none}.casino-cell.is-mine .casino-fist{display:inline}
.casino-cell.is-boom{background:#5a1f1b;border-color:#f08a8a}
.casino-mines-side,.casino-duel-new,.casino-wheel-side{display:grid;align-content:start;gap:16px;min-width:0}
.casino-mines-info{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.casino-mines-info>div{display:grid;gap:4px;padding:10px 12px;border-radius:10px;background:#161618}
.casino-mines-info span{font-size:11px;color:#8d8d8d}
.casino-mines-info b{font-size:17px;color:#f2f2f2;font-variant-numeric:tabular-nums}
.casino-mines-info .cos-lead{grid-column:1/-1;margin:0}
.casino-duel{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:24px;align-items:start}
.casino-duel>div:last-child{display:grid;gap:8px}
.casino-wheel{display:grid;grid-template-columns:auto minmax(0,1fr);gap:32px;align-items:center}
.casino-wheel-disc{position:relative;width:280px;height:280px}
.casino-wheel-disc svg{width:100%;height:100%}
.casino-wheel-disc text{fill:#f2f2f2;font:400 13px'Dela Gothic One',Unbounded,sans-serif;text-anchor:middle;dominant-baseline:middle}
.casino-wheel-pin{position:absolute;left:50%;top:-6px;width:0;height:0;margin-left:-9px;border:9px solid transparent;border-top:16px solid var(--imperial);filter:drop-shadow(0 2px 4px #0008)}
.casino-wheel-disc text.is-imperial{fill:#9ff0cc}
.casino-wheel-prize{min-height:40px;font:400 30px/1.2 'Dela Gothic One',Unbounded,sans-serif;color:var(--c-gold)}
.casino-wheel-prize[data-kind="imperials"]{color:var(--imperial)}
@media(max-width:900px){.casino-colors{grid-template-columns:repeat(2,minmax(0,1fr))}.casino-crash-form,.casino-mines,.casino-duel,.casino-wheel{grid-template-columns:minmax(0,1fr)}.casino-wheel-disc{justify-self:center;width:240px;height:240px}.casino-board-grid{grid-template-rows:repeat(3,36px)}.casino-bet{font-size:11px}}
@media(max-width:560px){.casino-head>*{width:100%}.casino-games{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.casino-game{padding:0 6px}.casino-amount-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}.casino-amount-row>.casino-amount-input{grid-column:1/-1}.casino-chip{padding:0 6px}.casino-board-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;grid-auto-flow:row;direction:rtl}.casino-board-grid>*{direction:ltr}.casino-zero{grid-row:auto;grid-column:1/-1}.casino-tile{width:60px;height:60px;font-size:16px}.casino-num{width:48px;height:48px}}
@media(prefers-reduced-motion:reduce){.casino-game,.casino-pick,.casino-bet,.casino-cell,.casino-cell svg{transition:none}}

/* Power points. The arena card and the breakdown in the results. */
.result-power{margin-top:14px;border:1px solid #ffffff14;border-radius:10px;background:#ffffff05}
.result-power summary{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;cursor:pointer;list-style:none;font-size:13px;color:#cfcfcf}
.result-power summary::-webkit-details-marker{display:none}
.result-power summary b{font-size:16px;color:#e0c483;font-variant-numeric:tabular-nums}
.result-power dl{display:grid;gap:2px;margin:0;padding:0 14px 12px}
.result-power dl>div{display:flex;justify-content:space-between;gap:12px;padding:4px 0;font-size:13px;border-top:1px solid #ffffff0d}
.result-power dt{display:flex;gap:8px;color:#9a9a9a}
.result-power dt small{color:#6f6f6f;font-variant-numeric:tabular-nums}
.result-power dd{margin:0;color:#e6e6e6;font-variant-numeric:tabular-nums}
.result-power dd.is-minus{color:#f08a8a}

/* Daily quests. The count of quests left beside «Задания дня», centred on the capitals; the dialog in the promo dialog's
   language: a row per quest with its tier, reward and progress. */
.home-nav .home-link-count{min-width:1.8em;height:1.8em;margin-left:.9em;padding:0 .5em;font-size:.36em;vertical-align:middle;position:relative;top:-.27em}
.daily{display:grid;gap:16px}
.daily>h2{margin:-10px 0 0}
.daily-sub{margin:-8px 0 0;font-size:13px;color:#8f8f8f}
.daily-list{display:grid;gap:10px}
.daily-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px 16px;padding:14px 16px;border:1px solid #ffffff14;border-radius:12px;background:#ffffff05;transition:border-color .2s ease,background-color .2s ease}
.daily-row.is-done{border-color:#e0c48340;background:#e0c4830d}
.daily-head{display:flex;align-items:baseline;gap:10px;min-width:0}
.daily-head strong{font-size:15px;letter-spacing:0;overflow-wrap:break-word}
@media(max-width:520px){.daily-head{flex-direction:column;align-items:flex-start;gap:6px}}
.daily-tier{flex:none;padding:3px 8px;border-radius:6px;background:#ffffff12;color:#bdbdbd;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.daily-row[data-tier="medium"] .daily-tier{background:#5b8def26;color:#9cbcff}
.daily-row[data-tier="hard"] .daily-tier{background:#d0484826;color:#f08a8a}
.daily-reward{font-size:14px;font-weight:700;color:#e0c483;white-space:nowrap;font-variant-numeric:tabular-nums}
.daily-row.is-done .daily-reward{color:#8f8f8f;font-weight:600}
.daily-bar{grid-column:1/-1;display:flex;align-items:center;gap:12px;min-height:30px}
.daily-track{flex:1;height:6px;border-radius:999px;background:#ffffff14;overflow:hidden}
.daily-track i{display:block;height:100%;border-radius:inherit;background:#e0c483}
.daily-count{min-width:52px;text-align:right;font-size:12px;color:#8f8f8f;font-variant-numeric:tabular-nums}
.daily-swap{min-height:30px;padding:0 12px;font-size:12px}
.daily-notes{display:grid;gap:6px;margin:0;padding:12px 16px;border-radius:12px;background:#ffffff05;font-size:13px;line-height:1.45;color:#a8a8a8}
.daily-notes b{color:#e6e6e6;font-weight:600}
.results-extras{display:block;margin-top:4px;color:#e0c483}
.patch-release{margin-top:28px;padding-top:24px;border-top:1px solid #ffffff12}
.patch-release h2{margin:4px 0 0}

/* Tune. Number fields without spin arrows anywhere: digits only. */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* The links under the main menu: only the words light up, nothing behind them. */
.home-foot-link:hover:not(:disabled),.home-foot-link:focus-visible{background:none;border-color:transparent;box-shadow:none}
.home-foot-link:hover:not(:disabled):not(:active){transform:none}

/* The shop logo scrolls away with the page. */
.shop-top>.shop-brand-home{position:absolute}

/* Ability cards: the kind and the country as plain coloured text, the buy button in the bottom right corner. */
.shop-ability .shop-tag,.shop-page .shop-ability .shop-tag,.shop-page .shop-grid .shop-ability[data-kind] .shop-tag{max-width:calc(100% - 56px);padding:0;border:0;border-radius:0;background:none;color:var(--tag,#b4b4b4);line-height:1.35;letter-spacing:.1em}
.shop-ability[data-country="ES"]{--tag:#f2c94c}
.shop-ability[data-country="FR"]{--tag:#7ea6ff}
.shop-ability[data-country="DE"]{--tag:#f39a4c}
.shop-ability[data-country="IT"]{--tag:#5ccb8a}
.shop-ability[data-country="ENG"]{--tag:#eaa3a3}
.shop-ability[data-country="RUS"]{--tag:#a9c4f5}
.shop-ability[data-country="GEO"]{--tag:#ef8a87}
.shop-ability[data-country="IND"]{--tag:#aeaaf6}
.shop-ability .shop-offer-buy{justify-self:stretch;align-self:stretch;justify-content:space-between;width:100%}

/* The strip and the roulette: the drawn tile keeps a thin bright edge and a soft glow, the rest of the track dims. */
.casino-tile{transition:opacity .35s ease,filter .35s ease,border-color .35s ease,box-shadow .35s ease}
.casino-track.has-hit .casino-tile:not(.is-hit){opacity:.3;filter:saturate(.55) brightness(.8)}
.casino-tile.is-hit{outline:none;border-color:#ffffffd9;box-shadow:0 0 0 1px #ffffff26,0 0 24px -2px var(--hit,#ffffff59)}
.casino-tile.is-hit[data-tone="blue"]{--hit:#5b8cffb3}.casino-tile.is-hit[data-tone="violet"]{--hit:#a77bffb3}.casino-tile.is-hit[data-tone="gold"]{--hit:#e0c483b3}
.casino-tile.is-hit[data-tone="red"]{--hit:#e0534ab3}.casino-tile.is-hit[data-tone="green"]{--hit:#2f9a63b3}
@media(prefers-reduced-motion:reduce){.casino-tile{transition:none}}

/* Stakes: three quick buttons now that there is no minimum. */
.casino-duel-new .casino-amount-row{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:560px){.casino-amount-row{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* The daily wheel: large and centred, the spin button in the hub. */
.casino-wheel{grid-template-columns:minmax(0,1fr);justify-items:center;gap:18px;padding:12px 0 4px}
.casino-wheel-disc{width:min(560px,100%,64vh);height:auto;aspect-ratio:1;justify-self:center}
.casino-wheel-disc>svg{display:block;width:100%;height:100%;filter:drop-shadow(0 28px 50px #000000b3)}
.casino-wheel-disc text{fill:#f2f2f2;font:400 15px 'Dela Gothic One',Unbounded,sans-serif;text-anchor:middle;dominant-baseline:central}
.casino-wheel-disc text.is-imperial{fill:#a7f3d2;font-size:12px}
.casino-wheel-pin{top:-12px;z-index:2;width:28px;height:36px;margin-left:-14px;border:0;filter:drop-shadow(0 4px 8px #000000cc)}
.casino-wheel-pin svg{display:block;width:100%;height:100%}
.casino-wheel-go,.casino-wheel-go:hover:not(:disabled){position:absolute;left:50%;top:50%;z-index:2;display:grid;place-items:center;width:25%;min-height:0;aspect-ratio:1;margin:0;padding:8px;border:1px solid #e0c48380;border-radius:50%;background:radial-gradient(circle at 50% 30%,#2a2a2f,#0f0f11 72%);color:#f2f2f2;font:400 clamp(13px,2vw,18px)/1.15 'Dela Gothic One',Unbounded,sans-serif;text-align:center;text-wrap:balance;transform:translate(-50%,-50%);box-shadow:0 0 0 6px #0b0b0c,0 0 30px -8px #e0c48366;cursor:pointer;transition:transform .16s cubic-bezier(.23,1,.32,1),border-color .2s ease,box-shadow .2s ease}
.casino-wheel-go:active:not(:disabled){transform:translate(-50%,-50%) scale(.95)}
.casino-wheel-go:disabled{cursor:default;border-color:#ffffff24;color:#9a9a9a;font:600 11px/1.3 Manrope,Arial,sans-serif;box-shadow:0 0 0 6px #0b0b0c}
@media(hover:hover) and (pointer:fine){.casino-wheel-go:hover:not(:disabled){border-color:#e0c483;box-shadow:0 0 0 6px #0b0b0c,0 0 40px -4px #e0c48399}}
.casino-wheel-prize{min-height:40px;text-align:center}
@media(prefers-reduced-motion:reduce){.casino-wheel-go{transition:none}}

/* Promo form: imperials as a reward with their own amount. */
.padmin-gift-num{width:84px;min-height:28px;margin-left:8px;padding:0 8px;border:1px solid #ffffff24;border-radius:7px;background:#0d0d0f;color:#f2f2f2;font:inherit;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.padmin-gift-num:focus{outline:none;border-color:#5fd0a099;box-shadow:0 0 0 3px #5fd0a01f}
.padmin-limit{width:100%;min-height:44px;padding:0 14px;border:1px solid #ffffff24;border-radius:10px;background:#0d0d0f;color:#f2f2f2;font:inherit;font-size:15px;font-weight:600;letter-spacing:.04em}
.padmin-limit:focus{outline:none;border-color:rgba(var(--accent-rgb),.7);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18)}

/* Daily quests above the patch card, rolling one by one. */
.home-daily{position:fixed;right:max(32px,env(safe-area-inset-right));bottom:calc(max(32px,env(safe-area-inset-bottom)) + min(440px,48vh) + 12px);z-index:20;display:grid;gap:10px;width:min(360px,30vw);margin:0;padding:14px 20px 16px;border:1px solid #ffffff1f;border-radius:16px;background:linear-gradient(180deg,#1b1b1e,#121214);box-shadow:0 24px 60px -30px #000;color:#ececec;text-align:left;font:inherit;cursor:pointer;transition:border-color .2s cubic-bezier(.23,1,.32,1),transform .2s cubic-bezier(.23,1,.32,1)}
.home-daily:hover:not(:disabled){border-color:#ffffff40;background:linear-gradient(180deg,#1b1b1e,#121214);box-shadow:0 24px 60px -30px #000;transform:none}
.home-daily:active{transform:scale(.985)}
.home-daily:focus-visible{outline:2px solid #9b9b9b;outline-offset:4px}
.home-daily-head{display:flex;align-items:center;justify-content:space-between;gap:10px;line-height:16px}
.home-daily-head small{font-size:11px;color:#8d8d8d;font-variant-numeric:tabular-nums}
.home-daily-window{display:block;height:40px;overflow:hidden}
.home-daily-track{display:grid;transition:transform .6s cubic-bezier(.77,0,.175,1)}
.home-daily-item{display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:center;column-gap:14px;row-gap:3px;height:40px}
.home-daily-item em{grid-column:1;font-style:normal;font-size:10px;font-weight:700;line-height:1;letter-spacing:.12em;text-transform:uppercase;color:var(--tier,#8d8d8d)}
.home-daily-item strong{grid-column:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:600;line-height:1.3;color:#e6e6e6}
.home-daily-item b{grid-column:2;grid-row:1/3;align-self:center;font-size:12px;font-weight:700;color:#cfcfcf;font-variant-numeric:tabular-nums}
.home-daily-item[data-tier="easy"]{--tier:#7fd1a4}.home-daily-item[data-tier="medium"]{--tier:#e0c483}.home-daily-item[data-tier="hard"]{--tier:#f08a8a}
.home-daily-item.is-done strong{color:#9a9a9a}
.home-daily-item.is-done b{color:#5fd0a0}
@media(max-width:900px){.home-daily{position:static;order:2;width:100%}}
@media(prefers-reduced-motion:reduce){.home-daily-track{transition:none}.home-daily{transition:none}}

/* Wheel polish. The pin sits over the rim with its tip in the sectors; sizes follow the disc. */
.casino-wheel-pin{top:1.2%;width:6.2%;height:auto;aspect-ratio:30/38;margin-left:-3.1%}
.casino-wheel-pin svg{overflow:visible}
/* Numbers: warm gold with a dark engraved edge, a quiet caption underneath. */
.casino-wheel-disc text.casino-wheel-num{fill:url(#wheel-num);font:400 13px 'Dela Gothic One',Unbounded,sans-serif;letter-spacing:.02em;paint-order:stroke fill;stroke:#0b0b0c;stroke-width:2.4px;stroke-linejoin:round;stroke-opacity:.6}
.casino-wheel-disc .is-imperial text.casino-wheel-num{fill:url(#wheel-num-imp);font-size:11px}
.casino-wheel-disc text.casino-wheel-cap{fill:#e0c483;fill-opacity:.62;font:700 4.6px Manrope,Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase}
.casino-wheel-disc .is-imperial text.casino-wheel-cap{fill:#7fe0b4}

/* Strip: room above and below the tiles for the glow of the drawn one; the layout keeps its old height. */
.casino-strip{padding:22px 0;margin:-14px 0}
.casino-marker{top:14px;bottom:14px}

/* Transitions without the ghost. A leaving copy is frozen as it was: its content never replays an animation. */
.screen-ghost *,.dialog-ghost *{animation:none!important;transition:none!important}
@keyframes screen-leave{from{opacity:1;filter:blur(0)}to{opacity:0;filter:blur(10px);transform:scale(1.008)}}
@keyframes screen-arrive{from{opacity:0;filter:blur(10px);transform:scale(.992)}to{opacity:1;filter:none;transform:none}}
.screen-ghost{animation:screen-leave .17s cubic-bezier(.23,1,.32,1) forwards}
.screen-enter{animation:screen-arrive .32s cubic-bezier(.23,1,.32,1) .07s backwards}
@media(prefers-reduced-motion:reduce){.screen-enter{animation:none}}

/* Softer transitions. */
@keyframes screen-leave{from{opacity:1;filter:blur(0)}to{opacity:0;filter:blur(5px);transform:scale(1.006)}}
@keyframes screen-arrive{from{opacity:0;filter:blur(6px);transform:scale(.994)}to{opacity:1;filter:blur(0);transform:none}}
.screen-ghost{animation:screen-leave .26s cubic-bezier(.33,1,.68,1) forwards;will-change:opacity,filter,transform}
.screen-enter{animation:screen-arrive .46s cubic-bezier(.22,1,.36,1) .05s backwards}
@media(prefers-reduced-motion:reduce){.screen-enter{animation:none}}

/* Ability cards: the title leaves room for the icon (40px wide, 23px from the edge) and wraps evenly. */
.shop-ability>strong{padding-right:52px;line-height:1.15;text-wrap:balance}

/* Custom profile tags: VAMP, LORD, BO$$, UZBEK, ESHKERE. One structure for all five; 1em is the tag height, so every size
   scales from --h. Each has its own shape (--shape), edge, face, glow and particles. */
.tg{--h:30px;--pad:.62em;--b:max(1px,.034em);position:relative;isolation:isolate;display:inline-grid;flex:none;height:1em;font-size:var(--h);vertical-align:middle}
.tg--sm{--h:20px}
.tg-plate{position:relative;display:grid;place-items:center;height:1em;padding:0 var(--pad);clip-path:var(--shape);background:var(--edge);overflow:hidden}
.tg-plate::before{content:'';position:absolute;inset:var(--b);clip-path:var(--shape);background:var(--face)}
.tg-label{position:relative;z-index:2;margin-right:-.14em;font:400 .42em/1 'Dela Gothic One',Unbounded,Arial,sans-serif;letter-spacing:.14em;color:var(--ink);white-space:nowrap;text-shadow:0 0 .35em var(--glow),0 .05em 0 #0009}
.tg::after{content:'';position:absolute;z-index:-2;left:10%;right:10%;top:25%;bottom:-25%;border-radius:50%;background:var(--glow);opacity:.26;filter:blur(calc(var(--h) * .35))}
.tg-fx{position:absolute;inset:-60% -18%;z-index:-1;pointer-events:none}
.tg-fx.is-front{z-index:3}
.tg-fx i{position:absolute;left:var(--x);top:var(--y);opacity:0;animation:var(--anim) var(--t) var(--ease,ease-out) var(--d) infinite}
.tg-deco{position:absolute;pointer-events:none}

/* VAMP: swallowtail ends like bat wings, two fangs under the plate, blood drips. */
.tg--vamp{--pad:.72em;--shape:polygon(0 0,100% 0,calc(100% - .26em) 50%,100% 100%,0 100%,.26em 50%);
 --edge:linear-gradient(180deg,#ff5470,#6e0b1c 55%,#ff2f55);--face:radial-gradient(120% 140% at 50% 125%,#7a0f24,transparent 60%),linear-gradient(180deg,#2a0711,#120308);--ink:#ffdbe1;--glow:#ff1f4b}
.tg--vamp .tg-deco{left:50%;top:calc(100% - var(--b) - .01em);width:.42em;height:.17em;transform:translateX(-50%)}
.tg--vamp .tg-deco::before,.tg--vamp .tg-deco::after{content:'';position:absolute;top:0;width:.09em;height:100%;clip-path:polygon(0 0,100% 0,55% 100%);background:linear-gradient(180deg,#fff4f1,#ffd5cc 65%,#ff3a5c)}
.tg--vamp .tg-deco::before{left:0}.tg--vamp .tg-deco::after{right:0;transform:scaleX(-1)}
.tg--vamp .tg-fx i{width:.065em;height:.1em;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;background:linear-gradient(180deg,#ff4a64,#a80c25);box-shadow:0 0 .12em #ff1f4b}
@keyframes tg-vamp-drip{0%{transform:translateY(0) scaleY(.3);opacity:0}12%{opacity:1;transform:translateY(0) scaleY(1)}35%{transform:translateY(.04em) scaleY(1.25)}100%{transform:translateY(.62em) scaleY(1);opacity:0}}

/* LORD: chamfered plate in royal purple and gold, a crown on top, gold twinkles. */
.tg--lord{--shape:polygon(.22em 0,calc(100% - .22em) 0,100% .22em,100% calc(100% - .22em),calc(100% - .22em) 100%,.22em 100%,0 calc(100% - .22em),0 .22em);
 --edge:linear-gradient(180deg,#fff0bf,#a57a2a 50%,#ffe08a);--face:radial-gradient(100% 120% at 50% 0%,#40217a,transparent 70%),linear-gradient(180deg,#1d0f38,#0c0619);--ink:#ffe7a6;--glow:#e0b44c}
.tg--lord .tg-label{background:linear-gradient(180deg,#fff7da,#eac262 58%,#b8862f);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 .14em #e0b44c88)}
.tg--lord .tg-deco{left:50%;bottom:calc(100% - .1em);width:.5em;height:.33em;transform:translateX(-50%);filter:drop-shadow(0 0 .1em #f5c95a)}
.tg--lord .tg-deco::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#fff3c9,#c9973a);
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 13'%3E%3Cpath d='M1.2 12.6 0 3.2l5.6 4.1L10 0l4.4 7.3L20 3.2l-1.2 9.4z'/%3E%3C/svg%3E") center/contain no-repeat;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 13'%3E%3Cpath d='M1.2 12.6 0 3.2l5.6 4.1L10 0l4.4 7.3L20 3.2l-1.2 9.4z'/%3E%3C/svg%3E") center/contain no-repeat}
.tg--lord .tg-fx i{width:.13em;height:.13em;background:#ffe9a8;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);filter:drop-shadow(0 0 .08em #f5c95a)}
@keyframes tg-lord-twinkle{0%,100%{transform:scale(0) rotate(0);opacity:0}45%{transform:scale(1) rotate(45deg);opacity:1}70%{transform:scale(.4) rotate(70deg);opacity:.5}}

/* BO$$: a banknote with a dashed inner frame, gold dollars, a sheen and spinning coins. */
.tg--boss{--shape:inset(0 round .12em);--edge:linear-gradient(180deg,#8dffb9,#1d6b3f 50%,#5fe39a);
 --face:repeating-radial-gradient(circle at 50% 50%,#ffffff07 0 .02em,transparent .02em .07em),radial-gradient(90% 120% at 50% 120%,#17603a,transparent 65%),linear-gradient(180deg,#0f2e1c,#071a0f);--ink:#effff4;--glow:#2fe07a}
.tg--boss .tg-plate::after{content:'';position:absolute;inset:.13em;z-index:1;border:max(1px,.022em) dashed #7dffb070;border-radius:.05em}
.tg--boss .tg-label b{font-weight:inherit;color:#ffd76a;text-shadow:0 0 .3em #ffb800}
.tg-shine{position:absolute;inset:0;z-index:3;background:linear-gradient(105deg,transparent 38%,#ffffff3d 50%,transparent 62%);transform:translateX(-130%);animation:tg-sheen 3.4s cubic-bezier(.65,0,.35,1) infinite}
@keyframes tg-sheen{0%,55%{transform:translateX(-130%)}85%,100%{transform:translateX(130%)}}
.tg--boss .tg-fx i{width:.15em;height:.15em;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff3b0,#f2b92c 55%,#a8730f);box-shadow:inset 0 0 0 max(1px,.018em) #ffe48a,0 0 .12em #ffc83d99}
@keyframes tg-boss-coin{0%{transform:translateY(0) scaleX(1);opacity:0}15%{opacity:1}35%{transform:translateY(-.3em) scaleX(.15)}55%{transform:translateY(-.5em) scaleX(1)}75%{transform:translateY(-.68em) scaleX(.15)}100%{transform:translateY(-.85em) scaleX(1);opacity:0}}

/* UZBEK: almond-shaped plate in Samarkand cobalt and turquoise, a girih pattern, flag colours along the bottom,
   eight-point star sparkles. */
.tg--uzbek{--pad:.78em;--shape:polygon(0 50%,.12em .26em,.3em .06em,.46em 0,calc(100% - .46em) 0,calc(100% - .3em) .06em,calc(100% - .12em) .26em,100% 50%,calc(100% - .12em) calc(100% - .26em),calc(100% - .3em) calc(100% - .06em),calc(100% - .46em) 100%,.46em 100%,.3em calc(100% - .06em),.12em calc(100% - .26em));
 --edge:linear-gradient(90deg,#3fd6e6,#f0cf78 50%,#3fd6e6);
 --face:repeating-conic-gradient(from 45deg at 50% 50%,#ffffff0b 0 25%,transparent 0 50%) 0 0/.22em .22em,radial-gradient(90% 120% at 50% 0%,#1d5bb0,transparent 70%),linear-gradient(180deg,#123a7a,#081a3d);--ink:#eefcff;--glow:#2ec4d6}
.tg--uzbek .tg-plate::after{content:'';position:absolute;left:.62em;right:.62em;bottom:.11em;z-index:1;height:max(2px,.05em);border-radius:1px;
 background:linear-gradient(90deg,#0099b5 0 32%,#ce1126 32% 34%,#f4f4f4 34% 66%,#ce1126 66% 68%,#1eb53a 68%)}
.tg--uzbek .tg-fx i{width:.14em;height:.14em;background:var(--c,#7ff0ff);filter:drop-shadow(0 0 .08em var(--c,#7ff0ff));
 clip-path:polygon(50% 0,64.66% 14.62%,85.36% 14.64%,85.38% 35.34%,100% 50%,85.38% 64.66%,85.36% 85.36%,64.66% 85.38%,50% 100%,35.34% 85.38%,14.64% 85.36%,14.62% 64.66%,0 50%,14.62% 35.34%,14.64% 14.64%,35.34% 14.62%)}
@keyframes tg-uzbek-star{0%{transform:translateY(0) rotate(0) scale(.2);opacity:0}25%{opacity:1;transform:translateY(-.1em) rotate(45deg) scale(1)}100%{transform:translateY(-.45em) rotate(180deg) scale(.3);opacity:0}}

/* ESHKERE: a slanted plate in acid lime and magenta, speed lines behind, a glitch jolt, sparks shooting out. */
.tg--eshkere{--pad:.7em;--shape:polygon(.3em 0,100% 0,calc(100% - .3em) 100%,0 100%);--edge:linear-gradient(90deg,#ff2bd6,#c6ff1a);
 --face:repeating-linear-gradient(90deg,transparent 0 .26em,#c6ff1a0c .26em .28em),radial-gradient(70% 140% at 15% 120%,#ff2bd640,transparent 70%),linear-gradient(180deg,#141418,#0a0a0c);--ink:#d9ff4a;--glow:#b8ff1a}
.tg--eshkere .tg-label{transform:skewX(-10deg);text-shadow:.04em 0 #ff2bd6aa,-.04em 0 #19e6ffaa,0 0 .35em #b8ff1a99;animation:tg-eshk-glitch 2.6s steps(1) infinite}
@keyframes tg-eshk-glitch{0%,86%,100%{transform:skewX(-10deg);text-shadow:.04em 0 #ff2bd6aa,-.04em 0 #19e6ffaa,0 0 .35em #b8ff1a99}
 88%{transform:skewX(-18deg) translate(.04em,-.02em);text-shadow:.1em 0 #ff2bd6,-.1em 0 #19e6ff,0 0 .5em #b8ff1a}
 91%{transform:skewX(-4deg) translate(-.05em,.02em);text-shadow:-.08em 0 #ff2bd6,.08em 0 #19e6ff,0 0 .5em #b8ff1a}
 94%{transform:skewX(-10deg) translate(.02em,0)}}
.tg--eshkere .tg-deco{right:calc(100% - .1em);top:22%;bottom:22%;width:.5em;display:grid;align-content:space-between}
.tg--eshkere .tg-deco::before,.tg--eshkere .tg-deco::after,.tg--eshkere .tg-deco span{content:'';display:block;height:max(1px,.03em);border-radius:1px;background:linear-gradient(90deg,transparent,#c6ff1a);animation:tg-speed 1.1s linear infinite}
.tg--eshkere .tg-deco span{width:70%;justify-self:end;background:linear-gradient(90deg,transparent,#ff2bd6);animation-delay:-.4s}
.tg--eshkere .tg-deco::after{animation-delay:-.75s}
@keyframes tg-speed{0%{transform:translateX(-.25em);opacity:0}40%{opacity:1}100%{transform:translateX(.15em);opacity:0}}
.tg--eshkere .tg-fx i{width:.24em;height:max(1px,.026em);border-radius:1px;background:linear-gradient(90deg,transparent,var(--c,#d9ff4a));box-shadow:0 0 .08em var(--c,#d9ff4a);transform-origin:left center}
@keyframes tg-eshk-spark{0%{transform:rotate(var(--r)) translateX(0) scaleX(.3);opacity:0}10%{opacity:1}60%{opacity:1}100%{transform:rotate(var(--r)) translateX(.55em) scaleX(1);opacity:0}}

/* The tag picker and the reward window show the custom tags like DIABLO. */
.slot-stage .tg{transform:scale(.9)}
.tag-reward-stage .tg{transform:scale(1.25);animation:dt-reveal .5s cubic-bezier(.23,1,.32,1) both}
@media(prefers-reduced-motion:reduce){.tg-fx i,.tg-shine,.tg--eshkere .tg-label,.tg--eshkere .tg-deco::before,.tg--eshkere .tg-deco::after,.tg--eshkere .tg-deco span{animation:none}.tg-fx i{opacity:0}}

/* Aspect draft: the host's random button sits next to the confirm button. */
.draft-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}

/* Layout fixes: banner photo to the edges, turn tools nearer the bottom of the sidebar. */
@media(min-width:1920px){.hero-scene{margin:-34px -38px -34px 0}}
@media(min-width:1651px){aside{padding-bottom:18px}.sidebar-turn:last-child{margin-bottom:0}}

/* Leaderboard: one quiet table, the tag beside the name. */
.lb-head,.lb-row{display:grid;grid-template-columns:36px minmax(0,1fr) 72px 72px 96px;align-items:center;column-gap:14px}
.lb-head{padding:0 14px 10px;border-bottom:1px solid #ffffff12;font-size:10px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#6f6f6f}
.lb-head span:nth-child(n+3){text-align:right}
.lb-list{padding-top:4px}
.lb-row{position:relative;min-height:60px;padding:0 14px;border-radius:10px;transition:background-color .15s ease}
.lb-row+.lb-row::before{content:"";position:absolute;left:14px;right:14px;top:0;height:1px;background:#ffffff0a}
.lb-row:hover{background:#ffffff06}
.lb-row:hover::before,.lb-row:hover+.lb-row::before{opacity:0}
.lb-row.is-self{background:#ffffff09}
.lb-pos{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;color:#6f6f6f}
.lb-top-1{--lb:#d9c27f}.lb-top-2{--lb:#c3cad2}.lb-top-3{--lb:#c49a7b}
.lb-row[class*="lb-top-"] .lb-pos,.lb-row[class*="lb-top-"] .lb-mmr{color:var(--lb)}
.lb-row[class*="lb-top-"] .lb-pos::after{content:"";display:inline-block;width:5px;height:5px;margin-left:6px;vertical-align:middle;border-radius:50%;background:var(--lb);box-shadow:0 0 8px var(--lb)}
button.lb-player,button.lb-player:hover:not(:disabled){display:flex;align-items:center;gap:12px;min-width:0;padding:10px 0;border:0;background:none;color:inherit;text-align:left;cursor:pointer}
.lb-player .account-avatar{width:34px;height:34px;flex:0 0 34px}
.lb-who{display:grid;gap:3px;min-width:0}
.lb-name{display:flex;align-items:center;gap:8px;min-width:0}
.lb-name strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600;color:#ececec}
.lb-name>:not(strong){flex-shrink:0}
.lb-player:hover .lb-name strong{text-decoration:underline;text-decoration-color:#ffffff40;text-underline-offset:3px}
.lb-who small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:#7d7d7d}
.lb-stat,.lb-mmr{text-align:right;font-variant-numeric:tabular-nums}
.lb-stat{font-size:13px;color:#9a9a9a}
.lb-mmr{font-size:15px;font-weight:700;color:#e4e4e4}
@media(max-width:800px){.lb-head,.lb-row{grid-template-columns:24px minmax(0,1fr) 72px;column-gap:10px;padding-left:4px;padding-right:4px}.lb-head span:nth-child(3),.lb-head span:nth-child(4),.lb-row .lb-stat{display:none}.lb-row+.lb-row::before{left:4px;right:4px}}

/* Banner: the capital photo stays still; its fade is eased on both axes inside the mask, so no colour band shows on any theme. */
.hero-slide{transform:none!important;transition:opacity .9s cubic-bezier(.23,1,.32,1),filter .9s cubic-bezier(.23,1,.32,1)}
.hero-photo img{animation:none!important;transform:none!important}
.hero-photo{-webkit-mask-image:linear-gradient(90deg,#0000 0,#00000008 8%,#0000001c 16%,#0000003b 25%,#00000063 34%,#0000008f 44%,#000000ba 54%,#000000de 65%,#000000f5 76%,#000 86%),linear-gradient(0deg,#0000 0,#0000002e 8%,#00000073 18%,#000000b8 30%,#000 44%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,#0000 0,#00000008 8%,#0000001c 16%,#0000003b 25%,#00000063 34%,#0000008f 44%,#000000ba 54%,#000000de 65%,#000000f5 76%,#000 86%),linear-gradient(0deg,#0000 0,#0000002e 8%,#00000073 18%,#000000b8 30%,#000 44%);mask-composite:intersect}
.hero-photo::after{content:none}

/* Results: «Очки державы» at the bottom of every card, one chevron, the hover stays inside the frame. */
.result-country{display:flex;flex-direction:column}
.result-power{margin-top:auto;overflow:hidden;border-color:#ffffff12;background:#ffffff04}
.result-country>dl{margin-bottom:14px}
.result-power summary{min-height:44px;padding:0 14px;gap:10px;border-radius:0;transition:background-color .15s ease}
.result-power summary::marker{content:none}
.result-power summary::before{content:'';flex:0 0 auto;width:6px;height:6px;border-right:1.5px solid #8a8a8a;border-bottom:1.5px solid #8a8a8a;transform:rotate(-45deg);transition:transform .2s cubic-bezier(.23,1,.32,1)}
.result-power[open] summary::before{transform:rotate(45deg) translate(-1px,-1px)}
.result-power summary span{margin-right:auto}
button.result-power summary:hover,.result-power summary:hover{background:#ffffff07;box-shadow:none;transform:none}
.result-power summary:active{transform:none}
.result-power dl{padding:2px 14px 10px}
.result-warehouse{margin-top:12px}

/* Revolution: aspects as cards, the effect in a tooltip. */
.rev-choice{display:grid;gap:12px}
.rev-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.rev-option{position:relative;display:grid;gap:3px;padding:11px 13px;border:1px solid #ffffff14;border-radius:10px;background:#ffffff05;cursor:pointer;transition:border-color .15s ease,background-color .15s ease}
.rev-option:hover{border-color:#ffffff2e;background:#ffffff09}
.rev-option:has(input:checked){border-color:rgba(var(--accent-rgb),.7);background:rgba(var(--accent-rgb),.08)}
.rev-option:has(input:focus-visible){outline:2px solid #fff;outline-offset:2px}
.rev-option input{position:absolute;opacity:0;pointer-events:none}
.rev-name{font-size:13px;font-weight:600;color:#ececec}
.rev-option small{font-size:11px;color:#858585}
.rev-option.is-cardinal small{color:#d8b46a}
.rev-tip{position:absolute;left:0;right:0;bottom:calc(100% + 8px);z-index:30;padding:10px 12px;border:1px solid #ffffff1f;border-radius:9px;background:#1b1b1d;box-shadow:0 12px 30px #000a;font-size:12px;line-height:1.45;color:#d8d8d8;opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity .14s ease,transform .14s ease}
.rev-option:hover .rev-tip,.rev-option:has(input:focus-visible) .rev-tip{opacity:1;transform:none}
.rev-choice>.primary{justify-self:start}

/* Casino stakes: the player with avatar and tag. */
.casino-row{grid-template-columns:minmax(0,1fr) auto auto}
.casino-who{display:flex!important;align-items:center;gap:8px;min-width:0;overflow:visible!important}
.casino-face{width:22px;height:22px;flex:0 0 22px;font-size:10px}
.casino-who-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#d8d8d8}
.casino-who>:last-child:not(.casino-who-name){flex-shrink:0}
.casino-row.is-win{background:#1a1c17}
#casino-recent{max-height:336px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding-bottom:24px;-webkit-mask:linear-gradient(#000 calc(100% - 32px),transparent);mask:linear-gradient(#000 calc(100% - 32px),transparent)}
#casino-recent::-webkit-scrollbar{display:none}

/* Duel: a coin toss between the two players. */
.casino-duel{position:relative}
.duel-show{position:absolute;inset:0;z-index:5;display:grid;place-content:center;gap:22px;border-radius:14px;background:#0c0c0ef2;backdrop-filter:blur(6px);animation:duel-in .3s cubic-bezier(.23,1,.32,1)}
.duel-show.is-out{opacity:0;transition:opacity .35s ease}
@keyframes duel-in{from{opacity:0}}
.duel-stage{display:grid;grid-template-columns:140px 96px 140px;align-items:center;justify-items:center;gap:18px}
.duel-side{display:grid;justify-items:center;gap:8px;min-width:0;transition:opacity .4s ease,transform .4s cubic-bezier(.23,1,.32,1)}
.duel-side strong{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;color:#e6e6e6}
.duel-initial{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#1d1d20;border:1px solid #ffffff1a;font:600 20px 'Dela Gothic One',Unbounded,Arial;color:#cfcfcf}
.duel-coin{position:relative;width:72px;height:72px;transform-style:preserve-3d;animation:duel-flip 1.9s cubic-bezier(.2,.75,.25,1) forwards}
.duel-show[data-side="b"] .duel-coin{animation-name:duel-flip-b}
.duel-face{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;backface-visibility:hidden;font:600 26px 'Dela Gothic One',Unbounded,Arial;font-style:normal;color:#3a2a08;background:radial-gradient(circle at 35% 30%,#fff3c4,#e2b25a 55%,#a77a2c);box-shadow:inset 0 0 0 3px #f6dc96,inset 0 0 0 5px #b8893a}
.duel-face.is-b{transform:rotateY(180deg)}
@keyframes duel-flip{0%{transform:translateY(0) rotateY(0)}45%{transform:translateY(-34px) rotateY(1080deg)}100%{transform:translateY(0) rotateY(1800deg)}}
@keyframes duel-flip-b{0%{transform:translateY(0) rotateY(0)}45%{transform:translateY(-34px) rotateY(1080deg)}100%{transform:translateY(0) rotateY(1980deg)}}
.duel-show.is-done[data-side="a"] .duel-side[data-k="b"],.duel-show.is-done[data-side="b"] .duel-side[data-k="a"]{opacity:.35;transform:scale(.94)}
.duel-show.is-done[data-side="a"] .duel-side[data-k="a"] .duel-initial,.duel-show.is-done[data-side="b"] .duel-side[data-k="b"] .duel-initial{border-color:var(--imperial);box-shadow:0 0 22px rgba(226,178,90,.35);color:#f3d998}
.duel-result{margin:0;text-align:center;font-size:14px;color:#bdbdbd}
.duel-result b{color:var(--imperial)}
@media(max-width:600px){.duel-stage{grid-template-columns:90px 72px 90px;gap:10px}.duel-side strong{max-width:90px}}
@media(prefers-reduced-motion:reduce){.duel-coin{animation:none}.duel-show[data-side="b"] .duel-coin{transform:rotateY(180deg)}}

/* Daily wheel: flat sectors, plain numbers, a quiet centre. */
.casino-wheel-disc>svg{filter:drop-shadow(0 18px 36px #00000080)}
.casino-wheel-disc text.casino-wheel-num{fill:#ececec;stroke:none;font-size:8.5px;letter-spacing:0}
.casino-wheel-disc .is-imperial text.casino-wheel-num{fill:#8fe6bf;font-size:6.5px}
.casino-wheel-disc text.casino-wheel-cap{fill:#8a8a8a;fill-opacity:1;font-size:3.4px;letter-spacing:.14em}
.casino-wheel-disc .is-imperial text.casino-wheel-cap{fill:#5fae8a}
.casino-wheel-pin path{fill:#ededed;stroke:#0b0b0c}
.casino-wheel-pin circle{fill:#0b0b0c}
.casino-wheel-go,.casino-wheel-go:hover:not(:disabled){border-color:#ffffff24;background:#111113;box-shadow:0 0 0 6px #0b0b0c}
@media(hover:hover) and (pointer:fine){.casino-wheel-go:hover:not(:disabled){border-color:#ffffff59;box-shadow:0 0 0 6px #0b0b0c}}

/* Mines: the field leads, the stake and the revolutions sit in a narrow column beside it. */
.casino-mines{grid-template-columns:minmax(0,500px) minmax(0,280px);justify-content:center;gap:28px}
.casino-mines-side{gap:14px}
.casino-mines-side .padmin-label{font-size:10px;letter-spacing:.09em}
.casino-mines-side .casino-amount{gap:6px}
.casino-mines-side .casino-amount-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.casino-mines-side .casino-amount-input{grid-column:1/-1}
.casino-mines-side .casino-amount-input input{min-height:40px;font-size:14px}
.casino-mines-side .casino-chip{min-height:32px;padding:0 8px;font-size:12px}
.casino-mines-side .casino-go{min-height:42px}
.casino-mines-info{grid-template-columns:minmax(0,1fr);gap:0;border-radius:10px;background:#141416;overflow:hidden}
.casino-mines-info>div{display:flex;justify-content:space-between;align-items:baseline;padding:9px 12px;border-radius:0;background:none}
.casino-mines-info>div+div{border-top:1px solid #ffffff0a}
.casino-mines-info b{font-size:15px}
.casino-mines-info .cos-lead{padding:10px 12px;font-size:12px;line-height:1.45}
.mines-stepper{display:grid;grid-template-columns:40px minmax(0,1fr) 40px;align-items:stretch;height:40px;border:1px solid #ffffff24;border-radius:10px;background:#0d0d0f;overflow:hidden}
.mines-stepper input{min-width:0;border:0;background:none;color:#f2f2f2;text-align:center;font:inherit;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.mines-stepper input::-webkit-inner-spin-button,.mines-stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.mines-stepper input:focus{outline:none}
.mines-stepper:focus-within{border-color:#5fd0a099}
button.mines-stepper>button,.mines-stepper>button,.mines-stepper>button:hover:not(:disabled){min-height:0;padding:0;border:0;border-radius:0;background:none;color:#bdbdbd;font-size:17px;box-shadow:none}
@media(hover:hover){.mines-stepper>button:hover:not(:disabled){background:#ffffff0a;color:#fff}}
.mines-stepper:has(input:disabled){opacity:.5}
.mines-stepper:has(input:disabled) button{pointer-events:none}
@media(max-width:900px){.casino-mines{grid-template-columns:minmax(0,1fr)}}

/* Screen change, variant «Мягкий туман»: both screens cross through a soft blur at the same time, no scaling. */
@keyframes screen-leave{from{opacity:1;filter:blur(0)}to{opacity:0;filter:blur(12px)}}
@keyframes screen-arrive{from{opacity:0;filter:blur(12px)}to{opacity:1;filter:blur(0)}}
.screen-ghost{animation:screen-leave .42s cubic-bezier(.65,0,.35,1) forwards;will-change:opacity,filter}
.screen-enter{animation:screen-arrive .52s cubic-bezier(.65,0,.35,1) backwards}
@media(prefers-reduced-motion:reduce){.screen-ghost,.screen-enter{animation-duration:.01s}}

/* The observer badge and locks belong to the party screen only, not to the menu or the shop. */
body.is-spectator:not(:has(aside .countries))::after{content:none}

/* Part 2. Admin mark: a system status beside the name, never a shop tag. */
.staff-mark{display:inline-flex;align-items:center;gap:4px;flex-shrink:0;height:18px;padding:0 7px;border:1px solid #e5484d4d;border-radius:5px;background:#e5484d14;color:#ff7a7d;font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;line-height:1;white-space:nowrap}
.staff-mark svg{width:10px;height:10px;flex:0 0 10px}
.profile-name-row .staff-mark{height:22px;padding:0 9px;font-size:10.5px}
.profile-name-row .staff-mark svg{width:12px;height:12px;flex-basis:12px}
.staff-line{color:#ff7a7d;font-weight:600}

/* Leaderboard: the whole row lights evenly on hover; the name never underlines, the button never glows on its own. */
.lb-row{cursor:pointer}
.lb-row:hover{background:#ffffff08}
button.lb-player,button.lb-player:hover:not(:disabled),button.lb-player:focus-visible{box-shadow:none;border-radius:0}
.lb-player:hover .lb-name strong{text-decoration:none}
.lb-name strong{transition:color .15s ease}
.lb-row:hover .lb-name strong{color:#fff}

/* Creation form: one note under a choice, the turn limit unfolds under its segment. */
.cp2 .cp-group+.cp-group{margin-top:2px}
.cp2 .cp-top{grid-template-columns:minmax(0,1fr) 190px}
@media(max-width:640px){.cp2 .cp-top{grid-template-columns:minmax(0,1fr)}}
.cp-note{margin:10px 0 0;font-size:12px;line-height:1.5;color:#7d7d7d}
.cp-limit{display:grid;gap:12px;margin-top:12px}
.cp2 .hidden{display:none}
.cp2 .cp-password{margin-top:12px}
.cp2 .cp-group>.cp-segment+.cp-segment{margin-top:12px}
.cp2 .cp-grid+.cp-segment{margin-top:14px}

/* Lobby: the code, three facts, the step, the teams, one main button. */
.lr2 .lobby-room{display:grid;gap:18px}
.lr2 .lobby-room>.section-title{margin:0}
.lr2-strip{display:flex;align-items:stretch;gap:14px;flex-wrap:wrap}
button.lr2-code,button.lr2-code:hover:not(:disabled){display:grid;grid-template-columns:auto auto;align-items:center;column-gap:14px;row-gap:2px;min-height:0;padding:12px 16px;border:1px solid #ffffff14;border-radius:12px;background:#ffffff05;box-shadow:none;color:inherit;text-align:left;cursor:pointer;transition:border-color .18s ease,background-color .18s ease,transform .16s cubic-bezier(.23,1,.32,1)}
button.lr2-code:hover:not(:disabled){border-color:#ffffff2a;background:#ffffff08}
button.lr2-code:active{transform:scale(.98)}
.lr2-code small{grid-column:1/-1;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#7d7d7d}
.lr2-code strong{font:400 26px/1 'Dela Gothic One',Unbounded,Arial,sans-serif;letter-spacing:.12em;color:#f2f2f2;font-variant-numeric:tabular-nums}
.lr2-code span{font-size:11px;font-weight:600;color:#8d8d8d}
.lr2-code:hover span{color:#e0c483}
.lr2-facts{display:flex;flex-direction:column;justify-content:center;gap:6px;min-width:0;margin:0;padding:0;list-style:none;font-size:12.5px;color:#9a9a9a}
.lr2-facts li{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lr2-facts li::before{content:"";width:4px;height:4px;flex:0 0 4px;border-radius:50%;background:#ffffff40}
.lr2-step{display:flex;align-items:center;gap:10px;margin:0;padding:12px 14px;border:1px solid #ffffff10;border-radius:11px;background:#ffffff04;font-size:13px;line-height:1.45;color:#d6d6d6}
.lr2-step::before{content:"";width:6px;height:6px;flex:0 0 6px;border-radius:50%;background:#7fd1a8;box-shadow:0 0 10px #7fd1a880}
.lr2-step.is-warn::before{background:#e0c483;box-shadow:0 0 10px #e0c48380}
.lr2-main{display:grid;gap:8px;justify-items:center}
.lr2-main:empty{display:none}
.lr2-hint{font-size:11.5px;color:#7d7d7d}
.lr2 .lobby-settings-summary{margin-top:2px}
.is-hostless .lobby-person.host{display:none}

/* «Вернуться»: the parties the account plays in, on the main menu and the search page. */
.party-resume{display:grid;gap:8px;max-width:440px;margin:0 0 22px}
.home-nav .party-resume{width:min(440px,calc(100vw - 32px));margin:0 0 clamp(14px,2.4vh,26px)}
.search-party-panel .party-resume{max-width:none;margin:4px 0 6px}
button.party-resume-card,button.party-resume-card:hover:not(:disabled){display:flex;align-items:center;gap:14px;width:100%;min-height:0;padding:14px 16px;border:1px solid #e0c48333;border-radius:13px;background:linear-gradient(90deg,#e0c48312,#e0c48304);box-shadow:none;color:inherit;text-align:left;cursor:pointer;transition:border-color .18s ease,background-color .18s ease,transform .16s cubic-bezier(.23,1,.32,1)}
button.party-resume-card:hover:not(:disabled){border-color:#e0c48366}
button.party-resume-card:active{transform:scale(.985)}
.party-resume-pulse{position:relative;width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:#e0c483}
.party-resume-pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid #e0c483;opacity:0;animation:party-resume-pulse 2.4s cubic-bezier(.23,1,.32,1) infinite}
@keyframes party-resume-pulse{0%{opacity:.7;transform:scale(.6)}100%{opacity:0;transform:scale(1.8)}}
.party-resume-copy{display:grid;gap:3px;min-width:0;flex:1}
.party-resume-copy small{font-size:11px;color:#a89a76}
.party-resume-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;font-weight:700;color:#f2f2f2}
.party-resume-go{flex:0 0 auto;font-size:12.5px;font-weight:700;color:#e0c483}
@media(prefers-reduced-motion:reduce){.party-resume-pulse::after{animation:none}}

/* Party without a host: the early-end vote above the arena footer note. */
.finish-vote{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:12px 14px;border:1px solid #ffffff12;border-radius:12px;background:#ffffff04}
.finish-vote>div{display:grid;gap:3px;min-width:0}
.finish-vote strong{font-size:13px;color:#e8e8e8}
.finish-vote small{font-size:11.5px;line-height:1.45;color:#8a8a8a}
.finish-vote.is-mine{border-color:#e0c48340}
.finish-vote button{flex:0 0 auto;width:auto}

/* Friends: the chat button and its unread count. */
.friend-chat{display:inline-flex;align-items:center;gap:7px}
.friend-chat svg{width:15px;height:15px}
.chat-dot{display:inline-grid;place-items:center;min-width:17px;height:17px;padding:0 5px;border-radius:999px;background:#e0c483;color:#111;font:700 10px/1 Manrope,Arial,sans-serif;font-style:normal}

/* Chat drawer: over any page, bottom right; the list scrolls without a bar and fades at the edges. */
.chat-drawer{position:fixed;right:24px;bottom:24px;z-index:60;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;width:min(380px,calc(100vw - 32px));height:min(560px,calc(100vh - 48px));border:1px solid #ffffff16;border-radius:18px;background:#111;box-shadow:0 24px 60px #000000b3;opacity:0;transform:translateY(14px) scale(.98);transform-origin:bottom right;transition:opacity .2s cubic-bezier(.23,1,.32,1),transform .2s cubic-bezier(.23,1,.32,1)}
.chat-drawer.is-open{opacity:1;transform:none}
.chat-drawer{overflow:hidden;margin:0;padding:0}
.chat-head{display:flex;align-items:center;gap:12px;margin:0;padding:14px 14px 13px 16px;border-bottom:1px solid #ffffff0d;background:none}
.chat-head>div{display:grid;gap:3px;min-width:0;flex:1}
.chat-name{display:flex;align-items:center;gap:7px;min-width:0}
.chat-name strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-size:14px;color:#f2f2f2}
.chat-name>:not(strong){flex-shrink:0}
.chat-head small{font-size:11px;color:#7d7d7d}
.chat-drawer .chat-avatar{width:36px;height:36px;flex:0 0 36px}
button.chat-close,button.chat-close:hover:not(:disabled){display:inline-grid;place-items:center;width:34px;height:34px;min-height:0;padding:0;border:0;border-radius:10px;background:none;box-shadow:none;color:#8a8a8a}
button.chat-close:hover:not(:disabled){background:#ffffff0a;color:#f2f2f2}
.chat-close svg{width:16px;height:16px}
.chat-list{display:flex;flex-direction:column;gap:4px;padding:14px 14px 18px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-webkit-mask-image:linear-gradient(transparent,#000 14px,#000 calc(100% - 22px),transparent);mask-image:linear-gradient(transparent,#000 14px,#000 calc(100% - 22px),transparent)}
.chat-list::-webkit-scrollbar{display:none}
.chat-list:focus-visible{outline:none}
.chat-time{align-self:center;margin:8px 0 4px;font-size:10.5px;color:#666;font-variant-numeric:tabular-nums}
.chat-msg{max-width:82%;margin:0;padding:8px 12px;border-radius:14px 14px 14px 5px;background:#ffffff0d;font-size:13.5px;line-height:1.42;color:#e6e6e6;white-space:pre-wrap;overflow-wrap:anywhere}
.chat-msg.is-mine{align-self:flex-end;border-radius:14px 14px 5px 14px;background:#e7e7e7;color:#111}
.chat-empty{display:grid;gap:4px;place-content:center;height:100%;text-align:center}
.chat-empty strong{font-size:13px;color:#cfcfcf}
.chat-empty span{font-size:12px;color:#7d7d7d}
.chat-error{min-height:0;margin:0;padding:0 16px;font-size:11.5px;color:#ff8a8a}
.chat-error:empty{display:none}
.chat-form{display:flex;align-items:flex-end;gap:8px;padding:10px 12px 12px;border-top:1px solid #ffffff0d}
.chat-form textarea{flex:1;min-height:40px;max-height:120px;margin:0;padding:10px 14px;border:1px solid #ffffff14;border-radius:12px;background:#ffffff06;box-shadow:none;outline:none;color:#f2f2f2;font:400 13.5px/1.4 Manrope,Arial,sans-serif;resize:none;overflow-y:auto;scrollbar-width:none;transition:border-color .18s ease,background-color .18s ease}
.chat-form textarea::-webkit-scrollbar{display:none}
.chat-form textarea::placeholder{color:#6f6f6f}
.chat-form textarea:focus{border-color:#ffffff33;background:#ffffff09;box-shadow:none}
button.chat-send{display:inline-grid;place-items:center;width:40px;height:40px;min-height:0;flex:0 0 40px;padding:0;border-radius:12px}
.chat-send svg{width:18px;height:18px}
@media(max-width:640px){.chat-drawer{right:16px;bottom:16px;left:16px;width:auto;height:min(70vh,560px)}}

/* Chat settings: «…» opens a small menu under the header; a muted chat shows a crossed bell beside the name. */
.chat-head{position:relative}
.chat-bell-off{display:none;width:15px;height:15px;flex:0 0 15px;color:#7d7d7d}
.chat-head.is-muted .chat-bell-off{display:block}
button.chat-more,button.chat-more:hover:not(:disabled){display:inline-grid;place-items:center;width:34px;height:34px;min-height:0;padding:0;border:0;border-radius:10px;background:none;box-shadow:none;color:#8a8a8a}
button.chat-more:hover:not(:disabled),button.chat-more[aria-expanded="true"]{background:#ffffff0a;color:#f2f2f2}
.chat-more svg{width:16px;height:16px}
.chat-menu{position:absolute;top:calc(100% - 6px);right:12px;z-index:2;display:grid;min-width:200px;padding:6px;border:1px solid #ffffff1a;border-radius:12px;background:#181818;box-shadow:0 16px 40px #000000b3;transform-origin:top right;animation:chat-menu-in .16s cubic-bezier(.23,1,.32,1)}
.chat-menu[hidden]{display:none}
@keyframes chat-menu-in{from{opacity:0;transform:scale(.96) translateY(-4px)}}
.chat-menu button,.chat-menu button:hover:not(:disabled){display:block;width:100%;min-height:0;height:34px;padding:0 10px;border:0;border-radius:8px;background:none;box-shadow:none;color:#d6d6d6;font:500 13px/34px Manrope,Arial,sans-serif;text-align:left}
.chat-menu button:hover:not(:disabled){background:#ffffff0d;color:#fff}
.chat-menu-mute{display:grid;margin-top:5px;padding-top:5px;border-top:1px solid #ffffff0d}
.chat-menu-cap{padding:4px 10px 2px;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#6f6f6f}

/* Message cards: bottom right, above the party's trade offers; the script moves them so nothing overlaps. */
.chat-toasts{position:fixed;right:24px;bottom:24px;z-index:95;display:grid;gap:10px;width:min(350px,calc(100vw - 32px));transition:right .2s cubic-bezier(.23,1,.32,1),bottom .2s cubic-bezier(.23,1,.32,1)}
.chat-toast{position:relative;border:1px solid #ffffff1a;border-radius:14px;background:#161616f5;box-shadow:0 14px 40px #00000099;backdrop-filter:blur(14px);opacity:0;transform:translateY(8px) scale(.98);transition:opacity .2s cubic-bezier(.23,1,.32,1),transform .2s cubic-bezier(.23,1,.32,1)}
.chat-toast.is-in{opacity:1;transform:none}
button.chat-toast-main,button.chat-toast-main:hover:not(:disabled){display:flex;align-items:center;gap:12px;width:100%;min-height:0;padding:13px 40px 13px 14px;border:0;border-radius:14px;background:none;box-shadow:none;color:inherit;text-align:left;cursor:pointer}
button.chat-toast-main:hover:not(:disabled){background:#ffffff06}
button.chat-toast-main:active{transform:scale(.99)}
.chat-toast-copy{display:grid;gap:3px;min-width:0;flex:1}
.chat-toast-copy small{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:12.5px;line-height:1.4;color:#a8a8a8;overflow-wrap:anywhere}
.chat-toast .chat-dot{flex:0 0 auto}
button.chat-toast-close,button.chat-toast-close:hover:not(:disabled){position:absolute;top:8px;right:8px;display:inline-grid;place-items:center;width:26px;height:26px;min-height:0;padding:0;border:0;border-radius:8px;background:none;box-shadow:none;color:#7d7d7d}
button.chat-toast-close:hover:not(:disabled){background:#ffffff0d;color:#f2f2f2}
.chat-toast-close svg{width:14px;height:14px}
/* An open chat pushes the party's trade offers to its left (above it on a phone). */
body.chat-open .trade-notifications{right:calc(24px + min(380px,calc(100vw - 32px)) + 12px);transition:right .2s cubic-bezier(.23,1,.32,1)}
@media(max-width:640px){body.chat-open .trade-notifications{right:16px;bottom:calc(min(70vh,560px) + 28px)}}
@media(prefers-reduced-motion:reduce){.chat-toast{transform:none}.chat-toasts,body.chat-open .trade-notifications{transition:none}.chat-menu{animation:none}}
@media(prefers-reduced-motion:reduce){.chat-drawer{transition:opacity .15s linear;transform:none}}

/* One top bar on every menu window: the logo top left and the numbers, profile, inventory and settings top right sit
   where they sit in the main menu, at the same size. */
.minimal-shell>.home-brand{position:fixed;top:max(26px,env(safe-area-inset-top));left:max(32px,env(safe-area-inset-left));z-index:30;display:flex;align-items:center;gap:14px;width:auto;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;justify-content:flex-start;color:#e6e6e6;text-align:left}
.minimal-shell>.home-brand .brand-mark{width:46px;height:46px;flex:none}
.minimal-shell>.home-brand .brand-mark svg{width:100%;height:100%;display:block}
.shop-shell>.minimal-brand.home-brand{display:flex}
.shop-top>.shop-brand-home{display:none}
@media(max-width:900px){.minimal-shell>.home-brand{left:16px;top:16px}}
/* Outside the main menu the bar scrolls away with the page, as the corner buttons did, and the page starts below it. */
.minimal-shell:not(.home-shell)>:is(.home-topbar,.home-brand){position:absolute}
.minimal-shell:not(.home-shell){padding-top:100px}
@media(max-width:900px){.minimal-shell:not(.home-shell)>.home-topbar .home-stats{position:absolute}.minimal-shell:not(.home-shell){padding-top:136px}}
.minimal-shell.shop-shell:not(.home-shell){padding-top:56px}
@media(max-width:900px){.minimal-shell.shop-shell:not(.home-shell){padding-top:92px}}

/* Patch 3. Lobby leader: «Сделать лидером» and «Исключить» beside a player in the roster. */
.lobby-person .leader-tools{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.lobby-person .leader-tools button{min-height:30px;padding:5px 10px;font-size:12px}
.lobby-person .leader-tools .leader-kick{color:#f0a493;border-color:#f0a49340}
.lobby-person .leader-tools .leader-kick:hover:not(:disabled){background:#f0a49314;border-color:#f0a49380}

/* Profile: email and password. */
.account-security{display:grid;gap:2px;margin:18px 0 6px;padding:16px 18px;border:1px solid #2a2a2a;border-radius:12px;background:#101010}
.account-security h3{margin:0 0 8px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#969696}
.account-security .sec-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid #1f1f1f}
.account-security .sec-row:first-of-type{border-top:0}
.account-security .sec-row>div{display:grid;gap:3px;min-width:0}
.account-security .sec-row span{font-weight:700}
.account-security .sec-row small{color:#969696;overflow-wrap:anywhere}
.account-security .sec-row small b{color:#e6e6e6;font-weight:600}
.account-security .sec-ok{color:#8fd6a0;font-weight:600}
.account-security .sec-warn{color:#e6c878;font-weight:600}
.account-security .sec-row button{flex:none}
.account-forgot{justify-self:center;margin-top:-4px;color:#bdbdbd;border-color:transparent;background:none}
.account-forgot:hover:not(:disabled){color:#fff;background:#ffffff0d}

dialog#modal.sec-dialog{max-width:none;width:min(440px,calc(100vw - 32px));padding:28px}
.sec-form{display:grid;gap:12px}
.sec-form h2{margin:2px 0 0}
.sec-form .sec-intro{margin:0;color:#a8a8a8;line-height:1.5}
.sec-form .sec-intro b{color:#e6e6e6}
.sec-form .fields{display:grid;grid-template-columns:1fr;gap:12px}.sec-form .setup-field,.sec-form .sec-input{width:100%;max-width:none}
.sec-form .sec-input{display:flex}.sec-form .sec-input input{flex:1;width:100%;padding-left:14px}
.sec-form input[name=code]{letter-spacing:.4em;font-variant-numeric:tabular-nums;font-size:20px;text-align:center}
.sec-form .sec-resend{justify-self:start;border-color:transparent;background:none;color:#bdbdbd;padding-left:0}
.sec-form .sec-resend:hover:not(:disabled){color:#fff;background:none;text-decoration:underline}
.sec-form .dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}

/* Admin panel: players on the left, the chosen one on the right. */
dialog#modal.admin-dialog{max-width:none;width:min(1080px,calc(100vw - 32px));height:min(780px,calc(100vh - 48px));padding:0;overflow:hidden}
.admin-panel{display:grid;grid-template-rows:auto 1fr;height:100%}
.admin-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:22px 26px 16px;border-bottom:1px solid #262626}
.admin-head h2{margin:2px 0 0}
.admin-body{display:grid;grid-template-columns:300px 1fr;min-height:0}
.admin-side{display:grid;grid-template-rows:auto 1fr;min-height:0;border-right:1px solid #262626}
.admin-search{padding:14px 14px 10px}
.admin-search input{width:100%;padding:11px 13px;border:1px solid #2f2f2f;border-radius:9px;background:#0f0f0f;color:inherit}
.admin-users,.admin-editor{overflow:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(#000 calc(100% - 28px),transparent);mask-image:linear-gradient(#000 calc(100% - 28px),transparent)}
.admin-users::-webkit-scrollbar,.admin-editor::-webkit-scrollbar{display:none}
.admin-users{display:grid;align-content:start;gap:2px;padding:0 8px 28px}
.admin-user{display:grid;grid-template-columns:8px 1fr auto;align-items:center;gap:10px;width:100%;padding:10px;border:1px solid transparent;border-radius:9px;background:none;text-align:left;font-weight:500}
.admin-user:hover:not(:disabled){background:#ffffff0a}
.admin-user.is-active{background:#ffffff12;border-color:#ffffff1f}
.admin-user span{display:grid;gap:2px;min-width:0}
.admin-user strong,.admin-user small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.admin-user small{color:#8a8a8a}
.admin-user em{font-style:normal;font-variant-numeric:tabular-nums;color:#bdbdbd;font-size:12px}
.admin-user-dot{width:8px;height:8px;border-radius:50%;background:#3a3a3a}
.admin-user-dot.is-online{background:#7fd49a}
.admin-editor{padding:20px 26px 40px}
.admin-empty{color:#8a8a8a;padding:12px}
.admin-form{display:grid;gap:16px}
.admin-who{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.admin-who h3{margin:0 0 4px;font-size:22px}
.admin-who small{color:#8a8a8a}
.admin-group{margin:0;padding:14px 16px 16px;border:1px solid #262626;border-radius:12px;min-width:0}
.admin-group legend{padding:0 6px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#969696}
.admin-nums{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.admin-num{display:grid;gap:6px}
.admin-num span{font-size:12px;color:#a8a8a8}
.admin-num input{width:100%;padding:10px 12px;border:1px solid #2f2f2f;border-radius:9px;background:#0f0f0f;color:inherit;font-variant-numeric:tabular-nums}
.admin-chips{display:flex;flex-wrap:wrap;gap:8px}
.admin-chip-row{display:grid;gap:6px;margin-top:10px}
.admin-chip-row:first-of-type{margin-top:0}
.admin-chip-row>small{color:#8a8a8a}
.admin-chip{position:relative;display:inline-flex}
.admin-chip input{position:absolute;opacity:0;pointer-events:none}
.admin-chip span{padding:7px 12px;border:1px solid #2f2f2f;border-radius:999px;font-size:13px;color:#bdbdbd;cursor:pointer;transition:background-color .16s ease,border-color .16s ease,color .16s ease}
.admin-chip input:checked+span{background:#f2f2f2;border-color:#f2f2f2;color:#111;font-weight:700}
.admin-chip input:focus-visible+span{outline:2px solid #e7e7e7;outline-offset:3px}
.admin-log{display:grid;gap:6px;padding:12px 16px;border-radius:12px;background:#101010}
.admin-log h4{margin:0 0 4px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#969696}
.admin-log p{margin:0;color:#cfcfcf;font-size:13px;line-height:1.45}
.admin-log p small{display:block;color:#7d7d7d}
.admin-save{position:sticky;bottom:0;display:flex;justify-content:flex-end;padding-top:6px}
.admin-manage{margin-top:10px}
@media(max-width:760px){
 dialog#modal.admin-dialog{height:calc(100vh - 32px)}
 .admin-body{grid-template-columns:1fr;grid-template-rows:200px 1fr}
 .admin-side{border-right:0;border-bottom:1px solid #262626}
 .admin-editor{padding:16px}
}

/* Saving the final screen as a picture. */
dialog#modal.share-dialog{max-width:none;width:min(560px,calc(100vw - 32px));padding:0;overflow:hidden}
.share-panel .admin-head{padding:20px 24px 14px}
.share-preview{display:grid;place-items:center;padding:16px 24px;background:#0b0b0b}
.share-preview img{display:block;width:100%;max-height:min(62vh,640px);object-fit:contain;border-radius:10px;box-shadow:0 18px 50px #000a}
.share-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;padding:14px 24px 20px}
.share-actions #share-back{margin-right:auto}

/* Patch 4. Profile backgrounds: a scene fills the banner of the profile card, which grows taller for it. */
.profile-banner.has-look{height:170px;overflow:hidden}
.profile-banner.has-look::after{z-index:6;background:linear-gradient(transparent 55%,#141416)}
.profile-card-body{position:relative;z-index:7}
.profile-bg-edit{position:absolute;top:12px;right:12px;z-index:7;display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:5px 11px;border:1px solid #ffffff26;border-radius:999px;background:#0d0d0fb3;color:#d6d6d6;font-size:12px;font-weight:600;backdrop-filter:blur(6px);transition:background-color .16s ease,transform .16s cubic-bezier(.2,.8,.2,1)}
.profile-bg-edit svg{width:13px;height:13px}
.profile-bg-edit:hover{background:#1d1d20d9}
.profile-bg-edit:active{transform:scale(.97)}
.lk-scene{position:absolute;inset:0;overflow:hidden}
/* «Призрачный флот»: ghost ships with green lanterns sail through fog under a pale moon, a moon road on the water. */
.lk-fleet{background:linear-gradient(180deg,#041016 0%,#0a2530 48%,#0d2e38 60%,#06161c 61%,#051116 100%)}
.lk-gmoon{position:absolute;left:62%;top:16px;width:48px;height:48px;border-radius:50%;background:radial-gradient(circle at 38% 36%,#f4fffb,#bff5e2 55%,#7fd6bb);box-shadow:0 0 28px #9dffe099,0 0 110px 20px #5effc22e}
.lk-water{position:absolute;left:0;right:0;top:61%;bottom:0;overflow:hidden;background:linear-gradient(180deg,#0b2a33,#061820 70%,#04121a)}
.lk-water::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,#c6ffee55 50%,transparent)}
.lk-swell{position:absolute;left:0;width:200%;height:20px;animation:lk-roll var(--t) linear infinite}
.lk-swell svg{display:block;width:100%;height:100%}
@keyframes lk-roll{to{transform:translateX(-50%)}}
.lk-reflect{position:absolute;left:calc(62% - 33px);top:0;width:114px;height:100%;background:radial-gradient(30% 22% at 50% 2%,#e6fff690,transparent 100%),radial-gradient(45% 80% at 50% 0%,#c6ffee38,transparent 75%);filter:blur(5px);animation:lk-wobble 3.4s ease-in-out infinite alternate}
@keyframes lk-wobble{to{transform:scaleX(1.18) translateX(-3px)}}
.lk-glints{position:absolute;left:calc(62% - 33px);top:0;width:114px;height:100%}
.lk-glints i{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);margin-left:calc(var(--w) / -2);border-radius:2px;background:#e6fff6;box-shadow:0 0 6px #b8ffe8;opacity:0;animation:lk-glint var(--t) ease-in-out var(--d) infinite}
@keyframes lk-glint{0%,100%{opacity:0;transform:scaleX(.4)}45%{opacity:var(--o);transform:scaleX(1)}}
.lk-ship{position:absolute;bottom:50px;width:132px;animation:lk-sail var(--t) linear var(--d) infinite;z-index:2}
.lk-ship>svg{display:block;width:100%;overflow:visible;animation:lk-bob 4.6s ease-in-out infinite,lk-phase 13s ease-in-out infinite;transform-origin:50% 80%}
.lk-ship .lk-refl{position:absolute;left:0;top:86%;width:100%;transform:scaleY(-1);opacity:.38;filter:blur(1px);-webkit-mask:linear-gradient(0deg,#000 10%,transparent 70%);mask:linear-gradient(0deg,#000 10%,transparent 70%);animation:lk-refl 4.6s ease-in-out infinite}
.lk-ship.is-far{bottom:57px;width:74px;opacity:.55}
.lk-ship.is-far>svg{animation-delay:0s,-6s}
@keyframes lk-sail{from{left:105%}to{left:-30%}}
@keyframes lk-bob{50%{transform:translateY(3px) rotate(-2deg)}}
@keyframes lk-refl{50%{transform:scaleY(-1) translateY(-3px) skewX(2deg)}}
@keyframes lk-phase{0%,72%,100%{opacity:1;filter:none}80%{opacity:.2;filter:blur(1.5px)}86%{opacity:.85}90%{opacity:.35}96%{opacity:1}}
.lk-wisp{position:absolute;width:7px;height:7px;border-radius:50%;background:#b6ffc8;box-shadow:0 0 10px 3px #6dff8e88;opacity:0;animation:lk-wisp var(--t) ease-in-out var(--d) infinite;z-index:3}
@keyframes lk-wisp{0%{opacity:0;transform:translate(0,0)}20%{opacity:.9}50%{transform:translate(var(--dx),-14px)}80%{opacity:.7}100%{opacity:0;transform:translate(calc(var(--dx) * 2),-4px)}}
.lk-lantern{animation:lk-flicker 2.1s steps(1) infinite}
@keyframes lk-flicker{0%,100%{opacity:1}12%{opacity:.55}14%{opacity:1}52%{opacity:.75}55%{opacity:1}80%{opacity:.6}82%{opacity:1}}
.lk-gfog{position:absolute;left:-30%;right:-30%;bottom:16px;height:56px;background:radial-gradient(40% 70% at 30% 50%,#b8ffe826,transparent 70%),radial-gradient(35% 60% at 75% 50%,#9fe9ff1f,transparent 70%);filter:blur(8px);animation:lk-fog 16s ease-in-out infinite alternate;z-index:3}
@keyframes lk-fog{to{transform:translateX(12%)}}
/* «Кровавая луна»: a huge red moon behind slow clouds, a dead tree on the right. */
.lk-blood{background:radial-gradient(70% 110% at 26% 40%,#4a0d14,transparent 70%),linear-gradient(180deg,#0e0306,#24070c 60%,#160407)}
.lk-bmoon{position:absolute;left:16%;top:16px;width:112px;height:112px;border-radius:50%;background:radial-gradient(circle at 34% 60%,#00000022 0 12px,transparent 13px),radial-gradient(circle at 64% 34%,#0000001c 0 16px,transparent 17px),radial-gradient(circle at 60% 74%,#00000018 0 8px,transparent 9px),radial-gradient(circle at 40% 36%,#ffc2ad,#ee5a3e 45%,#a8180f 80%,#6e0c08);box-shadow:0 0 50px #ff3b2a77,0 0 140px 30px #c4101040}
.lk-cloud{position:absolute;height:24px;border-radius:50%;background:#12040899;filter:blur(5px);animation:lk-cloud var(--t) linear var(--d) infinite}
@keyframes lk-cloud{from{transform:translateX(-30%)}to{transform:translateX(130%)}}
.lk-tree{position:absolute;right:4%;bottom:0;height:150px}
.profile-card:has(.lk-fleet){border-color:#5effc240;box-shadow:0 30px 70px -50px #3fe0b066}
.profile-card:has(.lk-blood){border-color:#ff3b3b30}

/* Avatar frames sit around the avatar of the profile card, over its edge. */
.profile-avatar .lk-frame{position:absolute;inset:-13px;z-index:2;pointer-events:none}
.lk-web{width:auto;height:auto}
.lk-spider{animation:lk-dangle 3.2s ease-in-out infinite;transform-origin:96px 0}
@keyframes lk-dangle{50%{transform:translateY(9px)}}
/* «Тлеющие угли»: a fire ring turns slowly on the avatar's edge, its warmth spills inward, embers rise from it. */
.lk-ember::before{content:'';position:absolute;inset:10px;border-radius:50%;background:conic-gradient(#ff7a1a,#ffd29a,#ff3d00,#ffb057,#ff5a00,#ff7a1a);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));animation:lk-spin 6s linear infinite;filter:drop-shadow(0 0 3px #ff7a1acc)}
.lk-ember::after{content:'';position:absolute;inset:14px;border-radius:50%;background:radial-gradient(farthest-side,transparent 72%,#ff7a1a2e 88%,#ff9a3a55 100%);animation:lk-pulse 2.6s ease-in-out infinite}
@keyframes lk-spin{to{transform:rotate(1turn)}}
@keyframes lk-pulse{0%,100%{opacity:.65}50%{opacity:1}}
.lk-ember i{position:absolute;left:var(--x);top:var(--y);width:4px;height:4px;border-radius:50%;background:#ffc56a;box-shadow:0 0 6px #ff8a2a;opacity:0;animation:lk-rise var(--t) ease-out var(--d) infinite}
@keyframes lk-rise{0%{transform:translateY(0) scale(1);opacity:0}15%{opacity:1}100%{transform:translateY(-36px) scale(.3);opacity:0}}
/* Thumbnails in the background and frame slots. */
.lk-thumb{position:relative;display:block;width:100%;height:64px;overflow:hidden;border-radius:8px;background:#111113}
.lk-thumb .lk-scene{transform:scale(.55);transform-origin:0 0;width:182%;height:182%}
.lk-thumb-av{position:relative;display:inline-grid}
.lk-thumb-av .account-avatar{width:46px;height:46px}
.lk-thumb-av .lk-frame{position:absolute;inset:-7px;pointer-events:none}
.lk-thumb-av .lk-ember::before{inset:5px;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px))}
.lk-thumb-av .lk-ember::after{inset:7px}
.lk-thumb-av .lk-ember i{display:none}

/* Tags HEX and BOO. HEX: a hexagon in witch violet with a poison-green edge, green sparks rising. */
.tg--hex{--pad:.74em;--shape:polygon(.3em 0,calc(100% - .3em) 0,100% 50%,calc(100% - .3em) 100%,.3em 100%,0 50%);--edge:linear-gradient(90deg,#9b5cff,#6dff8e 50%,#9b5cff);--face:radial-gradient(90% 130% at 50% 125%,#3f1a78,transparent 65%),linear-gradient(180deg,#1b0d30,#0c0616);--ink:#d8ffb8;--glow:#6dff5a}
.tg--hex .tg-fx i{width:.1em;height:.1em;border-radius:50%;background:#9dff7a;box-shadow:0 0 .1em #6dff5a}
@keyframes tg-hex{0%{transform:translateY(0) scale(.4);opacity:0}25%{opacity:1;transform:translateY(-.12em) scale(1)}100%{transform:translateY(-.55em) scale(.2);opacity:0}}
/* BOO: the tag is a little ghost, a pale sheet with a wavy hem; the two O are its eyes and blink. */
.tg--boo{--pad:.68em;--shape:polygon(0 30%,3% 14%,9% 4%,18% 0,82% 0,91% 4%,97% 14%,100% 30%,100% 84%,93% 100%,86% 86%,79% 100%,72% 86%,65% 100%,58% 86%,51% 100%,44% 86%,37% 100%,30% 86%,23% 100%,16% 86%,9% 100%,3% 88%,0 96%);--edge:linear-gradient(180deg,#ffffff,#d6f1f8);--face:radial-gradient(80% 90% at 50% 10%,#ffffff,#e6f7fb 55%,#bfe6f0);--ink:#14232b;--glow:#9fe9ff;animation:tg-boo-float 3.2s ease-in-out infinite}
.tg--boo .tg-label{text-shadow:none;font-size:.44em;letter-spacing:.1em;margin-top:-.06em}
.tg--boo .tg-label b{display:inline-block;font-weight:inherit;animation:tg-boo-blink 4.2s ease-in-out infinite;transform-origin:50% 60%}
.tg--boo .tg-label b+b{animation-delay:.05s}
.tg--boo::after{opacity:.4;background:#bff3ff}
@keyframes tg-boo-float{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-.07em) rotate(-2deg)}60%{transform:translateY(-.03em) rotate(1.5deg);opacity:1}75%{opacity:.45}85%{opacity:1}}
@keyframes tg-boo-blink{0%,44%,52%,100%{transform:scaleY(1)}48%{transform:scaleY(.12)}}
.tg--boo .tg-fx i{width:.2em;height:.2em;border-radius:50%;background:radial-gradient(circle,#ffffffcc,#bff3ff00 70%)}
@keyframes tg-boo{0%{transform:translate(0,0) scale(.4);opacity:0}30%{opacity:.7}100%{transform:translate(-.2em,-.45em) scale(1.3);opacity:0}}

/* Cases tab: a case on sale is a shop row, the 3D case turns on the left. */
#case3d-stage{position:fixed;left:-10px;top:-10px;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.case-row{display:grid;grid-template-columns:minmax(220px,320px) 1fr auto;align-items:center;gap:26px;padding-right:26px;border:1px solid #ffffff17;border-radius:18px;background:linear-gradient(100deg,#1a1410 0%,#151517 42%);overflow:hidden;transition:border-color .3s ease}
.case-row:hover{border-color:#ffffff38}
.case-row-canvas{display:block;width:100%;aspect-ratio:1.35;touch-action:none;cursor:grab}
.case-row-canvas:active{cursor:grabbing}
.case-row-chips{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.case-chip{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 10px;border:1px solid #ff8a2a55;border-radius:999px;background:#ff8a2a14;color:#ffb57a;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.case-chip i{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.case-timer{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#ffcf9a;font-variant-numeric:tabular-nums}
.case-timer svg{width:14px;height:14px}
.case-row h3{margin:12px 0 4px;font-family:'Dela Gothic One',Unbounded,Arial,sans-serif;font-size:22px;font-weight:400;line-height:1.1}
.case-row-copy p{margin:0;max-width:52ch;color:#8f8f8f;font-size:13px;line-height:1.5}
.case-drops{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.case-drop{display:flex;align-items:center;gap:7px;min-height:30px;padding:0 11px;border:1px solid #ffffff17;border-radius:8px;background:#ffffff05;color:#cfcfcf;font-size:12px}
.case-drop i,.case-odds i{width:7px;height:7px;border-radius:2px;flex:none}
.case-odds{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;color:#9a9a9a;font-size:12px}
.case-odds span{display:flex;align-items:center;gap:6px}
.case-row-buy{display:grid;justify-items:end;gap:12px}
.case-price{display:flex;align-items:center;gap:8px;color:#5fd49c;font-family:'Dela Gothic One',Unbounded,Arial,sans-serif;font-size:24px;line-height:1}
.case-price svg{width:20px;height:20px}
.case-open{min-width:132px;min-height:44px}
.case-row-buy small{color:#8d8d8d;font-size:12px}
.case-row-buy small b{color:#5fd49c}
.case-row+.cos-case-grid{margin-top:14px}
@media(max-width:860px){.case-row{grid-template-columns:1fr;padding:0 0 20px}.case-row>div{padding:0 20px}.case-row-buy{justify-items:stretch}.case-price{justify-content:flex-start}}

/* Opening a case: a dark overlay, the big case, the strip of rewards, then the reward on a profile card. */
.case-ov{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:#050505eb;backdrop-filter:blur(6px);opacity:0;transition:opacity .3s ease;--r:#ff8a2a}
.case-ov.is-on{opacity:1}
.case-skip{position:fixed;top:20px;right:20px;z-index:3}
.case-stage{position:relative;display:grid;justify-items:center;width:min(900px,calc(100vw - 32px))}
.case-big{display:block;height:min(72vh,660px);width:auto;max-width:100%;aspect-ratio:1.15;transition:opacity .4s ease,transform .5s cubic-bezier(.23,1,.32,1);-webkit-mask:radial-gradient(closest-side,#000 72%,transparent);mask:radial-gradient(closest-side,#000 72%,transparent)}
.case-cap{margin-top:-20px;color:#8d8d8d;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;transition:opacity .3s ease}
.case-stage.is-strip .case-big{transform:translateY(-20%) scale(.8);opacity:.8}
.case-stage.is-strip .case-cap{opacity:0}
.case-stage.is-dim .case-big{opacity:.15}
.case-strip{position:absolute;left:50%;top:78%;width:min(900px,calc(100vw - 32px));height:170px;overflow:hidden;border:1px solid #ffffff1c;border-radius:16px;background:#0f0f0f;transform:translate(-50%,-50%);-webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.case-strip[hidden]{display:none}
.case-track{position:absolute;left:0;top:15px;display:flex;gap:10px;will-change:transform}
.case-tile{position:relative;flex:none;display:grid;grid-template-rows:1fr auto;width:140px;height:140px;overflow:hidden;border:1px solid #ffffff12;border-radius:12px;background:#171717;transition:transform .4s cubic-bezier(.23,1,.32,1),box-shadow .4s ease}
.case-tile::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--r)}
.case-tile-art{position:relative;display:grid;place-items:center;overflow:hidden}
.case-tile-name{padding:7px 10px 10px;overflow:hidden;font-size:12px;font-weight:700;white-space:nowrap;text-overflow:ellipsis;background:linear-gradient(transparent,color-mix(in srgb,var(--r) 14%,transparent))}
.case-tile.is-win{transform:scale(1.06);box-shadow:0 0 0 2px var(--r),0 0 40px -6px var(--r)}
.case-marker{position:absolute;left:50%;top:0;bottom:0;z-index:2;width:2px;margin-left:-1px;background:#ffd29a;box-shadow:0 0 12px #ff8a2a}
.case-marker::before,.case-marker::after{content:'';position:absolute;left:50%;border:7px solid transparent;transform:translateX(-50%)}
.case-marker::before{top:0;border-top-color:#ffd29a}
.case-marker::after{bottom:0;border-bottom-color:#ffd29a}
.case-art{position:absolute;inset:0}
.case-art-fleet{background:linear-gradient(180deg,#041016,#0d2e38 58%,#0b2a33 59%,#051116)}
.case-art-fleet::before{content:'';position:absolute;left:30%;top:24%;width:44%;height:36%;background:#9fffe055;clip-path:polygon(0 70%,100% 70%,85% 100%,15% 100%,0 70%,30% 70%,32% 0,36% 70%,60% 70%,62% 10%,66% 70%)}
.case-art-fleet::after{content:'';position:absolute;right:16%;top:12%;width:14px;height:14px;border-radius:50%;background:#e8fff7;box-shadow:0 0 12px #9dffe0}
.case-art-blood{background:radial-gradient(circle at 40% 44%,#ee5a3e 0 22px,#ff3b2a44 23px,transparent 44px),linear-gradient(180deg,#0e0306,#24070c)}
.case-art-frame{display:grid;place-items:center}
.case-art-frame>span{position:relative;width:56px;height:56px;border-radius:50%;background:#2a2a2a}
.case-art-frame>span::before{content:'';position:absolute;inset:-6px;border-radius:50%}
.case-art-ember>span::before{border:4px solid transparent;background:conic-gradient(#ff7a1a,#ffd29a,#ff3d00,#ff7a1a) border-box;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));filter:drop-shadow(0 0 5px #ff7a1a)}
.case-art-web>span::before{border:2px solid #cfd3da}
.case-art-web>span::after{content:'';position:absolute;right:-12px;top:-12px;width:26px;height:26px;border-radius:0 50% 0 0;background:repeating-conic-gradient(from 180deg at 100% 0,#e8ebf088 0 2deg,transparent 2deg 18deg)}
.case-ray{position:absolute;left:50%;top:50%;width:900px;height:900px;margin:-450px 0 0 -450px;border-radius:50%;background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--r) 22%,transparent) 0 6deg,transparent 6deg 18deg);-webkit-mask:radial-gradient(closest-side,#000,transparent);mask:radial-gradient(closest-side,#000,transparent);opacity:0;transition:opacity .6s ease;animation:lk-spin 40s linear infinite;pointer-events:none}
.case-ov.is-reveal .case-ray{opacity:.8}
.case-reveal{position:absolute;left:50%;top:50%;width:min(620px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;scrollbar-width:none;transform:translate(-50%,-44%) scale(.94);opacity:0;transition:opacity .45s ease,transform .6s cubic-bezier(.23,1,.32,1)}
.case-reveal::-webkit-scrollbar{display:none}
.case-ov.is-reveal .case-reveal{transform:translate(-50%,-50%) scale(1);opacity:1}
.case-rv-head{margin-bottom:14px}
.case-rv-rar{color:var(--r);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.case-rv-head h2{margin:8px 0 2px;font-family:'Dela Gothic One',Unbounded,Arial,sans-serif;font-size:28px;font-weight:400;line-height:1.1}
.case-rv-head small{color:#8f8f8f;font-size:13px}
.case-rv-card{position:relative;overflow:hidden;border:1px solid #ffffff17;border-radius:18px;background:#141416;box-shadow:0 0 0 1px color-mix(in srgb,var(--r) 50%,transparent),0 30px 90px -30px color-mix(in srgb,var(--r) 60%,transparent)}
.case-rv-body{position:relative;z-index:7;display:grid;gap:8px;justify-items:start;padding:0 24px 22px;margin-top:-52px}
.case-rv-body .profile-name-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.case-rv-body strong{font-family:'Dela Gothic One',Unbounded,Arial,sans-serif;font-size:22px;font-weight:400}
.case-rv-body>small{color:#8f8f8f;font-size:12px}
.case-rv-dup{margin:12px 0 0;padding:10px 14px;border:1px solid #f0c94a40;border-radius:10px;background:#f0c94a14;color:#f0d98a;font-size:13px}
.case-rv-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:16px}
@media(prefers-reduced-motion:reduce){.lk-scene *,.lk-frame,.lk-frame *,.lk-ember::before,.lk-ember::after,.tg--boo,.tg--boo .tg-label b,.case-ray{animation:none!important}.lk-ember i,.lk-wisp,.lk-glints i{opacity:0}}

/* Patch 5. */
/* Screen change: the leaving copy only fades. A blur over a whole copied screen stalled on slower graphics, and the old
   screen hung over the new one for a second (leaderboard → main menu). The new screen still comes out of a soft blur. */
@keyframes screen-leave-fade{from{opacity:1}to{opacity:0}}
@keyframes screen-arrive-soft{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:blur(0)}}
.screen-ghost{animation:screen-leave-fade .2s cubic-bezier(.23,1,.32,1) forwards;will-change:opacity;filter:none;contain:strict}
.screen-enter{animation:screen-arrive-soft .34s cubic-bezier(.23,1,.32,1) backwards}
@media(prefers-reduced-motion:reduce){.screen-ghost,.screen-enter{animation-duration:.01s}}

/* Strip: the multipliers without «N из 65» (the chance is in the tooltip). */
.casino-pick{min-height:56px;place-content:center}

/* Admin panel: a search over every item, the save button at the end of the form instead of stuck to the window. */
.admin-save{position:static;padding-top:4px}
.admin-item-search{display:block}
.admin-item-search input{width:100%;padding:11px 13px;border:1px solid #2f2f2f;border-radius:9px;background:#0f0f0f;color:inherit;font:inherit;font-size:13px}
.admin-item-search input:focus-visible{outline:2px solid #e7e7e7;outline-offset:2px}
.admin-chip[hidden],.admin-chip-row[hidden],.admin-group[hidden]{display:none}
.admin-items-empty{margin:0;padding:6px 2px;color:#8a8a8a;font-size:13px}

/* Case reward: the glow of the card is not cut off, the «already owned» note stands on a solid plate above the rays. */
/* The reward box no longer scrolls itself (its scroll box cut the glow into a rectangle); a short screen scrolls the whole overlay instead. */
.case-reveal{width:min(620px,calc(100vw - 32px));max-height:none;overflow:visible;padding:0}
@media(max-height:760px){.case-ov.is-reveal{overflow-y:auto;scrollbar-width:none}.case-ov.is-reveal::-webkit-scrollbar{display:none}.case-reveal{top:24px;padding-bottom:24px;transform:translate(-50%,16px) scale(.94)}.case-ov.is-reveal .case-reveal{transform:translate(-50%,0)}}
.case-rv-dup{position:relative;z-index:1;margin:14px 0 0;padding:12px 16px;border:1px solid #e0c48352;border-radius:12px;background:#17140d;color:#f1dfa6;font-size:13px;line-height:1.45;box-shadow:0 10px 30px -12px #000}

/* Profile: the pen that changes the avatar sits above the avatar frame. */
.profile-avatar .profile-slot-pen{z-index:5;right:-4px;bottom:-4px}

/* Case row: the green price above the white «Купить» button, both in the bottom-right corner of the card. */
.case-row-buy{align-self:end;margin-bottom:22px;gap:12px}
.case-open{box-sizing:border-box;min-width:172px;height:50px;padding:0 24px;font-size:15px;white-space:nowrap;transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .16s cubic-bezier(.23,1,.32,1)}
.case-open:active{transform:scale(.97)}
.case-open.is-armed{background:#5fd49c;border-color:#5fd49c;color:#06140d;width:172px;padding:0 10px;font-size:13px}
.case-open.is-short{background:transparent;border-color:#ffffff1f;color:#9a9a9a;opacity:1;font-weight:700}
.case-open.is-short svg{opacity:.7}
@media(max-width:860px){.case-row-buy{align-self:stretch;justify-items:end;margin:0}}

/* Top bar:the MMR/level/coins/imperials block has the same dark fill and border as the profile, bag and gear buttons. */
.home-stats,.home-topbar .account-entry,.home-topbar .inventory-trigger,.home-topbar .settings-trigger{background:#0e0e0f;border:1px solid #2a2a2a;border-radius:10px}
.home-stats{backdrop-filter:none}
@media(hover:hover) and (pointer:fine){.home-topbar .account-entry:hover,.home-topbar .inventory-trigger:hover,.home-topbar .settings-trigger:hover{background:#161618;border-color:#3a3a3a}}

/* Own profile: the lower part in tabs. The ranks and place rewards live in the help, not here. */
.profile-tabs{display:flex;gap:2px;margin:18px 0 14px;padding:3px;border:1px solid #2a2a2a;border-radius:12px;background:#0e0e0f;overflow-x:auto;scrollbar-width:none}
.profile-tabs::-webkit-scrollbar{display:none}
.profile-tabs button{flex:1 1 0;min-width:max-content;min-height:38px;padding:0 16px;border:0;border-radius:9px;background:transparent;color:#8f8f8f;font:inherit;font-size:13px;font-weight:700;white-space:nowrap;transition:background-color .18s ease,color .18s ease}
.profile-tabs button[aria-selected=true]{background:#ececec;color:#111}
@media(hover:hover) and (pointer:fine){.profile-tabs button[aria-selected=false]:hover{color:#e6e6e6}}
.profile-tabs button:focus-visible{outline:2px solid #e7e7e7;outline-offset:2px}
.account-profile-pane[hidden],#account-profile-form[hidden]{display:none}
.account-profile-panel .progression-rules{display:none}

/* Trade: two bowls with ⇄ between them, the partner's side as numbers (zeros quiet), one status line. */
.trade-bowls{display:grid;grid-template-columns:minmax(0,1fr) 36px minmax(0,1fr);gap:12px;align-items:start}
.trade-bowls-swap{align-self:center;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#18181b;color:#8f8f8f;font-size:16px}
.trade-bowls .trade-offer-heading strong{display:inline-flex;align-items:center;gap:8px}
.trade-bowls .trade-ready-label{display:none}
.trade-bowls .fields{display:grid;grid-template-columns:1fr;gap:6px}
.trade-bowls .setup-field{display:grid;grid-template-columns:minmax(0,1fr) 120px;align-items:center;gap:10px;margin:0}
.trade-bowls .setup-field>span{font-size:13px}
.trade-bowls .setup-input-wrap svg{display:none}
.trade-bowls .setup-input-wrap input{min-height:38px;height:38px;padding:0 12px;text-align:right;font-variant-numeric:tabular-nums}
.trade-get{display:grid;gap:6px}
.trade-get-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:38px;padding:0 12px;border-radius:9px;background:#ffffff05;font-size:13px;color:#d6d6d6}
.trade-get-row b{font-variant-numeric:tabular-nums;color:#fff}
.trade-get-row.is-zero,.trade-get-row.is-zero b{color:#6f6f6f;font-weight:500;background:transparent}
.trade-bowls .trade-other-offer>p{margin:10px 0 0;font-size:12px}
.trade-dot{display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:#5a5a5a;vertical-align:1px}
.trade-dot.is-ok{background:#5fd49c;box-shadow:0 0 8px #5fd49c88}
@media(max-width:760px){.trade-bowls{grid-template-columns:1fr}.trade-bowls-swap{justify-self:center;transform:rotate(90deg)}}

/* Defence orders: a ring with the remainder in the middle, −/+ steps of 5% per row. */
.share-ring-top{display:flex;align-items:center;gap:18px;margin-bottom:4px}
.share-ring{position:relative;flex:0 0 auto;width:104px;height:104px}
.share-ring svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.share-ring circle{fill:none;stroke-width:10}
.share-ring-base{stroke:#ffffff10}
.share-ring-arc{transition:stroke-dasharray .22s cubic-bezier(.23,1,.32,1),stroke-dashoffset .22s cubic-bezier(.23,1,.32,1)}
.share-ring strong{position:absolute;inset:0 0 14px;display:grid;place-items:center;font-size:20px;font-variant-numeric:tabular-nums}
.share-ring small{position:absolute;left:0;right:0;bottom:30px;text-align:center;font-size:10px;color:#8a8a8a}
.share-ring-editor[data-rest=ok] .share-ring strong{color:#5fd49c}
.share-ring-editor[data-rest=left] .share-ring strong{color:#e0c483}
.share-ring-editor[data-rest=over] .share-ring strong{color:#e8908f}
.share-ring-actions{flex:1;display:grid;gap:8px}
.share-ring-actions button{min-height:40px}
.share-step-row{grid-template-columns:minmax(0,1fr) auto auto}
.share-step{display:flex;align-items:center;gap:6px}
.share-step>button{width:34px;min-width:34px;min-height:34px;height:34px;padding:0;font-size:16px}
.share-step .share-num input{width:52px;min-height:34px;height:34px;padding:0 4px;text-align:center;font-weight:800}
.share-step-row:has(input[data-share-input]:disabled){opacity:.45}
.share-step-row:has(input[data-share-input]:disabled) .share-name{text-decoration:line-through}
.share-ring-editor .share-hint{min-height:18px;margin:2px 0 0}
.share-ring-editor[data-rest=left] .share-hint{color:#e0c483}
@media(max-width:600px){.share-ring-top{flex-direction:column;align-items:stretch}.share-ring{align-self:center}.share-step-row{grid-template-columns:1fr auto}.share-step-row .share-troops{grid-column:1;grid-row:2;text-align:left}.share-step{grid-row:1/3;grid-column:2}}
@media(prefers-reduced-motion:reduce){.share-ring-arc{transition:none}}

/* Results image: the style switch above the preview. */
.share-styles{display:flex;gap:2px;margin:0 24px 12px;padding:3px;border:1px solid #2a2a2a;border-radius:12px;background:#0e0e0f}
.share-styles button{flex:1;min-height:36px;padding:0 12px;border:0;border-radius:9px;background:transparent;color:#8f8f8f;font:inherit;font-size:13px;font-weight:700;transition:background-color .18s ease,color .18s ease}
.share-styles button[aria-checked=true]{background:#ececec;color:#111}
.share-styles button:focus-visible{outline:2px solid #e7e7e7;outline-offset:2px}

/* Blood moon: the moon over a blood sea, a trembling moon path and ripples; no tree. */
.lk-blood{background:linear-gradient(180deg,#0b0103,#24050a 56%,#000 56.5%)}
.lk-blood .lk-bmoon{left:58%;top:12px;width:84px;height:84px}
.lk-bsea{position:absolute;left:0;right:0;top:56%;bottom:0;background:linear-gradient(#3b050b,#1a0205)}
.lk-bpath{position:absolute;left:calc(58% - 20px);width:124px;top:56%;bottom:0;background:radial-gradient(40% 30% at 50% 0,#ff6b55aa,transparent),radial-gradient(50% 100% at 50% 0,#ff3b2a44,transparent 80%);filter:blur(4px);animation:lk-bpath 3s ease-in-out infinite alternate}
@keyframes lk-bpath{to{transform:scaleX(1.2)}}
.lk-ripple{position:absolute;height:1px;background:#ff8a7266;opacity:0;animation:lk-ripple var(--t) ease-in-out var(--d) infinite}
@keyframes lk-ripple{0%,100%{opacity:0;transform:scaleX(.4)}50%{opacity:1;transform:scaleX(1)}}
.lk-bshore{position:absolute;left:0;right:0;top:calc(56% - 18px);width:100%;height:20px}
@media(prefers-reduced-motion:reduce){.lk-bpath,.lk-ripple{animation:none}.lk-ripple{opacity:.6}}

/* Map: a destroyed city is red and sends out waves. */
.hero-city.is-down .dot{fill:#ff3b2e}
.hero-city.is-down text,.hero-city.is-down .lvl{fill:#ff6a5c}
.hero-city .ruin-wave{fill:#ff3b2e;transform-box:fill-box;transform-origin:center;animation:ruin-wave 1.8s cubic-bezier(.23,1,.32,1) infinite}
@keyframes ruin-wave{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}
@media(prefers-reduced-motion:reduce){.hero-city .ruin-wave{animation:none;opacity:.3}}

/* Toasts: a small dark pill with a dot, bottom centre. */
#toast{display:flex;align-items:center;gap:10px;width:max-content;max-width:min(440px,calc(100vw - 24px));padding:10px 18px 10px 14px;border:1px solid #ffffff17;border-radius:999px;background:#161618f2;color:#ececec;font-size:13px;font-weight:500;line-height:1.35;text-align:left;box-shadow:0 14px 34px -14px #000;backdrop-filter:blur(10px);z-index:1200}
#toast::before{content:'';flex:0 0 6px;width:6px;height:6px;border-radius:50%;background:#e0c483;box-shadow:0 0 10px #e0c48399}
@media(max-width:600px){#toast{border-radius:14px}}
/* Lobby: one grid gap between the invite and start buttons and between the mod cards. */
.lobby-room .squad-invite{margin-bottom:0}
.lobby-room .lr2-main>.primary.full{margin-top:0}
.lobby-room>.world-mode-status{margin-top:0}
.lobby-room>.world-mode-status+.world-mode-status{margin-top:-8px}
/* Host panel: its collapsible cards share the .admin-editor class with the account admin window, so they lost the bottom fade meant for that scrolling window. */
.admin-redesigned .admin-editor.panel{-webkit-mask-image:none;mask-image:none}