:root {
  --gold: #f5c842; --gold-dark: #c9972a;
  --red: #e03030; --red-dark: #a01010;
  --blue: #3a8fe8; --green: #30c060; --cyan: #00e5ff;
  --bg: #05050f; --bg3: #0f0f25;
  --surface: #13132a; --surface2: #1a1a35;
  --border: rgba(245,200,66,0.2);
  --text: #e8e0ff; --text-dim: #7070a0;
  --human-color: #f5a742; --android-color: #00e5ff;
}

/* ══════════════════════════════════════════════════════════
   THEMES — applied to #app-screen[data-theme]
   Background/surface/text/border all change per theme
   ══════════════════════════════════════════════════════════ */

/* 💎 Cyan Anime */
#app-screen[data-theme="cyan"] {
  --gold: #00d4ff; --gold-dark: #0099cc;
  --bg: #020b12; --bg3: #041520;
  --surface: #061c2a; --surface2: #0a2438;
  --border: rgba(0,212,255,0.25);
  --text: #d0f4ff; --text-dim: #4080a0;
  background:#020b12 !important;
}
#app-screen[data-theme="cyan"] .page { background:#020b12 !important; }
#app-screen[data-theme="cyan"]::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background: radial-gradient(ellipse 80% 50% at 20% 20%,rgba(0,212,255,0.10),transparent 60%),
              radial-gradient(ellipse 60% 40% at 80% 80%,rgba(0,150,255,0.08),transparent 60%);
}

/* ⭐ Gold/Yellow */
#app-screen[data-theme="yellow"] {
  --gold: #ffd700; --gold-dark: #e6a800;
  --bg: #0d0a00; --bg3: #1a1400;
  --surface: #211900; --surface2: #2e2400;
  --border: rgba(255,215,0,0.25);
  --text: #fff8d0; --text-dim: #8a7040;
  background:#0d0a00 !important;
}
#app-screen[data-theme="yellow"] .page { background:#0d0a00 !important; }
#app-screen[data-theme="yellow"]::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background: radial-gradient(ellipse 80% 50% at 20% 20%,rgba(255,215,0,0.09),transparent 60%),
              radial-gradient(ellipse 60% 40% at 80% 80%,rgba(255,160,0,0.07),transparent 60%);
}

/* 🔥 Red */
#app-screen[data-theme="red"] {
  --gold: #ff4444; --gold-dark: #cc1111;
  --bg: #0d0202; --bg3: #1a0505;
  --surface: #220808; --surface2: #300d0d;
  --border: rgba(255,68,68,0.25);
  --text: #ffe8e8; --text-dim: #804040;
  background:#0d0202 !important;
}
#app-screen[data-theme="red"] .page { background:#0d0202 !important; }
#app-screen[data-theme="red"]::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background: radial-gradient(ellipse 80% 50% at 20% 20%,rgba(255,60,60,0.10),transparent 60%),
              radial-gradient(ellipse 60% 40% at 80% 80%,rgba(200,30,30,0.08),transparent 60%);
}

/* 🐉 Green */
#app-screen[data-theme="green"] {
  --gold: #00e676; --gold-dark: #00b050;
  --bg: #010d05; --bg3: #031508;
  --surface: #061d0c; --surface2: #0a2a14;
  --border: rgba(0,230,118,0.22);
  --text: #d0ffe8; --text-dim: #308050;
  background:#010d05 !important;
}
#app-screen[data-theme="green"] .page { background:#010d05 !important; }
#app-screen[data-theme="green"]::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background: radial-gradient(ellipse 80% 50% at 20% 20%,rgba(0,230,118,0.09),transparent 60%),
              radial-gradient(ellipse 60% 40% at 80% 80%,rgba(0,180,80,0.07),transparent 60%);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Rajdhani',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; overflow-x:hidden; }
body::before { content:''; position:fixed; inset:0; background: radial-gradient(ellipse 80% 50% at 20% 20%,rgba(245,200,66,0.05),transparent 60%), radial-gradient(ellipse 60% 40% at 80% 80%,rgba(0,229,255,0.05),transparent 60%), radial-gradient(ellipse 50% 60% at 50% 100%,rgba(224,48,48,0.03),transparent 70%); pointer-events:none; z-index:0; }

.screen { display:none; position:relative; z-index:1; min-height:100vh; }
.screen.active { display:flex; flex-direction:column; }

.logo { font-family:'Cinzel Decorative',serif; font-size:clamp(1.6rem,5vw,2.8rem); background:linear-gradient(135deg,var(--gold) 0%,#fff8e0 50%,var(--gold-dark) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; letter-spacing:2px; }
.logo span { background:linear-gradient(135deg,var(--red) 0%,#ff8080 50%,var(--red-dark) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }

/* ── DISCLAIMER ── */
#disclaimer-screen { background:var(--bg); }
.disclaimer-wrap { display:flex; flex-direction:column; height:100vh; max-width:520px; margin:0 auto; }
.disclaimer-header { padding:1.5rem 1.5rem 1rem; text-align:center; flex-shrink:0; }
.disclaimer-badge { display:inline-block; background:rgba(224,48,48,0.2); border:1px solid var(--red); color:var(--red); font-size:0.75rem; letter-spacing:2px; padding:0.3rem 0.75rem; border-radius:20px; margin-bottom:0.75rem; }
.disclaimer-title { font-family:'Cinzel Decorative',serif; font-size:1rem; color:#fff; letter-spacing:2px; margin-bottom:0.3rem; }
.disclaimer-subtitle { color:var(--text-dim); font-size:0.8rem; letter-spacing:1px; }
.disclaimer-scroll { flex:1; overflow-y:auto; padding:0 1.5rem; }
.disclaimer-body { padding:0.5rem 0 2rem; }
.disclaimer-item { display:flex; gap:1rem; margin-bottom:1.5rem; }
.disclaimer-num { width:28px; height:28px; border-radius:50%; background:rgba(224,48,48,0.2); border:1px solid var(--red); color:var(--red); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.85rem; flex-shrink:0; margin-top:2px; }
.disclaimer-item-title { font-weight:700; font-size:0.95rem; color:#fff; margin-bottom:0.3rem; letter-spacing:0.5px; }
.disclaimer-item-text { color:var(--text-dim); font-size:0.82rem; line-height:1.6; }
.disclaimer-final { background:rgba(245,200,66,0.08); border:1px solid var(--border); border-radius:10px; padding:1rem; color:var(--text); font-size:0.85rem; line-height:1.6; text-align:center; margin-top:1rem; }
.disclaimer-footer { padding:1rem 1.5rem 1.5rem; flex-shrink:0; border-top:1px solid var(--border); }
.scroll-hint { text-align:center; color:var(--text-dim); font-size:0.8rem; letter-spacing:1px; margin-bottom:0.75rem; animation:bounce 1.5s ease-in-out infinite; }
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)} }
.btn-disclaimer {
  width:100%; padding:1rem; border-radius:10px;
  font-family:'Cinzel Decorative',serif; font-size:0.85rem; letter-spacing:1px;
  cursor:not-allowed; transition:all 0.4s;
  background:var(--surface2); color:var(--text-dim);
  border:1px solid var(--border);
}
.btn-disclaimer.enabled {
  background:linear-gradient(135deg,#c9972a,#f5c842);
  color:#000; border:none; cursor:pointer;
  box-shadow:0 0 18px rgba(245,200,66,0.25);
}
.btn-disclaimer.enabled:hover { transform:translateY(-2px); box-shadow:0 8px 28px rgba(245,200,66,0.45); }
.btn-disclaimer:disabled { opacity:0.45; cursor:not-allowed; }
.disclaimer-link { text-align:center; color:var(--text-dim); font-size:0.8rem; margin-top:1rem; cursor:pointer; text-decoration:underline; transition:color 0.3s; }
.disclaimer-link:hover { color:var(--gold); }

/* ── AUTH ── */
#auth-screen { align-items:center; justify-content:center; padding:2rem; }
.auth-box { width:100%; max-width:420px; background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:2.5rem 2rem; box-shadow:0 0 60px rgba(245,200,66,0.08); animation:fadeUp 0.6s ease; }
.auth-header { text-align:center; margin-bottom:2rem; }
.auth-header .logo { margin-bottom:0.5rem; display:block; }
.auth-subtitle { color:var(--text-dim); font-size:0.9rem; letter-spacing:3px; text-transform:uppercase; }
.auth-tabs { display:flex; margin-bottom:1.5rem; border-radius:8px; overflow:hidden; border:1px solid var(--border); }
.auth-tab { flex:1; padding:0.6rem; text-align:center; cursor:pointer; font-family:'Rajdhani',sans-serif; font-weight:600; font-size:0.95rem; letter-spacing:1px; text-transform:uppercase; background:transparent; color:var(--text-dim); border:none; transition:all 0.3s; }
.auth-tab.active { background:var(--gold); color:#000; }
.field { margin-bottom:1rem; }
.field label { display:block; font-size:0.8rem; letter-spacing:2px; text-transform:uppercase; color:var(--text-dim); margin-bottom:0.4rem; }
.field input { width:100%; padding:0.75rem 1rem; background:var(--bg3); border:1px solid var(--border); border-radius:8px; color:var(--text); font-family:'Rajdhani',sans-serif; font-size:1rem; transition:border-color 0.3s; }
.field input:focus { outline:none; border-color:var(--gold); }
.btn { width:100%; padding:0.85rem; border:none; border-radius:8px; font-family:'Cinzel Decorative',serif; font-size:0.85rem; letter-spacing:1px; cursor:pointer; transition:all 0.3s; }
.btn-gold { background:linear-gradient(135deg,var(--gold-dark),var(--gold)); color:#000; }
.btn-gold:hover { transform:translateY(-2px); box-shadow:0 8px 25px rgba(245,200,66,0.35); }
.btn-outline { background:transparent; border:1px solid var(--border); color:var(--text-dim); margin-top:0.75rem; }
.btn-outline:hover { border-color:var(--gold); color:var(--gold); }
.error-msg { color:var(--red); font-size:0.85rem; margin-top:0.75rem; text-align:center; min-height:1.2rem; }

/* ── RACE ── */
#race-screen { align-items:center; justify-content:center; padding:2rem; }
.race-container { width:100%; max-width:700px; text-align:center; animation:fadeUp 0.6s ease; }
.race-title { color:var(--text-dim); letter-spacing:3px; text-transform:uppercase; font-size:0.85rem; margin-bottom:2.5rem; }
.race-cards { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-bottom:2rem; }
.race-card { background:var(--surface); border:2px solid transparent; border-radius:16px; padding:2rem 1.5rem; cursor:pointer; transition:all 0.4s; position:relative; overflow:hidden; }
.race-card::before { content:''; position:absolute; inset:0; opacity:0; transition:opacity 0.4s; border-radius:14px; }
.race-card.human::before { background:radial-gradient(ellipse at 50% 0%,rgba(245,167,66,0.15),transparent 70%); }
.race-card.android::before { background:radial-gradient(ellipse at 50% 0%,rgba(0,229,255,0.15),transparent 70%); }
.race-card:hover::before,.race-card.selected::before { opacity:1; }
.race-card.human:hover,.race-card.human.selected { border-color:var(--human-color); box-shadow:0 0 30px rgba(245,167,66,0.25); }
.race-card.android:hover,.race-card.android.selected { border-color:var(--android-color); box-shadow:0 0 30px rgba(0,229,255,0.25); }
.race-icon { font-size:3.5rem; margin-bottom:1rem; display:block; }
.race-name { font-family:'Cinzel Decorative',serif; font-size:1.1rem; margin-bottom:0.5rem; }
.race-card.human .race-name { color:var(--human-color); }
.race-card.android .race-name { color:var(--android-color); }
.race-desc { color:var(--text-dim); font-size:0.85rem; line-height:1.5; margin-bottom:1rem; }
.race-bonus { font-size:0.8rem; letter-spacing:1px; text-transform:uppercase; padding:0.3rem 0.75rem; border-radius:20px; display:inline-block; }
.race-card.human .race-bonus { background:rgba(245,167,66,0.15); color:var(--human-color); }
.race-card.android .race-bonus { background:rgba(0,229,255,0.15); color:var(--android-color); }

/* ── 3-step registration ── */
.reg-steps { display:flex; align-items:center; justify-content:center; gap:0; margin-bottom:1.5rem; }
.reg-step { width:2rem; height:2rem; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700; font-family:'Rajdhani',sans-serif; border:2px solid var(--border); color:var(--text-dim); transition:all .3s; }
.reg-step.active { border-color:var(--gold); color:var(--gold); background:rgba(245,200,66,.12); }
.reg-step.done { border-color:#30c060; color:#30c060; background:rgba(48,192,96,.12); }
.reg-step-line { width:2.5rem; height:2px; background:var(--border); transition:background .3s; }
.reg-step-line.done { background:#30c060; }
.reg-step-content { animation:fadeUp .35s ease; }
.race-char-img { width:100%; height:140px; object-fit:contain; display:block; margin-bottom:.5rem; }
.race-card.gender-card.selected { border-color:#e060b0; box-shadow:0 0 30px rgba(224,96,176,.25); }
.race-card.gender-card#gender-male.selected { border-color:var(--human-color); box-shadow:0 0 30px rgba(245,167,66,.25); }

.style-choice-card { display:flex!important; flex-direction:row!important; text-align:left!important; transition:all .2s; }
.style-choice-card#style-taka-weiro.selected { border-color:#3a8fe8!important; box-shadow:0 0 24px rgba(58,143,232,.4)!important; background:rgba(58,143,232,.07)!important; }
.style-choice-card#style-beargraple.selected  { border-color:#e03030!important; box-shadow:0 0 24px rgba(224,48,48,.4)!important;  background:rgba(224,48,48,.07)!important; }
.style-choice-card#style-worudo-ake.selected  { border-color:#30c060!important; box-shadow:0 0 24px rgba(48,192,96,.4)!important;  background:rgba(48,192,96,.07)!important; }

.name-label { color:var(--text-dim); font-size:0.8rem; letter-spacing:2px; text-transform:uppercase; margin-bottom:0.5rem; }
.name-field { margin-bottom:1.5rem; }
.name-field input { width:100%; max-width:300px; padding:0.75rem 1rem; background:var(--surface); border:1px solid var(--border); border-radius:8px; color:var(--text); font-family:'Rajdhani',sans-serif; font-size:1.1rem; text-align:center; }
.name-field input:focus { outline:none; border-color:var(--gold); }

/* ── APP ── */
#app-screen { padding-bottom:76px; }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:0.8rem 1.25rem; background:rgba(8,8,22,0.96); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid rgba(245,200,66,0.15); position:sticky; top:0; z-index:100; box-shadow:0 4px 24px rgba(0,0,0,0.6), inset 0 -1px 0 rgba(245,200,66,0.08); }
.logout-btn { background:transparent; border:1px solid var(--border); color:var(--text-dim); padding:0.3rem 0.75rem; border-radius:6px; cursor:pointer; font-family:'Rajdhani',sans-serif; font-size:0.8rem; letter-spacing:1px; text-transform:uppercase; transition:all 0.3s; }
.logout-btn:hover { border-color:var(--red); color:var(--red); }
.bottom-nav {
  position:fixed; bottom:0; left:0; right:0;
  background:rgba(6,6,18,0.98);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border-top:1px solid rgba(245,200,66,0.2);
  display:flex; z-index:100;
  box-shadow:0 -12px 40px rgba(0,0,0,0.8);
  padding-bottom:env(safe-area-inset-bottom,0);
  height:68px;
}
.nav-btn {
  flex:1; padding:0.5rem 0.1rem 0.4rem;
  background:transparent; border:none;
  color:var(--text-dim); cursor:pointer;
  font-family:'Rajdhani',sans-serif; font-size:0;
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:0.22rem;
  transition:color 0.2s; position:relative;
  -webkit-tap-highlight-color:transparent;
  min-height:68px;
}
.nav-btn .nav-icon {
  font-size:1.55rem; line-height:1; display:block;
  transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1), filter 0.25s, opacity 0.2s;
}
.nav-label {
  font-size:0.58rem; letter-spacing:0.6px;
  text-transform:uppercase; line-height:1;
  font-family:'Rajdhani',sans-serif; font-weight:600;
  opacity:0.7; transition:opacity 0.2s;
  white-space:nowrap;
}
.nav-btn.active .nav-label { opacity:1; }

/* Активный индикатор — светящаяся таблетка под иконкой */
.nav-btn::before {
  content:''; position:absolute;
  top:6px; left:50%; transform:translateX(-50%);
  width:40px; height:40px; border-radius:14px;
  background:rgba(245,200,66,0); transition:background 0.25s;
}
.nav-btn.active {
  color:var(--gold);
}
.nav-btn.active::before {
  background:rgba(245,200,66,0.1);
}
.nav-btn.active .nav-icon {
  transform:scale(1.18) translateY(-2px);
  filter:drop-shadow(0 0 8px rgba(245,200,66,0.8));
  animation:navPop 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.nav-btn:active { opacity:0.7; transform:scale(0.9); transition:transform 0.1s, opacity 0.1s; }

/* Gold dot индикатор снизу */
.nav-btn.active::after {
  content:''; position:absolute; bottom:3px; left:50%;
  transform:translateX(-50%);
  width:4px; height:4px; border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 8px rgba(245,200,66,0.9);
  animation:dotIn 0.3s ease;
}

@keyframes navPop {
  0%{transform:scale(1) translateY(0)}
  50%{transform:scale(1.3) translateY(-4px)}
  100%{transform:scale(1.18) translateY(-2px)}
}
@keyframes dotIn { from{transform:translateX(-50%) scale(0)} to{transform:translateX(-50%) scale(1)} }
.page { display:none; padding:1.25rem; }
.page.active { display:block; animation:fadeUp 0.3s ease; }
/* Все страницы — фиксированная высота, скролл внутри */
.page {
  height: calc(100dvh - 3.6rem);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* Страницы с особым layout — без паддинга и скролла (управляют сами) */
#page-shop, #page-misc, #page-glory {
  overflow: hidden;
  padding: 0;
}
#page-shop.active { display:flex; flex-direction:column; padding:0; height:calc(100dvh - 3.6rem); }
#page-misc.active { display:flex; flex-direction:column; padding:0; height:calc(100dvh - 3.6rem); }
#city-map-wrap { display:none; }
#page-shop.active #city-map-wrap { display:block; flex:1; position:relative; overflow:hidden; }

/* ── CHARACTER ── */
.char-card { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:1.25rem; margin-bottom:1rem; position:relative; overflow:hidden; }
.char-card::before { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background:radial-gradient(ellipse at 60% 40%,rgba(245,200,66,0.08),transparent 60%),radial-gradient(ellipse at 20% 80%,rgba(0,229,255,0.04),transparent 50%); pointer-events:none; }
.char-header { display:flex; align-items:center; gap:1rem; margin-bottom:1rem; }
.char-avatar { width:70px; height:70px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:2.2rem; border:2px solid var(--border); background:var(--bg3); flex-shrink:0; }
.char-avatar.human { border-color:var(--human-color); box-shadow:0 0 20px rgba(245,167,66,0.3); }
.char-avatar.android { border-color:var(--android-color); box-shadow:0 0 20px rgba(0,229,255,0.3); }
.char-name { font-family:'Cinzel Decorative',serif; font-size:1.05rem; color:var(--gold); }
.char-race { font-size:0.75rem; letter-spacing:2px; text-transform:uppercase; margin-top:0.2rem; }
.char-race.human { color:var(--human-color); }
.char-race.android { color:var(--android-color); }
.power-level { text-align:center; padding:0.75rem; background:var(--bg3); border-radius:10px; margin-bottom:0.75rem; border:1px solid rgba(245,200,66,0.15); }
.power-label { font-size:0.7rem; letter-spacing:3px; text-transform:uppercase; color:var(--text-dim); }
.power-value { font-family:'Cinzel Decorative',serif; font-size:2.4rem; background:linear-gradient(135deg,var(--gold),#fff8e0); -webkit-background-clip:text; -webkit-text-fill-color:transparent; line-height:1.2; }
.xp-bar-wrap { }
.xp-label { display:flex; justify-content:space-between; font-size:0.75rem; color:var(--text-dim); margin-bottom:0.3rem; }
.xp-bar { height:6px; background:var(--bg3); border-radius:3px; overflow:hidden; }
.xp-fill { height:100%; border-radius:3px; transition:width 0.8s ease; background:linear-gradient(90deg,var(--gold-dark),var(--gold)); }

/* Energy */
.energy-wrap { margin-top:0.75rem; }
.energy-label { font-size:0.8rem; color:var(--text-dim); margin-bottom:0.3rem; display:flex; align-items:center; gap:0.5rem; }
.energy-bonus-tag { background:rgba(245,200,66,0.15); color:var(--gold); font-size:0.65rem; letter-spacing:1px; padding:0.15rem 0.5rem; border-radius:10px; font-weight:700; }
.energy-bar { height:8px; background:var(--bg3); border-radius:4px; overflow:hidden; }
.energy-fill { height:100%; border-radius:4px; transition:width 0.5s ease, background 0.5s ease; }

/* Stat bars */
.stat-bars { display:flex; flex-direction:column; gap:0.75rem; margin-bottom:1rem; }
.stat-bar-item { background:linear-gradient(135deg,var(--surface),rgba(26,26,53,0.8)); border:1px solid rgba(245,200,66,0.15); border-radius:12px; padding:0.75rem 1rem; box-shadow:0 2px 8px rgba(0,0,0,0.2); transition:border-color 0.2s; }
.stat-bar-item:hover { border-color:rgba(245,200,66,0.3); }
.stat-bar-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.4rem; font-size:0.85rem; font-weight:600; }
.stat-bar-bg { height:8px; background:var(--bg3); border-radius:4px; overflow:hidden; }
.stat-bar-fill { height:100%; border-radius:4px; transition:width 0.8s ease; }
.stat-bar-daily { font-size:0.7rem; color:var(--text-dim); margin-top:0.3rem; }

/* Daily progress bar — показывает сколько из дневного лимита использовано */
.stat-bar-daily-wrap { display:flex; align-items:center; gap:.4rem; margin-top:.3rem; }
.stat-bar-daily-num  { font-size:.68rem; color:var(--text-dim); flex-shrink:0; min-width:36px; }
.stat-bar-daily-bg   { flex:1; height:4px; background:rgba(255,255,255,.07); border-radius:2px; overflow:hidden; }
.stat-bar-daily-fill { height:100%; border-radius:2px; transition:width .8s ease; opacity:.75; }

.stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; }
.stat-item { background:linear-gradient(135deg,rgba(19,19,42,0.9),rgba(10,10,28,0.95)); border-radius:12px; padding:0.7rem 0.85rem; border:1px solid rgba(245,200,66,0.12); box-shadow:0 2px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.04); transition:all 0.2s; position:relative; overflow:hidden; }
.stat-item::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(245,200,66,0.2),transparent); }
.stat-item:hover { border-color:rgba(245,200,66,0.25); transform:translateY(-1px); }
.stat-label { font-size:0.6rem; letter-spacing:2px; text-transform:uppercase; color:var(--text-dim); }
.stat-value { font-size:1.4rem; font-weight:700; color:var(--text); margin-top:0.15rem; font-family:'Cinzel Decorative',serif; }

/* ── TRAIN ── */
.section-title { font-family:'Cinzel Decorative',serif; font-size:0.88rem; color:var(--gold); letter-spacing:2.5px; margin-bottom:0.9rem; display:flex; align-items:center; gap:0.6rem; animation:fadeUp .35s ease; }
.section-title::before { content:''; display:block; width:4px; height:18px; background:linear-gradient(180deg,#ffe87a,var(--gold)); border-radius:3px; flex-shrink:0; box-shadow:0 0 14px rgba(245,200,66,0.8), 0 0 4px rgba(245,200,66,0.4); }
.section-title::after { content:''; flex:1; height:1px; background:linear-gradient(90deg,rgba(245,200,66,0.4),transparent); }
/* Для мобилы — 1 колонка с горизонтальными кнопками */
.exercise-grid { display:flex; flex-direction:column; gap:0.4rem; margin-bottom:0.65rem; }

.exercise-btn {
  --ex-color: var(--gold);
  --ex-bg: rgba(245,200,66,0.05);
  --ex-border: rgba(245,200,66,0.15);
  position: relative;
  background: linear-gradient(135deg, rgba(14,14,36,0.97) 0%, rgba(11,11,28,0.95) 100%);
  border: 1px solid var(--ex-border);
  border-radius: 12px;
  padding: 0;
  cursor: pointer;
  text-align: left;
  transition: all 0.18s ease;
  color: var(--text);
  overflow: hidden;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: 72px;       /* фиксированная высота — все одинаковые */
  min-height: 72px;
  max-height: 72px;
}
.exercise-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ex-bg);
  opacity: 0;
  transition: opacity 0.18s;
  border-radius: inherit;
}
.exercise-btn:hover::before,
.exercise-btn.selected::before { opacity: 1; }
.exercise-btn:hover { border-color: var(--ex-color); box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 0 1px var(--ex-border); }
.exercise-btn:active { transform: scale(0.98); }
.exercise-btn.selected {
  border-color: var(--ex-color);
  box-shadow: 0 0 0 1px var(--ex-color), inset 3px 0 0 var(--ex-color);
}
.exercise-btn.selected .ex-icon-wrap svg { filter: drop-shadow(0 0 5px var(--ex-color)); }

/* Полоска цвета стата слева — теперь inset shadow при selected */
.exercise-btn::after {
  content: '';
  position: absolute;
  top: 0; left: 72px; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--ex-color), transparent);
  border-radius: 0;
  opacity: 0;
  transition: all 0.18s;
}
.exercise-btn:hover::after,
.exercise-btn.selected::after { opacity: 0.8; }

/* Camera badge для AI упражнений */
.ex-camera-badge {
  position: absolute;
  top: 0.4rem; right: 0.5rem;
  font-size: 0.55rem;
  background: rgba(0,229,255,0.12);
  border: 1px solid rgba(0,229,255,0.3);
  color: #00e5ff;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.ex-icon-wrap {
  width: 38px; height: 38px;
  flex-shrink: 0;
  color: var(--ex-color);
  transition: transform 0.18s;
  display: flex; align-items: center; justify-content: center;
}
.exercise-btn:hover .ex-icon-wrap { transform: scale(1.1); }
.ex-icon-wrap svg { width: 100%; height: 100%; }

/* Текстовая часть */
.ex-text { flex: 1; min-width: 0; padding: 0.45rem 0.55rem 0.45rem 0.6rem; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }

.ex-name {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 0.1rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ex-gain {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--ex-color);
  letter-spacing: 0.3px;
}
/* Training exercise PNG images */
.ex-img-wrap {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 11px 0 0 11px;
  background: #000;
  position: relative;
}
.ex-training-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform 0.3s ease;
  transform-origin: center center;
}
.exercise-btn:active .ex-training-img,
.exercise-btn.selected .ex-training-img {
  transform: scale(1.06);
}
/* Stat color left border accent on img-wrap */
.ex-img-wrap::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 100%;
  background: var(--ex-color);
  opacity: 0.7;
  pointer-events: none;
  z-index: 2;
}

/* Hint text compact */
.ex-hint {
  font-size: 0.58rem;
  color: var(--text-dim);
  margin-top: 0.08rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



.daily-limit-info { font-size:0.78rem; color:var(--text-dim); text-align:center; margin-bottom:0.75rem; padding:0.45rem 0.75rem; background:rgba(19,19,42,0.8); border-radius:8px; border:1px solid rgba(245,200,66,0.1); letter-spacing:0.3px; }
.reps-input-wrap { margin-bottom:1rem; }
.reps-input-wrap label { display:block; font-size:0.75rem; letter-spacing:2px; text-transform:uppercase; color:var(--text-dim); margin-bottom:0.4rem; }
.reps-row { display:flex; gap:0.6rem; align-items:center; }
.reps-row input { flex:1; padding:0.75rem 1rem; background:rgba(19,19,42,0.95); border:1.5px solid rgba(245,200,66,0.2); border-radius:10px; color:var(--text); font-family:'Cinzel Decorative',sans-serif; font-size:1.3rem; font-weight:700; text-align:center; transition:all 0.2s; box-shadow:inset 0 2px 8px rgba(0,0,0,0.3); }
.reps-row input:focus { outline:none; border-color:rgba(245,200,66,0.6); box-shadow:0 0 14px rgba(245,200,66,0.15), inset 0 2px 8px rgba(0,0,0,0.3); }
.log-result { background:linear-gradient(135deg,rgba(19,19,42,0.98),rgba(10,10,28,0.95)); border:1px solid rgba(245,200,66,0.25); border-radius:14px; padding:1.1rem 1rem; margin-top:0.75rem; text-align:center; display:none; box-shadow:0 0 30px rgba(245,200,66,0.08); position:relative; overflow:hidden; }
.log-result::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); }
.log-result.show { display:block; animation:logResultPop 0.45s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes logResultPop { from{opacity:0;transform:scale(0.9) translateY(10px)} to{opacity:1;transform:none} }
.stat-gained { font-family:'Cinzel Decorative',serif; font-size:1.7rem; text-shadow:0 0 20px currentColor; }
.xp-gained { font-size:1rem; color:var(--gold); margin-top:0.25rem; }
.result-text { color:var(--text-dim); font-size:0.8rem; margin-top:0.2rem; }
.history-list { display:flex; flex-direction:column; gap:0.35rem; margin-top:0.5rem; }
.history-item { background:linear-gradient(135deg,rgba(19,19,42,0.95),rgba(10,10,28,0.9)); border:1px solid rgba(245,200,66,0.1); border-radius:10px; padding:0.6rem 0.85rem 0.6rem 1rem; display:flex; justify-content:space-between; align-items:center; position:relative; overflow:hidden; transition:all 0.15s; }
.history-item::before { content:''; position:absolute; left:0; top:15%; bottom:15%; width:2.5px; background:linear-gradient(to bottom,#fff8aa,#f5c842,#c9972a); border-radius:0 2px 2px 0; opacity:0.7; box-shadow:0 0 6px rgba(245,200,66,0.4); }
.history-item:hover { border-color:rgba(245,200,66,0.25); transform:translateX(3px); box-shadow:0 2px 12px rgba(0,0,0,0.3); }
.history-left { display:flex; align-items:center; gap:0.65rem; }
.history-emoji { font-size:1.05rem; }
.history-name { font-size:0.82rem; font-weight:600; }
.history-time { font-size:0.68rem; color:var(--text-dim); }
.empty-msg { color:var(--text-dim); font-size:0.85rem; text-align:center; padding:1.5rem; }

/* ── LEADERBOARD ── */
.leaderboard-list { display:flex; flex-direction:column; gap:0.5rem; }
.lb-item { background:linear-gradient(135deg,rgba(19,19,42,0.95),rgba(10,10,28,0.9)); border:1px solid rgba(245,200,66,0.1); border-radius:14px; padding:0.7rem 0.9rem; display:flex; align-items:center; gap:0.75rem; transition:all 0.2s; box-shadow:0 2px 10px rgba(0,0,0,0.25); position:relative; overflow:hidden; }
.lb-item::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(245,200,66,0.15),transparent); opacity:0; transition:opacity 0.2s; }
.lb-item:hover { border-color:rgba(245,200,66,0.3); transform:translateY(-1px); box-shadow:0 6px 20px rgba(0,0,0,0.35); }
.lb-item:hover::before { opacity:1; }
.lb-item.me { border-color:rgba(245,200,66,0.4); background:rgba(245,200,66,0.05); box-shadow:0 0 20px rgba(245,200,66,0.08); }
.lb-item.rank-1 { border-color:rgba(255,215,0,0.35); background:linear-gradient(135deg,rgba(255,215,0,0.07),rgba(10,10,28,0.9)); }
.lb-item.rank-2 { border-color:rgba(192,192,192,0.25); background:linear-gradient(135deg,rgba(192,192,192,0.05),rgba(10,10,28,0.9)); }
.lb-item.rank-3 { border-color:rgba(205,127,50,0.25); background:linear-gradient(135deg,rgba(205,127,50,0.05),rgba(10,10,28,0.9)); }
.lb-rank { font-family:'Cinzel Decorative',serif; font-size:1rem; width:2rem; text-align:center; flex-shrink:0; }
.lb-rank.gold{color:#ffd700} .lb-rank.silver{color:#c0c0c0} .lb-rank.bronze{color:#cd7f32} .lb-rank.other{color:var(--text-dim)}
.lb-avatar { font-size:1.4rem; flex-shrink:0; }
.lb-info { flex:1; min-width:0; }
.lb-name { font-weight:700; font-size:0.9rem; }
.lb-race { font-size:0.7rem; letter-spacing:1px; text-transform:uppercase; }
.lb-race.human{color:var(--human-color)} .lb-race.android{color:var(--android-color)}
.lb-stats-mini { font-size:0.7rem; margin-top:0.2rem; display:flex; gap:0.5rem; }
.lb-power { text-align:right; flex-shrink:0; }
.lb-power-val { font-family:'Cinzel Decorative',serif; font-size:1.05rem; color:var(--gold); }
.lb-power-label { font-size:0.58rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-dim); }
.refresh-btn { background:transparent; border:1px solid var(--border); color:var(--text-dim); padding:0.4rem 0.85rem; border-radius:8px; cursor:pointer; font-family:'Rajdhani',sans-serif; font-size:0.75rem; letter-spacing:1px; text-transform:uppercase; transition:all 0.3s; margin-bottom:0.75rem; display:flex; align-items:center; gap:0.4rem; }
.refresh-btn:hover { border-color:var(--gold); color:var(--gold); }

/* ── ABOUT ── */
.about-card { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:2rem; text-align:center; }

/* ── LOADING ── */
.loading-wrap { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100vh; gap:1rem; }
.spinner { width:48px; height:48px; border:3px solid var(--surface2); border-top-color:var(--gold); border-radius:50%; animation:spin 0.8s linear infinite; }

/* ── TOAST ── */
.toast { position:fixed; bottom:84px; left:50%; transform:translateX(-50%) translateY(16px) scale(0.95); background:rgba(19,19,42,0.96); border:1px solid rgba(245,200,66,0.4); color:var(--gold); padding:0.5rem 1.35rem; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-radius:30px; font-size:0.83rem; font-weight:700; letter-spacing:0.3px; opacity:0; transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1); pointer-events:none; z-index:999; white-space:nowrap; box-shadow:0 4px 20px rgba(0,0,0,0.4),0 0 0 1px rgba(245,200,66,0.05); }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0) scale(1); }
.toast.toast-red { border-color:rgba(224,48,48,0.5); color:var(--red); box-shadow:0 4px 20px rgba(224,48,48,0.15); }
.toast.toast-gold { border-color:rgba(245,200,66,0.5); color:var(--gold); box-shadow:0 4px 20px rgba(245,200,66,0.15); }

