/* =========================================================
   AZERTICAN RPG — Immersive Dark Theme
   ========================================================= */

:root {
  --azr-bg:       #0d0d0f;
  --azr-surface:  #13131a;
  --azr-surface2: #0f0f18;
  --azr-border:   #2a2a38;
  --azr-border2:  #1e1e2a;
  --azr-accent:   #c8963f;
  --azr-accent2:  #7b5ea7;
  --azr-danger:   #a83232;
  --azr-success:  #2e7d32;
  --azr-text:     #c9c3b8;
  --azr-muted:    #6b6460;
  --azr-hp:       #a83232;
  --azr-luc:      #7b5ea7;
  --azr-mem:      #3a7dbf;
  --azr-xp:       #2e7d32;
  --azr-enemy:    #7a1c1c;
  --azr-radius:   8px;
  --azr-font:     'Segoe UI', system-ui, -apple-system, sans-serif;
  --azr-shadow:   0 4px 32px rgba(0,0,0,.6), 0 1px 0 rgba(200,150,63,.08);
}

/* ── Reset inside panels ────────────────────────────────── */
.azr-panel, .azr-panel * {
  box-sizing: border-box;
}

/* ── Outer wrapper ──────────────────────────────────────── */
.azr-panel {
  background:    var(--azr-surface) !important;
  border:        1px solid var(--azr-border) !important;
  border-top:    2px solid var(--azr-accent) !important;
  border-radius: var(--azr-radius) !important;
  padding:       32px 28px !important;
  color:         var(--azr-text) !important;
  font-family:   var(--azr-font) !important;
  font-size:     15px !important;
  line-height:   1.6 !important;
  max-width:     920px !important;
  margin:        36px auto 32px !important;
  box-shadow:    var(--azr-shadow) !important;
}

/* ── Typography ─────────────────────────────────────────── */
.azr-panel h1, .azr-panel h2, .azr-panel h3,
.azr-panel h4, .azr-panel h5, .azr-panel h6 {
  font-family: var(--azr-font) !important;
  color:       var(--azr-accent) !important;
  margin:      0 !important;
}

.azr-title {
  font-size:      1.4rem !important;
  font-weight:    700 !important;
  color:          var(--azr-accent) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  margin-bottom:  6px !important;
}

.azr-desc {
  color:         var(--azr-muted) !important;
  margin-bottom: 20px !important;
  font-style:    italic !important;
  font-size:     0.9rem !important;
}

.azr-notice {
  border-left:   3px solid var(--azr-accent);
  padding:       10px 14px;
  background:    rgba(200,150,63,.07);
  border-radius: 0 var(--azr-radius) var(--azr-radius) 0;
  color:         var(--azr-text);
  margin-bottom: 24px;
  font-style:    italic;
}

