/* mobilsteuer.css: die Bedienung mit dem Daumen.

   Eigene Datei, style.css bleibt unberuehrt. Es werden nur die
   Variablen benutzt, die dort schon fuer alle drei Ansichten gesetzt
   sind (--glas, --glas2, --glasrand, --glanz, --cyan, --gelb, --txt,
   --mut, --les, --unschaerfe). Dadurch faerbt die Fingersteuerung
   automatisch mit, wenn jemand auf Pergament oder Nacht wechselt, ohne
   eine einzige feste Farbe.

   Zwei Schalter am body steuern alles:
     .mobsteuer   die Bildschirmsteuerung des Ego-Modus ist an
     .mobregler   die Plus-Minus-Knoepfe an den Reglern haengen dran

   Diese Datei gehoert NACH den anderen ins index.html, weil sie in
   wenigen Faellen bestehende Regeln absichtlich ueberstimmt. */

/* ============================================================
   1) Bildschirmsteuerung fuer den Ego-Modus
   ============================================================ */

.mobst{
  position:fixed; inset:0; z-index:43;
  pointer-events:none;                 /* nur die Kinder fangen Finger */
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.mobst[hidden]{ display:none; }

/* Zwei Fangflaechen. Das obere Viertel bleibt frei: dort liegen Kugel,
   Zahlen und Hinweise, und die will man auch im Ego-Modus erreichen.
   touch-action:none, sonst scrollt und zoomt der Browser mit. */
.mobst-zone{
  position:absolute; top:26%; bottom:0; width:50%;
  pointer-events:auto; touch-action:none;
}
.mobst-links{ left:0; }
.mobst-rechts{ right:0; }

/* Der Stock erscheint dort, wo der Daumen aufsetzt. Darum sitzt er bei
   0,0 und wird per transform an die Fingerstelle geschoben: das laeuft
   auf der Grafikkarte und kostet kein neues Layout. */
.mobst-stick{
  position:absolute; left:0; top:0; width:0; height:0;
  pointer-events:none;
}
.mobst-stick[hidden]{ display:none; }

.mobst-stick::before{
  content:''; position:absolute; left:-62px; top:-62px;
  width:124px; height:124px; border-radius:50%;
  background:var(--glas);
  border:1.5px solid var(--glasrand);
  box-shadow:0 0 0 1px rgba(0,0,0,.25), 0 6px 24px rgba(0,0,0,.35);
  opacity:.85;
}
/* Der Ring bekommt eine Marke oben: ohne die weiss man beim Ziehen
   nicht, wo gerade vorwaerts ist. */
.mobst-stick::after{
  content:''; position:absolute; left:-1px; top:-58px;
  width:2px; height:12px; border-radius:1px;
  background:var(--glasrand);
}

.mobst-knauf{
  position:absolute; left:0; top:0;
  width:52px; height:52px; margin:-26px 0 0 -26px; border-radius:50%;
  background:linear-gradient(180deg, var(--glanz), transparent 60%),
             color-mix(in srgb, var(--cyan) 26%, var(--glas2));
  border:1.5px solid var(--glasrand);
  box-shadow:0 3px 12px rgba(0,0,0,.4);
  will-change:transform;
}
/* Voll durchgedrueckt heisst rennen. Das muss man sehen, sonst haelt
   man es fuer einen Zufall. */
.mobst-stick.rennt .mobst-knauf{
  background:linear-gradient(180deg, var(--glanz), transparent 60%),
             color-mix(in srgb, var(--gelb) 40%, var(--glas2));
  border-color:var(--gelb);
}

.mobst-knoepfe{
  position:absolute; right:14px; bottom:16px;
  display:flex; align-items:flex-end; gap:12px;
  pointer-events:none;
}
.mobst-b{
  pointer-events:auto; touch-action:none;
  font:inherit; color:var(--les); cursor:pointer;
  width:56px; height:56px; border-radius:50%;
  background:var(--glas2);
  border:1.5px solid var(--glasrand);
  backdrop-filter:blur(var(--unschaerfe));
  -webkit-backdrop-filter:blur(var(--unschaerfe));
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  box-shadow:0 4px 16px rgba(0,0,0,.35);
  transition:transform .1s, background .16s;
}
.mobst-b.gross{ width:76px; height:76px; }
.mobst-b i{ font-style:normal; font-size:20px; line-height:1; }
.mobst-b.gross i{ font-size:26px; }
/* Die Beschriftung steht klein darunter. Ein Symbol allein raet man,
   und raten will bei einer Steuerung niemand. */
.mobst-b span{
  font-size:8px; letter-spacing:.4px; color:var(--mut);
  max-width:52px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.mobst-b:active{ transform:scale(.93); background:color-mix(in srgb, var(--cyan) 22%, var(--glas2)); }

/* Hochkant ist unten wenig Platz und der Daumen kommt weiter hoch.
   Die Knoepfe ruecken darum ueber die Stockzone statt daneben. */
@media (orientation:portrait){
  .mobst-zone{ top:38%; }
  .mobst-knoepfe{ bottom:26px; }
}
/* Sehr flache Schirme (Telefon quer): der Stock darf hoeher greifen,
   sonst liegt der Daumen im Bildschirmrand. */
@media (orientation:landscape) and (max-height:460px){
  .mobst-zone{ top:18%; }
  .mobst-b{ width:48px; height:48px; }
  .mobst-b.gross{ width:64px; height:64px; }
  .mobst-b i{ font-size:17px; }
  .mobst-b.gross i{ font-size:22px; }
  .mobst-b span{ display:none; }
}

/* Das Fenster des Ego-Modus sitzt am Rechner unten rechts, also genau
   dort, wo jetzt der Daumen liegt. Solange die Bildschirmsteuerung an
   ist, wandert es nach oben und wird schmaler. Weggeblendet wird es
   NICHT: nur dort steht der Knopf, mit dem man ein Wesen uebernimmt.

   left:auto ist Pflicht und kein Schmuck: css/ego.css zieht die Tafel
   unter 900 Punkten Breite auf left:8 UND right:8 auseinander, und ein
   gesetztes left schlaegt jedes right. Ohne das Zuruecknehmen klebt sie
   links oben ueber der Kugel. Genau so gemessen, nicht vermutet. */
body.mobsteuer #ego{
  bottom:auto; top:64px; left:auto; right:10px; width:184px; padding:8px;
}
body.mobsteuer #ego .ego-b{ font-size:11px; padding:7px 4px; }
/* Die Tastenliste erklaert W A S D. Auf einem Telefon ist das Hohn. */
body.mobsteuer #ego .ego-tasten{ display:none; }

/* Was unter der Fangflaeche liegen wuerde und im Ego-Modus ohnehin
   nichts mehr tut, wird weggeblendet statt blind mitzuschwimmen.
   Die Zoomsaeule steuert die Karte, und die Karte gibt es hier nicht;
   der EGO-Griff macht dasselbe wie der runde Knopf mit dem Kreuz. */
body.mobsteuer #zoomsaeule,
body.mobsteuer .rollen,
body.mobsteuer .egogriff{ opacity:0; pointer-events:none; }

/* Pause und Tempo muessen erreichbar bleiben, sonst laeuft die Welt
   weiter und man kommt nicht heran. Die Leiste steigt darum ueber die
   Fangflaeche. Der Preis ist ein kleiner toter Fleck unten in der
   Mitte, und dort setzt beim Laufen kein Daumen auf. */
body.mobsteuer .transport{ z-index:44; padding:5px 9px; }

/* ============================================================
   2) Plus und Minus an den Reglern
   ============================================================
   Die Zeile wird zum Raster, statt dass irgendwo etwas absolut
   darueberliegt. Der Knopfblock selbst verschwindet mit
   display:contents aus dem Kasten und laesst seine zwei Knoepfe direkt
   ins Raster fallen: so tragen sie die volle Zeilenhoehe, ohne dass am
   bestehenden Aufbau der Zeile etwas geaendert werden muesste. */

body.mobregler #params .prow{
  display:grid; align-items:center; column-gap:7px;
  grid-template-columns:1fr 40px 40px;
  grid-template-areas:
    "kopf   minus plus"
    "regler minus plus"
    "wirk   wirk  wirk";
}
body.mobregler #params .prow > .ptop{ grid-area:kopf; }
body.mobregler #params .prow > input.pslider{ grid-area:regler; width:100%; }
body.mobregler #params .prow > .pwirk{ grid-area:wirk; }

