:root{

  --bg:#07080f; --bg2:#0d1020; --panel:#121528; --line:rgba(255,255,255,.09);

  --text:#e9e6f2; --muted:#9a98b0; --gold:#e6b655; --gold2:#ffdc8a;

  --blau:#4f8cff; --gelb:#f0b429; --gruen:#3fbf7f; --rot:#ff5a47; --bunt:#c77dff;

  --serif:'Cinzel','Trajan Pro','Palatino Linotype',Georgia,serif;

  --body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --r:16px; --tab:64px; --top:62px;

}



*{box-sizing:border-box;margin:0}



html{scroll-behavior:smooth;scroll-padding-top:calc(var(--top) + 8px);-webkit-text-size-adjust:100%;overflow-x:hidden}



body{background:var(--bg);color:var(--text);font:400 16px/1.65 var(--body);overflow-x:hidden;-webkit-tap-highlight-color:transparent}



body.noscroll{overflow:hidden}



img{max-width:100%;display:block}



a{color:inherit}



button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}



h1,h2,h3,h4{font-family:var(--serif);line-height:1.15;letter-spacing:.02em}



code{background:rgba(255,255,255,.08);padding:.1em .4em;border-radius:5px;font-size:.9em}



:focus-visible{outline:2px solid var(--gold);outline-offset:3px}



.muted{color:var(--muted)}

 .small{font-size:.85rem}

 .center{text-align:center}



.c-rot{color:var(--rot)}





.bg-fx{position:fixed;inset:0;z-index:-1;pointer-events:none;

  background:radial-gradient(1000px 600px at 80% -10%,rgba(79,140,255,.16),transparent 60%),

             radial-gradient(900px 600px at 0% 30%,rgba(230,182,85,.08),transparent 60%),

             radial-gradient(800px 500px at 100% 90%,rgba(199,125,255,.08),transparent 60%),var(--bg)}



#embers{width:100%;height:100%}





.wrap{width:min(1180px,100% - 2.4rem);margin-inline:auto}



.wrap.narrow{width:min(820px,100% - 2.4rem)}



.section{padding:clamp(4rem,9vw,8rem) 0;position:relative}



.section.alt{background:linear-gradient(180deg,transparent,rgba(18,21,40,.7) 12%,rgba(18,21,40,.7) 88%,transparent)}



.sec-head{text-align:center;max-width:720px;margin:0 auto clamp(2rem,5vw,3.5rem)}



.sec-head h2{font-size:clamp(1.8rem,4.5vw,3rem);margin:.4rem 0 1rem;background:linear-gradient(180deg,#fff,var(--gold2));-webkit-background-clip:text;background-clip:text;color:transparent}



.sub{color:var(--muted);font-size:1.05rem}



.eyebrow{font-family:var(--serif);font-size:.78rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}





/* Buttons */

.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 1.6rem;border-radius:999px;font-weight:600;text-decoration:none;transition:.25s;min-height:48px;justify-content:center;font-size:.95rem;white-space:nowrap !important}



.btn-sm{padding:.6rem 1.1rem;min-height:40px;font-size:.85rem}



.btn-gold{background:linear-gradient(135deg,#f6d27a,#c8902f);color:#1a1205;box-shadow:0 6px 28px rgba(230,182,85,.28)}



.btn-gold:hover{transform:translateY(-2px);box-shadow:0 10px 36px rgba(230,182,85,.45)}



.btn-gold:disabled{opacity:.55;cursor:not-allowed;transform:none}



.btn-ghost{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.04);backdrop-filter:blur(6px)}



.btn-ghost:hover{border-color:var(--gold);color:var(--gold2)}



.soon{font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;background:var(--gold);color:#1a1205;border-radius:99px;padding:.15rem .5rem}





/* Topbar */

.topbar{position:fixed;inset:0 0 auto;z-index:50;height:var(--top);display:flex;align-items:center;gap:clamp(0.5rem, 1vw, 1rem);padding:0 clamp(0.6rem, 1.4vw, 1.4rem);padding-top:env(safe-area-inset-top);transition:.3s;white-space:nowrap !important}



.topbar.solid{background:rgba(7,8,15,.82);backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--line)}



.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;font-family:var(--serif);font-weight:900;letter-spacing:.3em;color:var(--gold2)}



.brand svg,.brand-symbol{width:32px;height:32px;flex-shrink:0;filter:drop-shadow(0 2px 12px rgba(212,175,55,.6));transition:transform .3s ease}



.brand:hover svg,.brand:hover .brand-symbol{transform:scale(1.12)}



.topnav{display:flex;gap:clamp(0.4rem, 0.75vw, 0.9rem);margin-left:auto;align-items:center;white-space:nowrap !important}



.topnav a{text-decoration:none;font-size:clamp(0.8rem, 0.88vw, 0.88rem);color:var(--muted);padding:.4rem 0;position:relative;transition:.2s;white-space:nowrap !important}



.topnav a:hover,.topnav a.on{color:#fff}



.topnav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;background:var(--gold);transition:.3s}



.topnav a:hover::after,.topnav a.on::after{right:0}





/* Hero */

.hero{min-height:100svh;display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:clamp(1.5rem,3vw,3rem);padding:calc(var(--top) + 2rem) clamp(1.2rem,5vw,5rem) 4rem;position:relative}



.hero-inner{max-width:760px;width:100%;position:relative;z-index:5}



.title{font-size:clamp(3.2rem,8.2vw,6.6rem);font-weight:900;letter-spacing:.07em;margin:.6rem 0 1rem 0;display:inline-block;width:fit-content;max-width:100%;white-space:nowrap;padding-right:.12em;

  background:linear-gradient(180deg,#fff 10%,var(--gold2) 50%,#b4741f 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 8px 40px rgba(230,182,85,.25))}



.lead{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;font-size:clamp(1.25rem,2.6vw,1.7rem);line-height:1.45;color:#ddd8ee;margin-bottom:2rem}



.cta-row{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:2.5rem;position:relative;z-index:6}



.facts{list-style:none;padding:0;display:flex;gap:clamp(1rem,3vw,2.2rem);flex-wrap:wrap}



.facts li{display:flex;flex-direction:column}



.facts b{font-family:var(--serif);font-size:1.7rem;color:var(--gold2)}



.facts span{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.14em}



/* ============================================================

   RECHTE FLANKE: DIE 5 GROSSEN HAUPTKARTEN (HERO & WEBSITE)

   Vertikal untereinander weit auseinandergezogen über den Seitenverlauf!

   Voll deckend (opacity: 1), kein horizontaler Fächer!

   ============================================================ */

.hero-cards {

  position: absolute;

  right: clamp(10px, 2.5vw, 45px);

  top: clamp(100px, 14vh, 160px);

  width: min(230px, 22vw);

  height: 2500px;

  perspective: 1200px;

  pointer-events: none;

  z-index: 1;

}



.hc {

  position: absolute;

  width: min(94%, 220px);

  border-radius: 14px;

  box-shadow: 0 30px 70px rgba(0,0,0,.75), 0 0 28px rgba(212, 175, 55, 0.28), 0 0 0 1px rgba(255,255,255,.18);

  opacity: 1 !important;

  animation: floatRight 8s ease-in-out infinite;

  pointer-events: auto;

  transition: transform .4s ease, box-shadow .4s ease;

  backface-visibility: hidden;

}



/* Weit auseinandergezogen: Grob die Hälfte der Kartenlänge (ca. 170px) echter Freiraum zwischen den Karten! (je 510px Versatz) */

.hc1 {

  top: 0px;

  right: 0;

  transform: rotate(7deg);

  z-index: 1;

}



.hc2 {

  top: 510px;

  right: 26px;

  transform: rotate(-6deg);

  z-index: 2;

  animation-delay: -2s;

}



.hc5 {

  top: 1020px;

  right: -4px;

  transform: rotate(6deg);

  z-index: 3;

  animation-delay: -3.5s;

}



.hc3 {

  top: 1530px;

  right: 28px;

  transform: rotate(-5deg);

  z-index: 4;

  animation-delay: -5s;

}



.hc4 {

  top: 2040px;

  right: 8px;

  transform: rotate(8deg);

  z-index: 5;

  animation-delay: -6.5s;

}



@keyframes floatRight {

  0%, 100% { translate: 0 0; }



  50% { translate: 0 -14px; }



}



@keyframes float{50%{translate:0 -14px}

}



.scroll-hint{position:absolute;left:50%;bottom:1.6rem;translate:-50% 0;width:26px;height:42px;border:2px solid rgba(255,255,255,.3);border-radius:20px}



.scroll-hint span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--gold);animation:scr 1.8s infinite}



@keyframes scr{0%{opacity:1;translate:0 0}

100%{opacity:0;translate:0 14px}

}





/* Features */

.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem}



.feature{background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid var(--line);border-radius:var(--r);padding:1.8rem;transition:.3s}



.feature:hover{transform:translateY(-4px);border-color:rgba(230,182,85,.4)}



.feature h3{font-size:1.15rem;margin:1rem 0 .6rem}



.feature p{color:var(--muted)}



.ficon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:rgba(230,182,85,.1);border:1px solid rgba(230,182,85,.3)}



.ficon svg,.link svg,.tabbar svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}



.ficon svg{width:24px;color:var(--gold2)}



.factions{margin-top:clamp(2.5rem,6vw,4.5rem)}



.factions h3{font-size:1.3rem;margin-bottom:1.4rem}



.rank-chain{display:flex;align-items:stretch;justify-content:center;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}



.rank-chain em{align-self:center;font-style:normal;font-size:2rem;color:var(--muted)}



.fac{padding:1rem 1.4rem;border-radius:14px;border:1px solid var(--c);background:color-mix(in srgb,var(--c) 10%,transparent);display:flex;flex-direction:column;align-items:center;min-width:140px}



.fac i{width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 14px var(--c);margin-bottom:.5rem}



.fac b{font-family:var(--serif)}

 .fac span{font-size:.78rem;color:var(--muted)}



.fac.blau{--c:var(--blau)}

.fac.gelb{--c:var(--gelb)}

.fac.gruen{--c:var(--gruen)}

.fac.rot{--c:var(--rot)}





/* Karten-Galerie */

.filters{display:flex;gap:.5rem;overflow-x:auto;padding:.3rem .2rem 1rem;margin-bottom:.5rem;scrollbar-width:none;justify-content:center;flex-wrap:wrap}



.filters button,.pcount button{padding:.55rem 1.1rem;border-radius:99px;border:1px solid var(--line);background:rgba(255,255,255,.04);font-size:.88rem;white-space:nowrap;transition:.2s;min-height:42px}



.filters button:hover{border-color:rgba(255,255,255,.3)}



.filters button.on,.pcount button.on{background:var(--gold);color:#1a1205;border-color:var(--gold);font-weight:600}



.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:clamp(.8rem,2vw,1.5rem);margin-block:1rem 1.5rem}



.tcard{position:relative;border-radius:12px;aspect-ratio:673/1051;transition:transform .3s,box-shadow .3s;animation:pop .5s both;background:#0b0d1a}



.tcard img{width:100%;height:100%;border-radius:12px;object-fit:cover}



@media(hover:hover){.tcard:hover{transform:translateY(-8px) scale(1.04);z-index:2;box-shadow:0 22px 50px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.15)}

}



.tcard:active{transform:scale(.97)}



.tag{position:absolute;top:8px;left:50%;translate:-50% 0;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;background:rgba(7,8,15,.85);padding:.15rem .55rem;border-radius:99px;border:1px solid var(--rot);color:#ffb3aa}



@keyframes pop{from{opacity:0;transform:translateY(18px) scale(.96)}

}





/* Lightbox */

/* ============ LIGHTBOX MIT 3-SPALTEN-ANSICHT & LORE ============ */

.lightbox {

  position: fixed;

  inset: 0;

  z-index: 999;

  background: rgba(3, 5, 11, 0.95);

  backdrop-filter: blur(14px);

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 1.5rem;

  animation: fade .25s ease-out;

  overflow-y: auto;

  -webkit-overflow-scrolling: touch;

}



.lightbox[hidden] {

  display: none !important;

}



@keyframes fade { from { opacity: 0; }

 }



.lb-close {

  position: fixed;

  top: max(1.2rem, env(safe-area-inset-top));

  right: 1.5rem;

  width: 46px;

  height: 46px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.12);

  border: 1px solid rgba(255, 255, 255, 0.22);

  color: #fff;

  font-size: 1.25rem;

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 1010;

  cursor: pointer;

  transition: background .2s, transform .2s, border-color .2s;

}



.lb-close:hover {

  background: rgba(255, 255, 255, 0.25);

  border-color: #8fb0ff;

  transform: scale(1.08);

}



.lb-modal-container {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 2.2rem;

  max-width: 1380px;

  width: 100%;

  max-height: 92vh;

  margin: auto;

}



.lb-col {

  display: flex;

  flex-direction: column;

}



.lb-col-left, .lb-col-right {

  flex: 0 1 330px;

  max-width: 330px;

  max-height: 84vh;

  overflow-y: auto;

  scrollbar-width: thin;

  scrollbar-color: rgba(143, 176, 255, 0.3) transparent;

}



.lb-col-center {

  flex: 0 0 auto;

  align-items: center;

  text-align: center;

}



.lb-card-nav-wrap {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 1.2rem;

}



.lb-card {

  position: relative;

  height: min(64svh, 580px);

  aspect-ratio: 673/1051;

  border-radius: 18px;

  transition: transform .15s ease-out;

  box-shadow: 0 30px 90px rgba(0,0,0,0.85), 0 0 70px -10px var(--glow, rgba(143, 176, 255, 0.5));

  will-change: transform;

}



.lb-card img {

  height: 100%;

  width: 100%;

  border-radius: 18px;

  object-fit: cover;

  display: block;

}



.lb-shine {

  position: absolute;

  inset: 0;

  border-radius: 18px;

  pointer-events: none;

  background: radial-gradient(circle at var(--mx,50%) var(--my,30%), rgba(255,255,255,.26), transparent 48%);

  mix-blend-mode: overlay;

}



.lb-nav {

  width: 50px;

  height: 50px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.08);

  border: 1px solid rgba(255, 255, 255, 0.15);

  color: #fff;

  font-size: 2rem;

  line-height: 1;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  flex: none;

  transition: background .2s, transform .2s, border-color .2s;

}



.lb-nav:hover {

  background: rgba(143, 176, 255, 0.3);

  border-color: #8fb0ff;

  color: #fff;

  transform: scale(1.1);

}



.lb-card-caption {

  margin-top: 1rem;

  display: flex;

  flex-direction: column;

  gap: .25rem;

}



.lb-card-caption b {

  font-family: var(--serif);

  font-size: 1.35rem;

  color: #fff;

  letter-spacing: .05em;

  text-transform: uppercase;

}



.lb-card-caption span {

  color: #8fb0ff;

  font-size: .95rem;

  font-weight: 500;

}



.lb-card-caption small {

  color: var(--muted);

  font-size: .82rem;

}





/* Panel-Karten (Links & Rechts) */

.lb-panel-card {

  background: rgba(15, 20, 38, 0.88);

  border: 1px solid rgba(143, 176, 255, 0.28);

  border-radius: 18px;

  padding: 1.3rem 1.4rem;

  box-shadow: 0 15px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);

  backdrop-filter: blur(10px);

}



.lb-sec-badge {

  display: inline-block;

  font-size: .68rem;

  text-transform: uppercase;

  letter-spacing: .12em;

  font-weight: 700;

  color: #8fb0ff;

  background: rgba(143, 176, 255, 0.15);

  border: 1px solid rgba(143, 176, 255, 0.3);

  padding: .2rem .6rem;

  border-radius: 99px;

  margin-bottom: .6rem;

}



.lb-sec-badge.gold {

  color: #f0b429;

  background: rgba(240, 180, 41, 0.15);

  border-color: rgba(240, 180, 41, 0.35);

}



.lb-panel-title {

  font-family: var(--serif);

  font-size: 1.25rem;

  color: #fff;

  margin: 0 0 1rem;

}



.lb-stats-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: .6rem;

  margin-bottom: 1.1rem;

}



.lb-stat-box {

  background: rgba(7, 10, 22, 0.7);

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 10px;

  padding: .55rem .7rem;

}



.lb-stat-label {

  display: block;

  font-size: .68rem;

  color: var(--muted);

  text-transform: uppercase;

  letter-spacing: .05em;

  margin-bottom: .2rem;

}



.lb-stat-val {

  display: block;

  font-size: .88rem;

  color: #fff;

}



.lb-info-block {

  margin-top: .9rem;

  padding-top: .9rem;

  border-top: 1px solid rgba(255, 255, 255, 0.08);

}



.lb-info-block:first-of-type {

  border-top: none;

  padding-top: 0;

  margin-top: 0;

}



.lb-info-block h5 {

  font-size: .78rem;

  text-transform: uppercase;

  letter-spacing: .08em;

  color: #8fb0ff;

  margin: 0 0 .35rem;

}



.lb-info-block p {

  font-size: .88rem;

  line-height: 1.48;

  color: #cfd4e6;

  margin: 0;

}



.lb-quote-block {

  background: rgba(240, 180, 41, 0.06);

  border-radius: 10px;

  padding: .75rem .9rem;

  border-left: 3px solid #f0b429;

  border-top: none;

}



.lb-quote-block blockquote {

  margin: 0;

  font-style: italic;

  font-size: .86rem;

  line-height: 1.45;

  color: #f5eed8;

}





/* Anleitung */

.guide{display:grid;grid-template-columns:230px 1fr;gap:1.5rem;background:rgba(18,21,40,.6);border:1px solid var(--line);border-radius:22px;padding:1.2rem;backdrop-filter:blur(8px)}



.steps{display:flex;flex-direction:column;gap:.35rem}



.steps button{display:flex;align-items:center;gap:.8rem;padding:.8rem 1rem;border-radius:12px;text-align:left;color:var(--muted);transition:.2s;min-height:48px}



.steps button b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-size:.85rem;border:1px solid var(--line);flex:none}



