@font-face {
  font-family: 'Segoe UI Emoji';
  src: url('/assets/fonts/segoeuiemoji.ttf');
}

/* #region ГЛОБАЛЬНОЕ ОФОРМЛЕНИЕ */
:root {
  --background: #FFF;
  --background-transp: #FFFC;
  --text: #000;
  --text-shadow: #000;
  --text-disabled: #CCC;
  --shadow: #000;
  --border: #000;
  --border-transp: #0004;
  --accent: #F00;
  --progress: #0D0;
  --selection: #F90;
  --link: #00E;
  --team-0: #444;
  --team-1: #B00;
  --team-2: #0B0;
  --team-3: #08F;
  --level-1: #FECE5A; --level-2: #FFA630;
  --level-3: #FF7315; --level-4: #E40000;
  --level-5: #FD2992; --level-6: #EB26CD;
  --level-7: #C124E0; --level-8: #9627F4;
  --level-9: #6D00F5; --level-10: #3A00F7;
}
html, body { height: 100%; }
body {
  margin: 0;
  position: relative;
  color: var(--text);
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: none;
}
body, input, button {
  font-family: 'Manrope', sans-serif;
}
button {
  cursor: pointer;
  touch-action: manipulation;
}
button:disabled { cursor: not-allowed }
.icon-button {
  display: grid;
  place-items: center;
}
a {
  text-decoration: none;
  color: var(--link)
}
a:hover, a:active { text-decoration: underline }

.level-pill {
  display: inline-block;
  font-size: .7em;
  padding: 0 .15em;
  border-radius: .25em;
  vertical-align: middle;
  margin-left: .25em;
  min-width: 1em;
  text-align: center;
  color: #FFF;
}
.level-pill[data-level="1"],
.level-pill[data-level="2"],
.level-pill[data-level="3"] { color: #000; }

.fatal-error {
  text-align: center;
  place-self: center;
  font-size: 1.5em;
  padding: 1em;
}
/* #endregion */

/* #region ВСЯКИЕ ВСПЛЫВАШКИ */
.popup-touch {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: #0008;
  z-index: 2;
  display: none;
}
body:has(.popup:not(.hidden)) .popup-touch {
  display: block;
}
.popup {
  z-index: 3;
  position: absolute;
  background: var(--background);
  border: 2px var(--border) solid;
  box-sizing: border-box;
  max-height: 100%;
  padding: .5em;
}
.popup.pp-center {
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.popup-header {
  text-align: center;
  margin: .5em 0;
}
.popup-close {
  font-size: 1.5em;
  padding: 0 .1em;
  align-self: center;
}
.profile .popup-close {
  justify-self: flex-end;
  margin: auto auto 0.5em;
}
.popup .toastify {
  max-width: 40%;
  margin-top: 1.5em;
}

.popping-button {
  position: relative;
}
.pb-sub {
  display: flex;
  position: absolute;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem .25rem;
  padding: .5rem;
  width: 150%;
  max-width: 150%;
  background: var(--background);
  box-shadow: 0 0 1rem var(--shadow);
}
.pb-arrow,
.pb-arrow::before {
  position: absolute;
  width: 8px;
  height: 8px;
  background: inherit;
}
.pb-arrow {
  visibility: hidden;
}
.pb-arrow::before {
  content: '';
  visibility: visible;
  transform: rotate(45deg);
}
.pb-sub[data-popper-placement^='top'] > .pb-arrow { bottom: -4px; }
.pb-sub[data-popper-placement^='bottom'] > .pb-arrow { top: -4px; }
.pb-sub[data-popper-placement^='left'] > .pb-arrow { right: -4px; }
.pb-sub[data-popper-placement^='right'] > .pb-arrow { left: -4px; }
.pb-sub > button *, .pb-main * {
  pointer-events: none;
}
/* #endregion */

/* #region КАРТА */
#map {
  width: 100%;
  height: 100%
}
.ol-zoom {
  top: 50%;
  transform: translateY(-50%);
}
#map .ol-rotate {
  opacity: 1;
  visibility: visible;
  top: 50%; left: .5em;
  right: unset;
  transform: translateY(-200%);
}
.ol-scale-line {
  bottom: 2.6em;
}
.ol-layer__base[data-code="goo"] {
  filter: brightness(.6);
}
.region-picker {
  pointer-events: auto;
  top: 50%; left: .5em;
  transform: translateY(100%);
}
.region-picker.active {
  outline: 2px var(--selection) solid;
}
/* #endregion */

