/* ===== ТОКЕНЫ ===== */
:root{
  --bg-deep:#14100c;
  --bg-panel:#1f1812;
  --stone-border:#3d3226;
  --stone-border-light:#5a4a36;
  --gold:#c89b3c;
  --gold-bright:#e8c766;
  --ember:#e0672c;
  --hp:#b23a3a;
  --mp:#3a72b2;
  --text:#ede3d0;
  --text-muted:#a89a80;
  --radius:10px;
  --font-display:'Cinzel', serif;
  --font-body:'Inter', sans-serif;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}

html,body{
  margin:0; padding:0; height:100%;
  background:var(--bg-deep);
  color:var(--text);
  font-family:var(--font-body);
  overflow:hidden;
  user-select:none;
}

body{
  background-image:
    radial-gradient(circle at 20% 0%, rgba(224,103,44,0.06), transparent 40%),
    radial-gradient(circle at 80% 100%, rgba(60,114,178,0.05), transparent 40%);
}

button{
  font-family:inherit;
  border:none;
  background:none;
  color:inherit;
  cursor:pointer;
  -webkit-user-select:none;
}

/* активное нажатие — мгновенный отклик без transition-задержки */
.building-card:active, .equip-slot:active, .nav-btn:active{
  transform:scale(0.94);
  filter:brightness(1.15);
}

.hidden{ display:none !important; }

/* ===== ВЕРХНЯЯ ПАНЕЛЬ ===== */
.topbar{
  position:fixed; top:0; left:0; right:0;
  height:64px;
  display:flex; align-items:center; gap:10px;
  padding:0 10px;
  background:linear-gradient(180deg, var(--bg-panel), rgba(31,24,18,0.92));
  border-bottom:2px solid var(--stone-border);
  z-index:20;
}

.hero-badge{ position:relative; flex-shrink:0; }
.hero-avatar{
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-deep);
  border:2px solid var(--gold);
  border-radius:50%;
  padding:9px;
}
.hero-avatar img{ width:100%; height:100%; object-fit:contain; }
.hero-level{
  position:absolute; bottom:-4px; right:-4px;
  background:var(--gold);
  color:var(--bg-deep);
  font-family:var(--font-display);
  font-weight:700;
  font-size:11px;
  min-width:20px; height:20px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--bg-deep);
}

.stat-bars{ flex:1; display:flex; flex-direction:column; gap:4px; min-width:0; }
.stat-row{ display:flex; align-items:center; gap:6px; }
.stat-icon{ width:16px; height:16px; flex-shrink:0; }
.hp-icon, .mp-icon{ filter:drop-shadow(0 0 3px rgba(0,0,0,0.5)); }

