/* ══════════════════════════════════════════════════════════════════
   tafel.css — das eine Fenster über dem Hauptmenü (js/tafelfeld.js)

   Seit 416 sieht jedes Fenster im Menü gleich aus und folgt derselben
   Logik (SPIEL.md → 5.1). Zwei Größen, sonst nichts:

     groß   Shop, Questbuch, Erfolge, Barbier, Duell, Sammlung,
            Rechtliches: immer dieselbe Fläche, 860 × 470 **Bühnenpunkte**
            (`/ var(--fz)`), also immer derselbe Teil des Menüs, wie groß
            der Schirm auch ist. Inhalt aus der Bühne hat darin stets rund
            410 Punkte Höhe. Telefon: der ganze Schirm bis auf einen Rand.
     klein  Einstellungen, Konto, Gold aufladen, Kaufen, Erklärungen,
            Nachfragen: 440 breit, so hoch wie der Inhalt

   Rahmen     dunkles Holz, Tuschekante 3, innen eine Messinglinie,
              außen ein Messingring 3, Radius 18 (wie der Spielkasten)
   Kopf       Titel mittig in der Anzeigeschrift mit Goldverlauf (wie das
              Schild), 32 (klein 26), darunter eine Haarlinie; links der
              Goldstand oder der Pfeil zurück
   Kreuz      rot, 46, hängt oben rechts aus der Ecke
   „?“        rund, 40, im Kopf rechts neben dem Kreuz (verdeckt nie Inhalt)
   Knöpfe     Hauptaktion rot (`.knopf.rot`), Nebenaktion creme (`.knopf`)

   Bildschirmpunkte statt Bühnenpunkte
     Die Fläche liegt in der gezoomten Bühne, nimmt deren Maßstab aber
     heraus (`--fz`, js/buehne.js) und deckt den ganzen Schirm. Eine
     Schrift von 15 px ist auf dem Telefon 15 px hoch. Inhalt aus der
     Bühne (Laden, Deckwahl) steckt in `.buehnenmass` und bekommt den
     Maßstab der Bühne zurück.
   ══════════════════════════════════════════════════════════════════ */

/* ─── Fläche und Schleier ─────────────────────────────────────────── */
.fensterflaeche{position:absolute;left:var(--fl,0px);top:var(--ft,0px);width:var(--fw,100%);height:var(--fh,100%);
  zoom:var(--fz,1);box-sizing:border-box;display:grid;place-items:center;padding:12px;
  background:rgba(8,6,4,.72);animation:fensterSchleier .2s ease-out;}
.fensterflaeche + .fensterflaeche{background:rgba(8,6,4,.55);}
@keyframes fensterSchleier{from{opacity:0;}}

