/* =============================================================================
   Kniffel — Erscheinungsbild "Azur"  (dritter Satz Regeln, zuschaltbar)

   Hell und blau: ein Sommertisch statt eines Spielzimmers. Gleiche Machart wie
   styles-salon.css — alles hängt an html[data-optik="azur"], styles.css bleibt
   unangetastet, Struktur kommt aus data:-URIs, es wird nichts nachgeladen.

   Der Unterschied zum Salon ist nicht nur die Farbe: Hier ist der Block ein
   VORDRUCK, wie ihn ein Spieleverlag beilegt — weißes Papier, blau bedruckt —
   und ausgefüllt wird mit KUGELSCHREIBER. Deshalb ist die Tinte dunkelblau
   statt braunschwarz. Der Rotstift bleibt trotzdem rot: Er ist die einzige
   Stelle, an der Farbe eine Bedeutung trägt, und muss aus dem Blau herausfallen.

   Licht kommt IMMER von oben links, wie in den anderen beiden.
   ========================================================================== */

html[data-optik="azur"] {
  --tex-leinen: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='300'%3E%20%3Cfilter%20id='l'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.62%200.95'%20numOctaves='4'%20seed='5'/%3E%20%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%20%3CfeComponentTransfer%3E%3CfeFuncA%20type='linear'%20slope='0.34'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%20%3Crect%20width='300'%20height='300'%20filter='url(%23l)'/%3E%3C/svg%3E");
  --tex-lack:   url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='220'%20height='220'%3E%20%3Cfilter%20id='k'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='3'%20seed='17'/%3E%20%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%20%3CfeComponentTransfer%3E%3CfeFuncA%20type='linear'%20slope='0.16'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%20%3Crect%20width='220'%20height='220'%20filter='url(%23k)'/%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.1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%20%3Crect%20width='240'%20height='240'%20filter='url(%23p)'/%3E%3C/svg%3E");

  --holz:        #4a86b8;
  --holz-tief:   #2f6b9e;
  --filz:        #3f86bd;
  --filz-tief:   #2a6493;
  --papier:      #ffffff;
  --papier-warm: #eef5fb;
  --papier-linie:#c3d9ea;
  --tinte:       #1e3a5f;
  --tinte-schwach:#6c8aa8;
  --gold:        #2f6b9e;
  --gold-hell:   #d8ecf8;
  --rotstift:    #c8342a;
  --wuerfel:     #fbf8f0;

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

/* ------------------------------------------------------------------ Tisch */
html[data-optik="azur"] body {
  background-color: #cadff0;
  background-image:
    var(--tex-leinen),
    radial-gradient(ellipse at 24% 8%, #eaf4fb 0%, #cfe3f2 38%, #a9c9e2 74%, #8bb2d2 100%);
  background-blend-mode: soft-light, normal;
  background-size: 300px 300px, cover;
}

/* --------------------------------------------------------------- Spielband */
html[data-optik="azur"] .spielband {
  background: linear-gradient(180deg, #4a8fc4 0%, #2f6b9e 100%);
  border-bottom: 3px solid var(--spielerfarbe, #1c4c74);
  box-shadow: 0 4px 14px rgba(30,58,95,.35), inset 0 1px 0 rgba(255,255,255,.42);
}
html[data-optik="azur"] .amzug {
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(20,45,75,.55);
}
html[data-optik="azur"] .amzug::before { color: #cfe8f8; }
html[data-optik="azur"] .bandrunde { color: rgba(255,255,255,.8); }
html[data-optik="azur"] .bandmenue {
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.16));
  border: 1px solid rgba(255,255,255,.45);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
}

/* ---------------------------------------------------------- Würfelbereich */
html[data-optik="azur"] .wuerfelbereich {
  background: rgba(255,255,255,.28);
  border-top-color: rgba(47,107,158,.35);
  box-shadow: 0 -3px 12px rgba(30,58,95,.14);
}
html[data-optik="azur"] .wurfhinweis { color: #35617f; }
html[data-optik="azur"] .wurfhinweis .betont { color: #1c4c74; }
html[data-optik="azur"] .wurfhinweis.bestaetigen {
  background: linear-gradient(180deg, #ffffff, #dceef9);
  color: var(--tinte);
  box-shadow: 0 2px 6px rgba(30,58,95,.2), inset 0 1px 0 #fff;
}
html[data-optik="azur"] .wurfhinweis.bestaetigen b { color: #2f6b9e; }

html[data-optik="azur"] .halteleiste {
  background: linear-gradient(180deg, #b6d2e6, #cde3f2);
  box-shadow: inset 0 3px 8px rgba(30,58,95,.3), 0 1px 0 rgba(255,255,255,.85);
  border-radius: 12px;
}
html[data-optik="azur"] .haltehinweis { color: #5c81a2; }

/* Wurffläche: eine lackierte Spielmatte. Der Glanz oben macht sie glatt —
   ohne ihn bliebe es eine blaue Fläche. */
html[data-optik="azur"] .wurfflaeche {
  background-color: #3f86bd;
  background-image:
    var(--tex-lack),
    linear-gradient(180deg, rgba(255,255,255,.36) 0%, rgba(255,255,255,.06) 26%, rgba(255,255,255,0) 52%),
    radial-gradient(ellipse at 30% 16%, #64a6d6 0%, #3f86bd 46%, #2a6493 100%);
  background-blend-mode: overlay, normal, normal;
  background-size: 220px 220px, cover, cover;
  border-radius: 14px;
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.5),
    inset 0 6px 16px rgba(20,50,80,.3),
    0 2px 5px rgba(30,58,95,.22);
}
html[data-optik="azur"] .tischhinweis { color: rgba(255,255,255,.68); }

/* ----------------------------------------------------------------- Würfel
   Wie im Salon: Höhe durch eine harte Kante, zwei Schatten, vertiefte Augen.
   Nur heller und kühler beschattet, damit sie auf Blau nicht schmutzig wirken. */
html[data-optik="azur"] .wuerfel {
  background: linear-gradient(148deg, #ffffff 0%, #fbf8f0 52%, #e6ded0 100%);
  border: 0;
  border-radius: 19%;
  box-shadow:
    0 calc(var(--kante) * .085) 0 #c3bbaa,
    0 calc(var(--kante) * .11)  calc(var(--kante) * .05) rgba(24,52,82,.34),
    0 calc(var(--kante) * .19)  calc(var(--kante) * .26) rgba(24,52,82,.3),
    inset 0 2px 0 rgba(255,255,255,.95),
    inset 0 -2px 0 rgba(170,160,142,.4);
}
html[data-optik="azur"] .streufeld .wuerfel {
  box-shadow:
    0 calc(var(--kante) * .085) 0 #c3bbaa,
    0 calc(var(--kante) * .12)  calc(var(--kante) * .06) rgba(16,44,74,.42),
    0 calc(var(--kante) * .22)  calc(var(--kante) * .3)  rgba(16,44,74,.36),
    inset 0 2px 0 rgba(255,255,255,.95),
    inset 0 -2px 0 rgba(170,160,142,.4);
}
html[data-optik="azur"] .wuerfel.gehalten {
  box-shadow:
    0 0 0 3px #2f6b9e,
    0 calc(var(--kante) * .085) 0 #c3bbaa,
    0 calc(var(--kante) * .12)  calc(var(--kante) * .06) rgba(16,44,74,.42),
    inset 0 2px 0 rgba(255,255,255,.95);
}
html[data-optik="azur"] .wuerfel .augen i {
  background: radial-gradient(circle at 50% 66%, #10131a 0%, #2c2f38 74%);
  box-shadow:
    inset 0 1.5px 2.5px rgba(0,0,0,.8),
    0 1px 0 rgba(255,255,255,.75);
}

/* ------------------------------------------------------------------ Becher
   Kein Leder in dieser Welt: glasierte Keramik. Der breite Glanzbogen oben
   links ist das, was sie hart und glatt aussehen lässt. */
html[data-optik="azur"] .becherleib {
  background:
    radial-gradient(circle at 32% 22%, #ffffff 0%, rgba(255,255,255,0) 38%),
    radial-gradient(circle at 38% 30%, #79b4de 0%, #3f86bd 46%, #235a89 86%, #1a4468 100%);
  box-shadow:
    inset 0 3px 9px rgba(255,255,255,.5),
    inset 0 -10px 18px rgba(12,38,64,.45),
    0 12px 26px rgba(24,52,82,.4);
}
html[data-optik="azur"] .becherleib::before {
  inset: 11%;
  background: radial-gradient(circle at 50% 38%, #16344f 0%, #0a1b2b 64%);
  box-shadow:
    inset 0 9px 18px rgba(0,0,0,.85),
    inset -7px -10px 22px rgba(121,180,222,.3),
    0 0 0 2px rgba(12,38,64,.5),
    0 1px 0 rgba(255,255,255,.55);
}
/* Zierring statt Naht — Keramik wird nicht genäht */
html[data-optik="azur"] .becherleib::after {
  content: "";
  position: absolute; inset: 5.5%;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.3);
  pointer-events: none;
}
html[data-optik="azur"] .becherwort {
  z-index: 1;
  color: #d8ecf8;
  text-shadow: 0 1px 3px rgba(0,0,0,.9);
}

/* -------------------------------------------------------------- Blockblatt
   Weißer Vordruck mit blauem Raster, wie eine beigelegte Gewinnkarte. */
html[data-optik="azur"] .blockformular {
  background-color: #ffffff;
  background-image: var(--tex-papier), linear-gradient(160deg, #ffffff 0%, #fbfdff 60%, #f2f8fc 100%);
  background-blend-mode: multiply, normal;
  background-size: 240px 240px, cover;
  border: 0;
  border-radius: 10px;
  box-shadow:
    0 14px 28px rgba(24,52,82,.24),
    0 2px 5px rgba(24,52,82,.16),
    inset 0 1px 0 #ffffff;
}
html[data-optik="azur"] .zelle {
  border-bottom: 1px solid #cfe0ee;
  border-right: 1px solid rgba(207,224,238,.7);
}
html[data-optik="azur"] .zelle.label {
  background: #f4f9fd;
  color: #2b5375;
  border-right: 2px solid #c3d9ea;
}
html[data-optik="azur"] .zelle.kopf {
  background: linear-gradient(180deg, #4a8fc4, #2f6b9e);
  color: #ffffff;
  border-bottom: 2px solid #1c4c74;
  text-shadow: 0 1px 1px rgba(16,44,74,.5);
}
html[data-optik="azur"] .zelle.kopf.dran {
  background: linear-gradient(180deg, #ffffff, #dceef9);
  color: #1c4c74;
  text-shadow: none;
  box-shadow: inset 0 -3px 0 #2f6b9e;
}
html[data-optik="azur"] .zelle.summe { background: #eaf3fa; }
html[data-optik="azur"] .zelle.gesamt,
html[data-optik="azur"] .zelle.gesamt.label {
  background: linear-gradient(180deg, #3d7fb4, #2a6493);
  color: #ffffff;
}
html[data-optik="azur"] .zelle.blockstart { border-top: 2px solid #2f6b9e; }
html[data-optik="azur"] .zelle.wert.aktivspalte { background: #f7fbfe; }

/* Ausgefüllt mit Kugelschreiber */
html[data-optik="azur"] .zelle.wert {
  font-family: var(--schrift-hand);
  font-weight: 600;
  color: #1e3a5f;
}
html[data-optik="azur"] .zelle .eingetragen {
  display: inline-block;
  transform: rotate(-1.4deg);
  color: #1e3a5f;
}
html[data-optik="azur"] .zelle .gestrichen {
  color: #8aa5bd;
  text-decoration-thickness: 2.5px;
}
html[data-optik="azur"] .zelle .bonusrest {
  font-family: var(--font-body);
  color: #6c8aa8;
}
html[data-optik="azur"] button.zelle.wert.zaehlt { background: rgba(200,52,42,.06); }
html[data-optik="azur"] button.zelle.wert.zaehlt .vorschau {
  color: var(--rotstift);
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
html[data-optik="azur"] button.zelle.wert.gewaehlt {
  background: linear-gradient(180deg, #dceef9, #b9d8ee);
  box-shadow: inset 0 0 0 3px #2f6b9e;
}
html[data-optik="azur"] button.zelle.wert.gewaehlt .vorschau { color: #1c4c74; }
html[data-optik="azur"] button.zelle.wert.joker.zaehlt .vorschau::after { color: #2f6b9e; }

/* --------------------------------------------------- Karten, Knöpfe, Rest */
html[data-optik="azur"] .karte,
html[data-optik="azur"] .overlaykarte {
  background-color: #ffffff;
  background-image: var(--tex-papier), linear-gradient(160deg, #ffffff, #f2f8fc);
  background-blend-mode: multiply, normal;
  background-size: 240px 240px, cover;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 14px 30px rgba(24,52,82,.26), 0 2px 5px rgba(24,52,82,.16), inset 0 1px 0 #fff;
}
html[data-optik="azur"] .karte h2,
html[data-optik="azur"] .overlaykarte h2 { color: #1c4c74; }
html[data-optik="azur"] .karte.fortsetzen { border-left: 6px solid #4a8fc4; }
html[data-optik="azur"] .knopf {
  background: linear-gradient(180deg, #57a0d4, #2f6b9e);
  border: 1px solid #1c4c74;
  border-bottom-width: 3px;
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 5px rgba(24,52,82,.3);
}
html[data-optik="azur"] .knopf.leise {
  background: linear-gradient(180deg, #ffffff, #e4eff8);
  border-color: #b3cee3;
  color: #1e3a5f;
  text-shadow: 0 1px 0 #fff;
}
html[data-optik="azur"] .knopf.warnung {
  background: linear-gradient(180deg, #d8483c, #a72a20);
  border-color: #7d1c14;
}
html[data-optik="azur"] .titel h1 {
  color: #1c4c74;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
html[data-optik="azur"] .untertitel { color: #3f7ba8; }
html[data-optik="azur"] .startinhalt > .textknopf,
html[data-optik="azur"] .textknopf.hell { color: #2f6b9e; }
html[data-optik="azur"] .overlay { background: rgba(30,64,98,.62); }
html[data-optik="azur"] .undochip { background: rgba(28,76,116,.94); }
html[data-optik="azur"] .spielerliste li {
  background: linear-gradient(180deg, #ffffff, #eef5fb);
  border-color: #c3d9ea;
}
html[data-optik="azur"] .spielerliste .seite { background: #fff; border-color: #c3d9ea; color: #5c81a2; }
html[data-optik="azur"] .spielerliste .seite[data-seite="oben"] {
  background: #d8ecf8; border-color: #2f6b9e; color: #1c4c74;
}
html[data-optik="azur"] .namenszeile input { background: #fff; border-color: #c3d9ea; color: #1e3a5f; }
html[data-optik="azur"] .vorschlag { border-color: #b3cee3; color: #5c81a2; }
html[data-optik="azur"] .rangliste li {
  background: linear-gradient(180deg, #ffffff, #eef5fb);
  border-color: #c3d9ea;
}
html[data-optik="azur"] .rangliste li:first-child {
  background: linear-gradient(180deg, #dceef9, #b9d8ee);
  border-color: #2f6b9e;
}

/* ---------------------------------------------------------- Schriftgrößen
   Wie im Salon: allgemeine Regel ZUERST, Querformat danach — sonst gewinnt
   die vw-Größe auch im Querformat, die Zeile wächst und der Block scrollt.
   line-height: 1, weil Caveat eine hohe Zeilenbox mitbringt. */
html[data-optik="azur"] .zelle.wert {
  font-size: clamp(22px, 3.4vw, 34px);
  line-height: 1;
}

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