/* =====================================================================================
   Handy & Tablet: Touch-Steuerung (js/touch.js), verkleinertes HUD, kompakte Menüs.
   body.touch = Touch-Bedienung erkannt. --hud-zoom setzt touch.js je nach Bildschirmgröße.
   ===================================================================================== */
html, body { touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; overscroll-behavior: none; }

/* PC- bzw. Touch-Hinweise jeweils nur auf dem passenden Gerät */
body.touch .nur-maus, body:not(.touch) .nur-touch { display: none !important; }
.steuerung .nur-touch td:first-child { white-space: nowrap; color: var(--gold); }

/* ---------------------------------------------------------------- HUD-Skalierung (alle Geräte, kleine Fenster) */
.oben, .zeitblock, .rechts-oben, #spielerfenster, .mitspieler, .bossleiste { zoom: var(--hud-zoom, 1); }
/* Abstände nach rechts in echten Pixeln halten (Platz für Vollbild-/Pause-Knopf) */
.rechts-oben { right: calc(74px / var(--hud-zoom, 1)); }
.ansage { font-size: calc(54px * var(--hud-zoom, 1)); }
.ansage small { font-size: calc(22px * var(--hud-zoom, 1)); }

/* ---------------------------------------------------------------- Touch-Ebene */
.touch-ebene { position: fixed; inset: 0; z-index: 12; pointer-events: none; display: none; }
body.touch:not(.im-menue) .touch-ebene { display: block; }
.touch-ebene button { pointer-events: auto; touch-action: none; }

/* Stick-Zone: linke Hälfte unterhalb der oberen HUD-Leiste */
.stick-zone { position: absolute; left: 0; bottom: 0; width: 48%; top: 22%; pointer-events: auto; touch-action: none; }
.stick { position: fixed; width: 132px; height: 132px; margin: -66px 0 0 -66px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(20, 14, 10, .35) 0 55%, rgba(246, 197, 90, .10) 56% 100%);
  box-shadow: inset 0 0 0 2px rgba(246, 197, 90, .55), 0 0 24px rgba(0, 0, 0, .45); }
