/* Grundgeruest der Seite. Alles Weitere bringt overlay.css mit. */
html, body { margin: 0; height: 100%; overflow: hidden; background: #06090c; }
#app { position: fixed; inset: 0; }

canvas.fh-canvas {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;

  /* Die Kamera hoert selbst auf Zeigergesten (siehe `camera.ts`). Ohne
     `touch-action: none` legt der Browser seine eigenen Gesten darueber:
     dieselbe Bewegung dreht die Kamera *und* zoomt die Seite, ein zweiter Tipp
     loest den Doppeltipp-Zoom aus. Das Rad ist im Code abgefangen, der Finger
     bis hierher nicht.
     `user-select` verhindert, dass ein Ziehen ueber dem Brett stattdessen eine
     Textauswahl beginnt — dann bleibt die Drehung auf halbem Weg stehen. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;

  /* Der Standardzeiger ist die Ruhelage: ueber Holz und Filz gibt es nichts zu
     klicken. Ob unter dem Zeiger etwas Klickbares liegt, weiss nur die
     Raycast-Auswertung — die setzt `data-fh-pointer` (siehe unten). */
  cursor: default;
}

/* Umschalten von aussen. `main.ts` setzt am Canvas
 *   data-fh-pointer="pick"     — unter dem Zeiger liegt etwas Klickbares
 *   data-fh-pointer="grab"     — nichts Klickbares, aber die Kamera laesst sich drehen
 *   data-fh-pointer="dragging" — es wird gerade gedreht
 * und entfernt das Attribut, sobald nichts davon zutrifft. Ein dauerhafter
 * `pointer` ueber dem ganzen Canvas ist ausdruecklich nicht gemeint: er wuerde
 * jede Aussage verlieren. */
canvas.fh-canvas[data-fh-pointer='pick'] { cursor: pointer; }
canvas.fh-canvas[data-fh-pointer='grab'] { cursor: grab; }
canvas.fh-canvas[data-fh-pointer='dragging'] { cursor: grabbing; }