/* ══════════════════════════════════════════════════════════════════
   startseite.css — das Hauptmenü (seit 414, nach dem Vorbild Hearthstone)

   Der Tavernentisch füllt den ganzen Schirm (assets/menue/tisch.webp,
   dieselbe Machart wie der Duelltisch). In der Mitte liegt der
   Spielkasten mit den großen Wegen, in den Ecken liegen Gegenstände,
   die man antippt: unten links Shop und Erfolge, unten rechts Pakete und
   Sammlung, oben links das eigene Bildnis mit Name und Gold, oben rechts
   Ton und Einstellungen. Alle Grafiken ohne Schrift; was dasteht, ist
   Text in der Spielschrift (Übersetzungen, Zustände).

   Maße in Bühnenpunkten (1000 × 490, js/buehne.js skaliert).
   ══════════════════════════════════════════════════════════════════ */

/* ─── Der Tisch ─────────────────────────────────────────────────────
   Über den ganzen Schirm, nicht nur über die Bühne: die Ränder neben der
   Bühne sind derselbe Tisch. **Vergrößert (140 %)**, damit Krug, Kerze,
   Münzen und Karten des Bildes nur noch an den Rändern hereinragen: die
   Ecken gehören den Gegenständen, die man antippt. Ein Schleier zur
   Mitte hin hält den Kasten im Licht. */
html:has(body.startseite),body.startseite{
  background:
    radial-gradient(38% 45% at 92% 6%,rgba(255,190,90,.22),rgba(255,190,90,0) 70%),
    radial-gradient(120% 95% at 50% 46%,rgba(18,11,6,0) 38%,rgba(18,11,6,.55) 100%),
    url(../assets/menue/tisch.webp) center / max(140vw, 249vh) auto no-repeat,
    #1c120a;
}
.startseite .tisch{background:none;box-shadow:none;}
/* ─── Fenster über dem Menü (416) ───────────────────────────────────
   Shop, Duell, Questbuch, Erfolge, Barbier, Einstellungen und Konto
   öffnen als Fenster über dem stehenden Menü (js/tafelfeld.js,
   css/tafel.css). Inhalt in Bühnenpunkten (Laden, Deckwahl) füllt den
   Leib des Fensters; seine alten dunklen Kegel fallen weg, das Fenster
   ist selbst dunkel. */
.buehnenmass > .ansicht.an,.buehnenmass > .duellablauf{position:absolute;inset:0;}
.buehnenmass .ansicht::before{display:none;}

/* ─── Deck bauen und Sammlung (417) ─────────────────────────────────
   Das Regal ist in Bildschirmpunkten gebaut (css/kompendium.css): der
   Schritt „Deck bauen“ nimmt den Maßstab der Bühne wieder heraus. Oben
   eine Leiste mit Name, Rückmeldung und Zähler, darunter rollt das
   Regal. */
.buehnenmass #deckbau{zoom:var(--fz,1);padding:0;gap:0;justify-content:flex-start;align-items:stretch;}
.deckbauleiste{flex:0 0 auto;position:relative;display:flex;align-items:center;justify-content:center;gap:14px;
  padding:12px 24px 10px;border-bottom:1px solid rgba(232,190,110,.25);}
.decknamefeld{font-family:var(--display);font-size:19px;padding:5px 12px 3px;border-radius:10px;width:15em;text-align:center;
  border:1.5px solid rgba(232,190,110,.5);background:rgba(0,0,0,.35);color:var(--gold-hi);}
