:root {
  --bg-dark:    #0a0a0f;
  --bg-panel:   #12121a;
  --bg-card:    #1a1a26;
  --gold:       #c9a227;
  --gold-light: #e8c84a;
  --red:        #8b1a1a;
  --red-light:  #c0392b;
  --green:      #1a6b3c;
  --green-light:#27ae60;
  --blue:       #1a3a6b;
  --blue-light: #3498db;
  --purple:     #4a1a6b;
  --text:       #d4c5a9;
  --text-dim:   #7a6e5e;
  --border:     #2a2a3a;
  --border-gold:#3a2a0a;
  --font-title: 'Cinzel', serif;
  --font-body:  'Crimson Text', serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-user-select: none; user-select: none; }
input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; }
html, body { height: 100%; background: var(--bg-dark); color: var(--text); font-family: var(--font-body); font-size: 16px; overflow: hidden; }

/* Scrollbar */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #4a4a60; border-radius: 2px; }

/* Nav scrollbar — почти невидимый */
.main-nav::-webkit-scrollbar { height: 2px; }
.main-nav::-webkit-scrollbar-thumb { background: var(--border); }

/* Auth */
.auth-screen { display:flex; align-items:center; justify-content:center; min-height:100vh; background: radial-gradient(ellipse at center, #1a0a2e 0%, #0a0a0f 70%); }
.auth-box { background: var(--bg-panel); border: 1px solid var(--border-gold); border-radius: 8px; padding: 40px; width: 100%; max-width: 480px; box-shadow: 0 0 40px rgba(201,162,39,0.15); }
.game-title { font-family: var(--font-title); font-size: 2.5rem; color: var(--gold); text-align: center; letter-spacing: 6px; text-shadow: 0 0 20px rgba(201,162,39,0.5); margin-bottom: 6px; }
.game-subtitle { text-align:center; color: var(--text-dim); font-style:italic; margin-bottom: 24px; }
.auth-tabs { display:flex; gap:8px; margin-bottom:20px; }
.tab-btn { flex:1; padding:10px; background:var(--bg-card); border:1px solid var(--border); color:var(--text-dim); font-family:var(--font-body); font-size:1rem; cursor:pointer; border-radius:4px; transition:.2s; }
.tab-btn.active { background:var(--border-gold); border-color:var(--gold); color:var(--gold); }
.input-field { width:100%; padding:12px 14px; background:var(--bg-dark); border:1px solid var(--border); border-radius:4px; color:var(--text); font-family:var(--font-body); font-size:1rem; margin-bottom:12px; transition:.2s; }
.input-field:focus { outline:none; border-color:var(--gold); box-shadow:0 0 8px rgba(201,162,39,0.2); }
.btn-primary { width:100%; padding:14px; background:linear-gradient(135deg,#8b6914,#c9a227); border:none; border-radius:4px; color:#0a0a0f; font-family:var(--font-title); font-size:1rem; font-weight:700; letter-spacing:2px; cursor:pointer; transition:.2s; margin-top:8px; }
.btn-primary:hover { background:linear-gradient(135deg,#c9a227,#e8c84a); transform:translateY(-1px); box-shadow:0 4px 15px rgba(201,162,39,0.3); }
.error-msg { color:var(--red-light); text-align:center; padding:10px; margin-top:10px; border:1px solid var(--red); border-radius:4px; background:rgba(139,26,26,0.2); }
.label { color:var(--text-dim); font-size:.9rem; margin-bottom:10px; }
.class-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:16px; }
.class-card { display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 8px; background:var(--bg-dark); border:1px solid var(--border); border-radius:6px; cursor:pointer; transition:.2s; }
.class-card:hover, .class-card.active { border-color:var(--gold); background:var(--border-gold); }
.class-icon { font-size:1.5rem; }
.class-name { font-family:var(--font-title); font-size:.85rem; color:var(--gold); }
.class-desc { font-size:.75rem; color:var(--text-dim); }

/* Game layout */
.game-screen { display:flex; flex-direction:column; height:100vh; overflow:hidden; }
.player-bar { background:var(--bg-panel); border-bottom:1px solid var(--border-gold); padding:5px 10px; display:flex; flex-direction:column; gap:3px; flex-shrink:0; overflow:hidden; }
.pb-top { display:flex; align-items:center; gap:5px; flex-wrap:wrap; min-width:0; }
.pb-bot { display:flex; align-items:center; gap:6px; min-width:0; }
.pb-level { color:var(--text-dim); font-size:.78rem; white-space:nowrap; flex-shrink:0; }
.pb-stat { font-size:.78rem; white-space:nowrap; color:var(--text-dim); }
.pb-energy { color:var(--gold); }
.pb-energy-cd { font-size:.68rem; color:var(--text-dim); }
.pb-currency { font-size:.82rem; display:inline-flex; align-items:center; gap:2px; white-space:nowrap; }
.pb-currency-first { margin-left:auto; }
.pb-plus { background:transparent; border:1px solid var(--border-gold); color:var(--gold); border-radius:3px; padding:0 4px; font-size:.7rem; cursor:pointer; line-height:1.5; transition:background .15s; flex-shrink:0; }
.pb-plus:hover { background:rgba(201,162,39,.15); }
.pb-xp-bar { display:flex; align-items:center; gap:5px; flex:1; min-width:0; }
.pb-xp-track { flex:1; min-width:40px; height:7px; }
.pb-bar { display:flex; align-items:center; gap:4px; }
.pb-bar-label { font-size:.7rem; color:var(--text-dim); }
.pb-bar-val { font-size:.68rem; color:var(--text-dim); white-space:nowrap; flex-shrink:0; }
.bar-track { width:clamp(50px,15vw,110px); height:7px; background:var(--bg-dark); border-radius:4px; overflow:hidden; border:1px solid var(--border); flex-shrink:0; }
.pb-xp-track { width:auto; flex-shrink:1; }
.bar-fill { height:100%; border-radius:4px; transition:.5s; }
.bar-fill.hp { background:linear-gradient(90deg,#6b1a1a,#c0392b); }
.bar-fill.mana { background:linear-gradient(90deg,#1a3a8b,#3498db); }
.bar-fill.xp { background:linear-gradient(90deg,#4a6b1a,#27ae60); }
.bar-fill.energy { background:linear-gradient(90deg,#7a5a00,#f0b429); }
.pb-gold { color:var(--gold); font-size:.9rem; }
.pb-silver { color:#c0c0c0; font-size:.9rem; }
.pb-gold-premium { color:#f0b429; font-size:.9rem; }
.server-status { display:none; }

/* Bottom navigation */
.bottom-nav { background:var(--bg-panel); border-top:1px solid var(--border-gold); padding:0; flex-shrink:0; display:flex; align-items:stretch; }
.nav-btn { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; padding:6px 4px; background:none; border:none; border-radius:0; color:var(--text-dim); font-family:var(--font-body); font-size:.82rem; cursor:pointer; transition:background .15s, color .15s; position:relative; }
.nav-btn + .nav-btn { border-left:1px solid rgba(255,255,255,0.1); }
.nav-btn span { font-size:.65rem; font-family:var(--font-title); letter-spacing:.5px; }
.nav-btn:hover { color:var(--gold); background:rgba(201,162,39,0.06); }
.nav-btn.active { color:var(--gold); background:var(--border-gold); border-radius:0; }
.nav-badge { display:inline-block; background:var(--red-light); color:#fff; font-size:.6rem; font-weight:700; border-radius:50%; width:13px; height:13px; line-height:13px; text-align:center; margin-left:3px; vertical-align:middle; }
.info-btn { background:none; border:none; cursor:pointer; font-size:.85rem; opacity:.55; padding:0 0 0 6px; line-height:1; vertical-align:middle; transition:opacity .15s; }
.info-btn:hover { opacity:1; }

/* Content */
.app-content { flex:1; min-height:0; overflow-y:auto; padding:12px 16px; max-width:960px; margin:0 auto; width:100%; display:flex; flex-direction:column; }

/* Back button (injected into .screen-title) */
.back-btn { background:none; border:none; cursor:pointer; color:var(--text-dim); font-size:1.1rem; padding:0 8px 0 0; line-height:1; transition:color .15s; vertical-align:middle; }
.back-btn:hover { color:var(--gold); }

/* Common UI */
.screen-title { font-family:var(--font-title); font-size:1.4rem; color:var(--gold); margin-bottom:10px; padding-bottom:6px; border-bottom:1px solid var(--border-gold); letter-spacing:2px; flex-shrink:0; }
.panel { background:var(--bg-panel); border:1px solid var(--border); border-radius:6px; padding:12px; margin-bottom:10px; }
.panel-title { font-family:var(--font-title); color:var(--gold); font-size:1rem; margin-bottom:12px; letter-spacing:1px; }
.btn { padding:8px 16px; border-radius:4px; border:1px solid; cursor:pointer; font-family:var(--font-body); font-size:.95rem; transition:.2s; }
.btn-gold { background:var(--border-gold); border-color:var(--gold); color:var(--gold); }
.btn-gold:hover { background:var(--gold); color:var(--bg-dark); }
.btn-red { background:rgba(139,26,26,0.3); border-color:var(--red-light); color:var(--red-light); }
.btn-red:hover { background:var(--red-light); color:#fff; }
.btn-green { background:rgba(26,107,60,0.3); border-color:var(--green-light); color:var(--green-light); }
.btn-green:hover { background:var(--green-light); color:#fff; }
.btn-blue { background:rgba(26,58,107,0.3); border-color:var(--blue-light); color:var(--blue-light); }
.btn-blue:hover { background:var(--blue-light); color:#fff; }
.btn:disabled { opacity:.4; cursor:not-allowed; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.stat-row { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px solid var(--border); }
.stat-row:last-child { border-bottom:none; }
.stat-label { color:var(--text-dim); }
.stat-value { color:var(--text); font-weight:600; }
.hidden { display:none !important; }
.text-gold { color:var(--gold); }
.text-red { color:var(--red-light); }
.text-green { color:var(--green-light); }
.text-dim { color:var(--text-dim); }
.badge { display:inline-block; padding:2px 8px; border-radius:3px; font-size:.75rem; }
.badge-gold { background:var(--border-gold); color:var(--gold); border:1px solid var(--gold); }
.badge-green { background:rgba(26,107,60,0.3); color:var(--green-light); }
.badge-red { background:rgba(139,26,26,0.3); color:var(--red-light); }

/* Notification */
.notification { position:fixed; top:20px; right:20px; background:var(--bg-panel); border:1px solid var(--gold); border-radius:6px; padding:12px 20px; color:var(--text); font-family:var(--font-body); z-index:9999; max-width:300px; box-shadow:0 4px 20px rgba(0,0,0,0.5); animation: slideIn .3s ease; }
@keyframes slideIn { from { transform: translateX(120%); opacity:0; } to { transform: translateX(0); opacity:1; } }
@keyframes fadeIn  { from { opacity:0; } to { opacity:1; } }

/* Combat log */
.combat-log { background:var(--bg-dark); border:1px solid var(--border); border-radius:4px; padding:12px; max-height:300px; overflow-y:auto; font-size:.9rem; line-height:1.8; }
.log-crit { color:var(--gold); font-weight:bold; }
.log-win { color:var(--green-light); }
.log-lose { color:var(--red-light); }

/* Table */
.table { width:100%; border-collapse:collapse; }
.table th { font-family:var(--font-title); color:var(--gold); font-size:.8rem; letter-spacing:1px; text-align:left; padding:8px 12px; border-bottom:1px solid var(--border-gold); }
.table td { padding:8px 12px; border-bottom:1px solid var(--border); color:var(--text); }
.table tr:hover td { background:var(--bg-card); }

@media (max-width: 600px) {
  .nav-btn { padding:4px 6px; min-width:44px; }
  .nav-btn span { font-size:.58rem; }
  .grid-2, .grid-3 { grid-template-columns:1fr; }
  .app-content { padding:8px 10px; }
}

@media (min-width: 601px) {
  .pb-stat { font-size:1.2rem; }
  .pb-currency { font-size:1.2rem; }
  .pb-level { font-size:1rem; }
  .pb-bar-val { font-size:.82rem; }
  .pb-plus { font-size:1rem; padding:0 6px; }
  .pb-xp-track { height:9px; }
}

@media (max-width: 360px) {
  .player-bar { padding:4px 7px; }
  .pb-stat { font-size:.72rem; }
  .pb-currency { font-size:.75rem; }
  .pb-level { font-size:.72rem; }
}