@font-face
{
  font-family: 'stalker';
  src: url('/public/style/fonts/TekturSemiCondensed-Regular.ttf');
}

html, body
{
  background: url('/public/style/design/bg.png') top center no-repeat fixed #000;
  font-family: arial, verdana, tahoma, sans-serif;
  font-size: 13px;
  color: #999;
  text-shadow: 1px 1px 3px black;
  margin: 0 auto;
  max-width: 450px;
  word-break: break-all; /* Разбивает текст на слова */
  overflow-wrap: break-word; /* Разбивает длинные слова */
}

a
{
  text-decoration: none;
  color: #a5772a;
  font-weight: bold;
}

::-webkit-scrollbar
{
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track
{
    background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb
{
  background: rgba(48, 48, 50, 0.8);
}

.container
{
  border: 5px solid #303030;
  -moz-border-image: url('/public/style/design/frame_small.png') 5 round round;
  -webkit-border-image: url('/public/style/design/frame_small.png') 5 round round;
  -o-border-image: url('/public/style/design/frame_small.png') 5 round round;
  border-image: url('/public/style/design/frame_small.png') 5 round round;
  background: #0B0B0B url('/public/style/design/background.jpg');
}

.frame
{
  margin: 0px 0px 3px 0px;
  border: 3px solid #242422;
  border-image: url('/public/style/design/frame_big.png') 3 round round;
  -o-border-image: url('/public/style/design/frame_big.png') 3 round round;
  -webkit-border-image: url('/public/style/design/frame_big.png') 3 round round;
  -moz-border-image: url('/public/style/design/frame_big.png') 3 round round;
}

.line
{
  background: url('/public/style/design/h_t.png') top left repeat-x,
              url('/public/style/design/h_t.png') bottom left repeat-x;
  padding: 4px 0;
}

.bt
{
  text-align: center;
  background: #303030 url('/public/style/design/bt.png');
  padding: 12px;
}

.cc
{
  background: #0f0f0f url('/public/style/design/cc.gif') repeat fixed center;
  padding: 2px;
  border-top: 1px solid #212121;
  border-bottom: 1px solid #000000;
  display: block;
  transition: 1.5s;
}

.click
{
  background: #0f0f0f url('/public/style/icon/a.jpg') repeat fixed center;
  padding: 7px;
  border-top: 1px solid #212121;
  border-bottom: 1px solid #000000;
  display: block;
  transition: 1.5s;
  color: #656565d6;
  font-weight: bold;
  font-size: 14px;
  font-family: stalker;
  text-shadow: 1px 1px 3px black;
}

.contentJS
{
  max-height: 0; /* Начальная высота */
  overflow: hidden; /* Скрываем переполнение */
  opacity: 0;
  transition: 0.3s ease-in-out;
}

.contentJS.show
{
  max-height: 100%;
  opacity: 1;
}

input, textarea, select
{
  display: block;
  outline: unset;
  margin: 5px 0;
  background: #242628;
  border-color: #333333;
  border: 1px solid #333333;
  padding: 4px;
  border-radius: 2px;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 1px 1px 3px black;
}

button
{
  display: block;
  outline: unset;
  margin: 5px 0;
  color: #878e94;
  padding: 4px;
  text-shadow: 1px 1px 3px black;
  border-color: #333333;
  background-color: #303234;
  border: 1px solid #333333;
  border-radius: 2px;
}

.alert
{
  font-size: 1.0em;
  text-shadow: none !important;
  text-decoration: none !important;
  padding: 0.55rem 0.35rem;
  border: 1px solid transparent;
  border-radius: 0.15rem;
  font-weight: bold;
  text-align: left;
}

.alert-success
{
  color: #3c763d !important;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}

.alert-error
{
  color: #a94442 !important;
  background-color: #f2dede;
  border-color: #ebccd1;
}

.alert-warning
{
  color: #444444 !important;
  border-color: orange;
  background-color: #F8EEBA;
}

.header-panel
{
  border-left: 2px solid #242424;
  border-right: 2px solid #242424;
  background-image: url('/public/style/design/bg-1.png');
  background-size: 100%;
  border-bottom: 1px solid #4D4D4D;
  border-top: 1px solid #4D4D4D;
}

.pagination
{
  font-weight: bold;
  background-color: #111;
}

.pagination_left
{
  background-color: #222;
  display: block;
  max-width: 40px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 4px;
  margin: 5px;
}

.pagination_right
{
  background-color: #222;
  display: block;
  max-width: 40px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 4px;
  margin: 5px;
}

.pagination_active
{
  background-color: #D2691E !important;
  color: #fff !important;
}

.pagination_button
{
  background-color: #222;
  display: block;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 4px;
  margin: 5px;
  font-weight: bold;
  color: #fff !important;
  text-shadow: 1px 1px 1px black;
}

.pagination_list
{
  background: none !important;
}

.mes
{
  font-weight: bold;
  background-color: #111;
}

.mes_
{
  display: block;
  text-align: center;
  font-size: 1.2em;
  padding: 5px;
  border-bottom: 1px solid #1c1c1c;
  border-top: 1px solid #1c1c1c;
  color: #E17100 !important;
}

.mes_form
{
  padding: 2px;
}

.mes_textarea
{
  width: 99%;
  background: #222;
  border: 1px solid #555;
  color: #ccc;
  margin: 0px;
  padding: 2px;
}

.mes_input
{
  width: 100%;
  padding: 4px;
  background: #1a1a1a;
  border: 1px solid #b28420;
  color: #b28420;
}

.mes_left
{
  text-align: center;
  margin: 0 1px;
}

.mes_right
{
  text-align: center;
  margin: 0 1px;
}

.mes_a
{
  display: block;
  color: #aaa;
  background: #2a2a2a;
  padding: 4px;
  border-radius: 2px;
  text-shadow: 1px 1px 1px black;
  font-style: italic;
  font-size: 14px;
}

.mes_warning
{
  display: block;
  padding: 4px;
  border-bottom: 1px solid #1c1c1c
}

.mes_time
{
  color: #757575bd;
}

.mes_message
{
  color: rgb(175 175 175 / 70%) !important;
  text-shadow: 1px 1px 3px black;
}

table{
	margin: auto;
	text-align: center;
	width: 100%;
}

.map-g{
	margin: 0 auto;
}

#map {
  max-width: 100%;
	max-height: 100%;
	margin: 0 auto;
}

.lft{text-align: left;}
.rht{text-align: right;}

.mng{
	position: relative;
	display: block;
	margin: 0 auto;
}

.mng-top{
	width: 32px;
	height: 32px;
	background-image: url('/public/style/map/strelka_y83l9r0vd4hv_32.png');
	top: 44px;
}

.mng-top:hover{
	background-position: 32px 32px;
}

.mng-bot{
	width: 32px;
	height: 32px;
	background-image: url('/public/style/map/arrow_hoxckfrsowz5_32.png');
	bottom: 44px;
}

.mng-bot:hover{
	background-position: 32px 32px;
}

.mng-lft{
	width: 32px;
	height: 32px;
	background-image: url('/public/style/map/strelka_23lhjdynj640_32.png');
	left: 65px;
}

.mng-lft:hover{
	background-position: 32px 32px;
}

.mng-rht{
	width: 32px;
	height: 32px;
	background-image: url('/public/style/map/strelka_8eja62s3pn2b_32.png');
	right: 65px;
}

.mng-rht:hover{
	background-position: 32px 32px;
}

.map-buttons
{
  display: block;
  min-width: 46px;
  height: 32px;
  text-align: center;
  background-image: url('/public/style/map/btnrect.png');
  background-color: #333333;
  margin: 2px 5px;
}

.map-panel
{
  padding: 5px;
	background: #1c1c1c;
	border: 1px solid #424242;
	display: block;
	max-width: 93.7%;
	margin: 2px auto;
  text-align: left;
}

.sector-panel
{
  padding: 5px;
	background: #1c1c1c;
	border: 1px solid #424242;
	display: block;
	max-width: 93.7%;
	margin: 2px auto;
  text-align: left;
}
@keyframes rotate {
  100% {
      transform: rotate(1turn);
  }
}
.anim_block4
{
  position: relative;
  z-index: 0;
  border-radius: 2px;
  overflow: hidden;
  padding: 2px;
}
.anim_block4 img
{
  vertical-align: bottom;
}
.anim_block4::after
{
  content: '';
  position: absolute;
  z-index: -1;
  left: 6px;
  top: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  background: white;
  border-radius: 5px;
  animation: opacityChange 3s infinite alternate;
}
@keyframes opacityChange
{
  50% {
      opacity: 1;
  }
}
.profile-background
{
  background: url('/public/style/profile/profile-background.gif') no-repeat;
  background-size: cover;
}
.cloud
{
  background: url('/public/style/profile/cloud.png') 0 -224px / 221% repeat-x;
  animation: keyFramesCloudNew 30s forwards linear infinite;
}

@keyframes keyFramesCloudNew
{
  0% {
      background-position-x: -500%, 0;
  }
  100% {
      background-position-x: 0%, 0;
  }
}
.stalker-view
{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  filter: drop-shadow(3px 3px 10px #0000008a);
}
.stalker-left, .stalker-right
{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}
.stalker-person
{
  text-align: center;
}
.stalker-tab
{
  display: flex;
  width: 56px;
  height: 56px;
  justify-content: center;
  align-items: center;
  border-radius: 3px;
  box-shadow: inset 0px 0px 5px #0000005e;
  background: #00000066;
  margin: 1px 0;
}
.profile_img_tab
{
  height: 50px;
}
.profile-st
{
  height: 230px;
}
/*
  STALKER ATMOSPHERE PATCH
  Подключать ПОСЛЕ твоего основного style.css.
  Не меняет структуру и размеры блоков, только усиливает атмосферу.
*/

:root{
  --st-bg: #050706;
  --st-panel: rgba(11, 14, 12, .88);
  --st-panel-2: rgba(19, 23, 18, .82);
  --st-border: rgba(119, 112, 76, .32);
  --st-border-soft: rgba(255,255,255,.06);
  --st-text: #a7aa9a;
  --st-muted: #707769;
  --st-accent: #c58a2a;
  --st-accent-2: #8f9f5f;
  --st-danger: #a64028;
  --st-glow: rgba(197,138,42,.22);
  --st-green-glow: rgba(137,159,95,.18);
}

html{
  background-color: var(--st-bg) !important;
}

body{
  color: var(--st-text);
  text-shadow: 0 1px 2px #000, 0 0 10px rgba(0,0,0,.55);
  background-color: #030403 !important;
  background-image:
    radial-gradient(circle at 50% 0%, rgba(123,119,73,.13), transparent 38%),
    radial-gradient(circle at 10% 20%, rgba(70,89,54,.10), transparent 34%),
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.86)),
    url('/public/style/design/bg.png') !important;
  background-position: top center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  overflow-wrap: anywhere;
}

body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background:
    linear-gradient(rgba(255,255,255,.018) 50%, rgba(0,0,0,.04) 50%),
    radial-gradient(circle at 50% 50%, transparent 58%, rgba(0,0,0,.46) 100%);
  background-size: 100% 3px, 100% 100%;
  mix-blend-mode: soft-light;
  opacity: .72;
}