.decknamefeld:focus{outline:2px solid var(--gold-hi);outline-offset:1px;}
.deckzaehler{position:absolute;right:24px;font-family:var(--display);font-size:16px;color:var(--tan);}
.deckzaehler b{font-weight:400;font-size:22px;color:#f6e3bb;margin-right:4px;}
.deckzaehler.voll b{color:#9fd46a;}
.deckhilfe{position:absolute;left:24px;max-width:28%;margin:0;font-size:13px;line-height:1.3;color:var(--gold-hi);}
.deckhilfe[hidden]{display:none;}
.deckraster.raster,.sammlungraster.raster{width:100%;padding:14px 18px 24px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;}
.deckraster{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;}
.fenster.sammlung .fensterleib{padding:0;}
@media (max-height:560px){
  .deckbauleiste{padding:6px 12px;}
  .decknamefeld{font-size:16px;width:11em;}
  .deckhilfe{display:none;}
  /* Vier je Reihe statt sechs (423, Max): bei 0,8 Verkleinerung waren
     Name und Text sonst nicht zu lesen. */
  .deckraster.raster,.sammlungraster.raster{grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:12px;padding:10px 14px 16px;}
}

#menue{display:none;padding:0;}
#menue.an{display:block;}

/* ─── Der Spielkasten ───────────────────────────────────────────────
   Das Bild ist 640 × 834; die Füllung (das dunkle Feld) liegt bei
   13,75 bis 86,25 % der Breite und 14,3 bis 86,7 % der Höhe. Darin
   stehen die Wege, darüber hängt das Schild mit dem Schriftzug. */
.mkasten{
  position:absolute;left:50%;top:22px;height:436px;aspect-ratio:640 / 834;
  translate:-50% 0;z-index:2;
  animation:mkastenAuf .5s cubic-bezier(.2,.9,.25,1) both;
}
.mkastenbild{position:absolute;inset:0;width:100%;height:100%;display:block;
  filter:drop-shadow(0 16px 22px rgba(0,0,0,.65)) drop-shadow(0 4px 6px rgba(0,0,0,.5));}
/* Kerzenlicht im Kasten: die Füllung wird zur Mitte hin warm. */
.mkasten::after{content:"";position:absolute;left:13.75%;right:13.75%;top:14.3%;bottom:13.3%;
  border-radius:4px;pointer-events:none;
  background:radial-gradient(90% 70% at 50% 52%,rgba(255,196,110,.16),rgba(255,196,110,0) 70%);}
@keyframes mkastenAuf{from{opacity:0;transform:translateY(16px) scale(.97);}}

/* Das Schild über dem Kasten: geschnitztes Holz, darauf der Schriftzug
   in Gold mit dunkler Kante. Es schwebt kaum merklich. */
.mschild{position:absolute;left:50%;top:-14px;width:108%;margin:0;translate:-50% 0;z-index:3;
  aspect-ratio:720 / 222;display:grid;place-items:center;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.55));}
