/* Vale and Vow UI Kit v1 — токены и примитивы (docs/UI) */
:root{
  --stone-dark:#191512;
  --stone-mid:#241d18;
  --bark:#3c2a1e;
  --gold:#c9a227;
  --gold-bright:#e0c25a;
  --gold-deep:#b8901f;
  --gold-edge:#8a6d1a;
  --moss:#3d5a45;
  --moss-bright:#5a8767;
  --blood:#8a2f2f;
  --blood-bright:#c94f4f;
  --parchment:#e8dcc4;
  --parchment-dim:#a89a7c;
  --parchment-mute:#7d7060;
  --border:#4a3a2a;
  --border-hover:#6b543c;
  --bg-page:#0d0a08;
  --bg-deep:#14100d;
  --bg-void:#080f0a;
  --glade-top:#1c3a28;
  --glade-bottom:#0e2015;
  --input-bg:#171310;
  --hover-bg:#332a20;
  --active-bg:#2a2218;
  --panel-top:#2b2119;
  --panel-bottom:#1c1611;
  --stone-hex:#6a6a7a;
  --frag:#8fa3c9;
  --firefly:#cfe0cf;
  --ember:#e0a43c;
  --registry:#1a2130;
  --registry-mid:#131926;
  --registry-border:#3a4356;
  --registry-text:#c9d2e0;
  --registry-dim:#6f81a3;
  --registry-frost:#8fa3c9;
  --font:Georgia,'Times New Roman',serif;
  --font-display:'Playfair Display',Georgia,'Times New Roman',serif;
  --radius-panel:6px;
  --radius-btn:6px;
  --shadow-panel:0 24px 48px -20px rgba(0,0,0,.85),inset 0 1px 0 rgba(232,220,196,.08);
}

*{box-sizing:border-box;}
html,body{
  margin:0;height:100%;
  background:var(--bg-page);
  font-family:var(--font);
  color:var(--parchment);
}

@keyframes ember{
  0%{transform:translate(0,0) scale(1);opacity:0}
  12%{opacity:.9}
  100%{transform:translate(22px,-150px) scale(.35);opacity:0}
}
@keyframes ember2{
  0%{transform:translate(0,0) scale(1);opacity:0}
  15%{opacity:.7}
  100%{transform:translate(-18px,-110px) scale(.4);opacity:0}
}
@keyframes glowpulse{
  0%,100%{text-shadow:0 0 18px rgba(224,194,90,.35),0 0 2px rgba(224,194,90,.4)}
  50%{text-shadow:0 0 30px rgba(224,194,90,.6),0 0 4px rgba(224,194,90,.6)}
}
@keyframes vv-breathe{
  0%,100%{opacity:.5;transform:scale(1)}
  50%{opacity:.85;transform:scale(1.06)}
}
@keyframes vv-ember{
  0%{transform:translate(0,0) scale(1);opacity:0}
  12%{opacity:.9}
  100%{transform:translate(26px,-220px) scale(.3);opacity:0}
}
@keyframes vv-firefly{
  0%,100%{transform:translate(0,0);opacity:.1}
  30%{opacity:.9}
  55%{transform:translate(30px,-20px);opacity:.4}
  80%{opacity:.8}
}
@keyframes vv-fog{
  0%{transform:translateX(-3%)}
  100%{transform:translateX(3%)}
}
@keyframes vv-flicker{
  0%,100%{opacity:.75}
  40%{opacity:1}
  65%{opacity:.55}
}
@keyframes vv-pulse{
  0%,100%{box-shadow:0 0 16px rgba(201,162,39,.22),inset 0 1px 0 rgba(255,240,200,.5)}
  50%{box-shadow:0 0 34px rgba(201,162,39,.5),inset 0 1px 0 rgba(255,240,200,.5)}
}
@keyframes heropulse{
  0%,100%{box-shadow:0 0 14px rgba(224,194,90,.55),0 0 0 3px rgba(224,194,90,.15)}
  50%{box-shadow:0 0 26px rgba(224,194,90,.8),0 0 0 5px rgba(224,194,90,.22)}
}
@keyframes fogdrift{
  0%{transform:translateX(-20px)}
  50%{transform:translateX(20px)}
  100%{transform:translateX(-20px)}
}
@keyframes firefly{
  0%,100%{opacity:0;transform:translate(0,0)}
  20%{opacity:.9}
  50%{opacity:.3;transform:translate(18px,-14px)}
  70%{opacity:.8}
  90%{opacity:0;transform:translate(30px,-4px)}
}
@keyframes candleflicker{
  0%,100%{opacity:.75}
  45%{opacity:1}
  60%{opacity:.6}
  75%{opacity:.95}
}
@keyframes eraseletter{
  0%,100%{opacity:.85}
  50%{opacity:.08}
}
@keyframes inkline{
  0%{opacity:0;transform:translateY(4px)}
  100%{opacity:1;transform:translateY(0)}
}
@keyframes dmgfloat{
  0%{opacity:0;transform:translateY(6px)}
  15%{opacity:1}
  70%{opacity:1}
  100%{opacity:0;transform:translateY(-26px)}
}
@keyframes stormflash{
  0%,92%,96%,100%{opacity:0}
  94%{opacity:.5}
}
@keyframes coinblink{
  0%,100%{text-shadow:none}
  50%{text-shadow:0 0 8px rgba(224,194,90,.7)}
}
@keyframes tapring{
  0%,100%{box-shadow:0 0 0 10px rgba(201,79,79,.12)}
  50%{box-shadow:0 0 0 14px rgba(201,79,79,.05)}
}
@keyframes dashmove{to{stroke-dashoffset:-24}}
@keyframes smokerise{
  0%{transform:translateY(0);opacity:.5}
  100%{transform:translateY(-28px);opacity:0}
}
@keyframes sparkfly{
  0%{transform:translate(0,0);opacity:.9}
  100%{transform:translate(12px,-36px);opacity:0}
}
@keyframes swordclash{
  0%,100%{transform:rotate(0)}
  40%{transform:rotate(-8deg)}
  60%{transform:rotate(6deg)}
}
@keyframes quillwrite{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(2px)}
}
@keyframes breathe{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-2px)}
}
@keyframes sealglow{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.25)}
}
@keyframes wolfeyes{
  0%,90%,100%{opacity:.35}
  94%{opacity:1}
}
@keyframes lostlink{
  0%,100%{opacity:.55;stroke-dashoffset:0}
  50%{opacity:1;stroke-dashoffset:8}
}