/* ─── Das Fenster ─────────────────────────────────────────────────── */
.fenster{--fensterh:min(calc(470px / var(--fz,1)), calc(var(--fh,100vh) - 24px));
  position:relative;box-sizing:border-box;display:flex;flex-direction:column;min-height:0;
  border-radius:18px;color:#f3e7c8;
  background:radial-gradient(120% 60% at 50% 0%,#3b2a18 0%,#22170d 55%,#170f08 100%);
  border:3px solid #0d0905;
  box-shadow:inset 0 0 0 2px rgba(201,152,74,.55),inset 0 0 40px rgba(0,0,0,.55),
    0 0 0 3px #6d4f27,0 34px 70px -18px rgba(0,0,0,.95);
  animation:fensterAuf .26s cubic-bezier(.2,.8,.2,1);}
@keyframes fensterAuf{from{opacity:0;transform:translateY(14px) scale(.96);}}
.fenster.gross{width:min(calc(860px / var(--fz,1)), calc(var(--fw,100vw) - 32px));height:var(--fensterh);}
.fenster.klein{width:min(440px, calc(var(--fw,100vw) - 32px));max-height:var(--fensterh);}

/* ─── Kopf ────────────────────────────────────────────────────────── */
.fensterkopf{position:relative;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  min-height:60px;padding:12px 130px 8px;box-sizing:border-box;}
.fensterkopf::after{content:"";position:absolute;left:24px;right:24px;bottom:0;height:2px;
  background:linear-gradient(90deg,rgba(232,190,110,0),rgba(232,190,110,.55) 20%,rgba(232,190,110,.55) 80%,rgba(232,190,110,0));}
.fenstertitel{margin:0;padding-top:.14em;text-align:center;font-family:var(--display);font-weight:400;font-size:32px;line-height:1.05;
  letter-spacing:.02em;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 2px 0 #2a1608) drop-shadow(0 -1px 0 #2a1608) drop-shadow(1px 0 0 #2a1608) drop-shadow(-1px 0 0 #2a1608);}
.fensterlinks{position:absolute;left:20px;top:50%;translate:0 -46%;display:flex;align-items:center;gap:8px;}
.fensterlinks:empty{display:none;}
.fenster.klein .fensterkopf{min-height:52px;padding-inline:56px;}
.fenster.klein .fenstertitel{font-size:26px;}

/* ─── Leib ────────────────────────────────────────────────────────── */
.fensterleib{position:relative;flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;
  padding:16px 24px 22px;scrollbar-color:rgba(232,190,110,.45) transparent;}
.fenster.klein .fensterleib{padding:14px 26px 24px;}
/* Inhalt in Bühnenpunkten (der Laden, die Deckwahl): füllt den Leib und
   bekommt den Maßstab der Bühne zurück. */
.fensterleib.mitbuehne{padding:0;overflow:hidden;}
.fenster.klein .fensterleib.mitbuehne{display:grid;}
.buehnenmass{position:absolute;inset:0;zoom:calc(1 / var(--fz,1));}
.fenster.klein .buehnenmass{position:relative;inset:auto;}

/* ─── Kreuz, Fragezeichen, Pfeil zurück ───────────────────────────── */
.fensterzu{position:absolute;top:-16px;right:-16px;z-index:7;padding:0;border:0;background:none;cursor:pointer;
  transition:transform .12s cubic-bezier(.3,1.6,.5,1);}
.fensterzu img{height:46px;width:auto;display:block;filter:drop-shadow(0 3px 4px rgba(0,0,0,.6));}
.fensterzu:hover{transform:scale(1.08);}
.fensterzu:active{transform:scale(.9);}
.fensterfrage,.fensterpfeil{width:40px;height:40px;border-radius:50%;cursor:pointer;padding:0 0 .1em;flex:0 0 auto;
  font-family:var(--display);font-size:22px;line-height:1;color:#f3e7c8;display:grid;place-items:center;
  background:radial-gradient(circle at 36% 28%,#5a4426,#33261380 70%,#241a0e);border:2px solid rgba(238,220,171,.45);
  box-shadow:0 2px 6px rgba(0,0,0,.5);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;}
.fensterfrage{position:absolute;right:44px;top:10px;z-index:6;}
.fensterpfeil svg{width:20px;height:20px;}
.fensterfrage:hover,.fensterpfeil:hover{transform:translateY(-2px);border-color:var(--gold-hi,#f7d878);box-shadow:0 0 14px rgba(242,193,78,.45);}
.fensterfrage:focus-visible,.fensterpfeil:focus-visible,.fensterzu:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px;}

/* ─── Goldstand im Kopf: derselbe wie im Menü ──────────────────────
   Münzstapel, Zahl; im Shop dahinter ein „+“ zum Aufladen. */
.goldchip{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 12px 0 6px;border-radius:999px;box-sizing:border-box;
  background:rgba(10,7,4,.6);border:1.5px solid rgba(232,190,110,.5);box-shadow:inset 0 1px 0 rgba(255,230,170,.12);}
.goldchip img{width:28px;height:28px;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.6));}
.goldchip b{font-family:var(--display);font-weight:400;font-size:19px;line-height:1;padding-top:.15em;color:var(--gold-hi);
  font-variant-numeric:tabular-nums;}
/* „+ Gold aufladen“ als goldene Pille am Goldstand (423, Max: das Plus
   allein war zu unscheinbar). Das Plus sitzt als Scheibe vorn. */
.goldchip .goldplus{height:26px;margin:0 -7px 0 3px;padding:0 10px 0 2px;border-radius:999px;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--display);font-size:13px;line-height:1;padding-top:.1em;color:#2b1d10;white-space:nowrap;
  background:linear-gradient(180deg,#ffe9a6,#e2ac3c 70%,#c08a2a);border:2px solid #2a1608;
  box-shadow:0 2px 0 #2a1608;}
.goldchip .goldplus i{width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font-style:normal;
  font-size:17px;padding-bottom:.1em;color:#fff2c4;background:radial-gradient(circle at 40% 30%,#c8902e,#7a5214);
  border:1.5px solid #2a1608;}
.goldchip .goldplus:hover{filter:brightness(1.08);}
.goldchip .goldplus:active{transform:translateY(2px);box-shadow:none;}
.goldchip.steigt b{color:#fff2b8;text-shadow:0 0 12px rgba(255,205,110,.85);}
.goldchip.fehlt img,.goldchip.fehlt .goldplus{animation:goldFehlt .42s ease-in-out 3;}
@keyframes goldFehlt{0%,100%{transform:scale(1);opacity:1;}45%{transform:scale(1.28);opacity:.35;}}
.fensterzahl{font-family:var(--display);font-size:19px;color:var(--tan);padding-top:.15em;}
.fensterzahl b{font-weight:400;color:var(--gold-hi);margin-right:4px;}

/* ─── Knöpfe und Text im kleinen Fenster ─────────────────────────── */
/* Inhalte, die anderswo eigene Kästen tragen (Einstellungen, Konto),
   verlieren sie hier: das Fenster ist der Kasten. */
.fenster .optionsfeld{background:none;border:0;box-shadow:none;border-radius:0;padding:0;min-width:0;width:100%;align-items:stretch;}
.fenster .kontofeld{max-width:none;}
.fensterknoepfe{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:12px;margin-top:18px;}
.fensterknoepfe .knopf{min-width:150px;min-height:46px;}
.fenstertext{margin:0;text-align:center;font-size:15px;line-height:1.5;color:#f3e7c8;}
.fenstertext b{color:var(--gold-hi);}
/* Erklärungen hinter dem „?“: Rubriken in Kapitälchen, darunter Text. */
.fensterhilfe{display:flex;flex-direction:column;gap:14px;font-size:14px;line-height:1.5;color:#e9dcbd;}
.fensterhilfe section{display:flex;flex-direction:column;gap:5px;}
.fensterhilfe h4{margin:0;font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;color:rgba(238,220,171,.55);}
.fensterhilfe p{margin:0;}
.fensterhilfe p b{color:#fff3d4;font-weight:700;}
.fensterhilfe .lohnzeichen{width:1.2em;height:1.2em;object-fit:contain;vertical-align:-.25em;}

/* ─── Telefon quer und kleine Schirme ────────────────────────────── */
@media (max-height:560px), (max-width:640px){
  .fensterflaeche{padding:6px;}
  .fenster{--fensterh:calc(var(--fh,100vh) - 12px);}
  .fenster.gross{width:calc(var(--fw,100vw) - 12px);}
  .fensterkopf{min-height:44px;padding:6px 110px 5px;}
  .fenstertitel{font-size:24px;}
  .fenster.klein .fenstertitel{font-size:22px;}
  .fenster.klein .fensterkopf{min-height:42px;}
  .fensterlinks{left:12px;}
  .fensterleib{padding:10px 14px 14px;}
  .fenster.klein .fensterleib{padding:10px 18px 16px;}
  .fensterzu{top:5px;right:6px;}
  .fensterzu img{height:34px;}
  .fensterfrage,.fensterpfeil{width:34px;height:34px;font-size:19px;}
  .fensterfrage{right:48px;top:5px;}
  .goldchip{height:30px;}
  .goldchip img{width:22px;height:22px;}
  .goldchip b{font-size:16px;}
}
@media (prefers-reduced-motion:reduce){ .fensterflaeche,.fenster{animation:none;} }

/* ═══ Der Barbier (groß): Spiegel links, Werkbank rechts ═══════════ */
.fenster.barbier .fensterleib{padding:0;overflow:hidden;display:grid;grid-template-columns:34% 1fr;}
.barbierspiegel{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;
  container-type:size;border-right:2px solid rgba(201,152,74,.4);
  background:radial-gradient(circle at 50% 42%,rgba(255,220,150,.12),rgba(0,0,0,0) 65%);}
/* Der Spiegel behält sein Maß (600 : 720), wie hoch oder breit die
   Spalte auch ist (Containermaße `cqw`/`cqh`). */
.spiegel{position:relative;flex:0 0 auto;width:min(calc(100cqw - 40px), calc((100cqh - 70px) * 600 / 720));aspect-ratio:600 / 720;
  border:7px solid #d9a441;outline:3px solid #18130e;border-radius:46% 46% 18px 18px / 30% 30% 18px 18px;
  box-shadow:inset 0 0 0 3px #9c7020,0 6px 0 rgba(24,19,14,.45);
  background:radial-gradient(circle at 50% 36%,#f6fbf8,#b9d6c8 78%);overflow:hidden;box-sizing:border-box;}
.spiegel canvas{display:block;width:100%;height:100%;object-fit:contain;}
/* Das Messingschild unter dem Spiegel („Mensch · Mann“). */
.spiegelband{position:relative;z-index:2;margin-top:-12px;padding:3px 14px 1px;border-radius:999px;
  border:2px solid #18130e;background:linear-gradient(180deg,#f2c45a,#d9a441);box-shadow:0 3px 0 rgba(24,19,14,.45);
  font-family:var(--display);font-weight:400;font-size:15px;line-height:1.4;color:#3b2410;white-space:nowrap;}
.barbierwerk{display:flex;flex-direction:column;min-height:0;}
.barbierbank{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;justify-content:safe center;
  gap:8px;padding:12px 22px 6px;container-type:inline-size;}
.barbierleer,.barbiergrund{margin:0;text-align:center;font-size:14px;color:var(--tan);}
.barbiergrund{color:#ff9b8a;}
.barbierfuss{flex:0 0 auto;display:flex;justify-content:center;gap:12px;padding:6px 22px 14px;}
.barbierfuss .knopf{min-width:150px;min-height:46px;}

.rassenwahl{display:grid;grid-template-columns:repeat(6,minmax(0,1fr)) auto;gap:6px;align-items:stretch;}
.rasse,.geschlechtwahl button,.regel{background:rgba(20,14,8,.5);border:2px solid rgba(243,231,200,.2);color:#f3e7c8;}
.rasse{display:flex;flex-direction:column;align-items:center;gap:1px;padding:3px 2px 3px;cursor:pointer;border-radius:8px;
  font:inherit;font-size:11.5px;font-weight:700;transition:border-color .15s,background .15s;}
.rasse img{width:auto;height:46px;aspect-ratio:1;object-fit:cover;object-position:50% 6%;border-radius:6px;background:#1d2a24;}
.rasse[aria-pressed="true"],.geschlechtwahl button[aria-pressed="true"]{border-color:var(--gold-hi);background:rgba(247,216,120,.14);
  box-shadow:0 0 0 2px rgba(247,216,120,.25);}
.geschlechtwahl{display:flex;flex-direction:column;gap:6px;}
.geschlechtwahl button{flex:1;min-width:58px;padding:0 8px;cursor:pointer;border-radius:8px;font:inherit;font-size:13px;font-weight:700;}
.barbierregler{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;}
.regel{display:grid;grid-template-columns:36px 1fr 36px;align-items:center;gap:4px;padding:2px;border-radius:10px;}
.regelpfeil{height:34px;padding:0 0 .12em;cursor:pointer;border-radius:8px;border:2px solid #18130e;background:#d9a441;color:#18130e;
  font-family:var(--display);font-size:26px;line-height:1;box-shadow:0 2px 0 #18130e;}
.regelpfeil:active{transform:translateY(2px);box-shadow:none;}
.regelwert{display:flex;flex-direction:column;align-items:center;line-height:1.1;min-width:0;}
.regelwert small{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--tan);}
.regelwert b{display:inline-flex;align-items:center;gap:5px;font-family:var(--display);font-weight:400;font-size:16px;color:var(--gold-hi);
  padding-top:.12em;white-space:nowrap;font-variant-numeric:tabular-nums;}
.farbtupfer{width:13px;height:13px;border-radius:50%;border:2px solid #18130e;flex:0 0 auto;}
.farbtupfer.leer{background:repeating-linear-gradient(45deg,#fff 0 3px,#ccc 3px 6px)!important;}
/* Zubehör: an oder aus. */
.zubehoerwahl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.zubehoerwahl small{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tan);margin-right:2px;}
.zubehoerwahl button{min-height:32px;padding:0 14px;cursor:pointer;border-radius:999px;font:inherit;font-size:13px;font-weight:700;
  background:rgba(20,14,8,.5);border:1px solid rgba(243,231,200,.22);color:#f3e7c8;}
.zubehoerwahl button[aria-pressed="true"]{border-color:var(--gold-hi);background:rgba(247,216,120,.18);color:var(--gold-hi);
  box-shadow:0 0 0 2px rgba(247,216,120,.25);}
/* Noch nicht gekauft (424): gedämpft, mit Schloss und Preis; ein Tipp
   führt in den Zubehörladen. */
.zubehoerwahl button.gesperrt{opacity:.6;border-style:dashed;}
.zubehoerwahl button.gesperrt i:not(.farbtupfer){font-style:normal;font-weight:400;font-size:11px;margin-left:4px;color:var(--tan);}
.zubehoerwahl button .farbtupfer{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px;vertical-align:-1px;border:1px solid rgba(0,0,0,.5);}
.zubehoerwahl.gruende{margin-top:6px;}
/* Schmale Werkbank: Mann/Frau in eine eigene Zeile, ganz schmal die
   Rassen in zwei Reihen und die Zeilen untereinander. */
@container (max-width:380px){
  .rassenwahl{grid-template-columns:repeat(6,minmax(0,1fr));}
  .geschlechtwahl{grid-column:1 / -1;flex-direction:row;}
  .geschlechtwahl button{min-height:32px;}
}
@container (max-width:300px){
  .rassenwahl{grid-template-columns:repeat(3,minmax(0,1fr));}
  .barbierregler{grid-template-columns:1fr;}
}
/* Telefon quer: alles etwas flacher, damit die Werkbank ohne Rollen passt. */
@media (max-height:560px){
  .barbierbank{gap:6px;padding:10px 14px 6px;}
  .barbierfuss{padding:6px 14px 10px;}
  .barbierfuss .knopf{min-height:38px;min-width:120px;}
  .rassenwahl{gap:4px;}
  .rasse{font-size:10.5px;}
  .rasse img{width:auto;height:36px;}
  .geschlechtwahl{gap:4px;}
  .geschlechtwahl button{min-width:44px;font-size:11px;padding:0 4px;}
  .barbierregler{gap:4px;}
  .regel{grid-template-columns:30px 1fr 30px;padding:1px;}
  .regelpfeil{height:26px;font-size:18px;}
  .regelwert small{font-size:9px;}
  .regelwert b{font-size:14px;}
  .zubehoerwahl small{display:none;}
  .zubehoerwahl button{min-height:26px;font-size:12px;padding:0 11px;}
  .spiegelband{font-size:12px;}
}
@media (max-height:380px){
  .rasse img{height:30px;}
  .regelpfeil{height:23px;font-size:16px;}
}