/* #region КАРУСЕЛИ */
.splide__arrow {
  opacity: 1;
}
.attack-slider-wrp, .draw-slider-wrp {
  position: absolute;
  z-index: 3;
  top: 75%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
#attack-slider, .attack-slider-highlevel, .deploy-slider-error, #draw-slider {
  background: var(--background-transp);
}
.splide__slide {
  display: flex;
  flex-direction: column;
  opacity: .5;
}
.splide__slide.is-active {
  opacity: 1;
}
.catalysers-list__level, .cores-list__level {
  justify-self: center;
  align-self: center;
  margin: auto;
  font-size: 2em;
  font-weight: bold;
  text-wrap: nowrap;
}
.catalysers-list__amount, .cores-list__amount {
  align-self: flex-end;
  font-size: 1.3em;
}
.splide__slide[data-rarity] .catalysers-list__amount {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.splide__slide[data-rarity] .catalysers-list__amount:before {
  content: '';
  display: inline-block;
  background: currentColor;
  width: 1em;
  height: 1em;
}
.splide__slide[data-rarity="3"] .catalysers-list__amount:before { clip-path: url(#rarity-3); }
.splide__slide[data-rarity="5"] .catalysers-list__amount:before { clip-path: url(#rarity-5); }
.attack-slider-highlevel, .deploy-slider-error {
  text-align: center;
  color: #0000;
  line-height: 1.25;
  height: 2.5em;
}
.attack-slider-buttons, .draw-slider-buttons {
  display: flex;
  justify-content: space-evenly;
  margin-top: .5em;
  gap: 1em;
  padding: 0 2em;
}
.attack-slider-buttons button, .draw-slider-buttons button {
  font-size: 1.2em;
  flex: 1;
  max-width: 200px;
}
.refs-list__title {
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.refs-list__image {
  flex: 1;
  display: grid;
  place-items: center;
}
.refs-list__image div {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  max-width: 200px;
  width: 100%;
  height: 100%
}
.refs-list__info {
  display: flex;
  justify-content: space-evenly;
  padding: 0 .5em;
}
/* #endregion */

/* #region ТОСТЫ */
.interaction-toast, .error-toast {
  background: var(--background);
  border: 1px var(--border) solid;
  box-shadow: 0 0 15px var(--shadow);
  color: var(--text);
  padding: .25em .5em;
}
.error-toast {
  border-color: var(--accent);
  box-shadow: 0 0 15px var(--accent);
}
:is(.interaction-toast, .error-toast) .toast-close {
  color: var(--text)
}
/* #endregion */

/* #region ШАПКА */
.topleft-container {
  position: absolute;
  top: .25em; left: .25em;
  max-width: 300px;
  pointer-events: none;
}
.self-info {
  padding: .25em;
  border: 2px var(--border) solid;
  background-color: var(--background-transp);
  display: flex;
  flex-direction: column;
  gap: .25em;
  margin-bottom: .25em;
  pointer-events: all;
}
.profile-link {
  cursor: pointer;
}
.profile-link:hover {
  text-decoration: underline;
}
.game-menu {
  display: flex;
  flex-wrap: wrap;
  gap: .3em;
}
.game-menu button {
  pointer-events: all;
}

.xp-diff {
  color: var(--progress);
  opacity: 0;
}
.xp-diff.active {
  animation: fadeout 1s linear 1 normal;
}
@keyframes fadeout {
  from { opacity: 1 }
  to { opacity: 0 }
}
/* #endregion */

/* #region ИНВЕНТАРЬ */
.inventory {
  width: calc(100% - 1em);
  height: 60%;
  padding: .25em;
  display: flex;
  flex-direction: column;
}
.inventory__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: .25em;
}
.inventory__tabs {
  display: flex;
  overflow-x: auto;
  padding: 0 0 0 .25em;
  gap: .25em;
  flex: 1;
}
.inventory__tab {
  border: 2px #0000 solid;
  border-bottom: none;
  padding: 0 .15em;
  cursor: pointer;
  white-space: nowrap;
}
.inventory__tab:hover {
  border-color: var(--border-transp);
}
.inventory__tab.active {
  border-color: var(--border)
}
#inventory__close {
  font-size: .8em;
  padding: .2em .6em;
}
.inventory__content {
  --column-min: 100px;
  border: 2px var(--border) solid;
  padding: .25em;
  overflow-y: auto;
  flex: 1;
  margin-bottom: .25em;
}
.inventory__content[data-tab="2"] {
  --column-min: 120px;
}
:root[lang^="ru"] .inventory__content[data-tab="2"] {
  --column-min: 135px;
}
.inventory__content:not([data-tab="3"]) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--column-min), 1fr));
  align-content: flex-start;
  gap: .25em;
}
.inventory__item {
  display: flex;
  flex-direction: column;
  border: 2px #0000 solid;
}
.inventory__content[data-tab="3"] .inventory__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 .25em;
}
.inventory__item.selected {
  border-color: var(--selection);
}
.inventory__item-left {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inventory__item-title {
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inventory__item-title.has-rarity:before {
  content: '';
  display: inline-block;
  width: .75em;
  height: .75em;
  background: currentColor;
  margin-right: .25em;
  clip-path: url(#rarity-unk);
}
.inventory__item-title.has-rarity.rarity-1:before { clip-path: url(#rarity-1); }
.inventory__item-title.has-rarity.rarity-2:before { clip-path: url(#rarity-2); }
.inventory__item-title.has-rarity.rarity-3:before { clip-path: url(#rarity-3); }
.inventory__item-title.has-rarity.rarity-4:before { clip-path: url(#rarity-4); }
.inventory__item-title.has-rarity.rarity-5:before { clip-path: url(#rarity-5); }
.inventory__content[data-tab="3"] .inventory__item-descr {
  margin-left: .5em;
  font-size: .75em;
}
.inventory__item-controls {
  align-self: center;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .1em;
}
.inventory__controls {
  display: flex;
  justify-content: flex-end;
  gap: .25em;
}

.inventory__manage-amount {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--background);
  border: 2px var(--border) solid;
  padding: .5em;
  max-width: 75%;
}
.inventory__manage-amount button {
  font-size: 1.1em;
}
.inventory__ma-item {
  text-align: center;
  font-size: 1.3em;
  font-weight: bold;
  line-height: 1;
}
.inventory__ma-counter {
  display: flex;
  gap: .25em;
  justify-content: space-between;
  align-items: center;
  margin: .25em 0;
}
.inventory__ma-counter button {
  padding: 0 .4em;
}
#inventory__ma-amount {
  font-size: 1em;
}
.inventory__ma-buttons {
  display: flex;
  justify-content: space-between;
  gap: .25em;
}
/* #endregion */

/* #region ИКОНКИ ПРЕДМЕТОВ */
.item-icon {
  display: inline-block;
  width: .75em;
  height: .75em;
}
.item-icon.type-1 { border-radius: 100%; }
.item-icon.type-2 { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.item-icon.rarity-1 { clip-path: url(#rarity-1); }
.item-icon.rarity-2 { clip-path: url(#rarity-2); }
.item-icon.rarity-3 { clip-path: url(#rarity-3); }
.item-icon.rarity-4 { clip-path: url(#rarity-4); }
.item-icon.rarity-5 { clip-path: url(#rarity-5); }
/* #endregion */

/* #region КАРТОЧКА ТОЧКИ */
.info {
  top: 0; right: 0;
  width: 320px;
  padding: 0 5px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  overflow: auto;
}
.i-header {
  text-align: center;
  margin: 0;
  border-bottom: 1px var(--border) dashed;
  width: 100%;
}
#i-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
}
.i-image-box {
  width: 100%;
  min-height: 200px;
  position: relative;
  flex: 1;
}
.i-image-box.imghid {
  min-height: 2.2em;
  max-height: 2.2em;
}
#i-image {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}
.i-image-box.imghid #i-image { display: none; }
#i-level, #i-ref {
  position: absolute;
  font-weight: bold;
  text-shadow: 0 0 2px var(--text-shadow), 0 0 2px var(--text-shadow), 0 0 2px var(--text-shadow), 0 0 2px var(--text-shadow);
  z-index: 2;
}
#i-level {
  top: 0; left: .2em;
  font-size: 1.5em;
}
#i-ref {
  bottom: 0; right: .2em;
  color: var(--text-disabled);
  font-size: 1.25em;
}
#i-ref[data-has="1"] {
  color: var(--selection)
}
.i-stat {
  display: flex;
  flex-direction: column;
  align-self: flex-start;
  width: 100%;
  flex: 1;
}
.i-stat__tools {
  position: absolute;
  right: 5px;
  display: flex;
  flex-direction: column;
  gap: .25em;
}
.i-stat__tools button {
  font-size: 20px;
  padding: .15em;
}
.i-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .25em;
  justify-content: center;
  margin: .5em 0 1.5em;
}
#i-stat__energy {
  text-align: center;
}
.i-buttons > button,
.i-buttons .pb-main,
.i-buttons .pb-sub > button {
  font-size: 1.1em;
}
.i-buttons svg {
  fill: currentColor;
}
#discover {
  position: relative;
}
#discover:after {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 110%);
  font-size: 80%;
  width: 100%;
  color: var(--text);
}
#discover[data-time]:after {
  content: '~' attr(data-time);
}
#discover[data-time][data-remain]:after {
  content: '~' attr(data-time) ' # ' attr(data-remain);
}
.discovery-ring {
  visibility: hidden;
  position: absolute;
  inset: 0;
  fill: #0000;
  stroke: var(--accent);
  stroke-width: 4px;
  pointer-events: none;
  stroke-dasharray: var(--prm, 0);
  stroke-dashoffset: var(--off, 0);
}
.discovery-ring.init {
  transition: stroke-dashoffset 1s linear;
}
#discover[data-time] > .discovery-ring {
  visibility: visible;
}

.i-stat__cores {
  display: grid;
  grid-template-columns: minmax(0, 2fr) 1fr 1fr minmax(0, 2fr);
  align-items: center;
  gap: .25em;
}
.i-stat__core-info {
  display: flex;
  flex-direction: column;
}
.i-stat__core-info:nth-child(4n+1) {
  text-align: right;
  line-height: 1;
}
.i-stat__core-info:nth-child(4n) {
  line-height: 1;
}
.i-stat__core-info .profile-link {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  line-height: 1.1;
}
.i-stat__core {
  --energy: 0%;
  text-align: center;
  display: inline-block;
  background: linear-gradient(to top, var(--bgc) var(--energy), #0000 0);
  justify-self: center;
  color: #EEE;
  width: 2em;
  height: 1.4em;
  border: 1px var(--border) solid;
  text-shadow: 0 0 2px var(--text-shadow), 0 0 2px var(--text-shadow), 0 0 2px var(--text-shadow), 0 0 2px var(--text-shadow)
}
.i-stat__core.selected {
  border-color: var(--selection);
  border-width: 3px;
}
/* #endregion */

/* #region ПРОФИЛЬ */
.profile {
  top: 0; right: 0;
  width: 320px;
  padding: 0 5px 5px;
  display: flex;
  flex-direction: column;
}
.pr-header {
  margin: 0;
  text-align: center;
}
.pr-xp {
  display: flex;
  gap: .5em;
  align-items: center;
}
.pr-xp-details {
  display: flex;
  flex-direction: column;
  gap: .25em;
  align-items: center;
  width: 100%
}
.pr-xp-progress {
  height: 6px;
  width: 100%;
  background: var(--text-disabled);
  position: relative;
  border: 1px var(--border) solid;
}
.pr-xp-check {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background: var(--text);
}
.pr-xp-check:nth-child(even) {
  width: 2px;
  transform: translate(-50%, 0);
}
.pr-xp-progress-bar {
  height: 100%;
}
.pr-xp-level {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pr-xp-level-title {
  font-size: .75em;
}
#pr-xp-level-num {
  font-size: 2.5em;
  line-height: 1;
}
.pr-scroll {
  margin-bottom: .5em;
  flex: 1;
  overflow: auto;
}
.pr-stats__section {
  margin-bottom: .5em;
}
.pr-stats__section-header {
  margin: 0 0 0 1em;
}
.pr-stat {
  display: grid;
  grid-template-columns: 60% 40%;
}
.pr-stat span:last-child {
  text-align: right;
}
.pr-stat:not(:last-child) {
  border-bottom: 1px var(--border-transp) solid;
}

.pr-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .25rem;
  justify-content: center;
  margin-bottom: .5em;
}
.badge {
  position: relative;
}
.badge__body {
  display: block;
  font-size: 1.25rem;
  width: 1.6em;
  height: 1.6em;
  text-align: center;
  background-color: var(--bg, none);
  border: 2px var(--br, transparent) solid;
  border-radius: 50%;
  font-family: 'Segoe UI Emoji';
  overflow: hidden;
}
.badge__body::after {
  content: attr(data-icon);
  position: absolute;
  top: 55%;
  translate: -50% -50%;
}
.badge.tier-0 .badge__body { opacity: .1; }
.badge.tier-0 .badge__body::after { filter: brightness(0); }
.badge.tier-1 .badge__body::after { filter: sepia() hue-rotate(50deg); }
.badge.tier-2 .badge__body::after { filter: sepia() hue-rotate(-20deg); }
.badge.tier-3 .badge__body::after { filter: grayscale() brightness(1.25); }
.badge.tier-4 .badge__body::after { filter: sepia(); }
.badge.tier-5 .badge__body::after { filter: sepia() hue-rotate(175deg); }
.badge.tier-6 .badge__body::after { filter: sepia() hue-rotate(-110deg); }

.badge:not(.tier-6) > .badge__next::before,
.badge:not(.tier-6) > .badge__next::after { 
  --bw: 2px;
  --hbw: calc(var(--bw) / 2);
  --h: 8%;
  --w: 90%;
  --o: calc((100% - var(--w)) / 2);
  content: '';
  display: block;
  position: absolute;
}
.badge__next::before {
  background: var(--br);
  border: var(--bw) var(--br) solid;
  width: var(--w);
  height: var(--h);
  left: calc(var(--o) - var(--bw));
  bottom: calc(-1 * var(--o));
}
.badge__next::after {
  background: var(--bg);
  width: calc(var(--w) * var(--prg, 0));
  height: var(--h);
  left: var(--o);
  bottom: calc(calc(-1 * var(--o)) + var(--bw));
}

.badge__shape {
  position: absolute;
  inset: 0;
}
.badge.award .badge__body {
  border-radius: unset;
}
.badge.award .badge__body::after {
  top: 60%;
  left: 50%;
  scale: .9;
}

.badge-info {
  display: grid;
  grid-template:
    'L R'
    'B B' / 1fr 3fr;
  gap: 0 1rem;
  margin: 0 auto;
  border: 2px var(--border) solid;
  padding: .5rem;
  box-sizing: border-box;
  min-width: 90%;
}
.prbi__left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  grid-area: L;
}
.prbi__right {
  grid-area: R;
}
.prbi__title {
  margin: 0 0 .25rem 0;
}
.prbi__description {
  margin: 0;
}
.badge-info .badge .badge__body {
  font-size: 2.5rem;
  border-width: 3px;
}
.badge-info .badge .badge__next::before,
.badge-info .badge .badge__next::after {
  content: none;
}
.prbi__bottom {
  --column-min: 100px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--column-min), 1fr));
  grid-area: B;
  border-top: 2px var(--border) solid;
  padding-top: .5rem;
  margin-top: .5rem;
}
.next-req {
  color: var(--br);
  font-weight: bold;
}
.next-req::before {
  content: '';
  display: inline-block;
  height: .75em;
  aspect-ratio: 1;
  box-sizing: border-box;
  background-color: var(--bg);
  border: 2px var(--br) solid;
  border-radius: 100%;
  margin-right: .25em;
}
.next-req.unacquired {
  opacity: .5;
}
.prbi__achieved {
  grid-column: 1 / -1;
  text-align: center;
}
/* #endregion */

/* #region ЛИДЕРБОРДА */
.leaderboard {
  min-width: 75%;
  max-width: 90%;
  height: 60%;
  display: flex;
  flex-direction: column;
  padding: .25em;
}
.leaderboard__list-wrp {
  flex: 1;
  margin: 0;
  overflow-y: auto;
}
.leaderboard__list {
  width: 100%;
  border-collapse: collapse;
}
.leaderboard__list td:nth-child(1) { text-align: center; }
.leaderboard__list td:nth-child(3) { text-align: right; }
.leaderboard__list .own {
  border: 2px var(--accent) solid;
}
.leaderboard__place {
  display: flex;
  justify-content: space-between;
  margin: .25em 0 .5em;
}
.leaderboard .popup-close {
  align-self: center;
}
/* #endregion */

/* #region ПОДВАЛ */
.bottom-container {
  position: absolute;
  bottom: .5em; left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: .25em;
  width: calc(100% - 1em);
  pointer-events: none;
}
.bottom-container button {
  pointer-events: all;
}
#toggle-follow {
  opacity: .5;
  font-size: 1.1em;
}
#toggle-follow[data-active="true"] {
  opacity: 1;
}
/* #endregion */

/* #region ОТБИВКИ */
#notifs-menu {
  margin: 0 0 0 auto;
  position: relative;
}
#notifs-menu[data-count]:before {
  content: attr(data-count);
  position: absolute;
  top: 0; right: -.5em;
  transform: translateY(-50%);
  background: var(--accent);
  color: #EEE;
  border-radius: 2em;
  padding: 0 .25em;
  min-width: 1.4em;
  box-sizing: border-box;
  font-size: .8em;
}
.notifs {
  width: 75%;
  display: flex;
  flex-direction: column;
}
.notifs__list {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  margin-bottom: .25em;
}
.notifs__entry {
  display: grid;
  grid-template-areas:
    'S H B'
    'S T B';
  grid-template-columns: 2fr 5fr auto;
  gap: 0 .5em;
  border-top: 1px var(--border-transp) dashed;
  padding: .25em;
}
.notifs__entry.latest {
  border-top: 2px var(--accent) solid;
}
.notifs__entry:first-child {
  border: none;
}
.notifs__entry-stamp {
  grid-area: S;
  display: grid;
  place-self: center;
  text-align: center;
}
.notifs__entry-date {
  opacity: .5;
  font-size: .7em;
  line-height: 1;
}
.notifs__entry-title {
  grid-area: H;
  font-weight: bold;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  white-space: nowrap;
}
.notifs__entry-text {
  grid-area: T;
  font-size: .8em;
}
.notifs__entry-view {
  grid-area: B;
  align-self: center;
  aspect-ratio: 1;
  padding: 0 .25em;
}
/* #endregion */

/* #region СЛОИ */
#layers {
  position: absolute;
  top: .5em; right: .5em;
  z-index: 1;
}
.layers-config {
  padding: .5em;
}
.layers-config__header {
  text-align: center;
  margin: 0 0 .25em;
}
.layers-config__subheader {
  margin: .25em 0 .15em 1em;
}
.layers-config__list {
  display: flex;
  flex-direction: column;
  margin-bottom: .5em;
}
.layers-config__buttons {
  display: flex;
  justify-content: space-between;
}
.layers-config .popup-close {
  font-size: .8em;
  padding: 1px 6px;
}
/* #endregion */

/* #region НАСТРОЙКИ И АТРИБУЦИЯ */
.settings, .credits {
  padding: .5em;
  display: flex;
  flex-direction: column;
  height: 60%;
}
.settings h3, .credits h3 {
  text-align: center;
  margin: 0 0 .5em;
}
.settings-content, .credits-content {
  flex: 1;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: .5em;
}
.settings-section {
  display: flex;
  flex-direction: column;
  gap: .15em;
}
.settings-section__header {
  margin: 0 0 0 1em;
}
.settings-section__item {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: .5em;
}
.settings-section__item input[type="checkbox"] {
  scale: 1.2;
}
.settings-section__item :last-child:not(select) {
  justify-self: center;
}
.settings .popup-close { margin-top: .25em }
.regions-opacity__range {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#settings-telegram {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#account-guid {
  user-select: text;
  filter: blur(4px);
}
#account-guid:is(:hover, :active) {
  filter: none;
}
/* #endregion */

