/* Mobile Dungeon-Erkundung (assets/js/mobile-explore.js, interact-hint.js):
   Spielbild = ganzer Bildschirm · Menüleiste unten → Menü-Knopf ☰ (Vollbild-Popup) · Aktions-Knopf unten rechts (ausgegraut ohne Ziel) */

/* Aktions-Knopf (JS schaltet .ihint-fab nur im mobilen Layout) */
.ihint.ihint-fab {
  left: auto; right: calc(14px + env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: none; animation: none;
  width: 74px; height: 74px; padding: 0; border-radius: 50%; flex-direction: column; justify-content: center; gap: 0; z-index: 1400;
  background: radial-gradient(circle at 35% 30%, #ffe38a, #f2b73a); box-shadow: 3px 4px 0 var(--cs-ink), 0 0 0 4px rgba(242, 201, 76, 0.35);
}
.ihint.ihint-fab .ih-ico { font-size: 1.9rem; line-height: 1; }
.ihint.ihint-fab .ih-mini { font-size: 0.56rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 1px; }
.ihint.ihint-fab.is-idle { background: #b9b2a6; box-shadow: 2px 3px 0 var(--cs-ink); filter: grayscale(1); opacity: 0.6; cursor: default; }
.ihint.ihint-fab:not(.is-idle) { animation: ihintPulse 1.3s ease-in-out infinite; }
@keyframes ihintPulse { 0%, 100% { box-shadow: 3px 4px 0 var(--cs-ink), 0 0 0 4px rgba(242, 201, 76, 0.35); } 50% { box-shadow: 3px 4px 0 var(--cs-ink), 0 0 0 10px rgba(242, 201, 76, 0.15); } }

/* Menü-Knopf */
.mobile-menu-btn { display: none; position: fixed; top: calc(8px + env(safe-area-inset-top, 0px)); left: calc(8px + env(safe-area-inset-left, 0px)); z-index: 1300; align-items: center; justify-content: center; flex-direction: column; width: 56px; height: 50px; padding: 0; border: 3px solid var(--cs-ink); border-radius: 12px; background: linear-gradient(180deg, #fdf3e1, #fbe7c8); color: var(--cs-ink); box-shadow: 2px 3px 0 var(--cs-ink); cursor: pointer; }
.mobile-menu-btn .mm-ico { font-size: 1.35rem; line-height: 1; font-weight: 900; }
.mobile-menu-btn .mm-lbl { font-size: 0.54rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; }

/* Vollbild-Menü */
.mobile-menu-overlay { position: fixed; inset: 0; z-index: 3200; display: flex; align-items: center; justify-content: center; padding: 14px; background: rgba(8, 17, 31, 0.86); backdrop-filter: blur(3px); animation: fadeIn 0.18s ease; }
.mm-card { width: min(520px, 100%); max-height: calc(100dvh - 28px); display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 3px solid var(--cs-ink); border-radius: 16px; background: linear-gradient(180deg, #fdf3e1, #fbe7c8); box-shadow: 5px 5px 0 var(--cs-ink); }
.mm-head { display: flex; align-items: center; justify-content: space-between; }
.mm-head strong { font-size: 1.15rem; font-weight: 900; color: var(--cs-ink); }
.mm-x { appearance: none; width: 40px; height: 40px; border: 2.5px solid var(--cs-ink); border-radius: 10px; background: #fffdf6; color: var(--cs-ink); font-size: 1.1rem; font-weight: 900; cursor: pointer; box-shadow: 2px 2px 0 var(--cs-ink); }
.mm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; overflow-y: auto; overscroll-behavior: contain; }
.mm-tile { appearance: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 92px; padding: 8px; border: 3px solid var(--cs-ink); border-radius: 14px; background: #fffdf6; color: var(--cs-ink); box-shadow: 3px 3px 0 var(--cs-ink); cursor: pointer; font: 800 0.95rem/1.15 inherit; }
.mm-tile:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--cs-ink); }
.mm-t-ico { font-size: 2.1rem; line-height: 1; }
.mm-tile.mm-on { background: #bbf7d0; }
.mm-tile.mm-exit { background: #ffd9d6; }

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  body.in-explore:not(.in-combat) .mobile-menu-btn { display: flex; }
  body.in-explore:not(.in-combat) #noticeBtn {
    top: calc(70px + env(safe-area-inset-top, 0px)); left: calc(8px + env(safe-area-inset-left, 0px));
    width: 48px; height: 48px; animation: baseNoticePulse 1.1s ease-in-out infinite alternate;
  }
  body.in-explore:not(.in-combat) #menuPopupBar { display: none !important; }
  body.in-explore:not(.in-combat) .main,
  body.in-explore:not(.in-combat) .side { display: none !important; }
  body.in-explore:not(.in-combat) .shell { padding: 0 !important; }
  body.in-explore:not(.in-combat) .app { width: 100% !important; max-width: none !important; height: 100dvh !important; margin: 0 !important; padding: 0 !important; display: block !important; }
  body.in-explore:not(.in-combat) .scene { position: fixed !important; inset: 0 !important; width: 100% !important; height: 100dvh !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; flex: none !important; }
  body.in-explore:not(.in-combat) .scene .room-visual.dg-view { inset: 0 !important; }
  /* Kompakte Lebensanzeige oben neben dem Menü-Knopf (Räume/Attribute/Begleiter hinter dem Menü) */
  body.in-explore:not(.in-combat) .wolf-bar { position: fixed !important; top: calc(8px + env(safe-area-inset-top, 0px)); left: calc(72px + env(safe-area-inset-left, 0px)); right: auto !important; bottom: auto !important; width: auto !important; max-width: calc(100vw - 170px); z-index: 1250; min-height: 0 !important; height: auto !important; padding: 4px 9px !important; border-width: 2px !important; border-radius: 10px !important; box-shadow: 2px 3px 0 var(--cs-ink) !important; margin: 0 !important; }
  body.in-explore:not(.in-combat) .wolf-bar .wolf-left,
  body.in-explore:not(.in-combat) .wolf-bar .wolf-right,
  body.in-explore:not(.in-combat) .wolf-bar .wolf-companions,
  body.in-explore:not(.in-combat) .wolf-bar .wolf-status { display: none !important; }
  body.in-explore:not(.in-combat) .wolf-bar .wolf-center { padding: 0 !important; min-width: 120px; }
  body.in-explore:not(.in-combat) .wolf-bar .wolf-face-wrap { width: 30px !important; height: 34px !important; }
  /* Raum-Ausgänge („Unbekannten Raum öffnen?“) lassen die Ecken für Aktions-Knopf frei */
  body.in-explore:not(.in-combat) .dg-exits { left: 12px !important; right: 100px !important; bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* Solange ein Menü-/Popup-Fenster offen ist, liegen Menü-Knopf, Lebensanzeige, Aktions-Knopf und Raum-Ausgänge nicht darüber */
body.menu-popup-open .mobile-menu-btn, body.popup-open .mobile-menu-btn,
body.menu-popup-open .ihint, body.popup-open .ihint,
body.menu-popup-open.in-explore .wolf-bar, body.popup-open.in-explore .wolf-bar,
body.menu-popup-open .dg-exits, body.popup-open .dg-exits { display: none !important; }

/* Auto-Knopf links neben dem Aktions-Knopf; bei laufender Auto-Erkundung großer STOPP-Knopf an derselben Stelle */
.mobile-auto-btn { display: none; position: fixed; right: calc(98px + env(safe-area-inset-right, 0px)); bottom: calc(26px + env(safe-area-inset-bottom, 0px)); z-index: 1400; width: 58px; height: 58px; padding: 0; border: 3px solid var(--cs-ink); border-radius: 50%; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(180deg, #e8dcff, #c9b8f5); color: var(--cs-ink); box-shadow: 2px 3px 0 var(--cs-ink); cursor: pointer; }
.mobile-auto-btn .ma-ico { font-size: 1.5rem; line-height: 1; }
.mobile-auto-btn .ma-lbl { font-size: 0.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 1px; }
.mobile-auto-btn.is-stop { width: 92px; height: 92px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); right: calc(96px + env(safe-area-inset-right, 0px)); background: radial-gradient(circle at 35% 30%, #ff8a82, #e0392d); color: #fff; box-shadow: 3px 4px 0 var(--cs-ink), 0 0 0 5px rgba(224, 57, 45, 0.35); animation: maStopPulse 1.1s ease-in-out infinite; }
.mobile-auto-btn.is-stop .ma-ico { font-size: 2.3rem; }
.mobile-auto-btn.is-stop .ma-lbl { font-size: 0.7rem; }
@keyframes maStopPulse { 0%, 100% { box-shadow: 3px 4px 0 var(--cs-ink), 0 0 0 5px rgba(224, 57, 45, 0.35); } 50% { box-shadow: 3px 4px 0 var(--cs-ink), 0 0 0 12px rgba(224, 57, 45, 0.12); } }
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  body.in-explore:not(.in-combat) .mobile-auto-btn { display: flex; }
  body.in-explore:not(.in-combat) .auto-stop-btn, body.in-explore:not(.in-combat) #autoStopBtn { display: none !important; }
  body.in-explore:not(.in-combat) .dg-exits { right: 196px !important; }
}
body.menu-popup-open .mobile-auto-btn, body.popup-open .mobile-auto-btn { display: none !important; }

/* Mobile base: scenery fills the viewport; the HUD occupies only the corners. */
@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  body.in-base { overflow: hidden; }
  body.in-base #homeScreen {
    position: fixed; inset: 0; display: block; height: 100dvh; min-height: 0;
    padding: 0; overflow: hidden;
  }
  body.in-base #homeWrap:not(.tab-open) {
    display: block; width: 100%; height: 100%; max-width: none; max-height: none; overflow: hidden;
  }
  body.in-base .home-header, body.in-base .base-hint { display: none; }
  body.in-base .base-area { position: relative; display: block; width: 100%; height: 100%; }
  body.in-base .base-stage-wrap { position: absolute; inset: 0; }
  body.in-base #baseScene {
    position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0;
    aspect-ratio: auto; border: 0; border-radius: 0; padding: 0; box-shadow: none;
  }
  body.in-base .base-gridwrap { width: 100% !important; height: 100%; aspect-ratio: auto !important; }
  body.in-base .base-gridwrap > .base-grid { border: 0; border-radius: 0; box-shadow: none; }
  body.in-base .mobile-menu-btn { display: flex; border-radius: 8px; letter-spacing: 0; }
  body.in-base .mobile-menu-btn .mm-lbl { letter-spacing: 0; }
  body.in-base #noticeBtn {
    display: flex; top: calc(70px + env(safe-area-inset-top, 0px)); left: calc(8px + env(safe-area-inset-left, 0px));
    width: 48px; height: 48px; z-index: 1200; animation: none;
  }
  body.in-base.has-notice #noticeBtn { animation: baseNoticePulse 1.1s ease-in-out infinite alternate; }
  body.in-base #baseResBar {
    position: fixed; top: calc(8px + env(safe-area-inset-top, 0px)); right: calc(8px + env(safe-area-inset-right, 0px));
    z-index: 1200; display: flex; flex-direction: column; align-items: stretch; gap: 5px; pointer-events: none;
  }
  body.in-base #baseResBar .base-chip {
    min-width: 88px; padding: 4px 8px; font-size: 0.75rem; line-height: 1.2; border-radius: 8px;
    white-space: nowrap; letter-spacing: 0; font-variant-numeric: tabular-nums;
  }
  body.in-base #baseBuildBtn {
    position: absolute; top: auto; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); left: calc(14px + env(safe-area-inset-left, 0px));
    z-index: 40; min-height: 74px; max-width: calc(100% - 120px); padding: 10px 14px; border-radius: 8px;
    font-size: 1rem; letter-spacing: 0;
  }
  body.in-base #baseCancelMoveBtn {
    top: auto; right: auto; left: calc(14px + env(safe-area-inset-left, 0px));
    bottom: calc(108px + env(safe-area-inset-bottom, 0px)); max-width: calc(100% - 28px); min-height: 44px; z-index: 40;
  }
  body.in-base:has(.hi-open) #mobileMenuBtn,
  body.in-base:has(.hi-open) #noticeBtn,
  body.in-base:has(.hi-open) #baseResBar,
  body.in-base:has(#basePanel:not([hidden])) #mobileMenuBtn,
  body.in-base:has(#basePanel:not([hidden])) #noticeBtn,
  body.in-base:has(#basePanel:not([hidden])) #baseBuildBtn,
  body.in-base:has(#basePanel:not([hidden])) .ihint,
  body.in-base.base-dialog-open #mobileMenuBtn,
  body.in-base.base-dialog-open #noticeBtn { visibility: hidden; pointer-events: none; }
  body.in-base.menu-popup-open #baseResBar, body.in-base.popup-open #baseResBar,
  body.in-base.menu-popup-open #baseBuildBtn, body.in-base.popup-open #baseBuildBtn,
  body.in-base.menu-popup-open #baseCancelMoveBtn, body.in-base.popup-open #baseCancelMoveBtn { visibility: hidden; pointer-events: none; }
  body.in-base:has(#basePanel:not([hidden]):not([data-view="wegedit"])) #baseResBar { visibility: hidden; }
  body.in-base .base-panel[data-view="wegedit"] {
    position: absolute; top: auto; left: 8px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    width: auto; max-height: 42%; margin: 0;
  }
  body.in-base .achievement-toast.show {
    top: calc(148px + env(safe-area-inset-top, 0px));
    max-height: calc(100dvh - 264px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
  }
  body.in-base:has(#basePanel:not([hidden])) .achievement-toast.show { visibility: hidden; }
  body.in-base .hi-dlg-text, body.in-base .hi-dlg-btn { overflow-wrap: anywhere; }
}
@keyframes baseNoticePulse {
  from { box-shadow: 3px 3px 0 var(--cs-ink), 0 0 0 0 rgba(255, 216, 74, 0.4); }
  to { box-shadow: 3px 3px 0 var(--cs-ink), 0 0 0 7px rgba(255, 216, 74, 0.1); }
}
@media (prefers-reduced-motion: reduce) {
  body.in-base.has-notice #noticeBtn, body.in-explore:not(.in-combat) #noticeBtn { animation: none; }
}