/* ── tiefZEN: die Tiefe ────────────────────────────────────────────────
   Die eigene Handschrift dieses Spiels. Eine eigene Datei und keine
   Werte im style-Block – genau der Bruch, den die Gestaltungsregel
   „Die Handschrift wohnt in haus.css" für ein Organ mit eigener Marke
   ausdrücklich zulässt.

   **Warum es sie gibt.** Simon, 20.09.2026, vor Auras „Cyber Ocean":
   *„Wir sollten eventuell tiefZEN auch optisch nochmals überarbeiten …
   Auch die Schiffe sind sehr schön gestaltet wie auch die ganze
   Farbgebung. Ich fühle mich etwas herausgefordert im positiven Sinn."*
   Ich habe zugesagt, zuerst Farbgebung und Schiffe anzufassen – und dann
   an jenem Abend nur die achtzehn Flotten gebaut. Zwei Tage später stand
   der Satz da, aus dem Aufgabe 649 wurde: *„Selbst Aura gestaltet
   ansprechendere Spiele und Webseiten also sollte ich das ganze
   abbrechen."* Diese Datei ist die Einlösung, nicht die Antwort darauf.

   **Keine Kopie von Auras Neon.** Dort steht Cyan und Magenta auf
   Schwarz, ein Rechnerbild. Hier steht Tiefsee und eine einzige warme
   Lampe: Messing, Signalöl, das Licht einer Laterne unter Wasser. Das
   passt zu dem, was tiefZEN kann und Aura nicht hat – achtzehn Flotten
   von Karthago bis heute.

   **Der eine laute Bruch, und es ist nur einer:** das Wasser ist nicht
   flächig. Es wird nach unten dunkler. Die oberste Ebene (`z = 5`, in
   `flotte.legen` die Wasseroberfläche) liegt im Licht, die unterste im
   Schwarz – im Bild UND an den 216 Marken. Ein Würfel aus gleichen
   Kugeln ist ein Kugelbad; ein Würfel mit Lichteinfall von oben ist
   Wasser. Das ist der Moment, der den Blick anhalten soll, und es ist
   etwas, das eine flache Seite nicht haben kann.

   Die Namen `--papier`, `--tinte`, `--linie`, `--gedaempft` bleiben
   stehen, obwohl hier nichts mehr aus Papier ist: die Meldekarte des
   Hauses (`runtime/oberflaeche/karte.js`) liest genau diese vier und
   zieht dadurch von selbst mit. Wer sie umbenennt, lässt einen weissen
   Kasten mitten im schwarzen Wasser aufgehen. */

:root{
  /* Der Grund. `--kreisel-grund` MUSS als Zahlentripel dastehen –
     `kreisel.js:199` liest Ziffern und teilt durch 255; aus „#071119"
     holt der Ausdruck nur eine einzige Zahl und fällt auf Hellgrau
     zurück. Beide Werte meinen denselben Ton und gehören zusammen
     geändert. */
  --papier:#071119;
  --kreisel-grund:rgb(7, 17, 25);
  --tiefe-oben:#123444;        /* knapp unter der Oberfläche */
  --tiefe-unten:#04090e;       /* der Grund, wo kein Licht mehr hinkommt */

  --tinte:#e7eeec;             /* die Schrift – Kontrast 14,9:1 auf --papier */
  --gedaempft:#93a7ad;         /* Nebensätze – 7,4:1, über der 4,5er-Schwelle */
  --linie:#1f3947;

  /* Die zehn Prozent: eine einzige warme Farbe, sonst Grauwert.
     Messing und Signalöl – die Lampe, nicht das Neon. */
  --signal:#e0a84e;
  --rot:#e8724a;               /* Treffer: Glut, nicht Blut */
  --blau:#6fa3b8;              /* Wasser, danebengeschossen */
  --gold:#e0a84e;

  --glas:rgba(255,255,255,.05);       /* Knöpfe: Glas über dem Wasser */
  --glas-rand:rgba(160,200,215,.22);
}

/* Die Leiste schwebt über dem Wasser, statt es abzuschneiden: ein
   Verlauf nach unten ins Nichts, keine Linie. Eine Trennlinie wäre die
   Kante eines Dokuments – und genau das soll es nicht sein. */
.leiste{
  border-bottom:0 !important;
  background:linear-gradient(to bottom,
             rgba(10,24,34,.96), rgba(7,17,25,0));
  position:relative;z-index:3;
}
.stand{letter-spacing:.005em}
.stand b{color:var(--signal);font-weight:600}
.stand .treffer{color:var(--rot)}
.stand .wasser{color:var(--blau)}

/* Alles, was ein Knopf ist, wird Glas. Vorher war es Papierweiss
   (#fffdfa) und leuchtete im dunklen Wasser wie ein Loch. */
