@font-face {
    font-family: 'EWO';
    src: url('/public/fonts/main/ewo.woff') format('woff2'),
         url('/public/fonts/main/ewo.otf') format('opentype');
}

@font-face {
    font-family: 'EWO Alt';
    src: url('/public/fonts/alt/ewo_alt.woff') format('woff2'),
         url('/public/fonts/alt/ewo_alt.otf') format('opentype');
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; vertical-align: baseline } article, aside, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block } body { line-height: 1 } ol, ul { list-style: none } blockquote, q { quotes: none } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none } table { border-collapse: collapse; border-spacing: 0 }

html {width: 100%; height: 100%; min-height: 100%;}
body { min-height: 100%; background: #000000; color: #ffffff;}
html, html a { -webkit-font-smoothing: antialiased; }

html.no-scroll,
body.no-scroll {
    overflow: hidden !important;
}

@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto
	}  
}

body, select, input, textarea, button {
	font-family: 'EWO', sans-serif;
	font-size: 14pt;
	outline: none;
}

h3 {font-size: 20pt; margin-bottom: 10px;}

.mainwidth {
    position: relative;
    max-width: 1400px;
    margin: 0 auto;
}

.tcenter {text-align: center;}
.top20 {margin-top: 20px;}

.loader {
  position: fixed;
  top: calc(50% - 20px);
  left: calc(50% - 20px);
  width: 40px;
  height: 40px;
  margin: 40px auto;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, .2);
  border-top-color: rgba(255, 255, 255, .6);
  animation: spin .8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.map-row {width: 100vw; height: 100vh; overflow: auto; overscroll-behavior: none;}
.map {position: relative; text-align: center; width: fit-content; background: var(--background); width: 100%; aspect-ratio: 1/1; background-size: cover; overflow: hidden;}
.map{
  position: relative;
  overflow: hidden;
}

/* Весь контент карты (фон + маркеры + svg) должен жить внутри .map-layer */
.map-layer{
  position: absolute;
  inset: 0;
  transform-origin: 0 0;

  /* твой фон одной картой */
  background-image: var(--background);
  background-repeat: no-repeat;

  /* важно: 1:1 соответствие % координатам */
  background-size: 100% 100%;

  /* ВНИМАНИЕ: порядок важен!
     Справа налево: сначала translate(-vx,-vy), потом scale */
  transform: scale(var(--sx), var(--sy)) translate(calc(var(--vx) * -1%), calc(var(--vy) * -1%));
}