body::after{
  content:"";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  pointer-events: none;
  z-index: 9998;
  background: linear-gradient(0deg, rgba(28,35,22,.22), transparent);
  opacity: .55;
}

::selection{
  background: rgba(197,138,42,.35);
  color: #fff3cf;
}

a{
  color: #c79236;
  text-shadow: 0 1px 2px #000, 0 0 8px rgba(197,138,42,.18);
  transition: color .18s ease, text-shadow .18s ease, opacity .18s ease;
}
a:hover{
  color: #e0b25c;
  text-shadow: 0 0 10px rgba(224,178,92,.34), 0 1px 2px #000;
}

.container{
  background-color: rgba(7,8,7,.92) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    inset 0 0 28px rgba(0,0,0,.72),
    0 0 24px rgba(0,0,0,.85),
    0 0 38px rgba(80,88,55,.10);
}

.frame{
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(0,0,0,.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035), inset 0 -16px 32px rgba(0,0,0,.22);
}

.line{
  position: relative;
  background-color: rgba(0,0,0,.08);
}
.line::after{
  content:"";
  display:block;
  height:1px;
  margin-top:4px;
  background: linear-gradient(90deg, transparent, rgba(197,138,42,.45), rgba(143,159,95,.28), transparent);
  opacity:.75;
}

