@import url('https://fonts.googleapis.com/css2?family=Ruslan+Display&family=PT+Serif:ital,wght@0,400;0,700;1,400&family=Caveat:wght@500;600&family=IBM+Plex+Mono:wght@400;600;700&display=swap');

:root{
  --bg-deep:#4a1414;
  --bg-glow:#611c1c;
  --parchment:#ece0c2;
  --parchment-hi:#f6eed8;
  --parchment-dim:#d6c69f;
  --ink:#2a1d12;
  --ink-soft:#5d4a33;
  --gold:#c9a04a;
  --gold-dim:#8a6c2e;
  --red:#9b2828;
  --red-bright:#c23a3a;
  --shadow:rgba(0,0,0,.45);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}

body{
  min-height:100vh;
  background:
    radial-gradient(ellipse at 18% 0%, var(--bg-glow) 0%, transparent 55%),
    radial-gradient(ellipse at 88% 100%, var(--bg-glow) 0%, transparent 55%),
    var(--bg-deep);
  font-family:'PT Serif', Georgia, serif;
  color:var(--parchment);
  display:flex; justify-content:center;
  padding:20px 14px 60px;
}
.wrap{ width:100%; max-width:660px; }

/* ---------- логотип ---------- */
.topbar{ display:flex; justify-content:center; margin-bottom:18px; }
.logo-slot{
  width:100%; max-width:420px;
  border-radius:3px; overflow:hidden;
  line-height:0;
}
.logo-slot img{
  width:100%; height:auto; display:block;
}

/* ---------- прогресс ---------- */
.progress{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:0 0 20px;
}
.die-mini{ color:var(--gold); font-size:16px; }
.progress-track{
  position:relative; flex:1; max-width:230px; height:2px;
  background:rgba(201,160,74,.22);
}
.progress-fill{
  position:absolute; left:0; top:-1px; bottom:-1px;
  background:var(--gold); width:0%;
  transition:width .35s ease;
}
.progress-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px; letter-spacing:.1em; color:var(--gold);
}

/* ---------- страница книги ---------- */
.panel{
  position:relative;
  background:
    radial-gradient(ellipse at 50% 0%, var(--parchment-hi), transparent 60%),
    repeating-linear-gradient(96deg, rgba(140,110,60,.035) 0 2px, transparent 2px 5px),
    var(--parchment);
  color:var(--ink);
  padding:30px 28px 26px;
  border-radius:2px;
  box-shadow:0 16px 38px var(--shadow), 0 1px 0 rgba(255,255,255,.4) inset;
  border:1px solid rgba(0,0,0,.18);
}
.panel::before{
  content:''; position:absolute; inset:7px;
  border:1px solid rgba(155,40,40,.22);
  pointer-events:none;
}
.panel::after{
  content:'\275D'; position:absolute; right:14px; bottom:8px;
  color:rgba(155,40,40,.25); font-size:15px; pointer-events:none;
}

.location{
  font-family:'IBM Plex Mono', monospace;
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--red); margin-bottom:14px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(155,40,40,.2);
}

.reaction{
  margin:0 0 12px;
  font-size:16px; line-height:1.62;
  color:var(--ink-soft);
  border-left:2px solid var(--gold-dim);
  padding-left:12px;
}
.master{
  margin:2px 0 12px; line-height:1.55; font-size:16px;
  font-style:italic; font-weight:700; color:var(--red);
}
.master b{
  display:block; margin-bottom:3px;
  font-family:'IBM Plex Mono', monospace;
  font-style:normal; font-weight:600;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--red-bright);
}
.scene{ margin:0 0 12px; line-height:1.68; font-size:16.5px; }
.scene.dropcap::first-letter{
  float:left; font-family:'Ruslan Display', serif;
  font-size:52px; line-height:.72;
  padding:6px 10px 0 2px; margin-top:2px;
  color:var(--red);
  text-shadow:1px 1px 0 rgba(201,160,74,.35);
}

/* ---------- декоративный разделитель ---------- */
.divider{
  display:flex; align-items:center; justify-content:center;
  gap:10px; margin:16px 2px 14px; color:var(--red);
  opacity:.5; user-select:none;
}
.divider::before, .divider::after{
  content:''; height:1px; flex:1; max-width:120px;
  background:linear-gradient(90deg, transparent, rgba(155,40,40,.5));
}
.divider::after{ transform:scaleX(-1); }
.divider .glyph{
  font-size:14px; line-height:1;
  transform:translateY(-1px);
}
.flavor{
  margin:-2px 0 14px; padding-left:12px;
  font-size:15px; font-style:italic; color:#6f5c3f;
  border-left:2px solid rgba(155,40,40,.35);
}
.prompt{ font-weight:700; margin:6px 0 12px; font-size:16px; }