.panel,.vv-panel{
  background:linear-gradient(180deg,var(--panel-top),var(--panel-bottom));
  border:1px solid var(--border);
  border-radius:var(--radius-panel);
  box-shadow:var(--shadow-panel);
}
.eyebrow,.vv-eyebrow{
  font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);
}
.display-title,.vv-h1{
  font-family:var(--font-display);
  font-size:clamp(28px,4vw,44px);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;line-height:1.15;
  color:var(--parchment);margin:0;
}
.vv-h2{
  font-family:var(--font-display);
  font-size:26px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;margin:0;
}
.vv-voice{font-style:italic;font-size:15px;color:var(--parchment-dim);line-height:1.6}
.vv-caption{font-size:12px;color:var(--parchment-dim)}
h1{
  font-family:var(--font-display);
  font-size:15px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-bright);margin:0 0 10px 0;text-align:center;
  font-weight:600;border-bottom:1px solid var(--border);padding-bottom:8px;
}
.section-title{
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);margin:16px 0 8px 0;
}

.btn-gold,.btn-primary{
  font-family:var(--font);font-size:13px;letter-spacing:.22em;text-transform:uppercase;
  padding:14px 30px;border-radius:var(--radius-btn);border:1px solid var(--gold-edge);
  color:var(--stone-mid);cursor:pointer;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold-deep));
  box-shadow:0 8px 22px -8px rgba(201,162,39,.55),inset 0 1px 0 rgba(255,240,200,.6),inset 0 -2px 0 rgba(90,60,10,.45);
}
.btn-gold:hover,.btn-primary:hover{
  background:linear-gradient(180deg,#eccd6b,#c49a26);
  box-shadow:0 10px 28px -8px rgba(201,162,39,.7),inset 0 1px 0 rgba(255,240,200,.7),inset 0 -2px 0 rgba(90,60,10,.45);
}
.btn-gold:active,.btn-primary:active{transform:translateY(1px)}
.btn-secondary{
  font-family:var(--font);font-size:13px;letter-spacing:.22em;text-transform:uppercase;
  padding:14px 30px;border-radius:var(--radius-btn);border:1px solid var(--gold);
  color:var(--gold-bright);cursor:pointer;
  background:linear-gradient(180deg,rgba(201,162,39,.1),rgba(201,162,39,.02));
  box-shadow:inset 0 1px 0 rgba(232,220,196,.08),0 6px 16px -8px rgba(0,0,0,.6);
}
.btn-secondary:hover{background:linear-gradient(180deg,rgba(201,162,39,.2),rgba(201,162,39,.06));color:#f0d47a}
.btn-ghost{
  font-family:var(--font);font-size:13px;letter-spacing:.22em;text-transform:uppercase;
  padding:14px 30px;border-radius:var(--radius-btn);border:1px solid var(--border);
  color:var(--parchment-dim);cursor:pointer;background:transparent;
}
.btn-ghost:hover{color:var(--parchment);border-color:var(--border-hover);background:rgba(232,220,196,.03)}
.btn-danger{
  font-family:var(--font);font-size:13px;letter-spacing:.22em;text-transform:uppercase;
  padding:14px 30px;border-radius:var(--radius-btn);border:1px solid var(--blood);
  color:#e8c4c4;cursor:pointer;
  background:linear-gradient(180deg,#7a2a2a,#521c1c);
  box-shadow:0 8px 22px -10px rgba(201,79,79,.5),inset 0 1px 0 rgba(255,200,200,.15),inset 0 -2px 0 rgba(0,0,0,.35);
}
.btn-danger:hover{background:linear-gradient(180deg,#8a3232,#5e2020)}
.btn-gold:disabled,.btn-primary:disabled,.btn-secondary:disabled,.btn-ghost:disabled,.btn-danger:disabled{
  border-color:#33291d;color:#5f5343;background:#1a1510;cursor:not-allowed;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.4);transform:none;
}

.vv-toggle{
  display:inline-flex;align-items:center;gap:10px;cursor:pointer;user-select:none;
  font-size:13px;color:var(--parchment);
}
.vv-toggle input{position:absolute;opacity:0;width:0;height:0}
.vv-toggle-track{
  width:46px;height:24px;border-radius:12px;border:1px solid var(--border);
  background:#171310;box-shadow:inset 0 2px 4px rgba(0,0,0,.5);
  position:relative;flex-shrink:0;transition:background .2s,border-color .2s;
}
.vv-toggle-track::after{
  content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:linear-gradient(180deg,#6b5a45,#4a3a2a);transition:left .2s,background .2s;
}
.vv-toggle input:checked + .vv-toggle-track{
  border-color:var(--gold-edge);
  background:linear-gradient(180deg,var(--gold-edge),#5f4a10);
}
.vv-toggle input:checked + .vv-toggle-track::after{
  left:24px;background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  box-shadow:0 2px 6px rgba(0,0,0,.5);
}
.vv-toggle input:not(:checked) ~ span:last-child,
.vv-toggle:has(input:not(:checked)){color:var(--parchment-dim)}

.bar-bg{
  height:10px;border-radius:5px;border:1px solid rgba(0,0,0,.6);
  background:#171310;box-shadow:inset 0 2px 5px rgba(0,0,0,.6);overflow:hidden;
}
.bar-bg.xp{height:7px;border-radius:4px}
.bar-fill{height:100%;border-radius:inherit;transition:width .25s ease}
.bar-bg.hp .bar-fill{
  background:linear-gradient(180deg,var(--blood-bright),var(--blood));
  box-shadow:inset 0 1px 0 rgba(255,200,200,.3),0 0 8px rgba(201,79,79,.35);
}
.bar-bg.xp .bar-fill{
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  box-shadow:0 0 8px rgba(201,162,39,.35);
}

.auth-divider,.vv-divider{
  display:flex;align-items:center;gap:16px;margin:18px 0;color:var(--gold);font-size:14px;
}
.auth-divider::before,.auth-divider::after,
.vv-divider::before,.vv-divider::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--border));
}
.auth-divider::after,.vv-divider::after{background:linear-gradient(90deg,var(--border),transparent)}

.goldnum::before{content:'◆ ';color:var(--gold-bright);text-shadow:0 0 8px rgba(224,194,90,.5)}
.woodnum::before{content:'❋ ';color:var(--moss-bright)}
.fragnum::before{content:'◇ ';color:var(--frag)}
.stonenum::before{content:'⬡ ';color:var(--parchment-dim)}
.goldnum{color:var(--parchment)}
.woodnum{color:var(--parchment)}
.stonenum{color:var(--parchment)}
.fragnum{color:var(--parchment)}

input,textarea,select{
  font-family:var(--font);font-size:15px;padding:13px 16px;border-radius:var(--radius-btn);
  border:1px solid var(--border);color:var(--parchment);
  background:linear-gradient(180deg,#171310,#1e1813);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.5);outline:none;
}
input:focus,textarea:focus,select:focus{
  border-color:var(--gold);
  box-shadow:inset 0 2px 8px rgba(0,0,0,.5),0 0 0 3px rgba(201,162,39,.15);
}

.vv-modal-backdrop{
  position:fixed;inset:0;z-index:90;background:rgba(8,6,4,.66);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.vv-modal{
  width:min(560px,100%);border-radius:var(--radius-panel);border:1px solid var(--border);
  background:linear-gradient(180deg,#2b2119,#1a1410);
  box-shadow:0 50px 100px -24px rgba(0,0,0,.98),inset 0 1px 0 rgba(232,220,196,.09);
  overflow:hidden;
}
.vv-modal-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 24px;border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,#332818,#241d18);
}
.vv-modal-title{
  font-family:var(--font-display);font-size:17px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-bright);
}
.vv-modal-body{padding:24px;display:flex;flex-direction:column;gap:12px;font-size:14px;line-height:1.65}
.vv-modal-foot{
  display:flex;gap:12px;justify-content:flex-end;padding:18px 24px;
  border-top:1px solid var(--border);background:rgba(0,0,0,.2);
}
.vv-modal-close{
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  color:var(--parchment-dim);cursor:pointer;font-size:16px;background:none;border:0;
}
.vv-modal-close:hover{color:var(--parchment)}

.choice-card{
  display:flex;flex-direction:column;gap:8px;padding:22px 20px;border-radius:var(--radius-panel);
  border:1px solid var(--border);cursor:pointer;text-align:left;
  background:linear-gradient(180deg,rgba(43,33,25,.94),rgba(26,20,16,.94));
  box-shadow:inset 0 1px 0 rgba(232,220,196,.06);transition:border-color .15s,transform .15s;
}
.choice-card:hover{border-color:var(--border-hover);transform:translateY(-2px)}
.choice-card .choice-eyebrow{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
.choice-card .choice-title{
  font-family:var(--font-display);font-size:21px;font-weight:600;letter-spacing:.04em;margin:4px 0;
}
.choice-card .choice-desc{font-style:italic;font-size:14px;line-height:1.55;color:var(--parchment-dim)}

/* Kit · toast / empty / panel inset */
.vv-toast{
  display:flex;align-items:center;gap:12px;padding:11px 18px;border-radius:6px;
  border:1px solid var(--border);
  background:linear-gradient(180deg,#221b15,#181310);
  box-shadow:0 10px 24px -12px rgba(0,0,0,.8);font-size:13px;
}
.vv-toast .vv-toast-mark{color:var(--gold-bright)}
.vv-toast .vv-toast-time{margin-left:auto;font-size:11px;color:var(--parchment-dim)}
.vv-empty{
  padding:44px 32px;border-radius:6px;border:1px dashed var(--border);
  background:rgba(36,29,24,.5);display:flex;flex-direction:column;align-items:center;
  gap:12px;text-align:center;
}
.vv-empty-mark{color:var(--gold);font-size:20px;opacity:.7}
.vv-empty-text{font-style:italic;color:var(--parchment-dim);font-size:14px;line-height:1.6;max-width:28em}
.vv-panel-kit{
  padding:22px 24px;border-radius:6px;border:1px solid var(--border);
  background:linear-gradient(180deg,#2b2119,#1c1611);
  box-shadow:0 24px 48px -20px rgba(0,0,0,.85),0 4px 10px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(232,220,196,.08),inset 0 -1px 0 rgba(0,0,0,.45);
}
.vv-tab{
  font-size:12px;letter-spacing:.24em;text-transform:uppercase;padding:11px 20px;
  border-radius:6px 6px 0 0;border:1px solid var(--border);color:var(--parchment-dim);
  background:linear-gradient(180deg,#221b15,#181310);cursor:pointer;font-family:inherit;
}
.vv-tab:hover{color:var(--parchment);border-color:var(--border-hover)}
.vv-tab.is-active,.vv-tab.active{
  color:var(--gold-bright);border-color:var(--gold);border-bottom-color:transparent;
  background:linear-gradient(180deg,#332818,#241d18);
  box-shadow:inset 0 1px 0 rgba(224,194,90,.25);
}
.vv-scroll-letter{
  position:relative;padding:38px 42px 46px;border-radius:4px;
  background:linear-gradient(175deg,#e8dcc4,#d6c6a4 70%,#cbb890);color:#241d18;
  box-shadow:0 40px 80px -24px rgba(0,0,0,.95),0 6px 16px rgba(0,0,0,.55),
    inset 0 0 60px rgba(120,90,40,.25);
}
.vv-scroll-meta{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:#8a6d1a}
.vv-scroll-title{
  font-family:var(--font-display);font-size:24px;font-weight:600;margin:12px 0 14px;color:#241d18;
}
.vv-scroll-body{font-size:15px;line-height:1.7;font-style:italic;color:#4a3a2a}
.vv-scroll-seal{
  width:56px;height:56px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#c94f4f,#8a2f2f 60%,#5e1e1e);
  box-shadow:0 4px 10px rgba(0,0,0,.4),inset 0 2px 4px rgba(255,180,180,.3),
    inset 0 -3px 6px rgba(0,0,0,.4);
  display:flex;align-items:center;justify-content:center;color:rgba(36,29,24,.7);font-size:20px;
}
.vv-divider{
  display:flex;align-items:center;gap:16px;width:100%;margin:8px 0;
  color:var(--gold);font-size:13px;
}
.vv-divider::before,.vv-divider::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,transparent,var(--border));
}
.vv-divider::after{background:linear-gradient(90deg,var(--border),transparent)}