.stick i { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 38% 32%, #fff0b8 0 12%, #f6c55a 30%, #9c6a1e 80%);
  box-shadow: 0 0 0 2px #2a1606, 0 4px 12px rgba(0, 0, 0, .6), 0 0 18px rgba(255, 170, 60, .35); }

/* Knöpfe unten rechts im Bogen um den Hauptangriff (Größen in vmin → passt auf jedes Handy) */
.touch-knoepfe { position: absolute; right: env(safe-area-inset-right, 0); bottom: env(safe-area-inset-bottom, 0); width: 0; height: 0; }
.tk { position: absolute; border: 0; padding: 0; border-radius: 50%; overflow: hidden; cursor: var(--zeiger-klick); color: var(--text);
  width: 15vmin; height: 15vmin; min-width: 52px; min-height: 52px;
  background: #15110f center / cover no-repeat;
  box-shadow: 0 0 0 2px #0a080b, 0 0 0 4px var(--gold-dunkel), 0 6px 16px rgba(0, 0, 0, .6);
  transition: transform .08s, box-shadow .12s, filter .12s; opacity: .92; }
.tk.gedrueckt { transform: scale(.92); box-shadow: 0 0 0 2px #0a080b, 0 0 0 4px var(--gold), 0 0 22px rgba(255, 180, 60, .6); opacity: 1; }
.tk.zielt { box-shadow: 0 0 0 2px #0a080b, 0 0 0 4px var(--glut), 0 0 26px rgba(255, 110, 30, .7); }
.tk .abklingen { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: rgba(0, 0, 0, .7); pointer-events: none; }
.tk .kosten { position: absolute; left: 0; right: 0; bottom: 8%; text-align: center; font: 700 12px var(--schrift); color: #9ac8ff; text-shadow: 0 1px 2px #000; pointer-events: none; }
.tk.kein-mana { filter: saturate(.2) brightness(.55); }
.tk b { font: 800 16px var(--schrift-titel); letter-spacing: 2px; text-shadow: 0 1px 0 #000; pointer-events: none; }

.tk-haupt { width: 23vmin; height: 23vmin; min-width: 78px; min-height: 78px; right: 4vmin; bottom: 4vmin;
  box-shadow: 0 0 0 2px #0a080b, 0 0 0 5px var(--gold), 0 0 24px rgba(255, 170, 60, .35), 0 8px 20px rgba(0, 0, 0, .6); }
.tk-zweit { right: 29vmin; bottom: 3vmin; }
.tk-q { right: 26vmin; bottom: 20vmin; }
.tk-e { right: 9vmin; bottom: 29vmin; }
.tk-dash { right: 46vmin; bottom: 4vmin; width: 13vmin; height: 13vmin; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 40% 30%, #3f6a2e, #1a2a12 75%); box-shadow: 0 0 0 2px #0a080b, 0 0 0 4px #4fc23a, 0 6px 16px rgba(0, 0, 0, .6); }
.tk-dash .ladungen { font: 700 12px var(--schrift); color: #d8ffc8; pointer-events: none; }
.tk-dash.leer { filter: grayscale(.85) brightness(.6); }
.tk-auto { right: 44vmin; bottom: 22vmin; width: 11vmin; height: 11vmin; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #2a2421, #120f0f); }
.tk-auto b { font-size: 12px; color: var(--grau); }
.tk-auto.an { box-shadow: 0 0 0 2px #0a080b, 0 0 0 4px var(--gold), 0 0 16px rgba(255, 170, 60, .45); }
.tk-auto.an b { color: var(--gold); }

/* Pause oben rechts neben dem Vollbild-Knopf */
.tk-pause { position: absolute; top: calc(8px + env(safe-area-inset-top, 0)); right: calc(64px + env(safe-area-inset-right, 0)); width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; cursor: var(--zeiger-klick);
  background: linear-gradient(180deg, #2a2421, #120f0f); box-shadow: inset 0 0 0 2px var(--gold-dunkel), 0 6px 14px rgba(0, 0, 0, .5);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.tk-pause i { width: 6px; height: 18px; background: var(--gold); }

/* Ziel-Linie beim Ziehen einer Fähigkeit */
.ziel-linie { position: fixed; height: 6px; margin-top: -3px; transform-origin: 0 50%; pointer-events: none; border-radius: 3px;
  background: linear-gradient(90deg, rgba(255, 120, 40, .0), rgba(255, 150, 50, .75) 30%, rgba(255, 230, 160, .95));
  box-shadow: 0 0 12px rgba(255, 140, 40, .7); }
.ziel-linie::after { content: ''; position: absolute; right: -10px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%;
  border: 3px solid #ffe6a0; box-shadow: 0 0 10px rgba(255, 160, 60, .8); }

/* ---------------------------------------------------------------- HUD-Anordnung auf Touch-Geräten */
/* Spielerfenster auf dem Handy deutlich kleiner (Knöpfe bleiben groß) */
body.touch #spielerfenster { zoom: calc(var(--hud-zoom, 1) * 0.62); left: 92px; top: 200px; bottom: auto; }
body.touch .fenster { height: 150px; }
body.touch .fenster .faehigkeiten, body.touch .fenster .hinweis { display: none; }
body.touch .mitspieler { top: 250px; bottom: auto; left: auto; right: 30px; align-items: flex-end; }
body.touch .raum-info .knopf, body.touch #link-hinweis { display: none; }
body.touch .rechts-oben { right: calc(118px / var(--hud-zoom, 1)); top: 70px; }
body.touch .vollbild-knopf { top: calc(8px + env(safe-area-inset-top, 0)); right: calc(12px + env(safe-area-inset-right, 0)); }
body.touch .oben { right: calc(118px / var(--hud-zoom, 1)); }
body.touch .truhen-pfeil { width: 42px; height: 42px; }
body.touch .zahl { font-size: 16px; }
#spielerfenster .faehigkeit { cursor: var(--zeiger); }
body.touch #tip { width: min(320px, 80vw); }

/* Aufstiegskarten: auf Touch größere Trefferflächen, keine Tasten-Hinweise */
body.touch .wahl .taste { display: none; }
body.touch .karten-reihe .wahl:hover { transform: none; filter: none; }

/* ---------------------------------------------------------------- Hochformat-Hinweis (nur Touch) */
#hochkant { display: none; position: fixed; inset: 0; z-index: 300; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: radial-gradient(ellipse at 50% 55%, #2a1408, #0b0809 70%); color: var(--text); text-align: center; padding: 24px; }
#hochkant b { font: 800 34px var(--schrift-titel); letter-spacing: 4px; text-transform: uppercase; color: var(--gold); }
#hochkant span { color: var(--grau); font-size: 15px; }
.hk-handy { width: 56px; height: 96px; border-radius: 10px; box-shadow: inset 0 0 0 4px var(--gold); animation: hk-drehen 2s ease-in-out infinite; }
@keyframes hk-drehen { 0%, 25% { transform: rotate(0); } 60%, 100% { transform: rotate(-90deg); } }
@media (orientation: portrait) and (max-width: 900px) {
  body.touch #hochkant { display: flex; }
}

/* ---------------------------------------------------------------- Niedrige Bildschirme (Handy quer) */
@media (max-height: 560px) {
  .vollbild { justify-content: flex-start; padding: 8px 0; overflow-y: auto; }
  .lobby-karte, .pause-fenster { width: min(900px, 96vw) !important; padding: 12px 18px 12px; gap: 8px !important; max-height: none; overflow: visible; margin: auto 0; }
  .lobby-karte::before, .lobby-karte::after, .pause-fenster::before, .pause-fenster::after { width: 22px; height: 22px; }
  .menue-kopf h1 { font-size: 40px; letter-spacing: 6px; }
  .menue-kopf { padding-right: 46px; }   /* Platz für den Vollbild-Knopf */
  .klasse-wahl > img { width: 50px !important; height: 50px !important; }
  .klassen-zeile { margin-top: -4px; }
  .klassen-zeile .knopf { padding: 6px 12px; font-size: 13px; }
  .menue-kopf h2, .pause-fenster h2 { font-size: 28px; letter-spacing: 6px; }
  .unterzeile { margin: -4px 0 0; letter-spacing: 4px; font-size: 11px; }
  .abschnitt { font-size: 15px; margin-top: 2px; }
  .knopf { font-size: 15px; padding: 9px 14px; letter-spacing: 2px; }
  .knopf.gold { font-size: 17px; }
  .menue-knoepfe { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .menue-knoepfe .knopf.gold { padding: 11px 10px; font-size: 18px; letter-spacing: 3px; }
  .muenz-anzeige { font-size: 20px; }
  input:not([type]), select, .beitreten input { padding: 7px 10px; font-size: 16px; }
  .klassen { gap: 8px; }
  .klasse-wahl { padding: 8px 6px 20px; }
  .klasse-wahl img { width: 58px; height: 58px; }
  .klasse-wahl b { font-size: 16px; margin-top: 4px; }
  .klasse-wahl small { display: none; }
  .klasse-wahl .icons img { width: 22px; height: 22px; }
  .klasse-wahl.aktiv, .klasse-wahl:hover { transform: translateY(-3px); }
  .km-klasse { grid-template-columns: 64px 1fr auto; gap: 10px; padding: 8px 10px; }
  .km-klasse img { width: 64px; height: 64px; }
  .km-text b { font-size: 20px; }
  .rl-karten { gap: 8px; }
  .rl-karte { min-height: 74px; }
  .rl-karte b { font-size: 17px; }
  .rl-code b { font-size: 22px; letter-spacing: 5px; }
  .lobby-liste { max-height: 38vh; }
  .rl-spieler { max-height: 40vh; }
  .pause-klasse img { width: 40px; height: 40px; }
  .pause-klassen { grid-template-columns: repeat(6, 1fr); }
  .segmente button { font-size: 16px; padding: 8px 6px; }
  .upgrade-liste { grid-template-columns: repeat(3, 1fr); max-height: 46vh; }
  .steuerung { font-size: 13px; }

  /* Aufstieg: Karten nebeneinander statt untereinander */
  #aufstieg { justify-content: center; }
  #aufstieg h2 { font-size: 40px !important; letter-spacing: 6px; margin: 0 0 6px; }
  #aufstieg-abzeichen { display: none; }
  .aufstieg-bild { width: 70px; height: 70px; border-radius: 12px; }
  .aufstieg-unter { margin: -4px 0 8px; font-size: 14px; }
  .karten-reihe { gap: 10px; width: 96vw; }
  .spalte { width: 100%; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px; }
  .spalte .wer, .spalte .wahl-timer, .spalte .gewaehlt { width: 100%; text-align: center; }
  .karten-reihe .wahl { flex: 1 1 0; min-width: 0; width: auto; min-height: 0; padding: 10px 12px; gap: 10px; }
  .wahl img { width: 46px; height: 46px; }
  .wahl .text { font-size: 18px; }
  .status { margin-top: 10px; font-size: 16px; }
  .status.countdown { font-size: 38px; }

  /* Spielende */
  .gross-rot { font-size: 46px !important; margin: 0 0 8px; }
  #ende { justify-content: center; }
  #ende-werte { font-size: 16px; padding: 8px 16px; margin-bottom: 10px; }
  #ende .knopf { min-width: 220px; margin-top: 4px; }

  /* Ladebildschirm */
  #laden { justify-content: center; }
  .lade-titel { font-size: 64px; }
  .lade-balken { margin-top: 8px; }
}