/* #region СЧЕТ */
.score {
  color: var(--text);
  padding: .25em;
}
.score__header {
  text-align: center;
  margin: 0 0 .25em;
}
.score__graphs {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 .25em;
  align-items: center;
}
.score__graph {
  --total: calc(var(--r) + var(--g) + var(--b));
  width: 100%;
  height: 1em;
  border: 1px var(--border) solid;
  box-sizing: border-box;
  position: relative;
}
.score__graph > div {
  position: absolute;
  height: 100%;
  top: 0;
}
.score__graph-red {
  background: var(--team-1);
  left: 0;
  width: calc(var(--r) / var(--total) * 100%)
}
.score__graph-green {
  background: var(--team-2);
  left: calc(var(--r) / var(--total) * 100%);
  width: calc(var(--g) / var(--total) * 100%)
}
.score__graph-blue {
  background: var(--team-3);
  right: 0;
  width: calc(var(--b) / var(--total) * 100%)
}
.score__diff {
  font-size: .7em;
  vertical-align: 2px;
}
.score p {
  margin: .25em 0 .5em;
}
.score__table {
  border-spacing: 0;
  width: 100%;
  text-align: center;
  margin: .25em 0;
}
.score__table .diff {
  font-size: .7em;
}
.score__table :is(th, td) {
  border: 1px var(--border) solid;
  background: var(--background);
  padding: .25em;
  line-height: 1;
}
.score__table thead th,
.score__table tr:not(:last-child) :is(th, td) {
  border-bottom: none;
}
.score__table :is(th, td):not(:first-child) {
  border-left: none;
}
.score__table th.empty {
  border-top: none;
  border-left: none;
  background: #0000;
}
.score__timers {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 0 1em;
}
.score__timers span:nth-child(even) {
  text-align: center;
}
/* #endregion */