@keyframes fadeUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes scaleIn { from{opacity:0;transform:scale(0.97)} to{opacity:1;transform:none} }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.85} }
@keyframes spin { to{transform:rotate(360deg)} }
@media(max-width:400px) { .race-cards{grid-template-columns:1fr} }

/* ── MOBILE OPTIMIZATIONS ── */
* { -webkit-tap-highlight-color: transparent; }
input, button { -webkit-appearance: none; touch-action: manipulation; }

/* Prevent zoom on input focus (iOS) */
input[type="email"], input[type="password"], input[type="number"], input[type="text"] {
  font-size: 16px !important;
}

/* Safe area for notched phones */
#app-screen { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
.bottom-nav { padding-bottom: env(safe-area-inset-bottom); }
.disclaimer-wrap { padding-bottom: env(safe-area-inset-bottom); }

/* Bigger tap targets on mobile */
@media (max-width: 480px) {
  /* exercise-btn: vertical image cards */
  .nav-btn { padding: 0.7rem 0.3rem; }
  .workout-btn { min-height: 70px; }
  .btn { padding: 1rem; font-size: 0.9rem; }
  .auth-box { padding: 1.75rem 1.25rem; }
  .char-card { padding: 1rem; }
  .stat-bar-item { padding: 0.6rem 0.75rem; }
  .lb-item { padding: 0.75rem 0.85rem; }
  .page { padding: 1rem; }
  .page.active { animation:pageSlideIn 0.28s ease; }
  .power-value { font-size: 2rem; }
  .topbar { padding: 0.75rem 1rem; }
  .race-cards { grid-template-columns: 1fr; gap: 0.75rem; }
}

/* Smooth scroll */
.disclaimer-scroll { -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
html { scroll-behavior: smooth; }

/* Disable text selection on game elements */
.nav-btn, .exercise-btn, .race-card, .workout-btn { user-select: none; -webkit-user-select: none; }

/* ── TRACKER ── */
.tracker-launch-row { display:grid; grid-template-columns:1fr 1fr; gap:0.55rem; margin-bottom:0.75rem; }
.tracker-launch-btn {
  background:var(--surface); border:1px solid var(--cyan);
  color:var(--cyan); border-radius:10px; padding:0.7rem;
  cursor:pointer; font-family:'Rajdhani',sans-serif; font-size:0.85rem;
  font-weight:600; letter-spacing:0.5px; transition:all 0.3s;
  display:flex; align-items:center; justify-content:center; gap:0.4rem;
}
.tracker-launch-btn:hover { background:rgba(0,229,255,0.1); transform:translateY(-2px); }

.tracker-modal {
  position:fixed; inset:0; background:rgba(0,0,0,0.92);
  z-index:500; display:flex; align-items:center; justify-content:center;
  padding:1rem;
}
.tracker-inner {
  width:100%; max-width:500px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:16px; overflow:hidden;
}
.tracker-header {
  display:flex; justify-content:space-between; align-items:center;
  padding:1rem 1.25rem; border-bottom:1px solid var(--border);
}
.tracker-title { font-family:'Cinzel Decorative',serif; font-size:0.9rem; color:var(--gold); }
.tracker-close { background:transparent; border:none; color:var(--text-dim); font-size:1.2rem; cursor:pointer; padding:0.2rem 0.4rem; transition:color 0.3s; }
.tracker-close:hover { color:var(--red); }

.tracker-cam-wrap { position:relative; width:100%; background:#000; }
.tracker-cam-wrap canvas { width:100%; display:block; max-height:300px; object-fit:cover; }
.tracker-overlay {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  text-align:center; pointer-events:none;
}
.tracker-rep-count {
  font-family:'Cinzel Decorative',serif; font-size:4rem;
  color:var(--gold); text-shadow:0 0 30px rgba(245,200,66,0.8);
  line-height:1;
}
.tracker-rep-label { color:rgba(255,255,255,0.7); font-size:0.85rem; letter-spacing:2px; text-transform:uppercase; }

.tracker-feedback {
  padding:0.75rem 1.25rem; font-size:0.9rem; font-weight:600;
  text-align:center; min-height:2.5rem; transition:color 0.3s;
}
.tracker-actions { display:flex; gap:0.75rem; padding:0 1.25rem 0.75rem; }
.tracker-actions .btn { font-size:0.8rem; padding:0.7rem; }
.tracker-tip { padding:0 1.25rem 1rem; color:var(--text-dim); font-size:0.75rem; text-align:center; line-height:1.5; }

/* ── TRACKER v2 ── */
.tracker-calib-status { font-size:0.75rem; margin-top:0.2rem; transition:color 0.3s; }
.btn-manual {
  background:transparent; border:1px solid #f5a742; color:#f5a742;
  border-radius:8px; padding:0.7rem; cursor:pointer;
  font-family:'Rajdhani',sans-serif; font-size:0.75rem; font-weight:600;
  letter-spacing:0.5px; transition:all 0.3s;
}
.btn-manual:hover { background:rgba(245,167,66,0.15); }

/* ── DISCLAIMER CHECKBOXES ── */
.disclaimer-checks { display:flex; flex-direction:column; gap:0.75rem; margin-bottom:1rem; }
.check-item { display:flex; align-items:flex-start; gap:0.75rem; cursor:pointer; padding:0.6rem 0.75rem; background:rgba(245,200,66,0.05); border:1px solid var(--border); border-radius:8px; transition:border-color 0.3s; }
.check-item:has(input:checked) { border-color:var(--gold); background:rgba(245,200,66,0.1); }
.check-item input[type=checkbox] { width:18px; height:18px; margin-top:2px; flex-shrink:0; accent-color:var(--gold); cursor:pointer; }
.check-item span { font-size:0.82rem; color:var(--text); line-height:1.5; }
.check-item strong { color:var(--gold); }

/* ── SOS BUTTON ── */
.sos-btn { background:rgba(224,48,48,0.15); border:1px solid var(--red); color:var(--red); padding:0.4rem 0.75rem; border-radius:8px; cursor:pointer; font-family:'Rajdhani',sans-serif; font-size:0.75rem; font-weight:700; letter-spacing:0.5px; transition:all 0.3s; white-space:nowrap; }
.sos-btn:hover { background:rgba(224,48,48,0.3); transform:scale(1.05); }

/* ── HOURLY LIMIT WARNING ── */
.hourly-limit-warn { background:rgba(224,48,48,0.1); border:1px solid var(--red); border-radius:8px; padding:0.6rem 0.85rem; font-size:0.8rem; color:var(--red); margin-bottom:0.75rem; line-height:1.5; }

/* ── PRE-WORKOUT POPUP ── */
.preworkout-popup { position:fixed; inset:0; background:rgba(0,0,0,0.85); z-index:600; display:flex; align-items:center; justify-content:center; }
.preworkout-inner { background:var(--surface); border:1px solid var(--red); border-radius:16px; padding:2rem; text-align:center; max-width:300px; animation:fadeUp 0.3s ease; }
.preworkout-text { color:var(--text); font-size:0.9rem; line-height:1.6; margin-bottom:1rem; }
.preworkout-text strong { color:var(--red); }
.preworkout-timer { font-family:'Cinzel Decorative',serif; font-size:3rem; color:var(--gold); animation:pulse 1s ease-in-out infinite; }

/* ── FORM WARNING FLASH ── */
.form-warning-flash { position:fixed; top:0; left:0; right:0; background:rgba(224,48,48,0.92); z-index:700; display:flex; align-items:center; justify-content:center; padding:1rem; animation:flashIn 0.2s ease; }
.form-warning-flash div { font-family:'Cinzel Decorative',serif; font-size:1rem; color:#fff; letter-spacing:1px; }
@keyframes flashIn { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }

/* ── BETA BADGE ── */
.beta-badge {
  background: rgba(245,167,66,0.15); border: 1px solid #f5a742;
  color: #f5a742; font-size: 0.6rem; letter-spacing: 1px;
  padding: 0.2rem 0.5rem; border-radius: 10px; font-family: 'Rajdhani', sans-serif;
  font-weight: 700; text-transform: uppercase; white-space: nowrap;
}

/* ── CALIBRATION BAR ── */
.calib-bar-wrap { padding: 0.5rem 1rem 0; }
.calib-bar-bg { height: 6px; background: var(--bg3); border-radius: 3px; overflow: hidden; margin-bottom: 0.3rem; }
.calib-bar-fill { height: 100%; background: linear-gradient(90deg, #f5a742, #30c060); border-radius: 3px; transition: width 0.3s ease; }
.calib-bar-text { font-size: 0.75rem; text-align: center; transition: color 0.3s; min-height: 1.1rem; }

/* ── REST REMINDER ── */
.rest-reminder {
  background: rgba(0,229,255,0.06); border: 1px solid rgba(0,229,255,0.2);
  color: var(--text-dim); font-size: 0.75rem; padding: 0.4rem 0.75rem;
  border-radius: 8px; margin-bottom: 0.75rem; text-align: center;
}

/* ── PWA INSTALL BANNER ── */
.pwa-banner { position:fixed; bottom:70px; left:0; right:0; z-index:900; padding:0 1rem; animation:fadeUp 0.4s ease; }
.pwa-banner-inner { background:var(--surface); border:1px solid var(--gold); border-radius:14px; padding:0.85rem 1rem; display:flex; align-items:center; gap:0.75rem; box-shadow:0 4px 24px rgba(0,0,0,0.5); }
.pwa-banner-text { flex:1; min-width:0; }
.pwa-banner-title { font-family:'Cinzel Decorative',serif; font-size:0.75rem; color:var(--gold); }
.pwa-banner-sub { font-size:0.65rem; color:var(--text-dim); margin-top:0.15rem; }
.pwa-install-btn { background:var(--gold); color:#000; border:none; padding:0.5rem 0.85rem; border-radius:8px; font-family:'Rajdhani',sans-serif; font-weight:700; font-size:0.8rem; cursor:pointer; white-space:nowrap; flex-shrink:0; }
.pwa-dismiss-btn { background:none; border:none; color:var(--text-dim); font-size:1rem; cursor:pointer; flex-shrink:0; padding:0.25rem; }


/* ══════════════════════════════════════════
   CHAR-CARD v3 — Warrior centered portrait
══════════════════════════════════════════ */

.char-card {
  position: relative;
  overflow: hidden;
  padding: 0 !important;
  background: linear-gradient(160deg, #0e0e2c 0%, #07071a 100%) !important;
  border: 1px solid rgba(245,200,66,0.3) !important;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  margin-bottom: 0.85rem;
}

/* Gold top accent */
.char-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #f5c842 35%, #fff8aa 55%, #f5c842 75%, transparent);
  z-index: 5;
}

/* ── TOP ROW ── */
.cc-top {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1rem 0.5rem;
  position: relative; z-index: 2;
}

.cc-top-info {
  flex: 1;
}

.cc-level-rank {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-top: 0.15rem;
}

.cc-rank-val {
  color: var(--gold);
  font-weight: 700;
  font-family: 'Cinzel Decorative', serif;
}

.cc-power-mini {
  text-align: right;
  padding: 0.35rem 0.7rem;
  background: rgba(245,200,66,0.08);
  border: 1px solid rgba(245,200,66,0.2);
  border-radius: 10px;
}
.cc-power-label {
  font-size: 0.55rem;
  letter-spacing: 2px;
  color: var(--text-dim);
  text-transform: uppercase;
}
.cc-power-num {
  font-family: 'Cinzel Decorative', serif;
  font-size: 1.1rem;
  color: var(--gold);
  line-height: 1;
}

/* ── CENTER — warrior ── */
.cc-center {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  height: 340px;
  overflow: hidden;
  border-radius: 0 0 16px 16px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image 0.3s ease;
}

/* Radial glow under warrior */
.cc-aura {
  display: none;
}
@keyframes ccAuraPulse {
  0%,100% { opacity: 0.65; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;    transform: translateX(-50%) scale(1.12); }
}

/* Side vignette — лёгкое затемнение только по самым краям */
.cc-center::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, #0e0e2c 0%, transparent 8%, transparent 92%, #0e0e2c 100%),
    linear-gradient(to top, rgba(5,5,15,0.55) 0%, transparent 40%);
  z-index: 2;
  pointer-events: none;
}

.cc-warrior-img {
  position: relative; z-index: 1;
  width: 340px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.5));
  animation: ccFloat 5s ease-in-out infinite;
  will-change: transform;
  display: block;
  margin-bottom: 0;
}
@keyframes ccFloat {
  0%,100% { transform: translateY(0px); }
  50%      { transform: translateY(-9px); }
}

/* Rep pulse */
.cc-warrior-img.rep-pulse {
  animation: ccRepPulse 0.35s ease-out;
}
@keyframes ccRepPulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.06) translateY(-4px); }
  100% { transform: scale(1); }
}

