/* ══════════════════════════════════════════════════════════════════ landkarte.css — die Landkarte des Tutorials (kampagne.html), seit 418 neu gebaut (Wunsch Max: mobile first, ganze Breite). Pfade hier sind relativ zum Stilblatt: `../assets/…`. Aufbau: .kartengrund der Hintergrund hinter der Bühne: dieselbe Karte, weich und dunkel. Wo der Schirm höher ist als die Karte (Rechner, Tablet), stehen oben und unten keine schwarzen Balken, sondern Landschaft. .buehne.karte 1000 × `--kh` Bühnenpunkte. `--kh` folgt dem Seitenverhältnis des Schirms (js/landkarte.js, `rahmen`): auf dem Telefon quer füllt die Bühne den Schirm randlos. .land das Bild in voller Breite: `--lw` × `--lh`, um `--lt` verschoben (über 2 : 1 ragt es oben und unten hinaus, darunter bleibt ein Streifen frei). Was über der Karte liegt (Leinwand der Atmosphäre, Marken, Wege), liegt **in** diesem Kasten und rechnet in Anteilen des Bildes. .wolkenvorhang beim Öffnen ziehen Wolken zur Seite. ══════════════════════════════════════════════════════════════════ */ .kartengrund{position:fixed;inset:-40px;z-index:0;pointer-events:none; background:#16220f url(../assets/landkarte/pandoria.webp) center/cover no-repeat; filter:blur(18px) brightness(.5) saturate(.9);} body.buehnenseite:has(.buehne.karte){background:#16220f;} .buehne.karte{width:1000px;height:var(--kh,500px);z-index:1;} .buehne.karte .tisch{border-radius:0;box-shadow:none;background:none;isolation:isolate;} .land{position:absolute;left:var(--ll,0px);top:var(--lt,0px); width:var(--lw,1000px);height:var(--lh,500px);overflow:hidden;} .land img#landbild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;} .land .glut{position:absolute;inset:0;pointer-events:none;width:100%;height:100%;z-index:1;} #marken{position:absolute;inset:0;z-index:2;} /* `.ruht`: eine Tafel liegt über der Karte — alle CSS-Bewegungen der Karte halten an (js/atmosphaere.js). */ .land.ruht *,.land.ruht::after{animation-play-state:paused !important;} /* ─── Der Weg ───────────────────────────────────────────────────── Weiße Tupfen mit dunklem Ring: sie heben sich auf Wiese, Straße und Wald gleich gut ab. Der Abschnitt, der nach einem Sieg dazukommt, setzt sich Tupfen für Tupfen (`.laeuft`), jeder blitzt kurz golden auf und fällt dann auf Weiß zurück. Größe in Bildschirmpunkten. */ .wegpunkt{ position:absolute;transform:translate(-50%,-50%);z-index:4;pointer-events:none; width:calc(8px / var(--s,1));height:calc(8px / var(--s,1));border-radius:50%; background:#fff; box-shadow:0 0 0 calc(1.6px / var(--s,1)) rgba(20,14,8,.8),0 calc(1px / var(--s,1)) calc(3px / var(--s,1)) rgba(0,0,0,.55); animation:wegpunktAn .3s ease-out backwards; } @keyframes wegpunktAn{from{opacity:0;transform:translate(-50%,-50%) scale(.3)}} .wegpunkt.laeuft{animation:wegpunktTritt .5s cubic-bezier(.2,.9,.3,1.5) backwards;} @keyframes wegpunktTritt{ 0% {opacity:0;transform:translate(-50%,-50%) scale(.2);} 45% {opacity:1;transform:translate(-50%,-50%) scale(2); background:radial-gradient(circle at 36% 32%,#fff5cf,var(--gold-hi) 60%,var(--gold-dk)); box-shadow:0 0 0 calc(1.6px / var(--s,1)) rgba(20,14,8,.55),0 0 calc(12px / var(--s,1)) var(--gold-hi);} 100%{opacity:1;transform:translate(-50%,-50%) scale(1);} } /* ─── Marken ────────────────────────────────────────────────────── Eine Marke ist ein Punkt ohne Ausdehnung auf der Mitte des Gebäudes. Bezwungen: ein grüner Punkt mit Haken. Offen: ein goldener Ring, der auf dem Gebäude pocht, daneben die Szene (unten). */ .marke{position:absolute;width:0;height:0;padding:0;border:0;background:none;z-index:5;cursor:default;} .marke .haken{position:absolute;left:0;top:0;transform:translate(-50%,-50%); display:grid;place-items:center; width:calc(24px / var(--s,1));height:calc(24px / var(--s,1));border-radius:50%; background:#3f7a43;color:#fff;font-family:var(--display);font-size:calc(15px / var(--s,1));line-height:1; border:calc(2px / var(--s,1)) solid var(--ink); box-shadow:0 0 0 calc(1.5px / var(--s,1)) rgba(20,14,8,.75),0 calc(2px / var(--s,1)) calc(4px / var(--s,1)) rgba(0,0,0,.5); animation:markeAn .35s cubic-bezier(.2,.9,.3,1.4) backwards;} @keyframes markeAn{from{opacity:0;transform:translate(-50%,-50%) scale(.4)}} .marke.wieder{cursor:pointer;} /* ══════════════════════════════════════════════════════════════════ Die Szene der offenen Station (417, seit 418 mobile first) Ablauf (js/landkarte.js, `--verzug`): erst laufen die Tupfen, dann pocht der Ring auf dem Gebäude, dann geht die Szene auf wie ein Knopf, zuletzt die Sprechblase, die ohne Worte sagt, was der Gegner will. Die Szene misst ein Fünftel der Schirmbreite (210 bis 400 Bildschirmpunkte, `--szenebreite`, js/landkarte.js): groß genug, dass man den Bettler in seiner Taverne erkennt. `lage` aus js/kampagne.js legt sie neben das Gebäude, ohne es zu verdecken; was trotzdem über den Rand ragte, schiebt `--schubx`/`--schuby` zurück. ══════════════════════════════════════════════════════════════════ */ .marke.szene{--kw:calc(var(--szenebreite,232px) / var(--s,1));--hub:calc(30px / var(--s,1));--weg:calc(40px / var(--s,1)); --verzug:0ms;cursor:pointer;z-index:6;} .ortring{position:absolute;left:0;top:0;transform:translate(-50%,-50%);pointer-events:none; width:calc(46px / var(--s,1));height:calc(46px / var(--s,1));border-radius:50%; border:calc(3px / var(--s,1)) solid var(--gold-hi); box-shadow:0 0 calc(14px / var(--s,1)) var(--gold),inset 0 0 calc(10px / var(--s,1)) rgba(255,214,120,.6); animation:ringAn .4s ease-out var(--verzug) backwards,ringPocht 1.6s ease-in-out calc(var(--verzug) + .4s) infinite;} @keyframes ringAn{from{opacity:0;transform:translate(-50%,-50%) scale(2.2);}} @keyframes ringPocht{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:1;}50%{transform:translate(-50%,-50%) scale(1.18);opacity:.75;}} .szenenhalter{position:absolute;width:var(--kw);transform:translate(var(--schubx,0px),var(--schuby,0px)); animation:szeneAuf .55s cubic-bezier(.2,.9,.3,1.35) calc(var(--verzug) + .25s) backwards;} .lage-oben .szenenhalter{left:0;bottom:var(--hub);translate:-50% 0;transform-origin:50% 100%;} .lage-links .szenenhalter{right:var(--weg);top:0;translate:0 -50%;transform-origin:100% 50%;} .lage-rechts .szenenhalter{left:var(--weg);top:0;translate:0 -50%;transform-origin:0 50%;} .lage-rechtsunten .szenenhalter{left:var(--weg);top:calc(44px / var(--s,1));transform-origin:0 0;} @keyframes szeneAuf{from{opacity:0;scale:.2;}} .szenenkarte{position:relative;display:block;box-sizing:border-box;width:100%;aspect-ratio:16 / 10; border-radius:calc(14px / var(--s,1));overflow:hidden;background:#1a120a; border:calc(3px / var(--s,1)) solid #0d0905; box-shadow:inset 0 0 0 calc(2px / var(--s,1)) rgba(255,226,150,.85), 0 0 0 calc(3px / var(--s,1)) #6d4f27,0 0 0 calc(5px / var(--s,1)) var(--gold-hi), 0 0 calc(26px / var(--s,1)) rgba(255,200,90,.6),0 calc(10px / var(--s,1)) calc(16px / var(--s,1)) calc(-6px / var(--s,1)) rgba(0,0,0,.8); transition:transform .18s ease;} .szenenkarte img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%;} /* Ein Glanz läuft einmal über die Karte, wenn sie aufgeht. */ .szenenkarte::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(105deg,transparent 35%,rgba(255,250,230,.55) 50%,transparent 65%) -150% 0 / 250% 100% no-repeat; animation:szeneGlanz 1s ease-out calc(var(--verzug) + .7s) both;} @keyframes szeneGlanz{to{background-position:150% 0;}} .marke.szene:hover .szenenkarte,.marke.szene:focus-visible .szenenkarte{transform:scale(1.05);} .marke.szene:focus-visible{outline:none;} /* ─── Die Sprechblase ───────────────────────────────────────────── In CSS gebaut, nicht als Bild: so sitzen die Zeichen sicher in der Mitte des Körpers (Max, 418: im Bild standen sie schief). Weißer Körper, dicke Tusche, der Zipfel zeigt nach unten in die Szene, und zwar genau auf den Kopf der Figur: `--kopf` ist dessen Lage in der Szene (Anteil der Breite, `kopf` in js/kampagne.js; 423, Max). */ .stationsblase{position:absolute;left:calc(var(--kopf,.45) * 100% - 31px * var(--sz,1) / var(--s,1));bottom:calc(100% + 14px * var(--sz,1) / var(--s,1));z-index:2; display:flex;align-items:center;justify-content:center;gap:calc(8px * var(--sz,1) / var(--s,1)); padding:calc(8px * var(--sz,1) / var(--s,1)) calc(14px * var(--sz,1) / var(--s,1)); background:#fffaf0;border:calc(3px / var(--s,1)) solid #1a120a;border-radius:calc(20px * var(--sz,1) / var(--s,1)); box-shadow:0 calc(4px / var(--s,1)) 0 rgba(26,18,10,.35); pointer-events:none;transform-origin:20% 120%; animation:blaseAuf .45s cubic-bezier(.2,.9,.3,1.6) calc(var(--verzug) + .8s) backwards, blaseWippt 2.8s ease-in-out calc(var(--verzug) + 1.4s) infinite;} .stationsblase::before,.stationsblase::after{content:"";position:absolute;left:calc(22px * var(--sz,1) / var(--s,1));top:100%; border-style:solid;border-color:transparent;} .stationsblase::before{border-width:calc(16px * var(--sz,1) / var(--s,1)) calc(9px * var(--sz,1) / var(--s,1)) 0 calc(9px * var(--sz,1) / var(--s,1));border-top-color:#1a120a;} .stationsblase::after{left:calc(25px * var(--sz,1) / var(--s,1) + 1.5px / var(--s,1));border-width:calc(11px * var(--sz,1) / var(--s,1)) calc(6px * var(--sz,1) / var(--s,1)) 0 calc(6px * var(--sz,1) / var(--s,1));border-top-color:#fffaf0;margin-top:calc(-1px / var(--s,1));} @keyframes blaseAuf{from{opacity:0;scale:.3;}} @keyframes blaseWippt{0%,100%{translate:0 0;}50%{translate:0 calc(-3px / var(--s,1));}} .stationszeichen{display:grid;place-items:center;width:calc(34px * var(--sz,1) / var(--s,1));height:calc(34px * var(--sz,1) / var(--s,1));font-style:normal;} .stationszeichen img,.stationszeichen svg{width:100%;height:100%;object-fit:contain;display:block;} .stationszeichen b{font-family:var(--display);font-weight:400;font-size:calc(34px * var(--sz,1) / var(--s,1));line-height:1; color:#b2261c;transform:translateY(calc(2px / var(--s,1)));} .stationszeichen.dolch img{transform:rotate(-30deg);} /* Ein Laut statt Zeichen (419): gurgeln, schnarchen. Schrift des Spiels, Tusche, ein wenig schief, die Blase wird so breit wie nötig. */ .stationsblase.ruft{white-space:nowrap;} .stationstext{font-style:normal;font-family:var(--display);color:#1a120a;line-height:1; font-size:calc(24px * var(--sz,1) / var(--s,1));padding-top:.12em;letter-spacing:.02em; display:inline-block;transform:rotate(-3deg);} @media (prefers-reduced-motion:reduce){ .wegpunkt,.wegpunkt.laeuft,.marke .haken,.ortring,.szenenhalter,.stationsblase,.szenenkarte::after{animation:none;} } /* ══════════════════════════════════════════════════════════════════ Wolken ziehen auf (418, Wunsch Max: „etwas cineastisch“) Beim Öffnen liegt die Karte unter Wolken; sie ziehen nach links und rechts auseinander und geben das Land frei. Die Wolke ist gezeichnet wie die Wolken im Kartenbild (assets/landkarte/wolke.webp). Der Vorhang liegt im Fenster, nicht in der Bühne: er deckt auch die Ränder. js/landkarte.js baut ihn und nimmt ihn wieder weg. ══════════════════════════════════════════════════════════════════ */ .wolkenvorhang{position:fixed;inset:0;z-index:40;pointer-events:none;overflow:hidden;} /* Der Dunst zwischen den Wolken: hell, und schneller weg als sie. */ .wolkenvorhang::before{content:"";position:absolute;inset:0;background:linear-gradient(#bfe0f5,#eaf6fc); animation:dunstWeg .8s ease-in .3s forwards;} @keyframes dunstWeg{to{opacity:0;}} .wolkenvorhang img{position:absolute;width:var(--w);left:var(--x);top:var(--y);translate:-50% -50%; animation:wolkeZieht 1.35s cubic-bezier(.55,0,.75,.4) var(--d,0s) forwards;} @keyframes wolkeZieht{to{transform:translateX(var(--weg)) scale(1.25);opacity:.2;}} @media (prefers-reduced-motion:reduce){ .wolkenvorhang{display:none;} } /* ─── Gold für die Station ─────────────────────────────────────────── js/landkarte.js → goldLohnZeigen: „+N“ mit der Münze steigt am Ort auf und vergeht. */ .goldfund{position:absolute;z-index:12;transform:translate(-50%,-140%);pointer-events:none;white-space:nowrap; font-family:var(--display);font-size:calc(24px / var(--s,1));color:#fff;padding-top:.12em; text-shadow:0 0 6px rgba(255,205,90,.95),0 2px 0 rgba(0,0,0,.6); opacity:0;transition:opacity .35s ease,transform 2.4s cubic-bezier(.2,.7,.3,1);} .goldfund.steigt{opacity:1;transform:translate(-50%,-320%);animation:goldfundAus 2.9s ease forwards;} @keyframes goldfundAus{0%{opacity:0;}12%,65%{opacity:1;}100%{opacity:0;}} .goldfund img{width:1.05em;height:1.05em;object-fit:contain;vertical-align:-.18em;margin-left:.15em;} @media (prefers-reduced-motion:reduce){ .goldfund{transition:none;} .goldfund.steigt{animation:none;opacity:1;} } /* ══════════════════════════════════════════════════════════════════ Die Bedienung über der Karte Weg hinaus, Konto, Zahnrad und (nur Werkstatt) die Windrose hängen an der Bühne, nicht an der Tischplatte, und haben keinen Filter: nichts, was die Karte mit sich macht, erreicht sie. Seit 418 gibt es keinen freien Rand mehr (die Karte füllt den Schirm), also stehen sie in den Ecken: oben rechts Konto und Zahnrad, unten rechts der Weg hinaus. Alle Maße in Bildschirmpunkten (`/ var(--s)`). ══════════════════════════════════════════════════════════════════ */ a.knopf.heimweg{filter:none;} a.knopf.heimweg{position:absolute;left:auto;top:auto;z-index:30; right:calc(14px / var(--s,1));bottom:calc(12px / var(--s,1)); /* Ein roter Knopf in voller Größe wie überall (422, Max: die Schrift war zu klein). Alle Maße in Bildschirmpunkten. */ width:auto;min-width:calc(150px / var(--s,1));min-height:calc(52px / var(--s,1)); padding:.22em calc(28px / var(--s,1)) 0;font-size:calc(23px / var(--s,1)); border-width:calc(3px / var(--s,1));border-radius:calc(15px / var(--s,1));} .zahnrad.kartenoptionen{position:absolute;z-index:32;right:calc(12px / var(--s,1));top:calc(10px / var(--s,1)); width:calc(44px / var(--s,1));height:calc(44px / var(--s,1));border:0;border-radius:50%;box-shadow:none; background:url(../assets/tisch/knopf-zahnrad.webp) center/100% 100% no-repeat; filter:drop-shadow(0 calc(3px / var(--s,1)) 0 rgba(20,16,11,.85));} .zahnrad.kartenoptionen svg{display:none;} .zahnrad.kartenoptionen:hover{filter:drop-shadow(0 calc(3px / var(--s,1)) 0 rgba(20,16,11,.85)) brightness(1.12);} .kartenoptionenfeld{z-index:60;} @media (max-height:520px){ .kartenoptionenfeld{gap:10px;overflow:auto;justify-content:safe center;} .kartenoptionenfeld > *{zoom:calc(.9 / var(--s,1));flex:0 0 auto;} .kartenoptionenfeld h2{font-size:26px;} .kartenoptionenfeld .optionsfeld{min-width:330px;gap:11px;padding:14px 22px;} } .kartenkonto{position:absolute;z-index:31;top:calc(14px / var(--s,1));right:calc(66px / var(--s,1)); display:flex;align-items:center;gap:calc(12px / var(--s,1));padding:calc(4px / var(--s,1)) calc(12px / var(--s,1)) calc(3px / var(--s,1)); border-radius:999px;background:rgba(24,17,10,.82);border:calc(2px / var(--s,1)) solid rgba(214,170,90,.75); box-shadow:0 calc(2px / var(--s,1)) calc(6px / var(--s,1)) rgba(0,0,0,.45);pointer-events:none; color:#f6e7c4;font-family:var(--display);font-size:calc(19px / var(--s,1));line-height:1;} .kartenkonto span{display:inline-flex;align-items:center;gap:calc(5px / var(--s,1));} .kartenkonto b{font-weight:400;font-variant-numeric:tabular-nums;padding-top:.12em;} .kartenkonto img{width:calc(22px / var(--s,1));height:calc(22px / var(--s,1));object-fit:contain;} /* ══════════════════════════════════════════════════════════════════ Die drei Glücksspiele (425, js/glueck.js) Nach dem Tutorial stehen drei leuchtende Orte auf der Karte: ein runder Holzschild mit dem Bild des Spiels (Becher, Hand, Kugel) und goldenem Schein, der atmet; darunter klein der Name. Wer heute schon gespielt hat, sieht den Schild matt, ohne Schein. Maße in Bildschirmpunkten (`/ var(--s)`), wie die übrigen Marken. ══════════════════════════════════════════════════════════════════ */ .marke.glueck{cursor:pointer;z-index:6;} .marke.glueck .glueckring{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:grid;place-items:center; width:calc(48px / var(--s,1));height:calc(48px / var(--s,1));border-radius:50%; background:radial-gradient(circle at 40% 30%,#5a4426,#241a0e);border:calc(3px / var(--s,1)) solid var(--ink); box-shadow:0 0 0 calc(2px / var(--s,1)) var(--gold),0 0 calc(18px / var(--s,1)) var(--gold-hi),0 calc(3px / var(--s,1)) calc(6px / var(--s,1)) rgba(0,0,0,.55); animation:markeAn .35s cubic-bezier(.2,.9,.3,1.4) backwards,glueckAtmet 2.2s ease-in-out infinite;} .marke.glueck .glueckring img{width:72%;height:72%;object-fit:contain;filter:drop-shadow(0 calc(1px / var(--s,1)) calc(1px / var(--s,1)) rgba(0,0,0,.6));} .marke.glueck small{position:absolute;left:0;top:calc(30px / var(--s,1));transform:translateX(-50%);white-space:nowrap; font-family:var(--display);font-size:calc(12px / var(--s,1));line-height:1;padding-top:.15em;color:#fff5d6; text-shadow:0 calc(1px / var(--s,1)) 0 var(--ink),0 calc(-1px / var(--s,1)) 0 var(--ink),calc(1px / var(--s,1)) 0 0 var(--ink),calc(-1px / var(--s,1)) 0 0 var(--ink);} @keyframes glueckAtmet{0%,100%{box-shadow:0 0 0 calc(2px / var(--s,1)) var(--gold),0 0 calc(14px / var(--s,1)) var(--gold-hi),0 calc(3px / var(--s,1)) calc(6px / var(--s,1)) rgba(0,0,0,.55);} 50%{box-shadow:0 0 0 calc(3px / var(--s,1)) var(--gold-hi),0 0 calc(30px / var(--s,1)) var(--gold-hi),0 calc(3px / var(--s,1)) calc(6px / var(--s,1)) rgba(0,0,0,.55);}} .marke.glueck.gespielt .glueckring{animation:markeAn .35s cubic-bezier(.2,.9,.3,1.4) backwards;filter:saturate(.3) brightness(.75); box-shadow:0 0 0 calc(2px / var(--s,1)) rgba(120,100,70,.6),0 calc(3px / var(--s,1)) calc(6px / var(--s,1)) rgba(0,0,0,.55);} .marke.glueck.gespielt small{color:rgba(255,245,214,.6);} .marke.glueck:hover .glueckring,.marke.glueck:focus-visible .glueckring{transform:translate(-50%,-50%) scale(1.1);} /* ─── Die Tafel eines Spiels ───────────────────────────────────────── Dieselbe schlichte Tafel wie die Einstellungen der Karte. Darin oben ein Satz, in der Mitte die Bühne des Spiels, darunter das Wort zum Stand und die Knöpfe. */ .glueckfeld .schlichttafel{min-width:min(520px,94%);max-width:600px;gap:10px;padding-bottom:20px;} .glueckfeld .gluecksatz{margin:0;font-size:15px;line-height:1.4;text-align:center;color:var(--tan);} .glueckfeld .glueckbuehne{position:relative;width:100%;min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;} .glueckfeld .glueckwort{margin:0;min-height:1.5em;font-family:var(--display);font-size:19px;line-height:1.3;text-align:center;color:var(--parch-hi);padding-top:.1em;} .glueckfeld .glueckknoepfe{display:flex;gap:12px;min-height:48px;} .glueckfeld .kristallwert{display:inline-flex;align-items:center;gap:4px;color:#8fe2ff;} .glueckfeld .kristallwert img{width:16px;height:22px;object-fit:contain;} .glueckfeld .glueckbild{height:120px;width:auto;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6));} /* Hütchen: drei Becher, die Lage `--p` (0, 1, 2) legt den Platz fest, der Wechsel läuft über `--dauer`; der gehobene Becher zeigt den Kristall darunter. */ .becherreihe{position:relative;width:360px;max-width:100%;height:150px;} .becher{position:absolute;left:calc(var(--p) * 120px + 20px);top:14px;width:80px;height:120px;padding:0;border:0;background:none;cursor:pointer; transition:left var(--dauer,400ms) cubic-bezier(.45,.05,.55,1);transform-origin:50% 100%;} .becher:disabled{cursor:default;} .becher img{position:relative;z-index:2;width:100%;height:100%;object-fit:contain;transition:transform .35s cubic-bezier(.2,.9,.3,1.3); filter:drop-shadow(0 6px 8px rgba(0,0,0,.55));} .becher.oben img{transform:translateY(-44px) rotate(-8deg);} .becher .kristallunten{position:absolute;left:50%;bottom:4px;translate:-50% 0;z-index:1;opacity:0;transition:opacity .3s .15s;} .becher .kristallunten img{width:26px;height:36px;object-fit:contain;filter:drop-shadow(0 0 8px #8fe2ff);} .becher.oben .kristallunten{opacity:1;} .becher:not(.oben):not(:disabled):hover img{transform:translateY(-6px);} /* Schere, Stein, Papier */ .schnickfeld{display:flex;align-items:center;justify-content:center;gap:28px;} .schnickseite{display:flex;flex-direction:column;align-items:center;gap:4px;} .schnickseite small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tan);} .schnickseite .hand{width:96px;height:84px;object-fit:contain;filter:drop-shadow(0 5px 7px rgba(0,0,0,.55));} .schnickseite .hand.ihm{transform:scaleX(-1);} .schnickseite .hand.wippt{animation:handWippt .4s ease-in-out 3;} .schnickseite .hand.ihm.wippt{animation-name:handWipptIhm;} @keyframes handWippt{0%,100%{transform:translateY(0);}50%{transform:translateY(-18px) rotate(-10deg);}} @keyframes handWipptIhm{0%,100%{transform:scaleX(-1) translateY(0);}50%{transform:scaleX(-1) translateY(-18px) rotate(-10deg);}} .schnickseite .punkte{font-family:var(--display);font-size:24px;color:var(--gold-hi);padding-top:.1em;} .schnickfeld .gegen{font-style:normal;font-size:13px;color:var(--tan);} .handwahl{display:flex;gap:12px;} .handknopf{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 12px 6px;border-radius:14px;cursor:pointer; background:rgba(10,7,4,.45);border:2px solid rgba(201,152,74,.4);color:var(--parch);font:inherit;transition:transform .15s,border-color .15s;} .handknopf img{width:56px;height:48px;object-fit:contain;} .handknopf span{font-family:var(--display);font-size:13px;} .handknopf:hover:not(:disabled){transform:translateY(-3px);border-color:var(--gold-hi);} .handknopf:disabled{opacity:.45;cursor:default;} /* Orakel: die Kugel oben, drei Karten mit Zeichen, die sich wenden. */ .orakelkugel{height:96px;width:auto;filter:drop-shadow(0 0 16px rgba(143,226,255,.55));} .zeichenreihe{display:flex;gap:14px;} .zeichen{position:relative;width:76px;height:104px;padding:0;border:0;background:none;cursor:pointer;perspective:600px;} .zeichen span{position:absolute;inset:0;display:grid;place-items:center;border-radius:10px;backface-visibility:hidden; transition:transform .6s cubic-bezier(.3,.8,.3,1);border:3px solid var(--ink);box-sizing:border-box;} .zeichenvorn{background:radial-gradient(circle at 50% 40%,#3f2a63,#1b1230);color:#c9b7ff;font-size:34px; box-shadow:inset 0 0 0 2px rgba(201,180,255,.35),0 6px 10px rgba(0,0,0,.5);} .zeichenhinten{background:linear-gradient(160deg,var(--parch-hi),var(--parch-sh));transform:rotateY(180deg);font-size:18px;} .zeichenhinten .kristallwert{color:#1f6fa8;} .zeichen.gewendet .zeichenvorn{transform:rotateY(180deg);} .zeichen.gewendet .zeichenhinten{transform:rotateY(0deg);} .zeichen:disabled{cursor:default;} .zeichen.blass{opacity:.4;} .zeichen:not(:disabled):hover .zeichenvorn{box-shadow:inset 0 0 0 2px rgba(201,180,255,.35),0 0 18px rgba(201,180,255,.6);} @media (prefers-reduced-motion:reduce){ .marke.glueck .glueckring,.schnickseite .hand.wippt{animation:none;} .becher{transition:none;} }