/* Mobile geometry has its own reserved areas. Loaded after the shared skins. */
#mobile-passive-dock,#mobile-actions-dock{display:none}
body.touch #hud{zoom:1!important;--mobile-font:12px}
body.touch.ui-s #hud{--mobile-font:11px}
body.touch.ui-l #hud,body.touch.ui-xl #hud{--mobile-font:13px}
body.touch #mobile-controls{padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
body.touch #hud .vitals{left:max(8px,env(safe-area-inset-left));top:max(8px,env(safe-area-inset-top));width:192px;min-height:0;padding:4px 7px 5px;grid-template-columns:28px minmax(0,1fr);gap:0 6px;border-radius:11px;transform:none!important;pointer-events:auto}
body.touch #hud #hud-portrait{display:block;width:28px;height:34px;border-radius:7px;background:rgba(12,24,28,.22)}
body.touch #hud .vital-values{gap:2px}
body.touch #hud .vital-head{display:flex;flex-wrap:nowrap;align-items:center;gap:3px;min-width:0}
body.touch #hud .vital-head strong{font-size:var(--mobile-font);line-height:14px;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.touch #hud .vital-head .tag{font-size:9px;line-height:13px;flex:none;padding:0 3px;border-radius:4px;background:rgba(16,32,36,.16)}
body.touch #hud .held-icons{display:inline-flex;align-items:center;gap:2px;flex:none;margin:0}
body.touch #hud .held-icons:empty{display:none}
body.touch #hud .held-icons>*{width:13px;height:13px;min-width:13px;min-height:13px;padding:0;border-radius:3px}
body.touch #hud .held-icons :is(img,svg){width:11px;height:11px}
body.touch #hud .meter-row{grid-template-columns:minmax(0,1fr) 44px;gap:4px}
body.touch #hud .meter-label,body.touch #hud #xp-label{display:none}
body.touch #hud .meter-row:has(.xp){display:block}
body.touch #hud .meter-row .meter.hp{height:9px;margin:0;border-radius:5px}
body.touch #hud .meter-row .meter.xp{height:3px;margin:0;border-radius:3px}
body.touch #hud .meter-value{font:10px/11px Pixel,var(--mono)}
body.touch #hud #debuffs{top:calc(100% + 2px);max-width:100%;height:14px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;pointer-events:none}
body.touch #hud #debuffs .status-chip{flex:none;min-height:14px;height:14px;padding:0 4px;font-size:9px;line-height:12px;white-space:nowrap;border-radius:999px}
body.touch #hud #debuffs .status-chip svg{width:10px;height:10px}
body.touch #hud .minimap-box{top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));display:flex;flex-direction:row;align-items:center;gap:5px;padding:4px;width:auto;min-width:0;border-radius:11px;transform:none!important}
body.touch #hud #map-button,body.touch #hud #minimap{width:64px;height:64px;min-height:0;max-width:none;margin:0;padding:0;border-radius:8px}
body.touch #hud .minimap-caption{display:none}
body.touch #hud .hud-tools{display:flex!important;flex-direction:row;gap:4px;width:auto;margin:0;align-self:center}
body.touch #hud .hud-tools button{flex:none;width:44px;height:44px;min-width:44px;min-height:44px;padding:4px;border-radius:10px}
body.touch #hud #hud-mute{display:none}
body.touch #hud .hud-tools .tool-label{display:none}
body.touch #hud .mission{top:max(8px,env(safe-area-inset-top));display:inline-flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;width:auto;max-width:min(340px,calc(100vw - 380px));padding:2px 10px;gap:5px;bottom:auto;font-size:11px;border-radius:999px;pointer-events:none;white-space:nowrap}
body.touch #hud .mission #clock{font-size:16px;line-height:20px;margin:0}
body.touch #hud .mission #daynight-chip,body.touch #hud .mission #risk-chip{margin:0;padding:1px 5px;font-size:10px;height:18px;border-radius:999px}
body.touch #hud .mission #hot-chip{font-size:0;margin:0;padding:1px 5px;border-radius:999px}
body.touch #hud .mission #hot-chip::after{content:'🔥 ×2';font:10px/15px Pixel,var(--mono)}
body.touch #mobile-controls .mobile-stick small{display:none}
/* The playfield catches each thumb independently; buttons stay above it.
   Resting markers are only hints. A full-size pad appears at touchdown. */