.map-region {position: absolute; font-size: 20pt; filter: drop-shadow(1px 1px 1px #000000); left: var(--left); top: var(--top); width: var(--width); height: var(--height); display: flex; align-items: center; justify-content: center; text-align: center;}
.map-npc, .map-piratefun {background: transparent; border: 0; width: fit-content; color: #fff; filter: drop-shadow(2px 2px 4px #000000); position: absolute; width: 75px; aspect-ratio: 1/1; left: var(--left); top: var(--top); transform-origin: 0 0; transform: scale(calc(1 / var(--sx)), calc(1 / var(--sy)));}
.map-npc__icon {position: absolute; top: 0; left: 0; width: 60px;}
.map-npc__name {padding-left: 60px; white-space: nowrap;}
.map-globalbtn {position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%);}
.map-travel {position: absolute; top: var(--top); left: var(--left); z-index: 6; transform: translate(-50%, -50%);}
.map-player {width: 50px;}
.map-travel-info {text-align: left; padding: 5px; border-radius: 5px; position: absolute; top: -10px; left: 55px; background: rgba(0,0,0,.7); width: 150px;}
.map-travel-svg{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;}
.map-travel-line-anim{stroke: rgba(255,255,255,.75); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-dasharray: 5 5; animation: travel-dash 1.2s linear infinite; stroke-linecap: round;}
@keyframes travel-dash{to { stroke-dashoffset: -10; }}
.getmap {position: absolute; z-index: 6;}
  
.menu-row {padding: 25px 0 35px 0; text-align: center; background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.3) 50%, rgba(0,0,0,.8) 100%); color: #fff; position: fixed; top: 0; bottom: auto; left: 0; right: 0; z-index: 999999; display: grid; grid-template-columns: 3fr 1fr 1fr 1fr 1fr 1fr 3fr; grid-auto-flow: row dense;}
.menu-row a {color: #fff; text-decoration: none; filter: drop-shadow(5px 5px 4px #000000);}
.menu-logo {position: relative;}
.menu-logo img {position: absolute; top: -55px; left: 50%; transform: translateX(-50%); width: 85px; max-width: 70%; filter: drop-shadow(5px 5px 4px #000000); transition: 0.3s all;}
.menu-row img:hover {top: -25px; transition: 0.3s all;}

.total-row {position: relative; padding-top: 50px; position: relative; max-width: 100%; background: var(--background); background-position: center center; background-size: cover; z-index: 0; border-bottom: 1px solid #000000;}
.total-row:before {content: ""; z-index: 5; position: absolute; bottom: 0; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);}

.character-row {z-index: 2; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; overflow: hidden;}
.character-info {padding-top: 50px; text-shadow: 1px 1px 1px black;}
.character-info h1 {margin-bottom: 5px;}
.character-info-level {position: relative; background: rgba(255,255,255,.1); overflow: hidden; border-radius: 5px; margin-bottom: 3px;}
.character-info-level-bar {background: #fff; height: 7px; width: var(--width);}
.character-info-level-xp {position: relative; font-size: 10pt; margin-bottom: 20px;}
.character-info-item {color: rgba(255,255,255,.7); border-bottom: 1px solid rgba(255,255,255,.2); padding: 5px 0;}
.character-info-item span {color: #fff;}
.character-skin {grid-column: span 3;}
.character-skin img {position: relative; width: 100%; left: 10%;}
.character-loadout {padding: 50px 0 50px 100px; grid-column: span 5;}
.character-loadout-row {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; gap: 10px;}
.character-loadout-item {aspect-ratio: 1/1; background: rgba(0,0,0,.5); border-radius: 15px;}
.character-mobile-loadout-item {aspect-ratio: 1/1; background: rgba(255,255,255,.1); border-radius: 15px;}
.character-loadout-item img, .character-mobile-loadout-item img {width: 100%; padding: 20px; box-sizing: border-box;}
.character-mobile-loadout {display: none;}
.character-mobile-loadout-row {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px;}
.character-loadout, h3 .character-mobile-loadout h3 {text-shadow: 1px 1px 1px black;}

.dialog-wrapper:after {content: ""; z-index: 1; position: fixed; bottom: 0; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);}
.dialog-image {position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;}
.dialog-header {position: fixed; top: 20px; left: 20px;}
.dialog-body {z-index: 2; position: fixed; bottom: 100px; left: 50%; width: 1000px; max-width: calc(100% - 20px); transform: translateX(-50%);}
.dialog-close {position: fixed; top: 70px; right: 20px;}
.dialog-npc-text {font-size: 18pt; margin-bottom: 30px;}
.dialog-option-btn {width: 100%; text-align: left; margin-bottom: 5px; background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.2); padding: 10px;}
.dialog-option-btn:hover {background: rgba(255,255,255,1); color: #000; transition: 0.3s all;}

.wmodal-back {z-index: 10; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);}
.wmodal {text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 500px; max-width: 90%;}
.wmodal-line-img {position: relative; width: 100%; aspect-ratio: 24/6; overflow: hidden; margin: 20px 0; border-radius: 15px; border: 1px solid rgba(255,255,255,.2);}
.wmodal-line-img img {position: relative; width: 100%; top: -60%;}
.wmodal-img {width: 200px; max-width: 50%;}
.wmodal-title {font-size: 16pt; font-size: 20pt;}
.wmodal-info {margin: 20px 0;}
.wmodal-buttons {}

.raid-row {position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--background); background-size: cover; background-position: center center;}
.raid-row:before {content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,.75);}
.raid-enemy-row {position: absolute; top: 40%; left: 50%; transform: translate(-50%,-50%); width: 300px; max-width: 50%;}
.raid-enemy-bar {position: relative; background: rgba(255,255,255,.1); width: 100%; margin: 10px auto;}
.raid-enemy-health {background: red; height: 20px; width: var(--width);}
.raid-enemy-value {position: absolute; top: 60%; left: 50%; transform: translate(-50%,-50%); font-family: 'EWO Alt', sans-serif; font-size: 10pt;}
.raid-enemy-title {text-align: center;}
.raid-enemy-text {text-align: center;}
.raid-enemy-img {text-align: center;}
.raid-enemy-img img {width: 70%;}
.raid-player-row {position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%); width: 500px; max-width: calc(100% - 20px);}

@media screen and (max-width: 1420px) {
  .mainwidth {width: calc(100% - 20px); padding-left:10px; padding-right: 10px;}
}

@media screen and (max-width: 1100px) {
  .character-row {z-index: 2; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;}
  .character-info {padding-top: 10px;}
  .character-skin {grid-column: span 3;}
  .character-loadout {display: none;}
  .character-mobile-loadout {display: block;}
}

.webpush-welcome {animation: webpush 3s forwards; color: #fff; padding: 20px; text-align: center; width: 400px; max-width: 80%; position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); z-index: 200001; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);}
.webpush-welcome-title {font-family: 'Bender', sans-serif; font-size: 12pt;}
.webpush-welcome-text {font-size: 10pt; margin: 10px 0;}
.webpush-welcome-img {animation: webpush 2s forwards; position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 600px; max-width: 100%; z-index: 200000; position: fixed; display: inline-block;}
.webpush-welcome-close {margin-top: 15px; color: rgba(255,255,255,.5);}
/* Анимация выезжания снизу */
@keyframes webpush {
    from {
        opacity: 0;
        transform: translate(-50%, 100%); /* Начальное положение: снизу */
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0); /* Конечное положение: на месте */
    }
}

@media screen and (max-width: 959px) {  
  .dialog-close {top: 20px;}
  .map {position: relative; background: var(--background); width: 1200px; aspect-ratio: 1/1; background-size: cover;}
  .menu-row {padding: 25px 0 35px 0; border-top: 1px solid #fff; text-align: center; background: #000; color: #fff; position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 999999; bottom: 0; left: 0; width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-auto-flow: row dense;}
  .menu-empty {display: none;}
  .menu-logo {position: fixed; top: 20px; left: 0; width: 100px;}
  .menu-row a {color: #fff; text-decoration: none;}
  .map-globalbtn {bottom: 100px;}
  
  .total-row {padding-top: 0;}
  .character-row {z-index: 2; display: grid; grid-template-columns: 1fr;}
  .character-info {z-index: 3; position: absolute; top: 10px; left: 10px; padding-top: 10px;}
  .character-skin {grid-column: span 1;}
  .character-skin img {position: relative; left: 20%;}
  .character-loadout-row {grid-template-columns: 1fr 1fr 1fr;}
  
  .raid-enemy-row {top: 40%;}
}

@media screen and (max-width: 760px) {
  .character-loadout-row {grid-template-columns: 1fr 1fr 1fr 1fr;}
  .raid-enemy-row {top: 30%;}
}