.art-slot{
  width:100%; aspect-ratio:16/10; margin-bottom:16px;
  border:1px dashed rgba(155,40,40,.35); border-radius:2px;
  background:
    radial-gradient(circle at 32% 24%, rgba(155,40,40,.09), transparent 62%),
    repeating-linear-gradient(135deg, rgba(0,0,0,.025) 0 2px, transparent 2px 13px),
    #e2d3ac;
  display:flex; align-items:center; justify-content:center;
}
.art-slot.has-img{
  aspect-ratio:auto; border:none; background:#e2ded3;
  padding:0; overflow:hidden;
}
.art-slot.has-img img{
  width:100%; height:auto; display:block;
}
.art-slot span{
  font-family:'Caveat', cursive; font-size:16px;
  color:rgba(155,40,40,.55);
}

/* ---------- варианты ---------- */
.options{ display:flex; flex-direction:column; gap:9px; margin-top:8px; }
.opt{
  text-align:left; cursor:pointer;
  background:rgba(255,255,255,.34);
  border:1px solid rgba(42,29,18,.22);
  border-radius:2px;
  padding:13px 15px;
  font-family:'PT Serif', serif; font-size:15.5px; line-height:1.42;
  color:var(--ink);
  transition:transform .12s ease, background .15s ease, border-color .15s ease;
}
.opt::before{ content:'\25b8  '; color:var(--red); font-weight:700; }
.opt:hover{ background:rgba(155,40,40,.09); border-color:var(--red); transform:translateX(3px); }
.opt:active{ transform:translateX(1px) scale(.995); }
.opt-cta{
  text-align:center; background:var(--red); color:var(--parchment);
  border-color:var(--red-bright);
  font-family:'IBM Plex Mono', monospace;
  letter-spacing:.08em; text-transform:uppercase; font-size:13.5px;
}
.opt-cta::before{ content:''; }
.opt-cta:hover{ background:var(--red-bright); transform:none; }

/* ---------- кубик ---------- */
.die-stage{
  display:flex; flex-direction:column; align-items:center;
  margin:10px auto 20px;
}
.die-big{
  position:relative;
  width:118px; height:118px;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.5), transparent 58%),
    var(--red);
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  border:2px solid var(--gold);
}
.die-big span{
  font-family:'Ruslan Display', serif; font-size:42px;
  color:var(--parchment-hi); text-shadow:0 2px 0 rgba(0,0,0,.4);
}
/* фаза броска: кубик дрожит и вертится */
.die-big.rolling{ animation:dieRoll .5s ease-in-out infinite; }
.die-big.rolling span{ animation:numFlick .09s steps(1) infinite; opacity:.85; }
@keyframes dieRoll{
  0%   { transform:translateY(0)    rotate(-14deg) scale(1);    }
  25%  { transform:translateY(-14px) rotate(8deg)  scale(1.05); }
  50%  { transform:translateY(2px)  rotate(-6deg) scale(.97);  }
  75%  { transform:translateY(-9px) rotate(12deg) scale(1.03); }
  100% { transform:translateY(0)    rotate(-14deg) scale(1);    }
}
@keyframes numFlick{ 50%{ opacity:.4; } }
/* фиксация результата */
.die-big.settle{ animation:dieSettle .5s cubic-bezier(.2,.9,.3,1.3); }
.die-big.crit-hi{ box-shadow:0 0 22px 4px rgba(201,160,74,.8); }
.die-big.crit-lo{ filter:grayscale(.55) brightness(.8); }
@keyframes dieSettle{
  0%{ transform:scale(1.35) rotate(18deg); }
  60%{ transform:scale(.92) rotate(-4deg); }
  100%{ transform:scale(1) rotate(0); }
}
.die-hint{
  margin-top:12px; font-family:'IBM Plex Mono', monospace;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-dim);
}

/* ---------- гусь-пасхалка ---------- */
.goose{
  position:fixed; bottom:6px; left:-70px;
  width:46px; height:34px; z-index:5;
  pointer-events:none; opacity:.5;
  animation:gooseWalk 14s linear infinite;
}
.goose svg{ width:100%; height:100%; display:block; }
.goose .leg{ transform-origin:top; animation:gooseStep .38s ease-in-out infinite alternate; }
.goose .leg2{ animation-delay:.19s; }
@keyframes gooseWalk{
  0%   { left:-70px; opacity:0; }
  6%   { opacity:.5; }
  46%  { opacity:.5; }
  52%  { left:calc(100% + 70px); opacity:0; }
  100% { left:calc(100% + 70px); opacity:0; }
}
@keyframes gooseStep{ from{ transform:rotate(-16deg); } to{ transform:rotate(16deg); } }