/* #region ЛЕВЕЛАП */
.levelup {
  max-width: 75%;
}
.levelup .popup-header {
  margin-top: 0;
}
.levelup .level-pill {
  display: block;
  margin: 0 auto;
  width: 6rem;
  font-size: 2.5rem;
  font-weight: bold;
}
.levelup-rewards {
  display: flex;
  flex-wrap: wrap;
  gap: 0 .5em;
  font-size: .9rem;
}
.levelup-rewards__title {
  width: 100%;
  text-align: center;
  margin: .75rem 0 .25rem;
}
/* #endregion */

/* #region ГЛОБАЛЬНОЕ ОФОРМЛЕНИЕ (еще кусочек) */
.hidden { display: none !important }
.team-r { color: var(--team-1) }
.team-g { color: var(--team-2) }
.team-b { color: var(--team-3) }

.tier-0 {
  --bg: hsl(0 0% 0% / .2);
  --br: hsl(0 0% 0%);
}
.tier-1 {
  --bg: hsl(110 100% 85%);
  --br: hsl(110 32% 44%);
}
.tier-2 {
  --bg: hsl(24 100% 81%);
  --br: hsl(24 46% 36%);
}
.tier-3 {
  --bg: hsl(0 0% 81%);
  --br: hsl(0 0% 36%);
}
.tier-4 {
  --bg: hsl(45 100% 81%);
  --br: hsl(45 46% 36%);
}
.tier-5 {
  --bg: hsl(215 100% 81%);
  --br: hsl(215 46% 36%);
}
.tier-6 {
  --bg: hsl(312 100% 81%);
  --br: hsl(312 46% 36%);
}
/* #endregion */

