:root {
  --ink: #1d232b;
  --muted: #68717b;
  --line: #dce1e6;
  --surface: rgba(255,255,255,.96);
  --accent: #ffcc00;
  --accent-dark: #b98b00;
  --danger: #b94646;
  --shadow: 0 16px 45px rgba(26,35,46,.18);
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; min-height: 100%; margin: 0; overflow: hidden; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: #e8edf0; }
button, input, select { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }
.app { position: relative; width: 100vw; height: 100vh; height: 100dvh; overflow: hidden; }
.map { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 1px; min-height: 1px; background: #dfe7e8; }
.map .maplibregl-canvas-container, .map .maplibregl-canvas { width: 100%; height: 100%; }

.topbar { position: absolute; z-index: 15; top: 16px; left: 16px; right: 16px; display: grid; grid-template-columns: minmax(190px, 260px) minmax(260px, 1fr) auto auto auto; align-items: center; gap: 10px; pointer-events: none; }
.topbar > * { pointer-events: auto; }
.brand, .search, .button, .account-button, .panel, .profile-panel, .modal-card { backdrop-filter: none; -webkit-backdrop-filter: none; }
.brand { min-width: 0; height: 58px; display: flex; align-items: center; gap: 11px; padding: 8px 13px; border-radius: 17px; background: var(--surface); color: inherit; text-decoration: none; box-shadow: var(--shadow); }
.brand__mark, .auth-hero__mark { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 13px; background: var(--accent); color: #4d3c00; font-size: 22px; font-weight: 900; }
.brand strong, .brand small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand strong { font-size: 16px; }
.brand small { margin-top: 2px; color: var(--muted); font-size: 10px; letter-spacing: .04em; }
.search { position: relative; height: 58px; display: grid; grid-template-columns: 25px 1fr 34px; align-items: center; gap: 8px; padding: 0 12px; border-radius: 17px; background: var(--surface); box-shadow: var(--shadow); }
.search svg { width: 22px; height: 22px; fill: none; stroke: #717a84; stroke-width: 1.8; stroke-linecap: round; }
.search input { min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 14px; }
.icon-button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 11px; background: transparent; cursor: pointer; font-size: 22px; }
.icon-button:hover { background: #eef1f3; }
.search__clear { opacity: 0; pointer-events: none; }
.search.has-value .search__clear { opacity: 1; pointer-events: auto; }
.search-results { position: absolute; top: 66px; left: 0; right: 0; max-height: min(430px, calc(100vh - 110px)); overflow: auto; padding: 7px; border-radius: 15px; background: #fff; box-shadow: var(--shadow); }
.search-result { width: 100%; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; padding: 9px; border: 0; border-radius: 10px; background: transparent; text-align: left; cursor: pointer; }
.search-result:hover { background: #f1f3f5; }
.search-result__badge { padding: 4px 7px; border-radius: 999px; background: #edf0f2; color: #69727b; font-size: 9px; text-transform: uppercase; }
.search-result strong, .search-result small { display: block; }
.search-result strong { font-size: 13px; }
.search-result small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.search-empty { padding: 18px; color: var(--muted); font-size: 12px; text-align: center; }
mark { background: #fff0a8; color: inherit; }

.button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 15px; border: 1px solid transparent; border-radius: 13px; background: rgba(255,255,255,.96); box-shadow: 0 6px 20px rgba(26,35,46,.13); font-weight: 800; cursor: pointer; }
.button:hover { transform: translateY(-1px); }
.button--compact { height: 58px; }
.button--accent { background: var(--accent); color: #4d3c00; box-shadow: 0 8px 22px rgba(128,98,0,.2); }
.button--ghost { border-color: var(--line); background: #fff; box-shadow: none; }
.button--wide { width: 100%; }
.account-button { height: 58px; display: grid; grid-template-columns: 38px auto; align-items: center; gap: 10px; padding: 7px 13px 7px 8px; border: 0; border-radius: 17px; background: var(--surface); box-shadow: var(--shadow); cursor: pointer; text-align: left; }
.account-avatar, .profile-avatar { display: grid; place-items: center; border-radius: 13px; background: linear-gradient(145deg, #ffdd4d, #f4b900); color: #574200; font-weight: 900; }
.account-avatar { width: 38px; height: 38px; }
.account-copy strong, .account-copy small { display: block; white-space: nowrap; }
.account-copy strong { font-size: 13px; }
.account-copy small { margin-top: 2px; color: var(--muted); font-size: 10px; }

.panel, .profile-panel { position: absolute; z-index: 12; overflow: auto; border: 1px solid rgba(255,255,255,.72); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.panel--layers { top: 86px; left: 16px; width: min(330px, calc(100vw - 32px)); max-height: calc(100vh - 126px); padding: 16px; transition: opacity .18s ease, transform .18s ease; }
.panel--layers.is-hidden { opacity: 0; transform: translateX(-20px); pointer-events: none; }
.panel__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.eyebrow { margin: 0 0 3px; color: #8a6c00; font-size: 9px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
.panel h1 { margin-bottom: 0; font-size: 19px; }
.layer-row { position: relative; display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding: 10px 7px; border-radius: 12px; cursor: pointer; }
.layer-row:hover { background: #f3f5f6; }
.layer-row__icon { width: 25px; height: 25px; border-radius: 8px; }
.layer-row__icon--district { background: rgba(238,129,116,.28); border: 2px solid #ee8174; }
.layer-row__icon--micro { background: rgba(86,122,153,.18); border: 2px solid #567a99; }
.layer-row__text strong, .layer-row__text small { display: block; }
.layer-row__text strong { font-size: 13px; }
.layer-row__text small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.layer-row input { position: absolute; opacity: 0; pointer-events: none; }
.switch { position: relative; width: 40px; height: 24px; border-radius: 999px; background: #cbd0d5; transition: background .16s ease; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); transition: transform .16s ease; }
.layer-row input:checked + .switch { background: #e6b800; }
.layer-row input:checked + .switch::after { transform: translateX(16px); }
.panel__divider, .profile-divider { height: 1px; margin: 12px 0; background: var(--line); }
.district-list { display: grid; gap: 4px; }
.district-button { width: 100%; display: grid; grid-template-columns: 12px 1fr; align-items: center; gap: 10px; padding: 9px 8px; border: 0; border-radius: 10px; background: transparent; text-align: left; cursor: pointer; }
.district-button:hover { background: #f0f2f4; }
.district-button__dot { width: 9px; height: 9px; border-radius: 50%; }
.district-button strong { font-size: 13px; }
.panel__note { display: flex; gap: 10px; margin-top: 14px; padding: 12px; border-radius: 12px; background: rgba(240,242,244,.8); }
.panel__note-dot { width: 8px; height: 8px; flex: 0 0 auto; margin-top: 4px; border-radius: 50%; background: #6f9c78; }
.panel__note p { margin: 0; color: #5e6670; font-size: 11px; line-height: 1.45; }
.floating-button { position: absolute; z-index: 11; left: 16px; top: 86px; width: 48px; height: 48px; border: 0; border-radius: 15px; background: #fff; box-shadow: var(--shadow); cursor: pointer; }
.floating-button svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.modal-shell { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(24,30,38,.64); backdrop-filter: none; -webkit-backdrop-filter: none; }
.modal-card { position: relative; width: min(660px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: 24px; border: 1px solid rgba(255,255,255,.65); border-radius: 24px; background: rgba(255,255,255,.98); box-shadow: 0 28px 80px rgba(17,23,31,.35); }
.modal-close { position: absolute; top: 14px; right: 14px; }
.auth-hero { display: grid; grid-template-columns: 54px 1fr; gap: 14px; padding-right: 38px; }
.auth-hero__mark { width: 54px; height: 54px; border-radius: 17px; font-size: 28px; }
.auth-hero h2 { margin-bottom: 6px; font-size: 23px; }
.auth-hero p:last-child { margin-bottom: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 20px 0 15px; padding: 4px; border-radius: 13px; background: #eef1f3; }
.auth-tab, .profile-tab { border: 0; cursor: pointer; font-weight: 800; }
.auth-tab { min-height: 40px; border-radius: 10px; background: transparent; color: var(--muted); }
.auth-tab.is-active { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(27,35,48,.1); }
.auth-form, .settings-form { display: grid; gap: 11px; }
.field { display: grid; gap: 7px; }
.field > span { color: #555d66; font-size: 12px; font-weight: 800; }
.field input, .field select { width: 100%; height: 44px; padding: 0 12px; border: 1px solid #d5d9de; border-radius: 11px; outline: none; background: #fff; color: var(--ink); }
.field input:focus, .field select:focus { border-color: #c99f00; box-shadow: 0 0 0 3px rgba(255,204,0,.18); }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.form-error { margin: 0; padding: 9px 11px; border-radius: 10px; background: #fff0f0; color: #9d3434; font-size: 12px; }
.form-note { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }

.profile-panel { top: 16px; right: 16px; width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 20px; z-index: 30; }
.profile-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.profile-ident { display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 13px; min-width: 0; }
.profile-avatar { width: 54px; height: 54px; border-radius: 17px; font-size: 24px; }
.profile-ident h2 { margin-bottom: 3px; font-size: 21px; overflow: hidden; text-overflow: ellipsis; }
.profile-ident p:last-child { margin: 0; color: var(--muted); font-size: 11px; }
.balance-card { display: grid; gap: 4px; margin: 17px 0 14px; padding: 16px; border-radius: 17px; background: linear-gradient(135deg, #fff5bc, #ffd83d); color: #4b3900; box-shadow: inset 0 0 0 1px rgba(125,89,0,.12); }
.balance-card span, .balance-card small { font-size: 10px; font-weight: 700; }
.balance-card strong { font-size: 28px; }
.profile-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 4px; border-radius: 13px; background: #eef1f3; }
.profile-tab { min-height: 39px; border-radius: 10px; background: transparent; color: var(--muted); font-size: 12px; }
.profile-tab.is-active { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(27,35,48,.1); }
.profile-content { padding-top: 16px; }
.profile-section h3 { margin-bottom: 10px; font-size: 17px; }

.locked-location { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; border: 1px solid #dfe3e6; border-radius: 13px; background: #f4f6f7; }
.locked-location div { min-width: 0; }
.locked-location span, .locked-location strong { display: block; }
.locked-location span { margin-bottom: 4px; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.locked-location strong { overflow: hidden; color: var(--ink); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.locked-location small { grid-column: 1 / -1; color: var(--muted); font-size: 10px; line-height: 1.45; }
.checkbox-row { display: flex; align-items: center; gap: 9px; min-height: 42px; color: #535b64; font-size: 12px; }
.text-button { justify-self: start; padding: 4px 0; border: 0; background: none; color: #626a73; font-size: 12px; text-decoration: underline; cursor: pointer; }
.text-button--danger { color: var(--danger); }
.section-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.section-title h3 { margin-bottom: 0; }
.section-copy { color: var(--muted); font-size: 11px; line-height: 1.5; }
.count-pill { min-width: 28px; padding: 4px 8px; border-radius: 999px; background: #edf0f2; color: #626a73; font-size: 11px; text-align: center; }
.cards-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 15px; padding: 4px 2px 18px; }
.game-card { position: relative; min-width: 0; aspect-ratio: 0.72; min-height: 250px; border: 0; background: transparent; cursor: pointer; perspective: 1000px; transform-style: flat; isolation: isolate; contain: layout style; }
.game-card__inner { position: absolute; inset: 0; transform-origin: 50% 50%; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.2,.75,.2,1); will-change: transform; }
.game-card.is-flipped .game-card__inner { transform: rotateY(180deg); }
.game-card__face { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 17px; border-radius: 22px; -webkit-backface-visibility: hidden; backface-visibility: hidden; transform: translateZ(0); box-shadow: 0 18px 38px rgba(28,37,47,.24); border: 1px solid rgba(255,255,255,.58); }
.game-card__front { background: radial-gradient(circle at 80% 15%, rgba(255,255,255,.75), transparent 27%), linear-gradient(145deg, var(--card-a), var(--card-b)); color: #fff; }
.game-card__back { transform: rotateY(180deg) translateZ(1px); background: linear-gradient(145deg, #202b36, #111820); color: #fff; }
.game-card__shine { position: absolute; inset: -30%; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.33) 48%, transparent 62%); transform: translateX(-60%) rotate(8deg); transition: transform .4s ease; pointer-events: none; }
.game-card:hover .game-card__shine { transform: translateX(55%) rotate(8deg); }
.game-card__rarity { align-self: flex-start; padding: 5px 8px; border-radius: 999px; background: rgba(255,255,255,.2); font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.game-card__symbol { display: grid; place-items: center; width: 88px; height: 88px; margin: auto; border-radius: 50%; background: rgba(255,255,255,.17); border: 1px solid rgba(255,255,255,.3); font-size: 40px; }
.game-card h4 { margin: 0 0 5px; font-size: 20px; }
.game-card p { margin: 0; color: rgba(255,255,255,.82); font-size: 11px; line-height: 1.4; }
.game-card__number { position: absolute; top: 16px; right: 17px; font-size: 10px; opacity: .75; }
.game-card__back h4 { margin-top: auto; }
.game-card__back dl { display: grid; gap: 9px; margin: 12px 0 0; }
.game-card__back dl div { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 7px; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 11px; }
.game-card__back dt { color: rgba(255,255,255,.62); }
.game-card__back dd { margin: 0; font-weight: 800; text-align: right; }
.ownership-groups { display: grid; gap: 12px; }
.ownership-group { padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.ownership-group__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ownership-group h4 { margin: 0; font-size: 13px; }
.ownership-list { display: grid; gap: 7px; }
.ownership-item { display: grid; grid-template-columns: 33px 1fr; align-items: center; gap: 9px; padding: 8px; border-radius: 10px; background: #f3f5f6; }
.ownership-item__icon { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 10px; background: #fff; }
.ownership-item strong, .ownership-item small { display: block; }
.ownership-item strong { font-size: 12px; }
.ownership-item small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.empty-state { padding: 25px 15px; border: 1px dashed #cbd2d8; border-radius: 14px; color: var(--muted); font-size: 12px; line-height: 1.55; text-align: center; }

.loading { position: absolute; z-index: 40; left: 50%; bottom: 26px; display: flex; align-items: center; gap: 10px; transform: translateX(-50%); padding: 11px 16px; border-radius: 999px; background: rgba(24,28,34,.88); color: #fff; font-size: 12px; box-shadow: var(--shadow); transition: opacity .25s ease; }
.loading.is-done { opacity: 0; pointer-events: none; }
.loading__spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast { position: absolute; z-index: 120; left: 50%; bottom: 28px; max-width: min(580px, calc(100vw - 32px)); transform: translateX(-50%); padding: 12px 16px; border-radius: 12px; background: #222831; color: #fff; font-size: 12px; line-height: 1.4; box-shadow: var(--shadow); }
.credits { position: absolute; z-index: 8; right: 10px; bottom: 4px; padding: 3px 6px; border-radius: 5px; background: rgba(255,255,255,.72); color: #6c737b; font-size: 9px; }
.credits a { color: inherit; }
.popup-title { font-weight: 800; font-size: 14px; }
.popup-kind { margin-top: 3px; color: #69717b; font-size: 11px; }
.maplibregl-ctrl-top-right { top: 80px; right: 4px; }
.maplibregl-ctrl-group { border-radius: 13px !important; overflow: hidden; box-shadow: var(--shadow) !important; }

.public-profile-card.is-profile-city-legend .public-profile-legend-badge { margin-top: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}
@media (max-width: 1050px) {
  .topbar { grid-template-columns: minmax(180px, 230px) minmax(220px, 1fr) auto; }
  #resetView { display: none; }
}
@media (max-width: 760px) {
  .topbar { top: 10px; left: 10px; right: 10px; grid-template-columns: 54px 1fr 56px; gap: 8px; }
  .brand { width: 54px; min-width: 54px; padding: 7px; }
  .brand > span:last-child, .account-copy { display: none; }
  .account-button { width: 56px; grid-template-columns: 1fr; padding: 8px; }
  .account-avatar { margin: auto; }
  .panel--layers { top: 76px; left: 10px; max-height: calc(100vh - 116px); }
  .floating-button { left: 10px; top: 76px; }
  .maplibregl-ctrl-top-right { top: 70px; }
  .profile-panel { inset: 10px; width: auto; max-height: none; }
  .credits { display: none; }
}
@media (max-width: 540px) {
  .modal-shell { padding: 8px; }
  .modal-card { padding: 19px; border-radius: 18px; max-height: calc(100vh - 16px); }
  .field-grid { grid-template-columns: 1fr; }
  .cards-grid { grid-template-columns: 1fr; }
  .game-card { max-width: 310px; width: 100%; margin-inline: auto; }
  .profile-tabs { grid-template-columns: 1fr; }
  .auth-hero { grid-template-columns: 44px 1fr; }
  .auth-hero__mark { width: 44px; height: 44px; font-size: 23px; }
}


/* Надёжный стартовый экран и диагностика карты */
body.auth-required .topbar, body.auth-required .panel--layers, body.auth-required .credits { filter: blur(3px) saturate(.75); pointer-events: none; user-select: none; }
body.auth-required .modal-shell { background: linear-gradient(135deg, rgba(24,30,38,.74), rgba(45,62,76,.66)); }
.map-error { position: fixed; z-index: 75; left: 50%; bottom: 24px; transform: translateX(-50%); display: flex; align-items: center; gap: 18px; width: min(620px, calc(100vw - 32px)); padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.97); border: 1px solid rgba(125,55,55,.18); box-shadow: var(--shadow); }
.map-error > div { min-width: 0; display: grid; gap: 3px; }
.map-error strong { font-size: 14px; color: #8d3939; }
.map-error span { font-size: 12px; line-height: 1.35; color: var(--muted); }
.noscript-warning { position: fixed; z-index: 500; inset: 0; display: grid; place-items: center; padding: 24px; background: #eef2f4; color: #27323b; font: 600 16px/1.5 system-ui, sans-serif; text-align: center; }
@media (max-width: 620px) { .map-error { align-items: stretch; flex-direction: column; gap: 10px; } .map-error .button { width: 100%; } }

/* v1.1.6: WebGL canvas must not be composited under backdrop-filter (Safari/WebKit). */
.profile-panel, .panel, .topbar > *, .modal-card { background-color: rgba(255,255,255,.98); }
#map { isolation: isolate; transform: translateZ(0); }

/* Минимальные стили MapLibre внутри проекта: карта остаётся видимой даже при сбое CDN со стилями библиотеки. */
.maplibregl-map { position: relative; overflow: hidden; -webkit-tap-highlight-color: transparent; }
.maplibregl-canvas-container { position: absolute; inset: 0; width: 100%; height: 100%; }
.maplibregl-canvas { position: absolute; left: 0; top: 0; }
.maplibregl-canvas-container.maplibregl-interactive { cursor: grab; user-select: none; -webkit-user-select: none; }
.maplibregl-canvas-container.maplibregl-interactive:active { cursor: grabbing; }
.maplibregl-control-container { position: absolute; inset: 0; pointer-events: none; }
.maplibregl-ctrl-top-right { position: absolute; top: 80px; right: 4px; pointer-events: auto; }
.maplibregl-ctrl-group { display: flex; flex-direction: column; background: #fff; }
.maplibregl-ctrl-group button { width: 34px; height: 34px; border: 0; border-bottom: 1px solid #ddd; background: #fff; cursor: pointer; }
.maplibregl-ctrl-group button:last-child { border-bottom: 0; }
.maplibregl-popup { position: absolute; top: 0; left: 0; display: flex; pointer-events: none; }
.maplibregl-popup-content { position: relative; padding: 10px; border-radius: 8px; background: #fff; box-shadow: 0 4px 18px rgba(0,0,0,.2); pointer-events: auto; }


/* Игровые территории */
.layer-row__icon--territory {
  position: relative;
  background:
    linear-gradient(90deg, transparent 46%, #6c7f90 47%, #6c7f90 53%, transparent 54%),
    linear-gradient(transparent 46%, #6c7f90 47%, #6c7f90 53%, transparent 54%),
    rgba(108,127,144,.12);
  border: 2px solid #6c7f90;
}
.territory-popup .maplibregl-popup-content { padding: 10px 13px; border-radius: 12px; }
.territory-popup__code { font-weight: 900; font-size: 17px; color: #1f2933; }
.territory-popup__hint { margin-top: 2px; font-size: 11px; color: #68727d; }

/* Territory purchase panel */
.territory-popup .maplibregl-popup-content { min-width: 210px; padding: 13px 14px; }
.territory-card { display: grid; gap: 5px; }
.territory-popup__location { color: #68727d; font-size: 11px; }
.territory-popup__price { margin-top: 3px; color: #6c5100; font-size: 18px; font-weight: 900; }
.territory-popup__owner { width: fit-content; padding: 4px 7px; border-radius: 999px; background: #eef1f3; color: #58626c; font-size: 10px; font-weight: 800; }
.territory-popup__owner.is-owned { background: #eee8f7; color: #654c84; }
.territory-buy-button { width: 100%; margin-top: 5px; padding: 9px 11px; border: 0; border-radius: 10px; background: #ffca05; color: #3d3100; font: inherit; font-size: 11px; font-weight: 900; cursor: pointer; }
.territory-buy-button:hover:not(:disabled) { filter: brightness(.96); }
.territory-buy-button:disabled { cursor: not-allowed; opacity: .55; }

.territory-popup__income { color: #27734b; font-size: 12px; font-weight: 900; }
#profileHourlyIncome { color: #5a4700; font-weight: 800; }


/* v1.5.0: battles */
.battle-nav-button { position: relative; white-space: nowrap; }
.battle-badge { display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #b94646; color: #fff; font-size: 10px; }
.territory-attack-button { width: 100%; margin-top: 5px; padding: 10px 11px; border: 0; border-radius: 10px; background: #b94b43; color: #fff; font: inherit; font-size: 11px; font-weight: 900; cursor: pointer; }
.territory-attack-button:hover:not(:disabled) { filter: brightness(.95); }
.territory-attack-button:disabled { cursor: not-allowed; opacity: .55; }
.battle-modal-card { width: min(900px, 100%); }
.battle-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding-right: 42px; }
.battle-heading h2 { margin-bottom: 5px; }
.battle-heading p:last-child { margin: 0; max-width: 650px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.battle-limits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 18px 0; }
.battle-limits > div { display: grid; gap: 5px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: #f7f8f9; }
.battle-limits span { color: var(--muted); font-size: 10px; }
.battle-limits strong { font-size: 14px; }
.battle-list { display: grid; gap: 8px; margin-top: 10px; }
.battle-list-item { width: 100%; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; text-align: left; cursor: pointer; }
.battle-list-item:hover, .battle-list-item.is-active { border-color: #d0a800; background: #fffaf0; }
.battle-list-item__icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: #eef1f3; font-size: 19px; }
.battle-list-item strong, .battle-list-item small, .battle-list-item b { display: block; }
.battle-list-item small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.battle-list-item > span:last-child { text-align: right; }
.battle-list-item b { font-size: 11px; }
.battle-detail { display: grid; gap: 14px; }
.battle-detail__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.battle-detail__head h3 { margin-bottom: 4px; font-size: 21px; }
.battle-detail__head p:last-child { margin: 0; color: var(--muted); font-size: 11px; }
.battle-timer { min-width: 104px; padding: 9px 10px; border-radius: 11px; background: #252d36; color: #fff; text-align: center; font-variant-numeric: tabular-nums; }
.battle-scoreboard { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: 10px; }
.battle-scoreboard article { display: grid; gap: 4px; padding: 15px; border-radius: 15px; background: #f3f5f6; text-align: center; }
.battle-scoreboard span, .battle-scoreboard small { color: var(--muted); font-size: 10px; }
.battle-scoreboard b { font-size: 30px; color: #725700; }
.battle-versus { display: grid; place-items: center; color: var(--muted); font-size: 11px; font-weight: 900; }
.battle-roll-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.battle-roll-columns h4 { margin: 0 0 7px; font-size: 12px; }
.battle-rolls { display: grid; gap: 5px; }
.battle-roll { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 7px; min-height: 36px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.battle-roll__number { color: var(--muted); font-size: 10px; }
.battle-dice { display: flex; gap: 4px; }
.battle-dice i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: #26313b; color: #fff; font-style: normal; font-size: 11px; font-weight: 900; }
.battle-roll > strong { color: #735900; font-size: 11px; }

.battle-roll-chain { display: flex; align-items: center; gap: 5px; min-width: 0; overflow-x: auto; padding: 2px 0; }
.battle-roll-stage { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.battle-roll-stage > small { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #eef1f3; color: var(--muted); font-size: 8px; }
.battle-roll-stage em { color: #725700; font-size: 9px; font-style: normal; font-weight: 900; }
.battle-roll-arrow { color: var(--muted); font-size: 10px; }
.battle-roll.is-bust { background: #fff3f2; }
.battle-roll.is-bust > strong { color: #a23f39; }
.battle-dice i.is-kept { background: #a77f00; }
.battle-turn-panel { display: grid; gap: 12px; padding: 14px; border: 1px solid #d7bd5a; border-radius: 15px; background: #fffaf0; }
.battle-turn-panel__head { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.battle-turn-panel__head > div { display: grid; gap: 3px; padding: 10px; border-radius: 11px; background: #fff; }
.battle-turn-panel__head span { color: var(--muted); font-size: 10px; }
.battle-turn-panel__head strong { font-size: 17px; }
.battle-turn-hint { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.battle-current-dice { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.battle-die-button { display: grid; place-items: center; width: 58px; height: 58px; padding: 0; border: 2px solid transparent; border-radius: 14px; background: #27313b; color: #fff; cursor: pointer; box-shadow: 0 5px 0 #111820; transition: transform .12s ease, border-color .12s ease, background .12s ease; }
.battle-die-button span { font-size: 22px; font-weight: 900; }
.battle-die-button:hover { transform: translateY(-2px); }
.battle-die-button.is-selected { border-color: #ffe27a; background: #9b7500; transform: translateY(-4px); box-shadow: 0 7px 0 #5c4500; }
.battle-selection-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 9px 10px; border-radius: 10px; background: #fff; font-size: 11px; }
.battle-selection-summary > span:last-child { color: #9b3f39; text-align: right; }
.battle-selection-summary > span:last-child.is-valid { color: #2d7445; }
.battle-turn-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.battle-turn-actions .button { min-height: 46px; }
.battle-scoring-rules { border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.battle-scoring-rules summary { padding: 11px 13px; cursor: pointer; font-size: 11px; font-weight: 900; }
.battle-scoring-rules > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; padding: 0 13px 13px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.battle-no-rolls { display: block; padding: 17px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); font-size: 11px; text-align: center; }
.battle-result { padding: 12px; border-radius: 12px; background: #eef1f3; font-size: 12px; font-weight: 800; line-height: 1.45; }
.battle-result.is-waiting { background: #fff4bd; color: #5f4900; }
.battle-result.is-win { background: #e3f4e8; color: #28623c; }
.battle-result.is-loss { background: #fde8e7; color: #8b3935; }
.battle-roll-button { min-height: 50px; }
.battle-rule-note { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
@media (max-width: 1200px) { .topbar { grid-template-columns: minmax(180px, 230px) minmax(220px, 1fr) auto auto; } #resetView { display: none; } }
@media (max-width: 900px) { .battle-nav-button { font-size: 0; width: 58px; padding: 0; } .battle-nav-button::before { content: '⚔️'; font-size: 18px; } .battle-nav-button .battle-badge { position: absolute; top: 4px; right: 4px; font-size: 9px; } }
@media (max-width: 760px) { .topbar { grid-template-columns: 54px 1fr 48px 56px; } .battle-nav-button { width: 48px; min-width: 48px; } }
@media (max-width: 620px) { .battle-turn-panel__head, .battle-turn-actions, .battle-scoring-rules > div { grid-template-columns: 1fr; } .battle-die-button { width: 52px; height: 52px; } .battle-selection-summary { display: grid; } .battle-selection-summary > span:last-child { text-align: left; } .battle-heading { display: grid; } .battle-heading .button { width: fit-content; } .battle-limits { grid-template-columns: 1fr; } .battle-scoreboard { grid-template-columns: 1fr; } .battle-versus { height: 20px; } .battle-roll-columns { grid-template-columns: 1fr; } .battle-list-item { grid-template-columns: 34px 1fr; } .battle-list-item > span:last-child { grid-column: 2; text-align: left; } .battle-detail__head { display: grid; } }

/* v1.5.4: contested territories */
.territory-popup__battle { margin-top: 5px; padding: 6px 8px; border-radius: 9px; background: #fde2e2; color: #a71919; font-size: 11px; font-weight: 900; }

/* v1.6.0 — каталог карточек и магазин */
.topbar { grid-template-columns: minmax(190px,260px) minmax(240px,1fr) auto auto auto auto auto; }
.top-nav-button { white-space: nowrap; }
.top-nav-button > span:first-child { margin-right: 4px; }
.game-card__expiry { position: absolute; right: 14px; bottom: 14px; padding: 4px 7px; border-radius: 999px; background: rgba(255,255,255,.2); font-size: 9px; font-weight: 900; }
.game-card__expiry.is-limited { background: rgba(30,20,10,.32); }
.shop-shell { z-index: 72; }
.shop-modal-card { width: min(920px,100%); }
.shop-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.shop-heading h2 { margin: 2px 0 5px; }
.shop-heading p:last-child { max-width: 650px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.shop-balance { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; padding: 12px 15px; border-radius: 14px; background: #fff4b5; color: #4d3b00; }
.shop-balance span { font-size: 11px; font-weight: 800; }
.shop-balance strong { font-size: 19px; }
.shop-cards-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.shop-card { display: grid; grid-template-columns: 130px 1fr; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.shop-card__visual { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 230px; padding: 18px; background: radial-gradient(circle at 75% 15%,rgba(255,255,255,.65),transparent 28%),linear-gradient(145deg,var(--card-a),var(--card-b)); color: #fff; }
.shop-card__visual span { display: grid; place-items: center; width: 76px; height: 76px; border: 1px solid rgba(255,255,255,.38); border-radius: 50%; background: rgba(255,255,255,.16); font-size: 35px; }
.shop-card__visual small { font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; text-align: center; }
.shop-card__visual img { display: block; width: 100%; max-width: 150px; max-height: 150px; object-fit: contain; filter: drop-shadow(0 10px 16px rgba(15,23,42,.25)); }
.shop-card__copy { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 16px; }
.shop-card__copy h3 { margin: 0 0 4px; font-size: 17px; }
.shop-card__copy p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.shop-card__copy dl { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.shop-card__copy dl div { padding: 6px 8px; border-radius: 9px; background: #f1f3f5; }
.shop-card__copy dt { color: var(--muted); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.shop-card__copy dd { margin: 2px 0 0; font-size: 11px; font-weight: 800; }
.shop-card__description { flex: 1; }
.shop-card__buy { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.shop-card__buy strong { font-size: 14px; }
.shop-card__buy .button { min-height: 38px; padding: 0 12px; }

@media (max-width: 1350px) {
  .topbar { grid-template-columns: minmax(180px,230px) minmax(220px,1fr) auto auto auto auto; }
  #resetView { display: none; }
}
@media (max-width: 1080px) {
  .topbar { grid-template-columns: minmax(170px,210px) minmax(190px,1fr) 52px 52px 52px auto; }
  .fortune-nav-button, .shop-nav-button, .battle-nav-button { width: 52px; min-width: 52px; padding: 0; font-size: 0; }
  .fortune-nav-button > span:first-child, .shop-nav-button > span:first-child, .battle-nav-button > span:first-child { margin: 0; font-size: 18px; }
  .battle-nav-button::before { content: none; }
}
@media (max-width: 760px) {
  .topbar { grid-template-columns: 54px minmax(0,1fr) 56px; grid-template-rows: 56px 42px; grid-template-areas: "brand search account" "fortune shop battles"; gap: 7px 8px; }
  .brand { grid-area: brand; }
  .search { grid-area: search; }
  .account-button { grid-area: account; }
  #fortuneButton { grid-area: fortune; }
  #shopButton { grid-area: shop; }
  #battlesButton { grid-area: battles; }
  .fortune-nav-button, .shop-nav-button, .battle-nav-button { width: auto; min-width: 0; height: 42px; padding: 0 8px; font-size: 10px; }
  .fortune-nav-button > span:first-child, .shop-nav-button > span:first-child, .battle-nav-button > span:first-child { margin-right: 3px; font-size: 15px; }
  .panel--layers { top: 126px; max-height: calc(100vh - 166px); }
  .floating-button { top: 126px; }
  .maplibregl-ctrl-top-right { top: 120px; }
  .shop-cards-grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .shop-heading { display: grid; }
  .shop-card { grid-template-columns: 100px 1fr; }
  .shop-card__visual { min-height: 205px; padding: 12px; }
  .shop-card__visual span { width: 62px; height: 62px; font-size: 28px; }
  .shop-card__buy { align-items: stretch; flex-direction: column; }
  .shop-card__buy .button { width: 100%; }
}
.game-card__expiry { top: 48px; bottom: auto; }


/* v1.6.1 — колесо фортуны и безопасная шапка магазина */
.modal-heading-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.modal-heading-close { flex: 0 0 auto; border: 1px solid var(--line); background: #fff; }
.shop-heading { align-items: center; }
.fortune-shell { z-index: 74; }
.fortune-modal-card { width: min(1040px, 100%); overflow-x: hidden; }
.fortune-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.fortune-heading h2 { margin: 2px 0 5px; }
.fortune-heading p:last-child { max-width: 620px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.fortune-layout { display: grid; grid-template-columns: minmax(380px, 1.08fr) minmax(270px, .68fr); align-items: center; gap: 28px; }
.fortune-wheel-wrap { position: relative; width: min(100%, 620px); aspect-ratio: 1; margin-inline: auto; display: grid; place-items: center; }
.fortune-wheel { position: relative; width: 100%; height: 100%; display: grid; place-items: center; filter: drop-shadow(0 18px 28px rgba(41, 84, 126, .12)); }
.fortune-wheel.is-prize { animation: fortuneWheelPrize .95s ease; }
.fortune-wheel::before { content: ''; position: absolute; inset: 7%; border-radius: 50%; background: radial-gradient(circle, rgba(44,208,255,.14), rgba(255,255,255,0) 68%); filter: blur(22px); pointer-events: none; }
.fortune-wheel svg { width: 100%; height: 100%; overflow: visible; }
.fortune-wheel__rotor { transform-origin: 210px 210px; transition: transform 11.2s cubic-bezier(.12,.72,.08,1); }
.fortune-wheel__shell { fill: transparent; stroke: rgba(120, 228, 255, .28); stroke-width: 1.5; }
.fortune-wheel__backdrop { stroke: rgba(255,255,255,0); stroke-width: 0; }
.fortune-wheel__track { fill: transparent; }
.fortune-sector__shape { stroke: rgba(7, 16, 25, .96); stroke-width: 4; stroke-linejoin: round; filter: drop-shadow(0 0 12px var(--fortune-sector-glow, rgba(95,127,165,.35))); }
.fortune-sector__edge { fill: none; stroke: rgba(255,255,255,.2); stroke-width: 1.2; stroke-linejoin: round; }
.fortune-sector__shine { opacity: .72; }
.fortune-sector__icon { fill: #fffef8; font-size: 18px; font-weight: 900; paint-order: stroke; stroke: rgba(0,0,0,.48); stroke-width: 2px; }
.fortune-sector__title { fill: #fff; font-size: 8.8px; font-weight: 900; letter-spacing: .08em; paint-order: stroke; stroke: rgba(4,9,16,.7); stroke-width: 2.3px; text-transform: uppercase; }
.fortune-wheel__inner-cut { fill: #f7fbff; stroke: none; }
.fortune-wheel__center-core { stroke: rgba(255,255,255,.06); stroke-width: 2; }
.fortune-wheel__splash-aura { fill: rgba(116, 225, 255, .12); }
.fortune-wheel__splash-ring { fill: none; stroke: url(#fortuneSplashRing); stroke-width: 10; opacity: .95; filter: url(#fortuneSplashShadow); }
.fortune-wheel__splash-frame { fill: url(#fortuneSplashPlate); filter: url(#fortuneSplashShadow); }
.fortune-wheel__splash { filter: url(#fortuneSplashShadow); }
.fortune-wheel__splash-stroke { fill: none; stroke: rgba(255,255,255,.78); stroke-width: 2.5; }
.fortune-wheel__brand { fill: #fff; font-size: 58px; font-weight: 950; letter-spacing: .04em; }
.fortune-wheel__brand-sub { fill: #86d8ff; font-size: 11px; font-weight: 900; letter-spacing: .22em; }
.fortune-pointer { position: absolute; z-index: 5; top: -10px; left: 50%; width: 0; height: 0; transform: translateX(-50%); background: transparent; box-shadow: none; }
.fortune-pointer::after { content: ''; position: absolute; left: 50%; top: 0; width: 0; height: 0; transform: translateX(-50%); border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 28px solid #10141f; filter: drop-shadow(0 5px 10px rgba(0, 0, 0, .28)); }
.fortune-wheel-center { display: none; }
.fortune-panel { display: grid; gap: 14px; }
.fortune-balance { display: grid; gap: 4px; padding: 18px; border-radius: 20px; background: linear-gradient(135deg,#fff0a3,#f4d25a); color: #4d3b00; box-shadow: 0 18px 28px rgba(255,204,0,.16); }
.fortune-balance span { font-size: 10px; font-weight: 800; }
.fortune-balance strong { font-size: 24px; }
.fortune-result { min-height: 110px; display: grid; align-content: center; gap: 6px; padding: 18px; border: 1px solid rgba(109,126,150,.22); border-radius: 20px; background: linear-gradient(180deg,#f8fbff,#eef4fb); font-size: 12px; line-height: 1.5; }
.fortune-result strong { font-size: 16px; }
.fortune-result span { color: var(--muted); }
.fortune-result.is-prize { animation: fortunePrizeCard .95s ease; border-color: rgba(242, 196, 36, .4); box-shadow: 0 16px 28px rgba(255, 204, 0, .16); }
.fortune-balance.is-prize { animation: fortuneBalancePrize .95s ease; }
@keyframes fortuneWheelPrize {
  0% { transform: scale(1); filter: drop-shadow(0 18px 28px rgba(41, 84, 126, .12)); }
  35% { transform: scale(1.035); filter: drop-shadow(0 22px 34px rgba(85, 192, 255, .2)); }
  100% { transform: scale(1); filter: drop-shadow(0 18px 28px rgba(41, 84, 126, .12)); }
}
@keyframes fortunePrizeCard {
  0% { transform: scale(.985); }
  32% { transform: scale(1.018); }
  65% { transform: scale(1.006); }
  100% { transform: scale(1); }
}
@keyframes fortuneBalancePrize {
  0% { transform: scale(1); box-shadow: 0 18px 28px rgba(255,204,0,.16); }
  35% { transform: scale(1.02); box-shadow: 0 22px 34px rgba(255,204,0,.3); }
  100% { transform: scale(1); box-shadow: 0 18px 28px rgba(255,204,0,.16); }
}
.fortune-spin { min-height: 58px; font-size: 16px; }
.fortune-note { margin: 2px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
@media (max-width: 900px) {
  .fortune-layout { grid-template-columns: 1fr; gap: 16px; }
  .fortune-wheel-wrap { width: min(92vw, 500px); }
  .fortune-panel { grid-template-columns: 1fr 1fr; }
  .fortune-balance, .fortune-result, .fortune-note { grid-column: 1 / -1; }
}
@media (max-width: 660px) {
  .shop-heading, .fortune-heading { display: grid; grid-template-columns: 1fr auto; align-items: start; }
  .shop-heading > div:first-child, .fortune-heading > div:first-child { min-width: 0; }
  .modal-heading-actions { grid-column: 1 / -1; justify-content: space-between; }
  .fortune-heading .modal-heading-close { grid-column: 2; grid-row: 1; }
  .fortune-panel { grid-template-columns: 1fr; }
  .fortune-balance, .fortune-result, .fortune-note { grid-column: auto; }
  .fortune-wheel-wrap { width: min(94vw, 430px); }
}



/* 1.6.4 — применение расходуемых карточек из инвентаря */
.game-card:focus-visible { outline: 3px solid rgba(255, 204, 0, .55); outline-offset: 4px; border-radius: 22px; }
.game-card__back { gap: 7px; }
.game-card__back h4 { margin-top: 10px; }
.game-card__back dl { gap: 6px; margin-top: 7px; }
.game-card__back dl div { padding-bottom: 5px; }
.game-card__use { width: 100%; min-height: 38px; margin-top: auto; border: 0; border-radius: 11px; background: #ffca05; color: #3d3100; font: inherit; font-size: 12px; font-weight: 900; cursor: pointer; }
.game-card__use:hover { filter: brightness(.97); }
.game-card__use:focus-visible { outline: 3px solid rgba(255,255,255,.55); outline-offset: 2px; }
.game-card__passive { margin-top: auto; color: rgba(255,255,255,.55); font-size: 10px; text-align: center; }
.card-use-modal-card { width: min(480px, 100%); }
.card-use-heading { padding-right: 44px; }
.card-use-heading h2 { margin: 4px 0 8px; }
.card-use-heading p:last-child { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.card-use-form { display: grid; gap: 13px; margin-top: 20px; }
.card-use-color-field input[type="color"] { width: 100%; height: 54px; padding: 4px; cursor: pointer; }
.card-use-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.card-use-actions .button { min-height: 44px; }
@media (max-width: 420px) {
  .card-use-actions { grid-template-columns: 1fr; }
  .game-card { min-height: 285px; }
}


/* 1.6.5 — компактная обратная сторона и сохранение переворота */
.game-card__back {
  justify-content: flex-start;
  gap: 8px;
}
.game-card__back h4 {
  flex: 0 0 auto;
  margin: 10px 0 0;
}
.game-card__back > p {
  display: -webkit-box;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
}
.game-card__back dl {
  flex: 0 0 auto;
  width: 100%;
  margin: 2px 0 0;
}
.game-card__use {
  flex: 0 0 auto;
  min-height: 42px;
  margin-top: 2px;
  padding: 9px 12px;
}
.game-card__passive {
  flex: 0 0 auto;
  margin-top: 2px;
}
@media (max-width: 540px) {
  .game-card__back > p { -webkit-line-clamp: 5; }
}

/* v1.6.6 — боевые карточки до первого хода */
.battle-score-bonus { color: #8a6500 !important; font-weight: 900; }
.battle-bonus-panel { display: grid; gap: 11px; padding: 14px; border: 1px solid #cab0f4; border-radius: 15px; background: #f8f3ff; }
.battle-bonus-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.battle-bonus-panel__head > div { display: grid; gap: 3px; }
.battle-bonus-panel__head span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.battle-bonus-panel__head strong { font-size: 15px; }
.battle-bonus-panel__head p { margin: 0; color: var(--muted); font-size: 10px; text-align: right; }
.battle-bonus-cards { display: flex; flex-wrap: wrap; gap: 8px; }
.battle-bonus-card { display: grid; grid-template-columns: 34px auto; grid-template-rows: auto auto; align-items: center; column-gap: 9px; min-width: 155px; padding: 9px 11px; border: 1px solid color-mix(in srgb, var(--bonus-a) 50%, #fff); border-radius: 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--bonus-a) 13%, #fff), color-mix(in srgb, var(--bonus-b) 11%, #fff)); color: var(--ink); text-align: left; cursor: pointer; transition: transform .14s ease, opacity .14s ease; }
.battle-bonus-card:hover:not(:disabled) { transform: translateY(-2px); }
.battle-bonus-card:disabled { cursor: not-allowed; opacity: .55; }
.battle-bonus-card > span { grid-row: 1 / 3; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(145deg, var(--bonus-a), var(--bonus-b)); color: #fff; font-size: 18px; font-weight: 900; }
.battle-bonus-card strong { font-size: 15px; line-height: 1; }
.battle-bonus-card small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.battle-bonus-card.is-loading { animation: battleBonusPulse .7s ease-in-out infinite alternate; }
.battle-bonus-empty { display: block; width: 100%; padding: 12px; border: 1px dashed #cab0f4; border-radius: 10px; color: var(--muted); font-size: 10px; text-align: center; }
.battle-bonus-hint { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
@keyframes battleBonusPulse { to { opacity: .35; } }
@media (max-width: 620px) {
  .battle-bonus-panel__head { display: grid; }
  .battle-bonus-panel__head p { text-align: left; }
  .battle-bonus-card { width: 100%; }
}

/* v1.7.0 — боевой ящик и открытие карточек */
.topbar { grid-template-columns: minmax(190px,260px) minmax(220px,1fr) auto auto auto auto auto auto; }
.case-shell { z-index: 75; }
.case-modal-card { width: min(980px, 100%); overflow-x: hidden; }
.case-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.case-heading h2 { margin: 2px 0 5px; }
.case-heading p:last-child { max-width: 670px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.case-type-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; }
.case-type-tab { border: 1px solid var(--line); border-radius: 999px; background: #f4f6f8; color: #334155; padding: 10px 14px; font: inherit; font-weight: 800; cursor: pointer; transition: .18s ease; }
.case-type-tab.is-active { background: #111827; color: #fff; border-color: #111827; box-shadow: 0 10px 24px rgba(17,24,39,.18); }
.case-showcase { display: grid; grid-template-columns: minmax(320px,1fr) minmax(230px,.55fr); align-items: center; gap: 20px; }
.case-art { position: relative; min-height: 290px; overflow: hidden; border-radius: 20px; background: radial-gradient(circle at 50% 44%,#263443,#080c10 72%); }
.case-art::after { position: absolute; inset: auto 8% 8% 8%; height: 20%; border-radius: 50%; background: rgba(0,0,0,.55); filter: blur(18px); content: ''; }
.case-art img { position: absolute; z-index: 1; object-fit: contain; pointer-events: none; user-select: none; }
.case-art__chest { width: 72%; height: 92%; left: 8%; top: 3%; }
.case-art__key { width: 43%; height: 58%; right: -3%; bottom: -2%; transform: rotate(-9deg); filter: drop-shadow(0 12px 14px rgba(0,0,0,.46)); }
.case-panel { display: grid; gap: 12px; }
.case-key-count { display: grid; gap: 4px; padding: 14px; border-radius: 14px; background: linear-gradient(135deg,#e9edf1,#cbd2da); color: #1b2732; }
.case-key-count span { font-size: 10px; font-weight: 800; }
.case-key-count strong { font-size: 28px; }
.case-result { min-height: 82px; display: grid; align-content: center; gap: 5px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #f5f7f8; font-size: 12px; line-height: 1.45; }
.case-result strong { font-size: 16px; }
.case-result span { color: var(--muted); }
.case-open-button { min-height: 54px; font-size: 15px; }
.case-reel-viewport { position: relative; height: 178px; margin-top: 18px; overflow: hidden; border: 2px solid #2d3945; border-radius: 17px; background: linear-gradient(180deg,#17212b,#0b1015); box-shadow: inset 0 0 35px rgba(0,0,0,.55); }
.case-reel-viewport::before, .case-reel-viewport::after { position: absolute; z-index: 3; top: 0; bottom: 0; width: 18%; content: ''; pointer-events: none; }
.case-reel-viewport::before { left: 0; background: linear-gradient(90deg,#0b1015,transparent); }
.case-reel-viewport::after { right: 0; background: linear-gradient(-90deg,#0b1015,transparent); }
.case-reel-marker { position: absolute; z-index: 5; top: 0; bottom: 0; left: 50%; width: 3px; transform: translateX(-50%); background: #ffd21a; box-shadow: 0 0 12px rgba(255,210,26,.8); pointer-events: none; }
.case-reel-marker::before, .case-reel-marker::after { position: absolute; left: 50%; width: 0; height: 0; transform: translateX(-50%); border-left: 9px solid transparent; border-right: 9px solid transparent; content: ''; }
.case-reel-marker::before { top: 0; border-top: 13px solid #ffd21a; }
.case-reel-marker::after { bottom: 0; border-bottom: 13px solid #ffd21a; }
.case-reel { height: 100%; display: flex; align-items: center; gap: 10px; width: max-content; padding: 12px 50vw; will-change: transform; }
.case-reel-idle { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: rgba(255,255,255,.55); font-size: 12px; white-space: nowrap; }
.case-reel-item { flex: 0 0 132px; }
.case-reel-item.is-winner .case-reward-card { box-shadow: inherit; }
.case-rewards-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 18px 0 10px; }
.case-rewards-heading h3 { margin: 2px 0 0; font-size: 16px; }
.case-rewards { display: grid; grid-template-columns: repeat(7,minmax(95px,1fr)); gap: 9px; }
.case-reward-card { min-width: 0; display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 138px; padding: 12px 8px; overflow: hidden; border: 1px solid color-mix(in srgb,var(--case-a) 55%,#fff); border-radius: 14px; background: linear-gradient(150deg,color-mix(in srgb,var(--case-a) 88%,#101820),var(--case-b)); color: #fff; text-align: center; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.case-reward-card__symbol { display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid rgba(255,255,255,.35); border-radius: 14px; background: rgba(255,255,255,.12); font-size: 25px; font-weight: 900; }
.case-reward-card__image { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.35); overflow: hidden; }
.case-reward-card__image img { width: 100%; height: 100%; object-fit: contain; }
.case-reward-card strong { width: 100%; overflow: hidden; font-size: 11px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.case-reward-card small { color: rgba(255,255,255,.72); font-size: 9px; }
.case-reward-card--reel { min-height: 148px; border-radius: 11px; }
.case-reward-card--reel .case-reward-card__symbol { width: 62px; height: 62px; font-size: 28px; }
.case-reward-card--reel .case-reward-card__image { width: 72px; height: 72px; }
@media (max-width: 1350px) {
  .topbar { grid-template-columns: minmax(170px,220px) minmax(190px,1fr) auto auto auto auto auto; }
  #resetView { display: none; }
}
@media (max-width: 1080px) {
  .topbar { grid-template-columns: minmax(155px,195px) minmax(170px,1fr) 48px 48px 48px 48px auto; }
  .case-nav-button, .fortune-nav-button, .shop-nav-button, .battle-nav-button { width: 48px; min-width: 48px; padding: 0; font-size: 0; }
  .case-nav-button > span:first-child, .fortune-nav-button > span:first-child, .shop-nav-button > span:first-child, .battle-nav-button > span:first-child { margin: 0; font-size: 17px; }
}
@media (max-width: 760px) {
  .topbar { grid-template-columns: 54px minmax(0,1fr) 56px; grid-template-rows: 56px 42px; grid-template-areas: "brand search account" "case fortune shop battles"; gap: 7px 6px; }
  #caseButton { grid-area: case; }
  #fortuneButton { grid-area: fortune; }
  #shopButton { grid-area: shop; }
  #battlesButton { grid-area: battles; }
  .case-nav-button, .fortune-nav-button, .shop-nav-button, .battle-nav-button { width: auto; min-width: 0; height: 42px; padding: 0 5px; font-size: 9px; }
  .case-nav-button > span:first-child, .fortune-nav-button > span:first-child, .shop-nav-button > span:first-child, .battle-nav-button > span:first-child { margin-right: 2px; font-size: 14px; }
  .case-showcase { grid-template-columns: 1fr; }
  .case-art { min-height: 245px; }
  .case-panel { grid-template-columns: 1fr 1fr; }
  .case-key-count, .case-result { grid-column: 1 / -1; }
  .case-rewards { grid-template-columns: repeat(4,minmax(0,1fr)); }
}
@media (max-width: 520px) {
  .case-heading { display: grid; grid-template-columns: 1fr auto; }
  .case-showcase { gap: 12px; }
  .case-art { min-height: 205px; }
  .case-panel { grid-template-columns: 1fr; }
  .case-key-count, .case-result { grid-column: auto; }
  .case-reel-viewport { height: 156px; }
  .case-reel-item { flex-basis: 112px; }
  .case-reward-card--reel { min-height: 126px; }
  .case-rewards { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* v1.7.1 — стабильная 3D-анимация длинного инвентаря */
.cards-grid > .game-card { align-self: start; }
.game-card.is-flipped { z-index: 2; }


/* v1.7.2: territory details and public player profile */
.territory-popup .maplibregl-popup-content { min-width: 260px; }
.territory-card { gap: 7px; }
.territory-info-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 12px; font-size: 12px; line-height: 1.25; }
.territory-info-row span { color: #68727d; }
.territory-info-row strong { color: #1f2933; font-weight: 900; text-align: right; }
.territory-owner-link { border: 0; padding: 0; background: transparent; color: #5e45a0; font: inherit; font-weight: 900; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.territory-owner-link:hover { color: #3f2d75; }
.public-profile-card { width: min(480px, 100%); overflow: hidden; position: relative; isolation: isolate; transition: background .25s ease, border-color .25s ease, box-shadow .25s ease; }
.public-profile-card > *:not(.public-profile-legend-fx) { position: relative; z-index: 2; }
#publicProfileCard > #closePublicProfile { position: absolute; z-index: 8; top: 4px; right: clamp(6px, 1.4vw, 12px); width: clamp(34px, 4vw, 40px); height: clamp(34px, 4vw, 40px); display: grid; place-items: center; padding: 0; line-height: 1; font-size: clamp(20px, 2.2vw, 24px); }
.public-profile-card .eyebrow { padding-right: 60px; }
.public-profile-legend-fx { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; }
.public-profile-legend-badge { width: fit-content; margin: 7px 0 0; padding: 6px 10px; border: 1px solid rgba(202, 154, 0, .32); border-radius: 999px; background: linear-gradient(120deg, rgba(255,249,211,.96), rgba(255,217,73,.38), rgba(255,250,224,.96)); color: #725400; font-size: 10px; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 6px 18px rgba(183, 132, 0, .14); }
.public-profile-legend-badge span { margin-right: 5px; color: #c08a00; }

/* Public profile rarity presentation follows the equipped avatar rarity. */
.public-profile-card.is-profile-common {
  background: linear-gradient(145deg, #f4f5f7 0%, #e8eaed 100%);
  border-color: rgba(125, 133, 145, .2);
  box-shadow: 0 24px 62px rgba(47, 55, 66, .2);
}
.public-profile-card.is-profile-rare {
  background: linear-gradient(145deg, #f4f8ff 0%, #e4eeff 52%, #edf5ff 100%);
  border: 2px solid #3b82f6;
  box-shadow: 0 26px 66px rgba(37, 99, 235, .16);
}
.public-profile-card.is-profile-rare .public-profile-avatar {
  border: 2px solid #3b82f6;
  box-shadow: 0 0 0 1px rgba(147, 197, 253, .42);
}

.public-profile-card.is-profile-epic,
.public-profile-card.is-profile-mythic,
.public-profile-card.is-profile-city-legend {
  --public-frame-a: #a855f7;
  --public-frame-b: #d8b4fe;
  --public-frame-c: #7e22ce;
  --public-ray: rgba(216, 180, 254, .22);
  --public-frame-size: 3px;
  border: var(--public-frame-size) solid transparent;
  animation: publicProfileEntrance .72s cubic-bezier(.2,.8,.2,1) both;
}
.public-profile-card.is-profile-epic {
  --public-frame-a: #7e22ce;
  --public-frame-b: #d8b4fe;
  --public-frame-c: #a855f7;
  --public-ray: rgba(216, 180, 254, .22);
  --public-frame-size: 3px;
  background: linear-gradient(145deg, #fcf8ff 0%, #f0e5ff 58%, #f8f1ff 100%);
  box-shadow: 0 0 0 2px rgba(216, 180, 254, .65), 0 26px 68px rgba(126, 34, 206, .18);
}
.public-profile-card.is-profile-mythic {
  --public-frame-a: #991b1b;
  --public-frame-b: #fb7185;
  --public-frame-c: #ef4444;
  --public-ray: rgba(251, 113, 133, .26);
  --public-frame-size: 6px;
  border-color: #ef4444;
  background: linear-gradient(145deg, #fff1f2 0%, #f9cdd2 52%, #ffe0e3 100%);
  background-clip: padding-box;
  box-shadow: 0 0 30px rgba(239, 68, 68, .2), 0 30px 80px rgba(153, 27, 27, .26);
  animation: publicProfileEntrance .72s cubic-bezier(.2,.8,.2,1) both, publicMythicOuterFrame 4.1s ease-in-out .72s infinite;
}
.public-profile-card.is-profile-city-legend {
  --public-frame-a: #b77900;
  --public-frame-b: #fff1a6;
  --public-frame-c: #ffd700;
  --public-ray: rgba(255, 229, 105, .34);
  --public-frame-size: 5px;
  background: linear-gradient(145deg, #fffdf5 0%, #fff4c7 50%, #fff9e6 100%);
  box-shadow: 0 0 0 3px rgba(255, 215, 0, .78), 0 0 0 7px rgba(255, 241, 166, .42), 0 30px 78px rgba(130, 91, 0, .24), 0 0 34px rgba(255, 215, 0, .08);
}

/* The border shimmers forever, but stays on the border only. No rotating beam over the profile. */
.public-profile-card.is-profile-epic::after,
.public-profile-card.is-profile-mythic::after,
.public-profile-card.is-profile-city-legend::after {
  content: '';
  position: absolute;
  z-index: 5;
  inset: -1px;
  border-radius: inherit;
  padding: var(--public-frame-size);
  pointer-events: none;
  background: linear-gradient(115deg, var(--public-frame-a), var(--public-frame-b), #fff, var(--public-frame-c), var(--public-frame-a));
  background-size: 320% 320%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: publicProfileFrameFlow 3.4s linear infinite;
}
.public-profile-card.is-profile-mythic::after { display: none; }
.public-profile-card.is-profile-epic::after { animation-duration: 4.8s; opacity: .8; }

/* Temporary opening sheen: it crosses once and disappears. */
.public-profile-card.is-profile-epic::before,
.public-profile-card.is-profile-mythic::before,
.public-profile-card.is-profile-city-legend::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: -28%;
  bottom: -28%;
  left: -40%;
  width: 28%;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-190%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, var(--public-ray), rgba(255,255,255,.36), transparent);
  filter: blur(1px);
  animation: publicProfileIntroRay 1.35s ease-out .08s 1 forwards;
}
.public-profile-card.is-profile-mythic::before { width: 22%; animation-duration: 1.18s; }
.public-profile-card.is-profile-epic::before { width: 17%; animation-duration: 1.02s; }

.public-profile-card.is-profile-city-legend .public-profile-avatar {
  border: 5px solid #e2b400;
  box-shadow: 0 0 0 2px rgba(255, 238, 143, .65), 0 0 30px rgba(255, 193, 7, .28);
  animation: publicLegendAvatarFrame 2.8s ease-in-out infinite;
}
.public-profile-card.is-profile-mythic .public-profile-avatar {
  border: 6px solid #ef4444;
  box-shadow: 0 0 0 2px rgba(251, 113, 133, .58), 0 0 28px rgba(239, 68, 68, .24);
  animation: publicMythicAvatarFrame 3.4s ease-in-out infinite;
}
.public-profile-card.is-profile-epic .public-profile-avatar {
  border: 3px solid #a855f7;
  box-shadow: 0 0 0 1px rgba(216, 180, 254, .36), 0 0 14px rgba(168, 85, 247, .12);
  animation: publicEpicAvatarFrame 4s ease-in-out infinite;
}
.public-profile-card.is-profile-city-legend .public-profile-main h2 { text-shadow: 0 0 16px rgba(255, 193, 7, .2); }
.public-profile-card.is-profile-mythic .public-profile-main h2 { text-shadow: 0 0 13px rgba(239, 68, 68, .14); }
.public-profile-card.is-profile-epic .public-profile-main h2 { text-shadow: 0 0 10px rgba(168, 85, 247, .1); }

@keyframes publicProfileEntrance {
  0% { transform: scale(.978); filter: brightness(.98); }
  55% { transform: scale(1.006); filter: brightness(1.018); }
  100% { transform: scale(1); filter: brightness(1); }
}
@keyframes publicProfileFrameFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes publicMythicOuterFrame {
  0%, 100% { border-color: #dc2626; box-shadow: 0 0 25px rgba(220, 38, 38, .18), 0 30px 80px rgba(153, 27, 27, .24); }
  35% { border-color: #fb7185; box-shadow: 0 0 34px rgba(251, 113, 133, .26), 0 30px 84px rgba(153, 27, 27, .28); }
  68% { border-color: #ef4444; box-shadow: 0 0 30px rgba(239, 68, 68, .23), 0 30px 82px rgba(153, 27, 27, .26); }
}
@keyframes publicProfileIntroRay {
  0% { opacity: 0; transform: translateX(-190%) skewX(-18deg); }
  18% { opacity: .82; }
  78% { opacity: .42; }
  100% { opacity: 0; transform: translateX(560%) skewX(-18deg); }
}
@keyframes publicLegendAvatarFrame {
  0%,100% { border-color: #d5a900; box-shadow: 0 0 0 2px rgba(255,238,143,.55), 0 0 24px rgba(255,193,7,.2); }
  36% { border-color: #fff0a4; box-shadow: 0 0 0 3px rgba(255,245,187,.68), 0 0 34px rgba(255,193,7,.32); }
  68% { border-color: #ffd700; box-shadow: 0 0 0 2px rgba(255,228,92,.6), 0 0 29px rgba(255,193,7,.27); }
}
@keyframes publicMythicAvatarFrame {
  0%,100% { border-color: #dc2626; box-shadow: 0 0 0 1px rgba(251,113,133,.36), 0 0 15px rgba(239,68,68,.12); }
  50% { border-color: #fb7185; box-shadow: 0 0 0 2px rgba(254,202,202,.48), 0 0 23px rgba(239,68,68,.2); }
}
@keyframes publicEpicAvatarFrame {
  0%,100% { border-color: #9333ea; box-shadow: 0 0 0 1px rgba(216,180,254,.28), 0 0 10px rgba(168,85,247,.09); }
  50% { border-color: #c084fc; box-shadow: 0 0 0 1px rgba(233,213,255,.4), 0 0 16px rgba(168,85,247,.14); }
}
@media (prefers-reduced-motion: reduce) {
  .public-profile-card.is-profile-epic,
  .public-profile-card.is-profile-mythic,
  .public-profile-card.is-profile-city-legend,
  .public-profile-card.is-profile-epic::before,
  .public-profile-card.is-profile-mythic::before,
  .public-profile-card.is-profile-city-legend::before,
  .public-profile-card.is-profile-epic::after,
  .public-profile-card.is-profile-mythic::after,
  .public-profile-card.is-profile-city-legend::after,
  .public-profile-card.is-profile-epic .public-profile-avatar,
  .public-profile-card.is-profile-mythic .public-profile-avatar,
  .public-profile-card.is-profile-city-legend .public-profile-avatar { animation: none; }
}
.public-profile-main { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 18px; margin-top: 14px; }
.public-profile-avatar { width: 112px; height: 112px; object-fit: cover; border-radius: 28px; border: 1px solid var(--line); background: #eef1f3; }
.public-profile-main h2 { margin: 0 0 6px; font-size: 26px; }
.public-profile-main p { margin: 0; color: var(--muted); font-size: 13px; }
.public-profile-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.public-profile-stats article { padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: #f7f8f9; }
.public-profile-stats span { display: block; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.public-profile-stats strong { display: block; margin-top: 5px; font-size: 27px; }
.public-profile-note { margin: 14px 0 0; color: var(--muted); font-size: 11px; }

.public-profile-visuals { display: flex; align-items: flex-end; gap: 12px; min-width: 0; }
.public-profile-car { display: block; width: 92px; max-width: 42%; height: auto; padding: 8px; object-fit: contain; object-position: center bottom; border-radius: 20px; background: linear-gradient(180deg, #f5f7f9, #e9edf1); }

.cars-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 14px; padding: 4px 2px 18px; }
.car-inventory-card__image { place-items: center; aspect-ratio: 4 / 3; padding: 14px; }
.car-inventory-card__image img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.car-inventory-card__placeholder { display: grid; place-items: center; width: 100%; height: 100%; font-size: 44px; color: var(--muted); }
.avatar-inventory-actions--single { grid-template-columns: 1fr; }

@media (max-width: 520px) {
  .territory-popup .maplibregl-popup-content { min-width: 230px; }
  #publicProfileCard > #closePublicProfile { top: 4px; right: 5px; width: 34px; height: 34px; font-size: 21px; }
  .public-profile-card .eyebrow { padding-right: 48px; }
  .public-profile-main { grid-template-columns: 84px minmax(0, 1fr); gap: 13px; }
  .public-profile-avatar { width: 84px; height: 84px; border-radius: 22px; }
  .public-profile-main h2 { font-size: 22px; }
  .public-profile-stats { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  #publicProfileCard > #closePublicProfile { top: 3px; right: 3px; width: 32px; height: 32px; font-size: 20px; }
  .public-profile-card .eyebrow { padding-right: 44px; }
}


/* v1.7.3 — сундук со скином и аватары */
.account-avatar.has-avatar-image, .profile-avatar.has-avatar-image {
  background-color: #eef1f3;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  color: transparent;
}
.shop-skin-case { border-color: #d5b88c; background: linear-gradient(180deg,#fffdf8,#fff); }
.shop-skin-case__visual { display: grid; place-items: center; min-height: 230px; padding: 14px; background: radial-gradient(circle at 50% 40%,#fff6dc 0,#f5e8c8 44%,#e7d4ad 100%); }
.shop-skin-case__visual img { display: block; width: 100%; max-width: 190px; max-height: 210px; object-fit: contain; filter: drop-shadow(0 12px 14px rgba(72,43,16,.2)); }
.shop-skin-case__copy { justify-content: space-between; }
.shop-skin-case__badge { display: inline-flex; padding: 4px 8px; margin-bottom: 7px; border-radius: 999px; background: #202832; color: #fff; font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.shop-skin-preview { display: grid; grid-template-columns: 72px minmax(0,1fr); align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: #f6f8fa; }
.shop-skin-preview img { width: 72px; height: 86px; object-fit: contain; object-position: center; border-radius: 12px; background: #edf2f7; }
.shop-skin-preview small, .shop-skin-preview span { display: block; color: var(--muted); font-size: 9px; }
.shop-skin-preview strong { display: block; margin: 2px 0; font-size: 14px; }
@media (max-width: 540px) {
  .shop-skin-case__visual { min-height: 205px; padding: 8px; }
  .shop-skin-case__visual img { max-width: 120px; max-height: 170px; }
  .shop-skin-preview { grid-template-columns: 58px minmax(0,1fr); }
  .shop-skin-preview img { width: 58px; height: 72px; }
}


/* v1.7.4 — правильные пропорции публичного профиля и инвентарь */
.public-profile-card { width: min(540px, 100%); }
.public-profile-main { grid-template-columns: 140px minmax(0, 1fr); align-items: center; gap: 22px; }
.public-profile-avatar {
  width: 140px;
  height: 176px;
  padding: 8px;
  object-fit: contain;
  object-position: center bottom;
  border-radius: 24px;
  background: linear-gradient(180deg, #f5f7f9, #e9edf1);
}
.public-profile-stats { grid-template-columns: 1fr; }
.public-profile-stats article { min-width: 0; }

.inventory-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 14px 0 12px;
  padding: 4px;
  border-radius: 13px;
  background: #eef1f3;
}
.inventory-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}
.inventory-tab.is-active { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(27,35,48,.1); }
.inventory-tab__count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #dde2e6; font-size: 10px; }
.inventory-tab.is-active .inventory-tab__count { background: #f2c600; color: #4b3900; }
.inventory-pane[hidden] { display: none !important; }
.avatars-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 14px; padding: 4px 2px 18px; }
.avatar-inventory-card { overflow: hidden; min-width: 0; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.avatar-inventory-card.is-equipped { border-color: #d5ae00; box-shadow: inset 0 0 0 1px #efd34a; }
.avatar-inventory-card__image { display: grid; place-items: end center; aspect-ratio: 4 / 5; padding: 10px; background: linear-gradient(180deg, #f4f7f9, #e7edf2); }
.avatar-inventory-card__image img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.avatar-inventory-card__body { display: grid; gap: 10px; padding: 12px; }
.avatar-inventory-card__body h4 { margin: 3px 0 0; font-size: 14px; }
.avatar-inventory-card__rarity { color: var(--muted); font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; }
.avatar-equip-button { width: 100%; min-height: 36px; padding: 8px 10px; }

@media (max-width: 520px) {
  .public-profile-main { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; }
  .public-profile-avatar { width: 104px; height: 136px; padding: 6px; border-radius: 20px; }
  .public-profile-car { width: 74px; border-radius: 16px; }
  .public-profile-main h2 { font-size: 22px; }
  .avatars-grid, .cars-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .avatar-inventory-card__body { padding: 10px; }
}
@media (max-width: 380px) {
  .public-profile-main { grid-template-columns: 88px minmax(0, 1fr); }
  .public-profile-visuals { gap: 8px; }
  .public-profile-avatar { width: 88px; height: 116px; }
  .public-profile-car { width: 60px; padding: 6px; }
  .avatars-grid, .cars-grid { grid-template-columns: 1fr; }
}

.shop-skin-case__key-status { margin-top: 8px; font-size: 13px; color: #5b4632; }
.shop-skin-case__key-status strong { color: #1e293b; }


/* v1.7.7 — репутация и распыление аватаров */
.avatar-inventory-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.avatar-reputation-value { color: var(--muted); font-size: 10px; line-height: 1.35; }
.avatar-reputation-value strong { color: #7c3aed; }
.button--danger-soft { border: 1px solid #fecaca; background: #fff1f2; color: #b42335; }
.button--danger-soft:hover { background: #ffe4e6; }
@media (max-width: 560px) { .avatar-inventory-actions { grid-template-columns: 1fr; } }

/* v1.8.2 — авто-кейс, инвентарь авто и публичный профиль */
.reputation-value,
.reputation-display {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  white-space: nowrap;
}
.reputation-star { color: #929aa3; font-weight: 900; }
.reputation-suffix { color: inherit; font-weight: inherit; }
.reputation-display--large { justify-content: flex-start; }
.reputation-display--large .reputation-value { font-size: inherit; }

.public-profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.public-profile-stats strong.reputation-display { display: flex; }

.avatar-inventory-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.avatar-inventory-card__image { flex: 0 0 auto; }
.avatar-inventory-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  gap: 10px;
}
.avatar-inventory-card__meta { min-height: 42px; }
.avatar-reputation-value {
  display: flex;
  align-items: center;
  min-height: 30px;
  color: var(--muted);
}
.avatar-reputation-value strong { color: inherit; }
.avatar-inventory-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: auto;
  min-width: 0;
}
.avatar-inventory-actions .button {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  height: 100%;
  padding: 7px 5px;
  font-size: 10px;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
}

.case-catalog-grid { margin-top: 2px; }
.case-catalog-card { position: relative; align-self: stretch; transition: border-color .16s ease, box-shadow .16s ease; }
.case-catalog-card.is-selected { border-color: #d6ad00; box-shadow: inset 0 0 0 1px #efd34a; }
.case-catalog-card__visual {
  position: relative;
  min-height: 230px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #344454 0, #17212b 45%, #080c10 100%);
}
.case-catalog-card__visual::after {
  position: absolute;
  right: 8%;
  bottom: 8%;
  left: 8%;
  height: 16%;
  border-radius: 50%;
  background: rgba(0,0,0,.48);
  filter: blur(14px);
  content: '';
}
.case-catalog-card__chest {
  position: absolute;
  inset: 8% 7% 7% 7%;
  z-index: 1;
  display: block;
  width: 86%;
  height: 84%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.case-catalog-card__copy { min-height: 230px; }
.case-catalog-card__badge {
  display: inline-flex;
  padding: 4px 8px;
  margin-bottom: 7px;
  border-radius: 999px;
  background: #202832;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.case-catalog-card__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: auto;
}
.case-catalog-card__actions .button { width: 100%; min-width: 0; min-height: 40px; padding: 8px; font-size: 11px; }
.case-opening-area {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.case-opening-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.case-opening-head h3 { margin: 2px 0 5px; font-size: 19px; }
.case-opening-head p:last-child { max-width: 680px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.case-key-count--compact { flex: 0 0 auto; min-width: 96px; padding: 10px 13px; }
.case-key-count--compact strong { font-size: 22px; }

@media (max-width: 760px) {
  .case-catalog-card__copy { min-height: 0; }
  .case-opening-head { align-items: stretch; }
}
@media (max-width: 520px) {
  .avatars-grid, .cars-grid { grid-template-columns: 1fr; gap: 12px; }
  .avatar-inventory-actions .button { font-size: 12px; }
  .public-profile-stats { grid-template-columns: 1fr; }
  .case-opening-head { display: grid; grid-template-columns: 1fr auto; }
  .case-catalog-card__actions { grid-template-columns: 1fr; }
  .case-catalog-card__visual { min-height: 205px; }
}


/* v1.8.3 — bigger public car, no winner highlight, car dismantle */
.public-profile-car { width: 124px; max-width: 46%; padding: 10px; border-radius: 22px; }
@media (max-width: 520px) { .public-profile-car { width: 92px; border-radius: 18px; } }
@media (max-width: 380px) { .public-profile-car { width: 74px; padding: 7px; } }
.case-reel-item.is-winner .case-reward-card { box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }


/* v1.8.4 — каталог кейсов и случайная точка остановки */
.case-catalog-view[hidden], .case-opening-area--detail[hidden] { display: none !important; }
.case-catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.case-catalog-card--simple { display: flex; flex-direction: column; min-width: 0; }
.case-catalog-card--simple .case-catalog-card__visual { min-height: 250px; }
.case-catalog-card--simple .case-catalog-card__copy { display: grid; grid-template-columns: 1fr; gap: 12px; min-height: 0; padding: 14px; }
.case-catalog-card--simple .case-catalog-card__copy h3 { margin: 0; font-size: 17px; text-align: center; }
.case-catalog-card__open { width: 100%; min-height: 42px; }
.case-opening-area--detail { margin-top: 0; padding-top: 0; border-top: 0; }
.case-back-button { margin: 0 0 16px; }
.case-detail-actions { display: flex; justify-content: flex-end; gap: 10px; margin: 0 0 14px; }
.case-detail-actions .button { min-width: 140px; }
@media (max-width: 820px) { .case-catalog-grid { grid-template-columns: 1fr; } .case-catalog-card--simple { display: grid; grid-template-columns: 150px minmax(0, 1fr); } .case-catalog-card--simple .case-catalog-card__visual { min-height: 190px; } }
@media (max-width: 520px) { .case-catalog-card--simple { grid-template-columns: 120px minmax(0, 1fr); } .case-catalog-card--simple .case-catalog-card__visual { min-height: 160px; } .case-detail-actions { display: grid; grid-template-columns: 1fr; } .case-detail-actions .button { width: 100%; min-width: 0; } }


/* v1.8.5 — compact inventory and larger garage in public profile */
#inventorySection .cards-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  padding-bottom: 12px;
}
#inventorySection .game-card {
  min-height: 172px;
  aspect-ratio: .78;
}
#inventorySection .game-card__face {
  padding: 9px;
  border-radius: 14px;
  box-shadow: 0 8px 18px rgba(28,37,47,.18);
}
#inventorySection .game-card__rarity { padding: 3px 5px; font-size: 6px; letter-spacing: .08em; }
#inventorySection .game-card__symbol { width: 48px; height: 48px; font-size: 23px; }
#inventorySection .game-card h4 { margin-bottom: 3px; font-size: 12px; line-height: 1.15; }
#inventorySection .game-card p { font-size: 8px; line-height: 1.25; }
#inventorySection .game-card__number { top: 9px; right: 9px; font-size: 7px; }
#inventorySection .game-card__expiry { font-size: 7px; }
#inventorySection .game-card__back dl { gap: 4px; margin-top: 6px; }
#inventorySection .game-card__back dl div { gap: 5px; padding-bottom: 4px; font-size: 8px; }
#inventorySection .game-card__use,
#inventorySection .game-card__passive { font-size: 8px; }

#inventorySection .avatars-grid,
#inventorySection .cars-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  padding-bottom: 12px;
}
#inventorySection .avatar-inventory-card { border-radius: 13px; }
#inventorySection .avatar-inventory-card__image { aspect-ratio: 1 / 1.05; padding: 6px; }
#inventorySection .car-inventory-card__image { aspect-ratio: 4 / 3; padding: 7px; }
#inventorySection .avatar-inventory-card__body { gap: 6px; padding: 7px; }
#inventorySection .avatar-inventory-card__body h4 { margin-top: 2px; font-size: 11px; line-height: 1.15; }
#inventorySection .avatar-inventory-card__rarity { font-size: 7px; }
#inventorySection .avatar-inventory-card__meta { min-height: 31px; }
#inventorySection .avatar-reputation-value { min-height: 22px; font-size: 8px; line-height: 1.25; }
#inventorySection .avatar-inventory-actions { gap: 5px; }
#inventorySection .avatar-inventory-actions .button {
  min-height: 32px;
  padding: 5px 3px;
  border-radius: 9px;
  font-size: 8px;
}

.public-profile-card { width: min(660px, 100%); }
.public-profile-main { grid-template-columns: minmax(300px, auto) minmax(0, 1fr); gap: 24px; }
.public-profile-visuals { align-items: flex-end; gap: 14px; }
.public-profile-garage {
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: 0;
}
.public-profile-garage[hidden] { display: none !important; }
.public-profile-garage__label {
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.public-profile-car {
  width: 158px;
  max-width: none;
  min-height: 112px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: linear-gradient(180deg, #f5f7f9, #e9edf1);
}

@media (max-width: 620px) {
  #inventorySection .cards-grid,
  #inventorySection .avatars-grid,
  #inventorySection .cars-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #inventorySection .game-card { min-height: 166px; max-width: none; }
  .public-profile-main { grid-template-columns: 1fr; gap: 14px; }
  .public-profile-visuals { justify-content: flex-start; }
  .public-profile-car { width: 148px; min-height: 102px; }
}

@media (max-width: 360px) {
  #inventorySection .cards-grid,
  #inventorySection .avatars-grid,
  #inventorySection .cars-grid { gap: 7px; }
  #inventorySection .game-card { min-height: 152px; }
  #inventorySection .game-card__face { padding: 7px; }
  #inventorySection .game-card__symbol { width: 42px; height: 42px; font-size: 20px; }
  .public-profile-avatar { width: 92px; height: 120px; }
  .public-profile-car { width: 138px; min-height: 96px; padding: 8px; }
}

/* v1.8.6 — case rarity system, PixiJS particles and public garage layout */
.public-profile-card { width: min(640px, 100%); }
.public-profile-main {
  grid-template-columns: 140px minmax(0, 1fr);
  align-items: start;
  gap: 20px;
}
.public-profile-info {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 7px;
  min-width: 0;
}
.public-profile-info h2 { margin: 0; }
.public-profile-info > p { margin: 2px 0 0; }
.public-profile-garage {
  justify-items: start;
  gap: 4px;
  width: min(100%, 170px);
}
.public-profile-garage__label {
  margin-left: 2px;
  font-size: 9px;
  letter-spacing: .11em;
}
.public-profile-car {
  width: 144px;
  max-width: 100%;
  min-height: 96px;
  padding: 9px;
  border-radius: 20px;
}

.case-rarity-legend {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 7px;
  margin: 12px 0;
}
.case-rarity-chip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid color-mix(in srgb, var(--rarity-color) 58%, #d8dde3);
  border-radius: 10px;
  background: color-mix(in srgb, var(--rarity-color) 8%, #fff);
  color: #34404c;
  font-size: 8px;
}
.case-rarity-chip i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--rarity-color);
}
.case-rarity-chip strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 900;
}
.case-rarity-chip b { color: #111827; font-size: 8px; }

.case-reel-marker { z-index: 9; }
.case-fx-layer {
  position: absolute;
  inset: 0;
  z-index: 8;
  overflow: hidden;
  pointer-events: none;
}
.case-fx-canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none;
}
.case-reel-item[data-case-winner="true"] { position: relative; z-index: 7; }

.case-reward-card {
  position: relative;
  isolation: isolate;
  border-color: var(--rarity-color, #9CA3AF);
  background: linear-gradient(150deg, color-mix(in srgb, var(--rarity-color, #9CA3AF) 32%, #27313b), #111827 78%);
}
.case-reward-card.rarity-common {
  border: 1px solid #9CA3AF;
  background: linear-gradient(150deg, #6B7280, #374151 72%);
  box-shadow: none;
}
.case-reward-card.rarity-rare {
  border: 2px solid #3B82F6;
  background: linear-gradient(150deg, #1E3A8A, #0F172A 76%);
  box-shadow: none;
}
.case-reward-card.rarity-epic {
  border: 1px solid #A855F7;
  background: linear-gradient(150deg, #581C87, #1E1233 76%);
  box-shadow: 0 0 10px rgba(168,85,247,.25), inset 0 0 0 1px rgba(255,255,255,.10);
}
.case-reward-card.rarity-mythic {
  border: 1px solid #EF4444;
  background: radial-gradient(circle at 50% 42%, #7F1D4C 0, #43152B 46%, #190D18 100%);
  box-shadow: 0 0 12px rgba(239,68,68,.26), inset 0 0 0 1px rgba(255,255,255,.10);
}
.case-reward-card.rarity-city-legend {
  border: 1px solid #FFD700;
  background: radial-gradient(circle at 50% 36%, #765E08 0, #342B0A 45%, #131109 100%);
  box-shadow: 0 0 15px rgba(255,215,0,.30), inset 0 0 0 1px rgba(255,255,255,.13);
}
.case-reward-card.rarity-any {
  border: 1px solid #94A3B8;
  background: linear-gradient(150deg, #475569, #172033 76%);
}
.case-reward-card::before {
  position: absolute;
  z-index: 4;
  top: -35%;
  bottom: -35%;
  left: -65%;
  width: 38%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  opacity: 0;
  content: '';
  pointer-events: none;
}
.case-reward-card__image,
.case-reward-card__symbol,
.case-reward-card strong,
.case-reward-card small,
.case-reward-card__prestige { position: relative; z-index: 2; }
.case-reward-card__prestige {
  min-height: 9px;
  color: var(--rarity-color);
  font-size: 7px;
  font-weight: 1000;
  letter-spacing: .08em;
  line-height: 1.15;
  opacity: 0;
  text-transform: uppercase;
}

/* Common and Rare deliberately have no reveal effects. */
.case-reveal-active.rarity-epic { animation: caseEpicReveal 1.8s cubic-bezier(.22,.8,.3,1) both; }
.case-reveal-active.rarity-epic::before { animation: caseEpicSheen 1.8s ease both; }
.case-reveal-active.rarity-epic strong { animation: caseEpicTitle 1.8s linear both; }

.case-reveal-active.rarity-mythic { animation: caseMythicReveal 2.3s cubic-bezier(.2,.8,.22,1) both; }
.case-reveal-active.rarity-mythic::before { animation: caseMythicSheen 2.3s ease both; }
.case-reveal-active.rarity-mythic strong { animation: caseMythicTitle 2.3s linear both; }
.case-reveal-active.rarity-mythic .case-reward-card__prestige { animation: caseMythicLabel 2.3s linear both; }

.case-reveal-active.rarity-city-legend { animation: caseLegendReveal 3s cubic-bezier(.2,.78,.18,1) both; }
.case-reveal-active.rarity-city-legend::before { animation: caseLegendSheen 3s ease both; }
.case-reveal-active.rarity-city-legend strong { animation: caseLegendTitle 3s linear both; }
.case-reveal-active.rarity-city-legend .case-reward-card__prestige { animation: caseLegendLabel 3s linear both; }

.case-reveal-settled.rarity-mythic { animation: caseMythicAmbient 2.8s ease-in-out infinite alternate; }
.case-reveal-settled.rarity-city-legend { animation: caseLegendAmbient 4s ease-in-out infinite; }
.case-reveal-settled.rarity-city-legend::before { animation: caseLegendAmbientSheen 4.2s ease-in-out infinite; }

.case-reel-viewport.case-stage-mythic {
  box-shadow: inset 0 0 0 999px rgba(0,0,0,.10), inset 0 0 38px rgba(239,68,68,.14);
}
.case-reel-viewport.case-stage-city-legend {
  box-shadow: inset 0 0 0 999px rgba(0,0,0,.18), inset 0 0 46px rgba(255,215,0,.18);
}
.case-reel-viewport.case-stage-city-legend .case-reel-item:not([data-case-winner="true"]) {
  filter: saturate(.7) brightness(.86);
}

@keyframes caseEpicReveal {
  0% { transform: translateY(0) scale(.92); box-shadow: none; }
  8.3% { box-shadow: 0 0 16px rgba(168,85,247,.42); }
  16.7% { transform: translateY(0) scale(1); box-shadow: 0 0 0 7px rgba(168,85,247,.14), 0 0 18px rgba(168,85,247,.45); }
  25% { box-shadow: 0 0 12px rgba(168,85,247,.30); }
  47.2% { transform: translateY(-5px) scale(1); }
  55.5% { transform: translateY(0) scale(1); }
  69.4% { box-shadow: 0 0 0 2px rgba(220,180,255,.88), 0 0 22px rgba(168,85,247,.55); }
  83.3% { box-shadow: 0 0 12px rgba(168,85,247,.34); }
  100% { transform: translateY(0) scale(1); box-shadow: 0 0 10px rgba(168,85,247,.26); }
}
@keyframes caseEpicSheen {
  0%, 34% { left: -65%; opacity: 0; }
  36.1% { opacity: .8; }
  48% { left: 130%; opacity: 0; }
  100% { left: 130%; opacity: 0; }
}
@keyframes caseEpicTitle { 0%, 57% { opacity: 0; } 62% { opacity: 1; } 100% { opacity: 1; } }

@keyframes caseMythicReveal {
  0% { transform: scale(.88); filter: brightness(.90); box-shadow: none; }
  6.5% { transform: scale(.94); }
  13% { transform: scale(1); box-shadow: 0 0 28px rgba(239,68,68,.32); }
  19.6% { box-shadow: 0 0 0 2px rgba(255,115,145,.72), 0 0 30px rgba(239,68,68,.40); }
  26.1% { box-shadow: 0 0 0 10px rgba(239,68,68,.10), 0 0 24px rgba(239,68,68,.36); }
  50% { transform: scale(1); }
  52% { transform: scale(1.03); }
  56% { transform: scale(1); }
  69.6% { box-shadow: 0 0 0 2px rgba(255,205,220,.92), 0 0 30px rgba(239,68,68,.58); }
  89% { filter: brightness(1); }
  100% { transform: scale(1); filter: brightness(1); box-shadow: 0 0 13px rgba(239,68,68,.36); }
}
@keyframes caseMythicSheen {
  0%, 39% { top: -70%; left: 30%; width: 15%; height: 30%; opacity: 0; transform: none; }
  41.3% { opacity: .9; }
  54% { top: 115%; opacity: 0; }
  100% { top: 115%; opacity: 0; }
}
@keyframes caseMythicTitle { 0%, 55% { opacity: 0; } 59% { opacity: 1; } 100% { opacity: 1; } }
@keyframes caseMythicLabel { 0%, 62% { opacity: 0; transform: translateY(3px); } 66% { opacity: 1; transform: translateY(0); } 100% { opacity: 1; } }

@keyframes caseLegendReveal {
  0% { transform: scale(.82); filter: brightness(.82) saturate(.82); box-shadow: none; }
  10% { transform: scale(.86); box-shadow: 0 0 34px rgba(255,215,0,.35); }
  20% { transform: scale(1); filter: brightness(.94) saturate(.92); }
  25% { box-shadow: 0 0 0 2px #FFD700, 0 0 35px rgba(255,215,0,.48); }
  35% { box-shadow: 0 0 0 11px rgba(255,215,0,.11), 0 0 30px rgba(255,215,0,.42); }
  45% { transform: scale(1); }
  47% { transform: scale(1.04); }
  51% { transform: scale(1); box-shadow: 0 0 0 3px rgba(255,250,215,.95), 0 0 42px rgba(255,215,0,.68); }
  81.7% { filter: brightness(1) saturate(1); }
  100% { transform: scale(1); filter: none; box-shadow: 0 0 18px rgba(255,215,0,.38); }
}
@keyframes caseLegendSheen {
  0%, 38% { left: -70%; opacity: 0; }
  40% { opacity: 1; }
  52% { left: 135%; opacity: 0; }
  100% { left: 135%; opacity: 0; }
}
@keyframes caseLegendTitle { 0%, 54% { opacity: 0; } 58% { opacity: 1; } 100% { opacity: 1; } }
@keyframes caseLegendLabel { 0%, 59% { opacity: 0; transform: translateY(-4px); } 62% { opacity: 1; transform: translateY(0); } 100% { opacity: 1; } }
@keyframes caseMythicAmbient {
  from { box-shadow: 0 0 10px rgba(239,68,68,.24), inset 0 0 0 1px rgba(255,255,255,.10); }
  to { box-shadow: 0 0 19px rgba(239,68,68,.46), inset 0 0 0 1px rgba(255,255,255,.14); }
}
@keyframes caseLegendAmbient {
  0%, 100% { box-shadow: 0 0 14px rgba(255,215,0,.28), inset 0 0 0 1px rgba(255,255,255,.10); }
  50% { box-shadow: 0 0 23px rgba(255,215,0,.50), inset 0 0 0 1px rgba(255,255,255,.16); }
}
@keyframes caseLegendAmbientSheen {
  0%, 72% { left: -70%; opacity: 0; }
  76% { opacity: .6; }
  88% { left: 135%; opacity: 0; }
  100% { left: 135%; opacity: 0; }
}

/* Inventory keeps rarity readable without running reveal animations. */
.game-card.inventory-rarity-common { --card-a: #9CA3AF; --card-b: #4B5563; }
.game-card.inventory-rarity-rare { --card-a: #3B82F6; --card-b: #1E3A8A; }
.game-card.inventory-rarity-epic { --card-a: #A855F7; --card-b: #581C87; }
.game-card.inventory-rarity-mythic { --card-a: #EF4444; --card-b: #7F1D1D; }
.game-card.inventory-rarity-city-legend { --card-a: #FFD700; --card-b: #6B5200; }
.avatar-inventory-card.inventory-rarity-rare { border-color: #3B82F6; }
.avatar-inventory-card.inventory-rarity-epic { border-color: #A855F7; }
.avatar-inventory-card.inventory-rarity-mythic { border-color: #EF4444; }
.avatar-inventory-card.inventory-rarity-city-legend { border-color: #FFD700; }

@media (max-width: 720px) {
  .case-rarity-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-rarity-chip:last-child { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .public-profile-main { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; }
  .public-profile-avatar { width: 104px; height: 136px; }
  .public-profile-car { width: 132px; min-height: 88px; padding: 8px; }
}
@media (max-width: 380px) {
  .public-profile-main { grid-template-columns: 88px minmax(0, 1fr); }
  .public-profile-avatar { width: 88px; height: 116px; }
  .public-profile-car { width: 118px; min-height: 80px; padding: 7px; }
  .case-rarity-legend { grid-template-columns: 1fr; }
  .case-rarity-chip:last-child { grid-column: auto; }
}

/* Extra reveal timing details for Mythic and City Legend. */
.case-reward-card::after {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  opacity: 0;
  content: '';
  pointer-events: none;
}
.case-reveal-active.rarity-mythic::after { animation: caseMythicWave 2.3s ease both; }
.case-reveal-active.rarity-city-legend::after { animation: caseLegendBeamWave 3s ease both; }
.case-reel-viewport.case-stage-city-legend .case-reel-item:not([data-case-winner="true"]) {
  animation: caseLegendSurroundings 3s linear both;
}
@keyframes caseMythicWave {
  0%, 24% { opacity: 0; background: radial-gradient(circle, transparent 0 18%, rgba(239,68,68,0) 19%); }
  26.1% { opacity: .7; background: radial-gradient(circle, transparent 0 22%, rgba(239,68,68,.32) 24%, transparent 27%); }
  38% { opacity: 0; background: radial-gradient(circle, transparent 0 60%, rgba(239,68,68,.16) 62%, transparent 68%); }
  100% { opacity: 0; }
}
@keyframes caseLegendBeamWave {
  0%, 14% { opacity: 0; background: linear-gradient(180deg, transparent 0, rgba(255,238,132,0) 0, transparent 0); }
  15% { opacity: .9; background: linear-gradient(180deg, rgba(255,238,132,.85) 0 2px, transparent 3px); }
  22% { opacity: .25; background: linear-gradient(180deg, transparent 68%, rgba(255,238,132,.75) 69% 71%, transparent 72%); }
  30% { opacity: 0; }
  34% { opacity: .65; background: radial-gradient(circle, transparent 0 22%, rgba(255,215,0,.34) 24%, transparent 27%); }
  42% { opacity: 0; background: radial-gradient(circle, transparent 0 64%, rgba(255,215,0,.14) 66%, transparent 72%); }
  100% { opacity: 0; }
}
@keyframes caseLegendSurroundings {
  0%, 4% { filter: none; }
  5% { filter: saturate(.72) brightness(.84); }
  81% { filter: saturate(.72) brightness(.84); }
  92%, 100% { filter: none; }
}


/* v1.8.9 — отдельная вкладка ключей */
.keys-grid { width: 100%; }
@media (max-width: 520px) {
  .inventory-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* v1.9.4 — аккуратные изображения боевых бонусов */
.case-reward-card--battle-score .case-reward-card__image {
  width: 92px;
  height: 116px;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
.case-reward-card--battle-score .case-reward-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.22));
}
.case-reward-card--battle-score {
  padding-top: 14px;
}
.case-reward-card--battle-score.case-reward-card--reel .case-reward-card__image {
  width: 82px;
  height: 106px;
}
@media (max-width: 680px) {
  .case-reward-card--battle-score .case-reward-card__image { width: 78px; height: 100px; }
  .case-reward-card--battle-score.case-reward-card--reel .case-reward-card__image { width: 72px; height: 92px; }
}


/* v1.9.5 — единый размер боевых карточек в ленте и без дублирующих названий */
.case-reward-card--battle-score {
  grid-template-rows: minmax(0, 1fr) auto;
  align-content: stretch;
}
.case-reward-card--battle-score .case-reward-card__image {
  align-self: center;
  justify-self: center;
  flex: 0 0 auto;
}
.case-reward-card--battle-score.case-reward-card--reel {
  width: 100%;
  height: 148px;
  min-height: 148px;
  max-height: 148px;
  box-sizing: border-box;
}
.case-reward-card--battle-score.case-reward-card--reel .case-reward-card__image {
  width: 82px;
  height: 106px;
}
.case-reward-card--battle-score.case-reward-card--reel small {
  align-self: end;
  min-height: 11px;
}
@media (max-width: 680px) {
  .case-reward-card--battle-score.case-reward-card--reel {
    height: 126px;
    min-height: 126px;
    max-height: 126px;
  }
  .case-reward-card--battle-score.case-reward-card--reel .case-reward-card__image {
    width: 72px;
    height: 92px;
  }
}


/* v1.9.6 — редкость не наезжает на боевые карточки */
.case-reward-card--battle-score {
  gap: 8px;
  padding: 14px 10px 12px;
  align-content: stretch;
  justify-items: center;
  grid-template-rows: minmax(0, 1fr) auto;
}
.case-reward-card--battle-score:not(.case-reward-card--reel) {
  min-height: 176px;
}
.case-reward-card--battle-score .case-reward-card__image {
  align-self: end;
  justify-self: center;
}
.case-reward-card--battle-score small {
  display: block;
  width: 100%;
  min-height: 16px;
  margin-top: 0;
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
  align-self: start;
}
.case-reward-card--battle-score:not(.case-reward-card--reel) .case-reward-card__image {
  width: 88px;
  height: 110px;
}
.case-reward-card--battle-score.case-reward-card--reel {
  gap: 8px;
}
.case-reward-card--battle-score.case-reward-card--reel small {
  min-height: 18px;
}
@media (max-width: 680px) {
  .case-reward-card--battle-score:not(.case-reward-card--reel) {
    min-height: 162px;
  }
  .case-reward-card--battle-score:not(.case-reward-card--reel) .case-reward-card__image {
    width: 78px;
    height: 98px;
  }
}


/* v1.9.7 — жёсткое разделение изображения и редкости в боевом кейсе */
.case-reward-card--battle-score {
  grid-template-rows: minmax(84px, 1fr) auto;
  gap: 10px;
  padding: 14px 10px 14px;
  align-content: stretch;
}
.case-reward-card--battle-score:not(.case-reward-card--reel) {
  min-height: 186px;
}
.case-reward-card--battle-score:not(.case-reward-card--reel) .case-reward-card__image {
  width: 76px;
  height: 96px;
  align-self: end;
}
.case-reward-card--battle-score .case-reward-card__image img {
  object-position: center;
}
.case-reward-card--battle-score small {
  width: 100%;
  min-height: 22px;
  padding-top: 2px;
  margin-top: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  font-size: 10px;
  line-height: 1.15;
  white-space: normal;
  word-break: break-word;
}
.case-reward-card--battle-score.case-reward-card--reel {
  min-height: 154px;
  height: 154px;
  max-height: 154px;
  grid-template-rows: minmax(72px, 1fr) auto;
  gap: 8px;
  padding: 10px 8px 12px;
}
.case-reward-card--battle-score.case-reward-card--reel .case-reward-card__image {
  width: 66px;
  height: 84px;
  align-self: end;
}
.case-reward-card--battle-score.case-reward-card--reel small {
  min-height: 20px;
  font-size: 9px;
  line-height: 1.1;
}
@media (max-width: 680px) {
  .case-reward-card--battle-score:not(.case-reward-card--reel) {
    min-height: 170px;
  }
  .case-reward-card--battle-score:not(.case-reward-card--reel) .case-reward-card__image {
    width: 68px;
    height: 86px;
  }
  .case-reward-card--battle-score.case-reward-card--reel {
    min-height: 132px;
    height: 132px;
    max-height: 132px;
  }
  .case-reward-card--battle-score.case-reward-card--reel .case-reward-card__image {
    width: 58px;
    height: 74px;
  }
}
\n\n/* v1.9.9 — боевые награды строго по центру, без скрытой строки редкости */\n.case-reward-card--battle-score,\n.case-reward-card--battle-score.case-reward-card--reel {\n  display: grid !important;\n  grid-template-columns: 1fr !important;\n  grid-template-rows: 1fr !important;\n  place-items: center !important;\n  align-content: center !important;\n  justify-content: center !important;\n  gap: 0 !important;\n  box-sizing: border-box !important;\n}\n.case-reward-card--battle-score:not(.case-reward-card--reel) {\n  min-height: 186px !important;\n  padding: 12px !important;\n}\n.case-reward-card--battle-score .case-reward-card__image,\n.case-reward-card--battle-score.case-reward-card--reel .case-reward-card__image {\n  grid-area: 1 / 1 !important;\n  align-self: center !important;\n  justify-self: center !important;\n  margin: 0 !important;\n  padding: 0 !important;\n}\n.case-reward-card--battle-score:not(.case-reward-card--reel) .case-reward-card__image {\n  width: 84px !important;\n  height: 108px !important;\n}\n.case-reward-card--battle-score.case-reward-card--reel {\n  height: 154px !important;\n  min-height: 154px !important;\n  max-height: 154px !important;\n  padding: 10px !important;\n}\n.case-reward-card--battle-score.case-reward-card--reel .case-reward-card__image {\n  width: 72px !important;\n  height: 94px !important;\n}\n.case-reward-card--battle-score .case-reward-card__image img {\n  display: block !important;\n  width: 100% !important;\n  height: 100% !important;\n  margin: 0 !important;\n  object-fit: contain !important;\n  object-position: 50% 50% !important;\n}\n.case-reward-card--battle-score > small,\n.case-reward-card--battle-score > strong,\n.case-reward-card--battle-score > .case-reward-card__prestige {\n  display: none !important;\n}\n@media (max-width: 680px) {\n  .case-reward-card--battle-score:not(.case-reward-card--reel) {\n    min-height: 170px !important;\n  }\n  .case-reward-card--battle-score:not(.case-reward-card--reel) .case-reward-card__image {\n    width: 76px !important;\n    height: 98px !important;\n  }\n  .case-reward-card--battle-score.case-reward-card--reel {\n    height: 132px !important;\n    min-height: 132px !important;\n    max-height: 132px !important;\n  }\n  .case-reward-card--battle-score.case-reward-card--reel .case-reward-card__image {\n    width: 64px !important;\n    height: 82px !important;\n  }\n}\n

/* v1.9.10 — боевые карточки центрируются по всей площади */
.case-reward-card--battle-score,
.case-reward-card--battle-score.case-reward-card--reel {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 138px !important;
  padding: 0 !important;
  gap: 0 !important;
}
.case-reward-card--battle-score:not(.case-reward-card--reel) {
  min-height: 190px !important;
}
.case-reward-card--battle-score .case-reward-card__image,
.case-reward-card--battle-score.case-reward-card--reel .case-reward-card__image {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}
.case-reward-card--battle-score .case-reward-card__image img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 86px !important;
  max-height: 114px !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
}
.case-reward-card--battle-score.case-reward-card--reel {
  min-height: 154px !important;
  height: 154px !important;
  max-height: 154px !important;
}
.case-reward-card--battle-score.case-reward-card--reel .case-reward-card__image img {
  max-width: 76px !important;
  max-height: 98px !important;
}
.case-reward-card--battle-score > small,
.case-reward-card--battle-score > strong,
.case-reward-card--battle-score > .case-reward-card__prestige {
  display: none !important;
}
@media (max-width: 680px) {
  .case-reward-card--battle-score:not(.case-reward-card--reel) {
    min-height: 174px !important;
  }
  .case-reward-card--battle-score .case-reward-card__image img {
    max-width: 78px !important;
    max-height: 102px !important;
  }
  .case-reward-card--battle-score.case-reward-card--reel {
    min-height: 132px !important;
    height: 132px !important;
    max-height: 132px !important;
  }
  .case-reward-card--battle-score.case-reward-card--reel .case-reward-card__image img {
    max-width: 66px !important;
    max-height: 86px !important;
  }
}


/* v1.9.12 — управление кейсом под лентой, без служебной строки */
.case-result[hidden] { display: none !important; }
.case-detail-actions--below {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 14px auto 0;
}
.case-detail-actions--below .button {
  min-width: 160px;
}
@media (max-width: 520px) {
  .case-detail-actions--below {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .case-detail-actions--below .button { min-width: 0; width: 100%; }
}
@media (max-width: 360px) {
  .case-detail-actions--below { grid-template-columns: 1fr; }
}


/* v1.9.15 — инвентарь показывает актуальные изображения карточек */
.game-card__symbol--image {
  width: 96px;
  height: 112px;
  margin: 6px auto 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.game-card__symbol--image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
#inventorySection .game-card__symbol--image {
  width: 52px;
  height: 62px;
  margin: 2px auto;
}
@media (max-width: 360px) {
  #inventorySection .game-card__symbol--image {
    width: 46px;
    height: 56px;
  }
}


/* v1.9.16 — актуальные картинки карточек и единый размер аватаров */
#inventorySection .game-card__symbol--image {
  display: grid;
  place-items: center;
  width: 100%;
  height: 76px;
  margin: 0 auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
#inventorySection .game-card__symbol--image img {
  display: block;
  width: auto;
  height: 100%;
  max-width: 88%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 5px 7px rgba(0,0,0,.18));
}

#inventorySection .avatars-grid {
  align-items: stretch;
}
#inventorySection .avatars-grid .avatar-inventory-card {
  display: grid;
  grid-template-rows: 168px minmax(0, 1fr);
  height: 100%;
}
#inventorySection .avatars-grid .avatar-inventory-card__image {
  display: grid;
  place-items: center;
  width: 100%;
  height: 168px;
  min-height: 168px;
  aspect-ratio: auto;
  padding: 8px;
  overflow: hidden;
  box-sizing: border-box;
}
#inventorySection .avatars-grid .avatar-inventory-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 88%;
  max-height: 96%;
  margin: auto;
  object-fit: contain;
  object-position: center center;
}
#inventorySection .avatars-grid .avatar-inventory-card[data-avatar-id="default"] .avatar-inventory-card__image img {
  max-width: 78%;
  max-height: 82%;
}
#inventorySection .avatars-grid .avatar-inventory-card__body {
  min-height: 132px;
  box-sizing: border-box;
}
#inventorySection .avatars-grid .avatar-inventory-card__meta {
  min-height: 34px;
}
#inventorySection .avatars-grid .avatar-inventory-actions {
  margin-top: auto;
}
@media (max-width: 620px) {
  #inventorySection .avatars-grid .avatar-inventory-card {
    grid-template-rows: 158px minmax(0, 1fr);
  }
  #inventorySection .avatars-grid .avatar-inventory-card__image {
    height: 158px;
    min-height: 158px;
  }
}
@media (max-width: 360px) {
  #inventorySection .avatars-grid .avatar-inventory-card {
    grid-template-rows: 146px minmax(0, 1fr);
  }
  #inventorySection .avatars-grid .avatar-inventory-card__image {
    height: 146px;
    min-height: 146px;
  }
}


/* v1.9.18 — компактный и аккуратный инвентарь карточек/ключей */
#inventorySection .game-card--visual-item {
  aspect-ratio: auto;
  min-height: 190px;
}
#inventorySection .game-card--visual-item .game-card__front {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  gap: 7px;
  padding: 9px;
  border: 1px solid #dfe4e8;
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 5px 14px rgba(28,37,47,.10);
}
#inventorySection .game-card--visual-item .game-card__shine,
#inventorySection .game-card--visual-item .game-card__expiry { display: none; }
#inventorySection .game-card--visual-item .game-card__rarity {
  position: static;
  justify-self: start;
  padding: 3px 6px;
  border: 1px solid #e2e6ea;
  background: #f7f9fa;
  color: #68717b;
  font-size: 6px;
  line-height: 1;
  box-shadow: none;
}
#inventorySection .game-card--visual-item .game-card__number {
  top: 10px;
  right: 9px;
  color: #8b939b;
  font-size: 7px;
  opacity: 1;
}
#inventorySection .game-card--visual-item .game-card__symbol--image {
  display: grid;
  place-items: center;
  width: 100%;
  height: 118px;
  min-height: 0;
  margin: 0;
  padding: 4px;
  border: 0;
  border-radius: 10px;
  background: #f6f8f9;
  overflow: hidden;
  box-sizing: border-box;
}
#inventorySection .game-card--visual-item .game-card__symbol--image img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  object-fit: contain;
  object-position: center;
  filter: none;
}
#inventorySection .game-card--visual-item .game-card__front-copy {
  display: grid;
  align-content: center;
  width: 100%;
  min-height: 34px;
  padding: 0 2px;
  color: var(--ink);
  text-align: center;
}
#inventorySection .game-card--visual-item .game-card__front-copy h4 {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: var(--ink);
  font-size: 9px;
  line-height: 1.18;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Боевые бонусы: только картинка карточки, полностью видимая и по центру. */
#inventorySection .game-card--battle-score {
  min-height: 184px;
}
#inventorySection .game-card--battle-score .game-card__front {
  grid-template-rows: auto minmax(0, 1fr);
}
#inventorySection .game-card--battle-score .game-card__symbol--image {
  height: 146px;
  padding: 5px;
  background: transparent;
}
#inventorySection .game-card--battle-score .game-card__symbol--image img {
  width: auto;
  height: 100%;
  max-width: 92%;
}

/* Ключи: картинка целиком + название отдельной строкой снизу. */
#inventorySection .game-card--key {
  min-height: 190px;
}
#inventorySection .game-card--key .game-card__symbol--image {
  height: 112px;
  padding: 8px;
  background: linear-gradient(180deg, #f8fafb, #eef2f5);
}
#inventorySection .game-card--key .game-card__symbol--image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#inventorySection .game-card--key .game-card__front-copy {
  min-height: 42px;
}

@media (max-width: 620px) {
  #inventorySection .game-card--visual-item { min-height: 176px; }
  #inventorySection .game-card--visual-item .game-card__symbol--image { height: 104px; }
  #inventorySection .game-card--battle-score { min-height: 174px; }
  #inventorySection .game-card--battle-score .game-card__symbol--image { height: 136px; }
  #inventorySection .game-card--key .game-card__symbol--image { height: 102px; }
}
@media (max-width: 360px) {
  #inventorySection .game-card--visual-item { min-height: 166px; }
  #inventorySection .game-card--battle-score .game-card__symbol--image { height: 126px; }
  #inventorySection .game-card--key .game-card__symbol--image { height: 94px; }
  #inventorySection .game-card--visual-item .game-card__front-copy h4 { font-size: 8px; }
}


/* v1.9.19 — финальный компактный шаблон карточек и ключей в инвентаре */
#inventorySection .game-card--visual-item {
  aspect-ratio: auto !important;
  height: 172px !important;
  min-height: 172px !important;
  max-height: 172px !important;
}
#inventorySection .game-card--visual-item .game-card__inner {
  position: absolute;
  inset: 0;
}
#inventorySection .game-card--visual-item .game-card__front {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: 18px minmax(0, 1fr) auto !important;
  grid-template-areas:
    "tag meta"
    "image image"
    "copy copy" !important;
  align-items: center !important;
  justify-items: center !important;
  gap: 5px !important;
  padding: 8px !important;
  overflow: hidden !important;
  border: 1px solid #dfe4e8 !important;
  border-radius: 13px !important;
  background: #fff !important;
  color: var(--ink) !important;
  box-shadow: 0 4px 12px rgba(28,37,47,.08) !important;
}
#inventorySection .game-card--visual-item .game-card__rarity {
  grid-area: tag !important;
  position: static !important;
  justify-self: start !important;
  align-self: start !important;
  max-width: 84px;
  padding: 3px 6px !important;
  overflow: hidden;
  border: 1px solid #e3e7ea !important;
  border-radius: 999px !important;
  background: #f6f8f9 !important;
  color: #68717b !important;
  font-size: 6px !important;
  line-height: 1 !important;
  letter-spacing: .07em !important;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: none !important;
}
#inventorySection .game-card--visual-item .game-card__number,
#inventorySection .game-card--visual-item .game-card__stack-count {
  grid-area: meta !important;
  position: static !important;
  justify-self: end !important;
  align-self: start !important;
  color: #8b939b !important;
  font-size: 7px !important;
  font-weight: 800;
  line-height: 1 !important;
  opacity: 1 !important;
}
#inventorySection .game-card--visual-item .game-card__stack-count {
  min-width: 28px;
  padding: 4px 6px;
  border-radius: 999px;
  background: #eef1f3;
  color: #4f5862 !important;
  text-align: center;
}
#inventorySection .game-card--visual-item .game-card__shine,
#inventorySection .game-card--visual-item .game-card__expiry {
  display: none !important;
}
#inventorySection .game-card--visual-item .game-card__symbol--image {
  grid-area: image !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 104px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 3px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  box-sizing: border-box !important;
}
#inventorySection .game-card--visual-item .game-card__symbol--image img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
}
#inventorySection .game-card--visual-item .game-card__front-copy {
  grid-area: copy !important;
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 0 2px !important;
  color: var(--ink) !important;
  text-align: center !important;
}
#inventorySection .game-card--visual-item .game-card__front-copy h4 {
  display: -webkit-box !important;
  overflow: hidden !important;
  margin: 0 !important;
  color: var(--ink) !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Боевые карточки — только целое изображение, без подписи снизу. */
#inventorySection .game-card--battle-score .game-card__front {
  grid-template-rows: 18px minmax(0, 1fr) !important;
  grid-template-areas:
    "tag meta"
    "image image" !important;
}
#inventorySection .game-card--battle-score .game-card__symbol--image {
  height: 128px !important;
  padding: 6px 10px !important;
}
#inventorySection .game-card--battle-score .game-card__symbol--image img {
  max-width: 84px !important;
  max-height: 116px !important;
}

/* Ключи — компактная картинка + название, дубликаты сгруппированы в ×N. */
#inventorySection .game-card--key .game-card__symbol--image {
  height: 92px !important;
  margin-top: 1px !important;
  padding: 4px 8px !important;
  background: transparent !important;
}
#inventorySection .game-card--key .game-card__symbol--image img {
  max-width: 100% !important;
  max-height: 86px !important;
}
#inventorySection .game-card--key .game-card__front-copy {
  min-height: 30px !important;
}

/* Обратная сторона специальных плиток тоже должна помещаться в компактную высоту. */
#inventorySection .game-card--visual-item .game-card__back {
  padding: 9px !important;
  border-radius: 13px !important;
}
#inventorySection .game-card--visual-item .game-card__back h4 {
  margin: 18px 0 4px !important;
  font-size: 11px !important;
}
#inventorySection .game-card--visual-item .game-card__back p,
#inventorySection .game-card--visual-item .game-card__back dl div,
#inventorySection .game-card--visual-item .game-card__passive {
  font-size: 7px !important;
  line-height: 1.25 !important;
}
#inventorySection .game-card--visual-item .game-card__back dl {
  gap: 3px !important;
  margin: 5px 0 !important;
}

@media (max-width: 620px) {
  #inventorySection .game-card--visual-item {
    height: 164px !important;
    min-height: 164px !important;
    max-height: 164px !important;
  }
  #inventorySection .game-card--battle-score .game-card__symbol--image { height: 120px !important; }
  #inventorySection .game-card--battle-score .game-card__symbol--image img { max-height: 108px !important; }
  #inventorySection .game-card--key .game-card__symbol--image { height: 86px !important; }
  #inventorySection .game-card--key .game-card__symbol--image img { max-height: 80px !important; }
}


/* v1.9.46 — более узнаваемые редкости в инвентаре игрока */
#inventorySection .avatar-inventory-card {
  background: var(--inventory-rarity-card-bg, #ffffff);
  border-color: var(--inventory-rarity-card-border, var(--line));
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06), inset 0 0 0 1px rgba(255,255,255,0.2);
}
#inventorySection .avatar-inventory-card.is-equipped {
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08), inset 0 0 0 2px rgba(255,255,255,0.34);
}
#inventorySection .avatar-inventory-card .avatar-inventory-card__image {
  background: var(--inventory-rarity-image-bg, linear-gradient(180deg, #f4f7f9, #e7edf2));
}
#inventorySection .avatar-inventory-card .avatar-inventory-card__body {
  background: var(--inventory-rarity-body-bg, linear-gradient(180deg, rgba(255,255,255,0.86), rgba(255,255,255,0.97)));
}
#inventorySection .avatar-inventory-card .avatar-inventory-card__rarity {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  color: var(--inventory-rarity-pill-text, #475569);
  background: var(--inventory-rarity-pill-bg, rgba(255,255,255,0.84));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35);
}
#inventorySection .avatar-inventory-card .avatar-inventory-card__body h4,
#inventorySection .avatar-inventory-card .avatar-reputation-value,
#inventorySection .avatar-inventory-card .avatar-reputation-value strong {
  color: var(--inventory-rarity-text, inherit);
}
#inventorySection .avatar-inventory-card .avatar-inventory-card__meta {
  display: grid;
  align-content: start;
  gap: 4px;
}
#inventorySection .avatar-inventory-card.inventory-rarity-common {
  --inventory-rarity-card-bg: linear-gradient(180deg, #f7f8fa 0%, #edf1f5 100%);
  --inventory-rarity-card-border: #b9c3d0;
  --inventory-rarity-image-bg: linear-gradient(180deg, #c4ccd8 0%, #8f9aaa 100%);
  --inventory-rarity-body-bg: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(242,245,248,0.98) 100%);
  --inventory-rarity-pill-bg: rgba(255,255,255,0.78);
  --inventory-rarity-pill-text: #556070;
  --inventory-rarity-text: #364152;
}
#inventorySection .avatar-inventory-card.inventory-rarity-rare {
  --inventory-rarity-card-bg: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
  --inventory-rarity-card-border: #3b82f6;
  --inventory-rarity-image-bg: linear-gradient(180deg, #2563eb 0%, #0f2f6d 100%);
  --inventory-rarity-body-bg: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(224,238,255,0.98) 100%);
  --inventory-rarity-pill-bg: rgba(219,234,254,0.9);
  --inventory-rarity-pill-text: #1d4ed8;
  --inventory-rarity-text: #1f3f75;
}
#inventorySection .avatar-inventory-card.inventory-rarity-epic {
  --inventory-rarity-card-bg: linear-gradient(180deg, #faf5ff 0%, #f3e8ff 100%);
  --inventory-rarity-card-border: #a855f7;
  --inventory-rarity-image-bg: linear-gradient(180deg, #7e22ce 0%, #3b0764 100%);
  --inventory-rarity-body-bg: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(244,230,255,0.98) 100%);
  --inventory-rarity-pill-bg: rgba(233,213,255,0.92);
  --inventory-rarity-pill-text: #7e22ce;
  --inventory-rarity-text: #5b2b91;
}
#inventorySection .avatar-inventory-card.inventory-rarity-mythic {
  --inventory-rarity-card-bg: linear-gradient(180deg, #fff1f2 0%, #ffe4e6 100%);
  --inventory-rarity-card-border: #ef4444;
  --inventory-rarity-image-bg: linear-gradient(180deg, #f87171 0%, #7f1d1d 100%);
  --inventory-rarity-body-bg: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,232,235,0.98) 100%);
  --inventory-rarity-pill-bg: rgba(254,202,202,0.92);
  --inventory-rarity-pill-text: #b91c1c;
  --inventory-rarity-text: #7f1d1d;
}
#inventorySection .avatar-inventory-card.inventory-rarity-city-legend {
  --inventory-rarity-card-bg: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
  --inventory-rarity-card-border: #facc15;
  --inventory-rarity-image-bg: linear-gradient(180deg, #facc15 0%, #7c5a00 100%);
  --inventory-rarity-body-bg: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,249,219,0.98) 100%);
  --inventory-rarity-pill-bg: rgba(254,240,138,0.95);
  --inventory-rarity-pill-text: #946200;
  --inventory-rarity-text: #775800;
}


/* v1.9.47 — ресурсы для будущих улучшений территорий */
.profile-resource-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.profile-resource {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid rgba(111, 78, 0, .12);
  border-radius: 12px;
  background: rgba(255,255,255,.58);
}
.profile-resource__icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(255,255,255,.7);
  font-size: 18px;
}
.profile-resource > span:last-child { min-width: 0; }
.profile-resource small, .profile-resource strong { display: block; }
.profile-resource small {
  overflow: hidden;
  color: rgba(75,57,0,.72);
  font-size: 8px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-resource strong { margin-top: 2px; font-size: 17px; line-height: 1; }
.profile-resource--materials { box-shadow: inset 3px 0 0 rgba(180, 95, 42, .55); }
.profile-resource--permits { box-shadow: inset 3px 0 0 rgba(47, 116, 190, .52); }
@media (max-width: 420px) {
  .profile-resource-grid { grid-template-columns: 1fr; }
  .profile-resource small { white-space: normal; }
}

/* v1.9.48 — развитие, специализация и захват территорий */
.territory-development-button {
  width: 100%;
  margin-top: 10px;
  min-height: 38px;
  border: 1px solid rgba(181, 136, 0, .28);
  border-radius: 12px;
  background: linear-gradient(135deg, #fff3aa, #ffd64b);
  color: #493700;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}
.territory-popup__occupation {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(217, 119, 6, .2);
  border-radius: 10px;
  background: #fff7ed;
  color: #9a5200;
  font-size: 10px;
  font-weight: 850;
}
.territory-infrastructure {
  display: grid;
  gap: 5px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(105, 116, 132, .14);
}
.territory-infrastructure > span {
  color: #707985;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.territory-building-chip {
  display: inline-flex;
  width: fit-content;
  margin: 1px 4px 1px 0;
  padding: 4px 7px;
  border-radius: 999px;
  background: #eef2f6;
  color: #303a45;
  font-size: 9px;
  font-weight: 800;
}
.territory-infrastructure-empty { color: #85909c; font-size: 10px; }
.territory-info-row--bonus strong { color: #7b5d00; }

.territory-development-shell { z-index: 86; }
.territory-development-card {
  width: min(940px, 100%);
  max-height: calc(100vh - 28px);
  padding: 26px;
  overflow: auto;
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 217, 73, .16), transparent 24%),
    linear-gradient(180deg, #ffffff, #f7f9fb);
}
.territory-development-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-right: 48px;
}
.territory-development-heading h2 { margin: 3px 0 5px; font-size: 28px; }
.territory-development-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.territory-development-wallet {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  max-width: 360px;
}
.territory-development-wallet span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(101, 113, 128, .15);
  border-radius: 12px;
  background: rgba(255,255,255,.84);
  box-shadow: 0 8px 18px rgba(41, 49, 61, .06);
  white-space: nowrap;
  font-size: 11px;
}
.territory-occupation-banner,
.territory-ruins-banner {
  display: grid;
  gap: 3px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 11px;
  line-height: 1.45;
}
.territory-occupation-banner[hidden], .territory-ruins-banner[hidden] { display: none !important; }
.territory-occupation-banner { border: 1px solid rgba(217, 119, 6, .24); background: #fff7ed; color: #8f4e05; }
.territory-ruins-banner { border: 1px solid rgba(100, 116, 139, .18); background: #eef1f4; color: #4b5563; }
.territory-occupation-banner strong, .territory-ruins-banner strong { font-size: 12px; }
.territory-development-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.territory-development-overview article {
  padding: 13px;
  border: 1px solid rgba(106, 118, 133, .15);
  border-radius: 15px;
  background: #fff;
}
.territory-development-overview span { display: block; color: var(--muted); font-size: 9px; font-weight: 850; text-transform: uppercase; letter-spacing: .07em; }
.territory-development-overview strong { display: block; margin-top: 5px; font-size: 17px; }
.territory-development-section {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid rgba(102, 115, 132, .15);
  border-radius: 18px;
  background: rgba(255,255,255,.78);
}
.territory-development-section__heading > div { display: flex; align-items: flex-start; gap: 10px; }
.territory-development-section__heading h3 { margin: 0 0 3px; font-size: 16px; }
.territory-development-section__heading p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.territory-development-section__icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 12px; background: #f5f0d5; font-size: 19px; }
.territory-development-action-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(202, 154, 0, .18);
  border-radius: 15px;
  background: linear-gradient(135deg, #fffdf2, #fff8d5);
}
.territory-development-action-card > div:first-child { display: grid; gap: 4px; }
.territory-development-action-card strong { font-size: 13px; }
.territory-development-action-card span { color: #5b6571; font-size: 10px; }
.territory-development-action-card small { color: #7b8490; font-size: 9px; }
.territory-development-action-card__buy { display: grid; justify-items: end; gap: 7px; }
.territory-development-action-card__buy b { color: #665100; font-size: 10px; white-space: nowrap; }
.territory-development-complete { display: grid; gap: 4px; padding: 14px; border-radius: 14px; background: #f3f6f8; }
.territory-development-complete span { color: var(--muted); font-size: 10px; }
.territory-building-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.territory-building-card {
  display: grid;
  align-content: start;
  gap: 9px;
  min-width: 0;
  padding: 13px;
  border: 1px solid rgba(103, 116, 133, .15);
  border-radius: 16px;
  background: linear-gradient(180deg, #fff, #f6f8fa);
}
.territory-building-card.is-built { border-color: rgba(218, 174, 33, .35); box-shadow: inset 0 0 0 1px rgba(255, 221, 77, .12); }
.territory-building-card__head { display: flex; align-items: center; gap: 10px; }
.territory-building-card__head > span { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 13px; background: #eef2f6; font-size: 21px; }
.territory-building-card__head h4 { margin: 0; font-size: 13px; line-height: 1.2; }
.territory-building-card__head b { display: block; margin-top: 2px; color: #7d8792; font-size: 9px; }
.territory-building-card__effect { display: grid; gap: 2px; padding: 8px 9px; border-radius: 10px; background: #eef2f5; }
.territory-building-card__effect.is-next { background: #f8f1cf; }
.territory-building-card__effect small { color: #7b8490; font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; }
.territory-building-card__effect strong { font-size: 10px; line-height: 1.35; }
.territory-building-card p { min-height: 27px; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.4; }
.territory-building-card__actions { display: grid; grid-template-columns: 1fr auto; gap: 6px; margin-top: auto; }
.territory-building-card__actions .button { min-height: 34px; padding: 7px 9px; font-size: 9px; }
.territory-building-card__cost { color: #6d5a12; font-size: 9px; font-weight: 850; }
.territory-development-warning {
  margin: 14px 2px 0;
  padding: 11px 13px;
  border: 1px solid rgba(185, 28, 28, .12);
  border-radius: 13px;
  background: #fff4f4;
  color: #8a3333;
  font-size: 10px;
  line-height: 1.45;
}
.battle-result.is-win strong,
.battle-result.is-loss strong { display: block; margin-bottom: 5px; font-size: 14px; }
.battle-result.is-win span,
.battle-result.is-loss span { display: block; margin-top: 2px; font-size: 10px; line-height: 1.4; }

@media (max-width: 760px) {
  .territory-development-card { padding: 20px; }
  .territory-development-heading { display: grid; padding-right: 40px; }
  .territory-development-wallet { justify-content: flex-start; max-width: none; }
  .territory-development-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .territory-building-actions { grid-template-columns: 1fr; }
  .territory-development-action-card { grid-template-columns: 1fr; }
  .territory-development-action-card__buy { justify-items: stretch; }
  .territory-development-action-card__buy b { white-space: normal; }
  .territory-building-card__actions { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  .territory-development-card { padding: 17px; border-radius: 18px; }
  .territory-development-heading h2 { font-size: 22px; }
  .territory-development-overview { gap: 7px; }
  .territory-development-overview article { padding: 10px; }
  .territory-development-section { padding: 12px; }
  .territory-development-wallet span { font-size: 9px; padding: 6px 8px; }
}


/* v1.9.49 — click-only territory information menu */
.territory-info-panel {
  position: fixed;
  z-index: 76;
  top: 126px;
  right: 16px;
  bottom: 16px;
  width: min(390px, calc(100vw - 32px));
  pointer-events: none;
}
.territory-info-panel[hidden] { display: none !important; }
.territory-info-menu {
  position: relative;
  width: 100%;
  max-height: 100%;
  overflow: auto;
  padding: 22px;
  pointer-events: auto;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 24px;
  background: rgba(255,255,255,.985);
  box-shadow: 0 24px 70px rgba(17,23,31,.28);
}
.territory-info-menu__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
}
.territory-info-menu__heading {
  padding-right: 48px;
  margin-bottom: 17px;
}
.territory-info-menu__heading h2 {
  margin: 3px 0 5px;
  font-size: 22px;
}
.territory-info-menu__heading > p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.territory-info-menu__content .territory-card {
  gap: 9px;
}
.territory-info-menu__content .territory-popup__code {
  margin-bottom: 3px;
  font-size: 25px;
}
.territory-info-menu__content .territory-info-row {
  padding: 8px 0;
  border-bottom: 1px solid rgba(109,126,150,.12);
}
.territory-info-menu__content .territory-info-row:last-of-type {
  border-bottom: 0;
}
.territory-info-menu__content .territory-infrastructure {
  margin-top: 5px;
  padding: 13px;
  border-radius: 16px;
  background: #f5f7fa;
}
.territory-info-menu__content .territory-buy-button,
.territory-info-menu__content .territory-attack-button,
.territory-info-menu__content .territory-development-button {
  min-height: 44px;
  margin-top: 9px;
  border-radius: 13px;
  font-size: 12px;
}
@media (max-width: 720px) {
  .territory-info-panel {
    top: auto;
    right: 8px;
    bottom: 8px;
    left: 8px;
    width: auto;
  }
  .territory-info-menu {
    max-height: min(72vh, 620px);
    padding: 18px;
    border-radius: 22px;
  }
  .territory-info-menu__heading { padding-right: 46px; margin-bottom: 13px; }
  .territory-info-menu__heading h2 { font-size: 20px; }
  .territory-info-menu__content .territory-popup__code { font-size: 22px; }
}

/* v1.9.50 — unified mobile adaptation */
@media (pointer: coarse) {
  button, .button, .icon-button, .floating-button, .profile-tab, .auth-tab, .case-type-tab, .text-button {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .button:hover, .floating-button:hover, .battle-die-button:hover:not(.is-selected), .game-card:hover .game-card__shine {
    transform: none;
  }
}

@media (max-width: 820px) {
  :root { --mobile-edge: 10px; }

  html, body {
    overscroll-behavior: none;
    -webkit-text-size-adjust: 100%;
  }

  input, select, textarea { font-size: 16px !important; }
  .icon-button { min-width: 44px; min-height: 44px; }

  /* Header: first row = brand/search/account, second row = 4 equal game sections. */
  .topbar {
    top: max(var(--mobile-edge), env(safe-area-inset-top));
    left: max(var(--mobile-edge), env(safe-area-inset-left));
    right: max(var(--mobile-edge), env(safe-area-inset-right));
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: 52px 44px;
    grid-template-areas:
      "brand brand search search search search search search search search account account"
      "case case case fortune fortune fortune shop shop shop battles battles battles";
    gap: 7px;
    align-items: stretch;
  }
  .brand { grid-area: brand; width: 100%; max-width: 52px; min-width: 0; height: 52px; padding: 6px; border-radius: 16px; justify-self: start; }
  .brand__mark { width: 40px; height: 40px; }
  .brand > span:last-child { display: none; }
  .search { grid-area: search; height: 52px; min-width: 0; border-radius: 16px; padding-inline: 11px 8px; }
  .search input { font-size: 16px !important; }
  .account-button { grid-area: account; width: 100%; max-width: 52px; height: 52px; grid-template-columns: 1fr; padding: 7px; border-radius: 16px; justify-self: end; }
  .account-avatar { width: 38px; height: 38px; margin: auto; }
  .account-copy { display: none; }
  #caseButton { grid-area: case; }
  #fortuneButton { grid-area: fortune; }
  #shopButton { grid-area: shop; }
  #battlesButton { grid-area: battles; }
  #resetView { display: none !important; }
  .case-nav-button, .fortune-nav-button, .shop-nav-button, .battle-nav-button {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 6px !important;
    border-radius: 13px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    white-space: nowrap;
  }
  .case-nav-button > span:first-child,
  .fortune-nav-button > span:first-child,
  .shop-nav-button > span:first-child,
  .battle-nav-button > span:first-child {
    margin-right: 3px !important;
    font-size: 15px !important;
  }
  .battle-nav-button::before { content: none !important; }
  .battle-nav-button .battle-badge { top: 2px; right: 3px; }

  /* Search results use the full phone width instead of a narrow search-column popup. */
  .search-results {
    position: fixed;
    top: calc(max(var(--mobile-edge), env(safe-area-inset-top)) + 103px);
    left: max(var(--mobile-edge), env(safe-area-inset-left));
    right: max(var(--mobile-edge), env(safe-area-inset-right));
    max-height: min(52dvh, 430px);
    border-radius: 18px;
    padding: 8px;
  }
  .search-result { min-height: 50px; padding: 10px; }

  .panel--layers {
    top: calc(max(var(--mobile-edge), env(safe-area-inset-top)) + 108px);
    left: max(var(--mobile-edge), env(safe-area-inset-left));
    bottom: max(var(--mobile-edge), env(safe-area-inset-bottom));
    width: min(350px, calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    max-height: none;
  }
  .floating-button {
    top: calc(max(var(--mobile-edge), env(safe-area-inset-top)) + 108px);
    left: max(var(--mobile-edge), env(safe-area-inset-left));
  }
  .maplibregl-ctrl-top-right {
    top: calc(max(var(--mobile-edge), env(safe-area-inset-top)) + 104px);
    right: max(4px, env(safe-area-inset-right));
  }
  .maplibregl-ctrl-group button { width: 40px; height: 40px; }

  /* Modal baseline for phones/tablets. */
  .modal-shell {
    padding:
      max(10px, env(safe-area-inset-top))
      max(10px, env(safe-area-inset-right))
      max(10px, env(safe-area-inset-bottom))
      max(10px, env(safe-area-inset-left));
  }
  .modal-card {
    width: 100%;
    max-width: 720px;
    max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overscroll-behavior: contain;
  }
  .modal-close, .modal-heading-close { min-width: 44px; min-height: 44px; }

  /* Personal profile remains a usable panel on tablets. */
  .profile-panel {
    top: max(8px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    left: auto;
    width: min(500px, calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right)));
    max-height: none;
    padding: 18px;
    overscroll-behavior: contain;
  }
  .profile-tabs { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
  .profile-tab { min-height: 44px; padding: 0 7px; font-size: 11px; }

  /* Case / shop / battles */
  .case-modal-card, .shop-modal-card, .battle-modal-card, .fortune-modal-card, .territory-development-card { max-width: 100%; }
  .case-type-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; scrollbar-width: none; }
  .case-type-tabs::-webkit-scrollbar { display: none; }
  .case-type-tab { flex: 0 0 auto; min-height: 44px; }
  .case-catalog-grid { grid-template-columns: 1fr; }
  .case-catalog-card--simple { grid-template-columns: minmax(125px, 36%) minmax(0,1fr); }
  .case-catalog-card--simple .case-catalog-card__visual { min-height: 176px; }
  .case-rewards { grid-template-columns: repeat(3, minmax(0,1fr)); }

  .shop-cards-grid { grid-template-columns: 1fr; }
  .shop-card { grid-template-columns: minmax(110px, 34%) minmax(0,1fr); }

  .battle-modal-card { padding-top: 24px; }
  .battle-current-dice { gap: 8px; }
  .battle-die-button { width: 54px; height: 54px; }
  .battle-turn-actions .button, .battle-roll-button { min-height: 48px; }

  /* Fortune is constrained by both screen width and height. */
  .fortune-layout { grid-template-columns: 1fr; gap: 12px; }
  .fortune-wheel-wrap { width: min(82vw, 430px, 48dvh); }
  .fortune-panel { grid-template-columns: 1fr 1fr; gap: 10px; }
  .fortune-balance, .fortune-result { grid-column: 1 / -1; }
  .fortune-spin, #refreshFortune { min-height: 50px; }

  /* Territory info behaves like a predictable bottom sheet. */
  .territory-info-panel {
    top: auto;
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    left: max(8px, env(safe-area-inset-left));
    width: auto;
  }
  .territory-info-menu {
    max-height: min(74dvh, 660px);
    padding: 20px 18px calc(18px + env(safe-area-inset-bottom));
    border-radius: 24px;
    overscroll-behavior: contain;
  }
  .territory-info-menu::before {
    content: '';
    display: block;
    width: 42px;
    height: 4px;
    margin: -8px auto 10px;
    border-radius: 999px;
    background: #d7dce1;
  }
  .territory-info-menu__close { top: 10px; right: 10px; }
  .territory-info-menu__content .territory-info-row {
    grid-template-columns: minmax(0,1fr) minmax(0,52%);
    gap: 12px;
  }
  .territory-info-menu__content .territory-info-row strong {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .territory-building-chip { max-width: 100%; white-space: normal; }
  .territory-info-menu__content .territory-buy-button,
  .territory-info-menu__content .territory-attack-button,
  .territory-info-menu__content .territory-development-button { min-height: 48px; }

  /* Development view stays readable without tiny columns. */
  .territory-development-heading { display: grid; gap: 12px; padding-right: 48px; }
  .territory-development-wallet {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    justify-content: stretch;
    max-width: none;
  }
  .territory-development-wallet span { justify-content: center; min-width: 0; }
  .territory-development-overview { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .territory-building-actions { grid-template-columns: 1fr; }
  .territory-development-action-card { grid-template-columns: 1fr; }
  .territory-development-action-card__buy { justify-items: stretch; }
  .territory-building-card__actions { grid-template-columns: 1fr; }

  .toast, .loading {
    bottom: calc(14px + env(safe-area-inset-bottom));
    max-width: calc(100vw - 20px - env(safe-area-inset-left) - env(safe-area-inset-right));
  }
}

@media (max-width: 600px) {
  :root { --mobile-edge: 8px; }

  /* Full-width bottom sheet profile is easier to use with one hand. */
  .profile-panel {
    inset: auto 0 0 0;
    width: 100%;
    max-height: calc(92dvh - env(safe-area-inset-top));
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
    border-radius: 24px 24px 0 0;
  }
  .profile-head { position: sticky; top: -18px; z-index: 5; margin: -18px -16px 8px; padding: 16px 16px 10px; background: rgba(255,255,255,.985); border-radius: 24px 24px 0 0; }
  .profile-ident { grid-template-columns: 46px minmax(0,1fr); gap: 10px; }
  .profile-avatar { width: 46px; height: 46px; border-radius: 14px; }
  .profile-ident h2 { font-size: 19px; }
  .balance-card { margin-top: 10px; padding: 14px; }
  .balance-card strong { font-size: 24px; }
  .profile-resource-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .profile-resource small { white-space: normal; }
  .profile-tabs { position: sticky; top: 54px; z-index: 4; margin-inline: -2px; background: #eef1f3; }

  #inventorySection .cards-grid,
  #inventorySection .avatars-grid,
  #inventorySection .cars-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 8px; }
  #inventorySection .avatar-inventory-card__body { padding: 8px; }
  #inventorySection .avatar-inventory-actions { gap: 5px; }
  #inventorySection .avatar-inventory-actions .button { min-height: 36px; font-size: 9px; }

  /* Phone modals become bottom sheets and use the whole width. */
  .modal-shell {
    place-items: end stretch;
    padding: max(6px, env(safe-area-inset-top)) 0 0;
  }
  .modal-card {
    width: 100%;
    max-height: calc(96dvh - env(safe-area-inset-top));
    padding: 20px 16px calc(18px + env(safe-area-inset-bottom));
    border-radius: 24px 24px 0 0;
    border-bottom: 0;
  }
  .auth-card { max-height: calc(100dvh - env(safe-area-inset-top)); }
  .auth-hero { padding-right: 42px; }
  .field-grid { grid-template-columns: 1fr; }

  .case-heading, .shop-heading, .fortune-heading { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: start; gap: 10px; }
  .case-heading > div:first-child, .shop-heading > div:first-child, .fortune-heading > div:first-child { min-width: 0; }
  .case-heading h2, .shop-heading h2, .fortune-heading h2 { font-size: 22px; }
  .case-heading p:last-child, .shop-heading p:last-child, .fortune-heading p:last-child { font-size: 11px; }
  .modal-heading-actions { grid-column: 1 / -1; width: 100%; justify-content: space-between; }

  .case-catalog-card--simple { display: grid; grid-template-columns: 112px minmax(0,1fr); }
  .case-catalog-card--simple .case-catalog-card__visual { min-height: 156px; }
  .case-catalog-card--simple .case-catalog-card__copy { padding: 11px; }
  .case-catalog-card--simple .case-catalog-card__copy h3 { font-size: 15px; text-align: left; }
  .case-showcase { grid-template-columns: 1fr; }
  .case-art { min-height: 190px; }
  .case-panel { grid-template-columns: 1fr; }
  .case-detail-actions { grid-template-columns: 1fr; }
  .case-detail-actions .button { width: 100%; min-width: 0; min-height: 46px; }
  .case-reel-viewport { height: 150px; margin-top: 12px; }
  .case-reel-item { flex-basis: 108px; }
  .case-rewards { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }

  .shop-card { grid-template-columns: 1fr; }
  .shop-card__visual { min-height: 150px; padding: 12px; }
  .shop-card__visual img { max-height: 125px; }
  .shop-card__copy { padding: 13px; }
  .shop-card__buy { flex-direction: column; align-items: stretch; }
  .shop-card__buy .button { width: 100%; min-height: 44px; }

  .fortune-wheel-wrap { width: min(92vw, 350px, 45dvh); }
  .fortune-panel { grid-template-columns: 1fr; }
  .fortune-balance, .fortune-result { grid-column: auto; padding: 14px; border-radius: 16px; }
  .fortune-balance strong { font-size: 21px; }
  .fortune-result { min-height: 90px; }

  .battle-heading { padding-right: 42px; }
  .battle-scoreboard, .battle-roll-columns, .battle-limits { grid-template-columns: 1fr; }
  .battle-versus { min-height: 20px; }
  .battle-turn-panel__head, .battle-turn-actions, .battle-scoring-rules > div { grid-template-columns: 1fr; }
  .battle-die-button { width: 50px; height: 50px; border-radius: 13px; }
  .battle-list-item { grid-template-columns: 34px minmax(0,1fr); }
  .battle-list-item > span:last-child { grid-column: 2; text-align: left; }

  .territory-development-card { padding: 20px 16px calc(18px + env(safe-area-inset-bottom)); }
  .territory-development-heading h2 { font-size: 22px; }
  .territory-development-section { padding: 12px; }

  /* Public profile keeps avatar and player details side by side on normal phones. */
  .public-profile-card { overflow: auto; }
  .public-profile-main { grid-template-columns: 108px minmax(0,1fr) !important; gap: 14px; align-items: center; }
  .public-profile-avatar { width: 108px !important; height: 132px !important; border-radius: 22px; }
  .public-profile-info h2 { font-size: 23px; }
  .public-profile-visuals { justify-content: flex-start; }
  .public-profile-car { width: 112px; min-height: 82px; }
  .public-profile-stats { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  .public-profile-stats article { padding: 11px; }
  .public-profile-stats strong { font-size: 23px; }
  .public-profile-card .modal-close { top: 8px !important; right: 8px !important; }
}

@media (max-width: 430px) {
  .topbar {
    grid-template-columns: repeat(12, minmax(0,1fr));
    grid-template-rows: 48px 42px;
    gap: 6px;
  }
  .brand, .account-button { width: 100%; max-width: 48px; min-width: 0; height: 48px; }
  .brand { padding: 5px; }
  .brand__mark { width: 38px; height: 38px; font-size: 20px; }
  .search { height: 48px; grid-template-columns: 22px 1fr 34px; gap: 5px; padding-inline: 9px 5px; }
  .search svg { width: 20px; height: 20px; }
  .account-avatar { width: 36px; height: 36px; }
  .case-nav-button, .fortune-nav-button, .shop-nav-button, .battle-nav-button {
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 3px !important;
    font-size: 9px !important;
  }
  .case-nav-button > span:first-child,
  .fortune-nav-button > span:first-child,
  .shop-nav-button > span:first-child,
  .battle-nav-button > span:first-child { font-size: 14px !important; margin-right: 2px !important; }

  .search-results,
  .panel--layers,
  .floating-button,
  .maplibregl-ctrl-top-right {
    --mobile-header-height: 96px;
  }
  .search-results { top: calc(max(var(--mobile-edge), env(safe-area-inset-top)) + 96px); }
  .panel--layers, .floating-button { top: calc(max(var(--mobile-edge), env(safe-area-inset-top)) + 101px); }
  .maplibregl-ctrl-top-right { top: calc(max(var(--mobile-edge), env(safe-area-inset-top)) + 98px); }

  .panel--layers { right: max(8px, env(safe-area-inset-right)); width: auto; padding: 14px; border-radius: 18px; }
  .layer-row { grid-template-columns: 28px minmax(0,1fr) 40px; gap: 8px; padding: 9px 4px; }
  .layer-row__text strong { font-size: 12px; }
  .layer-row__text small { font-size: 9px; }

  .profile-panel { max-height: calc(94dvh - env(safe-area-inset-top)); }
  .profile-tab { padding: 0 4px; font-size: 10px; }
  .profile-resource { grid-template-columns: 26px minmax(0,1fr); padding: 8px; }
  .profile-resource__icon { width: 26px; height: 26px; font-size: 16px; }
  .profile-resource strong { font-size: 15px; }

  .territory-info-menu { max-height: min(78dvh, 650px); padding-inline: 15px; }
  .territory-info-menu__heading h2 { font-size: 19px; }
  .territory-info-menu__content .territory-popup__code { font-size: 21px; }
  .territory-info-menu__content .territory-info-row { grid-template-columns: minmax(0,1fr) minmax(0,48%); font-size: 11px; }

  .territory-development-wallet { grid-template-columns: 1fr; }
  .territory-development-wallet span { justify-content: flex-start; }
  .territory-development-overview { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }

  .public-profile-main { grid-template-columns: 96px minmax(0,1fr) !important; gap: 12px; }
  .public-profile-avatar { width: 96px !important; height: 120px !important; }
  .public-profile-info h2 { font-size: 21px; }
  .public-profile-main p { font-size: 11px; }
}

@media (max-width: 360px) {
  .case-nav-button, .fortune-nav-button, .shop-nav-button, .battle-nav-button { font-size: 8px !important; }
  .case-nav-button > span:first-child,
  .fortune-nav-button > span:first-child,
  .shop-nav-button > span:first-child,
  .battle-nav-button > span:first-child { display: block; margin: 0 1px 0 0 !important; font-size: 13px !important; }

  .profile-resource-grid { grid-template-columns: 1fr; }
  #inventorySection .cards-grid,
  #inventorySection .avatars-grid,
  #inventorySection .cars-grid { gap: 6px; }
  #inventorySection .avatar-inventory-actions { grid-template-columns: 1fr; }
  #inventorySection .avatar-inventory-card__image { min-height: 138px; height: 138px; }

  .public-profile-main { grid-template-columns: 82px minmax(0,1fr) !important; }
  .public-profile-avatar { width: 82px !important; height: 108px !important; border-radius: 19px; }
  .public-profile-stats { grid-template-columns: 1fr !important; }

  .territory-development-overview { grid-template-columns: 1fr 1fr; }
  .territory-development-overview article { padding: 9px; }
  .territory-development-overview strong { font-size: 15px; }
}


/* v1.9.53 — на мобильных игровой стол «1000» сразу наверху */
@media (max-width: 820px) {
  .battle-modal-card.is-detail-open .battle-heading,
  .battle-modal-card.is-detail-open .battle-limits {
    display: none;
  }
  .battle-modal-card.is-detail-open {
    padding-top: 14px;
  }
  .battle-modal-card.is-detail-open .battle-detail {
    gap: 10px;
  }
  .battle-modal-card.is-detail-open #battleBack {
    order: 0;
    width: fit-content;
    min-height: 36px;
    margin-bottom: 0;
  }
  .battle-modal-card.is-detail-open .battle-detail__head {
    order: 1;
    margin-bottom: 0;
  }
  .battle-modal-card.is-detail-open .battle-turn-panel,
  .battle-modal-card.is-detail-open .battle-roll-button {
    order: 2;
  }
  .battle-modal-card.is-detail-open .battle-result {
    order: 3;
  }
  .battle-modal-card.is-detail-open .battle-bonus-panel {
    order: 4;
  }
  .battle-modal-card.is-detail-open .battle-scoreboard {
    order: 5;
  }
  .battle-modal-card.is-detail-open .battle-roll-columns {
    order: 6;
  }
  .battle-modal-card.is-detail-open .battle-scoring-rules {
    order: 7;
  }
  .battle-modal-card.is-detail-open .battle-rule-note {
    order: 8;
  }
}

@media (max-width: 600px) {
  .battle-modal-card.is-detail-open .battle-detail__head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: start;
  }
  .battle-modal-card.is-detail-open .battle-detail__head h3 {
    font-size: 18px;
  }
  .battle-modal-card.is-detail-open .battle-detail__head p:last-child {
    font-size: 10px;
    line-height: 1.35;
  }
  .battle-modal-card.is-detail-open .battle-timer {
    min-width: 88px;
    padding: 8px;
    font-size: 11px;
  }
  .battle-modal-card.is-detail-open .battle-turn-panel {
    padding: 12px;
    border-radius: 14px;
  }
}


/* v1.9.54 — чистая и стабильная мобильная верхняя панель */
@media (max-width: 820px) {
  .topbar {
    --mobile-header-row-main: 54px;
    --mobile-header-row-nav: 46px;
    --mobile-header-gap: 8px;
    grid-template-columns: 56px minmax(0, 1fr) 56px !important;
    grid-template-rows: var(--mobile-header-row-main) var(--mobile-header-row-nav) !important;
    grid-template-areas:
      "brand search account"
      "nav nav nav" !important;
    column-gap: 8px !important;
    row-gap: var(--mobile-header-gap) !important;
    align-items: stretch !important;
    isolation: isolate;
  }

  .topbar .brand {
    grid-area: brand !important;
    width: 56px !important;
    max-width: 56px !important;
    height: var(--mobile-header-row-main) !important;
    padding: 6px !important;
    border-radius: 18px !important;
    box-shadow: 0 5px 16px rgba(26,35,46,.11) !important;
  }
  .topbar .brand__mark {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
  }
  .topbar .search {
    grid-area: search !important;
    width: 100% !important;
    height: var(--mobile-header-row-main) !important;
    min-width: 0 !important;
    border-radius: 18px !important;
    box-shadow: 0 5px 16px rgba(26,35,46,.11) !important;
    z-index: 2;
  }
  .topbar .account-button {
    grid-area: account !important;
    width: 56px !important;
    max-width: 56px !important;
    height: var(--mobile-header-row-main) !important;
    padding: 7px !important;
    border-radius: 18px !important;
    box-shadow: 0 5px 16px rgba(26,35,46,.11) !important;
  }
  .topbar .account-avatar {
    width: 40px !important;
    height: 40px !important;
    margin: auto !important;
    border-radius: 13px !important;
  }

  /* Four equal navigation items are placed in their own inner row. */
  #caseButton,
  #fortuneButton,
  #shopButton,
  #battlesButton {
    grid-area: auto !important;
    position: absolute !important;
    top: calc(var(--mobile-header-row-main) + var(--mobile-header-gap)) !important;
    width: calc((100% - 3 * 8px) / 4) !important;
    height: var(--mobile-header-row-nav) !important;
    min-height: var(--mobile-header-row-nav) !important;
    margin: 0 !important;
    padding: 0 7px !important;
    border-radius: 16px !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 4px 13px rgba(26,35,46,.10) !important;
    font-size: clamp(9px, 2.65vw, 13px) !important;
    line-height: 1 !important;
    gap: 4px !important;
    overflow: visible !important;
    z-index: 3;
  }
  #caseButton { left: 0 !important; }
  #fortuneButton { left: calc((100% - 3 * 8px) / 4 + 8px) !important; }
  #shopButton { left: calc(2 * ((100% - 3 * 8px) / 4 + 8px)) !important; }
  #battlesButton { right: 0 !important; left: auto !important; }

  .case-nav-button > span:first-child,
  .fortune-nav-button > span:first-child,
  .shop-nav-button > span:first-child,
  .battle-nav-button > span:first-child {
    display: inline-block !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    font-size: clamp(14px, 4vw, 18px) !important;
    line-height: 1 !important;
  }
  .battle-nav-button::before { content: none !important; }

  #battlesButton .battle-badge {
    position: absolute !important;
    top: 4px !important;
    right: 5px !important;
    transform: none !important;
    display: grid;
    place-items: center;
    min-width: 19px !important;
    height: 19px !important;
    padding: 0 4px !important;
    border: 2px solid rgba(255,255,255,.98) !important;
    border-radius: 999px !important;
    background: #b94646 !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(130,34,34,.22) !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    z-index: 5 !important;
  }
  #battlesButton .battle-badge[hidden] { display: none !important; }

  /* Everything below the header follows the exact final header height. */
  .search-results {
    top: calc(max(var(--mobile-edge), env(safe-area-inset-top)) + var(--mobile-header-row-main) + var(--mobile-header-row-nav) + var(--mobile-header-gap) + 8px) !important;
  }
  .panel--layers,
  .floating-button {
    top: calc(max(var(--mobile-edge), env(safe-area-inset-top)) + var(--mobile-header-row-main) + var(--mobile-header-row-nav) + var(--mobile-header-gap) + 12px) !important;
  }
  .maplibregl-ctrl-top-right {
    top: calc(max(var(--mobile-edge), env(safe-area-inset-top)) + var(--mobile-header-row-main) + var(--mobile-header-row-nav) + var(--mobile-header-gap) + 9px) !important;
  }
}

@media (max-width: 430px) {
  .topbar {
    --mobile-header-row-main: 52px;
    --mobile-header-row-nav: 44px;
    --mobile-header-gap: 7px;
    grid-template-columns: 52px minmax(0,1fr) 52px !important;
    column-gap: 7px !important;
  }
  .topbar .brand,
  .topbar .account-button {
    width: 52px !important;
    max-width: 52px !important;
    height: 52px !important;
  }
  .topbar .brand__mark { width: 40px !important; height: 40px !important; }
  .topbar .account-avatar { width: 38px !important; height: 38px !important; }
  #caseButton,
  #fortuneButton,
  #shopButton,
  #battlesButton {
    top: calc(var(--mobile-header-row-main) + var(--mobile-header-gap)) !important;
    width: calc((100% - 3 * 7px) / 4) !important;
    padding-inline: 4px !important;
    border-radius: 15px !important;
    gap: 3px !important;
    font-size: clamp(9px, 2.75vw, 11px) !important;
  }
  #caseButton { left: 0 !important; }
  #fortuneButton { left: calc((100% - 3 * 7px) / 4 + 7px) !important; }
  #shopButton { left: calc(2 * ((100% - 3 * 7px) / 4 + 7px)) !important; }
  #battlesButton { right: 0 !important; }
  #battlesButton .battle-badge {
    top: 3px !important;
    right: 4px !important;
    min-width: 18px !important;
    height: 18px !important;
    font-size: 8px !important;
  }
}

@media (max-width: 350px) {
  .topbar {
    grid-template-columns: 48px minmax(0,1fr) 48px !important;
    column-gap: 6px !important;
  }
  .topbar .brand,
  .topbar .account-button {
    width: 48px !important;
    max-width: 48px !important;
  }
  .topbar .brand__mark { width: 38px !important; height: 38px !important; }
  .topbar .account-avatar { width: 36px !important; height: 36px !important; }
  #caseButton,
  #fortuneButton,
  #shopButton,
  #battlesButton {
    font-size: 8px !important;
    gap: 2px !important;
  }
  .case-nav-button > span:first-child,
  .fortune-nav-button > span:first-child,
  .shop-nav-button > span:first-child,
  .battle-nav-button > span:first-child { font-size: 13px !important; }
}

/* v1.9.58 — накопление и ручной сбор дохода территории */
.territory-info-row--stored-income strong {
  color: #8a6500;
  font-weight: 950;
}
.territory-collect-income-button {
  width: 100%;
  min-height: 40px;
  margin-top: 10px;
  border: 1px solid rgba(167, 123, 0, .28);
  border-radius: 12px;
  background: linear-gradient(135deg, #fff7c7, #ffd84f);
  color: #493700;
  font: inherit;
  font-size: 11px;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 7px 18px rgba(197, 148, 0, .12);
}
.territory-collect-income-button:hover:not(:disabled) { filter: brightness(.97); }
.territory-collect-income-button:disabled { cursor: wait; opacity: .7; }
.territory-info-menu__content .territory-collect-income-button {
  min-height: 44px;
  margin-top: 9px;
  border-radius: 13px;
  font-size: 12px;
}
@media (max-width: 720px) {
  .territory-info-menu__content .territory-collect-income-button { min-height: 48px; }
}


/* v1.9.64 — уникальные шестизначные серийные номера экземпляров аватаров */
.avatar-inventory-card__image { position: relative; }
.avatar-serial-badge {
  position: absolute;
  z-index: 6;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 7px;
  border: 1px solid rgba(255,255,255,.72);
  border-radius: 999px;
  background: rgba(17,24,39,.86);
  box-shadow: 0 3px 10px rgba(15,23,42,.18);
  color: #fff;
  font-size: 9px;
  font-weight: 1000;
  line-height: 1;
  letter-spacing: .08em;
  white-space: nowrap;
  pointer-events: none;
}
.public-profile-avatar-wrap {
  position: relative;
  width: max-content;
  max-width: 100%;
}
.public-profile-avatar-serial {
  right: 7px;
  bottom: 7px;
  z-index: 7;
}
.case-avatar-serial {
  right: 6px;
  bottom: 6px;
  z-index: 6;
  min-height: 19px;
  padding: 3px 5px;
  font-size: 7px;
}
.case-reward-card .case-avatar-serial { position: absolute; }
@media (max-width: 520px) {
  .avatar-serial-badge { right: 6px; bottom: 6px; min-height: 20px; padding: 3px 6px; font-size: 8px; }
}

/* v1.10.0 — VK ID */
.vk-auth-block { display: grid; gap: 8px; }
.vk-id-button { min-height: 48px; border-color: #0077ff; background: #0077ff; color: #fff; box-shadow: 0 8px 22px rgba(0,119,255,.22); }
.vk-id-button:hover:not(:disabled) { background: #086ee1; }
.vk-id-button:disabled { cursor: not-allowed; opacity: .48; transform: none; }
.vk-id-button__mark { display: inline-grid; place-items: center; min-width: 30px; height: 24px; padding: 0 5px; border-radius: 7px; background: rgba(255,255,255,.18); color: #fff; font-size: 10px; font-weight: 950; letter-spacing: -.04em; }
.auth-divider { position: relative; display: grid; place-items: center; min-height: 24px; color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.auth-divider::before { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line); content: ''; }
.auth-divider span { position: relative; z-index: 1; padding: 0 10px; background: #fff; }
.auth-provider-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px; padding: 13px; border: 1px solid #dce5ef; border-radius: 14px; background: #f7faff; }
.auth-provider-card > div { min-width: 0; display: grid; gap: 3px; }
.auth-provider-card__title { color: #52606d; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .07em; }
.auth-provider-card strong { font-size: 14px; }
.auth-provider-card small { color: var(--muted); font-size: 10px; line-height: 1.45; }
.auth-provider-card .button--compact { height: 42px; min-height: 42px; }
.vk-only-note { margin: 2px 0 12px; padding: 10px 12px; border-radius: 11px; background: #f4f6f8; }
@media (max-width: 520px) {
  .auth-provider-card { grid-template-columns: 1fr; }
  .auth-provider-card .vk-id-button { width: 100%; }
}