.bt,
.header-panel,
.pagination,
.mes{
  background-color: rgba(10,12,10,.92) !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.18)),
    url('/public/style/design/background.jpg') !important;
  border-color: rgba(121,110,70,.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), inset 0 -12px 22px rgba(0,0,0,.30);
}

.cc{
  background-color: var(--st-panel) !important;
  background-image:
    linear-gradient(90deg, rgba(197,138,42,.035), transparent 28%, rgba(116,137,81,.025)),
    url('/public/style/design/cc.gif') !important;
  border-top-color: rgba(255,255,255,.055) !important;
  border-bottom-color: rgba(0,0,0,.82) !important;
  box-shadow: inset 3px 0 0 rgba(197,138,42,.10), inset 0 0 18px rgba(0,0,0,.34);
}

.click,
.mes_a,
.pagination_button,
.pagination_left,
.pagination_right,
.map-buttons{
  position: relative;
  overflow: hidden;
  color: #a4a894 !important;
  background-color: rgba(22,25,20,.92) !important;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.20)),
    url('/public/style/icon/a.jpg') !important;
  border: 1px solid rgba(111,104,73,.38) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), inset 0 -10px 18px rgba(0,0,0,.22), 0 1px 0 rgba(0,0,0,.7);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.click::before,
.mes_a::before,
.pagination_button::before,
.map-buttons::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background: linear-gradient(180deg, rgba(197,138,42,.9), rgba(119,139,81,.45));
  opacity:.65;
}

