.forest-touch-stick { display:none; }
.forest-touch-skills { display:contents; }
html[data-forest-mobile="true"] #app:not([data-forest-controls-visible="true"]) > .bottomhud,
html[data-forest-mobile="true"] #app:not([data-forest-controls-visible="true"]) > .forest-touch-skills,
html[data-forest-mobile="true"] #sharedScreen:not([data-forest-controls-visible="true"]) > .realm-controls,
html[data-forest-mobile="true"] #sharedScreen:not([data-forest-controls-visible="true"]) > .forest-touch-skills { display:none!important; }
html[data-forest-mobile="true"] .forest-touch-stick:not([hidden]) { display:block; position:absolute; z-index:16; width:128px; height:128px; left:calc(14px + var(--forest-safe-left,0px)); bottom:calc(14px + var(--forest-safe-bottom,0px)); touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
html[data-forest-mobile="true"] .forest-touch-pad { display:flex; align-items:center; justify-content:center; width:100%; height:100%; padding:0; border:2px solid #c5dfb06b; border-radius:50%; background:radial-gradient(circle,#658e6b24 0 42%,#162e29b8 43% 68%,#b5d09228 69%); box-shadow:0 4px 24px #0005,inset 0 0 0 8px #0b1f2833; touch-action:none; -webkit-tap-highlight-color:transparent; }
html[data-forest-mobile="true"] .forest-touch-pad[aria-disabled="true"] { opacity:.4; }
html[data-forest-mobile="true"] .forest-touch-thumb { display:block; width:49px; height:49px; flex:none; border-radius:50%; border:2px solid #d6edb9; background:radial-gradient(circle at 36% 30%,#b9d69a,#58785b); box-shadow:0 3px 9px #0006; pointer-events:none; }
html[data-forest-mobile="true"] .forest-touch-label { position:absolute; left:0; right:0; bottom:10px; text-align:center; font:600 8px/1 system-ui,sans-serif; letter-spacing:1px; color:#e3edc6bb; pointer-events:none; }
html[data-forest-mobile="true"] .forest-touch-stick.is-held .forest-touch-pad { border-color:#d9edb7; }
html[data-forest-mobile="true"] .bottomhud,
html[data-forest-mobile="true"] .realm-controls { position:static; display:contents; }
html[data-forest-mobile="true"] .bottomhud .controlhint { display:none; }
html[data-forest-mobile="true"] #dash,
html[data-forest-mobile="true"] #realmDash,
html[data-forest-mobile="true"] #ability,
html[data-forest-mobile="true"] #realmAbility { position:absolute; z-index:16; width:calc((100% - 180px) / 2); max-width:98px; min-width:60px; height:64px; min-height:64px; bottom:calc(14px + var(--forest-safe-bottom,0px)); padding:5px 4px; margin:0; touch-action:manipulation; border-radius:14px; font-size:24px; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:3px; }
html[data-forest-mobile="true"] #dash,
html[data-forest-mobile="true"] #realmDash { right:calc(14px + var(--forest-safe-right,0px)); }
html[data-forest-mobile="true"] #ability,
html[data-forest-mobile="true"] #realmAbility { right:calc(22px + min(98px,(100% - 180px) / 2) + var(--forest-safe-right,0px)); }
html[data-forest-mobile="true"] #dash .label,
html[data-forest-mobile="true"] #abilityLabel,
html[data-forest-mobile="true"] #realmDash small,
html[data-forest-mobile="true"] #realmAbility small { font:700 9px/1.15 system-ui,sans-serif; max-width:100%; white-space:normal; text-align:center; }
html[data-forest-mobile="true"] #heroSwitch,
html[data-forest-mobile="true"] #realmHeroes { position:absolute; left:calc(14px + var(--forest-safe-left,0px)); bottom:calc(148px + var(--forest-safe-bottom,0px)); display:flex; gap:5px; z-index:16; margin:0; padding:0; }
html[data-forest-mobile="true"] #heroSwitch button,
html[data-forest-mobile="true"] #realmHeroes button { display:flex; align-items:center; justify-content:center; gap:4px; min-height:44px; height:44px; min-width:64px; width:auto; padding:4px 7px; border-radius:8px; font-size:18px; touch-action:manipulation; }
html[data-forest-mobile="true"] #heroSwitch button span,
html[data-forest-mobile="true"] #realmHeroes button small { font:600 10px/1.1 system-ui,sans-serif; }
html[data-forest-mobile="true"] .forest-touch-skills { display:flex; position:absolute; right:calc(14px + var(--forest-safe-right,0px)); bottom:calc(86px + var(--forest-safe-bottom,0px)); z-index:16; width:calc(100% - 172px - var(--forest-safe-left,0px) - var(--forest-safe-right,0px)); max-width:260px; height:58px; gap:6px; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; overscroll-behavior:contain; touch-action:pan-x; padding-bottom:3px; }
html[data-forest-mobile="true"] .forest-touch-skills .class-skills:not([hidden]) { display:contents; }
html[data-forest-mobile="true"] .forest-touch-skills .class-passive { display:none; }
html[data-forest-mobile="true"] .forest-touch-skills .class-skill { flex:0 0 82px; width:82px; min-width:82px; max-width:82px; height:52px; min-height:52px; margin:0; padding:5px; gap:3px; border-radius:9px; touch-action:pan-x; }
html[data-forest-mobile="true"] .forest-touch-skills .class-skill-name { white-space:normal; text-align:center; font-size:9px; line-height:1.12; }
html[data-forest-mobile="true"] .forest-touch-skills .class-skill small,
html[data-forest-mobile="true"] .forest-touch-skills .class-skill span:not(.class-skill-name) { font-size:10px; }
@media (orientation:landscape) {
 html[data-forest-mobile="true"] .forest-touch-stick:not([hidden]) { width:100px; height:100px; left:calc(12px + var(--forest-safe-left,0px)); bottom:calc(8px + var(--forest-safe-bottom,0px)); }
 html[data-forest-mobile="true"] .forest-touch-thumb { width:40px; height:40px; }
 html[data-forest-mobile="true"] #heroSwitch,
 html[data-forest-mobile="true"] #realmHeroes { left:calc(124px + var(--forest-safe-left,0px)); bottom:calc(8px + var(--forest-safe-bottom,0px)); }
 html[data-forest-mobile="true"] #heroSwitch button,
 html[data-forest-mobile="true"] #realmHeroes button { min-width:48px; flex-direction:column; gap:1px; }
 html[data-forest-mobile="true"] #dash,
 html[data-forest-mobile="true"] #realmDash,
 html[data-forest-mobile="true"] #ability,
 html[data-forest-mobile="true"] #realmAbility { bottom:calc(8px + var(--forest-safe-bottom,0px)); height:60px; min-height:60px; width:76px; }
 html[data-forest-mobile="true"] #ability,
 html[data-forest-mobile="true"] #realmAbility { right:calc(98px + var(--forest-safe-right,0px)); }
 html[data-forest-mobile="true"] .forest-touch-skills { bottom:calc(76px + var(--forest-safe-bottom,0px)); width:250px; height:55px; }
}