/* ==========================================================
   Sanctuary Tavern – Tavernen-Theme (liegt über app.css)
   Schriften: nur lokal installierte (local()). Eigene WOFF2-Dateien siehe README.
   ========================================================== */
@font-face{font-family:"Cinzel Decorative";src:local("Cinzel Decorative");font-weight:700;font-display:swap}
@font-face{font-family:"Cinzel";src:local("Cinzel");font-weight:400 900;font-display:swap}
@font-face{font-family:"Crimson Text";src:local("Crimson Text");font-weight:400;font-display:swap}

:root{
  --bg:#0e0604; --bg2:#1a0d06; --panel:#2b170c; --panel2:#3a2210;
  --line:#4a2e16; --line2:#7a5420;
  --text:#eadcc0; --muted:#bba684; --dim:#8f7a54;
  --ember:#ff7a1a; --ember2:#ffc766; --blood:#c4161c; --gold:#e8b520; --gold-l:#ffe08a; --gold-d:#8a5a08;
  --radius:6px; --shadow:0 8px 24px rgba(0,0,0,.6);
  --head:"Cinzel Decorative","Cinzel","Trajan Pro","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  --sub:"Cinzel","Trajan Pro","Palatino Linotype",Palatino,Georgia,serif;
  --display:var(--sub);
  --serif:"Crimson Text","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  --wood:repeating-linear-gradient(90deg,rgba(0,0,0,.14) 0 2px,transparent 2px 9px),linear-gradient(180deg,#3f2511,#22120a 60%,#1a0d06);
}
html{scroll-behavior:smooth}
body{
  font:17px/1.6 var(--serif);
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%,rgba(255,120,30,.22),transparent 70%),
    radial-gradient(ellipse at 50% 50%,transparent 35%,rgba(0,0,0,.8) 100%),
    url("../img/bricks.svg") 0 0/160px 96px,
    var(--bg);
  background-attachment:fixed;
  overflow-x:hidden;
}
a{color:var(--ember2)} a:hover{color:#fff;text-decoration:none}
h1,h2,h3,h4{text-shadow:0 2px 0 #2a1204}
h1{font-family:var(--head);color:var(--gold-l);text-shadow:0 2px 0 #3a1f05,0 0 22px rgba(255,140,30,.35);letter-spacing:.04em}
h2{color:var(--gold-l);font-family:var(--sub)}
h3{font-family:var(--sub)}
h4{color:var(--gold)}
.lead{color:#f3e6c9;font-size:1.2rem}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

#embers{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.topbar,main,.footer,.banner,.tavern-hero{position:relative;z-index:2}
.topbar{position:sticky;z-index:50}

/* ---------- Kopfzeile ---------- */
.topbar{background:linear-gradient(180deg,#2a1608,#170c05);backdrop-filter:none;border-bottom:4px solid #0a0503;box-shadow:0 6px 24px rgba(0,0,0,.8),inset 0 -3px 0 var(--gold-d),inset 0 2px 0 rgba(255,200,120,.15);padding:4px 16px;gap:10px}
.topbar::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 2px,transparent 2px 7px,rgba(255,200,120,.04) 7px 9px);pointer-events:none}
.topbar>*{position:relative}
.brand{gap:.7rem}
.logo{width:56px;height:56px;border-radius:50%;box-shadow:0 0 0 2px var(--gold-d),0 0 18px rgba(255,120,20,.6);filter:none}
.brand b{font-family:var(--head);font-size:1.45rem;letter-spacing:.02em;color:var(--gold-l);text-shadow:0 2px 0 #000}
.brand small{font-family:var(--sub);letter-spacing:.5em;font-size:.78rem;color:var(--ember);font-weight:700}
#nav{gap:2px}
#nav a{font-family:var(--sub);font-weight:700;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:#f0dcb0;padding:.5rem .5rem;white-space:nowrap;border:2px solid transparent;border-radius:3px}
#nav a:hover{background:rgba(0,0,0,.35);border-color:var(--gold-d);color:#fff;text-shadow:0 0 10px var(--ember)}
#nav a.on{background:linear-gradient(180deg,var(--gold-l),var(--gold));color:#1a0c05;border-color:#3a2208;box-shadow:inset 0 0 0 1px #fff3,0 0 14px rgba(255,170,30,.5)}
.burger{border:2px solid var(--gold-d);color:var(--gold);border-radius:4px}
.user-chip{background:#1b0e06;border-color:var(--gold-d);color:var(--gold-l);font-family:var(--sub);font-size:.8rem}
.banner{background:linear-gradient(180deg,#6e0a0e,#4a0607);color:#ffe2c2;border-bottom:2px solid var(--gold-d);font-family:var(--sub)}

/* ---------- Fackeln ---------- */
.torch{position:fixed;top:34vh;z-index:3;width:64px;pointer-events:none;display:none}
.torch-l{left:10px}.torch-r{right:10px}
.torch img{width:100%;display:block;filter:drop-shadow(0 6px 8px #000);animation:sway 3s infinite alternate ease-in-out;transform-origin:50% 90%}
.torch .glow{position:absolute;left:50%;top:5%;width:260px;height:260px;transform:translate(-50%,0);background:radial-gradient(circle,rgba(255,150,40,.38),rgba(255,90,20,.1) 45%,transparent 70%);animation:flicker 2.4s infinite alternate ease-in-out;mix-blend-mode:screen}
@media (min-width:1500px){.torch{display:block}}
@keyframes flicker{0%{opacity:.7;transform:translate(-50%,0) scale(.95)}35%{opacity:1}60%{opacity:.8}100%{opacity:1;transform:translate(-50%,0) scale(1.06)}}
@keyframes sway{from{transform:rotate(-.8deg)}to{transform:rotate(.8deg)}}

/* ---------- Holz-Panels mit goldenen Ecken ---------- */
.card,.timer-card,.boss-card,.class-card,.build-card,.news-card{
  background:
    url("../img/c-tl.svg") left -2px top -2px/36px 36px no-repeat,
    url("../img/c-tr.svg") right -2px top -2px/36px 36px no-repeat,
    url("../img/c-bl.svg") left -2px bottom -2px/36px 36px no-repeat,
    url("../img/c-br.svg") right -2px bottom -2px/36px 36px no-repeat,
    var(--wood);
  border:2px solid #0a0503;
  box-shadow:inset 0 0 0 1px var(--gold-d),inset 0 0 40px rgba(0,0,0,.6),var(--shadow);
}
.timer-card{border-top:4px solid var(--c,var(--ember))}
.timer-card.live{box-shadow:inset 0 0 0 1px var(--c),0 0 34px -4px var(--c),var(--shadow)}
.boss-card:hover,.class-card:hover,.build-card:hover,.news-card:hover{border-color:#0a0503;box-shadow:inset 0 0 0 1px var(--gold),inset 0 0 40px rgba(0,0,0,.6),0 14px 34px rgba(255,110,20,.28)}
.news-item,.row-card,.eq,.ev-row{background:var(--wood);border:2px solid #0a0503;box-shadow:inset 0 0 0 1px rgba(232,181,32,.3)}
.ev-row{box-shadow:none;border-width:0 0 1px;border-bottom:1px solid var(--line);background:transparent;border-left:3px solid var(--c,transparent)}
.ev-row.live{background:rgba(110,10,14,.35)}
.news-item:hover,.news-card:hover{border-color:#0a0503}
.sticky-actions{background:linear-gradient(180deg,#3f2511,#22120a)!important}
.card-head h2,.timer-card header h2{font-family:var(--sub)}
.big-count{font-family:var(--head);color:#fff}
.notice{background:linear-gradient(180deg,#4a2a0c,#2a1606);border:2px solid var(--gold-d);color:#ffe9b8;border-radius:5px}
blockquote.verbatim{background:rgba(0,0,0,.35);border-left-color:var(--blood);font-family:var(--serif);font-size:1.1rem}
.md blockquote{border-left-color:var(--gold)}
pre.notes{background:rgba(0,0,0,.35)}

/* ---------- Seitenkopf mit Zierleiste & Grafik ---------- */
.hero{border-bottom:0;padding-bottom:22px;padding-right:100px;min-height:92px}
.hero::after{left:0;right:0;bottom:0;width:auto;height:30px;background:url("../img/divider.svg") left center/min(520px,100%) no-repeat}
.hero::before{content:"";position:absolute;right:0;top:-8px;width:92px;height:92px;background:var(--art,url("../img/torch.svg")) center/contain no-repeat;filter:drop-shadow(0 6px 8px #000);animation:float 5s ease-in-out infinite}
body[data-route=weltbosse]{--art:url("../img/skull.svg")}
body[data-route=unterschlupf]{--art:url("../img/goldsack.svg")}
body[data-route=klassen]{--art:url("../img/swords.svg")}
body[data-route=builder],body[data-route=builds],body[data-route=build]{--art:url("../img/gems.svg")}
body[data-route=news],body[data-route=info]{--art:url("../img/mug.svg")}
body[data-route=geheimnisse]{--art:url("../img/goblin.svg")}
body[data-route=login],body[data-route=registrieren],body[data-route=profil],body[data-route=admin]{--art:url("../img/mug.svg")}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-8px) rotate(1.5deg)}}

/* ---------- Buttons, Chips, Tabs ---------- */
.btn{font-family:var(--sub);font-weight:700;letter-spacing:.06em;font-size:.88rem;color:var(--gold-l);background:linear-gradient(180deg,#4a2c14,#2a160a);border:2px solid #0a0503;border-radius:4px;box-shadow:inset 0 0 0 1px var(--gold-d),0 3px 0 #0a0503;transition:.15s}
.btn:hover{background:linear-gradient(180deg,#5a3818,#35200e);border-color:#0a0503;color:#fff;transform:translateY(-1px)}
.btn:active{transform:translateY(2px);box-shadow:inset 0 0 0 1px var(--gold-d),0 1px 0 #0a0503}
.btn.primary{color:#1a0c05;background:linear-gradient(180deg,var(--gold-l),var(--gold) 55%,#b0780c);border-color:#2a1606;box-shadow:inset 0 0 0 1px #fff6,0 3px 0 #3a2208,0 6px 14px rgba(0,0,0,.5)}
.btn.primary:hover{filter:brightness(1.08);color:#000}
.btn.ghost{background:transparent;box-shadow:inset 0 0 0 1px var(--gold-d)}
.btn.danger{color:#ffb0a4;border-color:#3a0a08;background:linear-gradient(180deg,#6e0a0e,#3a0507)}
.chip{font-family:var(--sub);font-weight:700;letter-spacing:.06em;background:#1b0e06;border-color:var(--gold-d);color:var(--gold-l);font-size:.68rem}
.chip.live{background:var(--blood);color:#fff;border-color:#2a0506}
.tag{background:#1b0e06;border-color:var(--gold-d);color:var(--gold-l);border-radius:3px;font-family:var(--sub);font-size:.74rem}
.tabs{border-bottom:2px solid var(--gold-d)}
.tab{font-family:var(--sub);font-weight:700;letter-spacing:.05em;color:var(--muted)}
.tab.on{color:var(--gold-l);border-color:var(--gold)}
.more,.linklike{font-family:var(--sub);font-weight:700;letter-spacing:.05em}

/* ---------- Formulare ---------- */
input,select,textarea{font-family:var(--serif);font-size:1rem;color:#f3e6c9;background:#150a04;border:2px solid #6a4a1c;border-radius:4px;box-shadow:inset 0 3px 8px rgba(0,0,0,.6)}
input:focus,select:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 2px rgba(232,181,32,.3),inset 0 3px 8px rgba(0,0,0,.6)}
fieldset{border:2px solid var(--line2);border-radius:5px;background:rgba(0,0,0,.2)}
legend{color:var(--gold-l);font-family:var(--sub)}
.field>span{font-family:var(--sub);font-size:.78rem;letter-spacing:.05em}
.stepper{border:2px solid #6a4a1c;border-radius:4px;background:#150a04}
.stepper button{background:#3a2210}.stepper button:hover{background:var(--blood)}

/* ---------- Tabellen & Daten ---------- */
.table,.table td,.table th,.dl,.ev-time,.ev-count{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.table th{font-family:var(--sub);color:var(--gold);border-bottom:2px solid var(--line2)}
.table td{border-bottom:1px solid rgba(232,181,32,.15)}
.table.skills tr.grp th{background:#2a160a;color:var(--gold-l)}
.dl dt{font-family:var(--sub);font-size:.85rem}
.sanc-map{border:3px solid #0a0503;box-shadow:0 0 0 2px var(--gold-d),0 8px 24px rgba(0,0,0,.6)}
.day-group h3{border-bottom:1px dashed var(--line2);color:var(--gold-l)}
details.sources,.crumbs{color:var(--muted)}

/* ---------- Dialog & Toasts ---------- */
dialog{background:var(--wood);color:var(--text);border:3px solid #0a0503;border-radius:8px;box-shadow:inset 0 0 0 2px var(--gold-d),0 20px 60px #000c}
dialog::backdrop{background:rgba(5,2,1,.8)}
.dlg-head{border-bottom:1px solid var(--line2)}
.toast{background:linear-gradient(180deg,#3f2511,#1b0e06);border:2px solid var(--gold-d);border-left:5px solid var(--ember);font-family:var(--sub);font-size:.85rem}

/* ---------- Startseiten-Hero ---------- */
.tavern-hero{padding:1.2rem 1rem .4rem}
.hero-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1fr minmax(0,560px) 1fr;align-items:end;gap:1rem}
.hero-center{text-align:center}
.hero-center .lead{margin:.2rem auto 0;max-width:40rem}
.hero-logo{width:min(400px,92%);height:auto;filter:drop-shadow(0 0 30px rgba(255,100,20,.4));-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(0deg,transparent,#000 14%,#000 86%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent),linear-gradient(0deg,transparent,#000 14%,#000 86%,transparent);mask-composite:intersect}
.hero-side{display:flex;flex-direction:column;align-items:center;gap:.4rem}
.hero-side img{width:min(200px,100%);filter:drop-shadow(0 12px 14px #000)}
.hero-side .gems-img{width:min(170px,90%);margin-top:-.6rem}
.sack-btn{background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sack-btn:active img{transform:scale(.94)}
.float{animation:float 4.5s ease-in-out infinite}.float.slow{animation-duration:6s}
.gold-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,120px);background:linear-gradient(180deg,#3f2511,#1b0e06);border:2px solid var(--gold);color:var(--gold-l);font-family:var(--sub);font-weight:700;padding:.7rem 1.3rem;border-radius:30px;box-shadow:0 8px 24px #000a;z-index:300;transition:transform .35s;pointer-events:none}
.gold-toast.show{transform:translate(-50%,0)}
.coin-fly{position:fixed;z-index:250;width:22px;height:22px;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 35% 30%,#fff4b0,#e8b520 55%,#8a5a08);box-shadow:0 0 8px #ffb41e;border:1px solid #6b4505}

/* ---------- Footer ---------- */
.footer{background:linear-gradient(180deg,transparent,rgba(0,0,0,.85) 40%);border-top:0;color:var(--dim);padding-top:8px}
.divider{height:40px;background:url("../img/divider.svg") center/min(600px,90%) no-repeat}

@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .hero-side{flex-direction:row;justify-content:center;order:2}
  .hero-side img{width:110px}.hero-side .gems-img{width:100px;margin:0}
  #nav a{padding:.7rem .9rem}
  .topbar{padding:4px 12px}
}
@media (max-width:640px){
  body{font-size:16px}
  .hero{padding-right:0}.hero::before{display:none}
  .brand b{font-size:1.2rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}