.click:hover,
.mes_a:hover,
.pagination_button:hover,
.pagination_left:hover,
.pagination_right:hover,
.map-buttons:hover{
  color: #d9c185 !important;
  border-color: rgba(197,138,42,.58) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 22px rgba(197,138,42,.08), 0 0 12px rgba(197,138,42,.10);
}

.mes_{
  color: #d99a36 !important;
  letter-spacing: .2px;
  background: linear-gradient(90deg, transparent, rgba(197,138,42,.07), transparent);
  border-top-color: rgba(255,255,255,.045) !important;
  border-bottom-color: rgba(0,0,0,.75) !important;
  text-shadow: 0 1px 2px #000, 0 0 12px rgba(197,138,42,.26);
}

.mes_message{
  color: rgba(188,190,176,.78) !important;
}
.mes_time,
.text-muted,
.text-muted2,
.text-muted3{
  color: var(--st-muted) !important;
}

input,
textarea,
select,
button{
  background-color: rgba(13,15,13,.96) !important;
  border-color: rgba(118,109,73,.42) !important;
  color: #c1c4b3 !important;
  box-shadow: inset 0 1px 8px rgba(0,0,0,.40), 0 1px 0 rgba(255,255,255,.025);
}
input:focus,
textarea:focus,
select:focus{
  border-color: rgba(197,138,42,.76) !important;
  box-shadow: inset 0 1px 8px rgba(0,0,0,.42), 0 0 0 2px rgba(197,138,42,.10), 0 0 14px rgba(197,138,42,.12);
}
button{
  cursor:pointer;
  font-weight:bold;
}
button:hover{
  color:#e0c385 !important;
  border-color:rgba(197,138,42,.65) !important;
}

.alert{
  border-radius: 2px !important;
  box-shadow: inset 3px 0 0 rgba(0,0,0,.16), 0 2px 12px rgba(0,0,0,.28);
}
.alert-success{
  color:#cce5b0 !important;
  background: rgba(41,71,38,.80) !important;
  border-color: rgba(117,155,90,.55) !important;
  text-shadow: 0 1px 2px #000 !important;
}
.alert-error{
  color:#f0b1a3 !important;
  background: rgba(67,25,19,.85) !important;
  border-color: rgba(166,64,40,.55) !important;
  text-shadow: 0 1px 2px #000 !important;
}
.alert-warning{
  color:#e6c98b !important;
  background: rgba(74,55,20,.86) !important;
  border-color: rgba(197,138,42,.58) !important;
  text-shadow: 0 1px 2px #000 !important;
}

.map-panel,
.sector-panel{
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.16)),
    rgba(13,16,13,.90) !important;
  border-color: rgba(110,106,76,.38) !important;
  box-shadow: inset 0 0 18px rgba(0,0,0,.32), 0 0 18px rgba(0,0,0,.25);
}

#map,
.map-g{
  filter: contrast(1.04) saturate(.92) brightness(.90) drop-shadow(0 0 14px rgba(0,0,0,.55));
}

.mng-top,
.mng-bot,
.mng-lft,
.mng-rht{
  filter: drop-shadow(0 1px 3px #000) drop-shadow(0 0 6px rgba(197,138,42,.14));
  opacity:.90;
  transition: opacity .15s ease, filter .15s ease;
}
.mng-top:hover,
.mng-bot:hover,
.mng-lft:hover,
.mng-rht:hover{
  opacity:1;
  filter: drop-shadow(0 1px 3px #000) drop-shadow(0 0 10px rgba(197,138,42,.32));
}

.stalker-view{
  background: radial-gradient(circle at 50% 34%, rgba(122,139,89,.14), transparent 46%);
  box-shadow: inset 0 0 24px rgba(0,0,0,.26);
}
.stalker-tab{
  background: rgba(5,7,6,.72) !important;
  border: 1px solid rgba(108,108,82,.30);
  box-shadow: inset 0 0 8px rgba(0,0,0,.65), 0 1px 0 rgba(255,255,255,.03);
}
.profile_img_tab,
.profile-st{
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.75));
}
.profile-background{
  box-shadow: inset 0 0 60px rgba(0,0,0,.56);
}