.steps button:hover{background:rgba(255,255,255,.05);color:#fff}



.steps button.on{background:rgba(230,182,85,.12);color:#fff}



.steps button.on b{background:var(--gold);color:#1a1205;border-color:var(--gold)}



.panels{min-width:0;padding:.6rem .8rem 1rem}



.panel{display:none;animation:slide .4s}



.panel.on{display:block}



@keyframes slide{from{opacity:0;transform:translateX(16px)}

}



.panel h3{font-size:1.6rem;margin-bottom:1rem;color:var(--gold2)}



.panel p{margin-bottom:1rem}



.panel h4{font-size:1rem;margin-bottom:.4rem;color:var(--gold2)}



.mats{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:.8rem;margin:1.2rem 0}



.mats div{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;padding:1rem;text-align:center}



.mats b{display:block;font-family:var(--serif);font-size:2rem;color:var(--gold2)}



.mats span{font-size:.9rem}

 .mats small{color:var(--muted)}



.pcount{display:flex;gap:.5rem;margin-bottom:1.2rem}



.pcount button{width:52px;height:52px;border-radius:14px;font-family:var(--serif);font-size:1.2rem;padding:0}



.calc{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.7rem;margin-bottom:.8rem}



.calc div{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:12px;padding:.8rem 1rem}



.calc span{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}



.calc b{font-weight:600}



.ticks{list-style:none;padding:0;display:grid;gap:.7rem;margin-bottom:1.2rem}



.ticks li{padding-left:2rem;position:relative}



.ticks li::before{content:"◆";position:absolute;left:.2rem;color:var(--gold);font-size:.8rem;top:.2rem}



.coinrow{display:flex;align-items:center;gap:.5rem;padding:1rem;background:rgba(255,255,255,.04);border-radius:14px}



.coinrow i{width:32px;height:32px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffe9a8,#c8902f 60%,#7a5412);box-shadow:0 3px 8px rgba(0,0,0,.5),inset 0 0 0 3px rgba(0,0,0,.15)}



.coinrow span{margin-left:.6rem;color:var(--muted);font-style:italic}



.two{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-bottom:1rem}



.box{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;padding:1.1rem 1.2rem}



.box p{margin:0;color:#d4d0e4;font-size:.95rem}



.box.good{border-color:rgba(63,191,127,.5);background:rgba(63,191,127,.07)}



.box.bad{border-color:rgba(255,90,71,.5);background:rgba(255,90,71,.07)}



.box.mini{display:flex;gap:1rem;align-items:center}



.box.mini img{width:70px;border-radius:7px;flex:none}



.ladder{list-style:none;padding:0;display:grid;gap:.5rem;margin-bottom:1.2rem}



.ladder li{display:flex;flex-direction:column;padding:.8rem 1.1rem;border-radius:12px;border-left:4px solid var(--c);background:color-mix(in srgb,var(--c) 10%,transparent);margin-left:calc((5 - var(--n)) * 0px)}



.ladder li span{font-size:.85rem;color:var(--muted)}



.l5{--c:#fff;--n:5}

.l4{--c:var(--gold);--n:4}

.l3{--c:var(--blau);--n:3}

.l2{--c:#6b6a80;--n:2}

.l1{--c:#4a4960;--n:1}



.special{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:.6rem;margin-bottom:1.2rem}



.special button{border-radius:8px;opacity:.55;transition:.2s;border:2px solid transparent}



.special button.on{opacity:1;border-color:var(--gold);transform:translateY(-4px)}



.special img{border-radius:6px;width:100%}



.special-info{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:14px;padding:1.2rem}



.special-info p{margin:0}



.pnav{display:flex;justify-content:space-between;margin-top:1.8rem;padding-top:1.2rem;border-top:1px solid var(--line)}





.rulebook{margin-top:clamp(3rem,7vw,5rem);margin-bottom:4rem;text-align:center;position:relative;z-index:10;scroll-margin-top:calc(var(--top) + 1.5rem)}



.rulebook h3{font-size:1.5rem;margin-bottom:.4rem}



.book{position:relative;margin:1.5rem auto 0.8rem;max-width:560px}



.book img{width:100%;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.7);cursor:zoom-in;aspect-ratio:2480/3508;background:#10121f;display:block}



.book-nav-bar{display:flex;align-items:center;justify-content:center;gap:1.4rem;margin:1.2rem auto 1.4rem}



.bk-nav{width:46px;height:46px;border-radius:50%;background:rgba(12,15,30,.88);border:1px solid rgba(230,182,85,.45);color:var(--gold);font-size:1.8rem;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s;backdrop-filter:blur(8px)}



.bk-nav:hover{background:rgba(230,182,85,.2);border-color:var(--gold);color:#fff;transform:scale(1.08)}



.bk-dots{display:flex;gap:.5rem;justify-content:center;align-items:center}



.bk-dots button{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.25);padding:0;cursor:pointer}



.bk-dots button.on{background:var(--gold);width:28px;border-radius:6px}



.rulebook-cta-wrap{display:flex;flex-direction:column;align-items:center;gap:.85rem;margin-top:1.4rem;margin-bottom:6rem;padding-bottom:2.5rem}



.pnp-badge{display:inline-block;white-space:normal !important;text-align:center;line-height:1.4;padding:.5rem 1rem;max-width:92%;box-sizing:border-box}



.rulebook .btn{margin:.2rem}





/* Video */

.video{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:#000;box-shadow:0 30px 80px rgba(0,0,0,.6)}



.vposter{width:100%;height:100%;object-fit:cover;filter:blur(2px) brightness(.45);transform:scale(1.1)}



.vover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}



.play{width:84px;height:84px;border-radius:50%;background:linear-gradient(135deg,#f6d27a,#c8902f);display:grid;place-items:center;box-shadow:0 0 0 12px rgba(230,182,85,.2);transition:.3s}



.play:hover{transform:scale(1.08)}



.play svg{width:34px;fill:#1a1205;margin-left:4px}



.video iframe,.video video{position:absolute;inset:0;width:100%;height:100%;border:0}



.video.playing .vposter,.video.playing .vover{display:none}



.video{margin-bottom:1rem}





/* Play */

.playbox{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}



.play-table{border-radius:24px;padding:1.2rem;background:radial-gradient(ellipse at 50% 40%,#1b6b4f,#0b3326 70%);border:6px solid #2a1c10;box-shadow:inset 0 0 70px rgba(0,0,0,.6),0 30px 70px rgba(0,0,0,.6);aspect-ratio:4/3.3;display:flex;flex-direction:column;justify-content:space-between;align-items:center;position:relative;overflow:hidden}



.seat span{display:inline-block;padding:.3rem 1rem;border-radius:99px;background:rgba(0,0,0,.4);font-size:.8rem}



.mid-cards{display:flex;gap:.4rem;justify-content:center}



.mid-cards img{width:clamp(48px,11%,80px);border-radius:6px;box-shadow:0 8px 20px rgba(0,0,0,.5)}



.mid-cards img:nth-child(1){rotate:-8deg}

.mid-cards img:nth-child(3){rotate:8deg}



.felt{flex:1;display:grid;place-items:center}



.hand{display:flex;justify-content:center;margin-bottom:-12%}



.hand img{width:clamp(56px,16%,100px);border-radius:7px;margin-inline:-1.4%;box-shadow:0 8px 20px rgba(0,0,0,.6);transition:.3s;transform-origin:50% 130%}



.hand img:nth-child(1){rotate:-9deg;translate:0 6px}

.hand img:nth-child(2){rotate:-3deg}

.hand img:nth-child(3){rotate:3deg}

.hand img:nth-child(4){rotate:9deg;translate:0 6px}



.play-table:hover .hand img{translate:0 -12px}



.badge{display:inline-block;padding:.3rem .9rem;border-radius:99px;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--gold);color:var(--gold2);margin-bottom:1.2rem}





/* ==========================================================================

   BUCH & WELTENBIBEL: CORBIN & ELOWEN

   ========================================================================== */

.book-teaser{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(1.5rem,5vw,4rem);align-items:center}



.bt-cards{position:relative;height:420px}



.bt-cards img{position:absolute;width:min(48%,230px);border-radius:12px;box-shadow:0 24px 60px rgba(0,0,0,.7)}



.bt-cards img:first-child{left:6%;top:6%;rotate:-8deg}

.bt-cards img:last-child{right:6%;bottom:0;rotate:7deg}



.bt-text h2{font-size:clamp(1.8rem,4vw,2.8rem);margin:.5rem 0 1rem}



.bt-text p{margin-bottom:1rem}





.book-hero {

  display: grid;

  grid-template-columns: 1fr 1.15fr;

  gap: clamp(2rem, 5vw, 4rem);

  align-items: center;

  background: linear-gradient(135deg, rgba(20, 24, 46, 0.75), rgba(10, 12, 22, 0.95));

  border: 1px solid rgba(230, 182, 85, 0.25);

  border-radius: 24px;

  padding: clamp(1.8rem, 4vw, 3.5rem);

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);

  position: relative;

  overflow: hidden;

  margin-bottom: clamp(2rem, 5vw, 3.5rem);

}



.book-hero::before {

  content: "";

  position: absolute;

  top: -50%;

  left: -20%;

  width: 140%;

  height: 200%;

  background: radial-gradient(circle at 30% 40%, rgba(199, 125, 255, 0.12), transparent 45%),

              radial-gradient(circle at 70% 60%, rgba(230, 182, 85, 0.1), transparent 50%);

  pointer-events: none;

  z-index: 0;

}



.bh-duo-cards {

  position: relative;

  height: clamp(340px, 35vw, 460px);

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 1;

}



.bh-card-corbin, .bh-card-elowen {

  position: absolute;

  width: min(54%, 230px);

  border-radius: 14px;

  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8), 0 0 25px rgba(0, 0, 0, 0.5);

  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;

  cursor: pointer;

}



.bh-card-corbin {

  left: 6%;

  top: 10%;

  transform: rotate(-7deg) scale(0.97);

  border: 1px solid rgba(199, 125, 255, 0.4);

}



.bh-card-elowen {

  right: 6%;

  bottom: 8%;

  transform: rotate(6deg);

  border: 1px solid rgba(79, 140, 255, 0.5);

}



.bh-duo-cards:hover .bh-card-corbin {

  transform: rotate(-12deg) translate(-10px, -8px) scale(1.02);

  box-shadow: 0 30px 70px rgba(199, 125, 255, 0.25);

}



.bh-duo-cards:hover .bh-card-elowen {

  transform: rotate(10deg) translate(10px, 6px) scale(1.03);

  box-shadow: 0 30px 70px rgba(79, 140, 255, 0.3);

}



.bh-content {

  position: relative;

  z-index: 1;

}



.bh-pill-row {

  display: flex;

  flex-wrap: wrap;

  gap: 0.5rem;

  margin-bottom: 0.9rem;

}



.bh-pill {

  font-size: 0.72rem;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  padding: 0.28rem 0.75rem;

  border-radius: 99px;

  background: rgba(255, 255, 255, 0.06);

  border: 1px solid var(--line);

  color: var(--muted);

}



.bh-pill.gold {

  border-color: rgba(230, 182, 85, 0.4);

  color: var(--gold2);

  background: rgba(230, 182, 85, 0.08);

}



.bh-title {

  font-size: clamp(2rem, 4.2vw, 3.2rem);

  line-height: 1.1;

  margin: 0.3rem 0 0.4rem;

  background: linear-gradient(135deg, #ffffff 30%, var(--gold2) 100%);

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

}



.bh-subtitle {

  font-size: clamp(1rem, 2vw, 1.22rem);

  font-family: var(--serif);

  color: var(--gold);

  margin-bottom: 1.1rem;

  letter-spacing: 0.06em;

}



.bh-desc {

  font-size: 1rem;

  line-height: 1.68;

  color: #cfcfe0;

  margin-bottom: 1.4rem;

}



.bh-featured-quote {

  background: rgba(14, 17, 33, 0.85);

  border-left: 3px solid var(--gold);

  border-radius: 0 12px 12px 0;

  padding: 0.9rem 1.3rem;

  margin-bottom: 1.5rem;

  font-style: italic;

  color: #f0e6d6;

  font-size: 0.96rem;

  line-height: 1.6;

}



.bh-featured-quote cite {

  display: block;

  font-style: normal;

  font-size: 0.8rem;

  color: var(--gold2);

  margin-top: 0.4rem;

  letter-spacing: 0.08em;

  text-transform: uppercase;

}



.bh-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 0.9rem;

  align-items: center;

}





/* Tab Navigation */

.book-tabs-nav {

  display: flex;

  gap: 0.6rem;

  justify-content: center;

  flex-wrap: wrap;

  margin: 1.5rem 0 2.5rem;

  border-bottom: 1px solid var(--line);

  padding-bottom: 1.2rem;

}



.book-tab-btn {

  display: inline-flex;

  align-items: center;

  gap: 0.55rem;

  padding: 0.72rem 1.35rem;

  border-radius: 99px;

  font-family: var(--serif);

  font-size: 0.9rem;

  letter-spacing: 0.05em;

  color: var(--muted);

  border: 1px solid transparent;

  background: rgba(255, 255, 255, 0.03);

  transition: all 0.25s ease;

}



.book-tab-btn:hover {

  color: #ffffff;

  border-color: rgba(255, 255, 255, 0.15);

  background: rgba(255, 255, 255, 0.06);

}



.book-tab-btn.active {

  color: var(--gold2);

  border-color: rgba(230, 182, 85, 0.5);

  background: linear-gradient(135deg, rgba(230, 182, 85, 0.15), rgba(20, 24, 46, 0.4));

  box-shadow: 0 4px 20px rgba(230, 182, 85, 0.18);

}



.book-tab-btn svg {

  width: 17px;

  height: 17px;

  fill: currentColor;

}





/* Tab Panels */

.book-tab-panel {

  display: none;

  animation: bookFadeIn 0.35s ease-out forwards;

}



.book-tab-panel.active {

  display: block;

}



@keyframes bookFadeIn {

  from { opacity: 0; transform: translateY(12px); }



  to { opacity: 1; transform: translateY(0); }



}





/* Panel 1: Charaktere */

.book-chars-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));

  gap: 2rem;

}



.book-char-card {

  background: linear-gradient(180deg, rgba(24, 28, 54, 0.7), rgba(12, 14, 28, 0.9));

  border: 1px solid var(--line);

  border-radius: 20px;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;

}



.book-char-card:hover {

  transform: translateY(-6px);

  border-color: rgba(230, 182, 85, 0.4);

  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);

}



.bcc-top {

  display: grid;

  grid-template-columns: 110px 1fr;

  gap: 1.2rem;

  padding: 1.3rem;

  align-items: center;

  border-bottom: 1px solid rgba(255, 255, 255, 0.06);

}



.bcc-avatar {

  width: 110px;

  height: 156px;

  border-radius: 10px;

  overflow: hidden;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);

  border: 1px solid rgba(255, 255, 255, 0.1);

  background: #0d1020;

  flex-shrink: 0;

}



.bcc-avatar img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.4s ease;

}



.book-char-card:hover .bcc-avatar img {

  transform: scale(1.05);

}



.bcc-meta {

  display: flex;

  flex-direction: column;

  gap: 0.3rem;

}



.bcc-faction-tag {

  font-size: 0.72rem;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: var(--gold2);

  display: inline-flex;

  align-items: center;

  gap: 0.4rem;

}



.bcc-name {

  font-size: 1.3rem;

  color: #ffffff;

  margin: 0;

}



.bcc-role {

  font-size: 0.85rem;

  color: var(--muted);

  font-family: var(--serif);

}



.bcc-body {

  padding: 1.3rem;

  display: flex;

  flex-direction: column;

  gap: 1rem;

  flex: 1;

}



.bcc-lore {

  font-size: 0.92rem;

  line-height: 1.65;

  color: #cfcfe0;

}



.bcc-quote {

  background: rgba(7, 8, 15, 0.75);

  border-left: 2px solid var(--gold);

  border-radius: 0 8px 8px 0;

  padding: 0.85rem 1.1rem;

  font-style: italic;

  font-size: 0.88rem;

  color: #f7e6ce;

  line-height: 1.55;

  margin-top: auto;

}





/* Panel 2: Kuppelstädte */

.book-cities-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

  gap: 2rem;

}



.book-city-card {

  background: linear-gradient(180deg, rgba(22, 26, 48, 0.7), rgba(10, 12, 24, 0.9));

  border: 1px solid var(--line);

  border-radius: 20px;

  overflow: hidden;

  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;

  display: flex;

  flex-direction: column;

}



.book-city-card:hover {

  transform: translateY(-6px);

  border-color: rgba(230, 182, 85, 0.35);

  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);

}



.book-city-img-wrap {

  position: relative;

  height: 190px;

  overflow: hidden;

  background: #080a14;

}



.book-city-img-wrap img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.5s ease;

}



.book-city-card:hover .book-city-img-wrap img {

  transform: scale(1.06);

}



.book-city-badge {

  position: absolute;

  bottom: 12px;

  left: 14px;

  background: rgba(7, 8, 15, 0.85);

  backdrop-filter: blur(8px);

  border: 1px solid rgba(255, 255, 255, 0.15);

  padding: 0.25rem 0.75rem;

  border-radius: 99px;

  font-size: 0.72rem;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: var(--gold2);

}



.book-city-body {

  padding: 1.4rem;

  display: flex;

  flex-direction: column;

  gap: 0.9rem;

  flex: 1;

}



.book-city-body h3 {

  font-size: 1.35rem;

  color: #ffffff;

  margin: 0;

}



.book-city-subtitle {

  font-size: 0.85rem;

  color: var(--muted);

  font-family: var(--serif);

  margin-top: -0.5rem;

}



.book-city-desc {

  font-size: 0.92rem;

  line-height: 1.65;

  color: #cfcfe0;

}



.book-city-features {

  display: flex;

  flex-wrap: wrap;

  gap: 0.4rem;

  margin: 0.2rem 0;

}



.bcf-tag {

  font-size: 0.74rem;

  background: rgba(255, 255, 255, 0.05);

  border: 1px solid rgba(255, 255, 255, 0.08);

  padding: 0.2rem 0.6rem;

  border-radius: 6px;

  color: #bac2de;

}



.book-city-quote {

  background: rgba(7, 8, 15, 0.75);

  border-left: 2px solid var(--gold);

  border-radius: 0 8px 8px 0;

  padding: 0.85rem 1.1rem;

  font-style: italic;

  font-size: 0.88rem;

  color: #f7e6ce;

  line-height: 1.55;

  margin-top: auto;

}





/* Panel 3: Weltenbibel Lore Grid */

.book-lore-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  gap: 1.8rem;

}



.book-lore-card {

  background: linear-gradient(180deg, rgba(22, 26, 48, 0.7), rgba(10, 12, 24, 0.9));

  border: 1px solid var(--line);

  border-radius: 20px;

  padding: 1.8rem;

  display: flex;

  flex-direction: column;

  gap: 1rem;

  transition: transform 0.3s ease, border-color 0.3s ease;

}



.book-lore-card:hover {

  transform: translateY(-5px);

  border-color: rgba(230, 182, 85, 0.35);

}



.blc-icon-wrap {

  width: 50px;

  height: 50px;

  border-radius: 14px;

  background: rgba(230, 182, 85, 0.12);

  border: 1px solid rgba(230, 182, 85, 0.3);

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--gold2);

  margin-bottom: 0.2rem;

}



.blc-icon-wrap svg {

  width: 24px;

  height: 24px;

  fill: currentColor;

}



.book-lore-card h3 {

  font-size: 1.25rem;

  color: #ffffff;

  margin: 0;

}



.book-lore-card p {

  font-size: 0.92rem;

  line-height: 1.65;

  color: #cfcfe0;

}





/* Panel 4: Leseprobe */

.book-sample-container {

  max-width: 860px;

  margin: 0 auto;

  background: linear-gradient(180deg, rgba(20, 23, 42, 0.85), rgba(9, 11, 22, 0.95));

  border: 1px solid rgba(230, 182, 85, 0.3);

  border-radius: 24px;

  padding: clamp(1.8rem, 5vw, 3.8rem);

  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7);

  position: relative;

}



.bsc-header {

  text-align: center;

  margin-bottom: 2.2rem;

  border-bottom: 1px solid rgba(230, 182, 85, 0.2);

  padding-bottom: 1.4rem;

}



.bsc-badge {

  font-size: 0.76rem;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  color: var(--gold);

  margin-bottom: 0.4rem;

  display: inline-block;

}



.bsc-header h3 {

  font-size: clamp(1.5rem, 3.5vw, 2.3rem);

  color: #ffffff;

  margin: 0.2rem 0 0.4rem;

}



.bsc-location {

  font-size: 0.92rem;

  color: var(--muted);

  font-style: italic;

}



.bsc-prose {

  font-size: 1.02rem;

  line-height: 1.85;

  color: #e2dfed;

  display: flex;

  flex-direction: column;

  gap: 1.5rem;

}



.bsc-prose p:first-of-type::first-letter {

  font-family: var(--serif);

  font-size: 3.2rem;

  float: left;

  line-height: 0.8;

  margin: 0.15rem 0.5rem 0 0;

  color: var(--gold2);

  font-weight: 700;

}



.bsc-dialogue {

  background: rgba(14, 17, 33, 0.8);

  border-left: 3px solid var(--gold);

  border-radius: 0 10px 10px 0;

  padding: 1.1rem 1.5rem;

  font-style: italic;

  color: #f7e8d3;

}



.bsc-cta-box {

  margin-top: 2.8rem;

  background: linear-gradient(135deg, rgba(230, 182, 85, 0.12), rgba(20, 24, 46, 0.6));

  border: 1px solid rgba(230, 182, 85, 0.35);

  border-radius: 16px;

  padding: 1.8rem;

  text-align: center;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 1rem;

}



.bsc-cta-box h4 {

  font-size: 1.25rem;

  color: var(--gold2);

  margin: 0;

}



.bsc-cta-box p {

  font-size: 0.94rem;

  color: #cfcfe0;

  max-width: 600px;

  line-height: 1.6;

  margin: 0;

}





/* Romantische Zitate Kacheln */

.book-quotes-trio {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));

  gap: 1.5rem;

  margin-top: 3.5rem;

}



.book-quote-pill-card {

  background: linear-gradient(135deg, rgba(24, 28, 54, 0.5), rgba(10, 12, 22, 0.7));

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 16px;

  padding: 1.4rem 1.6rem;

  display: flex;

  flex-direction: column;

  gap: 0.6rem;

  transition: transform 0.25s ease, border-color 0.25s ease;

}



.book-quote-pill-card:hover {

  transform: translateY(-4px);

  border-color: rgba(230, 182, 85, 0.3);

}



.bqp-text {

  font-style: italic;

  font-size: 0.92rem;

  color: #f0e6d6;

  line-height: 1.6;

}



.bqp-author {

  font-size: 0.78rem;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  color: var(--gold);

  font-family: var(--serif);

}





@media (max-width: 960px) {

  .book-hero {

    grid-template-columns: 1fr;

    text-align: center;

    padding: 1.8rem 1.4rem;

  }



  .bh-duo-cards {

    height: 300px;

  }



  .bh-pill-row, .bh-actions {

    justify-content: center;

  }



  .bh-featured-quote {

    text-align: left;

  }



  .bcc-top {

    grid-template-columns: 1fr;

    text-align: center;

    justify-items: center;

  }



  .bcc-avatar {

    margin: 0 auto;

  }



}





/* Links */

.links{display:grid;gap:.8rem}



.link{display:flex;align-items:center;gap:1rem;padding:1.1rem 1.4rem;border-radius:16px;border:1px solid var(--line);background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.02));text-decoration:none;transition:.25s;min-height:68px}



.link svg{width:28px;height:28px;flex:none;color:var(--gold2)}



.link span{flex:1;display:flex;flex-direction:column}



.link small{color:var(--muted);font-size:.82rem}



.link em{font-style:normal;font-size:1.6rem;color:var(--gold);transition:.25s}



.link i{font-style:normal;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);padding:.2rem .6rem;border-radius:99px}



a.link:hover{transform:translateX(6px);border-color:var(--gold);background:rgba(230,182,85,.08)}



a.link:hover em{translate:4px 0}



.link.off{opacity:.55}





.footer{text-align:center;padding:3rem 1rem calc(3rem + var(--tab) + env(safe-area-inset-bottom));border-top:1px solid var(--line)}



.brand-foot{font-family:var(--serif);font-weight:900;letter-spacing:.5em;color:var(--gold);margin-bottom:.6rem}



.footer a{color:var(--muted)}





/* Tabbar (nur Handy) */

.tabbar{display:none}





/* ---------- Reveal ---------- */

.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1)}



.reveal.in{opacity:1;transform:none}





/* ---------- Tablet ---------- */