.wahl,
.wahl button,
.lade-knopf,
.lupe button,
.lade select,
.lade button,
.bp-karte button{
  /* `background-color`, NICHT `background`: die Kurzform setzt auch
     `background-image` zurück, und damit verschwände der gezeichnete
     Auswahlwinkel weiter unten – einmal passiert am 28.09.2026, und
     im Bild fehlte er wortlos. */
  background-color:var(--glas) !important;
  border-color:var(--glas-rand) !important;
  color:var(--tinte) !important;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
.wahl{background-color:transparent !important}
.wahl button{color:var(--gedaempft) !important}
.wahl button.an,
.lade button.an,
.bp-karte button.an{
  background-color:var(--signal) !important;
  border-color:var(--signal) !important;
  color:#0a1620 !important;
}
.lupe button{font-weight:300}

/* Die Marken über dem Wasser: gesperrt, klein, ruhig. Die Ansage rechts
   trägt die einzige Zahl, die im Zug zählt, und darf darum heller sein
   als ihre Beschriftung links. */
.marke-becken{color:var(--gedaempft);opacity:.8}
.lage{color:var(--gedaempft)}
.becken + .becken{border-left-color:var(--linie)}

.flotte i{
  background:rgba(12,30,42,.62);
  border-color:var(--linie);
  color:var(--gedaempft);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.flotte i.weg{
  background:transparent;
  border-color:rgba(232,114,74,.45);
  color:rgba(232,114,74,.7);
}

/* ── Der Lichtschacht ──────────────────────────────────────────────────
   Der Kreisel löscht seine Fläche undurchsichtig (`clearColor(...,1)`),
   also kann kein CSS-Verlauf hinter dem Glas durchscheinen. Er liegt
   deshalb DARÜBER, nimmt keine Ereignisse an und lässt jeden Griff
   durch – gedreht und geschossen wird weiter auf dem Glas darunter.

   Zwei Lagen: ein kegelförmiger Einfall von oben, wie Licht durch eine
   Wasseroberfläche, und eine Vignette, die die Ecken schluckt. Beide
   sehr schwach; sichtbar sein soll das Wasser, nicht der Effekt. */
.schacht{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    radial-gradient(120% 78% at 50% -12%,
      rgba(126,196,222,.20) 0%, rgba(86,150,180,.10) 34%,
      rgba(0,0,0,0) 66%),
    radial-gradient(150% 120% at 50% 42%,
      rgba(0,0,0,0) 46%, rgba(2,6,10,.62) 100%);
}

/* ── Die Lade ────────────────────────────────────────────────────────── */
.dunkel{background:rgba(2,7,11,.66) !important;backdrop-filter:blur(2px)}
.lade{
  background:linear-gradient(to bottom, #0b1b26, #060f16) !important;
  border-left-color:var(--linie) !important;
  box-shadow:-24px 0 60px rgba(0,0,0,.6) !important;
}
.lade .marke{color:var(--signal);opacity:.85}
.lade h1{color:var(--tinte)}
.lade label{color:var(--gedaempft)}
.lade select option{background:#0b1b26;color:var(--tinte)}
.unter,.fuss,.regeln summary{color:var(--gedaempft)}
#epoche-titel{color:var(--signal)}

/* Der Regler der Epoche: eine Skala, keine Systemsteuerung.
   `border:0` ist nicht Zierrat: `bepure.css` gibt JEDEM `input` einen
   hellen Rahmen (`input:not([type=checkbox])…{border:1px solid …}`),
   und der stand als leuchtender Kasten um die Epochenskala, bis es am
   28.09.2026 auf dem Bild auffiel. Die Hausregel ist für Formulare
   richtig; ein Schieber ist keines. */
.lade input[type=range]{
  -webkit-appearance:none;appearance:none;height:26px;
  background:transparent;border:0;min-height:0;padding:0;
}
.lade input[type=range]::-webkit-slider-runnable-track{
  height:2px;background:var(--linie);
}
.lade input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:15px;height:15px;margin-top:-6.5px;border-radius:50%;
  background:var(--signal);border:0;
  box-shadow:0 0 0 5px rgba(224,168,78,.16);
}
.lade input[type=range]::-moz-range-track{height:2px;background:var(--linie)}
.lade input[type=range]::-moz-range-thumb{
  width:15px;height:15px;border-radius:50%;background:var(--signal);border:0;
}

/* Die Auswahlpfeile des Systems sind hell und gehören einer anderen
   Zeit an – das ist die „wie vor 25 Jahren"-Liste aus den
   Gestaltungsregeln. Ein eigener Winkel, gezeichnet, nicht gesetzt. */
.lade select{
  -webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--gedaempft) 50%),
                   linear-gradient(135deg,var(--gedaempft) 50%,transparent 50%);
  background-position:calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  padding-right:34px;
}

/* ── P3A: eintauchen ─────────────────────────────────────────────────
   Simon, 12.11.2026: „Der Spieler muss eintauchen in die Welt …
   Zusatzinfos, Bedienhilfen etc. müssen möglichst ausblendbar bzw.
   dezent sein." Die Leiste liegt jetzt ÜBER dem Wasser statt darüber;
   das Wasser reicht bis an die obere Kante. Ohne Hilfen (body.ruhig)
   bleiben nur der Zug, die Zeit und die zwei Knöpfe. */
body .leiste{position:absolute;top:env(safe-area-inset-top);left:0;right:0;
  background:linear-gradient(to bottom, rgba(2,10,16,.62), rgba(2,10,16,0)) !important;
  padding-bottom:18px}
body .buehne{height:100%}
.schacht{display:none !important}   /* echte Lichtschächte statt Verlauf */
.hilfen-knopf{flex:0 0 auto;width:38px;height:38px;border-radius:9px;cursor:pointer;
  position:relative;background-color:var(--glas) !important;
  border:1px solid var(--glas-rand) !important;
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
/* Gezeichnet, keine Schrift und kein Emoji: ein Kreis mit einem Punkt
   (aus) oder gefüllt (an). */
.hilfen-knopf::before{content:"";position:absolute;inset:11px;border-radius:50%;
  border:1.5px solid var(--tinte);opacity:.75}
.hilfen-knopf::after{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;
  margin:-2px 0 0 -2px;border-radius:50%;background:var(--tinte);opacity:.75}
.hilfen-knopf[aria-pressed="true"]::before{background:var(--signal);border-color:var(--signal);opacity:1}
.hilfen-knopf[aria-pressed="true"]::after{background:#0a1620;opacity:1}
/* Auf- und abtauchen (P3B): gleiche Glasfläche wie die Hilfen, darin
   eine gezeichnete Wasserlinie. Seit P3F ist der Punkt die Kamera: er
   liegt unter der Linie, solange man taucht, und wandert mit, während
   die Kamera fährt oder an die Haut gezogen wird (--nass kommt Bild für
   Bild aus der Bühne, 1 heisst unter Wasser). Bis P3E sagte er, wohin
   der Knopf führt, und sprang erst am Ende der Fahrt – während der
   Fahrt zeigte nichts, dass etwas geschieht. */
.sicht-knopf{flex:0 0 auto;width:38px;height:38px;border-radius:9px;cursor:pointer;
  position:relative;background-color:var(--glas) !important;
  border:1px solid var(--glas-rand) !important;
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.sicht-knopf{--nass:1}
.sicht-knopf[data-sicht="ueber"]{--nass:0}
.sicht-knopf::before{content:"";position:absolute;left:9px;right:9px;top:50%;height:0;
  border-top:1.5px solid var(--tinte);opacity:.75}
.sicht-knopf::after{content:"";position:absolute;left:50%;width:5px;height:5px;
  margin-left:-2.5px;border-radius:50%;background:var(--signal);
  top:calc(50% - 2px + 8px * (2 * var(--nass) - 1))}
/* Am Telefon unten rechts, über der Lupe (zwei Knöpfe ab 34 px). In der
   Leiste drückte er die Zugzeile auf «Du begi» zusammen (Iris,
   13.11.2026); ein Umschalter, den man im Spiel immer wieder drückt,
   gehört ohnehin unter den Daumen. */
/* Stumm (P3D): gleiche Glasfläche; ein gezeichneter Lautsprecher mit
   einem Bogen, gestrichen, wenn stumm. */
.ton-knopf{flex:0 0 auto;width:38px;height:38px;border-radius:9px;cursor:pointer;
  position:relative;background-color:var(--glas) !important;
  border:1px solid var(--glas-rand) !important;
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.ton-knopf::before{content:"";position:absolute;left:9px;top:12px;width:12px;height:14px;
  background:var(--tinte);opacity:.75;
  clip-path:polygon(0 30%,38% 30%,100% 0,100% 100%,38% 70%,0 70%)}
.ton-knopf::after{content:"";position:absolute;left:20px;top:12px;width:7px;height:14px;
  border-right:1.5px solid var(--tinte);border-radius:0 8px 8px 0/0 7px 7px 0;opacity:.75}
.ton-knopf[aria-pressed="true"]::before{opacity:.45}
.ton-knopf[aria-pressed="true"]::after{left:7px;top:18px;width:24px;height:0;border:0;
  border-top:1.5px solid var(--signal);border-radius:0;transform:rotate(-38deg);opacity:1}
@media(max-width:820px){
  /* 44 px unter dem Daumen (P3F): 38 px lagen unter dem Mass, das
     Android für eine Trefferfläche verlangt (48 dp); 44 px sind das
     Mass von Apple und lassen der Lupe ihren Platz. */
  .sicht-knopf{position:fixed;right:5px;bottom:126px;z-index:5;width:44px;height:44px}
  .ton-knopf{position:fixed;right:8px;bottom:180px;z-index:5}
}
.flotte,.lage,.marke-becken,.lupe{transition:opacity .35s ease}
body.ruhig .flotte,body.ruhig .lage,body.ruhig .marke-becken,body.ruhig .lupe{
  opacity:0;pointer-events:none}
body.ruhig .lupe button{pointer-events:none}
body.ruhig .stand{opacity:.85}
@media (prefers-reduced-motion: reduce){.flotte,.lage,.marke-becken,.lupe{transition:none}}