.badge{
  background-image: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.15));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 1px 3px rgba(0,0,0,.35);
}
.badge-warning,
.pagination_active{
  background-color: #b77a25 !important;
  color:#fff1ca !important;
}
.badge-success,
.text-success{
  color:#9fbd76 !important;
}
.text-gold,
.text-gold2,
.text-orange,
.text-orange2{
  color:#d6a64a !important;
}
.text-red,
.text-error,
.text-darkred{
  color:#c8644d !important;
}

::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(197,138,42,.38), rgba(61,67,49,.88)) !important;
  border-radius: 2px;
}
::-webkit-scrollbar-track{
  background: rgba(0,0,0,.35) !important;
}

@media (max-width: 360px){
  body{font-size:12.5px;}
  .click{font-size:13px;}
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ===== FIX MAP ARROWS / НЕ ЛОМАЕМ СТРЕЛКИ КАРТЫ ===== */
/* Важно: этот блок должен быть в самом низу патча */

.mng{
  position: relative !important;
  display: block !important;
  margin: 0 auto !important;
  background-repeat: no-repeat !important;
  background-size: auto !important;
  z-index: 20 !important;
}

.mng::before,
.mng::after,
.mng-top::before,
.mng-top::after,
.mng-bot::before,
.mng-bot::after,
.mng-lft::before,
.mng-lft::after,
.mng-rht::before,
.mng-rht::after{
  display: none !important;
  content: none !important;
}

/* Возвращаем родные изображения стрелок */
.mng-top{
  width: 32px !important;
  height: 32px !important;
  top: 44px !important;
  background-image: url('/public/style/map/strelka_y83l9r0vd4hv_32.png') !important;
  background-position: 0 0 !important;
}

.mng-bot{
  width: 32px !important;
  height: 32px !important;
  bottom: 44px !important;
  background-image: url('/public/style/map/arrow_hoxckfrsowz5_32.png') !important;
  background-position: 0 0 !important;
}

.mng-lft{
  width: 32px !important;
  height: 32px !important;
  left: 65px !important;
  background-image: url('/public/style/map/strelka_23lhjdynj640_32.png') !important;
  background-position: 0 0 !important;
}

.mng-rht{
  width: 32px !important;
  height: 32px !important;
  right: 65px !important;
  background-image: url('/public/style/map/strelka_8eja62s3pn2b_32.png') !important;
  background-position: 0 0 !important;
}

.mng-top:hover,
.mng-bot:hover,
.mng-lft:hover,
.mng-rht:hover{
  background-position: 32px 32px !important;
}

/* Если стрелки одновременно имеют class="map-buttons", не даём кнопке перебить картинку */
.map-buttons.mng-top,
.map-buttons.mng-bot,
.map-buttons.mng-lft,
.map-buttons.mng-rht{
  min-width: 32px !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  background-color: transparent !important;
}

/* Карта не должна затемняться так сильно, чтобы стрелки терялись */
#map,
.map-g{
  filter: contrast(1.02) saturate(.96) brightness(.96) drop-shadow(0 0 10px rgba(0,0,0,.45)) !important;
}

/* Боковая картинка bg.png остаётся видимой, без жёсткого перекрытия */
body{
  background-size: auto !important;
}

body::before{
  z-index: 2 !important;
  opacity: .38 !important;
}

body::after{
  z-index: 1 !important;
  opacity: .32 !important;
}

.container,
.frame,
.header-panel,
.cc,
.bt,
.mes,
.map-panel,
.sector-panel{
  position: relative;
  z-index: 3;
}
 .exp-bar-wrapper {
                background: rgba(0,0,0,0.4);
                border: 1px solid rgba(100,110,80,0.3);
                border-radius: 2px;
                padding: 4px 6px;
                margin: 2px 0 4px 0;
                box-shadow: inset 0 0 12px rgba(0,0,0,0.5);
            }
            .exp-bar-info {
                display: flex;
                justify-content: space-between;
                font-size: 11px;
                color: #b5bdaa;
                text-shadow: 0 1px 2px #000;
                margin-bottom: 2px;
            }
            .exp-level {
                color: #d3b883;
                font-weight: bold;
                font-family: stalker, Arial, sans-serif;
                letter-spacing: 0.3px;
            }
            .exp-progress-text {
                color: #8d9b8a;
            }
            .exp-bar-track {
                width: 100%;
                height: 6px;
                background: rgba(20,25,20,0.6);
                border: 1px solid rgba(60,70,50,0.3);
                border-radius: 2px;
                overflow: hidden;
                box-shadow: inset 0 1px 3px rgba(0,0,0,0.6);
            }
            .exp-bar-fill {
                height: 100%;
                background: linear-gradient(90deg, #5c7a4a, #b3d08a);
                border-radius: 2px;
                box-shadow: 0 0 8px rgba(150,200,100,0.3);
                transition: width 0.3s ease;
            }
            .notification-bar {
                background: rgba(40,30,20,0.9);
                border: 1px solid #8a6a2e;
                padding: 4px 8px;
                margin: 3px 0;
                text-align: center;
                font-size: 13px;
                border-radius: 2px;
            }
            .notification-bar a {
                color: #b5a87b;
                margin: 0 8px;
                text-decoration: none;
            }
            .notification-bar a:hover {
                color: #dabf7a;
                text-decoration: underline;
            }
        
.online-reward-notice{display:flex;align-items:center;justify-content:space-between;gap:8px;background:linear-gradient(90deg,rgba(75,52,18,.92),rgba(20,23,17,.96));border:1px solid #98743b;padding:7px 8px;margin:3px 0;color:#e4c878;font-size:12px}.online-reward-notice a{color:#fff0b0!important;font-weight:bold}.online-reward-notice[hidden]{display:none!important}
.qol-hint{margin:3px 0;padding:6px!important;color:#c8c3a5;border-left:3px solid #9b7b35}
.qol-hint.danger{border-left-color:#9c4438;color:#ddb0a6}.qol-hint.warn{border-left-color:#a77f35}
.qol-favorites{margin:3px 0;padding:5px!important}.qol-favorites a{display:block;color:#b8ad80!important;font-size:11px;padding:2px 0;text-decoration:none}
.hidden-arrow{display:none!important}
.cs-map-page{margin:0 0 4px 0}
.cs-map-head{position:relative;overflow:hidden;padding:7px 8px;background:linear-gradient(180deg,rgba(22,26,23,.96),rgba(8,10,8,.98));border-top:1px solid rgba(133,139,100,.26);border-bottom:1px solid #050505;box-shadow:inset 0 0 26px rgba(0,0,0,.55)}
.cs-map-head:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 8% 0,rgba(91,119,134,.18),transparent 34%),radial-gradient(circle at 100% 0,rgba(177,122,43,.12),transparent 31%),linear-gradient(90deg,rgba(0,0,0,.45),transparent 48%,rgba(0,0,0,.45));pointer-events:none}
.cs-map-title{position:relative;z-index:1;display:flex;align-items:center;gap:7px;justify-content:space-between}
.cs-map-loc{min-width:0;text-align:left}
.cs-map-loc b{display:block;font-family:stalker,Arial,sans-serif;color:#d0c7a2;font-size:16px;line-height:18px;text-shadow:0 1px 2px #000,0 0 12px rgba(198,145,63,.22);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-map-loc span{display:block;color:#777d70;font-size:11px;margin-top:2px}
.cs-map-vin{flex:0 0 auto;padding:4px 7px;background:rgba(0,0,0,.38);border:1px solid rgba(127,119,83,.35);color:#aebc88;font-weight:bold;font-size:12px;box-shadow:inset 0 0 12px rgba(0,0,0,.45)}
.cs-map-vin img{width:16px;height:16px;vertical-align:middle;margin-right:3px}
.cs-map-shell{position:relative;margin:4px auto 0;max-width:450px;width:100%;background:radial-gradient(circle at 50% 44%,rgba(109,130,94,.13),transparent 55%),rgba(4,5,4,.88);border-top:1px solid rgba(255,255,255,.04);border-bottom:1px solid rgba(0,0,0,.8);box-shadow:inset 0 0 34px rgba(0,0,0,.60)}
.cs-map-shell:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(255,255,255,.018) 50%,rgba(0,0,0,.05) 50%);background-size:100% 3px;opacity:.22;z-index:2}
.cs-map-frame{position:relative;z-index:1;padding:4px 0}
.map-game-container{max-width:450px;width:100%;margin:0 auto;position:relative}
#map{width:100%!important;height:auto!important;aspect-ratio:450/350;background:#101410!important;display:block;border:1px solid rgba(126,119,84,.35);box-shadow:0 0 20px rgba(0,0,0,.70),inset 0 0 28px rgba(0,0,0,.45);filter:contrast(1.05) saturate(.92) brightness(.9)}
.map-g{width:100%;border-collapse:collapse}.map-g td{padding:0;text-align:center;vertical-align:middle}
.mng{position:relative;z-index:3;display:block;margin:0 auto;opacity:.95;filter:drop-shadow(0 1px 2px #000) drop-shadow(0 0 8px rgba(194,143,65,.20));transition:opacity .18s ease,filter .18s ease,transform .18s ease}
.mng:hover{opacity:1;filter:drop-shadow(0 1px 2px #000) drop-shadow(0 0 13px rgba(194,143,65,.38));transform:scale(1.03)}
.mng-top{top:44px}.mng-bot{bottom:44px}.mng-lft{left:65px}.mng-rht{right:65px}
#qol-quick-panel,#player-panel,#sector-panel,#mutant-panel,#transition-panel,#loot-panel,#anomaly-panel,#zone-event-panel,#zone-stash-panel,#immersive-panel,#campfire-panel{
    position:relative;
    z-index:40;
    max-width:450px;
    margin:2px auto;
    text-align:left;
    pointer-events:auto
}
.cs-sector-action{
    position:relative;
    z-index:50;
    pointer-events:auto!important;
    cursor:pointer!important
}
.cs-chat-wrap{max-width:450px;margin:4px auto 0;background:linear-gradient(180deg,rgba(18,22,19,.96),rgba(6,7,6,.98));border-top:1px solid rgba(129,123,84,.28);border-bottom:1px solid #050505;box-shadow:inset 0 0 24px rgba(0,0,0,.55)}
.cs-chat-head{position:relative;padding:7px 8px;border-bottom:1px solid rgba(0,0,0,.8);background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(29,34,27,.86),rgba(0,0,0,.55));font-family:stalker,Arial,sans-serif;color:#c8ad72;text-align:left;letter-spacing:.3px;text-shadow:0 1px 2px #000}
.cs-chat-head span{float:right;color:#757d6d;font-size:11px;font-family:Arial,sans-serif;margin-top:2px}
.cs-chat-list{max-height:none;overflow:visible;padding:4px;background:radial-gradient(circle at 50% 0,rgba(93,124,131,.08),transparent 35%),rgba(0,0,0,.18)}
.cs-campfire-card{
    border-color:rgba(133,89,41,.50)!important;
    box-shadow:
        inset 3px 0 0 rgba(214,137,53,.55),
        inset 0 0 18px rgba(0,0,0,.40)!important;
}
.cs-campfire-icon{
    color:#ffb54f!important;
    border-color:rgba(213,132,45,.66)!important;
    box-shadow:
        inset 0 0 10px rgba(113,49,13,.55),
        0 0 8px rgba(223,126,33,.18)!important;
}
.cs-chat-message{position:relative;margin:0 0 4px 0;padding:6px 7px 6px 8px;background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(0,0,0,.14)),rgba(12,15,12,.76);border:1px solid rgba(103,104,78,.22);box-shadow:inset 3px 0 0 rgba(181,128,54,.10),inset 0 0 13px rgba(0,0,0,.32);text-align:left}
.cs-chat-top{display:flex;align-items:center;gap:5px;min-width:0}.cs-chat-avatar{width:22px;height:22px;object-fit:cover;border:1px solid rgba(255,255,255,.06);background:#111;box-shadow:0 1px 4px #000}
.cs-chat-user{font-weight:bold;color:#c9c6ae;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}.cs-chat-user.system{color:#8d967f}
.cs-chat-badge{font-size:10px;font-weight:bold;text-transform:uppercase;letter-spacing:.2px;padding:1px 5px;border:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.32)}
.cs-chat-zone{color:#d26a54}.cs-chat-location{color:#9bbf7a}.cs-chat-sector{color:#c99a4e}.cs-chat-channel{color:#8fb7c8}.cs-chat-time{margin-left:auto;color:#697064;font-size:10px;white-space:nowrap}
.cs-chat-text{display:block;margin-top:4px;color:#aeb2a2;font-size:12px;line-height:16px;word-break:break-word}.cs-delete-btn{position:absolute;right:5px;top:5px;color:#a94d3d!important;text-decoration:none;font-weight:bold;font-size:13px;opacity:.75}
.cs-chat-empty{padding:12px;text-align:center;color:#6f766b;background:rgba(0,0,0,.22)}.cs-chat-pages{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:4px;
    flex-wrap:wrap;
    padding:6px 4px;
    text-align:center;
    border-top:1px solid rgba(255,255,255,.035)
}
.cs-chat-page{
    display:inline-block;
    min-width:29px;
    padding:6px 7px;
    box-sizing:border-box;
    background:linear-gradient(180deg,#1b211f,#090b0a);
    border:1px solid #36403c;
    color:#8f9992!important;
    text-decoration:none;
    border-radius:2px
}
.cs-chat-page.active{
    color:#ead38c!important;
    border-color:#8a6a2e;
    background:linear-gradient(180deg,#332b1b,#141008)
}
.cs-chat-page.disabled{
    opacity:.42;
    pointer-events:none
}
.cs-chat-form{padding:6px;background:rgba(0,0,0,.23);border-top:1px solid rgba(255,255,255,.035)}.cs-chat-form form{display:flex;gap:5px;align-items:center;flex-wrap:nowrap}
.cs-chat-form input[type="text"]{flex:1;min-width:0;margin:0!important;padding:7px 8px!important;background:rgba(7,9,7,.96)!important;border:1px solid rgba(122,115,79,.40)!important;color:#c8cbb9!important;border-radius:2px!important;box-shadow:inset 0 1px 8px rgba(0,0,0,.45)}
.cs-chat-form select{flex:0 0 auto;margin:0!important;padding:7px 5px!important;background:rgba(11,13,11,.96)!important;border:1px solid rgba(122,115,79,.40)!important;color:#b9bdab!important;border-radius:2px!important;max-width:92px}
.cs-chat-form button{flex:0 0 auto;margin:0!important;padding:7px 9px!important;background:linear-gradient(180deg,rgba(162,112,44,.50),rgba(65,69,45,.90))!important;border:1px solid rgba(190,139,56,.48)!important;color:#f0dfb1!important;border-radius:2px!important;font-weight:bold;text-shadow:0 1px 2px #000;cursor:pointer}
@media(max-width:390px){.cs-chat-form form{flex-wrap:wrap}.cs-chat-form input[type="text"]{flex-basis:100%}.cs-chat-form select,.cs-chat-form button{flex:1}.cs-chat-user{max-width:92px}.cs-map-loc b{font-size:15px}}

.cs-danger-panel,.cs-emission-panel,.cs-safe-panel{max-width:450px;margin:4px auto;padding:8px 10px;text-align:left;border-top:1px solid rgba(255,255,255,.06);border-bottom:1px solid #050505;box-shadow:inset 3px 0 0 rgba(200,80,50,.25),inset 0 0 20px rgba(0,0,0,.55);font-size:12px}
.cs-danger-panel{background:linear-gradient(90deg,rgba(86,24,20,.94),rgba(9,8,7,.98));color:#efb09d}
.cs-emission-panel{background:linear-gradient(90deg,rgba(90,70,18,.94),rgba(8,10,7,.98));color:#ead08b}
.cs-safe-panel{background:linear-gradient(90deg,rgba(25,70,34,.94),rgba(7,10,7,.98));color:#bfe99b}
.cs-danger-panel b,.cs-emission-panel b,.cs-safe-panel b{display:block;color:#fff1bd;font-family:stalker,Arial,sans-serif;margin-bottom:2px}
.cs-danger-panel span,.cs-emission-panel span,.cs-safe-panel span{display:block;color:inherit}
.cs-emission-panel small,.cs-safe-panel small{display:block;margin-top:3px;color:#8e967f}


.cs-wound-give-up{
    display:block;
    width:100%;
    box-sizing:border-box;
    margin-top:7px;
    padding:7px 9px;
    background:linear-gradient(180deg,#6b281f,#28100d);
    border:1px solid #9c4a3b;
    color:#f0a08b;
    font-weight:bold;
    cursor:pointer;
    border-radius:2px;
}
.cs-wound-give-up:disabled{
    opacity:.55;
    cursor:not-allowed;
}


#map{
    position:relative;
    z-index:3;
    pointer-events:auto!important;
    touch-action:none;
    user-select:none;
    -webkit-user-select:none;
}
#map.map-is-moving{
    cursor:wait!important;
    opacity:.94;
}
.cs-map-shell:before{
    pointer-events:none!important;
}


.cs-zone-event-card{
    box-shadow:
        inset 3px 0 0 rgba(218,163,68,.65),
        inset 0 0 17px rgba(0,0,0,.45);
}
.cs-zone-stash-card{
    box-shadow:
        inset 3px 0 0 rgba(99,151,80,.65),
        inset 0 0 17px rgba(0,0,0,.45);
}
.cs-sector-icon.zone-event,
.cs-sector-icon.zone-stash{
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    background:#11150f;
}
.cs-sector-name.zone-event{
    color:#e2bc69;
}
.cs-sector-name.zone-stash{
    color:#9cc488;
}
.cs-sector-action.zone-event,
.cs-sector-action.zone-stash{
    appearance:none;
    -webkit-appearance:none;
    cursor:pointer;
    font-family:inherit;
}
.cs-sector-action.zone-event{
    border-color:#9a7435;
    color:#edce83!important;
    background:linear-gradient(180deg,#59441f,#20180c);
}
.cs-sector-action.zone-stash{
    border-color:#557e49;
    color:#b8dda7!important;
    background:linear-gradient(180deg,#304d2a,#132012);
}


.cs-immersive-card{
    box-shadow:
        inset 3px 0 0 rgba(104,137,79,.6),
        inset 0 0 18px rgba(0,0,0,.42);
}