/* ========= Врата Хаоса — мобильная тема (max 480px) ========= */

/* Палитра и переменные */
:root{
  --bg-deep: #0a0a0c;
  --bg-panel: #15141a;
  --bg-panel-2:#101016;
  --stone: #272632;
  --stone-2:#1f1e28;
  --gold-1:#d7a84b;
  --gold-2:#9a6b17;
  --gold-3:#f2d48b;
  --accent:#4a7dff;
  --text:#f0f0f3;
  --text-dim:#b9bbd1;
  --red:#c85a5a;
  --green:#66c37a;
}

*{box-sizing:border-box; -webkit-tap-highlight-color: transparent;}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 50% -10%, #18151d 0%, #0c0b10 60%, #07070a 100%),
    var(--bg-deep);
  color:var(--text);
  font-family: "Spectral", system-ui, -apple-system, Arial, sans-serif;
}

/* Контейнер: максимум 480px, центрируем */
.wrap{
  width:100%;
  max-width:480px;
  margin:0 auto;
  padding:12px;
}

/* Заголовки — рунический стиль */
h1,h2,h3,h4{font-family:"Cinzel", serif; letter-spacing:.3px; margin:8px 0}
h2{font-weight:700}
h3{font-weight:600}

/* Карточки */
.card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.05)),
    var(--bg-panel);
  border:1px solid #2a2935;
  border-radius:14px;
  padding:14px;
  box-shadow: 0 6px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter: blur(2px);
  margin:10px 0;
}