body.mobregler .kachse{
  display:grid; align-items:center; column-gap:7px;
  grid-template-columns:1fr 40px 40px;
  grid-template-areas:
    "kopf   minus plus"
    "regler minus plus"
    "enden  minus plus"
    "wirk   wirk  wirk";
}
body.mobregler .kachse > .ka-kopf{ grid-area:kopf; }
body.mobregler .kachse > input[type=range]{ grid-area:regler; width:100%; }
body.mobregler .kachse > .ka-enden{ grid-area:enden; }
body.mobregler .kachse > .ka-wirkung{ grid-area:wirk; }

.mob-step{ display:contents; }

.mob-b{
  font:inherit; font-size:20px; line-height:1; font-weight:600;
  color:var(--cyan); cursor:pointer;
  background:color-mix(in srgb, var(--glasrand) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--glasrand) 55%, transparent);
  border-radius:10px;
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
  touch-action:manipulation;            /* kein Doppeltipp-Zoom auf dem Knopf */
  -webkit-tap-highlight-color:transparent;
  -webkit-user-select:none; user-select:none;
  transition:background .12s, transform .08s;
}
.mob-b[data-d="-1"]{ grid-area:minus; }
.mob-b[data-d="1"]{ grid-area:plus; }
.mob-b:active{
  background:color-mix(in srgb, var(--cyan) 26%, transparent);
  color:var(--txt); transform:scale(.94);
}
/* Am Rechner mit Fingerschirm sind die Knoepfe zwar da, sollen sich
   aber nicht in den Vordergrund draengen. */