/* #region АДАПТИВ (425 пкс) */
@media (max-width: 425px) {
  /* .self-info {
    font-size: 80%;
  } */
  .inventory, .leaderboard, .settings, .credits, .notifs {
    width: 100%;
    max-width: 100%;
    height: 100%;
  }
  .region-picker button {
    font-size: 1.5em;
  }
  .inventory__tabs {
    font-size: .8em;
  }
  #inventory__close {
    padding-block: 0;
  }
  .info, .profile {
    top: 50%; left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
  }
  .i-image-box {
    min-height: 2.2em;
    max-height: 200px;
  }
  #refs-list li {
    font-size: 80%;
  }
  .refs-list__info {
    padding: 0;
  }
  #refs-list li {
    font-size: 80%;
  }
  .refs-list__info {
    padding: 0;
  }
  .score {
    width: calc(100% - .5em);
  }
}
/* #endregion */

/* #region АДАПТИВ (360 пкс) */
@media (max-width: 360px) {
  .toastify-left {
    margin-left: 1em;
  }
  .toastify-right {
    margin-right: 1em;
  }
}
/* #endregion */

/* #region АДАПТИВ (320 пкс) */
@media (max-width: 320px) {
  .ol-zoom.ol-control button, .ol-rotate button, .region-picker button {
    font-size: 1em;
  }
  .self-info, #ops, .follow-label {
    font-size: .7em;
  }
  #i-title, #pr-name {
    font-size: .9em;
  }
  .i-buttons > button {
    width: 100%
  }
  #discover[data-time] {
    margin-bottom: .9em;
  }
  .notifs__entry {
    font-size: .8em;
  }
  .notifs__entry-view span {
    font-size: 18px;
  }
}
/* #endregion */