.mschild img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;}
.mschild span{position:relative;padding-top:.14em;
  font-family:var(--display);font-weight:400;font-size:46px;letter-spacing:.02em;line-height:1;
  color:#ffe08a;
  background:linear-gradient(180deg,#fff4c4 0%,#ffd766 45%,#e7a42c 75%,#b9761c 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 0 #2a1608) drop-shadow(0 2px 0 #2a1608) drop-shadow(0 -1.5px 0 #2a1608)
         drop-shadow(1.5px 0 0 #2a1608) drop-shadow(-1.5px 0 0 #2a1608) drop-shadow(0 4px 3px rgba(0,0,0,.45));}

/* ─── Die Wege im Kasten ────────────────────────────────────────────
   Kissen wie alle Knöpfe des Spiels (css/fenster.css), hier mit einem
   Messingring innen: sie liegen in einem Kasten und sollen dazu
   gehören. „Duell“ ist der Hauptweg: rot, größer, und ein Lichtstreif
   zieht ab und zu darüber. */
.mwahl{position:absolute;left:17%;right:17%;top:27%;bottom:15%;z-index:2;
  display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:18px;}
.mknopf{position:relative;display:grid;place-items:center;height:56px;padding:.2em 12px 0;
  font-family:var(--display);font-size:24px;line-height:1;letter-spacing:.02em;
  color:var(--ink);text-decoration:none;cursor:pointer;
  background:linear-gradient(180deg,#fffaf0 0%,var(--parch-hi) 22%,var(--parch) 68%,var(--parch-sh) 100%);
  border:3px solid var(--ink);border-radius:16px;
  box-shadow:inset 0 0 0 2px #c9984a,inset 0 4px 0 rgba(255,255,255,.7),inset 0 -6px 0 rgba(130,90,40,.35),
             0 5px 0 var(--ink),0 12px 16px -6px rgba(0,0,0,.85);
  transition:transform .14s cubic-bezier(.3,1.6,.5,1),filter .15s ease,box-shadow .14s ease;
  animation:mknopfAuf .45s cubic-bezier(.2,.9,.25,1) both;}
.mknopf:nth-child(2){animation-delay:.06s;}
.mknopf:nth-child(3){animation-delay:.12s;}
.mknopf[hidden]{display:none;}
.mknopf:hover{filter:brightness(1.07);transform:translateY(-2px);}
.mknopf:active{transform:translateY(3px) scale(.95);
  box-shadow:inset 0 0 0 2px #c9984a,inset 0 3px 0 rgba(255,255,255,.6),inset 0 -3px 0 rgba(130,90,40,.35),
             0 1px 0 var(--ink),0 4px 8px -4px rgba(0,0,0,.8);}
.mknopf:focus-visible{outline:3px solid var(--gold-hi);outline-offset:4px;}
.mknopf.rot{height:76px;font-size:34px;border-radius:20px;overflow:hidden;
  color:#fff;text-shadow:0 2px 0 rgba(55,6,4,.9),0 0 2px rgba(55,6,4,.9);
  background:linear-gradient(180deg,#ff7a63 0%,var(--red-hi) 26%,var(--red) 70%,var(--red-dk) 100%);
  box-shadow:inset 0 0 0 3px #e5b04f,inset 0 0 0 5px rgba(90,20,10,.55),inset 0 5px 0 rgba(255,200,180,.5),
             inset 0 -7px 0 rgba(70,8,6,.45),0 6px 0 var(--ink),0 14px 20px -6px rgba(0,0,0,.9);}
.mknopf.rot:active{box-shadow:inset 0 0 0 3px #e5b04f,inset 0 0 0 5px rgba(90,20,10,.55),inset 0 3px 0 rgba(255,200,180,.4),
             inset 0 -3px 0 rgba(70,8,6,.45),0 1px 0 var(--ink),0 4px 8px -4px rgba(0,0,0,.8);}
/* Der Lichtstreif: alle sieben Sekunden einmal quer darüber. */
.mknopf.rot::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-40%;width:28%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,240,210,.45),rgba(255,255,255,0));
  transform:skewX(-18deg) translateX(-120%);animation:mknopfGlanz 7s ease-in-out 1.2s infinite;}
@keyframes mknopfGlanz{0%,82%{transform:skewX(-18deg) translateX(-120%);}100%{transform:skewX(-18deg) translateX(620%);}}
@keyframes mknopfAuf{from{opacity:0;transform:translateY(10px);}}

/* ─── Die Gegenstände in den Ecken ──────────────────────────────────
   Bild über Beschriftung. Beim Überfahren hebt sich der Gegenstand und
   bekommt goldenes Licht; beim Tippen sinkt er ein. */
.mecke{position:absolute;z-index:3;display:flex;align-items:flex-end;gap:6px;}
.mecke.untenlinks{left:18px;bottom:8px;}
.mecke.untenrechts{right:18px;bottom:8px;}
.mecke.obenrechts{right:16px;top:14px;align-items:center;gap:10px;}
.mding{position:relative;width:112px;display:flex;flex-direction:column;align-items:center;gap:0;
  padding:0;margin:0;background:none;border:0;cursor:pointer;text-decoration:none;font:inherit;
  animation:mdingAuf .5s cubic-bezier(.2,.9,.25,1) both;}
.mecke .mding:nth-child(1){animation-delay:.15s;}
.mecke .mding:nth-child(2){animation-delay:.22s;}
.mding img{width:104px;height:92px;object-fit:contain;display:block;transform:rotate(var(--dreh,0deg));
  filter:drop-shadow(0 8px 8px rgba(0,0,0,.6));
  transition:transform .18s cubic-bezier(.3,1.6,.5,1),filter .18s ease;}
.mding .mtitel{position:relative;z-index:1;margin-top:-4px;padding-top:.12em;
  font-family:var(--display);font-size:19px;line-height:1;letter-spacing:.03em;color:var(--parch-hi);
  text-shadow:0 2px 0 var(--ink),0 -1px 0 var(--ink),1px 0 0 var(--ink),-1px 0 0 var(--ink),0 3px 6px rgba(0,0,0,.8);
  transition:color .15s ease;}
.mding:hover img,.mding:focus-visible img{transform:translateY(-5px) scale(1.06) rotate(var(--dreh,0deg));
  filter:drop-shadow(0 12px 10px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(255,214,120,.65));}
.mding:hover .mtitel,.mding:focus-visible .mtitel{color:var(--gold-hi);}
.mding:active img{transform:translateY(1px) scale(.94) rotate(var(--dreh,0deg));transition-duration:.08s;}
/* Das Paket ist das einzige Bild ohne gemalte Tuschekante (es ist das
   Paket aus dem Shop): schmaler, schräg hingelegt, die Kante als Schatten. */
#packWeg{--dreh:-8deg;}
#packWeg img{width:84px;height:84px;margin:4px 0 4px;
  filter:drop-shadow(1.5px 0 0 var(--ink)) drop-shadow(-1.5px 0 0 var(--ink)) drop-shadow(0 1.5px 0 var(--ink))
         drop-shadow(0 -1.5px 0 var(--ink)) drop-shadow(0 8px 8px rgba(0,0,0,.6));}
#packWeg:hover img,#packWeg:focus-visible img{
  filter:drop-shadow(1.5px 0 0 var(--ink)) drop-shadow(-1.5px 0 0 var(--ink)) drop-shadow(0 1.5px 0 var(--ink))
         drop-shadow(0 -1.5px 0 var(--ink)) drop-shadow(0 12px 10px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(255,214,120,.65));}
