:root{
  --bg: #0e0d0a;
  --bg-overlay: rgba(12,10,6,0.55);
  --gold-1: #c9a227;
  --gold-2: #f0d58a;
  --gold-3: #8f6a13;
  --text: #f6f1e5;
  --muted: #cfc6b0;
  --shadow: rgba(0,0,0,0.45);
  --radius: 18px;
  --blur: 14px;
  --maxw: 1100px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  background: var(--bg) url('assets/bg.webp') center/cover fixed no-repeat;
  font: 16px/1.5 system-ui,Segoe UI,Roboto,Arial,sans-serif;
}

/* topbar */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; gap:16px; align-items:center; justify-content:flex-start;
  padding:10px 14px; backdrop-filter: blur(var(--blur));
  background: linear-gradient(180deg, rgba(0,0,0,.7), rgba(0,0,0,.25));
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.brand{display:flex; align-items:center; gap:10px}
.brand__crest{font-size:22px}
.brand__title{font-weight:700; letter-spacing:.5px}

/* container */
.container{ max-width:var(--maxw); margin: 18px auto 40px; padding: 0 14px; }
.view{display:none}
.view.is-visible{display:block}

/* tabs */
.tabs{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.tabs--inline{ justify-content:center; margin: 10px auto 8px; }
.tab{
  appearance:none; border:1px solid rgba(201,162,39,.35);
  background: radial-gradient(120% 120% at 50% 0%, rgba(201,162,39,.25), rgba(0,0,0,.1));
  color:var(--gold-2); padding:8px 14px; border-radius:999px; cursor:pointer;
  transition:.2s; box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}
.tab:hover{transform: translateY(-1px)}
.tab.is-active{border-color:var(--gold-2); color:#111; background: linear-gradient(180deg, var(--gold-2), var(--gold-1));}

/* card */
.card{
  background: linear-gradient(180deg, rgba(34,28,18,.55), rgba(16,13,9,.45));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 30px var(--shadow), inset 0 1px 0 rgba(255,255,255,.06);
  border-radius: var(--radius);
  backdrop-filter: blur(var(--blur));
  padding: 18px;
}
.center-stack{max-width:720px; margin: 8px auto 0;}
.card__title{margin:0 0 12px; font-size:22px; color:var(--gold-2); text-shadow: 0 1px 0 #000}

/* form */
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.field{display:flex; flex-direction:column; gap:6px}
.field--full{grid-column:1 / -1}

.select, input[type="number"]{
  width:100%; padding:10px 12px; border-radius:12px;
  background: rgba(0,0,0,.35); color:var(--text);
  border: 1px solid rgba(201,162,39,.35);
}
.dice-row{display:flex; gap:8px; align-items:center}

.btn{
  cursor:pointer; border-radius:12px; padding:10px 14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.35); color:var(--text); transition:.2s
}
.btn:hover{transform: translateY(-1px)}
.btn--primary{background: linear-gradient(180deg, var(--gold-2), var(--gold-1)); color:#111; border-color: var(--gold-3)}
.btn--gold{background: radial-gradient(120% 120% at 50% 0%, rgba(201,162,39,.5), rgba(0,0,0,.15)); color:var(--gold-2)}
.btn--ghost{background:transparent; border-color: rgba(201,162,39,.35); color:var(--gold-2)}

/* result */
.result{margin-top:14px; border-top:1px dashed rgba(201,162,39,.35); padding-top:12px}
.result__items{list-style:none; padding:0; margin:8px 0}
.result__items li{
  padding:6px 8px; border-left:3px solid var(--gold-1);
  background: rgba(0,0,0,.25); border-radius:8px; margin:6px 0;
  display:flex; flex-wrap:wrap; gap:8px; align-items:center
}
.result__items a{ color:var(--gold-2); text-decoration:underline; }
.result__coins{font-weight:600; color:var(--gold-2)}
.result__actions{display:flex; gap:8px; margin-top:8px}
.badge{
  font-size:12px; line-height:1; padding:3px 6px; border-radius:8px;
  border:1px solid rgba(201,162,39,.35); color:var(--muted); background: rgba(0,0,0,.25)
}

/* rarity pill */
.rarity { font-size:12px; padding:3px 8px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.25); }
.rarity--Common{ color:#cfc6b0; border-color: rgba(207,198,176,.35); }
.rarity--Uncommon{ color:#5CB85C; border-color: rgba(92,184,92,.35); }
.rarity--Rare{ color:#4DA3FF; border-color: rgba(77,163,255,.35); }
.rarity--VeryRare{ color:#A47DFF; border-color: rgba(164,125,255,.35); }
.rarity--Legendary{ color:#f0d58a; border-color: rgba(240,213,138,.45); }
.rarity--Artifact{ color:#FF6B6B; border-color: rgba(255,107,107,.45); }

/* qty for stacks */
.qty{
  font-size:12px; padding:3px 6px; border-radius:999px;
  border:1px solid rgba(201,162,39,.35); background: rgba(0,0,0,.25);
  color: var(--gold-2); font-weight:600;
}

/* --- COLORFUL GEMS --- */
.gem{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px; border-radius:999px; margin:3px 4px 0 0;
  font-size:12px; line-height:1;
  background: rgba(0,0,0,.25); border:1px solid rgba(201,162,39,.25);
}
.gem b{font-weight:700; opacity:.95}
.gem--10   { background:#30260c; border-color:#6a5316; color:#ffe9a8; }
.gem--50   { background:#0f2430; border-color:#1e4a63; color:#bfe6ff; }
.gem--100  { background:#0f2716; border-color:#1f5a34; color:#c9ffd9; }
.gem--500  { background:#1a1438; border-color:#3d2f86; color:#dcd3ff; }
.gem--1000 { background:#381313; border-color:#7c2f2f; color:#ffd0d0; }
.gem--5000 { background:#2d2312; border-color:#a17a25; color:#ffe7b0; }

/* ===== PRETTIER PLAYER ===== */
.player{
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(34,28,18,.55), rgba(16,13,9,.45));
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 10px 30px var(--shadow), inset 0 1px 0 rgba(255,255,255,.06);
}
.player__controls{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
}
.player__controls .btn{
  min-width: 44px; min-height: 40px;
  border-radius: 12px; padding: 10px 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 4px 12px rgba(0,0,0,.35);
}
.player__controls .btn--primary{
  background: linear-gradient(180deg, var(--gold-2), var(--gold-1));
  color:#111; border-color: var(--gold-3);
}
.player__controls .btn--ghost{
  background: rgba(0,0,0,.25);
  border-color: rgba(201,162,39,.35);
  color: var(--gold-2);
}
.vol{ display:flex; align-items:center; gap:10px; color:var(--muted); font-size:14px }
.vol input[type="range"]{
  width: 180px; height: 6px; border-radius: 999px;
  background: rgba(255,255,255,.12); outline: none; appearance: none;
}
.vol input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--gold-2); border: 1px solid var(--gold-3);
  box-shadow: 0 0 0 3px rgba(0,0,0,.25);
  cursor: pointer;
}
.vol input[type="range"]::-moz-range-thumb{
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--gold-2); border: 1px solid var(--gold-3);
  box-shadow: 0 0 0 3px rgba(0,0,0,.25);
  cursor: pointer;
}

/* history */
.history{display:grid; gap:8px; padding-left:16px}
.history__actions{margin-top:12px; display:flex; gap:8px}

/* sources (settings) */
.subhead{margin:12px 0 8px; color:var(--gold-2)}
.sources{ display:grid; gap:8px; grid-template-columns: repeat(3, minmax(0,1fr)); }
.source-chip{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:12px;
  background: rgba(0,0,0,.25); border:1px solid rgba(201,162,39,.25);
}
.source-chip input{accent-color:var(--gold-1)}
.source-chip em{font-style:normal; color:var(--muted); font-size:12px}
.sources__actions{display:flex; gap:8px; margin-top:10px}

.small{font-size:13px}
.muted{color:var(--muted)}

/* toast */
.toast{
  position: fixed; left:50%; bottom:58px; transform:translateX(-50%);
  background: rgba(0,0,0,.7); color:var(--gold-2); padding:10px 14px; border-radius:999px;
  border:1px solid rgba(201,162,39,.35); backdrop-filter: blur(10px);
  opacity:0; pointer-events:none; transition:.25s; z-index:30;
}
.toast.show{opacity:1}

/* version banner — всегда внизу и не перекрывает клики */
.version-banner{
  position: fixed; left:50%; bottom:12px; transform: translateX(-50%);
  background: rgba(0,0,0,.6); color: var(--gold-2);
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid rgba(201,162,39,.35);
  font-size: 13px; font-weight:600; letter-spacing:.2px;
  backdrop-filter: blur(8px);
  z-index: 5;
  pointer-events: none;
}

/* ----- MUSIC LAYOUT (категории + треки) ----- */
.music-layout{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap:12px;
}
.cat-list, .track-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.cat-list li, .track-list li{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 12px; border-radius:12px; cursor:pointer;
  background: rgba(0,0,0,.25); border:1px solid rgba(201,162,39,.25);
}
.cat-list li:hover, .track-list li:hover{ transform: translateY(-1px); }
.cat-list li.is-active, .track-list li.is-active{
  border-color: var(--gold-2);
  background: linear-gradient(180deg, rgba(240,213,138,.2), rgba(201,162,39,.08));
}
.track-meta{ display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; }

/* FORMULAS — красивые карточки */
.formula-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:12px;
}
.formula-card{
  padding:12px; border-radius:12px;
  background: rgba(0,0,0,.25);
  border:1px solid rgba(201,162,39,.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.formula-card .formula{ color:var(--gold-2); font-weight:700 }

/* mobile */
@media (max-width:880px){ .sources{grid-template-columns: repeat(2, minmax(0,1fr));} }
@media (max-width:680px){
  .form-grid{grid-template-columns:1fr}
  .tabs--inline{position:sticky; top:48px; z-index:15; margin-top:6px}
  .sources{grid-template-columns: 1fr;}
  .music-layout{ grid-template-columns: 1fr; }

  /* табы как эмодзи */
  .tab{ position:relative; font-size:0; padding:10px 12px; min-width:42px; }
  .tab::before{
    content: attr(data-emoji);
    font-size:18px; line-height:1; display:block;
    filter: drop-shadow(0 1px 0 rgba(0,0,0,.35));
  }
}
/* — Encounters: ссылки как в луте — */
#view-encounters #encounters-result a.enc-link,
#view-encounters #encounters-result a.enc-link:visited {
  color: var(--gold-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}
#view-encounters #encounters-result a.enc-link:hover {
  text-decoration-thickness: 2px;
  opacity: .9;
}
/* Rarity options inside selects (safe, subtle colors) */
select.rarity-select option[value="Common"]    { color: #cfc6b0; } /* muted beige */
select.rarity-select option[value="Uncommon"]  { color: #5CB85C; } /* green */
select.rarity-select option[value="Rare"]      { color: #4DA3FF; } /* blue */
select.rarity-select option[value="VeryRare"]  { color: #A47DFF; } /* purple */
select.rarity-select option[value="Legendary"] { color: #f0d58a; } /* gold */
select.rarity-select option[value="Artifact"]  { color: #FF6B6B; } /* soft red */

/* Qty dropdown looks consistent with other selects */
select.qty-select { width: 100%; }
/* --- Login page overrides --- */
.card.login-card{
  width: min(92vw, 420px);
  margin: 8vh auto;
  padding: 24px 28px;
  background: rgba(0,0,0,.75);
  border-radius: 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
}

.card.login-card h2{
  color:#f2e2b0;
  font-weight:700;
  margin: 0 0 14px;
  text-align:left;
}

.card.login-card .label{
  display:block;
  margin:10px 4px 6px;
  color:#ddd;
  font-size:.95rem;
}

.card.login-card .input{
  width:100%;
  padding:12px 14px;
  border:1px solid #444;
  border-radius:10px;
  background:#1f1f22;
  color:#fff;
  outline:none;
}

.card.login-card .input:focus{
  border-color:#666;
}

.card.login-card .btn.primary{
  width:100%;
  margin-top:10px;
  background:linear-gradient(180deg,#f7d97f,#cfa93f);
  color:#131109;
  border:0;
  border-radius:10px;
  padding:12px 16px;
  font-weight:700;
  box-shadow:0 3px 10px rgba(0,0,0,.45);
}

.card.login-card .btn.primary:hover{
  filter:brightness(1.05);
}

.card.login-card .muted{
  margin-top:10px;
  color:#bdbdbd;
}