@media(max-width:960px){

  .topnav{display:none}

.topcta{margin-left:auto}



  .hero{grid-template-columns:1fr;text-align:center;padding-top:calc(var(--top) + 1rem)}



  .hero-inner{margin-inline:auto}



  .cta-row,.facts{justify-content:center}



  .hero-cards{display:none !important}



  .guide{grid-template-columns:1fr}



  .steps{flex-direction:row;overflow-x:auto;scrollbar-width:none;margin:-.2rem -.2rem 0;padding:.2rem}



  .steps button{flex:none;flex-direction:column;gap:.3rem;padding:.6rem .8rem;min-width:84px;text-align:center}



  .steps button span{font-size:.75rem}



  .playbox,.book-teaser{grid-template-columns:1fr}



  .bt-cards{height:340px}



  /* bk-nav in nav-bar */

}





/* ---------- Handy: wie eine App ---------- */

@media(max-width:760px){

  :root{--top:56px}



  body{padding-bottom:calc(var(--tab) + env(safe-area-inset-bottom))}



  .topbar{background:rgba(7,8,15,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}



  .topcta{display:none}



  .brand{margin-inline:auto;font-size:1.05rem}



  .tabbar{display:flex;position:fixed;inset:auto 0 0;z-index:60;height:calc(var(--tab) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:rgba(10,12,24,.9);backdrop-filter:blur(18px) saturate(1.5);border-top:1px solid var(--line)}



  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-decoration:none;color:var(--muted);font-size:.68rem;transition:.2s;position:relative}



  .tabbar svg{width:24px;height:24px}



  .tabbar a.on{color:var(--gold2)}



  .tabbar a.on::before{content:"";position:absolute;top:0;width:28px;height:3px;border-radius:0 0 4px 4px;background:var(--gold)}



  .tabbar a:active{transform:scale(.9)}



  .tabbar .mid svg{width:50px;height:50px;padding:13px;border-radius:50%;background:linear-gradient(135deg,#f6d27a,#c8902f);stroke:none;fill:#1a1205;margin-top:-22px;box-shadow:0 6px 20px rgba(230,182,85,.45),0 0 0 5px var(--bg)}



  .tabbar .mid span{color:var(--gold2)}



  .section{padding:3.2rem 0}



  .hero{min-height:auto;padding-bottom:3.5rem}



  .scroll-hint{display:none}



  .hero-cards{height:290px}



  .hc{width:34%}



  .cta-row .btn{flex:1 1 100%}



  .facts{gap:1.4rem 2rem}



  .card-grid{grid-template-columns:repeat(3,1fr);gap:.55rem}



  .filters{flex-wrap:nowrap;justify-content:flex-start;margin-inline:-1.2rem;padding-inline:1.2rem}



  .tag{display:none}



  .two{grid-template-columns:1fr}



  .guide{padding:.7rem;border-radius:18px}



  .panels{padding:.4rem .3rem .8rem}



  .panel h3{font-size:1.35rem}



  .lightbox {

    padding: 1rem .8rem 4.5rem;

    align-items: flex-start;

  }



  .lb-modal-container {

    flex-direction: column;

    align-items: center;

    max-height: none;

    gap: 1.3rem;

    margin-top: 2.8rem;

  }



  .lb-col-center {

    order: 1;

    width: 100%;

  }



  .lb-card {

    height: min(52vh, 400px);

  }



  .lb-col-left {

    order: 2;

    max-width: 520px;

    width: 100%;

    max-height: none;

    overflow: visible;

  }



  .lb-col-right {

    order: 3;

    max-width: 520px;

    width: 100%;

    max-height: none;

    overflow: visible;

  }



  .lb-close {

    top: 1rem;

    right: 1rem;

    width: 42px;

    height: 42px;

  }



  .play-table{aspect-ratio:1/1.05}



  .footer{padding-bottom:calc(2rem + var(--tab) + env(safe-area-inset-bottom))}



}



@media(max-width:380px){.card-grid{grid-template-columns:repeat(2,1fr)}

}





@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}

.reveal{opacity:1;transform:none}

html{scroll-behavior:auto}

}







/* Feinschliff Handy */

@media(max-width:760px){.mats{grid-template-columns:repeat(3,1fr);gap:.5rem}

.mats div{padding:.7rem .3rem}

.mats b{font-size:1.5rem}

.mats span{font-size:.78rem}

.rank-chain{display:grid;grid-template-columns:1fr 1fr}

.rank-chain em{display:none}

.fac{min-width:0}

}





/* ===== Button-Stile (A Glas · B Saphir · C Hell) – ersetzt Gold ===== */

:root{--b-bg:linear-gradient(135deg,#5b6cff,#8a4bff);--b-fg:#fff;--b-bd:transparent;--b-sh:0 6px 28px rgba(110,80,255,.4);--b-hover-sh:0 10px 36px rgba(138,75,255,.65);--b-on-bg:linear-gradient(135deg,#5b6cff,#8a4bff);--b-on-fg:#fff}



html[data-btn="b"]{--b-bg:linear-gradient(135deg,#5b6cff,#8a4bff);--b-fg:#fff;--b-bd:transparent;--b-sh:0 6px 28px rgba(110,80,255,.4);--b-hover-sh:0 10px 36px rgba(138,75,255,.65);--b-on-bg:linear-gradient(135deg,#5b6cff,#8a4bff);--b-on-fg:#fff}



html[data-btn="c"]{--b-bg:#f1eff9;--b-fg:#12142a;--b-bd:transparent;--b-sh:0 6px 24px rgba(255,255,255,.14);--b-hover-sh:0 10px 34px rgba(255,255,255,.3);--b-on-bg:#f1eff9;--b-on-fg:#12142a}



html[data-btn="gold"] {

  --b-bg: linear-gradient(135deg, #f0be53 0%, #cf8424 50%, #94530c 100%);

  --b-fg: #130d03;

  --b-bd: rgba(255, 230, 160, 0.45);

  --b-sh: 0 6px 28px rgba(220, 145, 30, 0.45), 0 0 16px rgba(240, 186, 82, 0.35);

  --b-hover-sh: 0 10px 38px rgba(240, 165, 40, 0.65), 0 0 28px rgba(255, 215, 120, 0.55);

  --b-on-bg: linear-gradient(135deg, #f0be53, #c87c1f);

  --b-on-fg: #120d03;

}



html[data-btn="obsidian"] {

  --b-bg: linear-gradient(135deg, #3d2b6b 0%, #1e1534 100%);

  --b-fg: #f5f0ff;

  --b-bd: rgba(186, 125, 255, 0.35);

  --b-sh: 0 6px 28px rgba(95, 45, 160, 0.45), 0 0 16px rgba(186, 125, 255, 0.25);

  --b-hover-sh: 0 10px 38px rgba(135, 65, 220, 0.65), 0 0 26px rgba(200, 145, 255, 0.45);

  --b-on-bg: linear-gradient(135deg, #53398f, #2a1c4d);

  --b-on-fg: #f5f0ff;

}



.btn-gold{background:var(--b-bg);color:var(--b-fg);border:1px solid var(--b-bd);box-shadow:var(--b-sh);backdrop-filter:blur(8px)}



.btn-gold:hover{box-shadow:var(--b-hover-sh)}



.filters button.on,.pcount button.on{background:var(--b-on-bg);color:var(--b-on-fg);border-color:var(--b-bd);font-weight:600}



html[data-btn="c"] .filters button.on,html[data-btn="c"] .pcount button.on{border-color:#f1eff9}



.steps button.on b{background:var(--b-on-bg);color:var(--b-on-fg);border-color:transparent}



.play{background:var(--b-bg);border:1px solid var(--b-bd);box-shadow:0 0 0 12px rgba(150,170,255,.14)}



.play svg{fill:var(--b-fg)}



.tabbar .mid svg{background:var(--b-bg);fill:var(--b-fg);box-shadow:0 6px 20px rgba(110,130,255,.4),0 0 0 5px var(--bg)}



.tabbar .mid span,.tabbar a.on{color:#cfdcff}



.tabbar a.on::before{background:#8fb0ff}



.lb-nav:hover{background:var(--b-on-bg);color:var(--b-on-fg)}



.soon{background:#8fb0ff;color:#0a0e20}



.bk-dots button.on{background:#8fb0ff}



.scroll-hint span{background:#8fb0ff}



.topcta{box-shadow:var(--b-sh)}





/* Switcher (nur zum Ausprobieren) */

.btnsw{display:none !important;position:fixed;right:12px;bottom:calc(var(--tab) + 14px + env(safe-area-inset-bottom));z-index:90;display:flex;gap:4px;align-items:center;padding:6px 8px;border-radius:14px;background:rgba(10,12,24,.92);border:1px solid var(--line);font-size:.72rem;backdrop-filter:blur(10px)}



.btnsw span{color:var(--muted);padding:0 4px}



.btnsw button{padding:6px 10px;border-radius:9px;background:rgba(255,255,255,.07);font-size:.72rem;min-height:32px}



.btnsw button.on{background:#fff;color:#000;font-weight:600}



@media(min-width:761px){.btnsw{bottom:14px}

}





/* Fraktionen mit Original-Icons */

.fac img{width:58px;height:58px;border-radius:14px;margin-bottom:.5rem;box-shadow:0 0 22px color-mix(in srgb,var(--c) 55%,transparent);border:2px solid var(--c)}



.fac small{margin-top:.4rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--c)}



.factions>p.muted{max-width:680px;margin:0 auto 1.4rem}



.filters button img{display:inline-block;width:20px;height:20px;border-radius:6px;vertical-align:-5px;margin-right:6px}





/* Regeln: klare Blöcke */

.rules{display:grid;gap:.7rem;margin:1rem 0}



.rule{border-radius:12px;padding:.9rem 1.1rem;border-left:5px solid var(--c);background:color-mix(in srgb,var(--c) 9%,transparent)}



.rule b{display:block;margin-bottom:.2rem}



.rule p{margin:0;font-size:.95rem;color:#d9d6e8}



.rule.ok{--c:#3fbf7f}

.rule.warn{--c:#f0b429}



.flow{list-style:none;padding:0;margin:1.2rem 0;counter-reset:f;position:relative}



.flow li{display:grid;grid-template-columns:44px 1fr;gap:1rem;padding-bottom:1.4rem;position:relative}



.flow li::before{content:"";position:absolute;left:21px;top:44px;bottom:0;width:2px;background:linear-gradient(#8fb0ff,transparent)}



.flow li.last::before{display:none}



.flow .n{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:1.1rem;background:#1b2350;border:2px solid #8fb0ff;color:#fff}



.flow h4{color:#fff;font-size:1.02rem;margin-bottom:.4rem;font-family:var(--body);font-weight:600;letter-spacing:0}



.flow h4 u{text-decoration-color:#8fb0ff;text-underline-offset:4px}



.flow p{margin:0 0 .5rem;font-size:.97rem}



.note{padding:1rem 1.2rem;border-radius:12px;background:rgba(143,176,255,.1);border:1px solid rgba(143,176,255,.35);margin-bottom:1.2rem}



.trumps{display:flex;gap:6px;overflow-x:auto;padding:.6rem 0 .3rem;scrollbar-width:thin}



.trumps .tg{display:flex;gap:4px;padding:6px;border-radius:12px;border:1px solid var(--c);background:color-mix(in srgb,var(--c) 10%,transparent);flex:none}



.trumps figure{width:50px;position:relative}



.trumps img{border-radius:5px;width:100%}



.trumps figcaption{position:absolute;inset:auto 0 -2px;text-align:center;font:700 .7rem var(--serif);background:rgba(0,0,0,.75);border-radius:0 0 5px 5px}



.trumps .tg.blau{--c:var(--blau)}

.trumps .tg.gelb{--c:var(--gelb)}

.trumps .tg.gruen{--c:var(--gruen)}

.trumps .tg.rot{--c:var(--rot)}



.seq{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-bottom:.4rem}



.seq i{font-style:normal;font-family:var(--serif);font-weight:700;min-width:42px;text-align:center;padding:.3rem .5rem;border-radius:8px;background:rgba(255,255,255,.07);border:1px solid var(--line)}



.seq i:not(:last-child)::after{content:"›";color:var(--muted);margin-left:10px;position:absolute;margin-top:-1px}



.seq i{position:relative;margin-right:10px}



.seq i:first-child{border-color:#8fb0ff}



/* Quiz */

.quiz{margin-top:1.6rem;padding:1.3rem;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--line)}



.q-cards{display:flex;gap:.6rem;margin:.8rem 0;flex-wrap:wrap}



.q-cards figure{width:84px;text-align:center;font-size:.72rem;color:var(--muted)}



.q-cards img{border-radius:7px;margin-bottom:3px}



.q-opts{display:grid;gap:.5rem;margin:.6rem 0}



.q-opts button{padding:.75rem 1rem;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid var(--line);text-align:left;min-height:48px;transition:.2s}



.q-opts button:hover{border-color:#8fb0ff}



.q-opts button.right{background:rgba(63,191,127,.2);border-color:#3fbf7f}



.q-opts button.wrong{background:rgba(255,90,71,.18);border-color:#ff5a47}



.q-exp{padding:.8rem 1rem;border-radius:12px;background:rgba(143,176,255,.1);margin:.6rem 0}



.q-foot{display:flex;justify-content:space-between;align-items:center;gap:1rem}





.rule > b{display:block;margin-bottom:.2rem}



.rule b{display:inline}



.flow li>div{min-width:0}



.trumps{max-width:100%}



.rule > b:first-child{display:block;margin-bottom:.2rem}





/* ============ DEZENTER BODEN-BEGLEITER (BOTTOM WALKER) ============ */

.bottom-walker {

  position: fixed;

  bottom: 0px;

  left: 85%;

  z-index: 750;

  display: flex;

  flex-direction: column;

  align-items: center;

  pointer-events: none;

  transform: translateX(-50%);

  transition: opacity .3s ease;

  user-select: none;

}



.bottom-walker.is-hidden {

  display: none !important;

}



.bottom-walker * {

  pointer-events: auto;

}



.bw-body {

  position: relative;

  cursor: pointer;

  display: flex;

  align-items: flex-end;

  height: 68px;

  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.8));

  transition: transform .2s ease;

}



.bw-body:hover {

  transform: translateY(-3px) scale(1.05);

}



.bw-sprite {

  max-height: 68px;

  width: auto;

  object-fit: contain;

  transition: transform .2s ease;

}



.bw-bubble {

  position: absolute;

  bottom: 74px;

  left: 50%;

  transform: translateX(-50%) translateY(6px) scale(0.95);

  background: rgba(14, 18, 30, 0.95);

  border: 1px solid rgba(143, 176, 255, 0.35);

  color: #e2e8f0;

  padding: .45rem .85rem;

  border-radius: 12px;

  font-size: .8rem;

  line-height: 1.35;

  white-space: nowrap;

  pointer-events: none;

  opacity: 0;

  box-shadow: 0 8px 24px rgba(0,0,0,0.6);

  backdrop-filter: blur(8px);

  transition: opacity .25s ease, transform .25s cubic-bezier(0.2, 0.9, 0.3, 1.2);

  z-index: 2;

}



.bw-bubble.visible {

  opacity: 1;

  transform: translateX(-50%) translateY(0) scale(1);

}



.bw-bubble::after {

  content: "";

  position: absolute;

  bottom: -6px;

  left: 50%;

  transform: translateX(-50%);

  border-width: 6px 5px 0 5px;

  border-style: solid;

  border-color: rgba(14, 18, 30, 0.95) transparent transparent transparent;

}



.bw-ctrls {

  position: absolute;

  top: -24px;

  right: -24px;

  display: flex;

  align-items: center;

  gap: 4px;

  opacity: 0;

  pointer-events: none;

  transition: opacity .2s ease;

}



.bottom-walker:hover .bw-ctrls {

  opacity: 1;

  pointer-events: auto;

}



.bw-select {

  background: rgba(14, 18, 30, 0.92);

  border: 1px solid rgba(143, 176, 255, 0.3);

  color: #fff;

  font-size: .68rem;

  padding: 2px 5px;

  border-radius: 6px;

  cursor: pointer;

  outline: none;

}



.bw-select option {

  background: #0d121f;

  color: #fff;

}



.bw-close {

  background: rgba(14, 18, 30, 0.92);

  border: 1px solid rgba(255, 90, 71, 0.4);

  color: #ff9b8e;

  font-size: .68rem;

  width: 19px;

  height: 19px;

  border-radius: 50%;

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 0;

  line-height: 1;

  transition: background .2s, color .2s;

}



.bw-close:hover {

  background: #ff5a47;

  color: #fff;

}





/* Navbar Toggle Button */

.btn-cmp-toggle {

  display: inline-flex;

  align-items: center;

  gap: .45rem;

  font-size: .78rem;

  padding: .35rem .75rem;

  margin-right: .5rem;

  cursor: pointer;

}



.btn-cmp-toggle .cmp-dot {

  width: 7px;

  height: 7px;

  border-radius: 50%;

  display: inline-block;

}



.btn-cmp-toggle .cmp-dot.on {

  background: #3fbf7f;

  box-shadow: 0 0 7px #3fbf7f;

}



.btn-cmp-toggle .cmp-dot.off {

  background: var(--muted);

}



.cmp-foot-ctrl {

  margin-bottom: .8rem;

}



.cmp-foot-ctrl button {

  font-size: .8rem;

  cursor: pointer;

}





/* AUF DEM HANDY AUSBLENDEN (wie vom User gewünscht) */

@media (max-width: 760px) {

  .bottom-walker {

    display: none !important;

  }



  .btn-cmp-toggle {

    display: none !important;

  }



}





/* ============ KUNST & BILDER GALERIE ============ */

.art-tabs {

  display: flex;

  justify-content: center;

  gap: .5rem;

  flex-wrap: wrap;

  margin-bottom: 2rem;

}



.art-tab {

  padding: .5rem 1.1rem;

  border-radius: 999px;

  background: rgba(255,255,255,.05);

  border: 1px solid var(--line);

  color: var(--muted);

  font-size: .86rem;

  cursor: pointer;

  transition: .2s;

}



.art-tab:hover {

  color: #fff;

  border-color: rgba(143, 176, 255, 0.4);

}



.art-tab.active {

  background: rgba(143, 176, 255, 0.18);

  border-color: #8fb0ff;

  color: #fff;

  font-weight: 600;

}



.art-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

  gap: 1.5rem;

}



.art-card {

  position: relative;

  border-radius: 16px;

  overflow: hidden;

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid var(--line);

  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;

  cursor: pointer;

}



.art-card:hover {

  transform: translateY(-4px);

  border-color: rgba(143, 176, 255, 0.5);

  box-shadow: 0 16px 36px rgba(0,0,0,0.5), 0 0 25px rgba(65, 105, 225, 0.2);

}



.art-img-wrap {

  position: relative;

  aspect-ratio: 16/10;

  overflow: hidden;

  background: #080b12;

}



.art-card.is-tall .art-img-wrap {

  aspect-ratio: 9/16;

}



.art-img-wrap img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform .5s ease;

  user-select: none;

  -webkit-user-drag: none;

}



.art-card:hover .art-img-wrap img {

  transform: scale(1.05);

}



.art-badge {

  position: absolute;

  top: 12px;

  left: 12px;

  background: rgba(10, 14, 24, 0.85);

  border: 1px solid rgba(255,255,255,0.15);

  color: #8fb0ff;

  font-size: .7rem;

  font-weight: 600;

  padding: 3px 9px;

  border-radius: 999px;

  backdrop-filter: blur(6px);

  letter-spacing: .04em;

  text-transform: uppercase;

}



.art-info {

  padding: 1rem 1.2rem;

}



.art-info h4 {

  font-size: 1.05rem;

  margin-bottom: .25rem;

  color: #fff;

}



.art-info p {

  font-size: .82rem;

  color: var(--muted);

  line-height: 1.4;

  margin: 0;

}



.art-actions {

  display: flex;

  gap: .6rem;

  margin-top: .8rem;

}



.art-actions a, .art-actions button {

  font-size: .75rem;

  padding: .35rem .75rem;

  border-radius: 8px;

  text-decoration: none;

}





/* ============ SPIELTISCH AMBIENT VIDEO ============ */

.play-table {

  position: relative;

  overflow: hidden;

}



.table-video-bg {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  opacity: 0.38;

  mix-blend-mode: screen;

  pointer-events: none;

  z-index: 1;

  border-radius: inherit;

}



.play-table .felt, .play-table .seat, .play-table .hand {

  position: relative;

  z-index: 2;

}





/* ============ CREDITS & DANKSAGUNGS-BOX ============ */

.credits-card {

  max-width: 680px;

  margin: 1.8rem auto 2.2rem;

  padding: 1.2rem 1.5rem;

  background: rgba(14, 18, 30, 0.7);

  border: 1px solid rgba(143, 176, 255, 0.18);

  border-radius: 16px;

  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);

  text-align: left;

  backdrop-filter: blur(10px);

}



.credits-head {

  display: flex;

  align-items: center;

  gap: .5rem;

  color: #8fb0ff;

  font-size: .85rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: .08em;

  margin-bottom: .6rem;

}



.credits-intro {

  font-size: .82rem;

  color: var(--muted);

  line-height: 1.45;

  margin-bottom: .8rem;

}



.credits-list {

  list-style: none;

  padding: 0;

  margin: 0;

  display: grid;

  gap: .4rem;

  font-size: .8rem;

  color: #cbd5e1;

}



.credits-list li {

  line-height: 1.4;

}



.credits-list b {

  color: #fff;

  font-weight: 600;

  margin-right: .3rem;

}



.credits-list a {

  color: #8fb0ff;

  text-decoration: underline;

  text-underline-offset: 2px;

  transition: color .2s;

}



.credits-list a:hover {

  color: #fff;

}





/* ============ FIGUREN- & BEGLEITER-SCHAUKASTEN ============ */

.showcase-card {

  background: rgba(12, 16, 28, 0.85);

  border: 1px solid rgba(143, 176, 255, 0.22);

  border-radius: 20px;

  padding: 2rem;

  margin-bottom: 3.5rem;

  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(65, 105, 225, 0.15);

  backdrop-filter: blur(12px);

}



.sc-header {

  text-align: center;

  max-width: 650px;

  margin: 0 auto 2rem;

}



.sc-tag {

  display: inline-block;

  font-size: .72rem;

  text-transform: uppercase;

  letter-spacing: .08em;

  font-weight: 700;

  color: #8fb0ff;

  background: rgba(143, 176, 255, 0.12);

  padding: 4px 12px;

  border-radius: 999px;

  margin-bottom: .6rem;

}



.sc-header h3 {

  font-size: 1.8rem;

  color: #fff;

  margin-bottom: .4rem;

}



.sc-intro {

  font-size: .92rem;

  color: var(--muted);

  line-height: 1.5;

}



.sc-main {

  display: grid;

  grid-template-columns: 320px 1fr;

  gap: 2.5rem;

  align-items: center;

  margin-bottom: 2.5rem;

}



@media (max-width: 860px) {

  .sc-main {

    grid-template-columns: 1fr;

    text-align: center;

  }



}



.sc-stage-wrap {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 1rem;

}



.sc-podium {

  position: relative;

  width: 260px;

  height: 240px;

  display: flex;

  align-items: flex-end;

  justify-content: center;

  padding-bottom: 24px;

}



.sc-glow {

  position: absolute;

  bottom: 12px;

  left: 50%;

  transform: translateX(-50%);

  width: 200px;

  height: 36px;

  background: radial-gradient(ellipse, rgba(74, 128, 255, 0.45) 0%, rgba(138, 75, 255, 0.2) 45%, transparent 75%);

  border-radius: 50%;

  z-index: 1;

}



.sc-sprite-box {

  position: relative;

  z-index: 2;

  height: 180px;

  display: flex;

  align-items: flex-end;

  justify-content: center;

}



.sc-sprite-box img {

  max-height: 180px;

  max-width: 100%;

  object-fit: contain;

  filter: drop-shadow(0 14px 28px rgba(0,0,0,0.85));

  transition: transform .25s cubic-bezier(0.2, 0.9, 0.3, 1.2), opacity .2s ease;

  user-select: none;

}



.sc-sprite-box img.pose-switch {

  transform: scale(0.92);

  opacity: 0.8;

}



.sc-pose-bar {

  display: flex;

  gap: .4rem;

  background: rgba(255, 255, 255, 0.05);

  border: 1px solid var(--line);

  padding: 4px;

  border-radius: 12px;

}



.sc-pose-btn {

  background: none;

  border: none;

  color: var(--muted);

  font-size: .78rem;

  padding: .35rem .75rem;

  border-radius: 8px;

  cursor: pointer;

  transition: all .2s ease;

}



.sc-pose-btn:hover {

  color: #fff;

}



.sc-pose-btn.active {

  background: rgba(143, 176, 255, 0.2);

  color: #fff;

  font-weight: 600;

  box-shadow: 0 0 12px rgba(143, 176, 255, 0.25);

}



.sc-details {

  display: flex;

  flex-direction: column;

  gap: .6rem;

}



.sc-meta-top {

  display: flex;

  align-items: center;

  gap: .6rem;

  flex-wrap: wrap;

}



@media (max-width: 860px) {

  .sc-meta-top {

    justify-content: center;

  }



}



.sc-badge {

  background: rgba(143, 176, 255, 0.15);

  border: 1px solid rgba(143, 176, 255, 0.35);

  color: #8fb0ff;

  font-size: .72rem;

  font-weight: 600;

  padding: 2px 8px;

  border-radius: 6px;

  text-transform: uppercase;

}



.sc-role {

  color: var(--muted);

  font-size: .85rem;

}



.sc-details h2 {

  font-size: 2rem;

  color: #fff;

  margin: 0;

}



.sc-desc {

  font-size: .95rem;

  color: #cbd5e1;

  line-height: 1.55;

  margin: .2rem 0;

}



.sc-quote {

  background: rgba(14, 20, 36, 0.8);

  border-left: 3px solid #8fb0ff;

  padding: .65rem 1rem;

  margin: .4rem 0;

  border-radius: 0 10px 10px 0;

  font-style: italic;

  font-size: .92rem;

  color: #e2e8f0;

}



.sc-creator {

  font-size: .78rem;

  color: var(--muted);

}



.sc-creator b {

  color: #cbd5e1;

}



.sc-action-row {

  margin-top: .6rem;

}



.btn-success {

  background: #3fbf7f !important;

  color: #071a10 !important;

  border-color: #3fbf7f !important;

}





/* Parade */

.sc-parade-wrap {

  border-top: 1px solid rgba(255, 255, 255, 0.08);

  padding-top: 1.5rem;

}



.sc-parade-title {

  font-size: .82rem;

  color: var(--muted);

  margin-bottom: .8rem;

  font-weight: 600;

}



.sc-parade {

  display: flex;

  gap: .75rem;

  overflow-x: auto;

  padding-bottom: .75rem;

  scrollbar-width: thin;

}



.sc-avatar {

  flex: 0 0 105px;

  display: flex;

  flex-direction: column;

  align-items: center;

  background: rgba(255, 255, 255, 0.04);

  border: 1px solid var(--line);

  border-radius: 14px;

  padding: .6rem .4rem;

  cursor: pointer;

  transition: transform .2s ease, border-color .2s ease, background .2s ease;

}



.sc-avatar:hover {

  transform: translateY(-3px);

  border-color: rgba(143, 176, 255, 0.45);

  background: rgba(255, 255, 255, 0.07);

}



.sc-avatar.active {

  border-color: #8fb0ff;

  background: rgba(143, 176, 255, 0.15);

  box-shadow: 0 0 15px rgba(143, 176, 255, 0.3);

}



.sc-avatar-img {

  width: 54px;

  height: 54px;

  display: flex;

  align-items: flex-end;

  justify-content: center;

  margin-bottom: .4rem;

}



.sc-avatar-img img {

  max-width: 100%;

  max-height: 100%;

  object-fit: contain;

}



.sc-avatar-name {

  font-size: .68rem;

  color: #e2e8f0;

  text-align: center;

  line-height: 1.2;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  max-width: 95px;

}





/* ============ DIE 4 LEBENDIGEN WELT-SCHLEIME ============ */

.world-slime-actor {

  position: absolute;

  z-index: 120;

  width: 54px;

  height: 38px;

  pointer-events: auto;

  cursor: pointer;

  transition: opacity .4s ease;

  user-select: none;

}



.world-slime-actor.slime-blau {

  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.75)) drop-shadow(0 0 12px rgba(74, 128, 255, 0.55));

}



.world-slime-actor.slime-gelb {

  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.75)) drop-shadow(0 0 12px rgba(246, 210, 122, 0.65));

}



.world-slime-actor.slime-gruen {

  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.75)) drop-shadow(0 0 12px rgba(80, 220, 130, 0.65));

}



.world-slime-actor.slime-rot {

  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.75)) drop-shadow(0 0 12px rgba(255, 80, 70, 0.7));

}





/* Echte weichgezeichnete Kräuter-Rauchaura für den grünen Hippie-Schleim (dezent & gemütlich verkleinert) */

.slime-smoke-aura {

  position: absolute;

  bottom: 12px;

  left: 50%;

  transform: translateX(-50%);

  width: 48px;

  height: 84px;

  pointer-events: none;

  opacity: 0.78;

  z-index: -1;

  transition: opacity .4s ease;

}



.slime-smoke-aura img {

  width: 100%;

  height: 100%;

  object-fit: contain;

  filter: drop-shadow(0 0 6px rgba(100, 220, 140, 0.28));

}





/* Magischer Kräuter-Rauch für den grünen Hippie-Schleim */

.slime-smoke-container {

  position: absolute;

  top: -4px;

  left: 50%;

  transform: translateX(-50%);

  pointer-events: none;

}



.smoke-puff {

  position: absolute;

  bottom: 0;

  left: 50%;

  width: 9px;

  height: 9px;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(160, 240, 180, 0.7) 0%, rgba(100, 200, 130, 0.25) 60%, transparent 100%);

  filter: blur(1.5px);

  animation: smokeRise 2.2s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;

}



@keyframes smokeRise {

  0% {

    opacity: 0;

    transform: translate(-50%, 0) scale(0.5);

  }



  25% {

    opacity: 0.75;

    transform: translate(-50%, -8px) scale(0.85);

  }



  60% {

    opacity: 0.4;

    transform: translate(calc(-50% + 5px), -20px) scale(1.15);

  }



  100% {

    opacity: 0;

    transform: translate(calc(-50% - 4px), -34px) scale(1.35);

  }



}



.world-slime-actor .ws-body {

  width: 100%;

  height: 100%;

  display: flex;

  align-items: flex-end;

  justify-content: center;

  transition: transform .25s ease;

}



.world-slime-actor.facing-left .ws-body {

  transform: scaleX(-1);

}



.world-slime-actor .ws-img {

  width: 100%;

  height: 100%;

  object-fit: contain;

}



.world-slime-actor.is-hopping .ws-img {

  animation: slimeSquash .45s ease-in-out;

}



@keyframes slimeSquash {

  0% { transform: scale(1, 1); }



  25% { transform: scale(1.25, 0.75) translateY(2px); }



  60% { transform: scale(0.85, 1.25) translateY(-8px); }



  85% { transform: scale(1.15, 0.85); }



  100% { transform: scale(1, 1); }



}



.ws-bubble {

  position: absolute;

  bottom: 50px;

  left: 50%;

  transform: translateX(-50%) translateY(6px);

  background: rgba(10, 14, 28, 0.96);

  border: 1.5px solid #8fb0ff;

  color: #ffffff;

  font-size: .86rem;

  font-weight: 700;

  padding: 8px 16px;

  border-radius: 12px;

  opacity: 0;

  pointer-events: none;

  transition: opacity .22s ease, transform .22s ease;

  width: max-content;

  max-width: min(290px, 80vw);

  white-space: normal !important;

  word-wrap: break-word;

  overflow-wrap: break-word;

  box-sizing: border-box;

  text-align: center;

  line-height: 1.35;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.85), 0 0 14px rgba(110, 160, 255, 0.45);

  letter-spacing: .01em;

  z-index: 200;

}



.ws-bubble::after {

  content: '';

  position: absolute;

  bottom: -6px;

  left: 50%;

  transform: translateX(-50%);

  width: 0;

  height: 0;

  border-left: 6px solid transparent;

  border-right: 6px solid transparent;

  border-top: 6px solid #8fb0ff;

}



.ws-bubble.show {

  opacity: 1;

  transform: translateX(-50%) translateY(0);

}



.ws-bubble.align-right {

  left: auto;

  right: -8px;

  transform: translateY(6px);

}



.ws-bubble.align-right::after {

  left: auto;

  right: 20px;

  transform: none;

}



.ws-bubble.align-right.show {

  transform: translateY(0);

}



.ws-bubble.align-left {

  left: -8px;

  right: auto;

  transform: translateY(6px);

}



.ws-bubble.align-left::after {

  left: 20px;

  right: auto;

  transform: none;

}



.ws-bubble.align-left.show {

  transform: translateY(0);

}





@media (max-width: 760px) {

  .world-slime-actor {

    width: 46px;

    height: 32px;

  }



  .ws-bubble {

    bottom: 44px;

    font-size: .80rem;

    padding: 6px 11px;

    max-width: min(300px, 84vw);

    border-radius: 10px;

  }



  .slime-play-hud {

    bottom: calc(var(--tab, 60px) + 16px) !important;

    right: 14px !important;

  }



  .slime-play-hud .hud-btn {

    padding: .65rem .95rem !important;

    font-size: .82rem !important;

  }



}





/* ============ TIPPINS GEHILFE BEI MAUS-STILLSTAND ============ */

.mouse-helper-alchemist {

  position: absolute;

  z-index: 950;

  width: 48px;

  height: 48px;

  pointer-events: none;

  opacity: 0;

  transform: translate(-50%, -50%);

  transition: opacity .2s ease;

  filter: drop-shadow(0 8px 18px rgba(0,0,0,0.8));

  user-select: none;

}



.mouse-helper-alchemist.visible {

  opacity: 1;

}



.mouse-helper-alchemist .mha-img {

  width: 100%;

  height: 100%;

  object-fit: contain;

}



.mouse-helper-alchemist.vanish {

  animation: helperPoof .5s forwards ease-out;

}



@keyframes helperPoof {

  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }



  60% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.3); filter: brightness(1.6) blur(1px); }



  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); filter: brightness(2) blur(4px); }



}





/* ============ GESCHÜTZTES CERIS-RADIO PLAYER ============ */

.radio-tab-section {

  max-width: 820px;

  margin: 0 auto 3rem;

  animation: fadeIn .4s ease;

}



.radio-player-card {

  background: rgba(14, 18, 30, 0.9);

  border: 1px solid rgba(143, 176, 255, 0.28);

  border-radius: 20px;

  padding: 2rem;

  box-shadow: 0 20px 50px rgba(0,0,0,0.6), 0 0 30px rgba(65, 105, 225, 0.15);

  backdrop-filter: blur(12px);

}



.radio-main-grid {

  display: grid;

  grid-template-columns: 220px 1fr;

  gap: 2rem;

  align-items: center;

  margin-bottom: 2rem;

}



@media (max-width: 680px) {

  .radio-main-grid {

    grid-template-columns: 1fr;

    text-align: center;

  }



  .radio-vinyl-wrap {

    margin: 0 auto;

  }



}



.radio-vinyl-wrap {

  width: 200px;

  height: 200px;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

}



.radio-vinyl {

  width: 200px;

  height: 200px;

  border-radius: 50%;

  background: radial-gradient(circle, #222 15%, #0d0e14 55%, #191c28 85%, #05060a 100%);

  border: 3px solid rgba(255, 255, 255, 0.1);

  box-shadow: 0 10px 30px rgba(0,0,0,0.8), inset 0 0 25px rgba(0,0,0,0.9);

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: transform .3s ease;

}



.radio-vinyl.spinning {

  animation: spinVinyl 6s linear infinite;

}



@keyframes spinVinyl {

  0% { transform: rotate(0deg); }



  100% { transform: rotate(360deg); }



}



.vinyl-grooves {

  position: absolute;

  inset: 15px;

  border-radius: 50%;

  border: 1px dashed rgba(255, 255, 255, 0.08);

}



.vinyl-center {

  width: 104px;

  height: 104px;

  border-radius: 50%;

  background: radial-gradient(circle, #1a2032 25%, #0d101a 100%);

  border: 2.5px solid rgba(212, 175, 55, 0.85);

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 0 24px rgba(212, 175, 55, 0.5), inset 0 0 14px rgba(0, 0, 0, 0.9);

  position: relative;

  overflow: hidden;

}



.vinyl-symbol {

  width: 82px;

  height: 82px;

  display: block;

  filter: drop-shadow(0 0 14px rgba(255, 215, 107, 0.95)) drop-shadow(0 0 4px rgba(212, 175, 55, 0.8));

  pointer-events: none;

}



.vinyl-rune {

  display: none;

}



.radio-station-badge {

  display: inline-block;

  font-size: .72rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: .08em;

  color: #8fb0ff;

  background: rgba(143, 176, 255, 0.12);

  padding: 3px 10px;

  border-radius: 999px;

  margin-bottom: .4rem;

}



.radio-title {

  font-size: 1.8rem;

  color: #fff;

  margin: 0 0 .3rem;

}



.radio-desc {

  font-size: .88rem;

  color: var(--muted);

  line-height: 1.45;

  margin: 0 0 1.2rem;

}



.radio-controls {

  display: flex;

  align-items: center;

  gap: .8rem;

  margin-bottom: .8rem;

}



@media (max-width: 680px) {

  .radio-controls {

    justify-content: center;

  }



}



.r-btn {

  background: rgba(255, 255, 255, 0.08);

  border: 1px solid var(--line);

  color: #fff;

  border-radius: 50%;

  width: 42px;

  height: 42px;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: all .2s ease;

}



.r-btn:hover {

  background: rgba(143, 176, 255, 0.2);

  border-color: #8fb0ff;

  transform: scale(1.05);

}



.r-play {

  width: 52px;

  height: 52px;

  background: #f1eff9;

  color: #12142a;

  border-color: #f1eff9;

  box-shadow: 0 0 18px rgba(255, 255, 255, 0.25);

}



.r-play:hover {

  background: #fff;

  transform: scale(1.08);

  box-shadow: 0 0 24px rgba(255, 255, 255, 0.4);

}



.radio-protected-note {

  font-size: .72rem;

  color: var(--muted);

  opacity: .7;

  margin: 0;

}





/* Playlist */

.radio-playlist {

  border-top: 1px solid rgba(255, 255, 255, 0.08);

  padding-top: 1.2rem;

}



.radio-playlist h4 {

  font-size: .85rem;

  color: var(--muted);

  margin-bottom: .8rem;

}



.radio-list {

  display: flex;

  flex-direction: column;

  gap: .4rem;

}



.radio-track-item {

  display: flex;

  align-items: center;

  padding: .6rem .8rem;

  border-radius: 10px;

  background: rgba(255, 255, 255, 0.03);

  border: 1px solid transparent;

  cursor: pointer;

  transition: background .2s, border-color .2s;

}



.radio-track-item:hover {

  background: rgba(255, 255, 255, 0.07);

  border-color: rgba(143, 176, 255, 0.2);

}



.radio-track-item.active {

  background: rgba(143, 176, 255, 0.15);

  border-color: #8fb0ff;

}



.track-num {

  width: 28px;

  font-size: .78rem;

  color: var(--muted);

  font-weight: 700;

}



.track-info {

  flex: 1;

  display: flex;

  flex-direction: column;

}



.track-info b {

  color: #fff;

  font-size: .85rem;

}



.track-info small {

  color: var(--muted);

  font-size: .72rem;

}



.track-play-icon {

  background: none;

  border: none;

  color: #8fb0ff;

  font-size: .85rem;

  cursor: pointer;

}





/* ============ NAV TAB PULSE, PLAY-BADGE & EQUALIZER BARS ============ */

.nav-play-badge {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 17px;

  height: 17px;

  background: rgba(143, 176, 255, 0.22);

  border: 1px solid #8fb0ff;

  border-radius: 50%;

  font-size: 8px;

  line-height: 1;

  color: #8fb0ff;

  margin-right: 6px;

  vertical-align: middle;

  transition: transform .2s ease, background .2s ease, color .2s ease;

  box-shadow: 0 0 8px rgba(143, 176, 255, 0.45);

}



.nav-play-badge.sm {

  width: 14px;

  height: 14px;

  font-size: 7px;

  margin-right: 3px;

}



.nav-play-badge.is-paused-anim {

  background: rgba(255, 180, 80, 0.3);

  border-color: #ffb450;

  color: #ffb450;

  box-shadow: 0 0 12px rgba(255, 180, 80, 0.7);

  transform: scale(1.18);

}



.radio-playing-pulse {

  position: relative;

  border: 1px solid #8fb0ff !important;

  box-shadow: 0 0 16px rgba(143, 176, 255, 0.5) !important;

  animation: navPulseGlow 1.8s infinite alternate ease-in-out;

}



@keyframes navPulseGlow {

  0% { box-shadow: 0 0 8px rgba(143, 176, 255, 0.3); }



  100% { box-shadow: 0 0 22px rgba(143, 176, 255, 0.8), inset 0 0 8px rgba(143, 176, 255, 0.2); }



}



.nav-sound-bars {

  display: inline-flex;

  align-items: flex-end;

  gap: 2px;

  height: 10px;

  margin-left: 5px;

  vertical-align: middle;

}



.nav-sound-bars span {

  width: 2px;

  background: #8fb0ff;

  border-radius: 1px;

  animation: eqBar .8s infinite alternate ease-in-out;

}



.nav-sound-bars span:nth-child(1) { height: 40%; animation-delay: .1s; }



.nav-sound-bars span:nth-child(2) { height: 90%; animation-delay: .3s; }



.nav-sound-bars span:nth-child(3) { height: 60%; animation-delay: .2s; }



@keyframes eqBar {

  0% { height: 20%; }



  100% { height: 100%; }



}





/* ============ SLIME FLOATING HUD PLAY BUTTON ============ */

.slime-play-hud {

  position: fixed;

  bottom: 90px;

  right: 28px;

  z-index: 800;

  animation: hudPopIn .4s cubic-bezier(0.18, 0.89, 0.32, 1.28);

  transition: opacity .35s ease, transform .35s ease;

}



.slime-play-hud.fade-out {

  opacity: 0;

  transform: translateY(12px) scale(0.9);

  pointer-events: none;

}



@keyframes hudPopIn {

  0% { opacity: 0; transform: translateY(20px) scale(0.85); }



  100% { opacity: 1; transform: translateY(0) scale(1); }



}



.hud-btn {

  display: inline-flex !important;

  align-items: center !important;

  gap: .6rem !important;

  padding: .65rem 1.2rem !important;

  border-radius: 999px !important;

  box-shadow: 0 10px 30px rgba(0,0,0,0.7), 0 0 20px rgba(143, 176, 255, 0.35) !important;

  cursor: pointer;

}



.hud-disc {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 22px;

  height: 22px;

  border-radius: 50%;

  background: #12142a;

  color: #fff;

  font-size: .65rem;

}



.pnp-badge {

  font-size: .75rem;

  padding: .4rem .8rem;

  border: 1px solid rgba(143, 176, 255, 0.25);

  background: rgba(14, 18, 30, 0.8);

  color: #cbd5e1;

  border-radius: 8px;

  margin-left: .5rem;

  vertical-align: middle;

}







/* ============ KUNST & LORE EINFÜHRUNG ============ */

.kunst-intro-card {

  background: rgba(14, 18, 36, 0.78);

  border: 1px solid rgba(143, 176, 255, 0.3);

  border-radius: 22px;

  padding: 2.2rem 2.4rem;

  margin: 0 auto 2.5rem;

  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);

  backdrop-filter: blur(12px);

  position: relative;

  overflow: hidden;

}



.kunst-intro-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 3px;

  background: linear-gradient(90deg, #f0b429, #8fb0ff, #f0b429);

  opacity: 0.8;

}



.kic-badge {

  display: inline-block;

  font-size: .74rem;

  text-transform: uppercase;

  letter-spacing: .12em;

  font-weight: 700;

  color: #f0b429;

  background: rgba(240, 180, 41, 0.14);

  border: 1px solid rgba(240, 180, 41, 0.35);

  padding: .25rem .75rem;

  border-radius: 99px;

  margin-bottom: .8rem;

}



.kic-title {

  font-family: var(--serif);

  font-size: clamp(1.4rem, 3vw, 2.1rem);

  color: #fff;

  margin: 0 0 1.2rem;

  letter-spacing: .02em;

}



.kic-body {

  color: #d1d6e8;

  font-size: 1.02rem;

  line-height: 1.7;

}



.kic-lead {

  font-size: 1.08rem;

  color: #f1eff9;

  margin-bottom: 1rem;

}



.kic-body p {

  margin-bottom: 1rem;

}



.kic-body b {

  color: #fff;

}



.kic-support-note {

  background: rgba(240, 180, 41, 0.08);

  border-left: 3px solid #f0b429;

  padding: .85rem 1.1rem;

  border-radius: 8px;

  color: #f8eecd;

  font-size: .95rem;

  margin-top: 1.2rem;

}



.kic-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 1rem;

  margin-top: 1.8rem;

  align-items: center;

}



.kic-btn {

  display: inline-flex;

  align-items: center;

  gap: .6rem;

  font-weight: 600;

  padding: .75rem 1.4rem;

}



.radio-stream-bar {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: space-between;

  gap: .8rem;

  margin-top: .8rem;

  padding-top: .8rem;

  border-top: 1px solid rgba(255, 255, 255, 0.08);

}



.radio-sc-link {

  display: inline-flex;

  align-items: center;

  gap: .45rem;

  color: #ff7700;

  background: rgba(255, 119, 0, 0.12);

  border: 1px solid rgba(255, 119, 0, 0.35);

  padding: .45rem .85rem;

  border-radius: 99px;

  font-size: .8rem;

  font-weight: 600;

  text-decoration: none;

  transition: all .2s ease;

}



.radio-sc-link:hover {

  background: rgba(255, 119, 0, 0.25);

  border-color: #ff7700;

  color: #fff;

  transform: translateY(-1px);

  box-shadow: 0 4px 14px rgba(255, 119, 0, 0.35);

}



.radio-playlist-head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-bottom: .8rem;

}



.radio-playlist-head h4 {

  margin: 0;

}



.sc-badge-link {

  font-size: .75rem;

  color: #ff7700;

  background: rgba(255, 119, 0, 0.12);

  border: 1px solid rgba(255, 119, 0, 0.3);

  padding: .2rem .55rem;

  border-radius: 99px;

  text-decoration: none;

  transition: all .2s ease;

}



.sc-badge-link:hover {

  background: #ff7700;

  color: #fff;

}





@media (max-width: 760px) {

  .kunst-intro-card {

    padding: 1.4rem 1.1rem;

    border-radius: 18px;

  }



  .kic-actions {

    flex-direction: column;

    align-items: stretch;

  }



  .kic-btn {

    justify-content: center;

    width: 100%;

  }



  .radio-stream-bar {

    flex-direction: column;

    align-items: flex-start;

  }



}







/* ==========================================================================

   DAS LAGERFEUER AM ENDE DER WELT

   ========================================================================== */

.campfire-section {

  position: relative;

  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 6vw, 4.5rem);

  background: radial-gradient(circle at 50% 65%, rgba(255, 120, 30, 0.12), rgba(7, 8, 15, 0.95) 70%);

  border-top: 1px solid rgba(230, 182, 85, 0.2);

  overflow: hidden;

  text-align: center;

}



.campfire-container {

  max-width: 900px;

  margin: 0 auto;

  position: relative;

  z-index: 2;

  padding: 0 1rem;

}



.campfire-header {

  margin-bottom: 2rem;

}



.campfire-badge {

  font-size: 0.76rem;

  letter-spacing: 0.2em;

  text-transform: uppercase;

  color: var(--gold);

  margin-bottom: 0.4rem;

  display: inline-block;

}



.campfire-title {

  font-size: clamp(1.8rem, 4vw, 2.6rem);

  color: #ffffff;

  margin: 0.2rem 0 0.5rem;

  background: linear-gradient(180deg, #ffffff, #ffb85a);

  -webkit-background-clip: text;

  background-clip: text;

  color: transparent;

}



.campfire-sub {

  color: var(--muted);

  font-size: 0.95rem;

}





.campfire-scene {

  position: relative;

  width: min(100%, 680px);

  height: clamp(390px, 48vw, 460px);

  margin: 1.5rem auto 0;

  display: flex;

  align-items: center;

  justify-content: center;

}



.campfire-glow {

  position: absolute;

  top: 15px;

  width: clamp(280px, 45vw, 440px);

  height: clamp(220px, 35vw, 320px);

  background: radial-gradient(ellipse at 50% 60%, rgba(255, 130, 30, 0.4), rgba(255, 70, 20, 0.16) 45%, transparent 75%);

  filter: blur(22px);

  pointer-events: none;

  animation: fireGlowPulse 2.8s ease-in-out infinite alternate;

}



@keyframes fireGlowPulse {

  0% { transform: scale(0.94); opacity: 0.75; }



  100% { transform: scale(1.08); opacity: 1; }



}





/* Das flackernde Lagerfeuer sitzt oben / mittig */

.campfire-fire-wrap {

  position: absolute;

  top: 10px;

  left: 50%;

  transform: translateX(-50%);

  z-index: 2;

  width: clamp(140px, 22vw, 190px);

  pointer-events: none;

  filter: drop-shadow(0 0 24px rgba(255, 120, 20, 0.65));

  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.5) 15%, black 28%, black 88%, transparent 100%);

  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.5) 15%, black 28%, black 88%, transparent 100%);

}



.campfire-flame {

  width: 100%;

  height: auto;

  display: block;

}





/* Der Spieltisch / Bereich für die Karten liegt sauber DADRUNTER */

.campfire-ground {

  position: absolute;

  bottom: 20px;

  left: 50%;

  transform: translateX(-50%);

  width: clamp(280px, 50vw, 440px);

  height: 110px;

  background: radial-gradient(ellipse at 50% 50%, rgba(22, 18, 30, 0.98), rgba(9, 10, 18, 0.6) 72%);

  border-radius: 50%;

  border: 1px solid rgba(230, 182, 85, 0.26);

  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.85), inset 0 0 24px rgba(255, 100, 20, 0.14);

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 10;

}





.campfire-mat {

  position: relative;

  width: clamp(190px, 32vw, 290px);

  height: 75px;

  display: flex;

  align-items: center;

  justify-content: center;

}





/* Mini Cards - jetzt ein bisschen größer & noch besser erkennbar */

.mini-cards-trick {

  position: relative;

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

}



.cf-mini-card {

  position: absolute;

  width: clamp(38px, 6.5vw, 48px);

  height: clamp(56px, 9.6vw, 70px);

  border-radius: 6px;

  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.92), 0 0 12px rgba(255, 180, 50, 0.5);

  border: 1.5px solid rgba(255, 255, 255, 0.45);

  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);

  animation: cardDealDrop 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;

  object-fit: cover;

  background: #111;

}