/* Level up flash */
.cc-warrior-img.levelup-anim {
  animation: ccLevelup 0.85s ease-out forwards;
}
@keyframes ccLevelup {
  0%   { filter: drop-shadow(0 8px 16px rgba(0,0,0,0.6)); transform: scale(1); }
  25%  { filter: drop-shadow(0 0 60px rgba(245,200,66,1)) brightness(1.8); transform: scale(1.1) translateY(-12px); }
  65%  { filter: drop-shadow(0 4px 28px rgba(245,200,66,0.7)); transform: scale(0.97); }
  100% { filter: drop-shadow(0 8px 16px rgba(0,0,0,0.6)); transform: scale(1); }
}

/* Quote overlay on top of warrior */
.cc-quote-overlay {
  position: absolute;
  bottom: 10px;
  left: 0; right: 0;
  z-index: 3;
  text-align: center;
  font-style: italic;
  font-size: 0.75rem;
  color: rgba(255,245,200,0.75);
  padding: 0 1.5rem;
  text-shadow: 0 1px 8px rgba(0,0,0,0.9);
  opacity: 1;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.cc-quote-overlay.fading { opacity: 0; }

/* ── BOTTOM — XP & Energy bars ── */
.cc-bottom {
  padding: 0.7rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative; z-index: 2;
  border-top: 1px solid rgba(245,200,66,0.1);
}

.cc-bar-label {
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.cc-bar-track {
  height: 6px;
  background: rgba(255,255,255,0.07);
  border-radius: 4px;
  overflow: hidden;
}

.cc-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold));
  border-radius: 4px;
  transition: width 0.6s ease;
}

.cc-energy-fill {
  height: 100%;
  background: linear-gradient(90deg, #1a6aff, #00e5ff);
  border-radius: 4px;
  transition: width 0.6s ease;
}

/* Mobile */
@media (max-width: 480px) {
  .cc-center { height: 290px; }
  .cc-warrior-img { width: 280px; height: auto; }
  .cc-aura { width: 180px; height: 180px; }
}
@media (max-width: 360px) {
  .cc-center { height: 250px; }
  .cc-warrior-img { width: 240px; height: auto; }
}


/* ══════════════════════════════════════════
   COINS BADGE — topbar global
══════════════════════════════════════════ */
.coins-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(245,200,66,0.1);
  border: 1px solid rgba(245,200,66,0.3);
  border-radius: 20px;
  padding: 0.25rem 0.7rem;
  font-family: 'Cinzel Decorative', serif;
  font-size: 0.82rem;
  color: var(--gold);
  transition: all 0.2s;
  cursor: default;
}

/* ══════════════════════════════════════════
   COINS DISPLAY
══════════════════════════════════════════ */
.coins-display {
  font-family: 'Cinzel Decorative', serif;
  font-size: 0.9rem;
  color: var(--gold);
  background: rgba(245,200,66,0.08);
  border: 1px solid rgba(245,200,66,0.25);
  border-radius: 20px;
  padding: 0.25rem 0.75rem;
  display: inline-block;
}
.topbar-coins { display: flex; align-items: center; gap: 0.5rem; }

/* ══════════════════════════════════════════
   SHOP
══════════════════════════════════════════ */
#page-shop .shop-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1rem;
}
.shop-card {
  background: linear-gradient(135deg,rgba(19,19,42,0.97),rgba(10,10,28,0.95));
  border: 1px solid rgba(245,200,66,0.12);
  border-radius: 14px;
  padding: 1rem;
  margin-bottom: 0.75rem;
  transition: all 0.2s;
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
.shop-card:hover { transform: translateY(-3px); border-color:rgba(245,200,66,0.25); box-shadow:0 8px 24px rgba(0,0,0,0.4); }
.shop-card-top {
  display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem;
}
.shop-emoji { font-size: 1.8rem; flex-shrink: 0; }
.shop-info { flex: 1; }
.shop-name { font-weight: 700; font-size: 0.95rem; }
.shop-rarity { font-size: 0.7rem; letter-spacing: 1px; text-transform: uppercase; margin-top: 0.1rem; }
.shop-cost { font-family: 'Cinzel Decorative', serif; font-size: 0.9rem; color: var(--gold); white-space: nowrap; }
.shop-desc { color: var(--text-dim); font-size: 0.8rem; line-height: 1.5; margin-bottom: 0.5rem; }
.shop-meta { font-size: 0.72rem; color: var(--text-dim); margin-bottom: 0.6rem; }
.shop-buy-btn {
  width: 100%; padding: 0.55rem; border: none; border-radius: 8px;
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: #000; font-family: 'Rajdhani', sans-serif; font-weight: 700;
  font-size: 0.85rem; cursor: pointer; letter-spacing: 0.5px;
  transition: all 0.3s;
}
.shop-buy-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(245,200,66,0.35); }
.shop-buy-btn.disabled {
  background: var(--surface2); color: var(--text-dim);
  border: 1px solid var(--border); cursor: not-allowed; transform: none;
}

/* ══════════════════════════════════════════
   COMBAT
══════════════════════════════════════════ */
#page-combat { padding: 0 !important; }
.combat-arena {
  display: flex; flex-direction: column;
  min-height: calc(100vh - 70px);
  background: linear-gradient(160deg, #05050f 0%, #0a0a20 60%, #0d060d 100%);
}

/* Exhaustion warning */
.combat-exhaustion-warning {
  display: none;
  background: rgba(224,48,48,0.12); border: 1px solid var(--red);
  color: var(--red); font-size: 0.85rem; margin: 0.75rem 1rem;
  padding: 0.65rem 0.9rem; border-radius: 10px;
  align-items: center; gap: 0.5rem;
}

/* Fighters row */
.combat-fighters {
  display: flex; gap: 0; justify-content: space-between;
  padding: 1rem 0.5rem 0; position: relative; flex: 1;
}
.combat-fighter {
  display: flex; flex-direction: column; align-items: center;
  width: 47%; gap: 0.4rem;
}
.combat-fighter-name {
  font-family: 'Cinzel Decorative', serif; font-size: 0.7rem;
  color: var(--gold); letter-spacing: 1px; text-align: center;
}
.combat-sprite {
  font-size: 4rem; line-height: 1;
  filter: drop-shadow(0 0 16px rgba(245,200,66,0.4));
  transition: transform 0.1s;
  display: block; text-align: center; min-height: 70px;
}
.combat-sprite.hit-anim {
  animation: combatHit 0.35s ease-out;
}
@keyframes combatHit {
  0%   { transform: scale(1); filter: brightness(1); }
  30%  { transform: scale(0.9) translateX(6px); filter: brightness(1.8) saturate(0); }
  100% { transform: scale(1); filter: brightness(1); }
}
.combat-fighter.enemy .combat-sprite { transform: scaleX(-1); }
.combat-fighter.enemy .combat-sprite.hit-anim {
  animation: combatHitEnemy 0.35s ease-out;
}
@keyframes combatHitEnemy {
  0%   { transform: scaleX(-1) scale(1); filter: brightness(1); }
  30%  { transform: scaleX(-1) scale(0.9) translateX(6px); filter: brightness(2) saturate(0) hue-rotate(30deg); }
  100% { transform: scaleX(-1) scale(1); filter: brightness(1); }
}

.combat-bars { width: 100%; }
.combat-bar-row { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.3rem; }
.combat-bar-label { font-size: 0.62rem; color: var(--text-dim); width: 18px; flex-shrink: 0; }
.combat-bar-track { flex: 1; height: 8px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; }
.combat-bar-fill { height: 100%; border-radius: 4px; transition: width 0.4s ease; }
.combat-bar-text { font-size: 0.6rem; color: var(--text-dim); width: 36px; text-align: right; flex-shrink: 0; }

.combat-vs {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Cinzel Decorative', serif; font-size: 1.4rem;
  color: rgba(245,200,66,0.3); pointer-events: none; z-index: 1;
}

/* Combat log */
.combat-log {
  max-height: 80px; overflow-y: auto;
  padding: 0.5rem 1rem;
  background:rgba(3,3,15,0.8);
  border-top: 1px solid rgba(245,200,66,0.08);
  border-bottom: 1px solid rgba(245,200,66,0.08);
  scrollbar-width:none;
}
.combat-log::-webkit-scrollbar { display:none; }
.combat-log-entry {
  font-size: 0.72rem; color: rgba(200,190,240,0.65); padding: 0.08rem 0;
  font-style:italic; letter-spacing:0.2px; line-height:1.5;
  animation: logFadeIn 0.3s ease;
}
@keyframes logFadeIn { from{opacity:0;transform:translateX(-4px)} to{opacity:1;transform:none} }

/* Card hand */
.combat-hand-wrap {
  padding: 0.75rem 0.75rem 0.5rem;
  background: rgba(0,0,0,0.4);
}
.combat-hand-label {
  font-size: 0.65rem; letter-spacing: 2px; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 0.5rem;
  display: flex; justify-content: space-between; align-items: center;
}
.combat-hand {
  display: flex; gap: 0.5rem; overflow-x: auto;
  padding-bottom: 0.25rem; scrollbar-width: none;
}
.combat-hand::-webkit-scrollbar { display: none; }
.combat-card {
  flex-shrink: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 0.6rem 0.5rem;
  cursor: pointer; transition: all 0.25s;
  text-align: center; min-width: 72px;
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
}
.combat-card:hover:not(.disabled) {
  transform: translateY(-5px);
  border-color: rgba(245,200,66,0.4);
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}
.combat-card:active:not(.disabled) { transform: scale(0.95); }
.combat-card.disabled { opacity: 0.4; cursor: not-allowed; }
.cc-emoji { font-size: 1.5rem; }
.cc-name { font-size: 0.62rem; font-weight: 700; color: var(--text); }
.cc-cost { font-size: 0.65rem; font-weight: 700; }

/* Combat result overlay */
.combat-result-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.85); z-index: 400;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem;
}
.combat-result-title {
  font-family: 'Cinzel Decorative', serif; font-size: 2rem; color: var(--gold);
  
  animation: pulse 1.5s ease-in-out infinite;
}
.combat-result-sub { color: var(--text-dim); font-size: 1rem; }
.combat-result-btn {
  background: linear-gradient(135deg, var(--gold-dark), var(--gold));
  color: #000; border: none; border-radius: 10px;
  padding: 0.75rem 2rem; font-family: 'Cinzel Decorative', serif;
  font-size: 0.85rem; cursor: pointer; letter-spacing: 1px;
}

/* Deck editor modal */
.deck-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.88);
  z-index: 500; display: none; align-items: flex-end; justify-content: center;
  padding: 1rem;
}
.deck-modal-inner {
  width: 100%; max-width: 480px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px 16px 0 0; padding: 1.25rem;
  max-height: 80vh; overflow-y: auto;
}
.deck-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1rem;
}
.deck-skill-row {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 10px; padding: 0.65rem 0.85rem; margin-bottom: 0.5rem;
  font-size: 0.85rem;
}
.deck-skill-row.in-deck { background: rgba(245,200,66,0.06); }
.deck-toggle-btn {
  padding: 0.3rem 0.65rem; border-radius: 6px; font-size: 0.75rem;
  font-family: 'Rajdhani', sans-serif; font-weight: 700; cursor: pointer;
  border: none; transition: all 0.2s;
}
.deck-toggle-btn.add { background: rgba(245,200,66,0.15); color: var(--gold); }
.deck-toggle-btn.remove { background: rgba(224,48,48,0.15); color: var(--red); }

/* ══════════════════════════════════════════
   TOURNAMENTS
══════════════════════════════════════════ */
.tournament-card {
  background: linear-gradient(135deg,rgba(19,19,42,0.95),rgba(10,10,28,0.9));
  border: 1px solid rgba(245,200,66,0.12);
  border-radius: 16px; padding: 1.1rem; margin-bottom: 0.85rem;
  transition: all 0.25s; position:relative; overflow:hidden;
  box-shadow:0 4px 16px rgba(0,0,0,0.3);
}
.tournament-card:hover { border-color: rgba(245,200,66,0.3); transform:translateY(-2px); box-shadow:0 8px 28px rgba(0,0,0,0.4); }
.tournament-header {
  display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem;
}
.tournament-label {
  font-family: 'Cinzel Decorative', serif; font-size: 0.8rem; color: var(--gold);
}
.tournament-name { font-size: 0.75rem; color: var(--text-dim); letter-spacing: 1px; }
.tournament-desc { font-size: 0.8rem; color: var(--text); line-height: 1.5; margin-bottom: 0.5rem; }
.tournament-reward { font-size: 0.8rem; color: var(--text-dim); margin-bottom: 0.65rem; }
.tournament-blocked {
  background: rgba(245,200,66,0.06); border: 1px solid rgba(245,200,66,0.2);
  border-radius: 8px; padding: 0.4rem 0.7rem; font-size: 0.78rem;
  color: var(--gold); margin-bottom: 0.65rem;
}
.tournament-btn { padding: 0.6rem 1rem !important; font-size: 0.8rem !important; margin-top: 0 !important; }
.tournament-btn.disabled {
  background: var(--surface2) !important; color: var(--text-dim) !important;
  border: 1px solid var(--border) !important; cursor: not-allowed !important;
}