.mding:focus-visible{outline:none;}
@keyframes mdingAuf{from{opacity:0;transform:translateY(12px);}}

/* Zahlen an den Gegenständen. Rot: es liegt etwas zum Abholen bereit
   (Questbuch, Erfolge, js/menue.js → `punkteZeichnen`). Gold: wie viele
   Pakete warten (`paketeZeichnen`). */
.menuepunkt,.paketzahl{position:absolute;z-index:2;min-width:24px;height:24px;padding:.18em 6px 0;border-radius:999px;
  display:grid;place-items:center;box-sizing:border-box;
  font:400 15px/1 var(--display);text-align:center;color:#fff;
  background:radial-gradient(circle at 40% 30%,#ff6b55,#c62a1d 60%,#8e1a12);
  box-shadow:0 0 0 2.5px var(--ink),0 3px 5px rgba(0,0,0,.6);
  animation:punktHuepft 2.6s ease-in-out infinite;}
.mding .menuepunkt,.mding .paketzahl{right:8px;top:2px;}
.mknopf .menuepunkt{right:-10px;top:-12px;}
.paketzahl{color:var(--ink);background:radial-gradient(circle at 40% 30%,#fff2b0,#f2c14e 60%,#b98120);animation:none;}
.paketzahl[hidden]{display:none;}
@keyframes punktHuepft{0%,80%,100%{transform:translateY(0);}88%{transform:translateY(-4px);}}

/* ─── Oben links: du selbst ─────────────────────────────────────────
   Das Bildnis vom Barbier im runden Rahmen (antippen: Barbier), daneben
   der Name (Konto) und das Gold (Shop). 24 Punkte vom oberen Rand (421):
   bei 12 stieß der goldene Schein beim Antippen an die Bildkante und
   war oben abgeschnitten (die Bühne beginnt am Rand des Schirms). */
.mheld{position:absolute;left:18px;top:24px;z-index:3;display:flex;align-items:center;gap:8px;
  animation:mdingAuf .5s cubic-bezier(.2,.9,.25,1) .1s both;}
.mbildnis{position:relative;width:92px;height:95px;padding:0;border:0;background:none;cursor:pointer;flex:0 0 auto;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.6));transition:transform .18s cubic-bezier(.3,1.6,.5,1),filter .18s ease;}
.mbildnis canvas{position:absolute;left:17%;top:18.5%;width:66%;height:63.5%;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,#f6efd8,#d9c391);}
.mbildnis .mrahmen{position:absolute;inset:0;width:100%;height:100%;display:block;}
.mbildnis:hover,.mbildnis:focus-visible{transform:translateY(-3px) scale(1.05);outline:none;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.55)) drop-shadow(0 0 9px rgba(255,214,120,.6));}
.mbildnis:active{transform:scale(.95);}
.mheldzeile{display:flex;flex-direction:column;align-items:flex-start;gap:4px;}
.mname{padding:.14em 2px 0;margin:0;border:0;background:none;cursor:pointer;max-width:180px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-family:var(--display);font-size:22px;line-height:1.05;color:var(--parch-hi);
  text-shadow:0 2px 0 var(--ink),0 -1px 0 var(--ink),1px 0 0 var(--ink),-1px 0 0 var(--ink),0 3px 6px rgba(0,0,0,.8);}
.mname:hover,.mname:focus-visible{color:var(--gold-hi);outline:none;}
.mgold{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px 0 5px;margin:0;cursor:pointer;
  border-radius:999px;border:2px solid #7a5a2a;background:linear-gradient(180deg,rgba(32,22,13,.92),rgba(18,12,7,.92));
  box-shadow:inset 0 1px 0 rgba(255,220,150,.18),0 3px 6px rgba(0,0,0,.5);transition:border-color .15s ease;}