@keyframes cardDealDrop {

  from { transform: translateY(-30px) scale(0.6); opacity: 0; }



  to { transform: translateY(0) scale(1); opacity: 1; }



}





.cf-card-blau { transform: translate(-42px, 5px) rotate(-14deg); z-index: 4; }



.cf-card-gelb { transform: translate(-14px, -12px) rotate(-4deg); z-index: 5; }



.cf-card-rot { transform: translate(14px, -9px) rotate(8deg); z-index: 6; }



.cf-card-gruen { transform: translate(42px, 8px) rotate(16deg); z-index: 7; }





/* ============================================================

   CAMPFIRE DYNAMIC WALKING ACTORS (Freie Bewegung am Lagerfeuer)

   ============================================================ */

.campfire-actors-layer {

  position: absolute;

  inset: 0;

  pointer-events: none;

  z-index: 5;

}



.cf-actor {

  position: absolute;

  width: clamp(78px, 13vw, 98px);

  height: clamp(78px, 13vw, 98px);

  pointer-events: auto;

  cursor: pointer;

  user-select: none;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: left 1.6s linear, top 1.6s ease-in-out, transform 0.35s ease;

  z-index: 5;

}



.cf-actor:hover {

  transform: scale(1.12) translateY(-4px);

}



.cf-actor .cf-slime-img {

  width: 100%;

  height: 100%;

  object-fit: contain;

  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.85)) drop-shadow(0 0 12px rgba(255, 140, 40, 0.35));

  transition: transform 0.25s ease, opacity 0.25s ease;

}



