/* Dunstsaga 0.7 – "Eisen und Asche", variant smoked wood and copper.
   Loaded after style.css: it replaces colours, type and surfaces, and leaves the layout rules of style.css alone. */
:root{
  --bg:#100d0c;--panel:#1b1512;--panel2:#211916;--line:#45362e;--text:#e8dccb;--muted:#9a8b7d;
  --gold:#dea27a;--ember:#b9714a;--green:#a59a80;--danger:#d0705f;
  --copper:#b9714a;--copper-light:#dea27a;--copper-deep:#5f3018;--blood:#a8433a;--edge:#5f4a3e;--rivet:#8a5a40;
  --head:'Bahnschrift','DIN Alternate','Arial Narrow','Roboto Condensed',sans-serif;
  --serif:Georgia,'Times New Roman',serif;
  --grain:repeating-linear-gradient(91deg,rgba(255,214,160,.035) 0 1px,transparent 1px 5px,rgba(0,0,0,.10) 5px 6px,transparent 6px 13px);
  --px:0;--py:0;--sy:0;
}
html{background:var(--bg)}
body{background:radial-gradient(1000px 520px at 50% 0,rgba(255,190,110,.05),transparent 70%),var(--bg);overflow-x:clip}
#sparks{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:15;mix-blend-mode:screen}
canvas.mist{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* ---------- Type ---------- */
h1,h2,h3,h4,.brand,.nav,.button,.pill,.scene-tag,.hero-name strong,.campaign-label strong,.toast strong{font-family:var(--head);font-stretch:condensed;text-transform:uppercase;letter-spacing:.045em}
h1,h2,h3,h4{font-weight:600}
h1{letter-spacing:.03em}
h1 span{color:var(--copper)}
.eyebrow{color:var(--copper-light);font-weight:700}
#scene-description,.journal-entry p,#last-moment,.adventure-card p,.section-intro{font-family:var(--serif)}

/* ---------- Top bar ---------- */
.topbar{border-bottom:2px solid var(--line);background:linear-gradient(180deg,#1c1512,#120e0c)}
.brand{font-weight:700;letter-spacing:.14em;border-left:6px solid var(--copper);padding-left:12px}
.brand img{display:none}
.brand small{letter-spacing:.34em;margin-top:2px}
.nav{letter-spacing:.08em;font-weight:600;transition:color .2s,box-shadow .2s}
.nav:hover{color:var(--text)}
.nav.active{border-color:transparent;color:var(--copper-light);box-shadow:0 -3px 0 var(--copper) inset}
.connection i,.scene-tag i{border-radius:0;background:#9db08a;box-shadow:0 0 8px #9db08a}
.icon-button{border:2px solid var(--edge);border-radius:4px;background:linear-gradient(180deg,#2a1f19,#1b1310)}
.icon-button:hover{border-color:var(--copper)}

/* ---------- Surfaces: smoked wood with iron rivets ---------- */
.party-panel,.voice-panel,.dice-panel,.quest-panel,.recent-panel,.hub-panel,.intro-card,.setup-banner,.correction-panel,dialog{
  border:2px solid var(--line);border-radius:4px;
  background:radial-gradient(circle at 7px 7px,var(--rivet) 0 2px,transparent 2.5px),radial-gradient(circle at calc(100% - 7px) 7px,var(--rivet) 0 2px,transparent 2.5px),radial-gradient(circle at 7px calc(100% - 7px),var(--rivet) 0 2px,transparent 2.5px),radial-gradient(circle at calc(100% - 7px) calc(100% - 7px),var(--rivet) 0 2px,transparent 2.5px),var(--grain),linear-gradient(180deg,#211916,#15100e);
  box-shadow:0 1px 0 rgba(255,220,170,.07) inset,0 0 0 1px #000 inset,0 4px 0 #070504,0 16px 26px -16px #000}
dialog{box-shadow:0 0 0 1px #000 inset,0 30px 120px #000c}
dialog::backdrop{background:rgba(5,4,3,.78);backdrop-filter:blur(5px)}
dialog[open]{animation:rise .32s cubic-bezier(.2,.8,.2,1)}
.notice,.toast{border:2px solid var(--line);border-radius:4px;background:#1d1512;color:#d9c9b2}
.toast{border-color:var(--copper);background:#2a1c14;color:var(--text)}
.pill{border:1px solid var(--edge);border-radius:3px;color:var(--copper-light);background:rgba(16,13,12,.6)}
.setup-banner .spark{color:var(--copper-light)}

/* ---------- Buttons and fields ---------- */
.button{border:2px solid var(--edge);border-radius:4px;background:linear-gradient(180deg,#2a1f19,#1b1310);color:var(--text);font-weight:600;letter-spacing:.06em;transition:transform .12s,border-color .2s,filter .2s,box-shadow .2s}
.button:hover:not(:disabled){border-color:var(--copper)}
.button:active:not(:disabled){transform:translateY(2px)}
.quiet-button{background:linear-gradient(180deg,#241a15,#17100d);color:#cdbda8}
.subtle{background:transparent;border-color:var(--copper);color:var(--copper-light)}
.button.primary{position:relative;overflow:hidden;color:#1a0f08;border-color:var(--copper-light);background:linear-gradient(180deg,#d99a72,var(--copper) 55%,#96532f);box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 3px 0 var(--copper-deep),0 10px 26px -12px var(--copper)}
.button.primary:hover:not(:disabled){filter:brightness(1.08);border-color:var(--copper-light)}
.button.primary:active:not(:disabled){box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 1px 0 var(--copper-deep)}
.button.primary:not(:disabled)::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.4) 50%,transparent 65%);transform:translateX(-120%);animation:sheen 6s ease-in-out infinite}
.text-button{color:var(--copper-light)}
input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{background:#0b0807;color:var(--text);border:2px solid var(--line);border-radius:4px}
input:focus,select:focus,textarea:focus{border-color:var(--copper)}
input[type=checkbox],input[type=radio],input[type=range]{accent-color:var(--copper)}

/* ---------- Hub: panorama with depth ---------- */
.panorama{position:relative;height:clamp(340px,58vh,620px);margin-bottom:22px;overflow:hidden;border:2px solid var(--edge);border-radius:4px;background:#050403;box-shadow:0 0 0 1px #000 inset,0 4px 0 #070504}
.pan-layer{position:absolute;inset:-5%;will-change:transform;transition:opacity 1.6s ease,filter 2.6s ease}
.pan-layer img{display:block;width:100%;height:100%;object-fit:cover}
.pan-back{transform:translate3d(calc(var(--px) * -14px),calc(var(--py) * -6px + var(--sy) * .2px),0) scale(1.03)}
.pan-front{transform:translate3d(calc(var(--px) * -44px),calc(var(--py) * -14px + var(--sy) * -.1px + var(--lift,0px)),0)}
.pan-front img{object-position:50% 100%;filter:drop-shadow(0 -6px 30px rgba(0,0,0,.6))}
body:not(.fx-ready) .pan-back{filter:brightness(.25) saturate(.6)}
body:not(.fx-ready) .pan-front{--lift:70px;opacity:0}
.pan-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(10,7,6,.8) 0,rgba(10,7,6,.3) 38%,transparent 60%),linear-gradient(0deg,rgba(16,13,12,.92) 0,rgba(16,13,12,.4) 26%,transparent 50%)}
.panorama .section-top{position:absolute;left:clamp(16px,3.5vw,48px);right:clamp(16px,3.5vw,48px);bottom:clamp(18px,5vh,44px);z-index:2;display:block;max-width:640px}
#hub-view .panorama .section-top h2{font:700 clamp(30px,4.6vw,62px)/.98 var(--head);font-stretch:condensed;margin:6px 0 0;text-shadow:0 3px 24px #000}
.dice-heading h3,.hub-panel h4,.creation-preview h4,.adventure-card h4,#hub-view .section-top h2{font-family:var(--head);font-stretch:condensed}
.recent-panel p{color:#dccdb2}
.dice-emblem,.ability-cell strong,.stepper strong{color:var(--copper-light);border-color:var(--copper)}
.caption{background:#15100ef2;border:2px solid var(--copper);border-radius:4px}
.hub-panel h3{font-size:24px}
.campaign-row{border-bottom:1px solid var(--line)}
.campaign-row.active .campaign-label strong{color:var(--copper-light)}
.campaign-label strong{font-size:17px;font-weight:600}
.adventure-grid{gap:16px}
.adventure-card{position:relative;overflow:hidden;padding:0 0 16px;gap:6px;border:2px solid var(--line);border-radius:4px;background:var(--grain),linear-gradient(180deg,#211916,#15100e);box-shadow:0 4px 0 #070504;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .18s ease-out,border-color .25s,box-shadow .25s}
.adventure-card>*:not(.adventure-cover){margin-left:16px;margin-right:16px}
.adventure-card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--gl,0);transition:opacity .3s;background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(255,214,170,.18),transparent 60%)}
.adventure-card:hover,.adventure-card.selected{border-color:var(--copper);box-shadow:0 4px 0 #070504,0 26px 40px -22px rgba(185,113,74,.55)}
.adventure-cover{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-bottom:2px solid var(--line);margin-bottom:8px}
.adventure-card h4{font-size:22px;line-height:1.05;margin:0}
.adventure-card p{color:var(--muted);font-size:14px;line-height:1.5}
.adventure-card .button{margin-top:auto}

/* ---------- Table ---------- */
.scene-panel{border:2px solid var(--edge);border-radius:4px;box-shadow:0 0 0 1px #000 inset,0 4px 0 #070504}
.scene-art{background:#050403;overflow:hidden}
.scene-art>img{display:block;width:100%;height:100%;object-fit:cover;animation:drift 46s ease-in-out infinite alternate}
.scene-shade{background:linear-gradient(0deg,rgba(16,13,12,.97),rgba(16,13,12,.5) 45%,transparent 78%)}
.scene-tag{border:1px solid var(--edge);border-radius:3px;background:rgba(16,13,12,.8);color:var(--text);letter-spacing:.1em}
.scene-caption h2{font-weight:700;text-shadow:0 2px 16px #000}
#scene-description{color:#dccdb2;border-left:3px solid var(--copper);padding-left:10px}
.scene-footer{background:#15100e;border-top:2px solid var(--line)}
.hero{border:2px solid transparent;border-radius:4px}
.hero:hover{background:#261c17}
.hero.selected{border-color:var(--copper);background:#231914}
.avatar{clip-path:none;border:2px solid var(--copper);border-radius:4px;background:linear-gradient(180deg,#3a2a1f,#20160f);color:var(--copper-light);font-family:var(--head);font-weight:700}
.hp-bar{height:5px;border-radius:2px;background:#000;box-shadow:0 0 0 1px var(--line)}
.hp-bar i{background:var(--green)}
.active-turn{color:var(--copper-light)}
.ember-orb{border-radius:4px;border:2px solid var(--edge);background:radial-gradient(circle,#dea27a 0,var(--copper) 40%,var(--copper-deep) 100%);box-shadow:0 0 0 2px var(--bg),0 0 26px -4px var(--copper);color:#1a0f08}
.dice-panel{border-color:var(--edge)}
.foe-panel{border-top:2px solid var(--line)}
.journal-entry{border-bottom:1px solid var(--line)}
footer{color:var(--muted);border-top:2px solid var(--line);font-family:var(--head);letter-spacing:.14em}
.budget-track{background:#000;box-shadow:0 0 0 1px var(--line)}
.budget-track i{background:var(--copper)}

/* ---------- Table, part 2: proportions, voice core, portraits, moments ---------- */
@media (min-width:1000px) and (min-height:650px){
  #table-view.view:not([hidden]){grid-template-columns:minmax(0,1fr) minmax(350px,42%)}
}
.ember-orb{position:relative;overflow:visible;border:0;background:none;box-shadow:none}
.ember-orb span{display:none}
.ember-orb.live{animation:none}
.voice-core{position:absolute;inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px)}
.avatar{position:relative;overflow:hidden}
.avatar.has-portrait{width:46px;height:46px;color:transparent}
.avatar img,.portrait-pick img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.hero.selected .avatar{box-shadow:0 0 14px -2px var(--copper)}
.figure-row .avatar{width:44px;height:44px}
.portrait-pool{display:grid;gap:8px;grid-template-columns:repeat(8,minmax(0,1fr));margin:12px 0}
.portrait-pick{position:relative;aspect-ratio:1;padding:0;overflow:hidden;border:2px solid var(--line);border-radius:4px;background:#0b0807;opacity:.72;transition:opacity .2s,border-color .2s,transform .2s,box-shadow .2s}
.portrait-pick:hover{opacity:1;transform:translateY(-2px)}
.portrait-pick.selected{opacity:1;border-color:var(--copper-light);box-shadow:0 0 0 2px var(--copper),0 0 22px -4px var(--copper)}
.portrait-own{display:grid;gap:8px;padding-top:12px;border-top:2px solid var(--line)}
.portrait-own label{display:grid;gap:4px;color:var(--muted);font-size:13px}
.portrait-own textarea{font:15px/1.4 var(--serif);padding:8px 10px;resize:vertical}
.portrait-own .button{justify-self:start}
#portrait-dialog{max-width:880px}
@media (max-width:740px){.portrait-pool{grid-template-columns:repeat(4,minmax(0,1fr))}}
.scene-art{position:relative}
body.fx-combat .scene-panel{border-color:#7a2f27;box-shadow:0 0 0 1px #000 inset,0 4px 0 #070504,0 0 60px -20px var(--blood) inset}
body.fx-combat .scene-tag{background:#5e241a;border-color:var(--blood)}
body.fx-combat .scene-tag i{background:var(--blood);box-shadow:0 0 8px var(--blood)}
.fx-banner{position:absolute;inset:34% 0 auto 0;z-index:4;display:grid;place-items:center;height:84px;pointer-events:none;background:linear-gradient(90deg,transparent,#3b1814 15%,#5e241a 50%,#3b1814 85%,transparent);border-block:2px solid var(--blood);animation:banner 1.6s cubic-bezier(.7,0,.2,1) both}
.fx-banner b{font:700 48px var(--head);font-stretch:condensed;text-transform:uppercase;letter-spacing:.5em;margin-right:-.5em;color:#f0dcc4}
.fx-chapter{position:absolute;inset:0;z-index:5;display:grid;place-content:center;justify-items:center;gap:8px;text-align:center;pointer-events:none;background:#050403;animation:chapter 2.6s cubic-bezier(.7,0,.2,1) both}
.fx-chapter span{font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--copper-light)}
.fx-chapter b{font:700 clamp(24px,4vw,48px) var(--head);font-stretch:condensed;text-transform:uppercase;letter-spacing:.045em;padding:0 16px}
.foe{position:relative}
.fx-hit{animation:hit .5s}
.foe.fx-hit::after{content:"";position:absolute;inset:-4px;pointer-events:none;background:linear-gradient(100deg,transparent 46%,#fff 49%,#ffd9b8 51%,transparent 54%);animation:slash .35s ease-out both}
.fx-shake{animation:shake .4s}
.foe-bar i{background:linear-gradient(90deg,#6e2620,var(--blood))}
@keyframes banner{0%{clip-path:inset(0 100% 0 0)}25%,70%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 0 0 100%)}}
@keyframes chapter{0%{clip-path:circle(0 at 50% 50%)}25%,65%{clip-path:circle(80% at 50% 50%);opacity:1}100%{clip-path:circle(80% at 50% 50%);opacity:0}}
@keyframes hit{20%{transform:translateX(-6px);filter:brightness(2)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@keyframes slash{from{transform:translateX(-60%)}to{transform:translateX(60%);opacity:0}}
@keyframes shake{20%{transform:translate(-5px,2px)}40%{transform:translate(4px,-2px)}60%{transform:translate(-3px,1px)}80%{transform:translate(2px,0)}}

@media (max-width:999px){
  .panorama{height:clamp(420px,62vh,560px)}
  .pan-layer{bottom:30%}
  .pan-front img{object-position:72% 100%}
  .pan-shade{background:linear-gradient(0deg,var(--bg) 34%,rgba(16,13,12,.25) 58%,transparent 70%)}
}
@keyframes sheen{0%,72%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes drift{from{transform:scale(1.03)}to{transform:scale(1.12) translate(-1.5%,-1%)}}
@keyframes rise{from{opacity:0;transform:translateY(16px) scale(.985)}}
@media (prefers-reduced-motion:reduce){
  .button.primary::after,.scene-art>img,dialog[open]{animation:none}
  .pan-layer,.adventure-card{transition:none}
  body:not(.fx-ready) .pan-back{filter:none}
  body:not(.fx-ready) .pan-front{--lift:0px;opacity:1}
}