/* MakerLand – Smartphone und Tablet.
   html.touch = Finger ist das Hauptzeigegerät (gesetzt in js/mobil.js).
   „Kompakt“ = Handy hoch (max. 720 px breit) oder quer (max. 500 px hoch). */

/* ---------- Spielwelt: Browser soll nicht selbst scrollen oder zoomen ---------- */
#game, #game canvas { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html.touch body { -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }

/* ---------- Hinweis = Aktionsknopf ---------- */
#hint { cursor: pointer; }
html.touch #hint {
  bottom: calc(14px + env(safe-area-inset-bottom));
  min-height: 48px; display: flex; align-items: center; gap: 8px;
  padding: 10px 20px 10px 16px; font-size: 16px; font-weight: 700;
  background: var(--accent); color: #fff; border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); animation: tipp-hoch .2s ease-out;
}
html.touch #hint::before { content: '👆'; font-size: 18px; }
html.touch #hint:active { background: var(--accent-dark); transform: translateX(-50%) scale(0.97); }
@keyframes tipp-hoch { from { opacity: 0; } }

/* ---------- Eingaben: ab 16 px zoomt iOS beim Antippen nicht ins Feld ---------- */
html.touch #chat-input, html.touch #agent-input { font-size: 16px; }

/* ---------- Größere Tippflächen ---------- */
html.touch #hud button.icon { width: 40px; height: 40px; }
html.touch #hud button, html.touch .chip { padding: 8px 13px; }
html.touch .agent-bar button { height: 40px; }
html.touch .agent-bar button.icon { width: 40px; }
html.touch .panel-bar a, html.touch .panel-bar button,
html.touch .agent-quelle-bar a, html.touch .agent-quelle-bar button {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
}
html.touch .agent-quellen button { padding: 7px 12px; font-size: 13.5px; }

/* ---------- Hilfe: Touch-Gesten oder Tasten ---------- */
#help-touch { display: none; }
html.touch #help-touch { display: table; }
html.touch #help-tasten { display: none; }
.tipp-knopf { display: inline-block; padding: 1px 9px; border-radius: 99px; background: var(--accent); color: #fff; font-weight: 700; font-size: 13px; }
#help-touch td:first-child { white-space: normal; width: 46%; font-weight: 600; }
@media (max-width: 560px) {
  .help-card { padding: 20px 18px 18px; }
  .help-card td:first-child { white-space: normal; }
  #help-tasten td:first-child { width: 50%; }
  .help-card td { font-size: 13.5px; }
}

/* ---------- Chat-Knopf (nur kompakt) ---------- */
#chat-toggle { display: none; }
#chat-zaehler {
  position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 99px; background: #e5484d; color: #fff; font: 700 12px/20px var(--font);
}

@media (max-width: 720px), (max-height: 500px) {
  .online-wort { display: none; }
  #hud { padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }

  #chat-toggle {
    position: fixed; z-index: 21; left: max(12px, env(safe-area-inset-left)); bottom: calc(14px + env(safe-area-inset-bottom));
    width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-size: 21px;
    background: var(--glass); color: var(--on-glass); border: 1px solid var(--glass-line); border-radius: 50%;
    backdrop-filter: blur(6px);
  }
  body.chat-offen #chat-toggle { background: var(--accent); border-color: rgba(255, 255, 255, 0.85); }

  /* Chat zugeklappt: nur der Knopf. Aufgeklappt: Fläche über dem Knopf, volle Breite */
  body:not(.chat-offen) #chat { display: none; }
  #chat {
    left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); width: auto;
    bottom: calc(70px + env(safe-area-inset-bottom));
    padding: 8px; border-radius: var(--radius); background: rgba(24, 28, 38, 0.92); border: 1px solid var(--glass-line);
    pointer-events: auto;
  }
  #chat-log { max-height: min(40vh, 260px); mask-image: none; }
  .msg { background: transparent; padding: 3px 4px; }
  body.chat-offen #hint { display: none !important; }

  /* Hinweis rechts neben dem Chat-Knopf, mittig im restlichen Platz */
  #hint, html.touch #hint {
    left: 72px; right: 12px; transform: none; margin: 0 auto; width: fit-content; max-width: calc(100vw - 84px);
  }
  html.touch #hint:active { transform: scale(0.97); }

  #agent-meldung { bottom: calc(74px + env(safe-area-inset-bottom)); }
  #toast, #conn { top: calc(64px + env(safe-area-inset-top)); }
}

/* Tablet hochkant: Chat links (360 px) und Hinweis teilen sich die Unterkante */
@media (min-width: 721px) and (max-width: 1100px) and (min-height: 501px) {
  #hint, html.touch #hint {
    left: 384px; right: 12px; transform: none; margin: 0 auto; width: fit-content; max-width: calc(100vw - 396px);
  }
  html.touch #hint:active { transform: scale(0.97); }
}

/* ---------- Agentenfenster: auf Handy und Tablet hochkant Vollbild ---------- */
@media (max-width: 900px), (max-height: 600px) {
  #agent {
    left: 0; top: var(--vvtop, 0px); transform: none; width: 100vw; height: var(--vvh, 100dvh);
    border: 0; border-radius: 0; box-shadow: none; background: rgb(24, 28, 38);
    padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
  }
  .agent-bar { padding: 8px 8px 8px 14px; font-size: 15px; }
  #agent-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #agent-log { padding: 12px; }
  .agent-msg { max-width: 94%; }
  #agent-form { padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); }
  #agent-quelle { border-left: 0; }
  #agent-quelle-frame { border-radius: 0; }
}
@media (max-width: 420px) {
  #agent-neu { font-size: 0 !important; width: 40px; padding: 0 !important; }
  #agent-neu::before { content: '↺'; font-size: 19px; }
}

/* ---------- Seitenfenster (Wiki, 360°): auf dem Handy Vollbild ---------- */
@media (max-width: 720px), (max-height: 500px) {
  #panel { width: 100vw !important; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
}

/* Quelle im Agentenfenster: auf dem Handy verdeckt sie das Gespräch, darum „zurück“ statt × */
@media (max-width: 900px) {
  #agent-quelle-zu { width: auto !important; padding: 0 12px; font-size: 0; }
  #agent-quelle-zu::before { content: '← Gespräch'; font-size: 14px; }
}