@media (hover:hover) and (pointer:fine){
  .mob-b{ opacity:.55; }
  .mob-b:hover{ opacity:1; }
}

/* ============================================================
   3) Die drei Gesten beim ersten Start
   ============================================================ */

.mobhilfe{
  position:fixed; inset:0; z-index:150;
  display:flex; align-items:center; justify-content:center; padding:18px;
  background:var(--schleier);
}
.mobhilfe-karte{
  width:100%; max-width:380px; padding:18px;
  border-radius:16px; text-align:left;
  max-height:86vh; overflow-y:auto;
}
.mobhilfe-karte h3{
  font-size:15px; letter-spacing:1.6px; text-transform:uppercase;
  color:var(--cyan); margin-bottom:12px;
}
.mobhilfe-karte ul{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.mobhilfe-karte li{
  display:grid; grid-template-columns:34px 1fr; column-gap:10px; align-items:baseline;
}
.mobhilfe-karte li i{
  grid-row:1 / span 2; font-style:normal; font-size:24px; line-height:1; align-self:center;
}
.mobhilfe-karte li b{ color:var(--txt); font-size:13px; }
.mobhilfe-karte li span{ color:var(--mut); font-size:12px; line-height:1.45; }
.mobhilfe-ok{
  margin-top:16px; width:100%; font:inherit; font-size:13px; font-weight:600;
  color:var(--txt); cursor:pointer;
  background:linear-gradient(180deg, var(--glanz), transparent 65%),
             color-mix(in srgb, var(--cyan) 26%, transparent);
  border:1px solid var(--glasrand); border-radius:11px; padding:12px;
  touch-action:manipulation;
}
.mobhilfe-ok:active{ transform:scale(.98); }

/* Hochkant quer durch: der Text darf nicht am Rand kleben. */
@media (orientation:landscape) and (max-height:460px){
  .mobhilfe-karte{ max-width:520px; padding:14px; }
  .mobhilfe-karte ul{ gap:8px; }
  .mobhilfe-karte li span{ font-size:11px; }
  .mobhilfe-ok{ margin-top:11px; padding:9px; }
}