.mgold img{width:22px;height:22px;display:block;}
.mgold b{padding-top:.14em;font:400 19px/1 var(--display);color:var(--gold-hi);font-variant-numeric:tabular-nums;}
.mgold:hover,.mgold:focus-visible{border-color:var(--gold-hi);outline:none;}
.mwaehrungen{display:flex;gap:6px;align-items:center;}
.mkristall{border-color:#2f5f8a;}
.mkristall img{width:18px;height:24px;object-fit:contain;}
.mkristall b{color:#8fe2ff;}
.mkristall:hover,.mkristall:focus-visible{border-color:#8fe2ff;}

/* Der Gast-Hinweis (seit 372): ein Zettel unter dem Bildnis. */
.gastwink{position:absolute;left:20px;top:124px;z-index:3;width:212px;margin:0;padding:6px 10px 5px;cursor:pointer;
  text-align:left;font:inherit;font-size:11.5px;line-height:1.35;color:var(--parch);
  background:rgba(20,14,8,.82);border:1px solid rgba(224,179,82,.45);border-radius:8px;
  box-shadow:0 4px 10px rgba(0,0,0,.45);transition:border-color .15s ease,color .15s ease;}
.gastwink:hover{border-color:var(--gold-hi);color:var(--parch-hi);}
.gastwink[hidden]{display:none;}

/* ─── Oben rechts: Ton und Einstellungen ────────────────────────────
   Dieselben Eichenmedaillen wie am Duelltisch (assets/tisch/). */
.mmedaille{width:54px;height:54px;padding:0;margin:0;border:0;background:none;cursor:pointer;position:relative;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.6));transition:transform .18s cubic-bezier(.3,1.6,.5,1),filter .18s ease;}
.mmedaille img{width:100%;height:100%;display:block;}
.mmedaille:hover,.mmedaille:focus-visible{transform:translateY(-2px) scale(1.07);outline:none;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.55)) drop-shadow(0 0 8px rgba(255,214,120,.55));}
.mmedaille:active{transform:scale(.92);}
.mmedaille[data-zu="optionen"]:hover img{transform:rotate(40deg);transition:transform .4s ease;}
/* Stumm: blasser, mit rotem Strich. Solange noch nie Ton war, lockt er
   sanft (js/menue.js setzt `lockt`). */
.tonweg.stumm img{filter:grayscale(.55) brightness(.82);}
.tonweg.stumm::after{content:"";position:absolute;left:12%;right:12%;top:50%;height:5px;margin-top:-2.5px;border-radius:3px;
  background:#c62a1d;box-shadow:0 0 0 2px var(--ink);transform:rotate(-40deg);}
.tonweg.stumm.lockt{animation:tonLockt 2.4s ease-in-out infinite;}
@keyframes tonLockt{50%{transform:scale(1.08);}}

/* ─── Fuß ─────────────────────────────────────────────────────────── */
.mfuss{position:absolute;left:50%;bottom:4px;translate:-50% 0;z-index:3;display:flex;gap:14px;align-items:center;white-space:nowrap;}
.mfuss .rechtsweg,.mfuss .werkstattweg{padding:2px;margin:0;border:0;background:none;cursor:pointer;font:inherit;
  font-size:11px;letter-spacing:.02em;text-decoration:none;color:var(--parch-hi);opacity:.45;transition:opacity .2s ease;}
.mfuss .werkstattweg{color:#f0a283;opacity:.75;}
.mfuss .rechtsweg:hover,.mfuss .werkstattweg:hover,
.mfuss .rechtsweg:focus-visible,.mfuss .werkstattweg:focus-visible{opacity:1;text-decoration:underline;text-underline-offset:3px;outline:none;}

/* ─── Telefon quer (Bühne um 0,8 verkleinert) ───────────────────────
   Schrift und Ziele wachsen, damit sie auf dem Gerät so groß bleiben
   wie am Rechner. */
@media (max-height:560px){
  .mding .mtitel{font-size:22px;}
  .mname{font-size:25px;}
  .mgold b{font-size:21px;}
  .mknopf{font-size:27px;}
  .mknopf.rot{font-size:37px;}
  .mfuss .rechtsweg,.mfuss .werkstattweg{font-size:13px;}
  .gastwink{font-size:13px;width:230px;}
}

@media (prefers-reduced-motion:reduce){
  .mkasten,.mknopf,.mding,.mheld{animation:none;}
  .mknopf.rot::after,.menuepunkt,.tonweg.stumm.lockt{animation:none;}
}

/* Fenster über dem Menü (Einstellungen, Konto, Impressum) dunkeln den
   ganzen Schirm ab, nicht nur die Bühne: der Tisch reicht ja auch über
   sie hinaus. Der Schatten setzt den Schleier nach außen fort. */
.startseite .schleier.an{box-shadow:0 0 0 200vmax rgba(13,10,7,.92);border-radius:0;}