.cf-actor.facing-left .cf-slime-img {

  transform: scaleX(-1);

}



.cf-actor.facing-right .cf-slime-img {

  transform: scaleX(1);

}



.cf-actor .ws-bubble {

  position: absolute;

  bottom: calc(100% + 10px);

  left: 50%;

  transform: translateX(-50%);

  z-index: 45;

  white-space: normal !important;

  width: max-content;

  max-width: clamp(200px, 32vw, 300px);

  padding: 8px 14px;

  box-sizing: border-box;

  word-wrap: break-word;

  overflow-wrap: break-word;

}



.cf-actor.align-left .ws-bubble {

  left: -10px;

  transform: none;

}



.cf-actor.align-left .ws-bubble::after {

  left: 30px;

  transform: none;

}



.cf-actor.align-right .ws-bubble {

  left: auto;

  right: -10px;

  transform: none;

}



.cf-actor.align-right .ws-bubble::after {

  left: auto;

  right: 30px;

  transform: none;

}



.cf-actor.is-walking {

  animation: campfireSlimeStepBob 0.32s infinite alternate ease-in-out;

}



@keyframes campfireSlimeStepBob {

  0% { transform: translateY(0); }



  100% { transform: translateY(-4px); }



}





/* Schleim-Treffer & Kampf-Effekte */

