: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; }
*:focus { outline: 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; -ms-touch-action: none; touch-action: pan-y; }

/* 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); }

/* Loading screen */
.loading-screen {
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(rgba(10,10,15,.6), rgba(10,10,15,.85)),
    url('/assets/decor/Cover.png') center/cover no-repeat,
    radial-gradient(ellipse at center, #1a0a2e 0%, #0a0a0f 70%);
  transition: opacity .4s ease;
}
.loading-screen.fade-out { opacity: 0; pointer-events: none; }
.loading-box { text-align: center; padding: 0 20px; }
.loading-dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.loading-dots span {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold); opacity: .2;
  animation: dot-pulse 1.2s ease-in-out infinite;
}
.loading-dots span:nth-child(2) { animation-delay: .2s; }
.loading-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes dot-pulse {
  0%, 100% { opacity: .2; transform: scale(.8); }
  50%       { opacity: 1;  transform: scale(1.2); }
}

/* Auth */
.auth-screen {
  /* Pin to viewport so the cover background doesn't re-compute when the form
     shrinks/grows between Login/Register tabs. Content scrolls inside. */
  position: fixed; inset: 0;
  display:flex; align-items:center; justify-content:center;
  background:
    linear-gradient(rgba(10,10,15,.7), rgba(10,10,15,.9)),
    url('/assets/decor/Cover.png') center/cover no-repeat,
    radial-gradient(ellipse at center, #1a0a2e 0%, #0a0a0f 70%);
  padding: 20px;
  overflow-y: auto;
}
.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; }
.game-icon {
  display:block;
  width:140px; height:140px;
  margin: 0 auto 14px;
  object-fit: contain;
  border-radius: 22px;
  filter: drop-shadow(0 0 18px rgba(201,162,39,.45));
}
/* Developer credit: bottom-right on wide screens, bottom-center on narrow ones */
.dev-credit {
  position: absolute;
  bottom: 24px; right: 32px;
  display: flex; align-items: center; gap: 10px;
  color: var(--text-dim); font-size: .85rem; letter-spacing: 1px;
  opacity: .85;
  pointer-events: none;
}
.dev-credit img {
  height: 115px; width: auto; object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(255,255,255,.25));
}
@media (min-width:481px) and (max-width:800px) {
  .dev-credit {
    bottom: 14px; right: auto;
    left: 50%; transform: translateX(-50%);
    gap: 8px;
  }
  .dev-credit img { height: 94px; }
  /* Reserve space at the bottom so the auth/loading box doesn't overlap the logo */
  .auth-screen, .loading-screen { padding-bottom: 126px; }
  /* Compact auth box on tablets */
  .auth-box  { padding:22px 26px; }
  .auth-box .game-icon { width:110px; height:110px; margin-bottom:10px; border-radius:18px; }
  .auth-box .game-subtitle { margin-bottom:14px; font-size:.9rem; }
  .auth-box .auth-tabs { margin-bottom:14px; }
  .auth-box .input-field { padding:10px 12px; margin-bottom:9px; }
  .auth-box .btn-primary { padding:11px; }
}
@media (max-width:480px) {
  .game-icon { width:96px; height:96px; margin-bottom: 8px; border-radius: 16px; }
  .auth-box  { padding:18px 22px; }
  /* Tighter form on tiny screens so the logo at the bottom isn't squeezed */
  .auth-box .input-field { padding:9px 12px; margin-bottom:8px; }
  .auth-box .btn-primary { padding:11px; }
  .auth-box .game-subtitle { margin-bottom:14px; font-size:.85rem; }
  .auth-box .auth-tabs { margin-bottom:14px; }
  .dev-credit {
    bottom: 8px; right: auto;
    left: 50%; transform: translateX(-50%);
    gap: 6px;
  }
  .dev-credit img { height: 92px; }
  .auth-screen, .loading-screen { padding-bottom: 116px; }
}
.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; height:100dvh; 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; }
.ach-cat-badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; background:var(--red-light); color:#fff; font-size:.7rem; font-weight:700; border-radius:9px; box-shadow:0 0 6px rgba(192,57,43,.55); }

/* Guild profile modal: pet/info rows */
.gp-info-rows .member-row { font-size:.92rem; }
.gp-info-rows .member-row:last-child { border-bottom:1px solid var(--border); }
.gp-pet-row { gap:8px; }
.info-btn { background:none; border:none; cursor:pointer; font-size:1.417rem; 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; }
}

/* ── Game-themed toggle switch (used in Settings, etc.) ─────────────── */
.toggle { position:relative; display:inline-block; width:46px; height:24px; cursor:pointer; flex-shrink:0; }
.toggle input { position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.toggle span {
  position:absolute; inset:0;
  background:var(--bg-dark);
  border:1px solid var(--border);
  border-radius:24px;
  transition:background .18s, border-color .18s;
}
.toggle span::before {
  content:''; position:absolute;
  width:18px; height:18px;
  left:2px; top:2px;
  background:var(--text-dim);
  border-radius:50%;
  transition:transform .18s, background .18s;
}
.toggle input:checked + span {
  background:var(--border-gold);
  border-color:var(--gold);
}
.toggle input:checked + span::before {
  transform:translateX(22px);
  background:var(--gold);
}
.toggle input:focus-visible + span { box-shadow:0 0 0 2px rgba(201,162,39,.4); }

/* ── Game-themed range slider (volume, etc.) ────────────────────────── */
input[type="range"] {
  -webkit-appearance:none;
  appearance:none;
  height:6px;
  background:var(--bg-dark);
  border:1px solid var(--border-gold);
  border-radius:4px;
  outline:none;
  cursor:pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height:6px; background:transparent; border-radius:4px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance:none; appearance:none;
  width:16px; height:16px;
  margin-top:-6px;
  border-radius:50%;
  background:var(--gold);
  border:1px solid var(--border-gold);
  box-shadow:0 0 6px rgba(201,162,39,.5);
  cursor:pointer;
  transition:transform .12s;
}
input[type="range"]::-webkit-slider-thumb:hover { transform:scale(1.1); }
input[type="range"]::-moz-range-track {
  height:6px; background:transparent; border-radius:4px;
}
input[type="range"]::-moz-range-thumb {
  width:16px; height:16px;
  border-radius:50%;
  background:var(--gold);
  border:1px solid var(--border-gold);
  box-shadow:0 0 6px rgba(201,162,39,.5);
  cursor:pointer;
}

/* Phone: shrink player-bar so 3-digit HP/atk/def fit without clipping */
@media (max-width:600px) {
  .player-bar { padding:4px 8px; }
  .pb-top { gap:3px; column-gap:4px; }
  .pb-stat { font-size:.72rem; }
  .pb-currency { font-size:.72rem; }
  .pb-plus { font-size:.65rem; padding:0 3px; }
}

@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; }
}