/* =============================================================================
   Kniffel — Erscheinungsbild "Salon"  (zweiter Satz Regeln, zuschaltbar)

   Die gewachsene Optik in styles.css bleibt unangetastet und ist weiterhin der
   Standard. Alles hier hängt an html[data-optik="salon"] und greift erst, wenn
   im Menü umgeschaltet wurde. Zurück geht es mit demselben Schalter — es muss
   nichts zurückgebaut und nichts neu ausgeliefert werden.

   Material statt Farbfläche: Filz, Maserung und Papierkorn sind gerechnetes
   Rauschen (feTurbulence), eingebettet als data:-URI. Deshalb kommt diese Datei
   ohne jede Änderung an index.html aus und lädt nichts nach — die App muss
   offline starten.

   Licht kommt IMMER von oben links. Wer hier etwas ergänzt, hält sich daran:
   Glanz auf dem Würfel, Lichtkante am Becher und der helle Fleck auf dem Tisch
   müssen zusammenpassen, sonst zerfällt die Räumlichkeit.
   ========================================================================== */

/* Handschrift für die Einträge im Block. Liegt lokal bei (SIL Open Font
   License), weil ein CDN offline nicht zur Verfügung steht. Wird nur geladen,
   wenn dieses Erscheinungsbild aktiv ist — sonst benutzt sie niemand. */