/* Rank badge */
.rank-badge {
  display: inline-block; padding: 0.2rem 0.6rem;
  border-radius: 20px; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
}
.rank-Bronze { background: rgba(205,127,50,0.15); color: #e09040; border: 1px solid rgba(205,127,50,0.5); box-shadow:0 0 8px rgba(205,127,50,0.15); }
.rank-Silver { background: rgba(192,192,192,0.1); color: #d4d4d4; border: 1px solid rgba(192,192,192,0.4); box-shadow:0 0 8px rgba(192,192,192,0.1); }
.rank-Gold   { background: rgba(245,200,66,0.12); color: var(--gold); border: 1px solid rgba(245,200,66,0.5); box-shadow:0 0 10px rgba(245,200,66,0.2); }
.rank-Dragon { background: rgba(224,48,48,0.12); color: #ff5555; border: 1px solid rgba(224,48,48,0.45); }

/* ══════════════════════════════════════════
   COMBAT CARD — image variant (roundhouse-kick)
══════════════════════════════════════════ */
.combat-card.has-image {
  padding: 0;
  overflow: hidden;
  min-width: 90px;
  min-height: 120px;
  position: relative;
  border-width: 2px;
}
.combat-card.has-image .card-img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-radius: 10px 10px 0 0;
  transition: transform 0.3s ease;
}
.combat-card.has-image:hover:not(.disabled) .card-img {
  transform: scale(1.06);
}
.combat-card.has-image .card-footer {
  padding: 0.3rem 0.4rem 0.35rem;
  background: rgba(0,0,0,0.85);
  border-radius: 0 0 10px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
}
.combat-card.has-image .cc-name {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}
.combat-card.has-image .cc-cost {
  font-size: 0.62rem;
  font-weight: 700;
}

/* Shine effect on hover */
.combat-card.has-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    transparent 40%,
    rgba(255,255,255,0.08) 50%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.3s;
  border-radius: 12px;
  pointer-events: none;
}
.combat-card.has-image:hover:not(.disabled)::after {
  opacity: 1;
}

/* Пульс при активном скилле */
.combat-card.has-image:not(.disabled) {
  animation: cardIdle 3s ease-in-out infinite;
}
@keyframes cardIdle {
  0%,100% { box-shadow: 0 0 10px rgba(224,48,48,0.4); }
  50%      { box-shadow: 0 0 22px rgba(224,48,48,0.75), 0 0 40px rgba(245,200,66,0.2); }
}
.combat-card.has-image.disabled {
  animation: none;
  filter: grayscale(0.6) brightness(0.6);
}

/* ── Feedback type buttons ── */
.fb-type-btn {
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  transition: all 0.2s;
}
.fb-type-btn.fb-active {
  border-color: var(--gold);
  background: rgba(245,200,66,0.12);
  color: var(--gold);
}

/* ══════════════════════════════════════════
   MISC PAGE — Tabs
   ══════════════════════════════════════ */
/* ══ MISC TABS — горизонтальный scrollable tab bar ══ */
.misc-tabs {
  display:flex; flex-direction:row; overflow-x:auto; overflow-y:hidden;
  gap:0; padding:0; flex-shrink:0;
  background:rgba(6,6,18,0.99);
  border-bottom:2px solid rgba(255,255,255,0.06);
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory;
}
.misc-tabs::-webkit-scrollbar { display:none; }
.misc-tab-btn {
  flex:1; min-width:58px; max-width:none;
  padding:.72rem .3rem .58rem;
  background:transparent;
  border:none;
  border-bottom:2.5px solid transparent;
  margin-bottom:-2px;
  color:var(--text-dim);
  font-family:'Rajdhani',sans-serif;
  font-size:.68rem; font-weight:700; letter-spacing:.4px; text-transform:uppercase;
  cursor:pointer; transition:color .18s, border-color .18s; position:relative;
  white-space:nowrap; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  line-height:1.1; -webkit-tap-highlight-color:transparent;
  scroll-snap-align:start;
}
.misc-tab-btn .tab-icon {
  font-size:1.3rem; line-height:1;
  transition:transform .25s cubic-bezier(0.34,1.56,0.64,1), filter .2s;
}
.misc-tab-btn:active { opacity:.7; }
.misc-tab-btn.active {
  color:var(--gold);
  border-bottom-color:var(--gold);
}
.misc-tab-btn.active .tab-icon {
  transform:scale(1.18) translateY(-1px);
  filter:drop-shadow(0 0 6px rgba(245,200,66,.75));
  animation:miscTabPop .3s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes miscTabPop {
  0%{transform:scale(1)}
  55%{transform:scale(1.32) translateY(-2px)}
  100%{transform:scale(1.18) translateY(-1px)}
}
.misc-tab-content { display:none; flex:1; min-height:0; }
.misc-tab-content.active { display:flex; flex-direction:column; animation:fadeUp .22s ease; }
#misc-tab-friends.active    { display:block; overflow-y:auto; padding:.9rem; }
#misc-tab-chat.active       { display:flex; flex-direction:column; position:relative; overflow:hidden; }
#misc-tab-trade.active      { display:block; overflow-y:auto; padding:.9rem; }
#misc-tab-guilds.active     { display:block; overflow-y:auto; padding:.85rem; }
#misc-tab-gangbattles.active{ display:block; overflow-y:auto; padding:0; }
#misc-tab-settings.active   { display:block; overflow-y:auto; padding:0; }
.misc-badge {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:15px; height:15px;
  background:var(--red); color:#fff;
  font-size:.53rem; font-weight:800;
  border-radius:8px; padding:0 .28rem; margin-left:.18rem;
  vertical-align:middle;
  box-shadow:0 0 7px rgba(224,48,48,.65);
  animation:badgePop .35s cubic-bezier(0.34,1.56,0.64,1);
}
.nav-badge { position:absolute; top:.2rem; right:.1rem; background:linear-gradient(135deg,#ff2020,#e03030); color:#fff; font-size:.58rem; font-weight:800; border-radius:10px; padding:.15rem .35rem; min-width:16px; text-align:center; box-shadow:0 0 8px rgba(224,48,48,0.8); animation:badgePulse 1.5s ease-in-out infinite; }
@keyframes badgePulse { 0%,100%{box-shadow:0 0 8px rgba(224,48,48,.8)} 50%{box-shadow:0 0 16px rgba(224,48,48,1)} }

/* ── Friends ── */
.friends-search-wrap { display:flex; gap:.5rem; margin-bottom:1rem; }
.friends-input { flex:1; padding:.65rem 1rem; background:rgba(15,15,35,0.9); border:1.5px solid rgba(255,255,255,0.08); border-radius:11px; color:var(--text); font-family:'Rajdhani',sans-serif; font-size:.95rem; outline:none; transition:border-color .2s; }
.friends-input:focus { border-color:rgba(245,200,66,0.45); }
.friends-input::placeholder { color:rgba(140,130,180,0.45); }
.friends-btn-gold { padding:.65rem 1.1rem; background:linear-gradient(135deg,var(--gold-dark),var(--gold)); color:#000; border:none; border-radius:11px; font-family:'Cinzel Decorative',serif; font-size:.7rem; font-weight:700; cursor:pointer; white-space:nowrap; transition:all .2s; letter-spacing:.5px; }
.friends-btn-gold:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(245,200,66,0.3); }
.friends-section-title { font-size:.62rem; letter-spacing:2.5px; text-transform:uppercase; color:rgba(180,170,220,0.55); margin:.85rem 0 .5rem; font-weight:600; display:flex; align-items:center; gap:.45rem; }
.friends-section-title::before { content:''; display:block; width:2px; height:10px; background:var(--gold); border-radius:2px; opacity:0.5; flex-shrink:0; }
.friends-loading { color:var(--text-dim); font-size:.9rem; text-align:center; padding:1.5rem; }
.friends-empty { color:var(--text-dim); font-size:.85rem; text-align:center; padding:1.5rem; line-height:1.6; }
.friends-list { display:flex; flex-direction:column; gap:.4rem; }
.friends-requests-list { display:flex; flex-direction:column; gap:.4rem; margin-bottom:.5rem; }

.friend-card { display:flex; align-items:center; gap:.75rem; padding:.75rem; background:linear-gradient(135deg,rgba(19,19,42,0.95),rgba(12,12,28,0.9)); border:1px solid rgba(255,255,255,0.06); border-radius:14px; cursor:pointer; transition:all .22s; box-shadow:0 2px 8px rgba(0,0,0,0.2); }
.friend-card:hover { border-color:rgba(245,200,66,.45); box-shadow:0 4px 18px rgba(0,0,0,0.3), 0 0 14px rgba(245,200,66,0.1); transform:translateY(-1px); }
.friend-avatar { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--gold-dark),var(--gold)); color:#000; font-weight:700; font-size:1.1rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.friend-info { flex:1; min-width:0; }
.friend-name { font-size:.95rem; font-weight:600; color:var(--text); }
.friend-sub { font-size:.75rem; color:var(--text-dim); margin-top:.1rem; }
.friend-right { display:flex; align-items:center; gap:.5rem; flex-shrink:0; }
.friend-chat-arrow { color:var(--text-dim); font-size:.9rem; }

/* ── Pending / outgoing request styles ── */
.fr-count-badge { display:inline-flex; align-items:center; justify-content:center; background:var(--gold); color:#000; font-size:.65rem; font-weight:800; border-radius:10px; padding:.1rem .45rem; min-width:18px; margin-left:.4rem; vertical-align:middle; }
.fr-outgoing { opacity:.85; }
.fr-avatar-pending { background:linear-gradient(135deg,#1e1e38,#2a2840) !important; color:#8080b0 !important; border:1px solid rgba(160,140,220,0.2); }
.fr-pending-label { display:flex; align-items:center; gap:.35rem; color:rgba(255,200,60,.8) !important; font-size:.72rem; letter-spacing:0.3px; }
.fr-pending-dot { width:6px; height:6px; border-radius:50%; background:rgba(255,200,60,0.85); display:inline-block; flex-shrink:0; animation:pendingPulse 1.6s ease-in-out infinite; }
.fr-cancel { background:rgba(100,100,100,.2) !important; color:var(--text-dim) !important; border-color:rgba(150,150,150,.3) !important; }
.fr-cancel:hover { background:rgba(200,60,60,.2) !important; color:#e05050 !important; }
@keyframes pendingPulse { 0%,100% { opacity:.5; transform:scale(1); } 50% { opacity:1; transform:scale(1.25); } }
.unread-badge { background:#e03030; color:#fff; font-size:.65rem; font-weight:700; border-radius:10px; padding:.15rem .4rem; min-width:18px; text-align:center; }

.friend-request-card { display:flex; align-items:center; gap:.75rem; padding:.75rem; background:rgba(245,200,66,.05); border:1px solid rgba(245,200,66,.2); border-radius:12px; }
.fr-avatar { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#1a1a35,#252545); color:var(--gold); font-weight:700; font-size:1rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; border:1px solid rgba(245,200,66,0.15); }
.fr-info { flex:1; min-width:0; }
.fr-name { font-size:.9rem; font-weight:700; color:var(--text); }
.fr-sub { font-size:.72rem; color:var(--text-dim); }
.fr-actions { display:flex; gap:.4rem; }
.fr-btn { width:32px; height:32px; border:none; border-radius:50%; cursor:pointer; font-size:.9rem; display:flex; align-items:center; justify-content:center; transition:all .2s; }
.fr-accept { background:rgba(48,192,96,.2); color:#30c060; }
.fr-accept:hover { background:#30c060; color:#fff; }
.fr-decline { background:rgba(224,48,48,.2); color:#e03030; }
.fr-decline:hover { background:#e03030; color:#fff; }

/* ══════════════════════════════════════════
   CHAT — Telegram style
   ══════════════════════════════════════ */
.chatlist-header { padding:.9rem 1rem .6rem; font-size:1.05rem; font-weight:700; letter-spacing:.5px; border-bottom:1px solid var(--border); flex-shrink:0; }
.chatlist { overflow-y:auto; flex:1; }
.chatlist-item { display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem; cursor:pointer; transition:background .15s; border-bottom:1px solid rgba(255,255,255,.04); }
.chatlist-item:hover { background:var(--surface2); }
.chatlist-avatar { width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,#1e4480,#2563b0); color:#a8cbff; font-weight:700; font-size:1.15rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; position:relative; }
.chatlist-online-dot { position:absolute; bottom:1px; right:1px; width:10px; height:10px; border-radius:50%; background:rgba(100,130,160,.4); border:2px solid var(--bg); transition:background .3s; }
.chatlist-online-dot.is-online { background:#4cd96a; box-shadow:0 0 6px rgba(76,217,106,.6); }
.chatlist-info { flex:1; min-width:0; }
.chatlist-name-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:.2rem; }
.chatlist-name { font-size:.95rem; font-weight:600; color:var(--text); }
.chatlist-time { font-size:.7rem; color:var(--text-dim); }
.chatlist-preview-row { display:flex; justify-content:space-between; align-items:center; }
.chatlist-preview { font-size:.8rem; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
.chatlist-unread { background:var(--gold); color:#000; font-size:.65rem; font-weight:700; border-radius:10px; padding:.1rem .4rem; min-width:18px; text-align:center; margin-left:.4rem; flex-shrink:0; }

/* Open chat */
.chat-header { display:flex; align-items:center; gap:.6rem; padding:.7rem 1rem; background:#0d1b2e; border-bottom:1px solid rgba(50,100,180,.25); flex-shrink:0; z-index:10; }
.chat-back-btn { background:none; border:none; color:#5ba3f5; font-size:1.6rem; cursor:pointer; padding:0 .2rem; line-height:1; margin-right:.1rem; }
.chat-header-avatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,#1e4480,#2563b0); color:#a8cbff; font-weight:700; font-size:.95rem; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.chat-header-info { flex:1; }
.chat-header-name { font-size:.95rem; font-weight:700; color:#d0e8ff; }
.chat-header-sub { font-size:.7rem; color:rgba(150,190,255,.6); transition:color .3s; }
.chat-header-sub.online { color:#4cd96a; }
.chat-more-btn { background:none; border:none; color:rgba(150,190,255,.6); font-size:1.4rem; cursor:pointer; padding:.2rem .4rem; }

/* ── Chat messages area — Telegram-style blue ── */
/* ── Chat — animated bg ── */
.chat-messages { flex:1; min-height:0; overflow-y:auto; padding:.75rem .75rem 0; display:flex; flex-direction:column; gap:.15rem; background:#0d1b2e; position:relative; }
.chat-messages::before {
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(30,80,180,.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(20,60,140,.08) 0%, transparent 50%);
}
/* canvas и сообщения — z-index слои */
.chat-msg-row, .chat-date-sep, .chat-empty-state, .chat-typing-row { position:relative; z-index:2; }
/* floating anime shapes canvas injected by JS */
#chat-bg-canvas {
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  pointer-events:none; z-index:0; opacity:.28;
  /* overflow:hidden на родителе не обрезает abs детей когда родитель scrollable */
}
.chat-date-sep { text-align:center; margin:.5rem 0; }
.chat-date-sep span { background:rgba(100,160,255,.15); color:rgba(150,190,255,.7); font-size:.7rem; padding:.2rem .7rem; border-radius:10px; letter-spacing:.5px; }
.chat-empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1; padding:2rem; text-align:center; }

.chat-msg-row { display:flex; align-items:flex-end; gap:.4rem; }
.chat-msg-row.mine { flex-direction:row-reverse; }
.msg-avatar { width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,#1e4480,#2563b0); color:#a8cbff; font-size:.7rem; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-bottom:.1rem; }
.msg-avatar-spacer { width:26px; flex-shrink:0; }
.msg-bubble { max-width:72%; padding:.5rem .75rem .3rem; border-radius:16px; position:relative; word-break:break-word; }
.bubble-mine { background:linear-gradient(135deg,#1a4b8c,#1e5fa8); color:#daeeff; border-bottom-right-radius:4px; box-shadow:0 1px 4px rgba(0,80,200,.3); }
.bubble-theirs { background:#1a2b3d; color:#d0e8ff; border-bottom-left-radius:4px; box-shadow:0 1px 4px rgba(0,0,0,.3); }
.bubble-tail-right { border-bottom-right-radius:4px; }
.bubble-tail-left  { border-bottom-left-radius:4px; }
.msg-text { font-size:.9rem; line-height:1.45; }
.msg-meta { display:flex; align-items:center; justify-content:flex-end; gap:.3rem; margin-top:.2rem; }
.msg-time { font-size:.65rem; color:rgba(160,210,255,.45); }
.msg-status { font-size:.72rem; }
.msg-status.sent { color:rgba(160,210,255,.45); }
.msg-status.read { color:#4db8ff; font-weight:700; text-shadow:0 0 6px rgba(77,184,255,.5); }

.chat-input-wrap { display:flex; align-items:center; gap:.5rem; padding:.6rem .75rem; padding-bottom:calc(.6rem + env(safe-area-inset-bottom)); background:#0d1b2e; border-top:1px solid rgba(50,100,180,.25); flex-shrink:0; }
.chat-input { flex:1; padding:.6rem .9rem; background:#1a2b3d; border:1px solid rgba(50,120,200,.3); border-radius:22px; color:#d0e8ff; font-family:'Rajdhani',sans-serif; font-size:.95rem; outline:none; transition:border-color .2s; resize:none; }
.chat-input::placeholder { color:rgba(150,190,255,.4); }
.chat-input:focus { border-color:rgba(80,150,255,.6); }
.chat-send-btn { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#1a5cb8,#2979e8); border:none; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:opacity .2s; box-shadow:0 2px 8px rgba(30,100,240,.4); }
.chat-send-btn:hover { opacity:.85; }

/* ── Typing indicator ── */
.chat-typing-row { display:flex; align-items:flex-end; gap:.4rem; margin:.25rem 0; }
.typing-bubble { background:#1a2b3d; border-radius:16px; border-bottom-left-radius:4px; padding:.55rem .75rem; display:flex; align-items:center; gap:4px; }
.typing-dot { width:7px; height:7px; border-radius:50%; background:rgba(130,190,255,.6); display:inline-block; animation:typingBounce 1.3s ease-in-out infinite; }
.typing-dot:nth-child(2) { animation-delay:.2s; }
.typing-dot:nth-child(3) { animation-delay:.4s; }
@keyframes typingBounce { 0%,60%,100% { transform:translateY(0); opacity:.5; } 30% { transform:translateY(-6px); opacity:1; } }

/* ── Read receipts ── */


/* ═══════════════════════════════════════
   TRAIN PAGE REDESIGN
   ═══════════════════════════════════════ */

.train-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0 0.75rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid rgba(245,200,66,0.12);
}
.train-header-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: 'Cinzel Decorative', serif;
  font-size: 0.8rem;
  color: var(--gold);
  letter-spacing: 3px;
}
.train-header-icon { font-size: 1.1rem; }
.sos-btn-mini {
  background: rgba(224,48,48,0.12);
  border: 1px solid rgba(224,48,48,0.4);
  color: var(--red);
  padding: 0.3rem 0.75rem;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  transition: all 0.2s;
}
.sos-btn-mini:hover { background: rgba(224,48,48,0.22); }

.train-section-label {
  font-size: 0.62rem;
  letter-spacing: 2.5px;
  color: rgba(180,170,220,0.55);
  text-transform: uppercase;
  margin-bottom: 0.55rem;
  padding-left: 2px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}
.train-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,rgba(245,200,66,0.2),transparent);
}

/* ── Трекер-кнопки ── */
.tracker-launch-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  background: linear-gradient(135deg,rgba(19,19,42,0.95),rgba(10,10,28,0.9));
  border: 1px solid var(--border);
  color: var(--text);
  transition: all 0.22s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.tracker-launch-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.22s;
  border-radius: inherit;
}
.tracker-launch-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
.tracker-launch-btn:hover::before { opacity: 1; }

.tracker-btn-strength { border-color: rgba(224,48,48,0.3); }
.tracker-btn-strength::before { background: rgba(224,48,48,0.07); }
.tracker-btn-strength:hover { border-color: #e03030; }
.tracker-btn-strength .tracker-btn-icon { color: #e03030; }

.tracker-btn-speed { border-color: rgba(58,143,232,0.3); }
.tracker-btn-speed::before { background: rgba(58,143,232,0.07); }
.tracker-btn-speed:hover { border-color: #3a8fe8; }
.tracker-btn-speed .tracker-btn-icon { color: #3a8fe8; }

.tracker-btn-icon {
  width: 32px; height: 32px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.tracker-btn-icon svg { width: 100%; height: 100%; }
.tracker-btn-text { display: flex; flex-direction: column; gap: 1px; }
.tracker-btn-name { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.5px; }
.tracker-btn-sub { font-size: 0.65rem; color: var(--text-dim); }

/* ── Планка ── */
.plank-launch-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}
.plank-launch-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, rgba(48,192,96,0.12), rgba(48,192,96,0.05));
  border: 1px solid rgba(48,192,96,0.4);
  border-radius: 12px;
  cursor: pointer;
  color: #30c060;
  transition: all 0.22s;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 1.5px;
}
.plank-launch-btn:hover {
  background: linear-gradient(135deg, rgba(48,192,96,0.2), rgba(48,192,96,0.1));
  border-color: #30c060;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(48,192,96,0.15);
}
.plank-btn-left {
  display: flex; align-items: center; gap: 0.5rem;
}
.plank-btn-badge {
  font-size: 0.65rem;
  background: rgba(48,192,96,0.15);
  border: 1px solid rgba(48,192,96,0.3);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  letter-spacing: 0.5px;
}
.plank-timer-btn {
  width: 100%;
  padding: 0.5rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-dim);
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.plank-timer-btn:hover { border-color: rgba(48,192,96,0.3); color: #30c060; }

/* Плашка камеры на карточке планки */
.exercise-btn-timer { grid-column: span 1; }
.ex-camera-badge {
  position: absolute;
  top: 6px; right: 6px;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  background: rgba(48,192,96,0.15);
  border: 1px solid rgba(48,192,96,0.4);
  color: #30c060;
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
}

/* ── More Menu ─────────────────────────────────────── */
#more-menu-backdrop {
  display:none; position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,0.7);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
#more-menu-sheet {
  position:fixed; bottom:-400px; left:0; right:0; z-index:201;
  background:rgba(9,9,24,0.99);
  border-radius:28px 28px 0 0;
  border-top:1px solid rgba(245,200,66,0.3);
  padding:0.5rem 1rem calc(1.5rem + env(safe-area-inset-bottom,0));
  transition:bottom 0.38s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow:0 -16px 60px rgba(0,0,0,0.9);
}
#more-menu-sheet.open { bottom:0; }
#more-menu-backdrop.open { display:block; }

.more-handle {
  width:44px; height:4px; border-radius:3px;
  background:rgba(245,200,66,0.3); margin:0.2rem auto 0.9rem;
}
.more-sheet-title {
  font-family:'Cinzel Decorative',serif; font-size:.55rem;
  letter-spacing:4px; color:rgba(245,200,66,0.35);
  text-transform:uppercase; text-align:center; margin-bottom:0.9rem;
}

/* ── PvP главная кнопка ── */
.more-pvp-btn {
  width:100%; display:flex; align-items:center; gap:0.9rem;
  padding:0.9rem 1rem; border-radius:18px; cursor:pointer;
  background:linear-gradient(135deg, rgba(160,10,10,0.35) 0%, rgba(224,48,48,0.15) 50%, rgba(100,0,0,0.2) 100%);
  border:1px solid rgba(224,48,48,0.4);
  color:var(--text); text-align:left;
  position:relative; overflow:hidden;
  transition:transform 0.2s, box-shadow 0.2s;
  -webkit-tap-highlight-color:transparent;
  margin-bottom:0.8rem;
  box-shadow:0 4px 20px rgba(224,48,48,0.2);
}
.more-pvp-btn:active { transform:scale(0.97); }
.more-pvp-glow {
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 20% 50%, rgba(224,48,48,0.25), transparent 60%);
  animation:pvpGlowPulse 2.5s ease-in-out infinite;
}
@keyframes pvpGlowPulse {
  0%,100%{opacity:0.7} 50%{opacity:1}
}
.more-pvp-icon { font-size:2rem; flex-shrink:0; position:relative; z-index:1; }
.more-pvp-text { flex:1; min-width:0; position:relative; z-index:1; }
.more-pvp-title {
  display:block; font-family:'Cinzel Decorative',serif;
  font-size:0.82rem; color:#fff; letter-spacing:1px; margin-bottom:0.2rem;
}
.more-pvp-sub { font-size:0.65rem; color:rgba(255,180,180,0.7); font-family:'Rajdhani',sans-serif; }
.more-pvp-badge { position:relative; top:auto; right:auto; }
.more-pvp-arrow {
  font-size:1.4rem; color:rgba(224,48,48,0.6);
  position:relative; z-index:1;
  animation:arrowPulse 1.5s ease-in-out infinite;
}
@keyframes arrowPulse { 0%,100%{transform:translateX(0)} 50%{transform:translateX(3px)} }

.more-divider {
  height:1px; background:rgba(255,255,255,0.06);
  margin:0 0 0.8rem;
}

/* ── Сетка мелких кнопок ── */
.more-grid {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:0.6rem;
}
.more-item {
  display:flex; flex-direction:column; align-items:center; gap:0.45rem;
  padding:1rem 0.4rem 0.85rem; border-radius:18px; cursor:pointer;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.09);
  color:var(--text);
  font-family:'Rajdhani',sans-serif; font-size:0.78rem;
  font-weight:700; letter-spacing:0.5px;
  transition:all 0.2s; position:relative; overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  min-height:80px;
}
.more-item::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 0%, rgba(245,200,66,0.1), transparent 65%);
  opacity:0; transition:opacity 0.25s;
}
.more-item:active { transform:scale(0.91); }
.more-item:active::after { opacity:1; }
.more-item.active {
  background:rgba(245,200,66,0.08); border-color:rgba(245,200,66,0.35);
  color:var(--gold);
  box-shadow:0 0 24px rgba(245,200,66,0.12);
}
.more-item.active::after { opacity:1; }
.more-icon {
  font-size:2rem; line-height:1;
  transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
.more-item:active .more-icon { transform:scale(1.2); }
.more-item.active .more-icon {
  transform:scale(1.1);
  filter:drop-shadow(0 0 6px rgba(245,200,66,0.6));
}

.lb-avatar-img {
  width:54px; height:70px; flex-shrink:0; border-radius:10px;
  overflow:hidden; border:2px solid; background:var(--surface2);
  position:relative;
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.lb-avatar-img img {
  width:100%; height:100%; object-fit:cover;
  object-position: top center; border-radius:8px;
}
.lb-item:nth-child(1) .lb-avatar-img { width:60px; height:76px; border-radius:12px; }
.lb-item:nth-child(2) .lb-avatar-img { width:57px; height:72px; }
.lb-item:nth-child(3) .lb-avatar-img { width:57px; height:72px; }

/* ── ТОП-3 АНИМАЦИИ ─────────────────────────────── */
@keyframes lb-gold-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,215,0,0), 0 4px 20px rgba(255,215,0,0.3); border-color:#ffd700; }
  50%      { box-shadow: 0 0 0 4px rgba(255,215,0,0.15), 0 4px 28px rgba(255,215,0,0.5); border-color:#ffe84d; }
}
@keyframes lb-silver-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(192,192,192,0), 0 2px 14px rgba(192,192,192,0.2); }
  50%      { box-shadow: 0 0 0 3px rgba(192,192,192,0.12), 0 2px 20px rgba(192,192,192,0.35); }
}
@keyframes lb-bronze-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(205,127,50,0), 0 2px 12px rgba(205,127,50,0.2); }
  50%      { box-shadow: 0 0 0 3px rgba(205,127,50,0.12), 0 2px 18px rgba(205,127,50,0.3); }
}
@keyframes lb-crown-bounce {
  0%,100% { transform: translateY(0) rotate(-5deg); }
  50%      { transform: translateY(-3px) rotate(5deg); }
}
@keyframes lb-shine {
  0%   { left:-100%; opacity:0; }
  10%  { opacity:0.6; }
  50%  { left:100%; opacity:0.3; }
  100% { left:100%; opacity:0; }
}
@keyframes lb-item-in {
  from { opacity:0; transform:translateY(12px) scale(0.97); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}

.lb-item { animation: lb-item-in 0.35s ease both; }
.lb-item:nth-child(1) { animation-delay:0s; }
.lb-item:nth-child(2) { animation-delay:0.07s; }
.lb-item:nth-child(3) { animation-delay:0.14s; }

/* Пульсирующий border у топ-3 */
.lb-item.rank-1 { border-color:rgba(255,215,0,0.5); background:rgba(255,215,0,0.04); }
.lb-item.rank-2 { border-color:rgba(192,192,192,0.35); background:rgba(192,192,192,0.03); }
.lb-item.rank-3 { border-color:rgba(205,127,50,0.35); background:rgba(205,127,50,0.03); }
.lb-item.rank-1 .lb-avatar-img { animation: lb-gold-pulse 2.2s ease-in-out infinite; }
.lb-item.rank-2 .lb-avatar-img { animation: lb-silver-pulse 2.6s ease-in-out infinite; }
.lb-item.rank-3 .lb-avatar-img { animation: lb-bronze-pulse 3s ease-in-out infinite; }

/* Корона над аватаром */
.lb-crown {
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  font-size:1rem; animation: lb-crown-bounce 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(255,215,0,0.8));
  pointer-events:none; z-index:5;
}

/* Блик-полоса поверх аватара */
.lb-avatar-img::after {
  content:''; position:absolute; top:0; left:-100%; width:40%; height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.18),transparent);
  transform:skewX(-15deg); pointer-events:none;
}
.lb-item.rank-1 .lb-avatar-img::after { animation: lb-shine 3.5s ease-in-out infinite; }
.lb-item.rank-2 .lb-avatar-img::after { animation: lb-shine 4.2s ease-in-out 0.8s infinite; }
.lb-item.rank-3 .lb-avatar-img::after { animation: lb-shine 5s ease-in-out 1.6s infinite; }

/* Награды-бейджи */
.lb-reward-badge {
  display:inline-flex; align-items:center; gap:.25rem;
  font-size:.62rem; font-weight:700; padding:.15rem .4rem;
  border-radius:6px; margin-top:.2rem; letter-spacing:.3px;
}
.lb-reward-1 { background:rgba(255,215,0,.12); border:1px solid rgba(255,215,0,.4); color:#ffd700; }
.lb-reward-2 { background:rgba(192,192,192,.1); border:1px solid rgba(192,192,192,.35); color:#c0c0c0; }
.lb-reward-3 { background:rgba(205,127,50,.1); border:1px solid rgba(205,127,50,.35); color:#cd7f32; }

.lb-me-badge {
  color:var(--gold); font-size:.62rem; font-weight:700;
  background:rgba(245,200,66,0.15); border:1px solid rgba(245,200,66,0.3);
  border-radius:6px; padding:.05rem .3rem; vertical-align:middle; margin-left:.3rem;
}

.lb-item { min-height:72px; }

/* ── Custom Scrollbar — thin gold ── */
.leaderboard-list::-webkit-scrollbar,
.history-list::-webkit-scrollbar,
#page-char::-webkit-scrollbar,
#page-train::-webkit-scrollbar,
#page-tournaments::-webkit-scrollbar,
#page-lb::-webkit-scrollbar,
#page-about::-webkit-scrollbar {
  width: 3px;
}
.leaderboard-list::-webkit-scrollbar-track,
.history-list::-webkit-scrollbar-track,
#page-char::-webkit-scrollbar-track,
#page-train::-webkit-scrollbar-track,
#page-tournaments::-webkit-scrollbar-track,
#page-lb::-webkit-scrollbar-track,
#page-about::-webkit-scrollbar-track {
  background: transparent;
}
.leaderboard-list::-webkit-scrollbar-thumb,
.history-list::-webkit-scrollbar-thumb,
#page-char::-webkit-scrollbar-thumb,
#page-train::-webkit-scrollbar-thumb,
#page-tournaments::-webkit-scrollbar-thumb,
#page-lb::-webkit-scrollbar-thumb,
#page-about::-webkit-scrollbar-thumb {
  background: rgba(245,200,66,0.2);
  border-radius: 2px;
}

/* ── Smooth page transitions ── */
.page.active {
  animation: pageFadeIn 0.25s ease;
}
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Pulse на XP барах при получении ── */
@keyframes barPulse {
  0%,100% { filter: brightness(1); }
  50%      { filter: brightness(1.4) saturate(1.3); }
}
.cc-xp-fill.gaining { animation: barPulse 0.6s ease; }

/* ══════════════════════════════════════════════════════════
   UI POLISH — глобальные улучшения интерфейса
   ══════════════════════════════════════════════════════════ */

/* ── Улучшенные скроллбары ── */
* { scrollbar-width: thin; scrollbar-color: rgba(245,200,66,.2) transparent; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(245,200,66,.25); border-radius: 4px; }

/* ── Улучшенные инпуты ── */
input[type="text"], input[type="email"], input[type="password"],
input:not([type]), textarea {
  transition: border-color .2s, box-shadow .2s;
}
input:focus, textarea:focus {
  outline: none;
  border-color: rgba(245,200,66,.5) !important;
  box-shadow: 0 0 0 2px rgba(245,200,66,.08);
}

/* ── Toast анимация ── */
@keyframes toastIn {
  from { opacity:0; transform:translateY(10px) scale(.96); }
  to   { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes toastOut {
  from { opacity:1; transform:translateY(0) scale(1); }
  to   { opacity:0; transform:translateY(-8px) scale(.95); }
}

/* ── Системные сообщения в чате гильдии ── */
.guild-chat-system {
  background: linear-gradient(135deg, rgba(245,200,66,.07), rgba(245,200,66,.03));
  border: 1px solid rgba(245,200,66,.18);
  border-radius: 10px;
  padding: .4rem .7rem;
  font-size: .75rem;
  color: rgba(245,200,66,.8);
  text-align: center;
  margin: .2rem 0;
}
.guild-chat-battle-alert {
  background: linear-gradient(135deg, rgba(224,48,48,.12), rgba(224,48,48,.05));
  border: 1px solid rgba(224,48,48,.3);
  border-radius: 10px;
  padding: .5rem .8rem;
  font-size: .78rem;
  color: #ff8080;
  text-align: center;
  margin: .2rem 0;
  animation: battleAlertPulse 2s ease infinite;
}
@keyframes battleAlertPulse {
  0%,100% { box-shadow: 0 0 0 rgba(224,48,48,0); }
  50%      { box-shadow: 0 0 12px rgba(224,48,48,.25); }
}

/* ── Банд битва — карточки боёв ── */
#misc-tab-gangbattles { padding: .85rem; }

/* ── Улучшенная анимация кнопок ── */
button { -webkit-tap-highlight-color: transparent; }

/* ── Заголовок страниц ── */
.page-header-shine {
  font-family: 'Cinzel Decorative', serif;
  font-size: .75rem;
  color: var(--gold);
  letter-spacing: 4px;
  text-align: center;
  padding: .85rem 0 .4rem;
  text-shadow: 0 0 20px rgba(245,200,66,.35);
}

/* ── Карточки гильдий — подсветка ── */
.guild-name-title {
  text-shadow: 0 0 14px rgba(245,200,66,.3);
}

/* ── Ранги банды — цветовые маркеры ── */
.rank-can-challenge { color: var(--gold) !important; }
.rank-standard { color: var(--text-dim); }


/* ── Moved from inline index.html styles ── */

    /* ── EXTRA STYLES for new features ── */
    @keyframes spin    { to { transform: rotate(360deg); } }
    @keyframes fadeUp  { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
    @keyframes pulse   { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04)} }
    @keyframes flashIn { from { opacity:0; transform:translateY(-100%); } to { opacity:1; transform:translateY(0); } }
    @keyframes shake   { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
    @keyframes dmgPop  { 0%{opacity:1;transform:translateY(0) scale(1)} 100%{opacity:0;transform:translateY(-50px) scale(1.4)} }

    /* ── DISCLAIMER modal overlay (for About page) ── */
    #disclaimer-modal-overlay {
      display:none; position:fixed; inset:0; background:rgba(0,0,0,0.88);
      z-index:800; align-items:center; justify-content:center;
    }
    #disclaimer-modal-overlay.open { display:flex; }
    .disclaimer-modal-inner {
      background:var(--surface); border:1px solid var(--border);
      border-radius:16px; width:90%; max-width:520px;
      max-height:90vh; display:flex; flex-direction:column;
      animation:fadeUp 0.3s ease;
    }
    .disclaimer-modal-header {
      display:flex; align-items:center; justify-content:space-between;
      padding:1rem 1.25rem; border-bottom:1px solid var(--border); flex-shrink:0;
    }
    .disclaimer-modal-body { flex:1; overflow-y:auto; padding:1rem 1.25rem; }
    .disclaimer-modal-close {
      background:transparent; border:none; color:var(--text-dim);
      font-size:1.3rem; cursor:pointer; padding:0.2rem 0.5rem;
    }

    /* ── COINS badge ── */
    .coins-badge {
      display:inline-flex; align-items:center; gap:0.3rem;
      background:rgba(245,200,66,0.1); border:1px solid rgba(245,200,66,0.35);
      border-radius:20px; padding:0.22rem 0.65rem;
      font-family:'Cinzel Decorative',serif; font-size:0.82rem; color:var(--gold);
      box-shadow:0 0 10px rgba(245,200,66,0.12), inset 0 1px 0 rgba(245,200,66,0.08);
      transition:all 0.2s;
    }

    /* ── RANK badge ── */
    .rank-badge {
      display:inline-block; padding:0.2rem 0.6rem; border-radius:20px;
      font-size:0.7rem; letter-spacing:2px; text-transform:uppercase; font-weight:700;
    }

    /* ── DISCLAIMER CHECKBOXES ── */
    .disclaimer-check-label {
      display:flex; align-items:flex-start; gap:0.75rem; cursor:pointer;
      padding:0.65rem 0.85rem; border-radius:10px;
      border:1px solid var(--border); background:var(--surface);
      transition:all 0.25s;
    }
    .disclaimer-check-label:has(input:checked) {
      border-color:var(--gold); background:rgba(245,200,66,0.07);
    }
    .disclaimer-check-label input[type=checkbox] {
      appearance:none; -webkit-appearance:none;
      width:20px; height:20px; flex-shrink:0; margin-top:1px;
      border:2px solid var(--border); border-radius:5px;
      background:var(--surface2); cursor:pointer; transition:all 0.2s;
      position:relative;
    }
    .disclaimer-check-label input[type=checkbox]:checked {
      background:var(--gold); border-color:var(--gold);
    }
    .disclaimer-check-label input[type=checkbox]:checked::after {
      content:'✓'; position:absolute; top:50%; left:50%;
      transform:translate(-50%,-50%);
      font-size:13px; color:#000; font-weight:900;
    }
    .disclaimer-check-label span {
      font-size:0.83rem; color:var(--text); line-height:1.5;
    }

    /* ── TOURNAMENT FIGHT ARENA ── */
    @keyframes skillPop   { 0%{transform:scale(1)} 30%{transform:scale(1.18)} 100%{transform:scale(1)} }
    @keyframes sectionFadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

    /* ══════════════════════════════════════
       SPOTIFAR — Spotify-style music player
       ══════════════════════════════════════ */
    .spf-player {
      margin-top:1rem; border-radius:16px; overflow:hidden; position:sticky;
      top: 60px; z-index: 50;
      background:#121212;
      border:1px solid rgba(255,255,255,.08);
      box-shadow:0 8px 32px rgba(0,0,0,.6);
    }
    .spf-bg-blur {
      position:absolute; inset:0; z-index:0; pointer-events:none;
      background-size:cover; background-position:center;
      filter:blur(60px) saturate(1.4);
      opacity:.18;
      transition:background-image .6s ease;
    }
    .spf-topbar {
      position:relative; z-index:1;
      display:flex; align-items:center; justify-content:space-between;
      padding:.55rem 1rem;
      background:rgba(18,18,18,.85);
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .spf-label {
      font-size:.58rem; letter-spacing:2.5px; font-weight:700;
      color:rgba(255,255,255,.35); text-transform:uppercase;
    }
    .spf-collapse-btn {
      background:none; border:none; color:rgba(255,255,255,.4);
      cursor:pointer; padding:2px; display:flex; align-items:center;
      transition:color .2s, transform .3s;
    }
    .spf-collapse-btn:hover { color:rgba(255,255,255,.8); }
    .spf-collapse-btn.collapsed { transform:rotate(180deg); }

    .spf-body { position:relative; z-index:1; padding:.85rem 1rem 1rem; }
    .spf-body.hidden { display:none; }

    /* Now Playing row */
    .spf-now-playing {
      display:flex; align-items:center; gap:.75rem; margin-bottom:.85rem;
    }
    .spf-cover-wrap {
      position:relative; width:54px; height:54px; flex-shrink:0;
      border-radius:8px; overflow:hidden;
      background:#1e1e1e;
      box-shadow:0 4px 16px rgba(0,0,0,.5);
    }
    .spf-main-cover {
      width:100%; height:100%; object-fit:cover; display:block;
      transition:opacity .4s ease;
    }
    .spf-cover-placeholder {
      position:absolute; inset:0; display:flex; align-items:center;
      justify-content:center; font-size:1.4rem; color:rgba(255,255,255,.2);
    }
    .spf-now-info { flex:1; min-width:0; }
    .spf-now-name {
      font-size:.88rem; font-weight:700; color:#fff;
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
      letter-spacing:.2px;
    }
    .spf-now-artist { font-size:.72rem; color:rgba(255,255,255,.5); margin-top:.15rem; }

    /* Progress */
    .spf-progress-area {
      margin-bottom:.7rem; cursor:pointer;
      padding:10px 0; /* big tap target on mobile */
      margin-top:-6px;
      touch-action:none;
    }
    .spf-progress-track {
      position:relative; height:4px; background:rgba(255,255,255,.15);
      border-radius:2px; margin-bottom:.3rem;
      transition:height .15s;
    }
    .spf-progress-area:active .spf-progress-track { height:6px; }
    .spf-progress-fill {
      position:absolute; left:0; top:0; height:100%;
      background:#1DB954; border-radius:2px;
      width:0%;
    }
    .spf-progress-thumb {
      position:absolute; top:50%; transform:translate(-50%,-50%);
      width:14px; height:14px; background:#fff; border-radius:50%;
      left:0%; opacity:0; transition:opacity .15s;
      pointer-events:none; box-shadow:0 0 4px rgba(0,0,0,.4);
    }
    .spf-progress-area:hover .spf-progress-thumb,
    .spf-progress-area:active .spf-progress-thumb { opacity:1; }
    .spf-time-row {
      display:flex; justify-content:space-between;
      font-size:.6rem; color:rgba(255,255,255,.4);
    }

    /* Controls */
    .spf-controls {
      display:flex; align-items:center; justify-content:center;
      gap:.6rem; margin-bottom:.75rem;
    }
    .spf-ctrl-btn {
      background:none; border:none; color:rgba(255,255,255,.6);
      cursor:pointer; padding:6px; border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      transition:color .18s, transform .18s;
    }
    .spf-ctrl-btn:hover { color:#fff; }
    .spf-ctrl-btn:active { transform:scale(.88); }
    .spf-ctrl-btn.spf-loop-btn.active { color:#1DB954; }
    .spf-skip-btn { padding:5px; }
    .spf-play-btn {
      width:46px; height:46px; border-radius:50%;
      background:#fff; border:none; cursor:pointer;
      display:flex; align-items:center; justify-content:center;
      color:#000; transition:transform .18s, background .18s;
      box-shadow:0 4px 16px rgba(0,0,0,.4);
    }
    .spf-play-btn:hover { background:#e0e0e0; transform:scale(1.06); }
    .spf-play-btn:active { transform:scale(.94); }
    .spf-play-btn.playing { background:#1DB954; color:#fff; }
    .spf-play-btn.playing:hover { background:#1ed760; }
    .spf-vol-wrap {
      display:flex; align-items:center; gap:.35rem;
      margin-left:auto; flex-shrink:0;
    }
    .spf-vol-slider {
      width:64px; height:4px; accent-color:#1DB954; cursor:pointer;
      appearance:auto; -webkit-appearance:auto;
    }

    /* Playlist */
    .spf-playlist-label {
      font-size:.58rem; letter-spacing:2px; font-weight:700;
      color:rgba(255,255,255,.3); margin-bottom:.45rem; padding-left:.1rem;
    }
    .spf-playlist {
      display:flex; flex-direction:column; gap:2px;
      max-height:180px; overflow-y:auto;
      scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.1) transparent;
    }
    .spf-row {
      display:flex; align-items:center; gap:.65rem;
      padding:.42rem .5rem; border-radius:6px; cursor:pointer;
      transition:background .15s; -webkit-tap-highlight-color:transparent;
    }
    .spf-row:hover { background:rgba(255,255,255,.07); }
    .spf-row.spf-active { background:rgba(29,185,84,.12); }
    .spf-cover-sm {
      position:relative; width:38px; height:38px; flex-shrink:0;
      border-radius:4px; overflow:hidden; background:#1e1e1e;
    }
    .spf-eq-overlay {
      position:absolute; inset:0; background:rgba(0,0,0,.45);
      display:flex; align-items:flex-end; justify-content:center;
      gap:2px; padding-bottom:6px;
    }
    .spf-eq-overlay span {
      width:3px; background:#1DB954; border-radius:1px; height:6px;
      animation:spfEq .7s ease-in-out infinite alternate;
    }
    .spf-eq-overlay span:nth-child(2) { animation-delay:.15s; height:10px; }
    .spf-eq-overlay span:nth-child(3) { animation-delay:.3s; height:7px; }
    @keyframes spfEq { from{transform:scaleY(.3)} to{transform:scaleY(1)} }
    .spf-play-overlay {
      position:absolute; inset:0; background:rgba(0,0,0,.4);
      display:flex; align-items:center; justify-content:center;
      font-size:.7rem; color:#fff; opacity:0; transition:opacity .15s;
    }
    .spf-row:hover .spf-play-overlay { opacity:1; }
    .spf-row.spf-active .spf-play-overlay { display:none; }
    .spf-row-info { flex:1; min-width:0; }
    .spf-row-name {
      font-size:.78rem; font-weight:600; color:rgba(255,255,255,.9);
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    .spf-row.spf-active .spf-row-name { color:#1DB954; }
    .spf-row-artist { font-size:.65rem; color:rgba(255,255,255,.4); margin-top:.1rem; }
    .spf-row-num { font-size:.65rem; color:rgba(255,255,255,.3); min-width:16px; text-align:right; }
    .spf-row-dot {
      width:8px; height:8px; border-radius:50%; background:#1DB954;
      flex-shrink:0;
    }

    @keyframes hitFlash   { 0%{opacity:1} 20%{opacity:0.5;filter:brightness(1.8) saturate(0)} 100%{opacity:1;filter:none} }
    @keyframes slideUp    { from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:translateY(0)} }
    @keyframes impactRing { 0%{transform:scale(0.3);opacity:0.9} 100%{transform:scale(2.5);opacity:0} }
    @keyframes energyArc  {
      0%   { stroke-dashoffset:400; opacity:1; }
      100% { stroke-dashoffset:0;   opacity:0; }
    }

    .tourn-arena-wrap {
      position:relative; display:flex; flex-direction:column;
      background:var(--surface); border:1px solid var(--border);
      border-radius:18px; overflow:hidden; margin-bottom:0.85rem;
    }
    .tourn-fighters-row {
      display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
      gap:0; padding:1rem 0.75rem 0.5rem;
    }
    .tourn-fighter-card {
      display:flex; flex-direction:column; align-items:center; gap:0.3rem;
      padding:0.5rem; border-radius:14px; position:relative;
      transition:all 0.3s; min-width:0;
    }
    .tourn-fighter-card.player-side { background:rgba(245,200,66,0.05); border:1px solid rgba(245,200,66,0.2); }
    .tourn-fighter-card.enemy-side  { background:rgba(224,48,48,0.05);  border:1px solid rgba(224,48,48,0.2);  }
    .tourn-fighter-card.hit-anim    { animation:hitFlash 0.35s ease; }

    .tourn-fighter-avatar {
      width:clamp(130px,36vw,175px); height:clamp(130px,36vw,175px); border-radius:14px; overflow:hidden;
      display:flex; align-items:center; justify-content:center;
      position:relative; background:var(--bg3);
    }
    .tourn-fighter-avatar img {
      width:100%; height:100%; object-fit:cover; object-position:top center; border-radius:12px;
    }
    .tourn-fighter-avatar .avatar-emoji {
      font-size:clamp(3rem,10vw,4.5rem); line-height:1;
    }
    .tourn-fighter-name {
      font-family:'Cinzel Decorative',serif; font-size:clamp(0.5rem,2vw,0.65rem);
      color:var(--gold); text-align:center; max-width:clamp(90px,28vw,150px);
      overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    }
    .tourn-vs-badge {
      font-family:'Cinzel Decorative',serif; font-size:1rem;
      color:var(--text-dim); padding:0 0.25rem;
    }
    .tourn-hp-bar-wrap { width:100%; padding:0 0.25rem; }
    .tourn-hp-label {
      display:flex; justify-content:space-between;
      font-size:0.58rem; color:var(--text-dim); margin-bottom:0.2rem;
    }
    .tourn-hp-track { height:8px; background:var(--bg3); border-radius:4px; overflow:hidden; }
    .tourn-hp-fill  { height:100%; border-radius:4px; transition:width 0.5s ease; }
    .tourn-hp-fill.player { background:linear-gradient(90deg,#c9972a,#f5c842); }
    .tourn-hp-fill.enemy  { background:linear-gradient(90deg,#c03030,#e05050); }
    .tourn-stam-fill { background:linear-gradient(90deg,#1a6aff,#00e5ff); }
    .tourn-stam-track { height:5px; background:var(--bg3); border-radius:3px; overflow:hidden; margin-top:0.2rem; }
    .tourn-stam-bar   { height:100%; border-radius:3px; transition:width 0.5s ease; }

    /* Damage float */
    .tourn-dmg-float {
      position:absolute; top:8px; left:50%; transform:translateX(-50%);
      font-family:'Cinzel Decorative',serif; font-size:1.6rem; font-weight:900;
      pointer-events:none; z-index:20; white-space:nowrap;
      animation:dmgPop 0.85s ease-out forwards;
    }

    /* Impact ring effect */
    .impact-ring {
      position:absolute; top:50%; left:50%;
      width:60px; height:60px; margin:-30px 0 0 -30px;
      border:3px solid; border-radius:50%;
      animation:impactRing 0.5s ease-out forwards;
      pointer-events:none; z-index:15;
    }

    /* Combat log */
    .tourn-log {
      background:var(--bg); border-top:1px solid var(--border);
      padding:0.5rem 0.85rem; font-size:0.75rem; color:var(--text-dim);
      min-height:2.2rem; max-height:60px; overflow-y:auto; line-height:1.7;
    }

    /* Skill deck */
    .tourn-skill-row {
      display:flex; gap:0.4rem; padding:0.5rem 0.6rem;
      overflow-x:auto; scrollbar-width:none;
      border-top:1px solid var(--border);
      background:var(--bg);
      justify-content:flex-start;
      -webkit-overflow-scrolling:touch;
    }
    .tourn-skill-row::-webkit-scrollbar { display:none; }

    /* На мобилке каждая карточка: фиксированная ширина + скролл */
    .tourn-skill-card {
      flex:0 0 auto;
      width: clamp(68px, 18vw, 100px);
      border-radius:10px; cursor:pointer;
      border:1.5px solid var(--border); overflow:hidden;
      transition:all 0.2s; position:relative;
      background:var(--surface2); user-select:none;
    }
    .tourn-skill-card:active:not(.sk-disabled) {
      transform:scale(0.94);
      border-color:var(--gold);
    }
    .tourn-skill-card:hover:not(.sk-disabled) {
      transform:translateY(-3px) scale(1.03);
      border-color:var(--gold);
      box-shadow:0 6px 16px rgba(245,200,66,0.25);
    }
    .tourn-skill-card.sk-disabled  { opacity:0.35; cursor:not-allowed; filter:grayscale(60%); }
    .tourn-skill-card.sk-active    { animation:skillPop 0.3s ease; }
    .tourn-skill-card .sk-img      { width:100%; height:clamp(62px,16vw,90px); object-fit:cover; display:block; }
    .tourn-skill-card .sk-img-placeholder {
      width:100%; height:clamp(62px,16vw,90px); display:flex; align-items:center;
      justify-content:center; font-size:2rem; background:var(--bg3);
    }
    .tourn-skill-card .sk-name {
      font-size:0.52rem; color:var(--text-dim); padding:0.2rem 0.25rem 0;
      text-align:center; line-height:1.2; white-space:nowrap;
      overflow:hidden; text-overflow:ellipsis;
    }
    .tourn-skill-card .sk-cost {
      font-size:0.55rem; color:#00e5ff; text-align:center;
      padding:0.15rem 0.25rem 0.3rem;
    }
    .tourn-skill-card .sk-dmg {
      font-size:0.55rem; color:var(--red); text-align:center;
      padding:0 0.25rem 0.25rem;
    }
    .combat-arena {
      display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; margin-bottom:0.75rem;
    }
    .combatant-card {
      background:var(--surface); border:1px solid var(--border);
      border-radius:14px; padding:0.85rem; text-align:center; position:relative;
    }
    .combatant-card.player { border-color:rgba(245,200,66,0.4); }
    .combatant-card.enemy  { border-color:rgba(224,48,48,0.35); }
    .combatant-name { font-family:'Cinzel Decorative',serif; font-size:0.65rem; color:var(--gold); margin-bottom:0.35rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .combatant-emoji { font-size:2.8rem; display:block; margin-bottom:0.4rem; }
    #combat-player-avatar { width:80px; height:80px; object-fit:cover; border-radius:10px; display:none; margin:0 auto 0.4rem; border:1px solid rgba(245,200,66,0.3); }
    .combat-bar-wrap { margin-bottom:0.3rem; }
    .combat-bar-label { display:flex; justify-content:space-between; font-size:0.62rem; color:var(--text-dim); margin-bottom:0.15rem; }
    .combat-bar { height:7px; background:var(--bg3); border-radius:4px; overflow:hidden; }
    .combat-bar-fill { height:100%; border-radius:4px; transition:width 0.5s ease; }
    .hp-fill    { background:linear-gradient(90deg,#c03030,#e05050); }
    .stam-fill  { background:linear-gradient(90deg,#1a6aff,#00e5ff); }
    .dmg-float {
      position:absolute; top:10px; left:50%; transform:translateX(-50%);
      font-family:'Cinzel Decorative',serif; font-size:1.4rem; color:#ff4444;
      pointer-events:none; animation:dmgPop 0.9s ease-out forwards; white-space:nowrap;
    }
    .combat-log {
      background:var(--surface); border:1px solid var(--border);
      border-radius:10px; padding:0.6rem 0.85rem; margin-bottom:0.75rem;
      font-size:0.78rem; color:var(--text-dim); min-height:2.5rem;
      max-height:80px; overflow-y:auto; line-height:1.6;
    }
    .combat-skill-deck {
      display:flex; gap:0.5rem; overflow-x:auto; padding-bottom:0.4rem;
      scrollbar-width:none;
    }
    .combat-skill-deck::-webkit-scrollbar { display:none; }
    .skill-card {
      flex-shrink:0; width:80px; background:var(--surface2);
      border:1px solid var(--border); border-radius:10px;
      padding:0.5rem 0.4rem; text-align:center; cursor:pointer;
      transition:all 0.25s; position:relative; user-select:none;
    }
    .skill-card:hover:not(.disabled) { transform:translateY(-3px); border-color:var(--gold); }
    .skill-card.disabled { opacity:0.4; cursor:not-allowed; }
    .skill-card-emoji { font-size:1.5rem; display:block; margin-bottom:0.2rem; }
    .skill-card-name  { font-size:0.58rem; color:var(--text-dim); line-height:1.2; }
    .skill-card-cost  { font-size:0.6rem; color:#00e5ff; margin-top:0.2rem; }
    .combat-btn {
      width:100%; padding:0.75rem; border:none; border-radius:10px;
      font-family:'Cinzel Decorative',serif; font-size:0.8rem; letter-spacing:1px;
      cursor:pointer; transition:all 0.3s; margin-bottom:0.5rem;
    }
    .combat-btn-start { background:linear-gradient(135deg,#c9972a,#f5c842); color:#000; }
    .combat-btn-start:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(245,200,66,0.35); }
    .combat-btn-flee  { background:transparent; border:1px solid var(--border); color:var(--text-dim); }
    .combat-btn-flee:hover { border-color:var(--red); color:var(--red); }
    .combat-enemy-select {
      display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; margin-bottom:1rem;
    }
    .enemy-btn {
      background:var(--surface); border:1px solid var(--border);
      border-radius:10px; padding:0.65rem; cursor:pointer; text-align:center;
      transition:all 0.3s; color:var(--text);
    }
    .enemy-btn:hover { border-color:var(--red); transform:translateY(-2px); }
    .enemy-btn.selected { border-color:var(--red); background:rgba(224,48,48,0.08); }
    .exhaustion-warn {
      background:rgba(224,48,48,0.12); border:1px solid var(--red);
      border-radius:10px; padding:0.75rem 1rem; text-align:center;
      color:var(--red); font-size:0.85rem; margin-bottom:1rem;
    }

    /* ── SHOP ── */
    .shop-grid { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; }
    .shop-item {
      background:var(--surface); border:1px solid var(--border);
      border-radius:12px; padding:0.85rem; text-align:center; position:relative;
      transition:all 0.3s;
    }
    .shop-item:hover { transform:translateY(-2px); }
    .shop-item.owned { border-color:var(--gold); background:rgba(245,200,66,0.05); }
    .shop-item-emoji { font-size:2rem; display:block; margin-bottom:0.4rem; }
    .shop-item-name  { font-size:0.8rem; font-weight:700; margin-bottom:0.2rem; }
    .shop-item-desc  { font-size:0.65rem; color:var(--text-dim); margin-bottom:0.5rem; line-height:1.4; }
    .shop-item-price {
      display:inline-flex; align-items:center; gap:0.25rem;
      background:rgba(245,200,66,0.1); border:1px solid rgba(245,200,66,0.3);
      border-radius:12px; padding:0.2rem 0.5rem;
      font-size:0.75rem; color:var(--gold); font-weight:700;
    }
    .shop-buy-btn {
      width:100%; margin-top:0.5rem; padding:0.45rem;
      border:none; border-radius:8px; cursor:pointer;
      font-family:'Rajdhani',sans-serif; font-size:0.75rem;
      letter-spacing:1px; font-weight:700; transition:all 0.3s;
    }
    .shop-buy-btn.can-buy { background:linear-gradient(135deg,#c9972a,#f5c842); color:#000; }
    .shop-buy-btn.cant-buy{ background:var(--surface2); color:var(--text-dim); cursor:not-allowed; }
    .shop-buy-btn.owned   { background:rgba(48,192,96,0.15); color:#30c060; cursor:default; }

    /* ── TOURNAMENTS ── */
    .tournament-card {
      background: linear-gradient(135deg, var(--surface), rgba(13,13,30,.98));
      border: 1px solid var(--border);
      border-radius: 16px;
      overflow: hidden;
      margin-bottom: 0.85rem;
      position: relative;
      box-shadow: 0 4px 24px rgba(0,0,0,.35);
      transition: border-color .2s, box-shadow .2s;
    }
    .tournament-card:hover { border-color: rgba(245,200,66,.35); box-shadow: 0 6px 32px rgba(245,200,66,.08); }
    .tournament-card::before {
      content:''; position:absolute; top:0; left:0; right:0; height:2px; z-index:1;
    }
    .tournament-card.weekly::before  { background: linear-gradient(90deg, transparent, #3a8fe8, transparent); }
    .tournament-card.monthly::before { background: linear-gradient(90deg, transparent, var(--gold), transparent); }
    .tourn-banner {
      width: 100%; height: 130px; object-fit: cover; object-position: center;
      display: block;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.95) 40%, rgba(0,0,0,0) 100%);
      -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.95) 40%, rgba(0,0,0,0) 100%);
    }
    .tourn-body { padding: 0.75rem 1.1rem 1rem; }
    .tournament-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.45rem; }
    .tournament-title { font-family:'Cinzel Decorative',serif; font-size:0.88rem; color:var(--gold); letter-spacing:1px; text-shadow: 0 0 16px rgba(245,200,66,.3); }
    .tournament-type-badge {
      font-size:0.6rem; letter-spacing:2px; text-transform:uppercase;
      padding:0.2rem 0.55rem; border-radius:10px;
    }
    .tournament-desc { font-size:0.78rem; color:var(--text-dim); margin-bottom:0.7rem; line-height:1.55; }
    .tournament-rewards { display:flex; gap:0.65rem; margin-bottom:0.75rem; flex-wrap:wrap; }
    .tournament-reward-item {
      font-size:0.75rem; color:var(--text);
      background: rgba(245,200,66,.06); border: 1px solid rgba(245,200,66,.15);
      border-radius: 6px; padding: .18rem .45rem;
    }
    .tournament-enter-btn {
      width:100%; padding:0.65rem; border:none; border-radius:10px;
      font-family:'Cinzel Decorative',serif; font-size:0.75rem; letter-spacing:1px;
      cursor:pointer; transition:all 0.2s;
    }
    .tournament-enter-btn.active {
      background: linear-gradient(135deg, #c9972a, #f5c842);
      color: #000;
      box-shadow: 0 4px 18px rgba(245,200,66,.3);
    }
    .tournament-enter-btn.active:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(245,200,66,.45); }
    .tournament-enter-btn.locked { background:var(--surface2); color:var(--text-dim); cursor:not-allowed; border: 1px solid var(--border); }

    /* ── DEV PANEL ── */
    #dev-panel {
      display:none; position:fixed; inset:0; background:rgba(0,0,0,0.92);
      z-index:1000; overflow-y:auto;
    }
    #dev-panel.open { display:block; }
    .dev-inner {
      max-width:520px; margin:0 auto; padding:1.5rem 1rem;
    }
    .dev-header {
      display:flex; align-items:center; justify-content:space-between;
      margin-bottom:1.5rem; padding-bottom:0.75rem;
      border-bottom:1px solid rgba(0,229,255,0.3);
    }
    .dev-title {
      font-family:'Cinzel Decorative',serif; font-size:1.1rem;
      background:linear-gradient(135deg,#00e5ff,#3a8fe8);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent;
    }
    .dev-close {
      background:transparent; border:1px solid rgba(0,229,255,0.3);
      color:#00e5ff; padding:0.3rem 0.75rem; border-radius:6px;
      cursor:pointer; font-family:'Rajdhani',sans-serif; font-size:0.8rem;
    }
    .dev-section {
      background:rgba(0,229,255,0.04); border:1px solid rgba(0,229,255,0.15);
      border-radius:12px; padding:1rem; margin-bottom:1rem;
    }
    .dev-section-title {
      font-size:0.7rem; letter-spacing:2px; text-transform:uppercase;
      color:#00e5ff; margin-bottom:0.75rem; opacity:0.7;
    }
    .dev-row { display:flex; gap:0.5rem; margin-bottom:0.5rem; align-items:center; flex-wrap:wrap; }
    .dev-input {
      flex:1; min-width:80px; padding:0.5rem 0.75rem;
      background:var(--bg3); border:1px solid rgba(0,229,255,0.2);
      border-radius:6px; color:var(--text); font-family:'Rajdhani',sans-serif;
      font-size:0.9rem;
    }
    .dev-btn {
      padding:0.5rem 0.85rem; border:none; border-radius:6px;
      font-family:'Rajdhani',sans-serif; font-size:0.8rem; font-weight:700;
      letter-spacing:1px; cursor:pointer; transition:all 0.2s; white-space:nowrap;
    }
    .dev-btn-cyan  { background:rgba(0,229,255,0.15); color:#00e5ff; border:1px solid rgba(0,229,255,0.3); }
    .dev-btn-gold  { background:rgba(245,200,66,0.15); color:var(--gold); border:1px solid rgba(245,200,66,0.3); }
    .dev-btn-red   { background:rgba(224,48,48,0.15); color:var(--red); border:1px solid rgba(224,48,48,0.3); }
    .dev-btn-green { background:rgba(48,192,96,0.15); color:#30c060; border:1px solid rgba(48,192,96,0.3); }
    .dev-btn:hover { opacity:0.8; transform:translateY(-1px); }
    .dev-log {
      background:var(--bg); border-radius:6px; padding:0.5rem 0.75rem;
      font-size:0.72rem; color:#00e5ff; min-height:2rem; max-height:120px;
      overflow-y:auto; border:1px solid rgba(0,229,255,0.1);
      font-family:monospace; white-space:pre-wrap; word-break:break-all;
    }
    .dev-stat-row {
      display:flex; justify-content:space-between; font-size:0.8rem;
      padding:0.3rem 0; border-bottom:1px solid rgba(255,255,255,0.04);
    }
    .dev-stat-label { color:var(--text-dim); }
    .dev-stat-val   { color:var(--text); font-weight:700; }
  

/* ══════════════════════════════════════════
   CHAR STYLE FEED
══════════════════════════════════════════ */
#char-style-feed {
  background: linear-gradient(135deg,rgba(19,19,42,0.97),rgba(10,10,28,0.95)) !important;
  border-color: rgba(245,200,66,0.15) !important;
  box-shadow: 0 2px 14px rgba(0,0,0,0.25);
}
#char-style-header {
  border-bottom: 1px solid rgba(245,200,66,0.08);
}

/* ══════════════════════════════════════════
   DECK FEED CARDS на char page
══════════════════════════════════════════ */
#char-deck-feed > div {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(245,200,66,0.12);
  background: rgba(10,10,28,0.8);
  transition: all 0.2s;
}
#char-deck-feed > div:hover {
  border-color: rgba(245,200,66,0.3);
  transform: translateY(-2px);
}

/* ══════════════════════════════════════════
   GLOBAL SCROLLBAR POLISH
══════════════════════════════════════════ */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(245,200,66,0.2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(245,200,66,0.35); }

/* ══════════════════════════════════════════
   REFRESH BUTTON POLISH
══════════════════════════════════════════ */
.refresh-btn {
  background: linear-gradient(135deg,rgba(19,19,42,0.9),rgba(10,10,28,0.8)) !important;
  transition: all 0.2s !important;
}
.refresh-btn:hover {
  box-shadow: 0 0 14px rgba(245,200,66,0.15) !important;
}

/* ══════════════════════════════════════════
   ABOUT CARD
══════════════════════════════════════════ */
.about-card {
  background: linear-gradient(135deg,rgba(19,19,42,0.97),rgba(10,10,28,0.95)) !important;
  border-color: rgba(245,200,66,0.15) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}

/* ══════════════════════════════════════════
   COMBAT ENTER BTN
══════════════════════════════════════════ */
.tournament-enter-btn.active {
  box-shadow: 0 4px 16px rgba(245,200,66,0.25);
  transition: all 0.2s !important;
}
.tournament-enter-btn.active:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(245,200,66,0.35) !important;
}

/* ══════════════════════════════════════════
   COMBAT BTN
══════════════════════════════════════════ */
.combat-btn-start {
  background: linear-gradient(135deg,var(--gold-dark),var(--gold)) !important;
  box-shadow: 0 3px 10px rgba(245,200,66,0.18) !important;
  letter-spacing: 1.5px;
  font-weight: 700;
  transition: all 0.2s !important;
}
.combat-btn-start:not(:disabled):hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(245,200,66,0.3) !important;
}

/* Deck skill row hover */
.deck-skill-row {
  transition: all 0.15s;
}
.deck-skill-row:hover {
  border-color: rgba(245,200,66,0.2);
  background: rgba(26,26,53,0.9) !important;
}

/* ══════════════════════════════════════════
   LB RANK NUMBER — крупнее для топ-3
══════════════════════════════════════════ */
.lb-item.rank-1 .lb-rank { font-size: 1.15rem; }
.lb-item.rank-2 .lb-rank { font-size: 1.05rem; }
.lb-item.rank-3 .lb-rank { font-size: 1.0rem; }

/* ══════════════════════════════════════════
   EMPTY MSG
══════════════════════════════════════════ */
.empty-msg {
  background: rgba(19,19,42,0.5);
  border: 1px dashed rgba(245,200,66,0.1);
  border-radius: 12px;
  padding: 2rem 1.5rem !important;
}


/* ══════════════════════════════════════════
   MISC + SHARED POLISH
══════════════════════════════════════════ */

.guild-card { transition: all 0.2s; }
.guild-card:hover { border-color: rgba(245,200,66,0.35) !important; transform: translateY(-1px); }
.guild-card.my-guild { border-color: rgba(245,200,66,0.4) !important; }

.chat-msg { animation: msgSlideIn 0.2s ease; }
@keyframes msgSlideIn { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:none} }

.misc-tab-btn .tab-icon { transition: transform 0.15s; display: inline-block; }
.misc-tab-btn:hover .tab-icon { transform: scale(1.1); }

input:focus, textarea:focus {
  outline: none !important;
  border-color: rgba(245,200,66,0.45) !important;
  box-shadow: 0 0 0 2px rgba(245,200,66,0.06) !important;
}

.btn { transition: all 0.2s ease !important; }
.btn:active { transform: scale(0.97) !important; }

/* ══════════════════════════════════════════
   TARGETED FIXES — based on screenshots
══════════════════════════════════════════ */

/* Train page — background overlay чтобы текст читался */
#page-train {
  position: relative;
}
#page-train::before {
  content: '';
  position: fixed;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(5,5,15,0.55) 0%,
    rgba(5,5,15,0.35) 40%,
    rgba(5,5,15,0.6) 100%
  );
  pointer-events: none;
  z-index: 2;
}
#page-train > * {
  position: relative;
  z-index: 3;
}

/* Exercise btn — горизонтальный layout на маленьких */


/* Exercise btn — image cards, no min-height needed */

/* Train header — отдельная стилизация */
.train-header {
  border-bottom-color: rgba(245,200,66,0.08) !important;
}

/* Misc tabs — убрать лишний gap */


/* Misc tab icon — фиксируем display для badge-уведомлений */
.misc-tab-btn { position: relative; }
.misc-tab-badge {
  position: absolute;
  top: 4px; right: 6px;
  background: var(--red);
  color: #fff;
  font-size: 0.55rem;
  font-weight: 700;
  min-width: 14px;
  height: 14px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  border: 1px solid var(--bg);
}

/* LB page — секция топ-3 красивее */
.lb-item.rank-1 {
  border-color: rgba(255,200,50,0.4) !important;
  background: linear-gradient(135deg, rgba(255,200,50,0.08), rgba(10,10,28,0.92)) !important;
}
.lb-item.rank-2 {
  border-color: rgba(200,200,220,0.28) !important;
}
.lb-item.rank-3 {
  border-color: rgba(210,140,80,0.28) !important;
}

/* LB name — чуть крупнее */
.lb-name { font-size: 0.92rem !important; }

/* History item — иконки более читаемы */
.history-emoji { font-size: 1rem; width: 24px; text-align: center; flex-shrink: 0; }

/* Char page — stat bar bg track ярче */
.stat-bar-bg { background: rgba(255,255,255,0.07) !important; }
.cc-bar-track { background: rgba(255,255,255,0.07) !important; }

/* Plank btn — стиль чище */
.plank-timer-btn {
  text-align: center;
  color: rgba(200,200,220,0.6) !important;
  font-size: 0.82rem !important;
}

/* Energy/XP бары на char card — немного выше */
.cc-bar-track { height: 7px !important; }

/* Power level badge на char — без лишней рамки */
.cc-power-mini {
  background: rgba(245,200,66,0.07) !important;
  border-color: rgba(245,200,66,0.2) !important;
}

/* Bottom nav label — чуть читаемее */
.nav-btn { font-size: 0.6rem !important; }
.nav-btn.active { color: var(--gold) !important; }

@keyframes advCombatPulse {
  0%,100% { box-shadow:0 0 28px 14px rgba(220,30,30,0.9),inset 0 0 14px rgba(220,30,30,0.4); }
  50%      { box-shadow:0 0 46px 22px rgba(255,50,50,1), inset 0 0 24px rgba(255,50,50,0.6); }
}

/* ── Advance аура на боевых карточках ─────── */
.advance-aura-20  { box-shadow:0 0 10px 4px rgba(220,40,40,.30),inset 0 0 6px rgba(220,40,40,.15); border-color:rgba(220,40,40,.55) !important; }
.advance-aura-50  { box-shadow:0 0 16px 7px rgba(220,40,40,.50),inset 0 0 10px rgba(220,40,40,.25); border-color:rgba(220,40,40,.70) !important; }
.advance-aura-100 { box-shadow:0 0 24px 12px rgba(220,40,40,.70),inset 0 0 14px rgba(220,40,40,.35); border-color:rgba(220,40,40,.85) !important; }
.advance-aura-1000{ box-shadow:0 0 36px 18px rgba(255,30,30,.95),inset 0 0 20px rgba(255,30,30,.50); border-color:#ff2020 !important; animation:advCombatPulse .75s ease-in-out infinite; }
@keyframes advCombatPulse{
  0%,100%{box-shadow:0 0 36px 18px rgba(255,30,30,.9),inset 0 0 20px rgba(255,30,30,.5);}
  50%{box-shadow:0 0 54px 28px rgba(255,60,60,1),inset 0 0 30px rgba(255,80,80,.65);}
}


/* ══════════════════════════════════════════════════
   ГЛОБАЛЬНЫЕ УЛУЧШЕНИЯ МОБИЛЬНОГО UI — Dragon Lineage
   ══════════════════════════════════════════════════ */

/* Все интерактивные кнопки — крупнее и тактильнее */
.combat-btn, .exercise-btn, .workout-btn {
  min-height: 52px !important;
  font-size: 0.85rem !important;
  border-radius: 14px !important;
  letter-spacing: 1.5px;
  position: relative; overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s, box-shadow 0.2s, opacity 0.15s !important;
}
.combat-btn:active, .exercise-btn:active, .workout-btn:active {
  transform: scale(0.93) !important;
  opacity: 0.85;
}

/* Ripple эффект при нажатии */
.combat-btn::after, .workout-btn::after {
  content: '';
  position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(circle at var(--rx,50%) var(--ry,50%), rgba(255,255,255,0.25), transparent 60%);
  opacity: 0; transition: opacity 0.4s;
  pointer-events: none;
}
.combat-btn:active::after, .exercise-btn:active::after, .workout-btn:active::after {
  opacity: 1; transition: opacity 0s;
}

/* Основные action-кнопки — ярче и крупнее */
.combat-btn-main {
  background: linear-gradient(135deg, rgba(180,20,20,0.9), var(--red)) !important;
  box-shadow: 0 4px 20px rgba(224,48,48,0.4), inset 0 1px 0 rgba(255,255,255,0.1) !important;
  border: none !important;
  color: #fff !important;
}
.combat-btn-flee {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: var(--text-dim) !important;
}

/* Char card — glowing border при hover/active */
.char-card {
  transition: box-shadow 0.35s !important;
}

/* Stat bars — плавнее и ярче */
.stat-bar-fill {
  transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative; overflow: hidden;
}
.stat-bar-fill::after {
  content: '';
  position: absolute; top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: statShimmer 3s ease-in-out infinite;
}
@keyframes statShimmer {
  0% { left: -60%; opacity: 0; }
  20% { opacity: 1; }
  60% { left: 120%; opacity: 0; }
  100% { left: 120%; opacity: 0; }
}

/* Топбар логотип — пульсирующее свечение */
.logo {
  animation: logoPulse 4s ease-in-out infinite;
}
@keyframes logoPulse {
  0%, 100% { filter: drop-shadow(0 0 0px rgba(245,200,66,0)); }
  50% { filter: drop-shadow(0 0 12px rgba(245,200,66,0.5)); }
}

/* Coins badge — bounce при изменении */
.coins-badge {
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.coins-badge.coins-bump {
  animation: coinBump 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes coinBump {
  0% { transform: scale(1); }
  50% { transform: scale(1.25); filter: drop-shadow(0 0 8px rgba(245,200,66,0.9)); }
  100% { transform: scale(1); }
}

/* Toast — улучшенный */
.toast {
  border-radius: 16px !important;
  font-size: 0.78rem !important;
  padding: 0.75rem 1.1rem !important;
  backdrop-filter: blur(16px) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 1px 0 rgba(255,255,255,0.08) !important;
  animation: toastSlideIn 0.35s cubic-bezier(0.34,1.56,0.64,1) !important;
}
@keyframes toastSlideIn {
  from { transform: translateY(-20px) scale(0.9); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

/* Workout кнопки тренировки — БОЛЬШИЕ для мобилки */
.workout-btn {
  padding: 1rem 1.2rem !important;
  font-size: 0.9rem !important;
  min-height: 58px !important;
  border-radius: 16px !important;
  display: flex; align-items: center; gap: 0.6rem;
}

/* Карточки в турнире/бою — hover glow */
.tourn-fighter-card {
  transition: box-shadow 0.3s !important;
}
.tourn-fighter-card.player-side {
  box-shadow: 0 0 0 1px rgba(245,200,66,0.2), 0 4px 24px rgba(0,0,0,0.4);
}
.tourn-fighter-card.enemy-side {
  box-shadow: 0 0 0 1px rgba(224,48,48,0.2), 0 4px 24px rgba(0,0,0,0.4);
}

/* Входящие вызовы badge — пульсация */
#pvp-nav-badge, #nav-misc-badge {
  animation: badgePop 0.4s cubic-bezier(0.34,1.56,0.64,1), badgePulse 2s ease-in-out 0.4s infinite;
}
@keyframes badgePop { from{transform:scale(0)} to{transform:scale(1)} }
@keyframes badgePulse { 0%,100%{box-shadow:0 0 8px rgba(224,48,48,.9)} 50%{box-shadow:0 0 18px rgba(224,48,48,1)} }

/* Page transition — плавный вход */
.page.active {
  animation: pageEnter 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* Skill cards в бою — крупнее для пальцев */
.tourn-skill-card {
  min-width: clamp(80px, 22vw, 110px) !important;
  border-radius: 14px !important;
  transition: transform 0.15s, box-shadow 0.2s !important;
}
.tourn-skill-card:not(.sk-disabled):active {
  transform: scale(0.9) !important;
  box-shadow: 0 0 20px rgba(245,200,66,0.5) !important;
}

/* More menu PvP btn — если уже активна страница */
.more-pvp-btn.active-page {
  border-color: rgba(224,48,48,0.7);
  box-shadow: 0 4px 24px rgba(224,48,48,0.35);
}

/* Общий scrollbar — тоньше */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(245,200,66,0.25); border-radius: 3px; }

/* Безопасная зона для notch iOS */
@supports (padding: max(0px)) {
  .bottom-nav { padding-bottom: max(env(safe-area-inset-bottom), 6px); height: auto; min-height: 68px; }
}


/* ══════════════════════════════════════════════════
   SHOP v2 — Premium Dark RPG Market
   ══════════════════════════════════════════════════ */

/* ── Tab Bar ── */
.shop-tab-bar {
  display:flex; gap:.3rem; padding:.55rem .7rem .45rem;
  background:rgba(4,4,14,0.98);
  border-bottom:1px solid rgba(245,200,66,0.08);
  overflow-x:auto; flex-shrink:0; -webkit-overflow-scrolling:touch;
  position:relative;
}
.shop-tab-bar::after {
  content:''; position:absolute; bottom:0; left:0; right:0;
  height:1px; background:linear-gradient(90deg,transparent,rgba(245,200,66,.15),transparent);
}
.shop-tab-bar::-webkit-scrollbar { display:none; }
.s-pill {
  flex-shrink:0; padding:.38rem .7rem;
  border-radius:8px; cursor:pointer;
  font-size:.66rem; font-weight:700; letter-spacing:.6px;
  font-family:'Rajdhani',sans-serif; text-transform:uppercase;
  white-space:nowrap;
  border:1px solid rgba(255,255,255,0.07);
  background:rgba(255,255,255,0.03);
  color:rgba(255,255,255,0.35);
  transition:all .16s ease; -webkit-tap-highlight-color:transparent;
  position:relative; overflow:hidden;
}
.s-pill::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(245,200,66,0),rgba(245,200,66,0));
  transition:background .16s;
}
.s-pill.active {
  background:rgba(245,200,66,0.1);
  border-color:rgba(245,200,66,0.45);
  color:var(--gold);
  box-shadow:0 0 12px rgba(245,200,66,.1), inset 0 1px 0 rgba(245,200,66,.15);
}
.s-pill.prem { border-color:rgba(180,79,255,0.2); color:rgba(180,79,255,.5); }
.s-pill.prem.active {
  background:rgba(180,79,255,0.1); border-color:rgba(180,79,255,.5);
  color:#c77fff; box-shadow:0 0 12px rgba(180,79,255,.12);
}
.s-pill:active { transform:scale(0.9); opacity:.8; }

/* ── Item Card ── */
.si {
  background:linear-gradient(160deg,rgba(14,14,28,0.98),rgba(10,10,22,0.98));
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.07);
  padding:.7rem .65rem .75rem;
  position:relative; overflow:hidden;
  transition:transform .16s, border-color .2s, box-shadow .2s;
  -webkit-tap-highlight-color:transparent;
}
.si::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
}
.si:active { transform:scale(0.94); }
.si.si-active {
  border-color:rgba(245,200,66,.55) !important;
  box-shadow:0 0 0 1px rgba(245,200,66,.15), 0 4px 24px rgba(245,200,66,.12) !important;
  background:linear-gradient(160deg,rgba(20,18,8,0.98),rgba(14,12,4,0.98)) !important;
}
.si.si-owned { border-color:rgba(255,255,255,.1); }

/* ── Worn/Active badge ── */
.si-tag {
  position:absolute; top:.38rem; right:.38rem;
  background:var(--gold); color:#0a0a14;
  font-size:.44rem; font-weight:900; letter-spacing:1.8px;
  padding:.1rem .36rem; border-radius:4px;
  text-transform:uppercase; z-index:2;
  box-shadow:0 2px 8px rgba(245,200,66,.4);
}
.si-tag.red { background:#e03030; color:#fff; }
.si-tag.prem { background:linear-gradient(135deg,#b44fff,#6d28d9); color:#fff; }

/* ── Count badge ── */
.si-count {
  position:absolute; top:.38rem; left:.38rem;
  background:rgba(245,200,66,.92); color:#0a0a14;
  font-size:.52rem; font-weight:900;
  width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  z-index:2; box-shadow:0 1px 6px rgba(0,0,0,.5);
}

/* ── Image preview ── */
.si-img {
  width:100%; border-radius:10px; overflow:hidden;
  background:rgba(0,0,0,.3);
  margin-bottom:.5rem; position:relative;
}
.si-img img { width:100%; display:block; transition:filter .25s; }
.si-img.locked img { filter:brightness(0.22) saturate(0.3); }
.si-img.locked::after {
  content:'🔒'; position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; opacity:.7;
}

/* ── Stat multiplier ── */
.si-mult {
  position:absolute; bottom:.28rem; right:.28rem;
  font-size:.62rem; font-weight:900;
  padding:.1rem .38rem; border-radius:6px;
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.12);
  letter-spacing:.5px;
}

/* ── Rarity badge ── */
.si-rarity {
  font-size:.46rem; letter-spacing:1.8px; text-transform:uppercase;
  font-weight:900; padding:.08rem .32rem; border-radius:4px;
  display:inline-block; margin-bottom:.28rem;
}

/* ── Name ── */
.si-name { font-size:.78rem; font-weight:700; margin-bottom:.12rem; line-height:1.2; color:var(--text); }

/* ── Description ── */
.si-desc { font-size:.6rem; color:rgba(255,255,255,.38); line-height:1.45; margin-bottom:.5rem; }

/* ── Buy Button ── */
.si-btn {
  width:100%; padding:.5rem .4rem; border-radius:9px;
  font-family:'Rajdhani',sans-serif; font-size:.76rem;
  font-weight:800; letter-spacing:.6px; cursor:pointer;
  border:none; transition:transform .1s, box-shadow .18s, opacity .15s;
  -webkit-tap-highlight-color:transparent;
  min-height:36px; display:flex; align-items:center; justify-content:center; gap:.3rem;
  position:relative; overflow:hidden;
}
.si-btn::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.08),transparent);
}
.si-btn:not(:disabled):active { transform:scale(0.91); opacity:.85; }
.si-btn.buy {
  background:linear-gradient(135deg,#b8821e,#f0be38,#c9972a);
  color:#0a0a14; box-shadow:0 3px 18px rgba(245,200,66,.3);
}
.si-btn.equip {
  background:transparent; color:var(--gold);
  border:1.5px solid rgba(245,200,66,.4);
  box-shadow:inset 0 1px 0 rgba(245,200,66,.1);
}
.si-btn.done {
  background:rgba(48,192,96,.1); color:#30c060;
  border:1px solid rgba(48,192,96,.25); cursor:default;
}
.si-btn.prem { background:linear-gradient(135deg,#9333ea,#b44fff,#7c3aed); color:#fff; box-shadow:0 3px 14px rgba(180,79,255,.3); }
.si-btn.prem-lock { background:rgba(180,79,255,.08); color:#b44fff; border:1.5px solid rgba(180,79,255,.35); }
.si-btn:disabled:not(.done) { background:rgba(255,255,255,.05); color:rgba(255,255,255,.2); cursor:not-allowed; }

/* ── Booster Inventory Card ── */
.boost-inv-card {
  display:flex; align-items:center; gap:.7rem;
  background:linear-gradient(135deg,rgba(14,14,28,.98),rgba(10,10,20,.98));
  border:1px solid rgba(245,200,66,.2);
  border-radius:12px; padding:.65rem .8rem;
  margin-bottom:.45rem;
  transition:transform .14s, border-color .15s;
  position:relative; overflow:hidden;
}
.boost-inv-card::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,#f5c842,#c9972a);
  border-radius:3px 0 0 3px;
}
.boost-inv-card:active { transform:scale(0.97); }
.boost-inv-thumb {
  width:46px; height:46px; border-radius:10px;
  object-fit:cover; flex-shrink:0;
  border:1px solid rgba(245,200,66,.2);
  box-shadow:0 2px 12px rgba(0,0,0,.5);
}

/* ── Active Booster Banner ── */
.boost-active-banner {
  display:flex; align-items:center; gap:.65rem;
  background:linear-gradient(135deg,rgba(245,200,66,.12),rgba(245,200,66,.06));
  border:1px solid rgba(245,200,66,.3);
  border-radius:12px; padding:.65rem .9rem;
  margin-bottom:.85rem;
  position:relative; overflow:hidden;
  box-shadow:0 0 20px rgba(245,200,66,.08);
}
.boost-active-banner::before {
  content:''; position:absolute; top:-30px; right:-30px;
  width:80px; height:80px; border-radius:50%;
  background:radial-gradient(circle,rgba(245,200,66,.15),transparent 70%);
}

/* ── Section Label ── */
.shop-section-lbl {
  font-size:.58rem; letter-spacing:2.5px; text-transform:uppercase;
  color:rgba(255,255,255,.3); margin:.85rem 0 .5rem;
  display:flex; align-items:center; gap:.5rem;
}
.shop-section-lbl::before {
  content:''; display:block; width:2px; height:10px;
  background:linear-gradient(180deg,var(--gold),rgba(245,200,66,.3));
  border-radius:2px; flex-shrink:0;
}
.shop-section-lbl::after {
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.06),transparent);
}

/* ── Shop Inner scroll ── */
.shop-inner {
  padding:.65rem .7rem;
  overflow-y:auto; flex:1;
  -webkit-overflow-scrolling:touch;
}
.shop-inner::-webkit-scrollbar { width:3px; }
.shop-inner::-webkit-scrollbar-track { background:transparent; }
.shop-inner::-webkit-scrollbar-thumb { background:rgba(245,200,66,.2); border-radius:3px; }


/* ══════════════════════════════════════════════════
   GUILD UI v2 — Clan Command Center
   ══════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════
   GUILDS — g-* components
   ══════════════════════════════════════════════════════════ */
.g-card {
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px; padding:.85rem;
  margin-bottom:.65rem;
}
.g-create-card { border-color:rgba(245,200,66,.18); background:rgba(245,200,66,.04); }
.g-header-card { border-color:rgba(245,200,66,.22); position:relative; overflow:hidden; }
.g-header-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,rgba(245,200,66,.5),transparent);
}
.g-card-header { display:flex; align-items:center; gap:.65rem; margin-bottom:.65rem; }
.g-icon {
  width:36px; height:36px; border-radius:10px; flex-shrink:0;
  background:rgba(245,200,66,.12); border:1px solid rgba(245,200,66,.25);
  display:flex; align-items:center; justify-content:center; font-size:1.1rem;
}
.g-card-title { font-size:.86rem; font-weight:700; color:var(--gold); letter-spacing:.3px; }
.g-card-sub { font-size:.62rem; color:rgba(255,255,255,.35); margin-top:.1rem; }

.g-input {
  width:100%; box-sizing:border-box;
  padding:.55rem .75rem; border-radius:9px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  color:var(--text); font-family:'Rajdhani',sans-serif; font-size:.88rem;
  margin-bottom:.45rem; outline:none; transition:border-color .18s;
}
.g-input:focus { border-color:rgba(245,200,66,.35); background:rgba(245,200,66,.03); }
.g-input::placeholder { color:rgba(255,255,255,.22); }
.g-textarea { resize:none; height:56px; }

.g-btn-gold {
  width:100%; padding:.65rem; border-radius:9px; border:none; cursor:pointer;
  font-family:'Rajdhani',sans-serif; font-weight:800; font-size:.88rem; letter-spacing:.6px;
  background:linear-gradient(135deg,#b8821e,#f0be38,#c9972a);
  color:#0a0a14; box-shadow:0 3px 16px rgba(245,200,66,.3);
  transition:transform .15s, box-shadow .15s;
}
.g-btn-gold:hover { transform:translateY(-1px); box-shadow:0 5px 20px rgba(245,200,66,.4); }
.g-btn-gold:active { transform:scale(.97); }
.g-btn-gold.disabled { background:rgba(255,255,255,.06); color:rgba(255,255,255,.2); box-shadow:none; cursor:not-allowed; }

.g-btn {
  padding:.48rem .75rem; border-radius:8px; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06); color:var(--text);
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:.82rem;
  cursor:pointer; transition:all .15s; white-space:nowrap;
}
.g-btn:hover { background:rgba(255,255,255,.1); }
.g-btn:active { transform:scale(.94); }
.g-btn-primary {
  background:rgba(245,200,66,.15); border-color:rgba(245,200,66,.4); color:var(--gold);
}
.g-btn-primary:hover { background:rgba(245,200,66,.22); }
.g-btn-danger {
  background:rgba(224,48,48,.1); border-color:rgba(224,48,48,.3); color:#e05050;
}
.g-btn-danger:hover { background:rgba(224,48,48,.18); }

.g-section-label {
  font-size:.6rem; letter-spacing:2px; text-transform:uppercase;
  color:rgba(255,255,255,.3); margin:.8rem 0 .45rem; padding-left:.1rem;
  display:flex; align-items:center; gap:.4rem;
}
.g-section-label::after {
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.08),transparent);
}

.g-empty {
  text-align:center; color:rgba(255,255,255,.25); font-size:.8rem;
  padding:2rem 1rem; line-height:1.8;
}

.g-header-row { display:flex; align-items:center; gap:.75rem; margin-bottom:.6rem; }
.g-guild-name { font-weight:700; font-size:.88rem; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.g-guild-name-lg { font-weight:800; font-size:1rem; color:var(--gold); letter-spacing:.3px; }
.g-guild-meta { font-size:.62rem; color:rgba(255,255,255,.38); margin-top:.1rem; }
.g-guild-desc { font-size:.6rem; color:rgba(255,255,255,.22); margin-top:.12rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.g-desc-box {
  font-size:.72rem; color:rgba(255,255,255,.35); line-height:1.5; margin-bottom:.65rem;
  padding:.45rem .6rem; background:rgba(255,255,255,.03); border-radius:8px;
  border:1px solid rgba(255,255,255,.06);
}

.g-emblem {
  width:40px; height:40px; border-radius:10px; flex-shrink:0;
  background:rgba(245,200,66,.1); border:1px solid rgba(245,200,66,.25);
  display:flex; align-items:center; justify-content:center;
  font-size:.78rem; font-weight:800; color:var(--gold); text-align:center;
  line-height:1.2; padding:.15rem;
}
.g-emblem-lg { width:48px; height:48px; font-size:.9rem; }

.g-actions { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.1rem; }

.g-guild-row { display:flex; align-items:center; gap:.6rem; }
.g-btn-join {
  padding:.35rem .65rem; border-radius:8px; flex-shrink:0;
  border:1px solid rgba(245,200,66,.35); background:rgba(245,200,66,.08);
  color:var(--gold); font-family:'Rajdhani',sans-serif; font-weight:700;
  font-size:.78rem; cursor:pointer; transition:all .15s;
}
.g-btn-join:hover { background:rgba(245,200,66,.18); }
.g-btn-join:active { transform:scale(.92); }

.g-members-wrap { display:flex; flex-direction:column; gap:2px; margin-bottom:.65rem; }
.g-member-row {
  display:flex; align-items:center; gap:.6rem;
  padding:.48rem .5rem; border-radius:9px;
  transition:background .15s; cursor:default;
}
.g-member-row:hover { background:rgba(255,255,255,.04); }
.g-friend-row { 
  cursor:pointer; border:1px solid rgba(255,255,255,.07); 
  background:rgba(255,255,255,.03); border-radius:9px; padding:.4rem .5rem;
}
.g-friend-row:hover { border-color:rgba(245,200,66,.25); background:rgba(245,200,66,.05); }
.g-row-active { background:rgba(245,200,66,.12) !important; border-color:rgba(245,200,66,.45) !important; }

.g-avatar {
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center;
  font-size:.82rem; font-weight:700; color:rgba(255,255,255,.7);
}
.g-avatar-lead {
  background:rgba(245,200,66,.18); border-color:rgba(245,200,66,.4);
}
.g-member-name { font-size:.82rem; font-weight:700; color:var(--text); }
.g-rank-badge {
  display:inline-block; font-size:.58rem; padding:.12rem .42rem; border-radius:20px;
  font-weight:700; letter-spacing:.5px; text-transform:uppercase; margin-top:.18rem;
}
.g-rank-badge.leader { background:rgba(245,200,66,.15); color:var(--gold); border:1px solid rgba(245,200,66,.3); }
.g-rank-badge.member { background:rgba(255,255,255,.06); color:rgba(255,255,255,.38); border:1px solid rgba(255,255,255,.1); }
.g-power { font-size:.68rem; color:rgba(255,255,255,.35); letter-spacing:.4px; }
.g-btn-kick {
  padding:.2rem .42rem; border-radius:6px;
  background:rgba(224,48,48,.1); color:#e05050;
  border:1px solid rgba(224,48,48,.25);
  font-family:'Rajdhani',sans-serif; font-size:.62rem; cursor:pointer;
  transition:all .13s;
}
.g-btn-kick:hover { background:rgba(224,48,48,.2); }

.g-invite-row { display:flex; gap:.4rem; margin-bottom:.4rem; }
.g-invite-results { display:flex; flex-direction:column; gap:.3rem; }

.g-trade-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:.1rem; }
.g-close-btn { background:none; border:none; color:rgba(255,255,255,.4); font-size:1rem; cursor:pointer; padding:0 .2rem; }
.g-close-btn:hover { color:rgba(255,255,255,.8); }
.g-trade-card { display:flex; align-items:center; gap:.55rem; padding:.55rem 0; border-bottom:1px solid rgba(255,255,255,.05); }
.g-trade-card:last-child { border-bottom:none; }
.g-trade-img { width:36px; height:36px; border-radius:7px; object-fit:cover; flex-shrink:0; }

.g-chips { display:flex; flex-wrap:wrap; gap:.3rem; margin-bottom:.5rem; }
.g-chip {
  padding:.35rem .7rem; border-radius:8px;
  border:1.5px solid rgba(245,200,66,.3);
  background:rgba(245,200,66,.08); color:var(--gold);
  font-family:'Rajdhani',sans-serif; font-size:.78rem; font-weight:700;
  cursor:pointer; transition:all .15s; letter-spacing:.3px;
}
.g-chip:hover { background:rgba(245,200,66,.16); border-color:rgba(245,200,66,.5); }
.g-chip:active { transform:scale(.92); }
.g-chip-active { border-color:rgba(245,200,66,.8) !important; background:rgba(245,200,66,.24) !important; box-shadow:0 0 10px rgba(245,200,66,.2); }

/* ══════════════════════════════════════════════════════════
   GUILD CHAT — gc-* components
   ══════════════════════════════════════════════════════════ */
.gc-header {
  display:flex; align-items:center; gap:.55rem;
  padding:.6rem .85rem; flex-shrink:0;
  background:rgba(8,8,22,.98); border-bottom:1px solid rgba(255,255,255,.07);
}
.gc-back {
  background:none; border:none; color:rgba(255,255,255,.5);
  font-size:1.5rem; line-height:1; cursor:pointer; padding:0 .2rem;
  transition:color .15s;
}
.gc-back:hover { color:#fff; }
.gc-icon {
  width:34px; height:34px; border-radius:8px; flex-shrink:0;
  background:rgba(245,200,66,.12); border:1px solid rgba(245,200,66,.3);
  display:flex; align-items:center; justify-content:center; font-size:.9rem;
}
.gc-title { font-weight:700; font-size:.9rem; color:var(--text); }
.gc-sub   { font-size:.62rem; color:rgba(255,255,255,.35); margin-top:.08rem; }
.gc-leader-badge {
  font-size:.62rem; color:var(--gold);
  padding:.18rem .48rem; background:rgba(245,200,66,.1);
  border-radius:6px; border:1px solid rgba(245,200,66,.2);
  flex-shrink:0;
}
.gc-msgs {
  flex:1; overflow-y:auto; padding:.65rem .85rem;
  display:flex; flex-direction:column; gap:.45rem;
  scroll-behavior:smooth;
}
.gc-input-row {
  display:flex; gap:.4rem; padding:.5rem .75rem; flex-shrink:0;
  background:rgba(8,8,22,.95); border-top:1px solid rgba(255,255,255,.07);
}
.gc-input {
  flex:1; padding:.52rem .75rem; border-radius:10px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  color:var(--text); font-family:'Rajdhani',sans-serif; font-size:.9rem; outline:none;
  transition:border-color .18s;
}
.gc-input:focus { border-color:rgba(245,200,66,.3); }
.gc-send {
  padding:.5rem .9rem; background:var(--gold); color:#0a0a14;
  border:none; border-radius:10px; font-family:'Rajdhani',sans-serif;
  font-weight:800; font-size:1rem; cursor:pointer; transition:all .15s;
}
.gc-send:hover { background:#f0be38; }
.gc-send:active { transform:scale(.94); }

.gc-msg-wrap { display:flex; flex-direction:column; max-width:82%; }
.gc-mine   { align-self:flex-end; align-items:flex-end; }
.gc-theirs { align-self:flex-start; align-items:flex-start; }
.gc-sender { font-size:.6rem; color:rgba(255,255,255,.38); margin-bottom:.12rem; padding-left:.3rem; }
.gc-bubble {
  padding:.45rem .75rem; font-size:.85rem; color:var(--text);
  word-break:break-word; line-height:1.45;
}
.gc-bubble-mine {
  background:rgba(245,200,66,.16); border:1px solid rgba(245,200,66,.28);
  border-radius:12px 12px 3px 12px;
}
.gc-bubble-theirs {
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.09);
  border-radius:12px 12px 12px 3px;
}
.gc-meta-row { display:flex; align-items:center; gap:.2rem; padding:0 .3rem; margin-top:.1rem; }
.gc-time { font-size:.58rem; color:rgba(255,255,255,.28); }
.gc-mod-btn {
  background:none; border:none; cursor:pointer; font-size:.65rem;
  padding:.05rem .25rem; opacity:.55; transition:opacity .15s;
}
.gc-mod-btn:hover { opacity:1; }
.gc-del-btn { color:#e05050; }

/* ══════════════════════════════════════════════════════════
   GANG BATTLES — gb-* components
   ══════════════════════════════════════════════════════════ */
.gb-guild-row{display:flex;align-items:center;gap:.7rem;padding:.6rem .75rem;border:1px solid var(--border);border-radius:10px;margin-bottom:.4rem;background:var(--surface);cursor:pointer;transition:.15s}
.gb-guild-row:hover{border-color:var(--gold);background:rgba(245,200,66,.06)}
.gb-guild-tag{width:40px;height:40px;background:rgba(245,200,66,.1);border:1px solid rgba(245,200,66,.3);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;color:var(--gold);flex-shrink:0}
.gb-m-title{font-size:1.05rem;font-weight:700;color:var(--gold);margin-bottom:.3rem}
.gb-m-sub{font-size:.7rem;color:var(--text-dim);margin-bottom:.75rem}
#gb-result-overlay{position:fixed;inset:0;z-index:3000;background:rgba(0,0,0,0.88);display:flex;align-items:center;justify-content:center;font-family:Rajdhani,sans-serif;animation:gbrIn .4s ease}
@keyframes gbrIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
.gbr-box{background:var(--surface);border-radius:20px;padding:1.8rem 1.4rem;text-align:center;max-width:320px;width:92%}
.gbr-icon{font-size:3.5rem;margin-bottom:.4rem}
.gbr-title{font-family:'Cinzel Decorative',serif;font-size:1.2rem;letter-spacing:2px;margin-bottom:.2rem}
.gbr-vs{font-size:.78rem;color:var(--text-dim);margin-bottom:.75rem}
.gbr-score{font-family:'Cinzel Decorative',serif;font-size:2.4rem;color:#f5c842;margin:.3rem 0}
.gbr-lbl{font-size:.6rem;letter-spacing:2px;color:var(--text-dim);text-transform:uppercase}
.gbr-rounds{margin:.75rem 0;max-height:130px;overflow-y:auto}
.gbr-round{display:flex;align-items:center;gap:.4rem;padding:.3rem .5rem;border-radius:6px;margin-bottom:.2rem;font-size:.75rem;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.gbr-btn{margin-top:1rem;width:100%;padding:.65rem;border-radius:10px;font-family:Rajdhani,sans-serif;font-size:.92rem;font-weight:700;cursor:pointer;letter-spacing:1px}
.gb-page{padding:.85rem;font-family:'Rajdhani',sans-serif;}
.gb-rank-header{display:flex;align-items:center;gap:1rem;background:linear-gradient(135deg,rgba(19,19,42,.98),rgba(26,26,53,.95));border:1px solid rgba(245,200,66,.25);border-radius:16px;padding:1rem 1.15rem;margin-bottom:1rem;box-shadow:0 4px 20px rgba(0,0,0,.3);}
.gb-rank-icon{width:54px;height:54px;background:rgba(245,200,66,.1);border:2px solid rgba(245,200,66,.35);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.8rem;flex-shrink:0;}
.gb-rank-title{font-size:1.05rem;font-weight:700;color:var(--text);line-height:1.2;}
.gb-rank-sub{font-size:.78rem;color:var(--text-dim);margin-top:.2rem;}
.gb-challenge-btn{background:linear-gradient(135deg,#c02020,#e03030);color:#fff;border:none;border-radius:12px;padding:.7rem 1.1rem;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.95rem;cursor:pointer;flex-shrink:0;letter-spacing:.5px;box-shadow:0 4px 16px rgba(224,48,48,.4);transition:transform .15s,box-shadow .2s;}
.gb-challenge-btn:hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(224,48,48,.55);}
.gb-section-lbl{font-size:.65rem;letter-spacing:2.5px;color:var(--text-dim);text-transform:uppercase;margin-bottom:.6rem;display:flex;align-items:center;gap:.5rem;}
.gb-section-lbl::after{content:'';flex:1;height:1px;background:var(--border);}
.gb-battle-card{background:linear-gradient(135deg,rgba(19,19,42,.98),rgba(26,26,53,.95));border:1px solid var(--border);border-radius:16px;overflow:hidden;margin-bottom:.85rem;box-shadow:0 3px 18px rgba(0,0,0,.3);}
.gb-battle-head{padding:.9rem 1rem .75rem;border-bottom:1px solid rgba(255,255,255,.05);}
.gb-battle-vs{font-size:1rem;font-weight:700;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:.35rem;}
.gb-atk-name{color:#ff7070;}
.gb-def-name{color:#7090ff;}
.gb-vs-sep{color:rgba(255,255,255,.3);font-size:.9rem;}
.gb-status-pill{display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .65rem;border-radius:20px;font-size:.72rem;font-weight:700;letter-spacing:.5px;}
.gb-pill-wait{background:rgba(245,165,66,.12);color:#f5a542;border:1px solid rgba(245,165,66,.35);}
.gb-pill-rally{background:rgba(48,192,96,.12);color:#40d070;border:1px solid rgba(48,192,96,.35);animation:gbPillPulse 2s ease infinite;}
.gb-pill-fight{background:rgba(224,48,48,.12);color:#ff7060;border:1px solid rgba(224,48,48,.35);animation:gbPillPulse 1.5s ease infinite;}
@keyframes gbPillPulse{0%,100%{box-shadow:none}50%{box-shadow:0 0 10px currentColor;opacity:.8}}
.gb-battle-body{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;padding:.75rem 1rem;}
.gb-side-box{border-radius:10px;padding:.65rem .75rem;}
.gb-side-atk{background:rgba(224,80,80,.07);border:1px solid rgba(224,80,80,.2);}
.gb-side-def{background:rgba(80,120,220,.07);border:1px solid rgba(80,120,220,.2);}
.gb-side-title{font-size:.72rem;font-weight:700;margin-bottom:.4rem;display:flex;align-items:center;justify-content:space-between;}
.gb-fighter-row{display:flex;align-items:center;gap:.4rem;padding:.2rem 0;border-bottom:1px solid rgba(255,255,255,.04);}
.gb-fighter-row:last-child{border-bottom:none;}
.gb-fighter-rank{font-size:.9rem;}
.gb-fighter-name{font-size:.78rem;color:var(--text);flex:1;}
.gb-fighter-pwr{font-size:.65rem;color:var(--gold);}
.gb-battle-btns{padding:.6rem 1rem .85rem;display:flex;gap:.55rem;flex-wrap:wrap;}
.gb-btn-accept{flex:1;padding:.7rem 1rem;background:linear-gradient(135deg,rgba(48,192,96,.18),rgba(48,192,96,.1));color:#40d070;border:1.5px solid rgba(48,192,96,.45);border-radius:11px;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.9rem;cursor:pointer;transition:transform .15s,box-shadow .2s;}
.gb-btn-accept:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(48,192,96,.25);}
.gb-btn-decline{padding:.7rem .9rem;background:rgba(224,48,48,.1);color:#e05050;border:1.5px solid rgba(224,48,48,.3);border-radius:11px;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.88rem;cursor:pointer;}
.gb-btn-join{flex:1;padding:.7rem 1rem;background:linear-gradient(135deg,rgba(245,200,66,.18),rgba(245,200,66,.08));color:var(--gold);border:1.5px solid rgba(245,200,66,.45);border-radius:11px;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.9rem;cursor:pointer;transition:transform .15s,box-shadow .2s;}
.gb-btn-join:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(245,200,66,.2);}
.gb-btn-start{padding:.7rem .9rem;background:rgba(224,48,48,.12);color:#ff6050;border:1.5px solid rgba(224,48,48,.35);border-radius:11px;font-family:'Rajdhani',sans-serif;font-weight:700;font-size:.88rem;cursor:pointer;}
.gb-in-badge{flex:1;padding:.7rem;background:rgba(48,192,96,.07);color:#40d070;border:1px solid rgba(48,192,96,.2);border-radius:11px;font-family:'Rajdhani',sans-serif;font-size:.85rem;text-align:center;}
.gb-hist-card{display:flex;align-items:center;gap:.75rem;padding:.75rem .9rem;background:var(--surface);border-radius:12px;margin-bottom:.5rem;border:1px solid var(--border);transition:border-color .2s;}
.gb-hist-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.25rem;flex-shrink:0;}
.gb-hist-won{background:rgba(48,192,96,.12);border:1px solid rgba(48,192,96,.25);}
.gb-hist-lost{background:rgba(224,48,48,.1);border:1px solid rgba(224,48,48,.2);}
.gb-hist-title{font-size:.88rem;font-weight:700;}
.gb-hist-sub{font-size:.72rem;color:var(--text-dim);margin-top:.1rem;}
.gb-hist-score{font-family:'Cinzel Decorative',serif;font-size:1rem;color:var(--gold);margin-left:auto;padding-left:.5rem;}
.gb-empty{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:2.5rem 1rem;text-align:center;color:var(--text-dim);margin-bottom:1rem;}
.gb-empty-icon{font-size:2.8rem;margin-bottom:.6rem;opacity:.6;}
.gb-empty-text{font-size:.9rem;}
.gb-empty-hint{font-size:.78rem;margin-top:.3rem;color:var(--text-dim);}
.gb-ranks-grid{display:grid;grid-template-columns:1fr 1fr;gap:.45rem;}
.gb-rank-pill{display:flex;align-items:center;gap:.5rem;padding:.5rem .7rem;border-radius:10px;border:1px solid var(--border);background:rgba(255,255,255,.02);}
.gb-rank-pill.active{border-color:rgba(245,200,66,.45);background:rgba(245,200,66,.06);}
.gb-rank-pill.challenge{border-color:rgba(245,200,66,.25);}


/* ══════════════════════════════════════════════════════════
   TRADE TAB — trade-* components (boosters.js)
   ══════════════════════════════════════════════════════════ */
.trade-section-label {
  font-size:.58rem; letter-spacing:2px; text-transform:uppercase;
  color:rgba(255,255,255,.3); margin:.75rem 0 .4rem;
  display:flex; align-items:center; gap:.4rem;
}
.trade-section-label::after {
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.07),transparent);
}
.trade-incoming-card {
  display:flex; align-items:center; gap:.55rem;
  background:rgba(245,200,66,.06); border:1px solid rgba(245,200,66,.2);
  border-radius:11px; padding:.6rem .7rem; margin-bottom:.4rem;
}
.trade-boost-chip {
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.35rem .65rem; border-radius:8px; cursor:pointer;
  border:1.5px solid rgba(245,200,66,.3); background:rgba(245,200,66,.08);
  color:var(--gold); font-family:'Rajdhani',sans-serif;
  font-size:.78rem; font-weight:700; transition:all .15s; letter-spacing:.3px;
}
.trade-boost-chip:hover { background:rgba(245,200,66,.16); border-color:rgba(245,200,66,.5); }
.trade-boost-chip:active { transform:scale(.93); }
.trade-boost-chip.selected {
  background:rgba(245,200,66,.22); border-color:rgba(245,200,66,.7);
  box-shadow:0 0 10px rgba(245,200,66,.2);
}
.trade-friend-row {
  display:flex; align-items:center; gap:.55rem;
  padding:.45rem .6rem; border-radius:9px;
  border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.03);
  cursor:pointer; transition:all .15s; margin-bottom:.3rem;
}
.trade-friend-row:hover { border-color:rgba(245,200,66,.25); background:rgba(245,200,66,.05); }
.trade-friend-row.selected { border-color:rgba(245,200,66,.5); background:rgba(245,200,66,.12); }
.trade-send-btn {
  width:100%; padding:.65rem; border-radius:10px; border:none; cursor:pointer;
  font-family:'Rajdhani',sans-serif; font-weight:800; font-size:.9rem; letter-spacing:.6px;
  background:linear-gradient(135deg,#b8821e,#f0be38,#c9972a);
  color:#0a0a14; box-shadow:0 3px 16px rgba(245,200,66,.3);
  transition:transform .15s, box-shadow .15s; margin-top:.6rem;
}
.trade-send-btn:hover { transform:translateY(-1px); box-shadow:0 5px 20px rgba(245,200,66,.4); }
.trade-send-btn:active { transform:scale(.97); }

/* ══════════════════════════════════════════════════════════
   SETTINGS TAB
   ══════════════════════════════════════════════════════════ */
.settings-wrap { padding:.85rem; overflow-y:auto; }
.settings-section {
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:.85rem; margin-bottom:.7rem;
}
.settings-section-title {
  font-size:.6rem; letter-spacing:2.5px; text-transform:uppercase;
  color:rgba(255,255,255,.3); margin-bottom:.75rem;
  display:flex; align-items:center; gap:.4rem;
}
.settings-section-title::after {
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,.08),transparent);
}

/* Theme picker */
.theme-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
.theme-btn {
  display:flex; flex-direction:column; align-items:center; gap:.35rem;
  padding:.6rem .3rem; border-radius:11px; cursor:pointer;
  border:2px solid var(--border); background:var(--surface2);
  transition:all .18s; font-family:'Rajdhani',sans-serif; font-size:.72rem;
  color:var(--text-dim); font-weight:700;
}
.theme-btn:hover { border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.08); }
.theme-btn:active { transform:scale(.94); }
.theme-btn.active {
  border-color:var(--gold); background:rgba(255,255,255,.08);
  color:var(--gold); box-shadow:0 0 14px var(--border);
}
.theme-dot {
  width:32px; height:32px; border-radius:50%;
  border:2px solid rgba(255,255,255,.2);
}

/* Toggle row */
.settings-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:.55rem 0; border-bottom:1px solid rgba(255,255,255,.05);
}
.settings-row:last-child { border-bottom:none; }
.settings-row-label { font-size:.85rem; color:var(--text); font-weight:700; }
.settings-row-sub { font-size:.65rem; color:rgba(255,255,255,.35); margin-top:.06rem; }

/* Toggle switch */
.stg-toggle {
  position:relative; width:44px; height:24px; flex-shrink:0;
}
.stg-toggle input { opacity:0; width:0; height:0; position:absolute; }
.stg-toggle-track {
  position:absolute; inset:0; border-radius:12px; cursor:pointer;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.15);
  transition:all .2s;
}
.stg-toggle input:checked + .stg-toggle-track {
  background:var(--gold); border-color:var(--gold);
}
.stg-toggle-track::after {
  content:''; position:absolute; left:3px; top:3px;
  width:16px; height:16px; border-radius:50%;
  background:#fff; transition:transform .2s;
  box-shadow:0 1px 4px rgba(0,0,0,.3);
}
.stg-toggle input:checked + .stg-toggle-track::after {
  transform:translateX(20px);
}

@keyframes pop{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.2)}100%{transform:scale(1);opacity:1}}

/* Drunk effect inner wrapper */
#drunk-inner {
  width: 100%;
  height: 100%;
  position: relative;
  will-change: transform;
  transition: transform 0.05s linear;
}
#app-screen {
  overflow: hidden; /* clip the sway so it doesn't show outside screen */
}