/* Touch HUD: the middle of the world belongs to the game, not to menus. */
#mobileControls{display:none}.touch-mode #mobileControls{display:contents}
.touch-mode{--touch-size:56px;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);overscroll-behavior:none;user-select:none;-webkit-user-select:none}
.touch-mode[data-touch-size=small]{--touch-size:48px}.touch-mode[data-touch-size=large]{--touch-size:64px}
.touch-mode .action-area,.touch-mode .touch-pad,.touch-mode .game-menu-rail,.touch-mode .world-controls,.touch-mode .world-menu-brand,.touch-mode .quest-panel,.touch-mode .minimap,.touch-mode .region-label,.touch-mode .in-world-lesson,.touch-mode .combat-log,.touch-mode .announcement,.touch-mode #interact{display:none!important}
.touch-mode:has(.game-popup) #touchMenu{visibility:hidden}
#mobileControls button{touch-action:manipulation;-webkit-user-select:none;user-select:none}
#touchMenu{position:absolute;right:calc(26px + var(--safe-right));top:calc(12px + var(--safe-top));width:54px;height:54px;z-index:1001;display:grid;justify-items:center;padding:3px;gap:0}#touchMenu canvas{width:29px;height:29px;pointer-events:none}#touchMenu span{font-size:10px}.mobile-notice{position:absolute;right:-5px;top:-5px;padding:1px 6px}
#touchContext{position:absolute;top:calc(74px + var(--safe-top));right:calc(26px + var(--safe-right));width:min(304px,calc(100vw - 24px - var(--safe-left) - var(--safe-right)));max-height:calc(100dvh - 98px - var(--safe-top) - var(--safe-bottom));overflow:auto;background:#233b2bf5;z-index:1002;padding:12px;box-shadow:0 0 0 3px #213626,4px 6px 0 #13271da8}
.touch-context-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.touch-context-heading>button{width:44px;height:44px}.touch-menu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.touch-menu-grid>button{display:grid;justify-items:center;gap:4px;padding:8px 3px;min-height:64px}.touch-menu-grid canvas{width:32px;height:32px;pointer-events:none}#touchInstallState{font:12px/1.5 'Trebuchet MS',sans-serif;color:#becaa4;margin:12px 0 0}#touchUpdate{margin-top:8px;padding:12px;background:#d0b574;color:#243623;width:100%}
.touch-topline{position:absolute;top:calc(102px + var(--safe-top));left:calc(12px + var(--safe-left));display:flex;align-items:center;gap:8px;pointer-events:none;max-width:calc(100% - 80px)}#touchPlace{max-width:145px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#touchLesson{pointer-events:auto;padding:8px;min-height:44px;font-size:11px}
.touch-mode .player-panel{left:calc(12px + var(--safe-left));top:calc(12px + var(--safe-top));width:212px;height:80px;padding:5px;gap:6px;pointer-events:none}.touch-mode .portrait{width:31px;height:39px}.touch-mode .portrait canvas{width:29px;height:35px}.touch-mode .portrait>span{left:7px;bottom:-7px}.touch-mode .unit-name{margin-bottom:3px}.touch-mode #combatState{display:none}.touch-mode .rune-row{margin-top:0}.touch-mode .bar{margin:3px 0}.touch-mode .energy{height:8px}
.touch-mode #buffStrip{top:calc(162px + var(--safe-top));left:calc(12px + var(--safe-left));max-width:205px;pointer-events:none}.touch-mode .buff-chip{padding:2px 4px}
.touch-mode #targetPanel,.touch-mode .buff-strip:not(:empty)~#targetPanel{left:calc(12px + var(--safe-left));top:calc(167px + var(--safe-top));width:205px;padding:6px;pointer-events:none}.touch-mode #targetEffect{max-width:155px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.touch-mode .cast{height:17px}
#touchStick{position:absolute;left:calc(18px + var(--safe-left));bottom:calc(32px + var(--safe-bottom));width:124px;height:124px;border:3px solid #cab3799c;box-shadow:inset 0 0 0 5px #203a27a6,0 3px 0 #18331f85;touch-action:none;pointer-events:auto;z-index:11}#touchStick.active{border-color:#f3d388;background:#3e603aa3}.stick-ring{position:absolute;inset:22px}.stick-north{position:absolute;top:5px;left:50%;transform:translateX(-50%)}#touchThumb{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:47px;width:47px;border:3px solid #d0b574;box-shadow:0 3px 0 #1c3426;pointer-events:none}
#touchActions{position:absolute;right:calc(12px + var(--safe-right));bottom:calc(29px + var(--safe-bottom));z-index:12;pointer-events:none;width:calc(var(--touch-size)*3 + 16px)}.touch-action-head{display:flex;justify-content:flex-end;gap:8px;margin-bottom:8px;pointer-events:auto}#touchPage{width:66px;height:38px}#touchConfigure{width:42px;height:38px;font-size:21px}#touchSkills{display:grid;grid-template-columns:repeat(3,var(--touch-size));gap:8px;pointer-events:auto}
#touchActions .touch-skill{position:relative;min-width:0;width:var(--touch-size);height:var(--touch-size);padding:4px;overflow:hidden;touch-action:none;pointer-events:auto}#touchActions .touch-skill:hover{transform:none}#touchActions canvas{width:100%;height:100%;pointer-events:none}#touchActions .cooldown{font-size:17px}#touchSpecials{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}#touchActions .touch-special{width:50px;height:50px;padding:5px}#touchActions .touch-special small{position:absolute;left:0;right:0;bottom:0;z-index:4}
#touchUtility{position:absolute;left:calc(32px + var(--safe-left));bottom:calc(168px + var(--safe-bottom));display:flex;gap:8px;z-index:12}#touchUtility button{width:48px;height:48px;display:grid;justify-items:center;line-height:1;padding:4px}#touchCancelAim{position:absolute;bottom:calc(272px + var(--safe-bottom));right:calc(12px + var(--safe-right));padding:10px;z-index:1001;min-height:44px}
.touch-mode .rpg-xp{height:16px;padding-bottom:var(--safe-bottom);box-sizing:content-box}.touch-mode #toast{left:calc(12px + var(--safe-left));top:auto;bottom:calc(231px + var(--safe-bottom));width:175px;max-width:44%;padding:7px;pointer-events:none}
.touch-mode .popup-titlebar{height:45px;min-height:45px}.touch-mode .popup-titlebar button{width:44px;height:44px;min-width:44px}.touch-mode .popup-body{padding:12px;overscroll-behavior:contain;touch-action:pan-y}.touch-mode .popup-body button:not(.item-slot):not(.icon-skill):not(.talent-node){min-height:45px}.touch-mode .popup-body p{line-height:1.6}.touch-mode .popup-body .bag-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.touch-mode .popup-body .item-slot{min-height:44px}.touch-mode .popup-body .icon-skillbook{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.touch-mode .book-actionbar{display:none}.touch-mode .game-popup .atlas-layout{grid-template-columns:1fr}.touch-mode .popup-body .atlas-paper{height:220px}.touch-mode .popup-body .atlas-sidebar{max-height:none}.touch-mode .popup-body kbd:not(.touch-kbd){display:none}.touch-mode kbd.touch-kbd{display:inline-block;padding:1px 6px;border:1px solid #bda16a;border-radius:3px;background:#2a4230;color:#f0dfb2;font:bold 10px 'Trebuchet MS',sans-serif;vertical-align:baseline}.touch-mode .book-instruction{display:none}.touch-mode .popup-body .touch-book-help{display:block!important}.touch-mode .popup-body .touch-settings-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.touch-settings-row label{display:grid;gap:5px;font-size:11px}.touch-settings-row select{max-width:100%;min-width:0;min-height:42px;background:#213b2c;color:#e9d5a1;border:1px solid #a59d6a;padding:5px;font:12px 'Trebuchet MS',sans-serif}
.touch-editor-pages{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}.touch-editor-pages b{font-size:10px;color:#dfc790}.touch-slot-editor{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:8px}.touch-slot-editor button,.touch-skill-picker button{position:relative;min-width:0;aspect-ratio:1;padding:3px}.touch-slot-editor small{position:absolute;left:2px;top:1px;font-size:10px;text-shadow:1px 1px #122c1e}.touch-slot-editor canvas,.touch-skill-picker canvas{width:100%;height:auto;display:block;pointer-events:none}.touch-skill-picker{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.touch-skill-picker small{position:absolute;bottom:2px;left:0;right:0;font-size:10px;line-height:1.1}.touch-editor-footer{display:flex;gap:8px;margin-top:12px}.touch-editor-footer button{flex:1;padding:8px}
.touch-mode .item-tooltip{max-width:calc(100vw - 28px);max-height:calc(100dvh - 140px)}.touch-mode .popup-touchhelp footer,.touch-mode .popup-touchhelp kbd{display:none}.touch-mode .popup-touchhelp canvas{width:48px;height:48px}
@media(orientation:landscape){.touch-mode .player-panel{width:205px;height:80px}.touch-mode #targetPanel,.touch-mode .buff-strip:not(:empty)~#targetPanel{left:calc(234px + var(--safe-left));top:calc(12px + var(--safe-top));width:207px}.touch-mode #buffStrip{top:calc(102px + var(--safe-top));max-width:200px}.touch-mode .touch-topline{left:calc(456px + var(--safe-left));top:calc(15px + var(--safe-top));max-width:calc(100vw - 550px);display:block}.touch-mode #touchLesson{margin-top:5px}.touch-mode #touchStick{width:108px;height:108px;left:calc(24px + var(--safe-left));bottom:calc(27px + var(--safe-bottom))}.touch-mode #touchUtility{left:calc(24px + var(--safe-left));bottom:calc(147px + var(--safe-bottom))}.touch-mode #touchActions{bottom:calc(28px + var(--safe-bottom))}.touch-mode #touchContext{width:300px;max-height:calc(100dvh - 30px - var(--safe-top) - var(--safe-bottom));top:calc(12px + var(--safe-top));right:calc(92px + var(--safe-right))}.touch-mode #toast{bottom:calc(210px + var(--safe-bottom));max-width:170px}.touch-mode #touchCancelAim{bottom:calc(259px + var(--safe-bottom))}}
@media(max-width:370px) and (orientation:portrait){.touch-mode{--touch-size:50px}.touch-mode[data-touch-size=large]{--touch-size:54px}.touch-mode #touchStick{width:104px;height:104px;left:calc(12px + var(--safe-left))}.touch-mode #touchUtility{left:calc(12px + var(--safe-left));bottom:calc(146px + var(--safe-bottom))}.touch-mode .player-panel{width:204px}.touch-mode .touch-slot-editor{gap:9px}.touch-mode .popup-body{padding:9px}}
@media(max-height:420px) and (orientation:landscape){.touch-mode{--touch-size:48px}.touch-mode[data-touch-size=large]{--touch-size:52px}.touch-mode #touchActions .touch-special{width:44px;height:44px}.touch-mode #touchPage,.touch-mode #touchConfigure{height:34px}.touch-mode #touchCancelAim{bottom:calc(242px + var(--safe-bottom))}.touch-mode .touch-topline{display:none}}
@media(orientation:portrait){.touch-mode #targetPanel,.touch-mode .buff-strip:not(:empty)~#targetPanel{top:calc(102px + var(--safe-top))}.touch-mode:has(#targetPanel:not(.hidden)) .touch-topline{display:none}.touch-mode:has(#targetPanel:not(.hidden)) #buffStrip{top:calc(204px + var(--safe-top))}}
.touch-mode .popup-person .rpg-heading{margin-bottom:6px;padding-bottom:6px}.touch-mode .popup-person .rpg-heading .eyebrow{display:none}.touch-mode .popup-person .rpg-heading h2{margin:3px 0}.touch-mode .armory-banner{margin:6px 0 10px;gap:8px}.touch-mode .armory-banner .paper-doll{width:46px;padding:2px}.touch-mode .armory-banner .paper-doll canvas{width:40px;height:50px}.touch-mode .armory-banner p{display:none}.touch-mode .armory-banner button{padding:5px;margin-top:5px}.touch-mode .equipment-grid{gap:7px}@media(orientation:landscape){.touch-mode .armory-banner{display:none}.touch-mode .popup-person .rpg-heading{margin-bottom:9px}}

/* Wegmarke als Laufbefehl (P6): ein Tipp läuft zur goldenen Wegmarke. */
#touchWaypoint{pointer-events:auto;padding:8px 10px;min-height:38px;max-width:190px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Übersetzungsschicht: Reiter des Clanbuchs als Tipp-Ziele mindestens 44 px hoch. */
.touch-mode .book-tabs button{min-height:44px}

/* M-01/M-02 (Iteration 1, 2026-09-18): Tipp-Ziele ≥ 44 px und 8 px Abstand in Reitern, Sprungleisten, Rastern und Talentbaum. */
/* panel-pages.css lädt nach mobile.css und setzt eigene .touch-mode-Regeln: darum hier drei Klassen tief. */
.touch-mode .game-popup .book-tabs{gap:10px}.touch-mode .popup-body .section-jump{gap:9px;padding-top:11px}.touch-mode .popup-body .quest-tabs,.touch-mode .popup-body .panel-tabs,.touch-mode .popup-body.compact-panel .spec-tabs{gap:9px;margin-top:2px}
.touch-mode .popup-body.compact-panel .bag-toolbar,.touch-mode .popup-body.compact-panel .bag-search{margin:0 0 9px}.touch-mode .popup-body .bag-grid{gap:9px}.touch-mode .popup-body .armory-controls{gap:8px}.touch-mode .popup-body .equipment-grid{gap:8px}
.touch-mode .popup-body.compact-panel .atlas-toolbar,.touch-mode .popup-body.compact-panel .atlas-filters,.touch-mode .popup-body.compact-panel .atlas-zoom{gap:9px}.touch-mode .popup-body.compact-panel .icon-skillbook{gap:9px;margin:9px 0}
.touch-mode .popup-body .branch-node{width:44px;height:44px}.touch-mode .popup-body .kniff-grid{gap:9px}

/* M-07/M-08 (Iteration 2): Menü-Knopf 26 px von der rechten Kante (Ecke frei). Linkshand spiegelt Joystick, Kniffe, Ziel/Aktion, Abbruch und Toast; steht am Ende, damit es die Media-Regeln oben schlägt. */
.touch-mode[data-touch-hand=left] #touchStick{left:auto;right:calc(18px + var(--safe-right))}
.touch-mode[data-touch-hand=left] #touchActions{right:auto;left:calc(12px + var(--safe-left))}
.touch-mode[data-touch-hand=left] .touch-action-head,.touch-mode[data-touch-hand=left] #touchSpecials{justify-content:flex-start}
.touch-mode[data-touch-hand=left] #touchUtility{left:auto;right:calc(32px + var(--safe-right))}
.touch-mode[data-touch-hand=left] #touchCancelAim{right:auto;left:calc(12px + var(--safe-left))}
.touch-mode[data-touch-hand=left] #toast{left:auto;right:calc(12px + var(--safe-right))}
@media(orientation:landscape){.touch-mode[data-touch-hand=left] #touchStick{right:calc(24px + var(--safe-right))}.touch-mode[data-touch-hand=left] #touchUtility{right:calc(24px + var(--safe-right))}}
@media(max-width:370px) and (orientation:portrait){.touch-mode[data-touch-hand=left] #touchStick{right:calc(12px + var(--safe-right))}.touch-mode[data-touch-hand=left] #touchUtility{right:calc(12px + var(--safe-right))}}

/* M-07: Hofprobe-Kasten (tutorial-ui.css setzt feste 84/86 px) unter der Safe Area; Linkshand quer spiegelt ihn nach rechts, weil links dann die Kniffe stehen. Karten-Filter mindestens 45 px (panel-pages.css setzt 4 px Polster). */
.touch-mode .popup-body.compact-panel .atlas-filters button,.touch-mode .popup-body.compact-panel .atlas-zoom button{min-height:45px}

/* Iteration 3 · M-04/M-10: Lampe je Kniff-Platz über dem Knopf (Proc ✦ oder Abklingzeit) statt darunter; im Kampf nur Häufiges/Dringendes:
   Ortszeile und leere Plätze ausgeblendet (Plätze bleiben als Raster stehen, kein Versatz), Konfigurieren nur über Einstellungen und Langdruck. */
#touchActions .touch-slot{position:relative}#touchSkills .touch-slot{width:var(--touch-size);height:var(--touch-size)}
#touchActions .touch-lamp{position:absolute;left:50%;bottom:calc(100% - 2px);transform:translateX(-50%);min-width:22px;height:18px;padding:0 5px;border-radius:9px;background:#f3d388;color:#243623;font:bold 11px/18px 'Trebuchet MS',sans-serif;text-align:center;white-space:nowrap;pointer-events:none;z-index:6;box-shadow:0 1px 0 #1c3426}
#touchActions .touch-lamp.proc{background:#ffe08a;animation:touch-lamp .75s ease-in-out infinite alternate}
@keyframes touch-lamp{from{transform:translateX(-50%) scale(1)}to{transform:translateX(-50%) scale(1.15)}}
#touchConfigure{display:none}.touch-action-head{gap:0}
.touch-combat .touch-topline{display:none}.touch-combat #touchSkills .touch-empty{visibility:hidden}

/* Reserve space for the live class meter inside the movable player frame. */
.touch-mode .player-panel:has(#classMechanicArt:not([hidden])){height:128px}
.touch-mode #classMechanicArt{width:100%!important;height:auto!important;aspect-ratio:440/112}
@media(orientation:portrait){
 .touch-mode:has(#classMechanicArt:not([hidden])) .touch-topline{top:calc(150px + var(--safe-top))}
 .touch-mode:has(#classMechanicArt:not([hidden])) #targetPanel{top:calc(150px + var(--safe-top))}
}
/* Klein (≤ 370 px): fünf Reiter in einer Zeile trotz 8 px Abstand – Beschriftung 11 px (M-12: ≥ 10 px), kein Umbruch. */
@media(max-width:370px){.touch-mode .game-popup .book-tabs{gap:8px;flex-wrap:nowrap}.touch-mode .game-popup .book-tabs button{flex:1 1 0;width:0;padding:6px 2px;font-size:10px;letter-spacing:0;min-width:44px}}
/* Iteration 4 · M-12: kein Text unter 10 px im Touch-Modus (Fremd-CSS setzt 7–9 px): Kniff-Namen, Stufen, Beschriftungen, Zahlenzeilen. */
.touch-mode .popup-body .book-skill-name,.touch-mode .popup-body .kniff-book .kniff-tile,.touch-mode .popup-body .kniff-book .kniff-tile kbd,.touch-mode .popup-body .kniff-section>small,.touch-mode .popup-body .describe-numbers i,.touch-mode .popup-body .describe-numbers small,.touch-mode .popup-body .describe-hint,.touch-mode .popup-body .loot-line b,.touch-mode .popup-body .branch-node small,.touch-mode .popup-body .binding-clear,.touch-mode .popup-body .gear-doll button{font-size:10px}
.touch-mode .popup-body .talent-gate span{font-size:10px;width:56px;top:-16px}.touch-mode .popup-body .book-skill-origin{font-size:10px}

/* Langdruck-Fenster (2026-09-18): Details-Umschalter als volle Zeile, Beschreibungskarte nie breiter als das Fenster. */
.touch-mode .popup-detail .detail-toggle{display:block;width:100%;margin-top:10px;min-height:44px}
.touch-mode .popup-detail .describe-card,.touch-mode .popup-detail .tooltip-heading{max-width:100%}
/* Belohnungswahl mobil (2026-09-18): eine Zeile je Teil, Icon links, Name rechts, 56 px hoch. */
.touch-mode .reward-options{grid-template-columns:1fr!important;gap:8px}
.touch-mode .reward-option{display:grid!important;grid-template-columns:48px 1fr;column-gap:10px;justify-items:start!important;align-items:center;text-align:left;min-height:56px;padding:8px 10px!important}
.touch-mode .reward-option canvas{grid-row:span 2;width:44px!important;height:44px!important}
.touch-mode .reward-option strong{font-size:13px}
.touch-mode .reward-option small{font-size:11px}
/* Alles skaliert im Fenster (M-14): nichts breiter als das Fenster, Raster brechen um. */
.touch-mode .popup-body{overflow-x:hidden}
.touch-mode .popup-body>*,.touch-mode .popup-body .panel-section>*{max-width:100%;box-sizing:border-box}
.touch-mode .popup-body canvas,.touch-mode .popup-body img{max-width:100%;height:auto}
.touch-mode .popup-body .spec-tabs{grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}
.touch-mode .popup-body .weapon-summary>div,.touch-mode .popup-body .character-stats>div,.touch-mode .popup-body .secondary-stats>div{min-width:0;flex:1 1 44%}
.touch-mode .popup-body .wire-buttons{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.touch-mode .reward-option{background:var(--kraft,#D9B98A)!important;color:var(--ink,#2B2A26)!important;border-color:var(--kraft-2,#C9A46F)!important}
.touch-mode .reward-option strong{color:var(--ink,#2B2A26)}
.touch-mode .reward-option small{color:var(--ink-2,#4E4A41)}