body.touch #mobile-controls .mobile-touch-zone{position:absolute;width:50%;bottom:0;pointer-events:auto;touch-action:none;z-index:0}
body.touch #mobile-controls .mobile-control{z-index:2}
body.touch #mobile-controls .mobile-cancel{z-index:4}
body.touch #mobile-controls .mobile-cast-label{z-index:5}
body.touch #mobile-controls .mobile-stick{pointer-events:none;z-index:1;transition:none!important}
body.touch #mobile-controls .mobile-stick:not(.pressed) .stick-disc{opacity:.28;border-style:dashed}
body.touch #mobile-controls .mobile-stick:not(.pressed) .stick-disc i{opacity:.45}
body.touch #mobile-controls .mobile-stick.pressed .stick-disc{background:rgba(12,26,35,.25);border:2px solid #ecf8f3;box-shadow:0 0 0 3px #152c324d}
body.touch #mobile-controls .mobile-stick.pressed .stick-disc i{width:48px;height:48px;margin:-24px;background:#f4f0c3a6;border:2px solid #fff3b6;transition:none}
body.touch #mobile-controls .mobile-stick small{display:block;position:absolute;top:100%;width:140px;left:50%;transform:translateX(-50%);font:9px/12px Pixel,var(--mono);white-space:nowrap;color:#eef8ed;text-shadow:0 1px 2px #000}
body.touch #mobile-controls .mobile-stick.pressed small{display:none}
@media (orientation:landscape) and (max-height:480px){
  body.touch #mobile-controls .mobile-cast-label{display:none}
}
@media (orientation:landscape) and (max-height:340px){
  body.touch #mobile-controls .mobile-cancel{top:80px;width:44px;height:44px;font-size:28px}
  body.touch #mobile-controls .mobile-cancel small{display:none}
}
body.touch #mobile-controls .mobile-icon{transform:none}
body.touch #mobile-controls .ultimate .mobile-icon{transform:translateY(-3px)}
body.touch #mobile-controls .mobile-control small{font:9px/10px Pixel,var(--mono)}
body.touch #mobile-controls .mobile-cd{font-size:19px}
body.touch #mobile-controls .mobile-control[hidden]{display:none!important}
body.touch #mobile-passive-dock{position:fixed;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:5px;padding:3px 6px;border:1px solid #9eafa37a;border-radius:11px;background:#162a27d4;pointer-events:auto;z-index:4;height:52px;box-sizing:border-box}
body.touch #hud #mobile-passive-dock .innate-slot{position:relative;left:auto;top:auto;flex:none;transform:none;width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:2px;border-radius:8px;opacity:1}
body.touch #mobile-passive-dock .innate-power,body.touch #mobile-passive-dock .innate-state{display:none!important}
body.touch #mobile-passive-dock .innate-cd{top:10px;font-size:15px}
body.touch #mobile-passive-dock .innate-slot[data-state=ready]:not([data-charge=true]) .innate-icon{transform:none}
body.touch #hud #mobile-passive-dock .learned-passives{position:static;inset:auto;transform:none;display:flex;justify-content:flex-start;gap:5px;min-width:0;max-width:none;margin:0;padding:0;background:none;border:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;overscroll-behavior:contain;touch-action:pan-x}
body.touch #hud #mobile-passive-dock .learned-passive{width:44px;height:44px;min-width:44px;min-height:44px;border-radius:8px;touch-action:pan-x}
body.touch #hud #mobile-actions-dock{position:fixed;transform:translateX(-50%);display:flex;flex-direction:column;align-items:stretch;gap:6px;pointer-events:none;z-index:4;max-width:calc(100vw - 20px)}
body.touch #hud #mobile-actions-dock #prompt,body.touch #hud #mobile-actions-dock #learn-button{position:static;inset:auto;transform:none!important;box-sizing:border-box;width:100%;min-width:0;max-width:none;margin:0;min-height:44px;height:44px;padding:6px 10px;font:12px/15px Pixel,var(--mono);pointer-events:auto;overflow:hidden;border-radius:10px}
body.touch #hud #mobile-actions-dock #prompt{border:2px solid #405768;background:#fff8dc;color:#263c43;text-shadow:none;box-shadow:inset 0 0 0 2px #fff,0 3px 0 #243c4b;white-space:nowrap;text-overflow:ellipsis}
body.touch #hud #mobile-actions-dock #prompt kbd,body.touch #hud #mobile-actions-dock #prompt small{display:none}
body.touch #hud #mobile-actions-dock #learn-button{justify-content:center;font-size:12px;gap:5px}
body.touch #mobile-passive-dock[hidden],body.touch #mobile-actions-dock[hidden]{display:none!important}
body.touch #hud #mobile-actions-dock [hidden]{display:none!important}
/* Transient notices use the upper micro-ticker lane, never the playfield center or interaction/passive shelf. */
body.touch #hud-notices{gap:4px;pointer-events:none!important}
body.touch #hud-notices.touch-landscape #toast{position:relative;inset:auto;width:auto!important}
body.touch #hud-notices #toast{position:relative;overflow:hidden;padding:3px 10px 5px 6px;gap:5px;border-radius:999px;max-height:26px;pointer-events:none!important}
body.touch #hud-notices #toast::before{content:'';position:absolute;left:0;bottom:0;height:2px;width:100%;background:linear-gradient(90deg,#f5c84c,#ffe999);transform-origin:left center;animation:mobile-notice-bar var(--notice-ms,3200ms) linear forwards;pointer-events:none}
@keyframes mobile-notice-bar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
body.touch #hud-notices .notice-icon{width:18px;height:18px;border-radius:50%}
body.touch #hud-notices .notice-icon svg{width:12px;height:12px}
body.touch #hud-notices .notice-copy{min-width:0;max-width:min(260px,calc(100vw - 84px))}
body.touch #hud-notices .notice-copy strong{font:11px/14px Pixel,var(--mono);display:block;-webkit-line-clamp:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.touch #hud-notices[data-phase=run]:has(#hud-alerts>:not([hidden])) #toast,body.touch #hud-notices[data-phase=run]:has(#hud-bosses>:not([hidden])) #toast{display:none}
body.touch #hud-notices .notice-copy small,body.touch #hud-notices #toast::after{display:none}
body.touch #hud-notices :is(#boss-bar,#lair-bar,#extract-status){align-self:center;width:auto!important;max-width:min(280px,calc(100vw - 24px));display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 6px;padding:3px 8px;border-radius:8px;pointer-events:none!important}
body.touch #hud-notices :is(#boss-bar,#lair-bar,#extract-status) strong{font:10px/13px Pixel,var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
body.touch #hud-notices :is(.lb-title,#lair-bar small){display:none!important}
body.touch #hud-notices :is(.boss-hp,.lb-hp,#extract-status .meter){grid-column:1/-1;grid-row:2;height:5px;margin:0}
body.touch #hud-notices :is(#gas-warning,#alarm-chip){align-self:center;width:auto!important;max-width:min(260px,calc(100vw - 24px));padding:2px 8px;border-radius:999px;font:10px/13px Pixel,var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none!important}
body.touch :is(#region-banner,.level-banner,.boss-encounter-banner){top:calc(env(safe-area-inset-top,0px) + 34px)!important;bottom:auto!important;pointer-events:none!important;transform:translateX(-50%) scale(.82)!important}
@media(orientation:portrait){
 body.touch #hud .vitals{width:calc(100vw - 132px - env(safe-area-inset-left) - env(safe-area-inset-right));max-width:240px;grid-template-columns:24px minmax(0,1fr)}
 body.touch #hud #hud-portrait{width:24px;height:32px}
 body.touch #hud .minimap-box{display:grid;grid-template-columns:44px 44px;gap:4px}
 body.touch #hud #map-button{grid-column:1/-1;justify-self:center}
 body.touch #hud .hud-tools{grid-column:1/-1}
 body.touch #hud #mobile-actions-dock{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 body.touch #hud #mobile-actions-dock:has(>[hidden])>:not([hidden]){grid-column:1/-1}
 body.touch #hud .mission{top:max(78px,calc(env(safe-area-inset-top) + 60px))!important;left:calc((100vw - 116px)/2)!important;transform:translateX(-50%)!important;max-width:calc(100vw - 132px)!important;width:auto;font-size:10px}
 body.touch #hud #stealth-label{top:60px;max-width:calc(100vw - 120px);pointer-events:none}
}

body.touch #hud .mission #rift-chip{font-size:10px;line-height:15px;margin-top:0;padding:1px 5px;max-width:100%;border-radius:999px}
body.touch #hud #mobile-passive-dock.short-narrow{height:48px;padding-block:1px}
/* Short landscape screens keep both contextual actions below the player. */
@media(orientation:landscape) and (max-height:440px){
 body.touch #hud #mobile-actions-dock{display:grid;grid-template-columns:44px minmax(0,1fr);gap:6px}
 body.touch #hud #mobile-actions-dock:has(>[hidden])>:not([hidden]){grid-column:1/-1}
 body.touch #hud #mobile-actions-dock:has(#prompt:not([hidden])) #learn-button{font-size:0;padding:4px;gap:0;position:relative}
 body.touch #hud #mobile-actions-dock:has(#prompt:not([hidden])) #learn-button .learn-pending{position:absolute;top:0;right:0;padding:1px 2px;min-width:12px;font-size:10px}
}
/* v0.19.4 · El aviso no tapa el botín: al lado del panel o, si no cabe, espera oculto. */
body.touch #hud-notices.under-panel #toast{visibility:hidden}
body.touch #hud-notices.beside-panel #toast{position:relative;inset:auto;width:100%;white-space:normal;max-height:none;border-radius:8px}
body.touch #hud-notices.beside-panel .notice-copy strong{white-space:normal;overflow:visible;text-overflow:clip}
body:has(#search-panel:not([hidden])) .interaction{visibility:hidden}
/* v0.19.8 · Apaisado: minimapa algo más grande (la lupa ya no lo tapa: va debajo de la caja). */
@media(orientation:landscape){body.touch:not(.a11y-bigmap) #hud #map-button,body.touch:not(.a11y-bigmap) #hud #minimap{width:78px;height:78px}}
/* v0.19.11 · Botón de acción («Registrar…», «Abrir…», «Extraer…») como un cuadro de texto de Rojo Fuego con el botón A. */
body.touch #hud #mobile-actions-dock #prompt{display:flex;align-items:center;justify-content:flex-start;gap:8px;padding:4px 12px 4px 6px;border:3px solid #4a5878;border-radius:8px;background:#f8f8f8;color:#383840;
  box-shadow:inset 0 0 0 2px #9cc0e0,inset 0 0 0 4px #f8f8f8,0 3px 0 #202838;font:13px/1.2 Pixel,var(--mono);text-shadow:1px 1px 0 #d0d0c8;text-align:left;overflow:hidden;cursor:pointer}
body.touch #hud #mobile-actions-dock #prompt::before{content:"A";flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff9a88,#e04030 60%,#a82018);
  border:2px solid #601008;color:#fff;font:12px/1 Pixel,var(--mono);text-shadow:1px 1px 0 #601008;box-shadow:0 2px 0 #401008}
body.touch #hud #mobile-actions-dock #prompt::after{content:"▶";margin-left:auto;flex:none;font:10px/1 Pixel,var(--mono);color:#e05838;animation:fr-cursor .5s steps(2) infinite}
body.touch #hud #mobile-actions-dock #prompt:active{background:#e4eef8;transform:translateY(1px)!important;box-shadow:inset 0 0 0 2px #9cc0e0,inset 0 0 0 4px #e4eef8,0 2px 0 #202838}
@media (prefers-reduced-motion:reduce){body.touch #hud #mobile-actions-dock #prompt::after{animation:none}}
/* v0.19.11 · «Cancelar» al arrastrar una habilidad: encima del botón que arrastras (lo coloca js/mobile-controls.js), no en el centro. */
body.touch #mobile-controls .mobile-cancel{width:48px;height:48px;font-size:26px}
body.touch #mobile-controls .mobile-cancel small{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:3px;font:9px/1 Pixel,var(--mono);white-space:nowrap;color:#ffd8d4;text-shadow:0 1px 2px #000}