.slime-hit-flash {

  filter: brightness(0) invert(1) drop-shadow(0 0 24px #ffffff) !important;

  transition: filter 0.05s ease-out !important;

}



@keyframes slimeHitFlash {

  0% { filter: brightness(0) invert(1) drop-shadow(0 0 25px #ffffff); transform: scale(1.18); }



  45% { filter: brightness(3.5) drop-shadow(0 0 16px #ffffff); }



  100% { filter: none; transform: scale(1); }



}



.slime-hit-recoil {

  animation: slimeHitFlash 0.3s ease-out forwards;

}



.slime-in-combat {

  filter: drop-shadow(0 0 14px rgba(255, 60, 20, 0.75)) !important;

}





/* Roaming Slimes Clash & Slang Animations */

.world-slime-actor.roaming-slime {

  width: 44px;

  height: 34px;

}



.world-slime-actor.clashing {

  animation: slimeClashTremor 0.35s ease-in-out infinite alternate;

}



@keyframes slimeClashTremor {

  0% { transform: scale(1.1) rotate(-5deg); }



  100% { transform: scale(1.18) rotate(5deg); }



}





/* Win Badge / Score-Pille am Feuer */

.cf-trick-winner {

  position: absolute;

  top: -44px;

  left: 50%;

  transform: translateX(-50%);

  background: rgba(10, 14, 28, 0.95);

  border: 1.5px solid var(--gold);

  border-radius: 99px;

  padding: 0.35rem 0.9rem;

  font-size: 0.78rem;

  font-weight: 700;

  color: var(--gold2);

  white-space: nowrap;

  animation: bookFadeIn 0.35s cubic-bezier(0.18, 0.89, 0.32, 1.28);

  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.85), 0 0 14px rgba(230, 182, 85, 0.35);

  z-index: 30;

  pointer-events: none;

}







/* ============================================================

   DESIGN THEMES & EINSTELLUNGEN (CALIGO SETTINGS SYSTEM)

   ============================================================ */



/* Theme 1: Original Caligo (Saphir-Violett) - Beibehaltung des Originals */

html[data-theme="original"], html:not([data-theme]) {

  --text-muted: #9a98b0;

  --lead-lh: 1.45;

}





/* Theme 2: Arkanes Gold & Kupfer (Magisches Artefakt) - Verfeinerter Look nach Feedback */

html[data-theme="gold"] {

  --text-muted: #d2cee5;

  --lead-lh: 1.7;

}



html[data-theme="gold"] .sub {

  color: #c8c5dd;

  line-height: 1.68;

}



html[data-theme="gold"] .feature p {

  color: #d2cee5;

}



html[data-theme="gold"] .feature {

  border-color: rgba(230, 182, 85, 0.22);

}



html[data-theme="gold"] .ficon {

  filter: drop-shadow(0 0 12px rgba(230,182,85,0.45));

}



html[data-theme="gold"] .btn-cmp-toggle .cmp-dot.on {

  background: #ffba38;

  box-shadow: 0 0 9px #ffba38;

}





/* Theme 3: Thurum Schatten (Obsidian & Mitternacht) */

html[data-theme="obsidian"] {

  --text-muted: #bab6cf;

  --lead-lh: 1.65;

}



html[data-theme="obsidian"] .feature {

  background: linear-gradient(160deg, rgba(35, 25, 55, 0.45), rgba(15, 12, 28, 0.55));

  border-color: rgba(160, 120, 240, 0.22);

}



html[data-theme="obsidian"] .ficon {

  filter: drop-shadow(0 0 12px rgba(180,120,255,0.38));

}



html[data-theme="obsidian"] .btn-cmp-toggle .cmp-dot.on {

  background: #bd84ff;

  box-shadow: 0 0 9px #bd84ff;

}





/* UI-Elemente Hover-Verfeinerungen */

.feature {

  transition: transform .32s cubic-bezier(0.2,0.8,0.2,1), border-color .32s ease, box-shadow .32s ease;

}



.feature:hover {

  transform: translateY(-6px);

  border-color: rgba(230, 182, 85, 0.55);

  box-shadow: 0 14px 34px rgba(0,0,0,0.55), 0 0 24px rgba(230,182,85,0.2);

}



.feature .ficon {

  transition: transform .3s ease, filter .3s ease;

}



.feature:hover .ficon {

  transform: scale(1.08);

}



.lead {

  line-height: var(--lead-lh, 1.45);

}





/* Topbar Right Container & Zahnrad-Button */

.topbar-right {

  display: flex;

  align-items: center;

  gap: clamp(0.25rem, 0.45vw, 0.5rem);

  margin-left: auto;

  flex-shrink: 0;

  white-space: nowrap !important;

}



.topbar a, .topbar button, .topbar .btn {

  white-space: nowrap !important;

}



.btn-settings {

  display: inline-flex;

  align-items: center;

  gap: .45rem;

  padding: .5rem .85rem;

  border-radius: 999px;

  color: var(--muted);

  border: 1px solid rgba(255,255,255,.15);

  background: rgba(255,255,255,.05);

  transition: all .25s ease;

  font-size: .84rem;

}



.btn-settings:hover {

  color: #fff;

  border-color: var(--gold);

  background: rgba(230,182,85,.12);

  transform: translateY(-1px);

}



.btn-settings svg {

  transition: transform .4s ease;

}



.btn-settings:hover svg {

  transform: rotate(45deg);

}



@media(max-width: 760px) {

  .settings-btn-txt {

    display: none;

  }



  .btn-settings {

    padding: .55rem;

  }



}





/* ============ EINSTELLUNGEN-MODAL ============ */

.settings-modal {

  position: fixed;

  inset: 0;

  z-index: 9999;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 1rem;

}



.settings-modal[hidden] {

  display: none !important;

}



.settings-backdrop {

  position: absolute;

  inset: 0;

  background: rgba(4, 5, 12, 0.82);

  backdrop-filter: blur(14px) saturate(1.2);

  animation: fadeIn .25s ease;

}



.settings-panel {

  position: relative;

  z-index: 2;

  width: min(540px, 100%);

  max-height: 88vh;

  overflow-y: auto;

  background: linear-gradient(170deg, #16192d 0%, #0d1020 100%);

  border: 1px solid rgba(230, 182, 85, 0.32);

  border-radius: 20px;

  box-shadow: 0 24px 64px rgba(0,0,0,0.85), 0 0 32px rgba(230,182,85,0.15);

  padding: clamp(1.4rem, 4vw, 2rem);

  animation: slideUp .3s cubic-bezier(0.16, 1, 0.3, 1);

}





.settings-head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-bottom: 1px solid rgba(255,255,255,.08);

  padding-bottom: 1rem;

  margin-bottom: 1.4rem;

}



.settings-head-title {

  display: flex;

  align-items: center;

  gap: .65rem;

  color: var(--gold2);

}



.settings-head-title h3 {

  font-size: 1.25rem;

  letter-spacing: .04em;

  margin: 0;

}



.settings-close {

  width: 36px;

  height: 36px;

  border-radius: 50%;

  display: grid;

  place-items: center;

  font-size: 1.1rem;

  color: var(--muted);

  background: rgba(255,255,255,.06);

  border: 1px solid rgba(255,255,255,.1);

  transition: .2s;

  cursor: pointer;

}



.settings-close:hover {

  color: #fff;

  background: rgba(255,255,255,.15);

  transform: scale(1.08);

}





.settings-section {

  margin-bottom: 1.6rem;

}



.settings-label-title {

  display: flex;

  align-items: center;

  gap: .5rem;

  font-family: var(--serif);

  font-size: .95rem;

  color: var(--gold2);

  letter-spacing: .06em;

  margin-bottom: .4rem;

}



.settings-desc {

  font-size: .84rem;

  color: var(--muted);

  margin-bottom: .85rem;

}





/* Theme Options */

.theme-options {

  display: grid;

  grid-template-columns: 1fr;

  gap: .65rem;

}



.theme-opt-btn {

  display: flex;

  align-items: center;

  gap: 1rem;

  padding: .75rem 1rem;

  border-radius: 14px;

  background: rgba(255,255,255,.03);

  border: 1px solid rgba(255,255,255,.1);

  text-align: left;

  transition: all .25s ease;

  cursor: pointer;

  position: relative;

}



.theme-opt-btn:hover {

  background: rgba(255,255,255,.07);

  border-color: rgba(230,182,85,.35);

  transform: translateY(-2px);

}



.theme-opt-btn.active {

  background: rgba(230, 182, 85, 0.12);

  border-color: var(--gold);

  box-shadow: 0 4px 20px rgba(230, 182, 85, 0.2);

}



.theme-opt-btn.active::after {

  content: "✓";

  position: absolute;

  right: 1.1rem;

  font-weight: 900;

  color: var(--gold2);

  font-size: 1.1rem;

}





.theme-preview {

  width: 44px;

  height: 44px;

  border-radius: 12px;

  display: grid;

  place-items: center;

  flex-shrink: 0;

  border: 1px solid rgba(255,255,255,.15);

}



.prev-original {

  background: linear-gradient(135deg, #1c1a3a 0%, #39285f 100%);

  box-shadow: inset 0 0 12px rgba(138,75,255,.5);

}



.prev-gold {

  background: linear-gradient(135deg, #2b1f0d 0%, #613e11 100%);

  box-shadow: inset 0 0 12px rgba(240,186,82,.5);

}



.prev-obsidian {

  background: linear-gradient(135deg, #0e0a17 0%, #291b3e 100%);

  box-shadow: inset 0 0 12px rgba(180,110,255,.4);

}



.prev-badge {

  font-size: .65rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: .05em;

  padding: .15rem .35rem;

  border-radius: 6px;

}



.prev-purple { background: #6e45ff; color: #fff; }



.prev-amber { background: #d48b28; color: #fff; }



.prev-dark { background: #3b2756; color: #d7baff; }





.theme-opt-text {

  display: flex;

  flex-direction: column;

}



.theme-opt-name {

  font-weight: 600;

  font-size: .95rem;

  color: #fff;

}



.theme-opt-detail {

  font-size: .78rem;

  color: var(--muted);

  margin-top: .15rem;

}





/* Language Selector */

.lang-switch-group {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: .65rem;

}



.lang-btn {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: .65rem;

  padding: .75rem 1rem;

  border-radius: 12px;

  background: rgba(255,255,255,.04);

  border: 1px solid rgba(255,255,255,.1);

  font-size: .92rem;

  font-weight: 500;

  transition: all .2s;

  cursor: pointer;

}



.lang-btn:hover {

  background: rgba(255,255,255,.08);

  border-color: rgba(230,182,85,.3);

}



.lang-btn.active {

  background: rgba(230,182,85,.12);

  border-color: var(--gold);

  color: var(--gold2);

  font-weight: 700;

  box-shadow: 0 4px 16px rgba(230,182,85,.15);

}



.lang-flag {

  font-size: 1.25rem;

}





/* Atmosphere Switches */

.settings-toggle-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1rem;

  padding: .8rem 0;

  border-top: 1px solid rgba(255,255,255,.06);

}



.settings-toggle-info {

  display: flex;

  flex-direction: column;

}



.settings-toggle-info b {

  font-size: .92rem;

  color: #fff;

}



.settings-toggle-info span {

  font-size: .78rem;

  color: var(--muted);

}



.toggle-switch {

  width: 48px;

  height: 26px;

  border-radius: 999px;

  background: rgba(255,255,255,.15);

  border: 1px solid rgba(255,255,255,.2);

  position: relative;

  cursor: pointer;

  transition: .25s ease;

  flex-shrink: 0;

}



.toggle-switch::after {

  content: "";

  position: absolute;

  top: 2px;

  left: 2px;

  width: 20px;

  height: 20px;

  border-radius: 50%;

  background: #fff;

  transition: .25s cubic-bezier(0.2,0.8,0.2,1);

  box-shadow: 0 2px 5px rgba(0,0,0,.4);

}



.toggle-switch.on {

  background: var(--gold);

  border-color: var(--gold2);

}



.toggle-switch.on::after {

  left: 24px;

  background: #111425;

}







/* ============================================================

   INTERAKTIVER STICH-SIMULATOR (ANLEITUNG)

   ============================================================ */

.trick-simulator {

  margin: 2.2rem 0 1rem;

  padding: 1.8rem;

  border-radius: 20px;

  background: radial-gradient(circle at 50% 30%, rgba(26, 34, 66, 0.7), rgba(9, 12, 24, 0.95));

  border: 1px solid rgba(230, 182, 85, 0.35);

  box-shadow: 0 18px 48px rgba(0,0,0,0.6), inset 0 0 35px rgba(230, 182, 85, 0.08);

}



.ts-header {

  text-align: center;

  margin-bottom: 1.5rem;

}



.ts-badge {

  display: inline-block;

  font-family: var(--serif);

  font-size: .75rem;

  letter-spacing: .2em;

  text-transform: uppercase;

  color: var(--gold);

  background: rgba(230, 182, 85, 0.12);

  border: 1px solid rgba(230, 182, 85, 0.3);

  padding: .2rem .75rem;

  border-radius: 999px;

  margin-bottom: .4rem;

}



.ts-title {

  font-size: 1.35rem;

  color: var(--gold2);

  margin-bottom: .25rem;

}





/* Tischplatte mit 4 Spielern */

.ts-table-stage {

  position: relative;

  width: min(520px, 100%);

  height: 380px;

  margin: 0 auto 1.4rem;

  border-radius: 30px;

  background: radial-gradient(circle at center, #1b2848 0%, #0d1527 70%, #060a14 100%);

  border: 4px solid #3d2a12;

  box-shadow: inset 0 0 40px rgba(0,0,0,0.85), 0 12px 35px rgba(0,0,0,0.6);

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

}





/* Spieler-Sitze */

.ts-seat {

  position: absolute;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: .3rem;

  padding: .35rem .75rem;

  border-radius: 12px;

  background: rgba(10, 14, 28, 0.85);

  border: 1px solid rgba(255,255,255,.12);

  font-size: .75rem;

  font-weight: 600;

  transition: all .3s ease;

  z-index: 10;

}



.ts-player-name {

  color: var(--muted);

  letter-spacing: .03em;

}



.ts-seat.is-active {

  border-color: var(--gold);

  box-shadow: 0 0 16px rgba(230, 182, 85, 0.5);

  background: rgba(230, 182, 85, 0.15);

}



.ts-seat.is-active .ts-player-name {

  color: #fff;

}



.ts-seat.is-winner {

  border-color: #ffd700;

  background: rgba(255, 215, 0, 0.22);

  box-shadow: 0 0 24px rgba(255, 215, 0, 0.7);

  transform: scale(1.08);

}



.ts-seat.is-winner .ts-player-name {

  color: #ffd700;

}





.ts-seat-3 { top: 12px; left: 50%; transform: translateX(-50%); }



.ts-seat-1 { bottom: 12px; left: 50%; transform: translateX(-50%); }



.ts-seat-4 { left: 12px; top: 50%; transform: translateY(-50%); }



.ts-seat-2 { right: 12px; top: 50%; transform: translateY(-50%); }





/* Ausgespielte Karten in Tischmitte */

.ts-felt-center {

  width: 240px;

  height: 200px;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

}



.ts-played-area {

  position: relative;

  width: 100%;

  height: 100%;

}



.ts-card-item {

  position: absolute;

  width: 72px;

  height: 110px;

  border-radius: 8px;

  overflow: hidden;

  box-shadow: 0 8px 24px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,.15);

  animation: cardDeal .45s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards;

  display: flex;

  flex-direction: column;

}



.ts-card-item img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.ts-card-badge {

  position: absolute;

  bottom: 0;

  inset-inline: 0;

  background: rgba(5,7,15,0.85);

  color: #fff;

  font-size: .55rem;

  font-weight: 700;

  text-align: center;

  padding: 2px 0;

  white-space: nowrap;

  text-overflow: ellipsis;

  overflow: hidden;

}





/* Positionen der 4 gespielten Karten im Kreis */

.ts-from-1 { bottom: 8px; left: 50%; transform: translateX(-50%) rotate(0deg); z-index: 4; }



.ts-from-2 { right: 14px; top: 50%; transform: translateY(-50%) rotate(90deg); z-index: 2; }



.ts-from-3 { top: 8px; left: 50%; transform: translateX(-50%) rotate(180deg); z-index: 1; }



.ts-from-4 { left: 14px; top: 50%; transform: translateY(-50%) rotate(-90deg); z-index: 3; }





@keyframes cardDeal {

  from { opacity: 0; scale: 0.6; }



  to { opacity: 1; scale: 1; }



}





.ts-card-player-label {

  position: absolute;

  top: -24px;

  left: 50%;

  transform: translateX(-50%);

  font-size: 0.65rem;

  font-weight: 700;

  color: #94a3b8;

  white-space: nowrap;

  pointer-events: none;

  opacity: 0;

  transition: opacity 0.3s ease, color 0.3s ease;

}



.ts-card-winner-badge {

  position: absolute;

  top: 6px;

  left: 50%;

  transform: translateX(-50%);

  background: linear-gradient(135deg, #d4af37, #f59e0b);

  color: #0b1120;

  font-size: 0.58rem;

  font-weight: 900;

  padding: 2px 7px;

  border-radius: 999px;

  letter-spacing: 0.5px;

  box-shadow: 0 2px 8px rgba(0,0,0,0.8);

  display: none;

  z-index: 5;

  white-space: nowrap;

}



.ts-card-item.is-winning-card {

  box-shadow: 0 0 28px rgba(255, 215, 0, 0.85), 0 0 0 2px #ffd700;

  z-index: 20 !important;

  animation: winPulse 1.2s infinite alternate;

}



@keyframes winPulse {

  to { transform: scale(1.1) rotate(0deg); }

}



/* ============================================================

   SHOWDOWN-MODUS (KARTEN NEBENEINANDER & GRÖSSER)

   ============================================================ */

.ts-table-stage.is-showdown .ts-seat {

  opacity: 0.35;

  filter: grayscale(40%);

  transform: scale(0.92);

}



.ts-table-stage.is-showdown .ts-seat.is-winner {

  opacity: 1 !important;

  filter: none !important;

  transform: scale(1.08) !important;

  border-color: #ffd700 !important;

  box-shadow: 0 0 25px rgba(255, 215, 0, 0.8) !important;

}



.ts-felt-center.is-showdown {

  width: 95%;

  max-width: 480px;

  height: 250px;

  transition: all 0.5s ease;

}



.ts-played-area.is-showdown {

  display: flex !important;

  justify-content: center !important;

  align-items: center !important;

  gap: 12px !important;

  width: 100% !important;

  height: 100% !important;

}



.ts-played-area.is-showdown .ts-card-item {

  position: relative !important;

  top: auto !important;

  bottom: auto !important;

  left: auto !important;

  right: auto !important;

  transform: none;

  width: 95px !important;

  height: 145px !important;

  border-radius: 10px !important;

  transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2), box-shadow 0.5s ease, opacity 0.5s ease, filter 0.5s ease;

  box-shadow: 0 10px 28px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.2) !important;

  animation: none !important;

}



.ts-played-area.is-showdown .ts-card-player-label {

  opacity: 1;

}



.ts-played-area.is-showdown .ts-card-badge {

  font-size: 0.65rem !important;

  padding: 3px 2px !important;

  background: rgba(5, 7, 18, 0.92) !important;

}



.ts-played-area.is-showdown .ts-card-item.is-winning-card {

  transform: translateY(-16px) scale(1.1) !important;

  box-shadow: 0 0 35px rgba(255, 215, 0, 0.95), 0 0 0 3px #ffd700 !important;

  z-index: 25 !important;

  opacity: 1 !important;

  filter: none !important;

  animation: winGlowPulse 1.4s infinite alternate ease-in-out !important;

}



.ts-played-area.is-showdown .ts-card-item.is-winning-card .ts-card-player-label {

  color: #ffd700 !important;

  font-weight: 800 !important;

}



.ts-played-area.is-showdown .ts-card-item.is-winning-card .ts-card-winner-badge {

  display: block;

  animation: popIn 0.3s ease;

}



.ts-played-area.is-showdown .ts-card-item:not(.is-winning-card) {

  opacity: 0.55 !important;

  filter: brightness(0.8) grayscale(20%) !important;

  transform: scale(0.95) !important;

}



@keyframes winGlowPulse {

  0% {

    transform: translateY(-16px) scale(1.1);

    box-shadow: 0 0 25px rgba(255, 215, 0, 0.8), 0 0 0 3px #ffd700;

  }

  100% {

    transform: translateY(-22px) scale(1.14);

    box-shadow: 0 0 45px rgba(255, 215, 0, 1), 0 0 20px #ffd700, 0 0 0 3px #fff;

  }

}



/* Banner Position im Showdown */

.ts-table-stage.is-showdown .ts-outcome-banner {

  top: 18px !important;

  left: 50% !important;

  transform: translateX(-50%) !important;

  font-size: 0.85rem !important;

  padding: 0.45rem 1.1rem !important;

}



/* Responsive Showdown */

@media (max-width: 520px) {

  .ts-played-area.is-showdown {

    gap: 6px !important;

  }

  .ts-played-area.is-showdown .ts-card-item {

    width: 76px !important;

    height: 116px !important;

  }

  .ts-played-area.is-showdown .ts-card-player-label {

    top: -18px;

    font-size: 0.58rem;

  }

  .ts-played-area.is-showdown .ts-card-badge {

    font-size: 0.52rem !important;

  }

}



/* Schöne, strukturierte Regelerklärung */

.ts-showdown-explanation {

  display: flex;

  flex-direction: column;

  gap: 10px;

  text-align: left;

}



.ts-explain-head {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 1.05rem;

  font-weight: 700;

  color: #ffd700;

  border-bottom: 1px solid rgba(255, 215, 0, 0.25);

  padding-bottom: 6px;

}



.ts-explain-box-inner {

  background: rgba(15, 23, 42, 0.7);

  border: 1px solid rgba(255, 215, 0, 0.3);

  border-left: 4px solid #ffd700;

  border-radius: 8px;

  padding: 12px 16px;

}



.ts-why-tag {

  font-size: 0.85rem;

  font-weight: 700;

  color: #fbbf24;

  margin-bottom: 6px;

  text-transform: uppercase;

  letter-spacing: 0.5px;

}



.ts-why-text {

  font-size: 0.92rem;

  color: #f1f5f9;

  line-height: 1.55;

}





.ts-outcome-banner {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  background: rgba(14, 18, 36, 0.95);

  border: 1px solid #ffd700;

  color: #fff;

  padding: .5rem 1rem;

  border-radius: 999px;

  font-size: .82rem;

  font-weight: 700;

  white-space: nowrap;

  box-shadow: 0 8px 30px rgba(0,0,0,0.8), 0 0 20px rgba(255, 215, 0, 0.4);

  z-index: 30;

  animation: popIn .3s ease;

}



@keyframes popIn {

  from { scale: .7; opacity: 0; }



  to { scale: 1; opacity: 1; }



}





/* Controls */

.ts-controls-bar {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: center;

  gap: .75rem;

  margin-bottom: 1rem;

}



.ts-scenario-tag {

  font-size: .82rem;

  color: var(--gold2);

  background: rgba(255,255,255,.05);

  padding: .35rem .85rem;

  border-radius: 999px;

  border: 1px solid rgba(255,255,255,.1);

}





.ts-explanation-box {

  background: rgba(255,255,255,.03);

  border: 1px solid rgba(255,255,255,.08);

  border-radius: 12px;

  padding: .9rem 1.2rem;

  font-size: .92rem;

  line-height: 1.55;

  color: #e5e2f3;

  text-align: center;

}





/* ============================================================

   REGEL-GLOSSAR TOOLTIPS

   ============================================================ */

.glossar-term {

  position: relative;

  text-decoration: underline dotted var(--gold);

  text-underline-offset: 4px;

  cursor: help;

  color: #fff;

  font-weight: 600;

  transition: color .2s;

}



.glossar-term:hover, .glossar-term:focus {

  color: var(--gold2);

}



.glossar-term::after {

  content: attr(data-tooltip);

  position: absolute;

  bottom: calc(100% + 8px);

  left: 50%;

  transform: translateX(-50%) translateY(4px);

  opacity: 0;

  pointer-events: none;

  width: max-content;

  max-width: 260px;

  background: linear-gradient(160deg, #181c33 0%, #0d1020 100%);

  border: 1px solid rgba(230, 182, 85, 0.45);

  box-shadow: 0 10px 30px rgba(0,0,0,0.8), 0 0 16px rgba(230, 182, 85, 0.2);

  color: #f1eefb;

  font-size: .78rem;

  font-weight: 400;

  line-height: 1.45;

  padding: .5rem .8rem;

  border-radius: 10px;

  z-index: 1000;

  transition: opacity .25s ease, transform .25s ease;

  white-space: normal;

  text-align: left;

}



.glossar-term:hover::after, .glossar-term:focus::after {

  opacity: 1;

  transform: translateX(-50%) translateY(0);

}



body.tooltips-disabled .glossar-term {

  text-decoration: none;

  cursor: default;

}



body.tooltips-disabled .glossar-term::after {

  display: none !important;

}





/* ============================================================

   3D TILT GLARE OVERLAY

   ============================================================ */

.tcard {

  position: relative;

  transform-style: preserve-3d;

  will-change: transform;

}





.card-tilt-glare {

  position: absolute;

  inset: 0;

  border-radius: inherit;

  pointer-events: none;

  opacity: 0;

  transition: opacity .35s ease;

  z-index: 5;

}







/* ============================================================

   FLOATING QUICK-DOCK (Lagerfeuer-Quick-Button & Ambiente-Radio)

   ============================================================ */

.floating-quick-dock {

  position: fixed;

  right: 18px;

  bottom: calc(var(--tab) + 16px);

  z-index: 85;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 10px;

}



@media(min-width: 761px) {

  .floating-quick-dock {

    bottom: 22px;

    right: 22px;

    gap: 12px;

  }



}





.campfire-quick-btn {

  width: 44px;

  height: 44px;

  border-radius: 50%;

  background: radial-gradient(circle at 35% 35%, #ff8820, #9a2008 85%);

  color: #fff;

  display: grid;

  place-items: center;

  border: 1.5px solid rgba(255, 200, 100, 0.6);

  box-shadow: 0 4px 18px rgba(255, 80, 10, 0.45), 0 0 12px rgba(255, 140, 30, 0.3);

  cursor: pointer;

  transition: all .25s cubic-bezier(0.2, 0.8, 0.2, 1);

  position: relative;

  font-size: 1.25rem;

  padding: 0;

}



.campfire-quick-btn:hover {

  transform: scale(1.12) translateY(-2px);

  box-shadow: 0 8px 26px rgba(255, 90, 10, 0.7), 0 0 20px rgba(255, 170, 50, 0.5);

  border-color: #ffd27d;

}



.campfire-quick-btn .campfire-btn-glow {

  position: absolute;

  inset: -3px;

  border-radius: 50%;

  border: 1.5px solid #ff9922;

  opacity: 0.6;

  animation: campfireBtnPulse 2.4s infinite ease-in-out;

  pointer-events: none;

}



@keyframes campfireBtnPulse {

  0% { transform: scale(1); opacity: .7; }



  50% { transform: scale(1.18); opacity: .15; }



  100% { transform: scale(1); opacity: .7; }



}





.ambient-music-btn {

  position: relative;

  right: auto;

  bottom: auto;

  width: 44px;

  height: 44px;

  border-radius: 50%;

  background: linear-gradient(135deg, #f0ba52, #c88024);

  color: #120e04;

  display: grid;

  place-items: center;

  border: 1px solid rgba(255, 230, 160, 0.5);

  box-shadow: 0 4px 18px rgba(220, 150, 40, 0.4), 0 0 12px rgba(240, 186, 82, 0.3);

  cursor: pointer;

  transition: all .25s cubic-bezier(0.2, 0.8, 0.2, 1);

}



.ambient-music-btn:hover {

  transform: scale(1.12) translateY(-2px);

  box-shadow: 0 8px 26px rgba(240, 170, 50, 0.6), 0 0 20px rgba(255, 215, 120, 0.5);

}





/* ============================================================

   DEKORATIVE HINTERGRUND-KARTEN (GESAMTE WEBSITE)

   Flankieren die Seitenränder dezent im Hintergrund.

   Weit verteilt, sanft in den Hintergrund eingebettet.

   Der Bereich hinter dem Kartenkatalog (#karten) bleibt frei!

   ============================================================ */

.bg-section-cards {

  position: absolute;

  inset: 0;

  pointer-events: none;

  z-index: 0;

  overflow: visible;

}



.wrap, .sec-head, .guide, .book-wrap, .guide-wrap, .kunst-intro-card, .factions, .features {

  position: relative;

  z-index: 2;

}



.bg-card {

  position: absolute;

  width: min(195px, 16vw);

  border-radius: 14px;

  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85), 0 0 22px rgba(212, 175, 55, 0.1), 0 0 0 1px rgba(255, 255, 255, 0.12);

  opacity: .34;

  filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.7));

  animation: floatFlank 10s ease-in-out infinite;

  transition: opacity .5s ease, transform .5s ease;

  pointer-events: none;

}





/* Linke Flanke */

.bg-card-l1 {

  left: clamp(-45px, 1.2vw, 35px);

  top: 10%;

  transform: rotate(-8deg);

}



.bg-card-l2 {

  left: clamp(-30px, 2.2vw, 55px);

  top: 60%;

  transform: rotate(7deg);

  animation-delay: -4.5s;

}





/* Rechte Flanke */

.bg-card-r1 {

  right: clamp(-45px, 1.2vw, 35px);

  top: 20%;

  transform: rotate(9deg);

  animation-delay: -2.8s;

}



.bg-card-r2 {

  right: clamp(-30px, 2.2vw, 55px);

  top: 68%;

  transform: rotate(-9deg);

  animation-delay: -6.2s;

}





@keyframes floatFlank {

  0%, 100% { translate: 0 0; }



  50% { translate: 0 -16px; }



}





@media(max-width: 1400px) {

  .bg-card {

    opacity: .24;

    width: min(170px, 13.5vw);

  }



}



@media(max-width: 1200px) {

  .bg-card {

    opacity: .15;

  }



}



@media(max-width: 960px) {

  .bg-section-cards {

    display: none !important;

  }



}





/* ============================================================

   THURUM-BOTE ADVENTURE & COMBAT MODE (CAMPFIRE INTERACTION)

   ============================================================ */



.thurum-player-avatar {

  position: absolute;

  width: 68px;

  height: 68px;

  z-index: 10001;

  pointer-events: none;

  will-change: left, top;

  transition: filter 0.2s ease;

}





.thurum-player-avatar .thurum-sprite {

  width: 100%;

  height: 100%;

  object-fit: contain;

  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.7));

  pointer-events: none;

  transform-origin: center;

}





.thurum-player-avatar .thurum-shadow-aura {

  position: absolute;

  bottom: 0px;

  left: 50%;

  transform: translateX(-50%);

  width: 46px;

  height: 12px;

  border-radius: 50%;

  background: radial-gradient(ellipse at center, rgba(0, 229, 255, 0.4) 0%, rgba(212, 175, 55, 0.25) 55%, transparent 80%);

  filter: blur(2px);

  pointer-events: none;

  z-index: -1;

}





.thurum-player-avatar.is-hurt {

  filter: brightness(2.2) drop-shadow(0 0 12px #ef4444);

  animation: thrumFlinch 0.4s ease-out;

}





.thurum-player-avatar.is-dead {

  filter: grayscale(1) opacity(0.5) drop-shadow(0 0 18px rgba(0, 0, 0, 0.9));

  transition: all 2s ease;

}





@keyframes thrumFlinch {

  0%, 100% { transform: scale(1); }



  50% { transform: scale(0.9) translateY(-6px); }



}





/* Schwert-Hieb Effekt */

.thurum-slash-fx {

  position: absolute;

  top: -8px;

  right: -24px;

  width: 78px;

  height: 78px;

  border-radius: 50%;

  border-right: 4px solid #ffffff;

  border-top: 4px solid #ffd700;

  border-bottom: 2px solid transparent;

  border-left: 2px solid transparent;

  opacity: 0;

  pointer-events: none;

  transform-origin: center;

  filter: drop-shadow(0 0 10px #ffd700);

}





.thurum-slash-fx.is-slashing {

  animation: thrumSlash 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;

}





@keyframes thrumSlash {

  0% { opacity: 0; transform: rotate(-60deg) scale(0.5); }



  35% { opacity: 1; transform: rotate(35deg) scale(1.15); }



  100% { opacity: 0; transform: rotate(115deg) scale(1.35); }



}





/* Funken / Treffer-Impuls */

.thurum-hit-spark {

  position: absolute;

  width: 26px;

  height: 26px;

  pointer-events: none;

  border-radius: 50%;

  background: radial-gradient(circle, #ffffff 15%, #ffd700 55%, rgba(255, 215, 0, 0) 75%);

  transform: translate(-50%, -50%);

  animation: thrumHitSpark 0.4s ease-out forwards;

  z-index: 10002;

}





@keyframes thrumHitSpark {

  0% { transform: translate(-50%, -50%) scale(0.4); opacity: 1; }



  100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }



}





/* HUD Overlay */

.thurum-hud {

  position: fixed;

  bottom: 24px;

  left: 50%;

  transform: translateX(-50%);

  z-index: 10005;

  pointer-events: auto;

  font-family: inherit;

}





.thurum-hud-inner {

  background: rgba(10, 15, 26, 0.94);

  border: 1px solid rgba(212, 175, 55, 0.55);

  border-radius: 14px;

  padding: 10px 18px;

  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.75), 0 0 22px rgba(212, 175, 55, 0.22);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  color: #e2e8f0;

  display: flex;

  flex-direction: column;

  gap: 8px;

  min-width: 320px;

  max-width: 92vw;

}





.thurum-hud-top {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 14px;

}





.thurum-lives-box {

  display: flex;

  gap: 4px;

  font-size: 1.15rem;

  line-height: 1;

  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6));

}





.th-heart {

  display: inline-block;

  transition: transform 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);

}





.th-heart.empty {

  opacity: 0.35;

  filter: grayscale(1);

}





.thurum-info-box {

  display: flex;

  flex-direction: column;

  line-height: 1.2;

}





.thurum-tag {

  font-size: 0.82rem;

  font-weight: 700;

  color: #ffd700;

  letter-spacing: 0.5px;

}





.thurum-hits {

  font-size: 0.75rem;

  color: #94a3b8;

}





.thurum-btn-exit {

  background: rgba(239, 68, 68, 0.16);

  border: 1px solid rgba(239, 68, 68, 0.45);

  color: #fca5a5;

  padding: 4px 10px;

  border-radius: 6px;

  font-size: 0.78rem;

  font-weight: 600;

  cursor: pointer;

  transition: all 0.2s ease;

}





.thurum-btn-exit:hover {

  background: rgba(239, 68, 68, 0.35);

  border-color: #ef4444;

  color: #ffffff;

}





.thurum-hud-hints {

  display: flex;

  gap: 14px;

  font-size: 0.72rem;

  color: #94a3b8;

  border-top: 1px solid rgba(255, 255, 255, 0.08);

  padding-top: 6px;

  justify-content: center;

  flex-wrap: wrap;

}





.thurum-hud-hints b {

  color: #e2e8f0;

}





/* Touch-Steuerung */

.thurum-touch-wrap {

  display: none;

  align-items: center;

  justify-content: space-between;

  gap: 18px;

  margin-top: 6px;

  padding-top: 6px;

  border-top: 1px dashed rgba(212, 175, 55, 0.25);

}





@media (pointer: coarse), (max-width: 768px) {

  .thurum-touch-wrap {

    display: flex;

  }



}





.thurum-dpad {

  position: relative;

  width: 96px;

  height: 96px;

  background: rgba(0, 0, 0, 0.35);

  border-radius: 50%;

  border: 1px solid rgba(212, 175, 55, 0.3);

}





.t-dbtn {

  position: absolute;

  width: 32px;

  height: 32px;

  background: rgba(212, 175, 55, 0.22);

  border: 1px solid rgba(212, 175, 55, 0.55);

  border-radius: 8px;

  color: #ffd700;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 0.85rem;

  user-select: none;

  touch-action: manipulation;

  cursor: pointer;

  padding: 0;

}





.t-dbtn:active {

  background: rgba(212, 175, 55, 0.55);

  transform: scale(0.92);

}





.t-up { top: 2px; left: 32px; }



.t-down { bottom: 2px; left: 32px; }



.t-left { top: 32px; left: 2px; }



.t-right { top: 32px; right: 2px; }





.thurum-touch-attack {

  background: linear-gradient(135deg, #f59e0b, #d97706);

  border: 1px solid #fef08a;

  color: #0b0f19;

  font-weight: 800;

  font-size: 0.85rem;

  padding: 14px 22px;

  border-radius: 12px;

  cursor: pointer;

  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.45);

  user-select: none;

  touch-action: manipulation;

  letter-spacing: 0.5px;

}





.thurum-touch-attack:active {

  transform: scale(0.95);

  filter: brightness(1.2);

}





/* Toast Banner */

.thurum-toast-banner {

  position: fixed;

  top: 76px;

  left: 50%;

  transform: translateX(-50%);

  z-index: 10006;

  background: rgba(15, 23, 42, 0.95);

  border: 1px solid #ffd700;

  color: #fef08a;

  padding: 10px 22px;

  border-radius: 30px;

  font-weight: 600;

  font-size: 0.88rem;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7), 0 0 16px rgba(212, 175, 55, 0.35);

  transition: opacity 0.4s ease, transform 0.4s ease;

  pointer-events: none;

  text-align: center;

  max-width: 90vw;

}





/* Lagerfeuer Beitritts-Button */

.campfire-action-row {

  margin-top: 20px;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 8px;

}





.campfire-play-btn {

  display: inline-flex;

  align-items: center;

  gap: 9px;

  padding: 10px 24px;

  font-weight: 700;

  border-radius: 30px;

  font-size: 0.92rem;

  letter-spacing: 0.3px;

  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.35);

  transition: transform 0.2s, box-shadow 0.2s;

  cursor: pointer;

}





.campfire-play-btn:hover {

  transform: translateY(-2px);

  box-shadow: 0 6px 22px rgba(212, 175, 55, 0.55);

}





.campfire-action-note {

  font-size: 0.78rem;

  color: #94a3b8;

  text-align: center;

  max-width: 480px;

  margin: 0;

}







/* ============================================================

   ASSET-VAULT (KOMPAKTE HIGHLIGHTS & GIF-DOWNLOADS)

   ============================================================ */

.anim-vault-compact {

  margin: 1.5rem 0 2.5rem;

}



.av-compact-bar {

  background: radial-gradient(circle at 50% 20%, rgba(212, 175, 55, 0.08), rgba(11, 15, 25, 0.95) 80%);

  border: 1px solid rgba(212, 175, 55, 0.25);

  border-radius: 14px;

  padding: 1.2rem 1.4rem;

  margin-bottom: 1rem;

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: space-between;

  gap: 1rem;

}



.av-compact-header {

  flex: 1;

  min-width: 260px;

}



.av-compact-title {

  font-family: var(--font-title);

  font-size: clamp(1.2rem, 2.2vw, 1.5rem);

  color: #fff;

  margin: 0.25rem 0 0.35rem;

}



.av-compact-desc {

  color: var(--text-muted, #94a3b8);

  font-size: 0.88rem;

  margin: 0;

  max-width: 620px;

  line-height: 1.4;

}



.av-compact-actions {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 12px;

}



.av-bg-toggles {

  display: flex;

  align-items: center;

  gap: 6px;

  background: rgba(5, 7, 14, 0.8);

  padding: 4px 8px;

  border-radius: 20px;

  border: 1px solid rgba(255, 255, 255, 0.08);

}



.av-bg-label {

  font-size: 0.75rem;

  color: var(--text-muted);

  margin-right: 2px;

}



.av-bg-btn {

  background: transparent;

  border: 1px solid transparent;

  border-radius: 50%;

  width: 28px;

  height: 28px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 0.85rem;

  cursor: pointer;

  transition: all 0.15s ease;

}



.av-bg-btn:hover {

  background: rgba(255, 255, 255, 0.1);

}



.av-bg-btn.active {

  background: rgba(212, 175, 55, 0.25);

  border-color: #d4af37;

  box-shadow: 0 0 8px rgba(212, 175, 55, 0.4);

}



.av-compact-filters {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  margin-bottom: 1rem;

}



.av-compact-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));

  gap: 10px;

}