.bar-track{
  position:relative;
  flex:1; height:14px;
  background:rgba(0,0,0,0.5);
  border:1px solid var(--stone-border-light);
  border-radius:7px;
  overflow:hidden;
}
.bar-fill{ height:100%; border-radius:7px 0 0 7px; }
.hp-fill{ background:linear-gradient(180deg,#d15656,var(--hp)); }
.mp-fill{ background:linear-gradient(180deg,#5590d1,var(--mp)); }
.bar-text{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:9px; font-weight:600;
  text-shadow:0 1px 2px rgba(0,0,0,0.8);
}

.coins-badge{
  flex-shrink:0;
  display:flex; align-items:center; gap:5px;
  background:var(--bg-deep);
  border:1.5px solid var(--gold);
  border-radius:16px;
  padding:5px 10px;
}
.coin-icon{
  width:16px; height:16px;
  filter:drop-shadow(0 0 4px rgba(200,155,60,0.6));
}
.coin-count{ font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--gold-bright); }

/* ===== ЭКРАНЫ ===== */
.screen{
  position:absolute; top:64px; bottom:64px; left:0; right:0;
  overflow-y:auto;
  padding:16px 12px 24px;
  -webkit-overflow-scrolling:touch;
}

.city-name{
  font-family:var(--font-display);
  text-align:center;
  font-size:22px;
  letter-spacing:2px;
  color:var(--gold-bright);
  margin:4px 0 18px;
  text-shadow:0 0 12px rgba(224,103,44,0.35);
}

/* ===== ГОРОД: СЕТКА ЗДАНИЙ ===== */
.city-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
  max-width:420px;
  margin:0 auto;
}

.building-card{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background:linear-gradient(180deg, var(--bg-panel), #17120d);
  border:1.5px solid var(--stone-border);
  border-radius:var(--radius);
  padding:18px 8px 14px;
  transition:transform 60ms ease, filter 60ms ease;
}

.building-icon{ width:40px; height:40px; }
.building-icon img{ width:100%; height:100%; object-fit:contain; }
.building-label{
  font-family:var(--font-display);
  font-size:13px; font-weight:600;
  color:var(--text);
  text-align:center;
}

/* ===== ЭКРАН ГЕРОЯ ===== */
.hero-screen-header{
  display:flex; align-items:center; justify-content:space-between;
  max-width:420px; margin:0 auto 16px;
}
.hero-screen-header h1{
  font-family:var(--font-display); font-size:20px; letter-spacing:1px; color:var(--gold-bright); margin:0;
}
.hero-power{ display:flex; flex-direction:column; align-items:flex-end; }
.power-label{ font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1px; }
.power-value{ font-family:var(--font-display); font-size:18px; font-weight:700; color:var(--ember); }

.equip-layout{
  position:relative;
  max-width:420px; margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1.2fr 1fr;
  gap:10px;
  align-items:start;
}

.equip-col{ display:flex; flex-direction:column; gap:12px; }

.equip-slot{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  background:var(--bg-panel);
  border:1.5px dashed var(--stone-border-light);
  border-radius:var(--radius);
  padding:12px 4px;
}
.equip-slot svg{ width:26px; height:26px; color:var(--text-muted); }
.equip-slot.filled{ border-style:solid; border-color:var(--gold); }
.equip-slot.filled .slot-icon-wrap{ filter:drop-shadow(0 0 3px rgba(200,155,60,0.5)); }
.slot-label{ font-size:10px; color:var(--text-muted); text-align:center; }

.equip-slot--boots{
  grid-column:2; margin-top:6px;
}

.hero-figure{
  display:flex; align-items:center; justify-content:center;
  color:var(--stone-border-light);
  padding-top:10px;
}
.hero-figure svg{ width:70px; height:auto; }

/* ===== НИЖНЕЕ МЕНЮ ===== */
.bottom-nav{
  position:fixed; bottom:0; left:0; right:0; height:64px;
  display:flex;
  background:linear-gradient(0deg, var(--bg-panel), rgba(31,24,18,0.92));
  border-top:2px solid var(--stone-border);
  z-index:20;
}
.nav-btn{
  flex:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px;
  color:var(--text-muted);
  transition:color 80ms ease;
}
.nav-btn svg{ width:24px; height:24px; }
.nav-btn span{ font-size:10px; font-weight:600; }
.nav-btn.active{ color:var(--gold-bright); }
.nav-btn.active svg{ filter:drop-shadow(0 0 3px rgba(224,103,44,0.5)); }

/* ===== УНІВЕРСАЛЬНИЙ КЛАС ДЛЯ ВСІХ КАРТИНОК-ІКОНОК ===== */
.icon-img{ width:100%; height:100%; object-fit:contain; display:block; }

/* ===== АВТОРИЗАЦИЯ ===== */
.auth-screen{
  position:fixed; inset:0; top:0; bottom:0;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.auth-box{ width:100%; max-width:340px; }
.game-logo{
  font-family:var(--font-display); text-align:center; font-size:26px;
  color:var(--gold-bright); margin-bottom:24px;
  text-shadow:0 0 16px rgba(224,103,44,0.4);
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.logo-icon{ width:30px; height:30px; object-fit:contain; }
.auth-tabs{ display:flex; gap:8px; margin-bottom:16px; }
.auth-tab{
  flex:1; padding:10px; border-radius:8px;
  background:var(--bg-panel); border:1.5px solid var(--stone-border);
  color:var(--text-muted); font-weight:600; font-size:13px;
}
.auth-tab.active{ color:var(--gold-bright); border-color:var(--gold); }
.auth-form{ display:flex; flex-direction:column; gap:10px; }
.auth-form.hidden{ display:none; }
.auth-form input{
  padding:12px; border-radius:8px; border:1.5px solid var(--stone-border);
  background:var(--bg-panel); color:var(--text); font-size:14px;
}
.auth-form input:focus{ outline:none; border-color:var(--gold); }
.btn-primary{
  padding:13px; border-radius:8px;
  background:linear-gradient(180deg, var(--gold-bright), var(--gold));
  color:var(--bg-deep); font-weight:700; font-size:14px;
  font-family:var(--font-display);
}
.btn-primary:active{ transform:scale(0.97); }
.btn-primary:disabled{ opacity:0.5; }
.btn-secondary{
  padding:13px; border-radius:8px;
  background:var(--bg-panel); border:1.5px solid var(--stone-border-light);
  color:var(--text); font-weight:600; font-size:14px;
}
.auth-error{ color:#e06060; font-size:12px; min-height:16px; text-align:center; }

/* ===== ОНБОРДИНГ: РАСА / КЛАСС ===== */
.onboarding-screen{
  position:absolute; inset:0; overflow-y:auto;
  padding:24px 14px 40px;
}
.onboarding-title{
  font-family:var(--font-display); text-align:center; font-size:20px;
  color:var(--gold-bright); margin:0 0 20px;
}
.race-grid, .class-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
  max-width:420px; margin:0 auto;
}
.race-card, .class-card{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  background:var(--bg-panel); border:2px solid var(--stone-border);
  border-radius:var(--radius); padding:18px 8px;
}
.race-card.selected, .class-card.selected{
  border-color:var(--gold); box-shadow:0 0 12px rgba(200,155,60,0.35);
}
.race-card .emoji, .class-card .emoji{ font-size:32px; display:flex; align-items:center; justify-content:center; height:36px; }
.race-card .emoji img, .class-card .emoji img{ width:34px; height:34px; object-fit:contain; }
.race-card .name, .class-card .name{ font-family:var(--font-display); font-size:14px; font-weight:600; }
.race-card .desc, .class-card .desc{ font-size:10px; color:var(--text-muted); text-align:center; }

.skill-preview{ max-width:420px; margin:20px auto 0; }
.skill-preview h3{ font-family:var(--font-display); font-size:14px; color:var(--gold-bright); margin-bottom:8px; }
.skill-preview-list{ display:flex; flex-direction:column; gap:8px; }
.skill-preview-item{
  background:var(--bg-panel); border:1px solid var(--stone-border);
  border-radius:8px; padding:10px 12px;
}
.skill-preview-item .sname{ font-weight:600; font-size:13px; color:var(--text); }
.skill-preview-item .sdesc{ font-size:11px; color:var(--text-muted); margin-top:2px; }
.skill-preview-item .smeta{ font-size:10px; color:var(--gold); margin-top:4px; }

.name-input-block{ max-width:420px; margin:20px auto 0; display:flex; flex-direction:column; gap:10px; }
.name-input-block input{
  padding:12px; border-radius:8px; border:1.5px solid var(--stone-border);
  background:var(--bg-panel); color:var(--text); font-size:14px;
}

/* ===== ГЕРОЙ: ДОП. ЭЛЕМЕНТЫ ===== */
.hero-power-block{ display:flex; flex-direction:column; align-items:flex-end; }
.power-line{ display:flex; gap:6px; align-items:baseline; }
.power-line.small{ font-size:10px; color:var(--text-muted); margin-top:2px; }
.slot-icon-wrap{ width:26px; height:26px; display:flex; align-items:center; justify-content:center; }
.slot-icon-wrap img{ width:100%; height:100%; object-fit:contain; }

.section-title{
  font-family:var(--font-display); font-size:14px; color:var(--gold-bright);
  max-width:420px; margin:20px auto 8px;
}
.skills-row, .artifacts-row{
  display:flex; gap:10px; overflow-x:auto; max-width:420px; margin:0 auto;
  padding-bottom:6px;
}
.skill-chip, .artifact-chip{
  flex-shrink:0; width:64px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  background:var(--bg-panel); border:1.5px solid var(--stone-border);
  border-radius:8px; padding:8px 4px;
}
.skill-chip.locked{ opacity:0.4; }
.skill-chip .icon, .artifact-chip .icon{ width:20px; height:20px; display:flex; align-items:center; justify-content:center; }
.skill-chip .label, .artifact-chip .label{ font-size:9px; text-align:center; color:var(--text); }

/* ===== МАГАЗИН / ИНВЕНТАРЬ ===== */
.shop-list, .inv-list{
  display:flex; flex-direction:column; gap:8px;
  max-width:460px; margin:0 auto;
}
.shop-item, .inv-item{
  display:flex; align-items:center; gap:10px;
  background:var(--bg-panel); border:1.5px solid var(--stone-border);
  border-radius:8px; padding:10px 12px;
}
.item-icon{ width:26px; height:26px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.item-info{ flex:1; min-width:0; }
.item-info .iname{ font-size:13px; font-weight:600; color:var(--text); }
.item-info .imeta{ font-size:10px; color:var(--text-muted); margin-top:2px; }
.item-actions{ flex-shrink:0; display:flex; gap:6px; }
.btn-mini{
  padding:7px 12px; border-radius:6px; font-size:11px; font-weight:600;
  background:var(--gold); color:var(--bg-deep);
}
.btn-mini.secondary{ background:var(--stone-border-light); color:var(--text); }
.btn-mini:disabled{ opacity:0.4; }
.btn-mini .icon-img{ width:12px; height:12px; display:inline-block; vertical-align:-1px; }
.rarity-common{ color:#c9c9c9; }
.rarity-rare{ color:#4caf50; }
.rarity-epic{ color:#9c4dcc; }
.rarity-legendary{ color:#e8c766; }

.wip-note{ text-align:center; color:var(--text-muted); font-size:11px; margin-top:16px; }

/* ===== МОДАЛКА ЗАТОЧКИ ===== */
.modal-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,0.7);
  display:flex; align-items:center; justify-content:center;
  z-index:50; padding:20px;
}
.modal-overlay.hidden{ display:none; }
.modal-box{
  background:var(--bg-panel); border:2px solid var(--gold);
  border-radius:12px; padding:20px; width:100%; max-width:360px;
}
.modal-box h3{ font-family:var(--font-display); color:var(--gold-bright); margin:0 0 12px; font-size:16px; }
.enchant-item-info{
  background:var(--bg-deep); border-radius:8px; padding:10px; margin-bottom:14px;
  font-size:12px; color:var(--text-muted);
}
.modal-label{ font-size:12px; color:var(--text-muted); margin:0 0 8px; }
.scroll-list{ display:flex; flex-direction:column; gap:6px; max-height:160px; overflow-y:auto; margin-bottom:14px; }
.scroll-option{
  padding:8px 10px; border-radius:6px; border:1.5px solid var(--stone-border);
  font-size:12px; text-align:left;
}
.scroll-option.selected{ border-color:var(--gold); background:rgba(200,155,60,0.1); }
.modal-actions{ display:flex; gap:10px; }
.modal-actions button{ flex:1; }
.enchant-result{ margin-top:12px; font-size:13px; text-align:center; min-height:20px; }
.enchant-result.success{ color:#7cb342; }
.enchant-result.fail{ color:#e06060; }

/* ===== ВИБІР ПЕРСОНАЖА ===== */
.onboarding-sub{ text-align:center; color:var(--text-muted); font-size:12px; margin:-14px 0 16px; }
.char-select-list{ display:flex; flex-direction:column; gap:10px; max-width:420px; margin:0 auto; }
.char-select-card{
  display:flex; align-items:center; gap:12px;
  background:var(--bg-panel); border:1.5px solid var(--stone-border);
  border-radius:var(--radius); padding:14px;
}
.char-emoji{ font-size:30px; flex-shrink:0; }
.char-info{ flex:1; text-align:left; }
.char-name{ font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--gold-bright); }
.char-meta{ font-size:11px; color:var(--text-muted); margin-top:2px; }
.char-meta .icon-img{ width:11px; height:11px; display:inline-block; vertical-align:-1px; }
.char-arrow{ font-size:20px; color:var(--gold); flex-shrink:0; }

/* ===== СЛАЙДЕР РАСИ ===== */
.race-slider{
  position:relative; max-width:420px; margin:0 auto;
  display:flex; align-items:center; gap:8px;
  overflow:hidden;
}
.race-slider-track{
  display:flex; width:100%;
  transition:transform 220ms ease;
}
.race-slide{
  min-width:100%; display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:24px 0;
}
.race-slide-emoji{ font-size:56px; }
.race-slide-name{ font-family:var(--font-display); font-size:20px; color:var(--gold-bright); }
.slider-arrow{
  flex-shrink:0; width:36px; height:36px; border-radius:50%;
  background:var(--bg-panel); border:1.5px solid var(--stone-border-light);
  color:var(--gold-bright); font-size:20px; line-height:1;
  z-index:2;
}
.race-dots{ display:flex; justify-content:center; gap:6px; margin:10px 0 16px; }
.race-dot{ width:7px; height:7px; border-radius:50%; background:var(--stone-border-light); }
.race-dot.active{ background:var(--gold); }

.race-detail{ max-width:420px; margin:0 auto; }
.race-detail-name{ font-family:var(--font-display); font-size:17px; color:var(--gold-bright); text-align:center; margin:0 0 8px; }
.race-detail-desc{ font-size:12px; color:var(--text-muted); text-align:center; margin:0 0 16px; line-height:1.5; }
.skill-preview-heading{ font-family:var(--font-display); font-size:13px; color:var(--gold-bright); margin:0 0 8px; }
.srole{ color:var(--gold); font-weight:400; }

/* ===== ПРИКРАСИ (маленькі слоти) ===== */
.jewelry-row{
  display:flex; gap:8px; max-width:420px; margin:0 auto; justify-content:center; flex-wrap:wrap;
}
.equip-slot--small{ padding:8px 6px; flex:1; min-width:60px; }
.equip-slot--small svg{ width:18px; height:18px; }
.equip-slot--small .slot-icon-wrap{ width:18px; height:18px; }
.equip-slot--small .slot-label{ font-size:8px; }

/* ===== ПЕРЕМИКАЧ ПЕРСОНАЖА В ШАПЦІ ===== */
.switch-char-btn{
  flex-shrink:0; width:36px; height:36px; border-radius:8px;
  background:var(--bg-panel); border:1.5px solid var(--stone-border-light);
  padding:6px;
}
.switch-char-btn img{ width:100%; height:100%; object-fit:contain; }
.switch-char-btn:active{ transform:scale(0.92); }