/* ── Alert boxes ────────────────────────────────────────── */
.azr-box {
  padding:       12px 16px;
  border-radius: var(--azr-radius);
  margin-bottom: 12px;
  font-size:     0.9rem;
}
.azr-warning { background: #1e1200; border: 1px solid #7a4400; color: #e0a040; }
.azr-info    { background: #0a1520; border: 1px solid #1a4a6e; color: #7ab8e0; }
.azr-success-box { background: #0a1a0a; border: 1px solid #2e7d32; color: #66bb6a; }

.azr-sep { color: var(--azr-muted); margin: 0 6px; }

/* ── Buttons ────────────────────────────────────────────── */
.azr-btn {
  display:        inline-flex !important;
  align-items:    center !important;
  gap:            6px !important;
  padding:        9px 20px !important;
  border:         none !important;
  border-radius:  var(--azr-radius) !important;
  cursor:         pointer !important;
  font-family:    var(--azr-font) !important;
  font-size:      0.82rem !important;
  font-weight:    700 !important;
  line-height:    1 !important;
  transition:     filter .15s, transform .1s !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  text-decoration: none !important;
  white-space:    nowrap !important;
}
.azr-btn:hover:not(:disabled)  { filter: brightness(1.15); transform: translateY(-1px); }
.azr-btn:active:not(:disabled) { transform: translateY(0); }
.azr-btn:disabled { opacity: .38 !important; cursor: default !important; }

.azr-btn-primary   { background: var(--azr-accent) !important;  color: #0f0a00 !important; }
.azr-btn-secondary { background: var(--azr-border) !important;  color: var(--azr-text) !important; }
.azr-btn-danger    { background: var(--azr-danger) !important;  color: #fff !important; }
.azr-btn-skill     { background: var(--azr-accent2) !important; color: #fff !important; }
.azr-btn-sm        { padding: 5px 12px !important; font-size: 0.75rem !important; }

/* ── Bars ───────────────────────────────────────────────── */
.azr-bars { margin-bottom: 22px; }

.azr-bar-row {
  display:       flex;
  align-items:   center;
  gap:           10px;
  margin-bottom: 7px;
}
.azr-bar-label {
  width:     90px;
  font-size: 0.78rem;
  color:     var(--azr-muted);
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.azr-bar {
  flex:         1;
  height:       8px;
  background:   #0c0c14;
  border-radius: 4px;
  overflow:     hidden;
  border:       1px solid var(--azr-border2);
}
.azr-bar-fill {
  height:       100%;
  border-radius: 4px;
  transition:   width .45s cubic-bezier(.4,0,.2,1);
}
.azr-bar-hp    { background: linear-gradient(90deg, #7a1c1c, #d44); }
.azr-bar-luc   { background: linear-gradient(90deg, #4a3070, #9b7ecb); }
.azr-bar-mem   { background: linear-gradient(90deg, #1a3a5e, #4a9fdf); }
.azr-bar-corr  { background: linear-gradient(90deg, #5c2200, #d06000); }
.azr-bar-xp    { background: linear-gradient(90deg, #1a4a1a, #4caf50); }
.azr-bar-enemy { background: linear-gradient(90deg, #5a1010, #c03030); }
.azr-bar-val {
  width:      72px;
  font-size:  0.78rem;
  text-align: right;
  color:      var(--azr-muted);
  flex-shrink: 0;
}

/* ── Section dividers (used inside create form) ─────────── */
.azr-section-title {
  display:       flex;
  align-items:   center;
  gap:           10px;
  font-size:     0.72rem;
  font-weight:   700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color:         var(--azr-accent);
  margin:        28px 0 14px;
}
.azr-section-title::before,
.azr-section-title::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: linear-gradient(90deg, var(--azr-border), transparent);
}
.azr-section-title::before { background: linear-gradient(90deg, transparent, var(--azr-border)); }

/* ── Name field ─────────────────────────────────────────── */
.azr-field { margin-bottom: 20px; }

.azr-field label {
  display:       block !important;
  color:         var(--azr-muted) !important;
  font-size:     0.78rem !important;
  font-weight:   600 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  margin-bottom: 8px !important;
}

.azr-field input[type="text"],
.azr-field input {
  display:       block !important;
  width:         100% !important;
  background:    #09090e !important;
  border:        1px solid var(--azr-border) !important;
  border-radius: var(--azr-radius) !important;
  padding:       12px 16px !important;
  color:         var(--azr-text) !important;
  font-size:     1rem !important;
  font-family:   var(--azr-font) !important;
  transition:    border-color .15s, box-shadow .15s !important;
  -webkit-appearance: none !important;
  box-shadow:    none !important;
}
.azr-field input[type="text"]:focus,
.azr-field input:focus {
  outline:    none !important;
  border-color: var(--azr-accent) !important;
  box-shadow: 0 0 0 3px rgba(200,150,63,.15) !important;
}
.azr-field input::placeholder { color: var(--azr-muted) !important; opacity: 1 !important; }

/* ── Choice cards (origins / classes) ──────────────────── */
.azr-choice-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap:                   10px;
  margin-bottom:         8px;
}

.azr-choice {
  background:    var(--azr-surface2);
  border:        2px solid var(--azr-border);
  border-radius: var(--azr-radius);
  padding:       14px 12px;
  cursor:        pointer;
  transition:    border-color .15s, background .15s, transform .1s;
  position:      relative;
}
.azr-choice:hover {
  border-color: rgba(200,150,63,.5);
  background:   #14111c;
  transform:    translateY(-2px);
}
.azr-choice.selected {
  border-color: var(--azr-accent);
  background:   rgba(200,150,63,.07);
}
.azr-choice.selected::after {
  content:     '✓';
  position:    absolute;
  top:         8px;
  right:       10px;
  color:       var(--azr-accent);
  font-size:   0.85rem;
  font-weight: 700;
}

.azr-choice-label {
  font-weight:   700;
  color:         var(--azr-accent);
  margin-bottom: 5px;
  font-size:     0.9rem;
  line-height:   1.2;
}
.azr-choice-desc {
  font-size:     0.78rem;
  color:         var(--azr-muted);
  margin-bottom: 10px;
  line-height:   1.4;
}
.azr-choice-bonuses,
.azr-choice-skills {
  display:   flex;
  flex-wrap: wrap;
  gap:       4px;
}

.azr-stat-badge {
  background:    rgba(200,150,63,.12);
  color:         var(--azr-accent);
  border:        1px solid rgba(200,150,63,.25);
  padding:       2px 7px;
  border-radius: 20px;
  font-size:     0.7rem;
  font-weight:   600;
}

.azr-skill-tag {
  display:       inline-block;
  background:    rgba(123,94,167,.15);
  color:         #a98ed8;
  border:        1px solid rgba(123,94,167,.3);
  padding:       2px 8px;
  border-radius: 20px;
  font-size:     0.7rem;
}

/* ── Create button row ───────────────────────────────────── */
.azr-form > .azr-btn {
  margin-top: 24px;
  padding:    13px 32px !important;
  font-size:  0.88rem !important;
}

/* ── Messages (display managed by jQuery show/fadeOut) ───── */
.azr-msg {
  margin-top:    10px;
  padding:       10px 14px;
  border-radius: var(--azr-radius);
  font-size:     0.88rem;
}
.azr-msg.ok   { background: #071507; border: 1px solid #2e7d32; color: #81c784; }
.azr-msg.err  { background: #170707; border: 1px solid #7a1c1c; color: #ef9a9a; }
.azr-msg.info { background: #050f1a; border: 1px solid #1a4a6e; color: #90caf9; }

/* ── Character sheet ─────────────────────────────────────── */
.azr-sheet-header {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--azr-border);
}
.azr-char-name {
  font-size:   2rem;
  font-weight: 700;
  color:       var(--azr-accent);
  line-height: 1.1;
}
.azr-char-meta {
  font-size:  0.85rem;
  color:      var(--azr-muted);
  margin-top: 6px;
}

.azr-hollow-badge {
  display:       inline-block;
  background:    #4a0000;
  color:         #ff6666;
  padding:       2px 9px;
  border-radius: 4px;
  font-size:     0.72rem;
  font-weight:   700;
  letter-spacing: .06em;
  margin-left:   10px;
  vertical-align: middle;
  text-transform: uppercase;
}

.azr-stats-grid {
  display:      grid;
  grid-template-columns: 1fr 1fr;
  gap:          24px;
  margin-bottom: 20px;
}
@media (max-width: 580px) { .azr-stats-grid { grid-template-columns: 1fr; } }

.azr-stats-title {
  font-size:      0.7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color:          var(--azr-accent);
  margin-bottom:  10px;
  padding-bottom: 6px;
  border-bottom:  1px solid var(--azr-border);
}

.azr-stat-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         5px 0;
  border-bottom:   1px solid var(--azr-border2);
  font-size:       0.88rem;
}
.azr-stat-row:last-child { border-bottom: none; }
.azr-stat-name { color: var(--azr-muted); }
.azr-stat-val  { color: var(--azr-text); font-weight: 600; font-variant-numeric: tabular-nums; }

.azr-secondary-stats {
  display:       flex;
  flex-wrap:     wrap;
  gap:           8px 16px;
  font-size:     0.82rem;
  color:         var(--azr-muted);
  margin-bottom: 20px;
  padding:       12px 14px;
  background:    #0a0a10;
  border-radius: var(--azr-radius);
  border:        1px solid var(--azr-border2);
}
.azr-secondary-stats strong { color: var(--azr-accent); }

.azr-attr-points { margin-top: 14px; color: var(--azr-accent); font-size: .85rem; }
.azr-attr-btns   { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* ── Skills section ──────────────────────────────────────── */
.azr-skills-section { margin-top: 20px; }
.azr-skills-list {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap:                   10px;
}
.azr-skill-card {
  background:    var(--azr-surface2);
  border:        1px solid var(--azr-border);
  border-left:   3px solid var(--azr-accent2);
  border-radius: var(--azr-radius);
  padding:       12px 14px;
}
.azr-skill-name { color: var(--azr-accent2); font-weight: 700; margin-bottom: 5px; font-size: .9rem; }
.azr-skill-desc { color: var(--azr-text); font-size: .82rem; margin-bottom: 6px; line-height: 1.4; }
.azr-skill-cost { color: var(--azr-muted); font-size: .75rem; }

/* ── Combat ──────────────────────────────────────────────── */
.azr-combat-header {
  display:         flex;
  align-items:     stretch;
  gap:             12px;
  margin-bottom:   18px;
  padding:         18px;
  background:      var(--azr-surface2);
  border:          1px solid var(--azr-border);
  border-radius:   var(--azr-radius);
}
.azr-combatant       { flex: 1; }
.azr-combatant-name  { font-weight: 700; margin-bottom: 10px; font-size: 1rem; color: var(--azr-accent); }
.azr-vs {
  display:     flex;
  align-items: center;
  color:       var(--azr-danger);
  font-size:   1.3rem;
  font-weight: 900;
  padding:     0 4px;
}
.azr-enemy-side .azr-combatant-name { color: #e06060; }

.azr-combat-log {
  background:    #07070c;
  border:        1px solid var(--azr-border2);
  border-radius: var(--azr-radius);
  padding:       14px;
  height:        230px;
  overflow-y:    auto;
  margin-bottom: 14px;
  font-size:     0.88rem;
  line-height:   1.65;
  color:         var(--azr-text);
}
.azr-log-entry {
  padding:       4px 0;
  border-bottom: 1px solid rgba(255,255,255,.03);
}
.azr-log-entry:last-child { border-bottom: none; }
.crit { color: #ffd700; font-weight: 700; }

.azr-combat-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.azr-combat-items   { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

/* ── Enemy / zone / inventory cards ─────────────────────── */
.azr-enemy-list,
.azr-zone-grid,
.azr-inv-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap:                   12px;
  margin-bottom:         16px;
}

.azr-enemy-card,
.azr-zone-card,
.azr-inv-item {
  background:    var(--azr-surface2);
  border:        1px solid var(--azr-border);
  border-radius: var(--azr-radius);
  padding:       16px;
  display:       flex;
  flex-direction: column;
  gap:           6px;
}

.azr-enemy-name,
.azr-zone-name  { font-weight: 700; color: var(--azr-accent); font-size: .92rem; }
.azr-enemy-desc,
.azr-zone-desc  { font-size: .82rem; color: var(--azr-muted); line-height: 1.4; flex: 1; }
.azr-enemy-zone,
.azr-zone-meta  { font-size: .78rem; color: var(--azr-muted); display: flex; gap: 10px; flex-wrap: wrap; }

.azr-zone-current { border-color: var(--azr-accent); background: rgba(200,150,63,.05); }
.azr-zone-locked  { opacity: .45; }
.azr-locked-msg   { color: var(--azr-danger); font-size: .8rem; }

.azr-inv-name { font-weight: 700; color: var(--azr-accent); font-size: .9rem; }
.azr-qty      { color: var(--azr-muted); font-weight: 400; font-size: .85rem; }
.azr-inv-desc { font-size: .82rem; color: var(--azr-muted); line-height: 1.4; flex: 1; }

/* ── Quests ──────────────────────────────────────────────── */
.azr-quest {
  border:        1px solid var(--azr-border);
  border-left:   3px solid var(--azr-accent);
  border-radius: var(--azr-radius);
  padding:       18px;
  margin-bottom: 14px;
  background:    var(--azr-surface2);
}
.azr-quest-done { border-left-color: var(--azr-success); }
.azr-quest-title {
  font-size:  1rem;
  font-weight: 700;
  color:      var(--azr-accent);
  margin-bottom: 6px;
}
.azr-done-badge {
  display:       inline-block;
  background:    var(--azr-success);
  color:         #fff;
  padding:       2px 9px;
  border-radius: 4px;
  font-size:     .7rem;
  font-weight:   700;
  text-transform: uppercase;
  margin-left:   8px;
  vertical-align: middle;
}
.azr-quest-desc { color: var(--azr-muted); font-size: .86rem; margin-bottom: 12px; font-style: italic; }

.azr-quest-steps { list-style: none; padding: 0; margin: 0 0 12px; }
.azr-quest-steps li {
  padding:       5px 0;
  font-size:     .86rem;
  color:         var(--azr-muted);
  border-bottom: 1px solid var(--azr-border2);
}
.azr-quest-steps li:last-child { border-bottom: none; }
.azr-step-done { color: var(--azr-text) !important; }

.azr-quest-reward {
  font-size:     .82rem;
  color:         var(--azr-accent);
  background:    rgba(200,150,63,.07);
  border:        1px solid rgba(200,150,63,.18);
  padding:       8px 12px;
  border-radius: var(--azr-radius);
}

/* ── Explore result panel ────────────────────────────────── */
.azr-explore-result {
  padding:       18px;
  background:    var(--azr-surface2);
  border:        1px solid var(--azr-border);
  border-radius: var(--azr-radius);
  margin-top:    14px;
  display:       none;
  color:         var(--azr-text);
}
.azr-explore-result.visible { display: block; }
.azr-event-title { font-size: 1rem; color: var(--azr-accent); font-weight: 700; margin-bottom: 8px; }

/* ── Scrollbar ───────────────────────────────────────────── */
.azr-combat-log::-webkit-scrollbar       { width: 5px; }
.azr-combat-log::-webkit-scrollbar-track { background: #07070c; }
.azr-combat-log::-webkit-scrollbar-thumb { background: var(--azr-border); border-radius: 3px; }

/* ── Loading ─────────────────────────────────────────────── */
.azr-loading { opacity: .4; pointer-events: none; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 600px) {
  .azr-panel         { padding: 18px 14px !important; margin: 16px auto 20px !important; }
  .azr-choice-grid   { grid-template-columns: 1fr 1fr; }
  .azr-combat-header { flex-direction: column; }
}
@media (max-width: 380px) {
  .azr-choice-grid { grid-template-columns: 1fr; }
}