/* ---------- финальная карточка ---------- */
.result-wrap{ text-align:center; }
.result-bridge{
  font-family:'Caveat', cursive; font-size:21px;
  color:var(--gold); margin:0 0 16px;
}
#card-capture{
  background:linear-gradient(165deg, #2f1616, #190c0c);
  padding:12px; border-radius:4px;
}
.card-frame{
  border:1.5px solid var(--gold-dim);
  border-radius:2px;
  padding:18px 16px;
  text-align:left;
  position:relative;
}
.card-frame::before{
  content:''; position:absolute; inset:5px;
  border:1px solid rgba(201,160,74,.22); pointer-events:none;
}
.card-art{
  width:100%; aspect-ratio:5/4; margin-bottom:14px;
  border-radius:2px; overflow:hidden;
  background:#e2ded3;
  display:flex; align-items:center; justify-content:center;
}
.card-art img{
  width:100%; height:100%; object-fit:contain; display:block;
}
.card-art.placeholder{
  border:1px dashed rgba(201,160,74,.4);
  background:
    radial-gradient(circle at 30% 22%, rgba(201,160,74,.15), transparent 62%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.028) 0 2px, transparent 2px 14px),
    #3b1a1a;
}
.card-art span{
  font-family:'Caveat', cursive; font-size:16px; color:var(--gold-dim);
}
.card-topline{
  display:flex; justify-content:space-between;
  font-family:'IBM Plex Mono', monospace; font-size:12.5px; color:var(--gold);
}
.card-name{
  font-family:'Ruslan Display', serif; font-size:27px; line-height:1.12;
  color:var(--parchment-hi); margin:5px 0 3px;
}
.card-sub{ font-style:italic; color:var(--parchment-dim); font-size:13.5px; margin-bottom:12px; }
.card-desc{
  font-size:14.5px; line-height:1.55; color:var(--parchment);
  margin:0 0 6px; padding:11px 12px;
  background:rgba(201,160,74,.09);
  border-left:2px solid var(--gold);
}
.card-h{
  font-family:'IBM Plex Mono', monospace; font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
  margin:14px 0 5px;
}
.card-items{ list-style:none; margin:0; padding:0; }
.card-items li{
  font-size:14px; color:var(--parchment); line-height:1.4;
  padding:5px 0 5px 15px; position:relative;
  border-bottom:1px solid rgba(201,160,74,.12);
}
.card-items li::before{
  content:'\25c6'; position:absolute; left:0; top:8px;
  color:var(--red-bright); font-size:9px;
}
.card-line{ font-size:13px; color:var(--parchment-dim); margin:5px 0; }
.card-line b{ color:var(--gold); font-weight:600; }
.stat-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:3px; margin-top:13px; }
.stat-cell .l{
  font-family:'IBM Plex Mono', monospace; font-size:7.5px; letter-spacing:.01em;
  color:var(--gold); background:rgba(155,40,40,.55);
  padding:3px 1px; border-radius:2px 2px 0 0; text-align:center;
}
.stat-cell .v{
  font-family:'IBM Plex Mono', monospace; font-weight:700; font-size:14px;
  color:var(--parchment-hi); background:rgba(255,255,255,.06);
  padding:6px 1px; border-radius:0 0 2px 2px; text-align:center;
}

/* ---------- кнопки ---------- */
.actions{ display:flex; gap:9px; margin-top:18px; flex-wrap:wrap; justify-content:center; }
.btn{
  font-family:'IBM Plex Mono', monospace; font-size:12.5px;
  letter-spacing:.06em; text-transform:uppercase;
  padding:12px 20px; border-radius:2px;
  border:1px solid var(--gold); background:transparent;
  color:var(--parchment); cursor:pointer;
  transition:background .15s ease;
}
.btn:hover{ background:rgba(201,160,74,.14); }
.btn.primary{ background:var(--red); border-color:var(--red-bright); }
.btn.primary:hover{ background:var(--red-bright); }

.cta-block{
  margin-top:24px; padding:22px 18px; text-align:center;
  background:linear-gradient(180deg, rgba(201,160,74,.11), rgba(201,160,74,.03));
  border:1px solid var(--gold); border-radius:3px;
}
.cta-title{
  font-family:'Ruslan Display', serif; font-size:21px;
  color:var(--parchment-hi); margin-bottom:8px;
}
.cta-text{ font-size:14.5px; color:var(--parchment-dim); line-height:1.5; margin:0 0 15px; }
.cta-btn{
  display:inline-block; text-decoration:none;
  background:var(--red-bright); border-color:var(--gold);
  font-size:14px; padding:14px 26px;
}
.cta-btn:hover{ background:var(--red); }

@media (max-width:480px){
  .panel{ padding:22px 18px; }
  .card-name{ font-size:22px; }
  .stat-grid{ grid-template-columns:repeat(3,1fr); }
  .logo-slot{ max-width:320px; }
}

/* переход после броска, на том же экране */
.roll-tail{ margin-top:16px; font-style:italic; }