/* Кнопки — «золото» */
button{
  font:600 16px/1 "Spectral", Arial, sans-serif;
  color:#211a0f;
  background:
    linear-gradient(180deg, var(--gold-3), var(--gold-1) 40%, var(--gold-2));
  border:1px solid #7b5615;
  border-radius:12px;
  padding:10px 14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 3px 0 #5a3a0a,
    0 8px 18px rgba(0,0,0,.35);
}
button:active{ transform: translateY(1px); box-shadow:
  inset 0 1px 0 rgba(255,255,255,.5), 0 1px 0 #5a3a0a, 0 6px 12px rgba(0,0,0,.35); }

input{
  width:100%;
  font:16px/1.2 "Spectral", Arial;
  color:var(--text);
  background: var(--bg-panel-2);
  border:1px solid #2e2d3a;
  border-radius:10px;
  padding:10px 12px;
}

/* Утилити */
.hidden{display:none !important;}
.row{display:flex; gap:10px; align-items:center}
.grow{flex:1}

/* ---------- ЛОАДЕР ---------- */
.logo{width:120px; display:block; margin:0 0 8px}
.bar{height:14px; background:#222; border:1px solid #333; border-radius:999px; overflow:hidden}
.bar>div{height:100%; width:0; background:linear-gradient(90deg,#51a6ff,#8ab6ff);}

/* ---------- ЭКРАНЫ ---------- */
.screen{position:relative; height:calc(100vh - 24px); display:flex; flex-direction:column;}

/* ---------- ВЕРХНЯЯ ПЛАНКА ---------- */
.topbar{
  position:sticky; top:0; z-index:5;
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.25)),
    url('/client/assets/ui/leather_tile.jpg'); /* опционально: кожа */
  background-size:cover;
  border:1px solid #2b2a36;
  border-radius:12px;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
  margin-bottom:8px;
}
.topbar .left{display:flex; gap:10px; align-items:center}
.avatar{
  width:44px; height:44px; border-radius:50%;
  border:2px solid #3a2d17;
  box-shadow: 0 0 0 2px #70501c, inset 0 0 10px rgba(0,0,0,.4);
  background:#111;
}
.meta .name{font-family:"Cinzel", serif; font-weight:700; font-size:16px; text-shadow:0 1px 0 #000;}
.xp{display:flex; gap:8px; align-items:center; color:#c8cbff; font-size:13px}
.xpbar{width:140px; height:10px; background:#1a1a22; border:1px solid #2c2c36; border-radius:999px; overflow:hidden}
#uiXpBar{height:100%; width:0; background:linear-gradient(90deg,#3b67ff,#86a2ff)}

/* Статы справа */
.stats{display:flex; gap:12px; align-items:center}
.stat{display:flex; gap:6px; align-items:center; color:#f5f5f7; padding:4px 6px; border-radius:8px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.25));
  border:1px solid #2b2a36;}
.stat img{width:16px; height:16px}

/* ---------- КАРТА ---------- */
/* Контейнер-скролл карты */
.mapwrap{
  flex:1 1 auto;
  overflow-y:auto;
  position:relative;
  border:1px solid #2a2935; border-radius:14px;
  background: transparent;
}

/* Секция карты: относительное позиционирование для узлов */
.mapfull{
  position:relative;
  width:100%;
  /* подложка-тень по краям, чтобы края «таяли» */
}
.mapfull::before,
.mapfull::after{
  content:"";
  position:sticky; left:0; right:0; z-index:2; pointer-events:none; display:block; height:40px;
  backdrop-filter: blur(0.5px);
}
.mapfull::before{ top:0;  background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0)); border-top-left-radius:14px; border-top-right-radius:14px;}
.mapfull::after { bottom:0; background:linear-gradient(0deg,  rgba(0,0,0,.35), rgba(0,0,0,0)); border-bottom-left-radius:14px; border-bottom-right-radius:14px;}

/* Сама картинка карты */
.map-img{
  display:block;
  width:100%;           /* вписываем в ширину контейнера */
  height:auto;          /* высота по пропорции */
  transform-origin: 50% 10%;
  transform: scale(var(--map-zoom,1.08)) translateY(var(--map-shift,0px));
  /* обрезаем лишнее внутри видимой области */
}

/* Чтобы обрезать приближённую картинку внутри скролла */
.mapfull{ overflow:hidden; }

/* Узлы поверх IMG, в % от размеров изображения */
.mapfull .node{
  position:absolute;
  transform: translate(-50%,-50%);
  z-index:3;
}

/* Вспомогательное: ограничиваем макс. ширину всего приложения */
.wrap{ max-width:480px; }
.mapseg{
  position:relative;
  min-height:520px; /* можно менять под твои арты */
  background-size:cover; background-position:center;
  border-bottom:1px solid #1b1b22;
}

/* Узлы карты — золотые таблички */
.node{
  position:absolute; transform:translate(-50%,-50%);
  padding:10px 12px; min-width:96px;
  font-family:"Cinzel", serif; font-weight:600; color:#211a0f;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
  background:
    linear-gradient(180deg, #f5e2a6, #d9ad5a 45%, #9b6f1d 90%);
  border:1px solid #7b5615; border-radius:12px;
  box-shadow: inset 0 1px 0 #fff3, 0 3px 0 #5a3a0a, 0 10px 18px rgba(0,0,0,.35);
}
.node:active{transform:translate(-50%,-48%);}

/* ---------- ПЛАВАЮЩАЯ КНОПКА ЧАТА ---------- */
.fab-chat{
  position:fixed; right:12px; bottom:84px; z-index:10;
  width:56px; height:56px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #2a2935, #16151c);
  border:1px solid #363546; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 6px 16px rgba(0,0,0,.45);
}
.fab-chat img{width:24px; height:24px; filter: drop-shadow(0 1px 0 #000)}

/* ---------- НИЖНЯЯ ПАНЕЛЬ ---------- */
.bottombar{
  position:sticky; bottom:0; z-index:6;
  display:flex; gap:8px; justify-content:space-between;
  padding:8px; margin-top:8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(0,0,0,.25)),
    url('/client/assets/ui/leather_tile.jpg');
  background-size:cover;
  border:1px solid #2b2a36; border-radius:12px;
  box-shadow: 0 -4px 14px rgba(0,0,0,.35);
}
.bottombar button{flex:1 1 25%; padding:12px 6px; border-radius:12px; font-family:"Cinzel", serif; font-size:15px}
.bottombar .active{outline:2px solid #3d5bff; box-shadow: 0 0 0 2px rgba(61,91,255,.25) inset;}

/* ---------- САЙД-ПАНЕЛЬ ЧАТА (на мобиле как модал) ---------- */
.sidepanel{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:-100%; width:100%; max-width:480px; height:85vh;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.2)), var(--bg-panel);
  border-top: 1px solid #2b2a36; border-left:1px solid #2b2a36; border-right:1px solid #2b2a36;
  border-top-left-radius:16px; border-top-right-radius:16px;
  box-shadow: 0 -10px 24px rgba(0,0,0,.45);
  z-index:20; transition: bottom .22s ease;
  display:flex; flex-direction:column; padding:10px;
}
.sidepanel.open{ bottom:0; }
.sidehead{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px}
.chatbox{
  flex:1 1 auto; overflow:auto;
  border:1px solid #2b2a36; border-radius:12px; padding:10px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.22));
}

/* ---------- Пролог/бой ---------- */
#fight button{margin-top:8px}
pre{white-space:pre-wrap; background:#0f0f14; border:1px solid #23222e; padding:8px; border-radius:10px}

/* На очень маленьких экранах уменьшим высоты секций карты */
@media (max-height: 640px){
  .mapseg{min-height:440px}
}

/* Безопасные отступы на iOS (вырезы) */
@supports(padding:max(0px)){
  .bottombar{ padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .fab-chat{ bottom: calc(84px + env(safe-area-inset-bottom)); }
}