.av-mini-card {

  background: rgba(13, 17, 30, 0.85);

  border: 1px solid rgba(212, 175, 55, 0.18);

  border-radius: 10px;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);

}



.av-mini-card:hover {

  transform: translateY(-2px);

  border-color: rgba(212, 175, 55, 0.45);

  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.65);

}



.av-mini-preview {

  height: 92px;

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

  overflow: hidden;

}



.av-mini-img {

  max-height: 80px;

  max-width: 88%;

  object-fit: contain;

}



.av-mini-info {

  padding: 6px 8px 8px;

  display: flex;

  flex-direction: column;

  gap: 5px;

  background: rgba(8, 10, 18, 0.65);

  border-top: 1px solid rgba(255, 255, 255, 0.05);

}



.av-mini-top {

  display: flex;

  flex-direction: column;

  gap: 2px;

}



.av-mini-tag {

  font-size: 0.62rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.4px;

}



.av-mini-tag.badge-gelb { color: #facc15; }



.av-mini-tag.badge-blau { color: #38bdf8; }



.av-mini-tag.badge-gruen { color: #4ade80; }



.av-mini-tag.badge-rot { color: #f87171; }



.av-mini-tag.badge-emote { color: #e879f9; }





.av-mini-name {

  font-size: 0.78rem;

  font-weight: 600;

  color: #f1f5f9;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.av-mini-dl-row {

  display: flex;

  gap: 4px;

}



.av-mini-dl-btn {

  flex: 1;

  text-align: center;

  font-size: 0.68rem;

  font-weight: 700;

  padding: 3px 0;

  border-radius: 5px;

  text-decoration: none;

  transition: all 0.15s ease;

}



.av-mini-dl-btn.dl-webp {

  background: rgba(212, 175, 55, 0.12);

  color: #f5d070;

  border: 1px solid rgba(212, 175, 55, 0.35);

}



.av-mini-dl-btn.dl-webp:hover {

  background: rgba(212, 175, 55, 0.28);

  color: #fff;

  border-color: #f5d070;

}



.av-mini-dl-btn.dl-gif {

  background: rgba(56, 189, 248, 0.12);

  color: #7dd3fc;

  border: 1px solid rgba(56, 189, 248, 0.35);

}



.av-mini-dl-btn.dl-gif:hover {

  background: rgba(56, 189, 248, 0.28);

  color: #fff;

  border-color: #38bdf8;

}





/* Background preview styles */

.bg-checker {

  background-color: #1a1e29;

  background-image: 

    linear-gradient(45deg, #11141d 25%, transparent 25%),

    linear-gradient(-45deg, #11141d 25%, transparent 25%),

    linear-gradient(45deg, transparent 75%, #11141d 75%),

    linear-gradient(-45deg, transparent 75%, #11141d 75%);

  background-size: 16px 16px;

  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;

}



.bg-dark {

  background: radial-gradient(circle at 50% 50%, #0d1222 0%, #05070e 100%);

}



.bg-fire {

  background: radial-gradient(circle at 50% 60%, rgba(255, 90, 20, 0.35) 0%, rgba(15, 8, 5, 0.95) 75%);

}



.bg-light {

  background: #f1f5f9;

}







/* ============================================================

   MOBILE ERGONOMIE & HERO FIXES (HANDY-OPTIMIERUNG)

   ============================================================ */

@media (max-width: 768px) {

  /* Hero auf dem Handy: Text und Buttons haben absolute Priorität! */

  .hero {

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    text-align: center !important;

    padding: calc(var(--top) + 0.8rem) 1rem 2.8rem !important;

    overflow: hidden !important;

    min-height: auto !important;

  }



  .hero-inner {

    order: 1 !important;

    width: 100% !important;

    max-width: 100% !important;

    margin: 0 auto !important;

    z-index: 5 !important;

    position: relative !important;

  }



  .eyebrow {

    font-size: 0.78rem !important;

    letter-spacing: 0.12em !important;

    margin-bottom: 0.4rem !important;

    word-break: break-word !important;

  }



  .title {

    font-size: clamp(2.6rem, 12vw, 4rem) !important;

    margin: 0.2rem auto 0.6rem !important;

    display: block !important;

  }



  .lead {

    font-size: 1.05rem !important;

    line-height: 1.4 !important;

    margin-bottom: 1.4rem !important;

    color: #e2ddf2 !important;

    padding: 0 0.5rem !important;

  }



  .cta-row {

    display: flex !important;

    flex-direction: column !important;

    gap: 0.75rem !important;

    width: 100% !important;

    max-width: 320px !important;

    margin: 0 auto 1.5rem !important;

  }



  .cta-row .btn {

    width: 100% !important;

    padding: 0.85rem 1.4rem !important;

    font-size: 1rem !important;

    justify-content: center !important;

  }



  .facts {

    display: flex !important;

    justify-content: center !important;

    gap: 1.2rem 1.5rem !important;

    flex-wrap: wrap !important;

    margin: 0 auto 1.2rem !important;

  }



  .facts b {

    font-size: 1.4rem !important;

  }



  .facts span {

    font-size: 0.72rem !important;

  }



  

  /* Hero-Karten liegen sauber gefächert UNTER den Texten und Buttons - KEIN Überlappen! */

  .hero-cards {

    order: 2 !important;

    position: relative !important;

    width: 100% !important;

    max-width: 340px !important;

    height: 180px !important;

    margin: 0.5rem auto 0 !important;

    perspective: 800px !important;

    display: flex !important;

    justify-content: center !important;

    align-items: center !important;

    pointer-events: none !important;

    z-index: 2 !important;

  }



  .hc {

    position: absolute !important;

    width: 95px !important;

    height: 145px !important;

    border-radius: 9px !important;

    box-shadow: 0 10px 25px rgba(0,0,0,0.85), 0 0 10px rgba(230,182,85,0.2) !important;

    animation: floatHandy 6s ease-in-out infinite !important;

  }



  .hc1 { left: calc(50% - 130px) !important; top: 18px !important; transform: rotate(-18deg) !important; z-index: 1 !important; }



  .hc2 { left: calc(50% - 70px) !important; top: 6px !important; transform: rotate(-9deg) !important; z-index: 2 !important; }



  .hc3 { left: calc(50% - 15px) !important; top: 0px !important; transform: rotate(0deg) !important; z-index: 3 !important; }



  .hc4 { left: calc(50% + 40px) !important; top: 6px !important; transform: rotate(9deg) !important; z-index: 2 !important; }



  .hc5 { left: calc(50% + 95px) !important; top: 18px !important; transform: rotate(18deg) !important; z-index: 1 !important; }





  @keyframes floatHandy {

    0%, 100% { translate: 0 0; }



    50% { translate: 0 -8px; }



  }





  /* Topbar mobil: CALIGO niemals abgeschnitten, Buttons kompakt */

  .topbar {

    justify-content: space-between !important;

    padding: 0 0.75rem !important;

    padding-top: env(safe-area-inset-top) !important;

    overflow: hidden !important;

  }



  .brand {

    font-size: 0.95rem !important;

    gap: 0.4rem !important;

    flex-shrink: 0 !important;

    margin-inline: 0 !important;

  }



  .topbar-right {

    gap: 0.35rem !important;

    flex-shrink: 0 !important;

  }



  .topbar-right a[href="studio.html"] {

    display: none !important;

  }



  .btn-thurum-nav {

    padding: 0.35rem 0.65rem !important;

    font-size: 0.78rem !important;

  }



  @media (max-width: 380px) {

    .btn-thurum-nav .nav-btn-text {

      display: none !important;

    }



    .btn-thurum-nav {

      padding: 0.38rem 0.55rem !important;

    }



  }





  /* Lightbox / Karten-Detailansicht mobil: 100% sicher zentriert, kein Flex-Überlauf nach links */

  .lightbox[hidden] {

    display: none !important;

  }



  .lightbox:not([hidden]) {

    display: block !important;

    position: fixed !important;

    inset: 0 !important;

    width: 100% !important;

    box-sizing: border-box !important;

    overflow-x: hidden !important;

    overflow-y: auto !important;

    -webkit-overflow-scrolling: touch;

    padding: max(4.2rem, calc(env(safe-area-inset-top) + 3.2rem)) 0.75rem calc(7.5rem + env(safe-area-inset-bottom)) !important;

  }



  .lb-close {

    position: fixed !important;

    top: max(1rem, env(safe-area-inset-top) + 0.4rem) !important;

    right: 1rem !important;

    width: 42px !important;

    height: 42px !important;

    z-index: 1020 !important;

  }



  .lb-modal-container {

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: flex-start !important;

    max-height: none !important;

    gap: 1.2rem !important;

    margin: 0 auto !important;

    width: 100% !important;

    max-width: 500px !important;

    overflow-x: hidden !important;

    box-sizing: border-box !important;

  }



  .lb-col-center {

    order: 1 !important;

    width: 100% !important;

    max-width: 100% !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    text-align: center !important;

    box-sizing: border-box !important;

  }



  .lb-card-nav-wrap {

    width: 100% !important;

    max-width: 310px !important;

    margin: 0 auto !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 0.7rem !important;

    padding: 0 4px !important;

    box-sizing: border-box !important;

  }



  .lb-card {

    width: min(58vw, 195px) !important;

    height: auto !important;

    aspect-ratio: 673/1051 !important;

    border-radius: 14px !important;

    flex-shrink: 0 !important;

    margin: 0 auto !important;

  }



  .lb-nav {

    width: 38px !important;

    height: 38px !important;

    flex-shrink: 0 !important;

  }



  .lb-card-caption {

    width: 100% !important;

    max-width: 100% !important;

    text-align: center !important;

    padding: 0 0.5rem !important;

    margin-top: 0.85rem !important;

    box-sizing: border-box !important;

  }



  .lb-card-caption b {

    font-size: 1.25rem !important;

    display: block !important;

    word-break: break-word !important;

  }



  .lb-card-caption span {

    font-size: 0.88rem !important;

    display: block !important;

    word-break: break-word !important;

  }



  .lb-card-caption small {

    font-size: 0.78rem !important;

    display: block !important;

    word-break: break-word !important;

  }



  .lb-col-left {

    order: 2 !important;

    width: 100% !important;

    max-width: 100% !important;

    max-height: none !important;

    overflow: visible !important;

    box-sizing: border-box !important;

    padding: 0 2px !important;

  }



  .lb-col-right {

    order: 3 !important;

    width: 100% !important;

    max-width: 100% !important;

    max-height: none !important;

    overflow: visible !important;

    box-sizing: border-box !important;

    padding: 0 2px !important;

  }



  .lb-panel-card {

    width: 100% !important;

    max-width: 100% !important;

    box-sizing: border-box !important;

    padding: 1.2rem 1rem !important;

    overflow: hidden !important;

  }



  .lb-panel-title {

    font-size: 1.15rem !important;

    word-break: break-word !important;

  }



  .lb-stats-grid {

    grid-template-columns: 1fr 1fr !important;

    gap: 0.5rem !important;

  }



  .lb-stat-box {

    padding: 0.5rem 0.6rem !important;

    box-sizing: border-box !important;

  }



  .lb-stat-label {

    font-size: 0.68rem !important;

    white-space: nowrap !important;

    overflow: hidden !important;

    text-overflow: ellipsis !important;

  }



  .lb-stat-val {

    font-size: 0.95rem !important;

  }



}





.topnav-fire-link {

  font-size: 1.15rem !important;

  color: #ff9d42 !important;

  font-weight: 700;

  text-shadow: 0 0 10px rgba(255, 120, 20, 0.4);

  transition: all 0.2s ease;

}



.topnav-fire-link:hover {

  color: #ffd070 !important;

  text-shadow: 0 0 14px rgba(255, 160, 40, 0.7);

  transform: scale(1.05);

}







/* ============================================================

   LINKE FLANKE: WEISSE KARTEN IM HINTERGRUND

   Voll deckend (solid, KEINE Transparenz!),

   starten sauber unter dem Titel CALIGO und staffeln sich

   vertikal weit auseinandergezogen nach unten!

   ============================================================ */

.hero-cards-left {

  position: absolute;

  left: clamp(10px, 2.5vw, 45px);

  top: clamp(680px, 76vh, 790px);

  width: min(230px, 22vw);

  height: 2100px;

  perspective: 1200px;

  pointer-events: none;

  z-index: 1;

}



.hc-l {

  position: absolute;

  width: min(94%, 220px);

  border-radius: 14px;

  box-shadow: 0 25px 65px rgba(0,0,0,0.8), 0 0 26px rgba(255,255,255,0.2), 0 0 0 1px rgba(255,255,255,0.25);

  opacity: 1 !important;

  animation: floatLeft 8s ease-in-out infinite;

  pointer-events: auto;

  transition: opacity .3s, transform .3s;

}



/* Weit auseinandergezogen: Grob die Hälfte der Kartenlänge (ca. 170px) echter Freiraum zwischen den Karten! (je 510px Versatz) */

.hcl1 {

  top: 0px;

  left: 0;

  transform: rotate(-7deg);

  z-index: 1;

}



.hcl2 {

  top: 510px;

  left: 24px;

  transform: rotate(5deg);

  z-index: 2;

  animation-delay: -2.5s;

}



.hcl3 {

  top: 1020px;

  left: -6px;

  transform: rotate(-6deg);

  z-index: 3;

  animation-delay: -5s;

}



.hcl4 {

  top: 1530px;

  left: 26px;

  transform: rotate(6deg);

  z-index: 4;

  animation-delay: -7s;

}



@keyframes floatLeft {

  0%, 100% { translate: 0 0; }



  50% { translate: 0 -14px; }



}



@media(max-width: 960px) {

  .hero-cards-left {

    display: none !important;

  }



}







/* ============================================================

   TOPBAR THURUM-BOTE BUTTON

   ============================================================ */

.btn-thurum-nav {

  background: rgba(212, 175, 55, 0.12) !important;

  border: 1px solid rgba(212, 175, 55, 0.45) !important;

  color: #f5d77f !important;

  font-weight: 600;

  transition: all .25s ease;

}



.btn-thurum-nav:hover {

  background: rgba(212, 175, 55, 0.28) !important;

  border-color: #ffd700 !important;

  color: #fff !important;

  transform: translateY(-2px);

  box-shadow: 0 6px 16px rgba(212, 175, 55, 0.3);

}





/* ============================================================

   CAMPFIRE TRICK CARDS & SIEGER-HERVORHEBUNG

   ============================================================ */

.campfire-mat {

  position: relative;

  width: clamp(230px, 38vw, 360px) !important;

  height: 90px !important;

  display: flex;

  align-items: center;

  justify-content: center;

}



.mini-cards-trick {

  position: relative;

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

}



.cf-mini-card {

  position: relative !important;

  width: clamp(48px, 8.5vw, 64px) !important;

  height: clamp(72px, 12.8vw, 96px) !important;

  border-radius: 8px !important;

  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.95), 0 0 16px rgba(255, 180, 50, 0.45) !important;

  border: 2px solid rgba(255, 255, 255, 0.5) !important;

  transition: all 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) !important;

  animation: cardDealDrop 0.45s cubic-bezier(0.18, 0.89, 0.32, 1.28) forwards !important;

  object-fit: cover !important;

  background: #111;

  cursor: pointer;

  transform-origin: center bottom;

}



.cf-mini-card:hover {

  transform: translateY(-10px) scale(1.12) !important;

  box-shadow: 0 18px 36px rgba(0,0,0,0.95), 0 0 24px rgba(255, 215, 0, 0.75) !important;

  z-index: 25 !important;

}



.cf-card-blau { transform: rotate(-8deg); }



.cf-card-gelb { transform: rotate(-3deg); }



.cf-card-rot { transform: rotate(3deg); }



.cf-card-gruen { transform: rotate(8deg); }





/* Gewinner-Karte im Stich – Exklusiv hervorgehoben */

.cf-card-winner {

  transform: translateY(-18px) scale(1.24) !important;

  border: 2.5px solid #ffd700 !important;

  box-shadow: 0 0 32px rgba(255, 215, 0, 0.98), 0 16px 40px rgba(0, 0, 0, 0.98) !important;

  z-index: 30 !important;

  animation: winnerCardPulse 1.2s ease-in-out infinite alternate !important;

}



@keyframes winnerCardPulse {

  0% { filter: drop-shadow(0 0 8px #ffd700); }



  100% { filter: drop-shadow(0 0 26px #ffb300); }



}





.cf-winner-badge {

  position: absolute;

  top: -18px;

  left: 50%;

  transform: translateX(-50%);

  background: linear-gradient(135deg, #ffd700, #ff8c00);

  color: #0b0c16;

  font-size: 0.65rem;

  font-weight: 800;

  padding: 3px 8px;

  border-radius: 12px;

  white-space: nowrap;

  letter-spacing: 0.05em;

  box-shadow: 0 4px 14px rgba(0,0,0,0.7), 0 0 12px rgba(255,215,0,0.6);

  pointer-events: none;

  animation: bounceBadge 0.6s ease-in-out infinite alternate;

  z-index: 40;

}



@keyframes bounceBadge {

  0% { transform: translateX(-50%) translateY(0); }



  100% { transform: translateX(-50%) translateY(-5px); }



}





/* Jubel-Tanz der Schleime */

.cf-celebrating {

  animation: slimeCelebrateJump 0.42s ease-in-out infinite alternate !important;

}



@keyframes slimeCelebrateJump {

  0% { transform: translateY(0) scale(1.1); }



  100% { transform: translateY(-26px) scale(1.28); }



}





/* ============================================================

   CAMPFIRE ADVENTURE BAR (Button & Beschreibung)

   ============================================================ */

.campfire-adventure-bar {

  margin: 2.4rem auto 1.5rem;

  max-width: 680px;

  text-align: center;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 0.75rem;

}



.btn-thurum-play {

  font-size: 1.05rem;

  padding: 0.85rem 1.8rem;

  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.35), 0 0 20px rgba(255, 180, 50, 0.25);

  display: inline-flex;

  align-items: center;

  gap: 0.6rem;

}



.campfire-adventure-desc {

  font-size: 0.88rem;

  color: var(--muted);

  max-width: 520px;

  line-height: 1.45;

}





/* ============================================================

   DUELL-ARENA DER THURUM-BOTEN (NPC Kampf)

   ============================================================ */

.campfire-duel-arena {

  margin: 3.2rem auto 2rem;

  max-width: 720px;

  background: radial-gradient(ellipse at 50% 30%, rgba(25, 20, 38, 0.95), rgba(9, 10, 18, 0.98) 75%);

  border: 1px solid rgba(212, 175, 55, 0.25);

  border-radius: 20px;

  padding: 1.8rem 1.6rem 2.2rem;

  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), inset 0 0 35px rgba(138, 43, 226, 0.12);

  position: relative;

  overflow: hidden;

}



.duel-arena-header {

  text-align: center;

  margin-bottom: 1.8rem;

}



.duel-arena-badge {

  display: inline-block;

  font-size: 0.76rem;

  text-transform: uppercase;

  letter-spacing: 0.12em;

  color: #e6b655;

  background: rgba(212, 175, 55, 0.12);

  border: 1px solid rgba(212, 175, 55, 0.28);

  padding: 4px 12px;

  border-radius: 20px;

  margin-bottom: 0.5rem;

}



.duel-arena-title {

  font-size: 1.45rem;

  margin: 0.3rem 0;

  color: #fff;

}



.duel-arena-sub {

  font-size: 0.85rem;

  color: var(--muted);

  max-width: 480px;

  margin: 0 auto;

}



.duel-stage {

  position: relative;

  width: 100%;

  height: 200px;

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  padding: 0 2.5rem;

  border-bottom: 2px solid rgba(255, 255, 255, 0.08);

}



.duel-fighter {

  position: relative;

  width: 100px;

  height: 150px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: flex-end;

  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), left 0.4s ease, opacity 0.3s ease;

  user-select: none;

}



.duel-fighter-shadow {

  filter: drop-shadow(0 0 16px rgba(138, 43, 226, 0.55));

}



.duel-fighter-arkan {

  filter: drop-shadow(0 0 16px rgba(255, 190, 40, 0.55));

}



.duel-hud-top {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 3px;

  margin-bottom: 6px;

}



.duel-fighter-name {

  font-size: 0.75rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.08em;

  color: #ccc;

}



.duel-fighter-shadow .duel-fighter-name { color: #c48cff; }



.duel-fighter-arkan .duel-fighter-name { color: #ffd276; }



.duel-hp-bar {

  display: flex;

  gap: 3px;

  font-size: 0.82rem;

  line-height: 1;

}



.hp-heart.lost {

  filter: grayscale(1) opacity(0.25);

}



.duel-sprite-wrap {

  position: relative;

  width: 88px;

  height: 88px;

}



.duel-sprite {

  width: 100%;

  height: 100%;

  object-fit: contain;

  transition: transform 0.2s ease, filter 0.2s ease;

}



.duel-fighter-shadow .duel-sprite {

  transform: scaleX(1);

}



.duel-fighter-arkan .duel-sprite {

  transform: scaleX(-1);

}



.duel-slash {

  position: absolute;

  inset: -15px;

  pointer-events: none;

  opacity: 0;

  background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(255, 215, 0, 0.6) 50%, transparent 75%);

  border-radius: 50%;

  transform: scale(0.2);

  transition: all 0.2s ease-out;

}



.duel-slash.active {

  opacity: 1;

  transform: scale(1.35);

}



.duel-spark {

  position: absolute;

  top: 30%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 32px;

  height: 32px;

  background: radial-gradient(circle, #fff, #ffd700 60%, transparent 80%);

  border-radius: 50%;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.15s ease, transform 0.25s ease;

}



.duel-spark.active {

  opacity: 1;

  transform: translate(-50%, -50%) scale(1.8);

}



.duel-bubble {

  position: absolute;

  bottom: 100%;

  background: rgba(14, 16, 30, 0.94);

  border: 1px solid rgba(255, 255, 255, 0.3);

  border-radius: 10px;

  padding: 4px 10px;

  font-size: 0.74rem;

  color: #fff;

  white-space: nowrap;

  pointer-events: none;

  opacity: 0;

  transform: translateY(6px);

  transition: all 0.25s ease;

  box-shadow: 0 6px 18px rgba(0,0,0,0.7);

  z-index: 10;

}



.duel-bubble.show {

  opacity: 1;

  transform: translateY(-4px);

}



.duel-clash-zone {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  height: 100%;

  margin-bottom: 25px;

}



.duel-status-label {

  font-size: 0.74rem;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  color: var(--muted);

  font-style: italic;

}





/* ============================================================

   THURUM-PLAYER AVATAR & INTERAKTIONS-PROMPTS

   ============================================================ */

.thurum-interact-prompt {

  position: absolute;

  bottom: calc(100% + 12px);

  left: 50%;

  transform: translateX(-50%);

  background: linear-gradient(135deg, rgba(20, 16, 36, 0.96), rgba(9, 10, 20, 0.98));

  border: 1.5px solid #ffd700;

  border-radius: 12px;

  padding: 5px 12px;

  color: #fff;

  font-size: 0.75rem;

  font-weight: 700;

  white-space: nowrap;

  pointer-events: auto;

  cursor: pointer;

  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.85), 0 0 16px rgba(255, 215, 0, 0.5);

  animation: promptFloat 1.2s ease-in-out infinite alternate;

  z-index: 99999;

}



@keyframes promptFloat {

  0% { transform: translateX(-50%) translateY(0); }



  100% { transform: translateX(-50%) translateY(-5px); }



}



.thurum-click-target {

  position: absolute;

  width: 28px;

  height: 28px;

  border: 2px dashed #ffd700;

  border-radius: 50%;

  pointer-events: none;

  transform: translate(-50%, -50%) scale(0.6);

  opacity: 1;

  animation: targetPulse 0.8s ease-out forwards;

  z-index: 99990;

}



@keyframes targetPulse {

  0% { transform: translate(-50%, -50%) scale(0.4); opacity: 1; }



  100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }



}





/* Steuerung-Hinweis-Banner */

.thurum-control-bar {

  position: fixed;

  top: calc(var(--top, 64px) + 8px);

  left: 50%;

  transform: translateX(-50%);

  background: rgba(12, 14, 26, 0.94);

  border: 1px solid rgba(212, 175, 55, 0.45);

  border-radius: 30px;

  padding: 6px 18px;

  font-size: 0.8rem;

  color: #fff;

  display: flex;

  align-items: center;

  gap: 12px;

  box-shadow: 0 12px 30px rgba(0,0,0,0.85), 0 0 20px rgba(212, 175, 55, 0.2);

  z-index: 99995;

  backdrop-filter: blur(10px);

}



.thurum-control-bar .bar-badge {

  background: #ffd700;

  color: #0b0c16;

  font-weight: 800;

  font-size: 0.7rem;

  padding: 2px 7px;

  border-radius: 10px;

}



.thurum-control-bar .btn-close-adventure {

  background: rgba(255, 255, 255, 0.12);

  border: none;

  color: #fff;

  border-radius: 50%;

  width: 22px;

  height: 22px;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  font-weight: 800;

  font-size: 0.75rem;

  transition: all .2s;

}



.thurum-control-bar .btn-close-adventure:hover {

  background: #e74c3c;

  transform: scale(1.1);

}







/* Glühwürmchen & Hüpf-Animationen am Lagerfeuer */

.cf-firefly {

  position: absolute;

  width: 6px;

  height: 6px;

  background: radial-gradient(circle, #fff, #ffd700 60%, transparent 90%);

  border-radius: 50%;

  box-shadow: 0 0 10px #ffd700, 0 0 20px #ff9900;

  pointer-events: none;

  animation: fireflyFloat 6s ease-in-out infinite alternate;

  z-index: 4;

}



@keyframes fireflyFloat {

  0% { transform: translate(0, 0) scale(0.8); opacity: 0.4; }



  50% { transform: translate(25px, -18px) scale(1.3); opacity: 1; }



  100% { transform: translate(-20px, 15px) scale(0.9); opacity: 0.6; }



}





.cf-actor.cf-hopping .cf-slime-img {

  animation: cfHopArc 0.75s ease-in-out infinite alternate;

}



@keyframes cfHopArc {

  0% { transform: translateY(0) scale(1.05, 0.95); }



  50% { transform: translateY(-24px) scale(0.95, 1.1); }



  100% { transform: translateY(0) scale(1.05, 0.95); }



}





/* ============================================================

   SCHLEIM SPRECHBLASEN LINKS & HOVER EFFEKTE

   ============================================================ */

.ws-bubble {

  pointer-events: auto !important;

  cursor: default;

}



.ws-bubble a.bubble-link,

.ws-bubble a.bubble-link-action,

.ws-bubble a.bubble-link-anchor {

  color: #ffd270 !important;

  text-decoration: underline !important;

  text-underline-offset: 3px !important;

  font-weight: 800 !important;

  display: inline-block;

  padding: 1px 4px;

  border-radius: 4px;

  background: rgba(230, 182, 85, 0.15);

  border: 1px solid rgba(230, 182, 85, 0.4);

  transition: all 0.2s ease;

  cursor: pointer !important;

}



.ws-bubble a.bubble-link:hover,

.ws-bubble a.bubble-link-action:hover,

.ws-bubble a.bubble-link-anchor:hover {

  color: #ffffff !important;

  background: rgba(230, 182, 85, 0.45);

  border-color: #ffe6a0;

  box-shadow: 0 0 10px rgba(255, 210, 80, 0.6);

  transform: scale(1.05);

}



/* ============================================================

   ASSETS-VAULT (KARTENRAHMEN, SIEGEL & DESIGN-VORLAGEN)

   ============================================================ */

.assets-vault-section {

  margin: 1.5rem 0 2.5rem;

}

.assets-preview-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  gap: 1.2rem;

  margin-top: 1rem;

}

.asset-card-teaser {

  background: radial-gradient(circle at 50% 20%, rgba(212, 175, 55, 0.08), rgba(11, 15, 25, 0.95) 85%);

  border: 1px solid rgba(212, 175, 55, 0.22);

  border-radius: 14px;

  padding: 1.5rem;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;

}

.asset-card-teaser:hover {

  transform: translateY(-4px);

  border-color: rgba(212, 175, 55, 0.55);

  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45), 0 0 18px rgba(212, 175, 55, 0.18);

}

.asset-teaser-icon {

  font-size: 2.2rem;

  margin-bottom: 0.8rem;

  background: rgba(255, 255, 255, 0.05);

  width: 52px;

  height: 52px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 10px;

  border: 1px solid rgba(212, 175, 55, 0.25);

}

.asset-card-teaser h4 {

  font-family: var(--font-title);

  color: #fff;

  font-size: 1.15rem;

  margin: 0 0 0.5rem;

}

.asset-card-teaser p {

  color: var(--text-muted, #94a3b8);

  font-size: 0.9rem;

  line-height: 1.45;

  margin: 0 0 1rem;

  flex: 1;

}



/* W12 Würfel-Badge im Dimensionstor Showdown */
.ts-dice-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 35%, #1e293b 0%, #090d16 100%);
  border: 2px solid #38bdf8;
  border-radius: 12px;
  width: 48px;
  height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.8), 0 0 15px rgba(56, 189, 248, 0.5);
  z-index: 20;
  pointer-events: none;
  animation: dicePop 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.ts-dice-sub {
  font-size: 0.55rem;
  font-weight: 800;
  color: #38bdf8;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1;
}

.ts-dice-num {
  font-size: 1.35rem;
  font-weight: 900;
  color: #ffffff;
  line-height: 1.1;
  font-family: 'Cinzel', serif, sans-serif;
}

.ts-dice-badge.is-rolling {
  animation: diceRollShake 0.1s infinite alternate;
  border-color: #f43f5e;
  box-shadow: 0 0 20px rgba(244, 63, 94, 0.8);
}

.ts-dice-badge.is-rolling .ts-dice-sub {
  color: #f43f5e;
}

.ts-dice-badge.is-winner-dice {
  border: 2.5px solid #ffd700;
  background: radial-gradient(circle at 35% 35%, #422006 0%, #0f172a 100%);
  box-shadow: 0 0 35px rgba(255, 215, 0, 0.95), 0 0 15px #ffd700;
  transform: translate(-50%, -50%) scale(1.18);
  animation: winnerDicePulse 1.2s infinite alternate ease-in-out;
}

.ts-dice-badge.is-winner-dice .ts-dice-sub {
  color: #fbbf24;
}

.ts-dice-badge.is-winner-dice .ts-dice-num {
  color: #ffd700;
  text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
}

@keyframes diceRollShake {
  0% { transform: translate(-53%, -47%) rotate(-8deg); }
  100% { transform: translate(-47%, -53%) rotate(8deg); }
}

@keyframes winnerDicePulse {
  0% { transform: translate(-50%, -50%) scale(1.15); }
  100% { transform: translate(-50%, -50%) scale(1.25); box-shadow: 0 0 45px rgba(255, 215, 0, 1), 0 0 20px #fff; }
}

@keyframes dicePop {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* Inline Embleme & Symbole für Anleitung & Text */
.caligo-icon-inline {
  width: 22px;
  height: 22px;
  vertical-align: -4px;
  display: inline-block;
  object-fit: contain;
  margin: 0 4px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
  transition: transform 0.2s ease;
}
.caligo-icon-inline:hover {
  transform: scale(1.2);
}
.caligo-icon-inline.icon-lg {
  width: 26px;
  height: 26px;
  vertical-align: -5px;
  margin: 0 5px;
}

/* ==========================================
   RADIO: Sender-Auswahl, SoundCloud-Player, Sprecher-Ansage
   ========================================== */
.radio-stations {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 0 0 1.2rem;
}

.radio-station-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .1rem;
  padding: .55rem .95rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(143, 176, 255, 0.25);
  color: #e8ecff;
  cursor: pointer;
  text-align: left;
  transition: border-color .2s ease, background .2s ease;
}

.radio-station-chip b { font-size: .95rem; }
.radio-station-chip small { font-size: .72rem; color: #9aa4c8; }
.radio-station-chip:hover { border-color: rgba(143, 176, 255, 0.6); }
.radio-station-chip.active { border-color: #ffd37a; background: rgba(255, 211, 122, 0.1); }
.radio-station-chip.active b { color: #ffd37a; }

.radio-player-card.is-voice .radio-station-badge { color: #ffd37a; }
.radio-player-card.is-voice .radio-desc { font-style: italic; }

.radio-sc-mount { margin-top: 1.2rem; }
.radio-sc-mount[hidden] { display: none; }
.radio-sc-note { font-size: .78rem; color: #9aa4c8; margin: 0 0 .5rem; }
.radio-sc-frame { width: 100%; height: 166px; border: 0; border-radius: 10px; display: block; }
.radio-sc-hint { font-size: .75rem; color: #8a93b5; margin: .9rem 0 0; line-height: 1.4; }

/* Sprechblasen im Sichtfeld (js/bubble-fit.js): unter dem Slime statt oben, Pfeilspitze bleibt beim Slime */
.ws-bubble { translate: 0 0; }
.ws-bubble::after { margin-left: var(--bf-tail, 0); }
.ws-bubble.bf-below { bottom: auto; top: 46px; transform: translateX(-50%) translateY(-6px); }
.ws-bubble.bf-below.show { transform: translateX(-50%) translateY(0); }
.ws-bubble.bf-below.align-right, .ws-bubble.bf-below.align-left { transform: translateY(-6px); }
.ws-bubble.bf-below.align-right.show, .ws-bubble.bf-below.align-left.show { transform: translateY(0); }
.ws-bubble.bf-below::after { bottom: auto; top: -6px; border-top: 0; border-bottom: 6px solid #8fb0ff; }

/* ============================================================
   KARTEN-GALERIE: grauer Schimmer (verschwindet nach 0,25 s Hover/Berührung)
   + Wechsel Pre-Alpha / Erstausgabe in der Großansicht
   ============================================================ */
.tcard::after{content:"";position:absolute;inset:0;border-radius:12px;pointer-events:none;z-index:3;
  background:linear-gradient(160deg,rgba(150,156,176,.80),rgba(88,94,116,.84));transition:opacity .35s ease}
.tcard.lit::after{opacity:0}
@media(prefers-reduced-motion:reduce){.tcard::after{transition:none}}

.lb-card.edition-on img{cursor:pointer}
.lb-card.is-neu{aspect-ratio:58/89}
.lb-card.is-neu,.lb-card.is-neu img,.lb-card.is-neu .lb-shine{border-radius:12px}
.lb-card.swap img{animation:lbSwap .4s ease}
@keyframes lbSwap{0%{opacity:.15;transform:scale(.97)}100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.lb-card.swap img{animation:none}}
.lb-edition{display:block;margin-top:.25rem;color:#e6b655;font-size:.8rem}