@font-face {
  font-family: "Caveat";
  src: url("caveat.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

html[data-optik="salon"] {
  --tex-filz:   url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='260'%20height='260'%3E%20%3Cfilter%20id='f'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.5%200.7'%20numOctaves='5'%20seed='3'/%3E%20%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%20%3CfeComponentTransfer%3E%3CfeFuncA%20type='linear'%20slope='0.5'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%20%3Crect%20width='260'%20height='260'%20filter='url(%23f)'/%3E%3C/svg%3E");
  --tex-holz:   url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='900'%20height='520'%3E%20%3Cfilter%20id='h'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.004%200.055'%20numOctaves='5'%20seed='7'%20result='a'/%3E%20%3CfeTurbulence%20type='turbulence'%20baseFrequency='0.09%200.03'%20numOctaves='3'%20seed='12'%20result='w'/%3E%20%3CfeDisplacementMap%20in='a'%20in2='w'%20scale='14'%20xChannelSelector='R'%20yChannelSelector='G'%20result='v'/%3E%20%3CfeColorMatrix%20in='v'%20type='saturate'%20values='0'%20result='g'/%3E%20%3CfeComponentTransfer%20in='g'%3E%3CfeFuncA%20type='table'%20tableValues='0%20.15%20.55%20.3%20.8%20.35%201'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%20%3Crect%20width='900'%20height='520'%20filter='url(%23h)'/%3E%3C/svg%3E");
  --tex-papier: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='240'%3E%20%3Cfilter%20id='p'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='1.1'%20numOctaves='4'%20seed='31'/%3E%20%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%20%3CfeComponentTransfer%3E%3CfeFuncA%20type='linear'%20slope='0.13'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%20%3Crect%20width='240'%20height='240'%20filter='url(%23p)'/%3E%3C/svg%3E");

  /* Wärmer und tiefer als das Original — Nussbaum statt Kiefer */
  --holz:        #7d5229;
  --holz-tief:   #38220e;
  --filz:        #2c5747;
  --filz-tief:   #1b3a2f;
  --papier:      #f7f0df;
  --papier-warm: #ece0c4;
  --papier-linie:#dccfb1;
  --tinte:       #33260f;
  --tinte-schwach:#8b7950;
  --gold:        #b9924e;
  --gold-hell:   #f2e3c2;
  --rotstift:    #ad2b21;
  --wuerfel:     #f4ecdc;

  --schrift-hand: "Caveat", ui-serif, Georgia, serif;
}

/* ------------------------------------------------------------------ Tisch */
html[data-optik="salon"] body {
  background-color: #7d5229;
  background-image:
    var(--tex-holz),
    radial-gradient(ellipse at 26% 10%, #a5723f 0%, #7d5229 40%, #573212 76%, #38220e 100%);
  background-blend-mode: soft-light, normal;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
}

/* --------------------------------------------------------------- Spielband
   Holzleiste statt Farbfläche. Die Spielerfarbe geht nicht verloren — sie wird
   zur Kante darunter, damit auf einen Blick klar bleibt, wer dran ist. */
html[data-optik="salon"] .spielband {
  background: linear-gradient(180deg, #4b2f16 0%, #3a2410 100%);
  border-bottom: 3px solid var(--spielerfarbe, #b9924e);
  box-shadow: 0 5px 18px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.14);
}
html[data-optik="salon"] .amzug {
  color: #f2e3c2;
  text-shadow: 0 2px 1px rgba(0,0,0,.65), 0 -1px 0 rgba(255,255,255,.18);
}
html[data-optik="salon"] .amzug::before { color: #b9924e; }
html[data-optik="salon"] .bandrunde { color: rgba(238,222,190,.62); }
html[data-optik="salon"] .bandmenue {
  background: linear-gradient(180deg, #7d5a2c, #553a17);
  border: 1px solid #2b1a08;
  color: #f2e3c2;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 2px 5px rgba(0,0,0,.45);
}

/* ---------------------------------------------------------- Würfelbereich */
html[data-optik="salon"] .wuerfelbereich {
  background: rgba(0,0,0,.14);
  border-top-color: rgba(0,0,0,.5);
  box-shadow: 0 -4px 14px rgba(0,0,0,.35);
}
html[data-optik="salon"] .wurfhinweis { color: rgba(240,228,200,.78); }
html[data-optik="salon"] .wurfhinweis .betont { color: #eccb8b; }
html[data-optik="salon"] .wurfhinweis.bestaetigen {
  background: linear-gradient(180deg, #e8c98a, #d4b478);
  color: var(--tinte);
}

/* Halteleiste: eine in das Holz gefräste Rinne */
html[data-optik="salon"] .halteleiste {
  background: linear-gradient(180deg, #2a1a0b, #3b2712);
  box-shadow: inset 0 5px 12px rgba(0,0,0,.72), inset 0 -1px 0 rgba(255,255,255,.09);
  border-radius: 7px;
}
html[data-optik="salon"] .haltehinweis { color: rgba(240,230,205,.42); }

/* Filz: eingelassen, mit Faser */
html[data-optik="salon"] .wurfflaeche {
  background-color: #2c5747;
  background-image:
    var(--tex-filz),
    radial-gradient(ellipse at 32% 22%, #40745f 0%, #2c5747 52%, #1b3a2f 100%);
  background-blend-mode: overlay, normal;
  background-size: 260px 260px, cover;
  box-shadow:
    inset 0 0 0 3px #2b1a0a,
    inset 0 8px 22px rgba(0,0,0,.55),
    0 1px 0 rgba(255,255,255,.1);
}
html[data-optik="salon"] .tischhinweis { color: rgba(240,230,205,.4); }

/* ----------------------------------------------------------------- Würfel
   Ein Würfel hat Höhe. Die harte Kante unten ist die Vorderfläche, darunter
   liegen zwei Schatten: ein enger an der Auflage und ein weiter darunter.
   Nur einer von beiden sieht immer nach Aufkleber aus. */
html[data-optik="salon"] .wuerfel {
  background: linear-gradient(148deg, #fffdf8 0%, #f4ecdc 52%, #dccdb3 100%);
  border: 0;
  border-radius: 19%;
  box-shadow:
    0 calc(var(--kante) * .085) 0 #b39d7c,
    0 calc(var(--kante) * .11)  calc(var(--kante) * .05) rgba(0,0,0,.45),
    0 calc(var(--kante) * .19)  calc(var(--kante) * .26) rgba(0,0,0,.38),
    inset 0 2px 0 rgba(255,255,255,.9),
    inset 0 -2px 0 rgba(150,128,94,.45);
}
html[data-optik="salon"] .streufeld .wuerfel {
  box-shadow:
    0 calc(var(--kante) * .085) 0 #b39d7c,
    0 calc(var(--kante) * .12)  calc(var(--kante) * .06) rgba(0,0,0,.5),
    0 calc(var(--kante) * .22)  calc(var(--kante) * .3)  rgba(0,0,0,.45),
    inset 0 2px 0 rgba(255,255,255,.9),
    inset 0 -2px 0 rgba(150,128,94,.45);
}
/* Behalten: der Messingring sitzt auf dem Würfel, die Höhe bleibt */
html[data-optik="salon"] .wuerfel.gehalten {
  box-shadow:
    0 0 0 3px #b9924e,
    0 calc(var(--kante) * .085) 0 #b39d7c,
    0 calc(var(--kante) * .12)  calc(var(--kante) * .06) rgba(0,0,0,.5),
    inset 0 2px 0 rgba(255,255,255,.9);
}
/* Augen als Vertiefung: dunkler Grund, oben Schatten, unten der beleuchtete
   Rand der Mulde. Ohne den unteren Lichtsaum bleiben es aufgemalte Punkte. */
html[data-optik="salon"] .wuerfel .augen i {
  background: radial-gradient(circle at 50% 66%, #0d0906 0%, #2a2119 74%);
  box-shadow:
    inset 0 1.5px 2.5px rgba(0,0,0,.85),
    0 1px 0 rgba(255,255,255,.6);
}

/* ------------------------------------------------------------------ Becher */
html[data-optik="salon"] .becherleib {
  background: radial-gradient(circle at 34% 26%, #c48f52 0%, #8a5a2c 46%, #4a2a12 84%, #3d2210 100%);
  box-shadow:
    inset 0 3px 8px rgba(255,255,255,.3),
    inset 0 -9px 18px rgba(0,0,0,.5),
    0 14px 30px rgba(0,0,0,.55);
}
/* Die Öffnung: Grund im Schwarz, an der unteren Innenwand fängt das Licht */
html[data-optik="salon"] .becherleib::before {
  inset: 11%;
  background: radial-gradient(circle at 50% 38%, #1a0e04 0%, #000000 64%);
  box-shadow:
    inset 0 9px 18px rgba(0,0,0,.9),
    inset -7px -10px 22px rgba(196,143,82,.34),
    0 0 0 2px rgba(0,0,0,.5),
    0 1px 0 rgba(255,255,255,.22);
}
/* Naht im Lederwulst */
html[data-optik="salon"] .becherleib::after {
  content: "";
  position: absolute; inset: 5.5%;
  border-radius: 50%;
  border: 2px dashed rgba(61,34,16,.65);
  pointer-events: none;
}
html[data-optik="salon"] .becherwort {
  z-index: 1;
  color: #dcae6c;
  text-shadow: 0 1px 3px rgba(0,0,0,.95);
}

/* -------------------------------------------------------------- Blockblatt
   Kein Kasten mit Rahmen mehr, sondern ein Blatt, das auf dem Tisch liegt. */
html[data-optik="salon"] .blockformular {
  background-color: #f7f0df;
  background-image:
    var(--tex-papier),
    linear-gradient(158deg, #faf4e6 0%, #f3ebd8 55%, #e9dfc6 100%);
  background-blend-mode: multiply, normal;
  background-size: 240px 240px, cover;
  border: 0;
  border-radius: 3px;
  box-shadow:
    0 18px 34px rgba(0,0,0,.48),
    0 3px 7px rgba(0,0,0,.3),
    inset 0 1px 0 rgba(255,255,255,.85);
}
html[data-optik="salon"] .zelle {
  border-bottom: 1px solid #dccfb1;
  border-right: 1px solid rgba(220,207,177,.45);
}
html[data-optik="salon"] .zelle.label {
  background: rgba(160,138,88,.11);
  border-right: 2px solid #cfc0a0;
}
html[data-optik="salon"] .zelle.kopf {
  background: linear-gradient(180deg, #5c4522, #3f2e13);
  color: #f2e3c2;
  border-bottom: 2px solid #6f5730;
  text-shadow: 0 1px 1px rgba(0,0,0,.6);
}
html[data-optik="salon"] .zelle.kopf.dran {
  background: linear-gradient(180deg, #f7e7c3, #ecd9ac);
  color: var(--tinte);
  text-shadow: none;
  box-shadow: inset 0 -3px 0 #b9924e;
}
html[data-optik="salon"] .zelle.summe { background: rgba(160,138,88,.15); }
html[data-optik="salon"] .zelle.gesamt,
html[data-optik="salon"] .zelle.gesamt.label {
  background: linear-gradient(180deg, #4b3819, #33240e);
  color: #f2e3c2;
}
html[data-optik="salon"] .zelle.blockstart { border-top: 2px solid #8a7043; }
html[data-optik="salon"] .zelle.wert.aktivspalte { background: rgba(255,255,255,.42); }

/* Eingetragen wird von Hand — das ist der größte Unterschied zu jedem
   gesetzten Block. Der Rotstift der Vorschau war schon vorher handschriftlich
   gedacht (er steht schräg), jetzt sieht er auch so aus. */
html[data-optik="salon"] .zelle.wert {
  font-family: var(--schrift-hand);
  font-weight: 600;
}
html[data-optik="salon"] .zelle .eingetragen {
  display: inline-block;
  transform: rotate(-1.4deg);
}
html[data-optik="salon"] .zelle .gestrichen {
  text-decoration-thickness: 2.5px;
  color: #9a8a6a;
}
html[data-optik="salon"] .zelle .bonusrest {
  font-family: var(--font-body);
  color: #8b7950;
}
html[data-optik="salon"] button.zelle.wert.zaehlt { background: rgba(173,43,33,.07); }
html[data-optik="salon"] button.zelle.wert.zaehlt .vorschau {
  color: var(--rotstift);
  text-shadow: 0 1px 0 rgba(255,255,255,.55);
}
html[data-optik="salon"] button.zelle.wert.gewaehlt {
  background: linear-gradient(180deg, #edd7a2, #dcbf7c);
  box-shadow: inset 0 0 0 3px #8a6a2c;
}

/* --------------------------------------------------- Karten, Knöpfe, Rest */
html[data-optik="salon"] .karte,
html[data-optik="salon"] .overlaykarte {
  background-color: #f7f0df;
  background-image: var(--tex-papier), linear-gradient(158deg, #faf4e6, #ece0c4);
  background-blend-mode: multiply, normal;
  background-size: 240px 240px, cover;
  border: 0;
  box-shadow: 0 18px 34px rgba(0,0,0,.5), 0 3px 7px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.8);
}
html[data-optik="salon"] .knopf {
  background: linear-gradient(180deg, #8a6234, #5c3d19);
  border: 1px solid #2b1a08;
  border-bottom-width: 3px;
  color: #f6ead2;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 2px 5px rgba(0,0,0,.4);
}
html[data-optik="salon"] .knopf.leise {
  background: linear-gradient(180deg, #f0e5cc, #ded0ad);
  border-color: #bda87e;
  color: var(--tinte);
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}
html[data-optik="salon"] .knopf.warnung {
  background: linear-gradient(180deg, #b8342a, #8a2018);
  border-color: #5e1610;
}
html[data-optik="salon"] .titel h1 {
  color: #f6e9cd;
  text-shadow: 0 2px 2px rgba(0,0,0,.6), 0 -1px 0 rgba(255,255,255,.14);
}
html[data-optik="salon"] .untertitel,
html[data-optik="salon"] .startinhalt > .textknopf { color: #e2c58e; }
html[data-optik="salon"] .overlay { background: rgba(24,14,6,.86); }
html[data-optik="salon"] .rangliste li {
  background: linear-gradient(180deg, #f3e9d2, #e5d7b7);
  border-color: #c9b89a;
}
html[data-optik="salon"] .rangliste li:first-child {
  background: linear-gradient(180deg, #f7e7c3, #e3cb96);
  border-color: #b9924e;
}
html[data-optik="salon"] .spielerliste li {
  background: linear-gradient(180deg, #f0e5cc, #e2d5b4);
  border-color: #c9b89a;
}

/* ---------------------------------------------------------- Schriftgrößen
   Handschrift trägt bei gleicher Punktgröße kleiner als eine Grotesk, deshalb
   dürfen die Zahlen im Block etwas wachsen.

   ACHTUNG, hier steckt eine Falle: Die Hochformat-Regel MUSS vor dem
   Querformat-Block stehen. Stand sie danach, gewann sie bei gleicher
   Spezifität auch im Querformat — 3,8vw ergaben dort 30 px in einer 26-px-
   Zeile, der Block wuchs über die Höhe hinaus und fing wieder an zu scrollen.
   Genau das, was die 18-Zeilen-Regel verhindern soll.

   line-height: 1 ist aus demselben Grund Pflicht: Caveat bringt eine hohe
   Zeilenbox mit und würde die Zeilenhöhe sonst von innen aufdrücken. */
html[data-optik="salon"] .zelle.wert {
  font-size: clamp(22px, 3.4vw, 34px);
  line-height: 1;
}

@media (orientation: landscape) and (min-width: 700px) {
  html[data-optik="salon"] .zelle.wert       { font-size: min(38px, calc(var(--zeile) * .78)); }
  html[data-optik="salon"] .zelle.wert.summe { font-size: min(30px, calc(var(--zeile) * .62)); }
}