/* #region ТЕМНАЯ ТЕМА */
:root[data-theme="dark"] {
  --background: #1A1A1A;
  --background-transp: #1A1A1ACC;
  --text: #D1D1D1;
  --text-shadow: #000;
  --text-disabled: #999;
  --shadow: #000;
  --border: #D1D1D1;
  --border-transp: #D1D1D144;
  --accent: #A00;
  --progress: #0A0;
  --selection: #BB7100;
  --link: #9E9EFF;
  --team-0: #CCC;
  --ol-background-color: var(--background);
  --ol-partial-background-color: var(--background-transp);
  --ol-foreground-color: var(--text);
  --ol-subtle-foreground-color: #8F8F8F;
}
:root[data-theme="dark"] .ol-layer__base[data-code="osm"] {
  filter: invert(1) hue-rotate(180deg) brightness(.75) grayscale(1);
}
:root[data-theme="dark"] #i-image {
  filter: brightness(.75);
}
:root[data-theme="dark"] .tier-0 {
  --bg: hsl(0 0% 100% / .2);
  --br: hsl(0 0% 100%);
}
:root[data-theme="dark"] .badge.tier-0 .badge__body::after {
  filter: brightness(0) invert();
}
:root[data-theme="dark"] .next-req {
  color: var(--bg);
}
:root[data-theme="dark"] .next-req.unacquired {
  opacity: .3;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background: #1A1A1A;
    --background-transp: #1A1A1ACC;
    --text: #D1D1D1;
    --text-shadow: #000;
    --text-disabled: #999;
    --shadow: #000;
    --border: #D1D1D1;
    --border-transp: #D1D1D144;
    --accent: #A00;
    --progress: #0A0;
    --selection: #BB7100;
    --link: #9E9EFF;
    --team-0: #CCC;
    --ol-background-color: var(--background);
    --ol-partial-background-color: var(--background-transp);
    --ol-foreground-color: var(--text);
    --ol-subtle-foreground-color: #8F8F8F;
  }
  :root:not([data-theme="light"]) .ol-layer__base[data-code="osm"] {
    filter: invert(1) brightness(.75) grayscale(1);
  }
  :root:not([data-theme="light"]) #i-image {
    filter: brightness(.75);
  }
  :root:not([data-theme="light"]) .tier-0 {
    --bg: hsl(0 0% 100% / .2);
    --br: hsl(0 0% 100%);
  }
  :root:not([data-theme="light"]) .badge.tier-0 .badge__body::after {
    filter: brightness(0) invert();
  }
  :root:not([data-theme="light"]) .next-req {
    color: var(--bg);
  }
  :root:not([data-theme="light"]) .next-req.unacquired {
    opacity: .3;
  }
}
/* #endregion */