/* buehne_v3.css: what only the subpages in stage form need, on top of /design/v3-startseite.css (served as
   /design/v3-buehne.css, written by build_hubs_v3.mjs). The homepage opens by day and turns to night; a subpage
   starts in the night chapter, so the night layer stands from the first screen. */
.buehne .bg.night{opacity:1}
.buehne .hero{min-height:94vh;min-height:94svh}
.buehne .hero-in{width:clamp(380px,40vw,620px)}
.buehne .hero h1 .l{font-size:clamp(1.9rem,3vw,3rem)}
.crumb{font:400 .72rem/1 var(--display);letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin:0 auto 6px;width:max-content;max-width:100%;padding:6px 10px;background:rgba(9,7,5,.8)}
.crumb a{color:var(--gold-light);text-decoration:none}
.crumb a:hover{color:var(--paper)}

/* chapters sit closer together than the homepage's (its gaps carry a scroll story of their own) */
.buehne .panel{margin-bottom:16vh}
.buehne .panel:last-of-type{margin-bottom:12vh}
.buehne .head{margin-bottom:40px}
.buehne .head .kicker{white-space:normal}
.prosa{max-width:66ch;margin:0 auto 20px;color:#d8c9a6;line-height:1.72;font-size:1.04rem}
.prosa:last-child{margin-bottom:0}
.buehne .duo{margin-block:8px 36px}
.buehne .duo .side p{font-size:1.06rem;line-height:1.55}
.buehne .duo .side .no{font-size:.95rem;letter-spacing:.3em;display:block;margin-bottom:12px}

/* steps of a list: the homepage build row, three or four wide */
.schritte{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-block:6px 34px}

/* the table: real card backs, a fan for the hand, a stack for the deck */
.tisch{list-style:none;margin:6px auto 30px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;max-width:1000px}
.tisch li{position:relative;border:1px solid var(--gold-deep);background:rgba(20,16,12,.72);padding:22px 18px 22px;text-align:center;display:grid;gap:8px;justify-items:center;transition:transform .35s ease,box-shadow .35s ease}
.tisch li:hover{transform:translateY(-6px);box-shadow:0 0 0 1px var(--gold),0 22px 40px -18px rgba(232,200,120,.45)}
.tisch .no{font:400 .74rem/1 var(--display);letter-spacing:.3em;color:var(--gold)}
.tisch b{font:700 .95rem/1.25 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--paper)}
.tisch span:last-child{color:#cdbf9f;font-size:.93rem;line-height:1.5}
.tisch-bild{position:relative;display:block;width:120px;height:150px;margin-bottom:8px}
.tisch-bild img{position:absolute;left:50%;top:50%;width:84px;height:126px;margin:-63px 0 0 -42px;border-radius:6px;box-shadow:0 10px 18px rgba(0,0,0,.7);transition:transform .45s cubic-bezier(.22,1,.36,1)}
.tisch-bild.faecher img{transform:translate(calc(var(--k)*14px),calc(var(--k)*var(--k)*2px)) rotate(calc(var(--k)*9deg))}
.tisch li:hover .tisch-bild.faecher img{transform:translate(calc(var(--k)*22px),calc(var(--k)*var(--k)*3px)) rotate(calc(var(--k)*14deg))}
.tisch-bild.stapel img{transform:translate(calc(var(--k)*-4px),calc(var(--k)*-4px))}
.tisch li:hover .tisch-bild.stapel img{transform:translate(calc(var(--k)*-8px),calc(var(--k)*-9px))}
.tisch li:hover .tisch-bild:not(.faecher):not(.stapel) img{transform:rotate(-4deg) scale(1.05)}

/* showpieces: real app screenshots in gold frames */
.schau .app-bilder{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:24px;counter-reset:s}
.schau .app-bilder li{counter-increment:s}
.schau figure{margin:0;border:1px solid var(--gold-deep);background:#0c0a08;padding:10px;box-shadow:0 26px 50px -24px rgba(0,0,0,.9);transition:transform .4s ease,box-shadow .4s ease}
.schau figure:hover{transform:translateY(-6px);box-shadow:0 0 0 1px var(--gold),0 30px 60px -26px rgba(232,200,120,.35)}
.schau img{display:block;width:100%;height:auto}
.schau figcaption{padding:14px 6px 4px;color:#cdbf9f;font-size:.92rem;line-height:1.5}
.schau figcaption b{display:block;font:700 .82rem/1.2 var(--display);letter-spacing:.16em;text-transform:uppercase;color:var(--paper);margin-bottom:6px}
.schau figcaption b::before{content:counter(s,upper-roman) " · ";color:var(--gold)}
.schau-kapitel .prosa{text-align:center;font-size:.9rem;color:#a99a78;margin-top:22px}

/* closing call and further pages */
.abschluss{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin:34px auto 0;max-width:none}
.abschluss .btn{min-width:280px}
.panel .status{margin:18px auto 0;text-align:center}
.weiter{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;max-width:1000px}
.weiter a{display:grid;gap:10px;height:100%;padding:22px 20px;border:1px solid var(--gold-deep);background:rgba(20,16,12,.72);color:var(--paper);text-decoration:none;font:700 .92rem/1.3 var(--display);letter-spacing:.08em;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease}
.weiter a:hover{transform:translateY(-5px);border-color:var(--gold);box-shadow:0 20px 40px -20px rgba(232,200,120,.4)}
.weiter a .no{font-weight:400;font-size:.72rem;letter-spacing:.3em;color:var(--gold)}
.weiter a::after{content:"→";color:var(--gold-light);font-family:var(--body)}
.weiter-kapitel .head{margin-bottom:28px}

@media (max-width:900px){
  .buehne .panel{margin-bottom:10vh;padding:78px 0 64px}
  .schau .app-bilder{grid-template-columns:1fr}
  .abschluss .btn{min-width:0;width:100%}
}
@media (max-width:760px){
  .buehne .hero-in{width:100%}
  .buehne .camps{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  .tisch li,.tisch-bild img,.schau figure,.weiter a{transition:none}
}

/* two text chapters side by side, split by a gold rule with a star */
.paar{display:grid;grid-template-columns:1fr auto 1fr;gap:0 48px;max-width:1040px;margin:0 auto}
.paar .spalte h2{font-size:clamp(1.3rem,2vw,1.75rem);margin:14px 0 16px;text-wrap:balance}
.paar .spalte .kicker{margin-bottom:4px}
.paar .spalte p{margin:0 0 16px;color:#d8c9a6;line-height:1.7}
.paar .trenner{width:1px;background:linear-gradient(transparent,var(--gold-deep) 15%,var(--gold-deep) 85%,transparent);position:relative}
.paar .trenner::after{content:"✦";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--gold);background:#0d0b09;padding:6px 0;font-size:.9rem}
@media (max-width:900px){.paar{grid-template-columns:1fr;gap:34px}.paar .trenner{height:1px;width:100%;background:linear-gradient(90deg,transparent,var(--gold-deep) 15%,var(--gold-deep) 85%,transparent)}}
@media (max-width:760px){.tisch{grid-template-columns:1fr 1fr;gap:12px}.tisch li{padding:16px 10px}.tisch-bild{width:100px;height:120px}.tisch-bild img{width:66px;height:99px;margin:-50px 0 0 -33px}.tisch b{font-size:.82rem}}
/* no orphans: six in two rows of three, five in one row */
.tisch li{align-content:start}
.tisch:has(> li:nth-child(6)):not(:has(> li:nth-child(7))){grid-template-columns:repeat(3,1fr);max-width:820px}
.schritte:has(> li:nth-child(5)):not(:has(> li:nth-child(6))){grid-template-columns:repeat(5,1fr)}
.schritte:has(> li:nth-child(6)):not(:has(> li:nth-child(7))){grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.tisch:has(> li:nth-child(6)),.schritte:has(> li:nth-child(5)){grid-template-columns:1fr 1fr}}

/* opening pictures per page (hub_buehne.mjs HELD) */
.heldkarte{width:min(480px,86vw);margin:10px auto 20px;border:1px solid var(--gold-deep);padding:8px;background:#0c0a08;transform:rotate(-2deg);box-shadow:0 34px 64px -22px #000,0 0 46px rgba(232,200,120,.16)}
.heldkarte img{display:block;width:100%;height:auto}
.heldlager{position:relative;height:230px;width:min(560px,92vw);margin:8px auto 18px}
.heldlager img{position:absolute;left:50%;top:50%;width:112px;height:152px;margin:-76px 0 0 -56px;object-fit:cover;object-position:center 25%;border:1px solid var(--gold);border-radius:6px;background:#110e0b;box-shadow:0 14px 26px rgba(0,0,0,.8);transform:translate(calc(var(--k)*80px),calc(var(--k)*var(--k)*7px)) rotate(calc(var(--k)*6deg))}
.heldruecken{position:relative;height:250px;width:min(420px,88vw);margin:8px auto 18px}
.heldruecken img{position:absolute;left:50%;top:50%;width:140px;height:210px;margin:-105px 0 0 -70px;border-radius:9px;box-shadow:0 18px 30px rgba(0,0,0,.8);transform:translate(calc(var(--k)*96px),calc(var(--k)*var(--k)*14px)) rotate(calc(var(--k)*12deg))}
.heldruecken img:last-child{box-shadow:0 18px 30px rgba(0,0,0,.8),0 0 30px rgba(232,200,120,.3)}
@media (max-width:760px){
  .heldlager{height:170px}.heldlager img{width:70px;height:96px;margin:-48px 0 0 -35px;transform:translate(calc(var(--k)*50px),calc(var(--k)*var(--k)*5px)) rotate(calc(var(--k)*6deg))}
  .heldruecken{height:190px}.heldruecken img{width:100px;height:150px;margin:-75px 0 0 -50px;transform:translate(calc(var(--k)*70px),calc(var(--k)*var(--k)*10px)) rotate(calc(var(--k)*12deg))}
}

/* ===== scenes (hub_szenen.mjs, 22.09.2026): an interactive opening picture per page, a scene per chapter ===== */
/* opening with a picture: text and scene side by side on wide screens, stacked on phones */
.buehne .hero.hat-bild{grid-template-columns:minmax(0,560px) minmax(0,640px);justify-content:center;gap:clamp(24px,4vw,70px);align-items:center}
.buehne .hero.hat-bild .hero-in{width:auto}
.heldbild{position:relative;width:100%;justify-self:center}
@media (max-width:1099px){.buehne .hero.hat-bild{grid-template-columns:minmax(0,1fr);padding-top:104px}.buehne .hero.hat-bild .hero-in{width:min(560px,100%);margin:0 auto}.heldbild{max-width:560px}}
.step h2{font-size:clamp(1.3rem,2.1vw,1.8rem);margin:12px 0}

/* ink map: the mini version draws its loop by itself, again and again */
.mapfig.mini .sGold{stroke-dasharray:1;stroke-dashoffset:1;animation:runde 7s cubic-bezier(.45,.05,.55,.95) infinite}
.mapfig.mini .zGold{opacity:0;animation:flaeche 7s ease infinite}
@keyframes runde{0%{stroke-dashoffset:1}55%,100%{stroke-dashoffset:0}}
@keyframes flaeche{0%,52%{opacity:0}62%,90%{opacity:1}100%{opacity:0}}
.held-runde .mapfig,.held-geteilt .mapfig{transform:rotate(-1.5deg)}
.held-runde.klein{max-width:520px;margin:0 auto 30px}
.mapfig .tage{position:absolute;right:4%;bottom:12%;width:84px;height:84px;display:grid;place-items:center;opacity:0}
.mapfig .tage svg{position:absolute;inset:0;transform:rotate(-90deg)}
.mapfig .tage circle{fill:rgba(11,9,7,.88);stroke:var(--gold-deep);stroke-width:5}
.mapfig .tage .tage-bogen{fill:none;stroke:var(--gold-light);stroke-dasharray:1;stroke-dashoffset:1}
.mapfig .tage b{position:relative;font:700 1.5rem/1 var(--display);color:var(--paper)}
.held-geteilt{display:grid;grid-template-columns:1fr auto;align-items:center}
.held-geteilt .naht{position:absolute;left:58%;right:14%;top:50%;height:2px;background:linear-gradient(90deg,transparent,var(--gold-light),transparent);box-shadow:0 0 14px var(--gold-light)}
.held-geteilt .g-karte{position:relative;width:clamp(120px,15vw,200px);margin-left:-50px;transform:rotate(6deg);filter:drop-shadow(0 20px 30px #000)}
.held-geteilt .g-karte img{display:block;width:100%;height:auto;border-radius:8px}

/* five words on a ring */
.kreis{position:relative;width:min(640px,100%);aspect-ratio:1;margin:10px auto 30px}
.kreis-ring{position:absolute;inset:21%;width:58%;height:58%}
.kreis-ring circle{fill:none;stroke:var(--gold-deep);stroke-width:1.5}
.kreis-ring .kreis-bogen{stroke:var(--gold-light);stroke-width:3;stroke-dasharray:1;stroke-dashoffset:var(--bogen,0);transform:rotate(-90deg);transform-origin:50% 50%;filter:drop-shadow(0 0 5px rgba(233,200,130,.7))}
.kreis-mitte{position:absolute;left:50%;top:50%;width:16%;height:auto;transform:translate(-50%,-50%);opacity:.9;filter:drop-shadow(0 0 24px rgba(217,189,131,.35))}
.kreis-punkt{display:none}
.kreis ol{list-style:none;margin:0;padding:0}
.kreis li{position:absolute;left:50%;top:50%;width:170px;margin:-40px 0 0 -85px;text-align:center;display:grid;gap:4px;transform:rotate(calc(var(--i) * 360deg / var(--n) - 90deg)) translate(min(240px,37vw)) rotate(calc(var(--i) * -360deg / var(--n) + 90deg));transition:filter .4s,opacity .4s}
.kreis li .no{font:400 .7rem/1 var(--display);letter-spacing:.3em;color:var(--gold)}
.kreis li b{font:700 1rem/1.2 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--paper)}
.kreis li span:last-child{font-size:.84rem;line-height:1.4;color:#cdbf9f;background:rgba(9,7,5,.72);padding:4px 6px}
.js .kreis.live li{opacity:.4}
.js .kreis.live li.an{opacity:1;filter:drop-shadow(0 0 12px rgba(217,189,131,.5))}
@media (max-width:760px){.kreis{aspect-ratio:auto;width:100%}.kreis-ring,.kreis-mitte{display:none}.kreis li{position:relative;left:auto;top:auto;width:auto;margin:0 0 14px;transform:none;text-align:left;padding:12px 14px 12px 18px;border-left:2px solid var(--gold-deep)}.js .kreis.live li{opacity:1}.kreis li.an{border-left-color:var(--gold-light)}}

/* spawn points on a star chart */
.spawn{margin:6px auto 30px;max-width:980px;border:1px solid var(--gold-deep);background:radial-gradient(ellipse at 45% 45%,rgba(40,32,22,.9),rgba(9,7,5,.95));box-shadow:0 0 0 4px #0b0907,0 0 0 5px var(--gold),0 30px 60px -24px #000}
.spawn svg{display:block;width:100%;height:auto}
.spawn .netz line{stroke:rgba(173,144,95,.14);stroke-width:1}
.spawn .naehte path{fill:none;stroke:var(--gold-light);stroke-width:1.6;stroke-dasharray:.012 .01;opacity:.7}
.spawn .naehte path.test{stroke-dasharray:none;filter:drop-shadow(0 0 4px rgba(233,200,130,.8))}
.spawn .ort .kern{fill:var(--gold-light);filter:drop-shadow(0 0 8px var(--gold-light))}
.spawn .ort.plan .kern{fill:none;stroke:var(--gold-light);stroke-width:2;stroke-dasharray:3 3}
.spawn .ort .puls{fill:none;stroke:var(--gold-light);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}
.spawn .ort.test .puls{animation:puls 2.4s ease-out infinite}
@keyframes puls{0%{opacity:.8;transform:scale(.3)}100%{opacity:0;transform:scale(1.6)}}
.spawn text{font:700 17px var(--display);letter-spacing:.12em;fill:var(--paper);paint-order:stroke;stroke:#0b0907;stroke-width:5px;text-transform:uppercase}
.spawn figcaption{display:flex;gap:18px;justify-content:center;padding:10px;border-top:1px solid rgba(173,144,95,.3);font:400 .72rem/1 var(--display);letter-spacing:.2em;text-transform:uppercase;color:#cdbf9f}
.spawn .lg::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:-1px;background:var(--gold-light)}
.spawn .lg.plan::before{background:none;border:1.5px dashed var(--gold-light)}
.held-spawn .spawn{margin:0;transform:rotate(1deg)}

/* four ways: backs that turn into their faces */
.wege{list-style:none;margin:10px auto 30px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:980px;perspective:1200px}
.weg{position:relative;aspect-ratio:2/3;cursor:pointer;outline-offset:4px}
.w-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.22,1,.36,1);transform:rotateY(180deg)}
.js .wege.live .weg:not(.auf) .w-in{transform:none}
.w-back,.w-face{position:absolute;inset:0;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:10px}
.w-back{object-fit:cover;box-shadow:0 18px 30px rgba(0,0,0,.75)}
.w-face{transform:rotateY(180deg);display:grid;align-content:center;gap:10px;padding:18px 14px;text-align:center;background:linear-gradient(160deg,#241c13,#0f0c09);border:1px solid var(--gold);box-shadow:inset 0 0 0 5px #0f0c09,inset 0 0 0 6px var(--gold-deep),0 18px 30px rgba(0,0,0,.75)}
.w-face .no{font:700 1.5rem/1 var(--display);color:var(--gold)}
.w-face b{font:700 .95rem/1.25 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--paper)}
.w-face span:last-child{font-size:.84rem;line-height:1.45;color:#cdbf9f}
.weg.blass{opacity:.45}
.held-wege .wege{margin:0;gap:12px}
@media (max-width:760px){.wege{grid-template-columns:1fr 1fr;gap:12px}.w-face{padding:12px 8px}.w-face span:last-child{font-size:.76rem}}

/* one move: deck, hand, table, attack */
.zug{margin:6px auto 30px;max-width:1000px}
.zug-feld{position:relative;height:340px;border:1px solid var(--gold-deep);background:radial-gradient(ellipse at 50% 40%,rgba(52,40,26,.55),rgba(9,7,5,.9));box-shadow:0 0 0 4px #0b0907,0 0 0 5px var(--gold);overflow:hidden}
.zug-feld img{position:absolute;width:74px;height:111px;border-radius:5px;box-shadow:0 8px 14px rgba(0,0,0,.8)}
.z-deck img{left:6%;bottom:14%;transform:translate(calc(var(--k)*-3px),calc(var(--k)*-3px))}
.z-hand img{left:calc(26% + var(--k)*34px);bottom:6%;transform:rotate(calc(var(--k)*7deg));transform-origin:50% 120%}
.z-tisch img:nth-child(1){left:52%;bottom:14%}.z-tisch img:nth-child(2){left:62%;bottom:14%}.z-tisch img:nth-child(3){left:72%;bottom:14%}
.z-gegner img{top:8%;opacity:.8;transform:rotate(180deg)}.z-gegner img:nth-child(1){left:52%}.z-gegner img:nth-child(2){left:62%}.z-gegner img:nth-child(3){left:72%}
.zug-feld .z-karte{left:62%;bottom:14%;width:92px;height:auto;z-index:3;box-shadow:0 0 0 1px var(--gold),0 14px 26px rgba(0,0,0,.9),0 0 30px rgba(217,189,131,.4)}
.z-funke{position:absolute;left:66%;top:30%;width:120px;height:120px;margin:-60px;border-radius:50%;background:radial-gradient(circle,#fff6d8,rgba(233,200,130,.6) 30%,transparent 70%);opacity:0;z-index:4;pointer-events:none}
.zug-takte{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.zug-takte li{padding:16px;border:1px solid var(--gold-deep);background:rgba(20,16,12,.72);display:grid;gap:6px;align-content:start;transition:border-color .4s,box-shadow .4s}
.zug-takte li.an{border-color:var(--gold-light);box-shadow:0 0 0 1px var(--gold),0 18px 34px -18px rgba(232,200,120,.5)}
.zug-takte .no{font:400 .72rem/1 var(--display);letter-spacing:.3em;color:var(--gold)}
.zug-takte b{font:700 .95rem/1.2 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--paper)}
.zug-takte span:last-child{color:#cdbf9f;font-size:.93rem;line-height:1.5}
@media (max-width:760px){.zug-feld{height:260px}.zug-feld img{width:50px;height:75px}.zug-feld .z-karte{width:62px}.z-hand img{left:calc(24% + var(--k)*20px)}.zug-takte{grid-template-columns:1fr}}

/* the table: commander, deck, hand and five buildings with a life card under each */
.brett-wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:34px;align-items:center;margin:6px 0 30px}
.brett{position:relative;padding:26px 22px 30px;border:1px solid var(--gold-deep);background:radial-gradient(ellipse at 50% 30%,rgba(60,46,28,.6),rgba(12,10,8,.95));box-shadow:0 0 0 4px #0b0907,0 0 0 5px var(--gold),0 30px 60px -24px #000;display:grid;gap:26px}
.b-reihe{display:grid;grid-template-columns:1fr 1fr 1.4fr;align-items:end;gap:10px;min-height:150px}
.b-platz{position:relative;display:block;height:140px}
.b-platz img{position:absolute;left:50%;bottom:0;width:86px;height:129px;margin-left:-43px;border-radius:6px;box-shadow:0 10px 18px rgba(0,0,0,.75)}
.b-deck img{transform:translate(calc(var(--k)*-2px),calc(var(--k)*-2px))}
.b-deck em{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);font:700 1.5rem/1 var(--display);font-style:normal;color:var(--paper);text-shadow:0 2px 8px #000;z-index:2}
.b-hand img{transform-origin:50% 130%;transform:rotate(calc(var(--k)*9deg))}
.b-gebaeude{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding-top:12px;border-top:1px solid rgba(173,144,95,.35)}
.b-haus{position:relative;aspect-ratio:2/3;border:0;padding:0;background:none;cursor:pointer}
.b-haus img{position:absolute;inset:0;width:100%;height:100%;border-radius:6px;box-shadow:0 10px 18px rgba(0,0,0,.75);transition:transform .5s cubic-bezier(.22,1,.36,1)}
.b-haus .leben{transform:translate(6px,6px) rotate(3deg);filter:brightness(.8)}
.b-haus:hover .haus,.b-haus[aria-pressed="true"] .haus{transform:translateY(-38%) rotate(-4deg)}
.b-haus[aria-pressed="true"] .leben{filter:none;box-shadow:0 0 0 2px var(--seal),0 0 22px rgba(168,50,43,.6)}
.t-nr{position:absolute;left:4px;top:-4px;z-index:3;font:700 .8rem/1 var(--display);color:#0b0907;background:var(--gold-light);padding:4px 6px;border-radius:2px}
.b-gebaeude .t-nr{left:-6px;top:-12px}
.t-legende{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.t-legende li{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:2px}
.t-legende .no{grid-row:span 2;font:700 .8rem/1 var(--display);color:#0b0907;background:var(--gold-light);padding:5px 6px;height:max-content;border-radius:2px}
.t-legende b{font:700 .95rem/1.2 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--paper)}
.t-legende span:last-child{color:#cdbf9f;font-size:.93rem;line-height:1.5}
.brett-wrap:not(:has(.t-legende)){grid-template-columns:minmax(0,640px);justify-content:center}
@media (max-width:900px){.brett-wrap{grid-template-columns:1fr}.b-platz{height:108px}.b-platz img{width:64px;height:96px;margin-left:-32px}.b-deck em{bottom:30px;font-size:1.2rem}.b-reihe{min-height:112px}}

/* two commander cards meet */
.duell{position:relative;height:clamp(300px,34vw,470px);perspective:1400px}
.d-karte{position:absolute;top:50%;width:44%;transform-style:preserve-3d;transition:transform .3s ease-out}
.d-karte img{display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 0 0 1px rgba(233,200,130,.5),0 30px 50px -14px #000}
.d-links{left:4%;transform:translateY(-50%) rotate(-7deg) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg))}
.d-rechts{right:4%;transform:translateY(-46%) rotate(7deg) rotateY(var(--ry,0deg)) rotateX(var(--rx,0deg))}
.d-funke{position:absolute;left:50%;top:48%;width:200px;height:200px;margin:-100px;border-radius:50%;background:radial-gradient(circle,#fff8e0,rgba(233,200,130,.7) 25%,rgba(168,50,43,.25) 50%,transparent 70%);opacity:0;pointer-events:none;z-index:3;mix-blend-mode:screen}
.duell:not(.gross){max-width:620px;margin:0 auto 30px;height:clamp(260px,40vw,420px)}

/* rock, paper, scissors */
.ssp-feld{display:flex;justify-content:center;align-items:center;gap:26px;margin:0 auto 24px}
.ssp{width:92px;height:92px;fill:none;stroke:var(--gold-light);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 8px rgba(233,200,130,.45));padding:10px;border:1px solid var(--gold-deep);border-radius:50%;background:rgba(20,16,12,.8);transition:box-shadow .4s}
.ssp g{opacity:0}
.ssp-a .i-stein,.ssp-b .i-schere{opacity:1}
.ssp-vs{font:700 1.6rem/1 var(--display);color:var(--gold)}
.ssp-a.sieg{box-shadow:0 0 0 2px var(--gold-light),0 0 30px rgba(233,200,130,.5)}
.szene-heimauswaerts .duo .side:first-child{box-shadow:0 0 0 1px var(--gold-light),0 20px 40px -18px rgba(232,200,120,.5)}

/* the six factions fanned out */
.lagerfaecher{position:relative;height:clamp(250px,30vw,380px);margin:0 auto}
.lagerfaecher{--w:clamp(96px,10vw,138px)}
.lf{position:absolute;left:50%;bottom:8%;width:var(--w);height:calc(var(--w) * 1.36);min-height:0;margin-left:calc(var(--w) / -2);padding:0;border:1px solid var(--gold);border-radius:8px;background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--c) 45%,#110e0b),#110e0b 75%);overflow:hidden;cursor:pointer;transform-origin:50% 140%;transform:translateX(calc(var(--k)*clamp(40px,5.6vw,78px))) rotate(calc(var(--k)*7deg));transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .4s;box-shadow:0 14px 26px rgba(0,0,0,.8)}
.lf img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%}
.lf.c1 img,.lf.c6 img{object-fit:contain;padding:8px}
.lf span{position:absolute;left:0;right:0;bottom:0;padding:6px 4px;font:700 .66rem/1.1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--paper);background:linear-gradient(transparent,rgba(9,7,5,.92) 45%)}
.lf:hover,.lf.on,.lf:focus-visible{transform:translateX(calc(var(--k)*clamp(40px,5.6vw,78px))) translateY(-16%) rotate(calc(var(--k)*3deg)) scale(1.1);z-index:5;box-shadow:0 0 0 2px var(--c),0 20px 44px -10px var(--c)}
.lf-name{text-align:center;min-height:1.4em;margin:6px 0 0;font:700 1rem/1.3 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-light)}
.szene-lager6 .lagerfaecher{margin-bottom:30px}
@media (max-width:760px){.lagerfaecher{--w:78px}.lf{transform:translateX(calc(var(--k)*34px)) rotate(calc(var(--k)*7deg))}.lf:hover,.lf.on,.lf:focus-visible{transform:translateX(calc(var(--k)*34px)) translateY(-14%) scale(1.1)}.lf span{font-size:.5rem}.lagerfaecher{height:220px}}

/* a month in a ring */
.monat{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:40px;align-items:center;margin:6px 0 30px}
.monat.gross{display:block}
.m-ring{position:relative;width:100%;max-width:380px;aspect-ratio:1;margin:0 auto}
.m-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.m-ring .m-spur{fill:rgba(12,10,8,.7);stroke:var(--gold-deep);stroke-width:10}
.m-ring line{stroke:var(--gold);stroke-width:2}
.m-ring .m-bogen{fill:none;stroke:var(--gold-light);stroke-width:10;stroke-dasharray:1;stroke-dashoffset:var(--m,0);filter:drop-shadow(0 0 6px rgba(233,200,130,.8))}
.m-tag{position:absolute;left:50%;top:14%;transform:translateX(-50%);font:700 1.2rem/1 var(--display);color:var(--gold-light)}
.m-commander{position:absolute;left:50%;top:55%;width:36%;height:auto;transform:translate(-50%,-50%);border-radius:5px;box-shadow:0 0 0 1px var(--gold),0 18px 30px rgba(0,0,0,.8),0 0 40px rgba(217,189,131,.4)}
.m-stationen{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.m-stationen li{padding:14px 16px;border-left:2px solid var(--gold-deep);background:rgba(20,16,12,.6);display:grid;gap:4px;transition:border-color .4s,background .4s}
.m-stationen li.an{border-left-color:var(--gold-light);background:rgba(40,30,18,.8)}
.m-stationen .no{font:400 .7rem/1 var(--display);letter-spacing:.3em;color:var(--gold)}
.m-stationen b{font:700 .95rem/1.2 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--paper)}
.m-stationen span:last-child{color:#cdbf9f;font-size:.93rem;line-height:1.5}
@media (max-width:760px){.monat{grid-template-columns:1fr}.m-ring{max-width:280px}}

/* the album page */
.album{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:22px;border:1px solid var(--gold-deep);background:linear-gradient(160deg,#241c13,#0f0c09);box-shadow:0 0 0 4px #0b0907,0 0 0 5px var(--gold),0 30px 60px -24px #000;transform:rotate(1.5deg)}
.a-platz{aspect-ratio:3/4;border:1px dashed rgba(173,144,95,.5);border-radius:6px;overflow:hidden;background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--c) 40%,#110e0b),#0c0a08 75%)}
.a-platz img{width:100%;height:100%;object-fit:cover;object-position:center 28%;transition:transform .5s}
.a-platz.c1 img,.a-platz.c6 img{object-fit:contain;padding:8px}
.a-platz:hover img{transform:scale(1.08)}

/* three backs catch the light */
.ruecken3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:900px;margin:6px auto 30px;perspective:1100px}
.r3{margin:0;display:grid;gap:12px;justify-items:center;align-content:start;text-align:center}
.r3-tilt{position:relative;display:block;width:100%;max-width:240px;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out}
.r3 img{display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 26px 40px -14px #000}
.r3 .glanz{position:absolute;inset:0;border-radius:12px;background:radial-gradient(circle at var(--gx,50%) var(--gy,30%),rgba(255,240,200,.45),transparent 45%);opacity:var(--go,0);mix-blend-mode:screen;transition:opacity .3s;pointer-events:none}
.r3 figcaption{font-size:.9rem;line-height:1.45;color:#cdbf9f}
.r3 figcaption b{display:block;font:700 .9rem/1.2 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--paper);margin-bottom:4px}
@media (max-width:760px){.ruecken3{gap:10px}.r3 figcaption{font-size:.78rem}}

/* the commander turns over */
.wende{perspective:1400px;margin:6px auto 30px;width:min(300px,70vw)}
.w-karte{position:relative;display:block;aspect-ratio:420/630;transform-style:preserve-3d;transform:rotateY(var(--w,0deg))}
.w-karte img{position:absolute;inset:0;width:100%;height:100%;border-radius:12px;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:0 26px 40px -14px #000}
.w-karte .w-r{transform:rotateY(180deg)}
.w-karte .w-v{object-fit:cover}

/* colours as banners, gold apart */
.farben{display:flex;justify-content:center;align-items:flex-start;gap:clamp(8px,2vw,22px);margin:6px auto 30px;flex-wrap:wrap}
.banner{display:grid;justify-items:center;gap:8px;width:clamp(70px,10vw,110px);text-align:center}
.banner i{display:block;width:100%;height:clamp(140px,18vw,210px);background:linear-gradient(180deg,var(--c),color-mix(in srgb,var(--c) 55%,#000));clip-path:polygon(0 0,100% 0,100% 100%,50% 86%,0 100%);box-shadow:inset 0 0 0 2px rgba(233,200,130,.5);transform-origin:top;transition:transform .4s}
.banner.c4 i{background:linear-gradient(180deg,#f4f1ea,#bdb6a6)}
.banner.c5 i{background:linear-gradient(180deg,#2c2522,#0b0908)}
.banner b{font:700 .8rem/1.2 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--paper)}
.banner span{font-size:.8rem;color:#cdbf9f}
.banner.gold{margin-left:clamp(10px,3vw,40px)}
.banner.gold i{background:linear-gradient(160deg,#fff2c9,#d9bd83 30%,#8a6a2f 70%,#e9c882);clip-path:polygon(50% 0,100% 30%,80% 100%,20% 100%,0 30%);height:clamp(90px,11vw,130px);filter:drop-shadow(0 0 18px rgba(233,200,130,.6))}
.banner.gold b{font-size:1.3rem;color:var(--gold-light)}
.banner:hover i{transform:scaleY(1.06)}

/* the rift chapter */
.riss{position:relative;padding:12vh 0 4vh}
.riss-naht{position:absolute;left:0;right:0;top:4vh;width:100%;height:90px;pointer-events:none}
.riss-naht polyline{fill:none;stroke:#fff2c9;stroke-width:3;stroke-dasharray:1;stroke-dashoffset:var(--riss,0);filter:drop-shadow(0 0 8px #e9c882) drop-shadow(0 0 22px rgba(168,50,43,.8))}

/* a single foil card */
.foil-einzeln{width:min(340px,80vw);margin:6px auto 30px;display:grid;gap:10px;justify-items:center}
.foil-einzeln .foil{width:100%}
.foil-einzeln small{font:400 .72rem/1.3 var(--display);letter-spacing:.16em;text-transform:uppercase;color:#a4966f}

@media (prefers-reduced-motion:reduce){
  .mapfig.mini .sGold{animation:none;stroke-dashoffset:0}.mapfig.mini .zGold{animation:none;opacity:1}
  .spawn .ort.test .puls{animation:none}
  .w-in,.lf,.b-haus img,.d-karte,.r3-tilt{transition:none}
}
/* the card page opens with the live foil card, three backs fanned behind it */
.held-foil{display:grid;justify-items:center;gap:12px;perspective:1200px}
.held-foil .foil{position:relative;z-index:2;width:min(330px,70vw)}
.held-foil .hf-rueck{position:absolute;left:50%;top:44%;width:0;height:0}
.held-foil .hf-rueck img{position:absolute;max-width:none;width:190px;height:285px;margin:-142px 0 0 -95px;border-radius:9px;box-shadow:0 18px 30px rgba(0,0,0,.8);transform:translate(calc(var(--k)*215px),calc(var(--k)*var(--k)*26px + 30px)) rotate(calc(var(--k)*16deg))}
.held-foil .hf-rueck img:last-child{transform:translate(0,-30px) rotate(-4deg) scale(.9);opacity:.8}
.held-foil small{font:400 .72rem/1.3 var(--display);letter-spacing:.16em;text-transform:uppercase;color:#a4966f}
@media (max-width:760px){.held-foil .hf-rueck img{width:120px;height:180px;margin:-90px 0 0 -60px;transform:translate(calc(var(--k)*96px),calc(var(--k)*var(--k)*12px + 14px)) rotate(calc(var(--k)*14deg))}}
.buehne .hero.hat-bild h1 .l{margin-inline:0}
.held-wege .wege{grid-template-columns:repeat(2,minmax(0,210px));justify-content:center;gap:16px}
/* app pictures on parchment */
.sheet.schau-kapitel .schau figure{background:#f3ead6;border-color:#8a6a2c;box-shadow:0 22px 40px -26px rgba(60,40,10,.55)}
.sheet.schau-kapitel .schau figcaption{color:#4b3f2d}
.sheet.schau-kapitel .schau figcaption b{color:#2a2116}
.sheet.schau-kapitel .schau figcaption b::before{color:#8a6a2c}
.sheet.schau-kapitel .prosa{color:#5a4a33}
@media (min-width:900px){.sheet.schau-kapitel .schau .app-bilder:has(> li:nth-child(3):last-child){grid-template-columns:repeat(3,1fr)}}

/* the rule symbols on the beats of a move */
.zug-takte .z-symbol{width:46px;height:auto;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6));opacity:.92}
/* how a game ends: five buildings fall, their life cards turn */
.fall{margin:10px auto 26px;max-width:860px;display:grid;justify-items:center;gap:18px}
.f-reihe{display:flex;gap:clamp(8px,2vw,22px);justify-content:center;perspective:900px}
.f-platz{position:relative;width:clamp(54px,11vw,128px);aspect-ratio:220/330}
.f-platz img{position:absolute;inset:0;width:100%;height:100%;border-radius:6px;box-shadow:0 16px 30px -18px rgba(0,0,0,.95)}
.f-leben{filter:grayscale(.85) brightness(.45);outline:1px solid rgba(201,162,90,.35)}
.f-haus{transform-origin:50% 100%;transform:rotateX(78deg) translateY(12%);opacity:.3}
.f-zahl{display:flex;align-items:center;gap:10px;font:700 1.9rem/1 var(--display);color:var(--paper)}
.f-zahl img{width:34px;height:auto}
.js .fall.lauf .f-haus{transform:none;opacity:1}
.js .fall.lauf .f-leben{filter:none}
@media (prefers-reduced-motion:reduce){.js .fall.lauf .f-haus{transform:rotateX(78deg) translateY(12%);opacity:.3}.js .fall.lauf .f-leben{filter:grayscale(.85) brightness(.45)}}

/* read-on cards carry a picture of their page */
.weiter a{padding:0 20px 18px;overflow:hidden;align-content:start}
.weiter .w-motiv{display:block;max-width:none;width:calc(100% + 40px);margin-inline:-20px;height:132px;object-fit:cover;object-position:50% 30%;border-bottom:1px solid var(--gold-deep);filter:saturate(.9) brightness(.85);transition:filter .3s ease,transform .5s ease}
.weiter a:hover .w-motiv{filter:none}
.weiter a .no{margin-top:4px}
/* the black of the hell faction needs a hairline to be seen on the night */
.camp.c5{border-top-color:#5e534c;box-shadow:inset 0 1px 0 rgba(201,162,90,.5)}
.held-geteilt.klein{max-width:620px;margin:0 auto 30px}
@media (max-width:760px){.held-geteilt.klein .stats,.held-runde.klein .stats{display:none}.held-geteilt.klein figcaption,.held-runde.klein figcaption{font-size:.6rem;max-width:none;white-space:normal;left:8px;right:auto}}

/* ===== critic round 2 ===== */
/* paragraphs follow the head of their plate */
.buehne .prosa{text-align:center;max-width:640px;margin-inline:auto}
/* the round: grey lines readable, a touched word lit */
.kreis li span:last-child{color:#e3d6b8;background:rgba(9,7,5,.86)}
.kreis li{cursor:pointer;outline-offset:4px}
.kreis{margin-bottom:0}
/* the days of the pflege step count against fourteen */
.tage i{position:absolute;left:0;right:0;bottom:22%;text-align:center;font:400 .62rem/1 var(--display);letter-spacing:.14em;font-style:normal;color:#cdbf9f}
/* phones: the steps under the pinned map come one at a time, the counters sit in one line */
@media (max-width:900px){
  .js .szene-karte .explain.live .step{margin-bottom:52vh}
  .js .szene-karte .explain.live .step:last-child{margin-bottom:8vh}
  .szene-karte .mapfig .stats{flex-wrap:nowrap;gap:4px;left:6px;right:6px;bottom:6px}
  .szene-karte .mapfig .stats span{font-size:.5rem;padding:3px 5px;letter-spacing:.06em}
  .szene-karte .mapfig .stats b{font-size:.72rem}
}
/* spawn chart: coasts behind the places, names readable on phones */
.spawn .kueste polyline{fill:none;stroke:rgba(201,162,90,.34);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
@media (max-width:760px){.spawn text{font-size:34px;stroke-width:8px}}
/* rock paper scissors is a button; the chosen side stands full, the other steps back */
.ssp-feld{border:0;background:none;padding:6px;cursor:pointer;color:inherit;border-radius:60px}
.ssp-feld:focus-visible{outline:2px solid var(--gold-light);outline-offset:4px}
.ssp-b.sieg{box-shadow:0 0 0 2px var(--gold-light),0 0 30px rgba(233,200,130,.5)}
.szene-heimauswaerts .duo .side:first-child{box-shadow:none}
.szene-heimauswaerts .duo .side{transition:opacity .4s ease,box-shadow .4s ease}
.szene-heimauswaerts .duo .side.gewaehlt{opacity:1;box-shadow:0 0 0 1px var(--gold-light),0 20px 40px -18px rgba(232,200,120,.5)}
.szene-heimauswaerts .duo .side.nicht{opacity:.5}
/* the faction fans name the chosen faction under the fan, not on the cut cards */
.lagerfaecher .lf span{display:none}
.held-lager .lagerfaecher{height:clamp(230px,26vw,340px)}
.szene-lager6 .held-lager{margin:0 auto 20px}
/* the foil hint only where a pointer exists, readable */
.held-foil small,.foil-einzeln small,.table small{color:#d9c9a3}
@media (hover:none){.held-foil small,.foil-einzeln small,.table small{display:none}}
/* the opening of the card page: three backs and the nature commander */
.held-foil .hf-vorn{position:relative;z-index:2;display:block;width:min(300px,62vw);transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out}
.held-foil .hf-vorn img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 0 0 1px rgba(233,200,130,.55),0 34px 60px -18px #000}
.held-foil .hf-vorn .glanz{position:absolute;inset:0;border-radius:14px;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,30%),rgba(255,244,214,.38),transparent 55%);opacity:var(--go,0);transition:opacity .3s}
/* the card types */
.arten{list-style:none;margin:10px auto 30px;padding:0;max-width:900px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.art{border:1px solid var(--gold-deep);background:rgba(20,16,12,.72);padding:16px;display:grid;gap:8px;justify-items:center;text-align:center}
.a-knopf{display:grid;justify-items:center;gap:8px;border:0;background:none;padding:0;color:var(--paper);cursor:pointer;font:700 .9rem/1.2 var(--display);letter-spacing:.12em;text-transform:uppercase}
.a-knopf img{width:72px;height:auto;filter:drop-shadow(0 6px 12px rgba(0,0,0,.7));transition:transform .35s cubic-bezier(.22,1,.36,1),filter .35s}
.a-text{margin:0;color:#d8cba9;font-size:.92rem;line-height:1.5}
.js .arten.live{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.js .arten.live .art{display:contents}
.js .arten.live .a-knopf{padding:14px 6px;border:1px solid var(--gold-deep);background:rgba(20,16,12,.72);transition:border-color .3s,box-shadow .3s,transform .3s}
.js .arten.live .art.on .a-knopf{border-color:var(--gold-light);box-shadow:0 0 0 1px var(--gold),0 18px 34px -16px rgba(232,200,120,.55);transform:translateY(-6px)}
.js .arten.live .art.on .a-knopf img{transform:scale(1.14);filter:drop-shadow(0 0 14px rgba(233,200,130,.55))}
.js .arten.live .a-text{grid-column:1/-1;grid-row:2;display:none;padding:18px 20px;border:1px solid var(--gold-deep);background:rgba(12,10,8,.85);font-size:1.02rem}
.js .arten.live .art.on .a-text{display:block}
@media (max-width:760px){.arten{grid-template-columns:repeat(2,minmax(0,1fr))}.js .arten.live{grid-template-columns:repeat(3,minmax(0,1fr))}.js .arten.live .a-text{grid-row:3}.a-knopf{font-size:.72rem;letter-spacing:.06em}.a-knopf img{width:52px}}
/* building a deck */
.deckbau{display:flex;align-items:center;justify-content:center;gap:clamp(18px,4vw,48px);margin:10px auto 30px}
.deckbau img{width:clamp(80px,11vw,130px);height:auto;border-radius:8px;box-shadow:0 14px 26px rgba(0,0,0,.8)}
.db-cmd,.db-stapel{position:relative;display:block;width:clamp(80px,11vw,130px);aspect-ratio:220/330}
.db-cmd img{position:absolute;inset:0;box-shadow:0 0 0 1px var(--gold),0 0 30px rgba(233,200,130,.35)}
.db-stapel{cursor:pointer}
.db-stapel img{position:absolute;inset:0;transform:translate(calc(var(--k)*-2px),calc(var(--k)*-2px))}
.deckbau em{position:absolute;left:50%;bottom:-38px;transform:translateX(-50%);font:700 1.6rem/1 var(--display);font-style:normal;color:var(--paper)}
.db-plus{font:700 2rem/1 var(--display);color:var(--gold)}
/* cards for walked land */
.fund{position:relative;max-width:640px;margin:0 auto 34px}
.fund .held-runde.klein{margin:0}
.f-karte{position:absolute;right:-4%;bottom:-8%;width:clamp(96px,22%,150px);aspect-ratio:480/678;perspective:900px;cursor:pointer;z-index:4}
.fk-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.22,1,.36,1)}
.f-karte.auf .fk-in{transform:rotateY(180deg)}
.fk-in img{position:absolute;inset:0;width:100%;height:100%;border-radius:8px;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:0 0 0 1px var(--gold),0 22px 40px -12px #000}
.fk-v{transform:rotateY(180deg)}
/* two sides face each other */
.gegen{max-width:720px;margin:10px auto 30px;padding:20px;border:1px solid var(--gold-deep);background:radial-gradient(ellipse at 50% 50%,rgba(60,46,28,.55),rgba(12,10,8,.95));box-shadow:0 0 0 4px #0b0907,0 0 0 5px var(--gold);display:grid;gap:10px}
.g-seite{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;align-items:end}
.g-seite img{width:100%;height:auto;border-radius:6px;box-shadow:0 10px 18px rgba(0,0,0,.75)}
.g-oben img{transform:rotate(180deg);opacity:.85}
.g-oben .g-cmd,.g-unten .g-cmd{box-shadow:0 0 0 1px var(--gold),0 10px 18px rgba(0,0,0,.75)}
.g-mitte{justify-self:center;font:700 1.6rem/1 var(--display);color:var(--gold)}
/* the bot's deck */
.mischen{position:relative;display:block;width:clamp(110px,14vw,160px);aspect-ratio:220/330;margin:10px auto 40px;border:0;padding:0;background:none;cursor:pointer}
.mischen img{position:absolute;inset:0;width:100%;height:100%;border-radius:8px;box-shadow:0 12px 22px rgba(0,0,0,.8);transform:translate(calc(var(--k)*-2px),calc(var(--k)*-2px))}
.mischen:focus-visible{outline:2px solid var(--gold-light);outline-offset:6px}
/* the factions on a ring */
.lagerkreis{--r:min(230px,36vw);position:relative;width:calc(var(--r) * 2 + 140px);max-width:100%;aspect-ratio:1;margin:0 auto 20px}
.lk-mitte{position:absolute;left:50%;top:50%;width:18%;height:auto;transform:translate(-50%,-50%);opacity:.9;filter:drop-shadow(0 0 24px rgba(217,189,131,.35))}
.lk{position:absolute;left:50%;top:50%;width:clamp(74px,11vw,112px);aspect-ratio:3/4;margin:0;padding:0;border:1px solid var(--gold);border-radius:8px;overflow:hidden;cursor:pointer;background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--c) 40%,transparent),#0c0a08 75%);
  transform:translate(-50%,-50%) rotate(calc(var(--i) * 60deg + var(--dreh,0deg))) translateY(calc(var(--r) * -1)) rotate(calc(var(--i) * -60deg - var(--dreh,0deg)));transition:box-shadow .3s}
.lk img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%}
.lk.c1 img,.lk.c6 img{object-fit:contain;padding:6px}
.lk span{position:absolute;left:0;right:0;bottom:0;padding:5px 2px;font:700 .56rem/1.1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--paper);background:linear-gradient(transparent,rgba(9,7,5,.95) 40%);text-align:center}
.lk:hover,.lk.on,.lk:focus-visible{box-shadow:0 0 0 2px var(--c),0 16px 40px -8px var(--c);z-index:3}
/* you walk without a colour */
.wahl{position:relative;max-width:640px;margin:0 auto 60px}
.held-runde.farblos{filter:grayscale(1) brightness(.9)}
.wahl-hand{position:absolute;right:4%;bottom:-40px;width:0;height:0;z-index:4}
.wahl-hand img{position:absolute;left:0;bottom:0;width:clamp(54px,9vw,84px);height:auto;aspect-ratio:3/4;object-fit:cover;object-position:center 25%;border:1px solid var(--gold);border-radius:6px;background:#0c0a08;transform-origin:50% 140%;transform:translateX(-50%) rotate(calc(var(--k) * 11deg));box-shadow:0 10px 20px rgba(0,0,0,.8)}
/* four weeks */
.wochen{list-style:none;margin:10px auto 30px;padding:0;max-width:720px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;perspective:1100px}
.woche{position:relative;aspect-ratio:2/3;cursor:pointer;outline-offset:4px}
.wo-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.js .woche:not(.auf) .wo-in{transform:rotateY(180deg)}
.wo-r,.wo-v{position:absolute;inset:0;width:100%;height:100%;border-radius:9px;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.wo-r{transform:rotateY(180deg);box-shadow:0 16px 28px rgba(0,0,0,.75)}
.wo-v{display:grid;place-items:center;align-content:center;gap:12px;background:linear-gradient(160deg,#241c13,#0f0c09);border:1px solid var(--gold);box-shadow:inset 0 0 0 5px #0f0c09,inset 0 0 0 6px var(--gold-deep)}
.wo-v b{font:700 1.5rem/1 var(--display);color:var(--gold)}
.wo-v img{width:52%;height:auto;filter:drop-shadow(0 0 12px rgba(233,200,130,.35))}
/* the season pass */
.pass{--p:1;display:flex;align-items:center;gap:22px;max-width:820px;margin:16px auto 34px}
.p-spur{position:relative;flex:1;height:14px;border:1px solid var(--gold-deep);border-radius:8px;background:rgba(20,16,12,.8)}
.p-voll{position:absolute;left:0;top:0;bottom:0;width:calc(var(--p) * 100%);border-radius:8px;background:linear-gradient(90deg,var(--gold-deep),var(--gold-light));box-shadow:0 0 14px rgba(233,200,130,.5)}
.p-stufe{position:absolute;top:50%;left:calc((var(--i) + 1) * 10%);width:16px;height:16px;margin:-8px;border:2px solid var(--gold-light);border-radius:50%;background:var(--gold-light);transition:background .3s,border-color .3s,transform .3s}
.js .pass .p-stufe:not(.an){background:#16120d;border-color:var(--gold-deep)}
.p-stufe.an{transform:scale(1.2)}
.m-commander,.p-ende{position:relative;display:block}
.m-commander img,.p-ende img{filter:brightness(0) drop-shadow(0 0 16px rgba(233,200,130,.55))}
.m-commander b,.p-ende b{position:absolute;inset:0;display:grid;place-items:center;font:700 2.2rem/1 var(--display);color:var(--gold-light);text-shadow:0 0 18px rgba(233,200,130,.8)}
.p-ende{flex:0 0 auto;width:clamp(74px,10vw,110px)}
.p-ende img{width:100%;height:auto;border-radius:8px;transition:filter .5s}
.p-ende.an img{filter:brightness(0) drop-shadow(0 0 26px rgba(233,200,130,.95))}
/* the veiled commander of the month turning */
.wende.schleier .w-v{filter:brightness(0) drop-shadow(0 0 20px rgba(233,200,130,.6))}
.w-frage{position:absolute;inset:0;display:grid;place-items:center;font:700 4rem/1 var(--display);color:var(--gold-light);text-shadow:0 0 24px rgba(233,200,130,.8);-webkit-backface-visibility:hidden;backface-visibility:hidden}
/* a season on a line */
.zeitstrahl{--p:1;max-width:980px;margin:10px auto 30px}
.zs-linie{position:relative;height:40px;margin:0 10px}
.zs-linie::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--gold-deep)}
.zs-voll{position:absolute;left:0;top:50%;height:3px;margin-top:-.5px;width:calc(var(--p) * 100%);background:var(--gold-light);box-shadow:0 0 10px rgba(233,200,130,.7)}
.zs-linie span{position:absolute;top:50%;left:calc(var(--i) / 29 * 100%);width:1px;height:10px;margin-top:-5px;background:var(--gold-deep)}
.zs-linie span.w{height:20px;margin-top:-10px;background:var(--gold)}
.zs-stationen{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.zs-stationen li{padding:16px;border:1px solid var(--gold-deep);background:rgba(20,16,12,.72);display:grid;gap:6px;align-content:start;transition:border-color .4s,box-shadow .4s,opacity .4s}
.js .zs-stationen li:not(.an){opacity:.55}
.zs-stationen li.an{border-color:var(--gold-light);box-shadow:0 0 0 1px var(--gold)}
.zs-stationen .no{font:400 .72rem/1 var(--display);letter-spacing:.3em;color:var(--gold)}
.zs-stationen b{font:700 .95rem/1.2 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--paper)}
.zs-stationen span:last-child{color:#d8cba9;font-size:.93rem;line-height:1.5}
/* the ways: stamp, tighter card, faster turn */
.w-in{transition-duration:.6s}
.w-face{align-content:center;padding:14px 12px}
.w-face .stempel{justify-self:center;padding:3px 8px;border:1px solid var(--seal,#a8322b);color:#e7a39b;font:700 .6rem/1 var(--display);letter-spacing:.2em;text-transform:uppercase;font-style:normal;transform:rotate(-4deg)}
/* the duel stays inside its plate on every width */
.duell:not(.gross){overflow:visible;width:min(620px,100%)}
.duell:not(.gross) .d-karte{width:40%}
/* the zug card stays on the field on phones */
@media (max-width:760px){.zug-feld .z-karte{width:54px}.fund .f-karte{right:0}.wochen{grid-template-columns:repeat(2,minmax(0,1fr));max-width:340px}.pass{gap:12px}.g-seite{gap:5px}}
/* gold, the rarity, says so on its stone */
.banner.gold b{font-size:.9rem}
.deckbau{margin-bottom:64px}
.szene-lager6 .lagerfaecher{height:clamp(200px,20vw,280px)}.pass{margin-block:40px 50px}
/* the veiled commander: its back in shadow with a question mark, not a black slab */
.m-commander img,.p-ende img,.wende.schleier .w-v{filter:brightness(.42) saturate(.5) drop-shadow(0 0 18px rgba(233,200,130,.45))}
.p-ende.an img{filter:brightness(.55) saturate(.6) drop-shadow(0 0 30px rgba(233,200,130,.95))}
.a-knopf img{width:auto;height:62px}
@media (max-width:760px){.a-knopf img{height:44px}}
/* the ring keeps its own card size and place, whatever the faction tile rules say */
.lagerkreis .lk.camp{min-height:0;height:auto;border-top-width:1px}
.lagerkreis .lk.camp:hover,.lagerkreis .lk.camp.on,.lagerkreis .lk.camp:focus-visible{transform:translate(-50%,-50%) rotate(calc(var(--i) * 60deg + var(--dreh,0deg))) translateY(calc(var(--r) * -1)) rotate(calc(var(--i) * -60deg - var(--dreh,0deg))) scale(1.12)}
.wahl-hand img{max-width:none}
@media (max-width:760px){.lk span{letter-spacing:0;font-size:.5rem}}.spawn .kueste polyline{stroke:rgba(201,162,90,.22);stroke-width:1.1}
/* the subpage kicker stands above the heading, the heading carries only the page name */
.hero .h1-kicker{margin-bottom:22px;text-shadow:none}
@media (max-width:760px){.spawn text{font-size:40px}.szene-lager6 .lagerfaecher{height:190px}}

/* critic round 3 */
.w-face .stempel.test{border-color:var(--gold);color:var(--gold-light)}
@media (max-width:760px){
  .farben{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 12px;max-width:340px}
  .banner{width:auto;min-width:0}
  .banner b{font-size:.62rem;letter-spacing:.04em;overflow-wrap:anywhere;hyphens:auto}
  .banner.gold{margin-left:0;grid-column:2}
  .weg{aspect-ratio:auto;height:300px}
  .w-face b{font-size:.74rem;letter-spacing:.03em;overflow-wrap:anywhere;hyphens:auto}
  .w-face span:last-child{font-size:.72rem;line-height:1.35}
  .duell:not(.gross) .d-karte{width:40%}
  .duell:not(.gross) .d-links{left:6%}
  .duell:not(.gross) .d-rechts{right:6%}
}
.duell:not(.gross){max-width:560px}

/* rarity gems (collection page) */
.steine{list-style:none;margin:14px auto 30px;padding:0;max-width:760px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;align-items:end}
.stein{display:grid;justify-items:center;gap:10px;text-align:center}
.stein img{width:min(92px,100%);height:auto;filter:drop-shadow(0 6px 14px rgba(0,0,0,.6));transition:transform .35s,filter .35s}
.stein:hover img{transform:translateY(-4px) scale(1.06);filter:drop-shadow(0 0 16px rgba(233,200,130,.45))}
.stein b{font:600 .78rem/1.2 var(--display);letter-spacing:.06em;color:var(--gold-light)}
.stein.cmd{border-left:1px solid var(--gold-deep);padding-left:14px}
.js .steine:not(.auf) .stein{opacity:0;transform:translateY(18px)}
.js .steine .stein{transition:opacity .5s calc(var(--i) * .14s),transform .5s calc(var(--i) * .14s)}
@media (max-width:760px){.steine{grid-template-columns:repeat(3,minmax(0,1fr));max-width:340px;gap:20px 12px}.stein.cmd{border-left:0;padding-left:0}}
@media (prefers-reduced-motion:reduce){.js .steine:not(.auf) .stein{opacity:1;transform:none}}

@media (max-width:760px){.stein.cmd{grid-column:1/-1;border-top:1px solid var(--gold-deep);padding-top:16px}}

/* beta page: counter and share (22.09.) */
.hero .zaehler{font:700 1rem/1.4 var(--display);letter-spacing:.08em;color:var(--gold-light);margin-top:6px;min-height:1.4em}
.teilen{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:18px 0 26px}
.teilen .btn{min-width:180px}
.teilen p{flex-basis:100%;text-align:center;min-height:1.4em;margin:0;color:var(--gold-light)}