/* HUD layout: explicit rows and a single flow for expedition announcements. */
#hud .vitals{width:300px;display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:0 9px;padding:9px 10px;min-height:0}
#hud #hud-portrait{width:42px;height:52px;grid-row:1;align-self:center}
#hud .vital-values{min-width:0;display:grid;gap:5px}
#hud .vital-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:4px 8px;margin:0}
#hud .vital-head strong{grid-column:auto;font:15px/20px Pixel,var(--mono);max-width:none;min-width:0;text-overflow:ellipsis}
#hud .vital-head .tag{font:11px/20px Pixel,var(--mono);white-space:nowrap;justify-self:end}
#hud .held-icons{grid-column:1/-1;justify-self:end;margin:0;min-height:0;gap:3px}
#hud .held-icons:empty{display:none}
#hud .meter-row,#hud .fire-identity{display:grid;grid-template-columns:40px minmax(0,1fr) 46px;align-items:center;gap:5px;margin:0;min-width:0;font:10px/14px Pixel,var(--mono);color:#374d4d}
#hud .meter-label{font:10px/14px Pixel,var(--mono);color:#48605b}
#hud .meter-row .meter{margin:0;min-width:0;box-sizing:border-box;overflow:hidden;height:10px;border:2px solid #4b6163;border-radius:5px;background:#34474d}
#hud .meter-row .meter::before{display:none}
#hud .meter-row .meter.xp{height:6px;border-width:1px}
#hud .meter-value{font:10px/14px Pixel,var(--mono);color:#253e3a;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
#hud .fire-identity{cursor:help}
#hud .fire-identity>span{font:10px/14px Pixel,var(--mono);overflow:visible;white-space:nowrap;color:#795531}
#hud .fire-identity>i{width:auto;height:6px;border:1px solid #6d5b45;background:#473f36;border-radius:4px;min-width:0}
#hud .fire-identity>output{font:10px/14px Pixel,var(--mono);text-align:right;color:#795531;white-space:nowrap}
#hud #debuffs{grid-column:1/-1;min-width:0;margin-top:5px}
#hud #debuffs:empty{display:none}
#hud .minimap-caption{width:100%;min-height:30px;height:30px;gap:7px;margin-top:3px;background:#e4eacb;border:1px solid #92a5a3;border-radius:4px;color:#253c3d;font:14px/1 Pixel,var(--mono)}
#hud .minimap-caption svg{width:24px;height:24px;flex:none}
#hud .minimap-open:active{transform:none}
#hud .mission{width:clamp(220px,calc(100vw - 590px),420px);min-width:0;padding:0 6px;row-gap:2px}
#hud .mission-line{white-space:normal;flex-wrap:wrap;gap:4px 7px}

#hud-notices{position:fixed;z-index:26;display:flex;flex-direction:column;gap:7px;pointer-events:none;max-width:calc(100vw - 24px)}
#hud-alerts,#hud-bosses{display:flex;flex-direction:column;gap:6px;min-width:0}
#hud-alerts:has(>:not([hidden])):not([hidden]){display:flex}
#hud-bosses:has(>:not([hidden])):not([hidden]){display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));align-items:stretch}
#hud-alerts:not(:has(>:not([hidden]))),#hud-bosses:not(:has(>:not([hidden]))){display:none}
body #hud-notices :is(#toast,#boss-bar,#lair-bar,#gas-warning,#alarm-chip,#extract-status){position:relative;inset:auto;transform:none;zoom:1;width:100%;min-width:0;max-width:none;margin:0;box-sizing:border-box;pointer-events:none}
body #hud-notices #toast{display:flex;align-items:center;gap:9px;padding:9px 11px;white-space:normal;overflow:visible;text-overflow:clip;text-align:left;background:#fbf8e9;color:#283f40;border:2px solid #50696a;border-radius:8px;box-shadow:0 3px 0 #1a323d,inset 0 0 0 2px #d6dfd0;text-shadow:none;font:13px/1.4 Pixel,var(--mono);animation:notice-in .15s ease-out;backdrop-filter:none}
#hud-notices #toast[data-kind=event]{border-color:#b78a36;background:#fff3c7;box-shadow:0 3px 0 #695528,inset 0 0 0 2px #e4ce85}
#hud-notices #toast[data-kind=warning]{border-color:#b66344;background:#fff1da}
#hud-notices #toast[data-kind=region]{padding:7px 10px}
#hud-notices .notice-icon{display:grid;place-items:center;width:30px;height:30px;flex:none;color:#607f75;background:#dfe7d6;border-radius:5px}
#hud-notices [data-kind=event] .notice-icon{background:#f3d76e;color:#816127}
#hud-notices .notice-copy{min-width:0}
#hud-notices .notice-copy strong{display:block;font:14px/1.35 Pixel,var(--mono);overflow-wrap:anywhere}
#hud-notices .notice-copy small{display:block;margin-top:3px;font:11px/1.4 Pixel,var(--mono);color:#536663}
#hud-notices :is(#boss-bar,#lair-bar){padding:7px 10px;background:#fff5d9;border:2px solid #9a7942;border-radius:7px;box-shadow:0 2px 0 #483f33;text-shadow:none;color:#4a4138;font-family:Pixel,var(--mono);text-align:left}
#hud-notices :is(#boss-bar,#lair-bar) strong{font:13px/1.3 Pixel,var(--mono);letter-spacing:0;color:#694323}
#hud-notices :is(#boss-bar,#lair-bar) small{font:10px/1.2 Pixel,var(--mono);color:#615548}
#hud-notices .lb-tags{flex-wrap:wrap;justify-content:flex-end}
#hud-notices .lb-top{align-items:center}
#hud-notices :is(#gas-warning,#alarm-chip){padding:6px 9px;border-radius:6px;font:11px/1.4 Pixel,var(--mono);letter-spacing:0;text-shadow:none;animation:none}
#hud-notices #gas-warning{color:#fff4ff;background:#4a1a6a;border:2px solid #e2a8ff}
#hud-notices #alarm-chip{color:#fff4d9;background:#774132;border:2px solid #e8a16c}
#hud-notices.compact{gap:5px}
#hud-notices.compact #toast{padding:6px 8px;gap:6px}
#hud-notices.compact .notice-copy strong{font-size:12px}
#hud-notices.compact .notice-copy small{font-size:10px}
#hud-notices.compact :is(#boss-bar,#lair-bar){padding:5px 8px}
/* Focus the current fight; the other legendary remains marked on the map. */
#hud-bosses:has(#lair-bar:not([hidden])) #boss-bar{display:none}
#hud-alerts:has(#gas-warning:not([hidden])) :is(#alarm-chip,#extract-status),#hud-alerts:has(#extract-status:not([hidden])) #alarm-chip{display:none}
#hud-notices.compact :is(#boss-bar,#lair-bar){display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 6px;padding:4px 8px}
#hud-notices.compact :is(#boss-bar,#lair-bar) strong{font-size:11px;line-height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hud-notices.compact #boss-bar small{grid-column:2;grid-row:1;font-size:9px;line-height:14px;margin:0}
#hud-notices.compact :is(.boss-hp,.lb-hp){grid-column:1/-1;grid-row:2;height:8px;margin:0}
#hud-notices.compact .lb-top{display:contents}
#hud-notices.compact .lb-tags{grid-column:2;grid-row:1}
#hud-notices.compact #lair-bar small{display:none}
#hud-notices.compact #extract-status{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 6px;padding:4px 8px}
#hud-notices.compact #extract-status strong{font:11px/14px Pixel,var(--mono);margin:0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
#hud-notices.compact #extract-status .meter{grid-column:1/-1;grid-row:2;margin:0;height:5px}
#hud-notices.compact #extract-time{grid-column:2;grid-row:1;font:10px/14px Pixel,var(--mono);margin:0}
body #hud-notices.touch-landscape #toast{position:fixed;left:var(--message-left);top:auto;bottom:var(--message-bottom);width:var(--message-width)}
#hud-notices [hidden]{display:none!important}
body:has(#world-map:not([hidden])) #hud-notices{visibility:hidden}
body:has(#modal:not([hidden])) #hud-notices[data-phase=run] :is(#hud-alerts,#hud-bosses){visibility:hidden}
@keyframes notice-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){body #hud-notices #toast{animation:none}}
body.hc #hud-notices #toast{background:#fff!important;color:#11292c;border-color:#11292c}

body.touch #hud .vitals{width:216px;grid-template-columns:28px minmax(0,1fr);gap:0 5px;padding:6px}
body.touch #hud #hud-portrait{width:28px;height:38px}
body.touch #hud .vital-values{gap:4px}
body.touch #hud .vital-head{gap:4px}
body.touch #hud .vital-head strong{font-size:12px;line-height:16px}
body.touch #hud .vital-head .tag{font-size:10px;line-height:16px}
body.touch #hud .meter-row,body.touch #hud .fire-identity{grid-template-columns:40px minmax(0,1fr) 42px;gap:3px}
body.touch #hud .meter-label,body.touch #hud .meter-value,body.touch #hud .fire-identity>span,body.touch #hud .fire-identity>output{font-size:10px;line-height:12px}
body.touch #hud .meter-row .meter.hp{height:9px;border-width:1px}
body.touch #hud .meter-row .meter.xp{height:5px}
body.touch #hud .fire-identity>i{height:5px}
body.touch #hud #debuffs{margin-top:0}
body.touch #hud .mission{width:210px;padding:2px 4px;transform:translateX(-50%)!important}
body.touch #hud .minimap-caption{height:28px;min-height:28px;font-size:12px;gap:5px}
body.touch #hud .minimap-caption svg{width:22px;height:22px}
@media(max-width:760px){
  #hud .vitals{width:216px;grid-template-columns:28px minmax(0,1fr);gap:0 5px;padding:6px}
  #hud #hud-portrait{width:28px;height:38px}
  #hud .vital-head strong{font-size:12px;line-height:16px}
  #hud .vital-head .tag{font-size:10px;line-height:16px}
  #hud .meter-row,#hud .fire-identity{grid-template-columns:40px minmax(0,1fr) 42px;gap:3px}
  #hud .mission{width:200px;left:calc(50% + 25px)}
}
@media(min-width:761px) and (max-width:1100px){
  body.ui-l #hud .vitals,body.ui-xl #hud .vitals{width:240px;grid-template-columns:32px minmax(0,1fr);gap:0 6px}
  body.ui-l #hud #hud-portrait,body.ui-xl #hud #hud-portrait{width:32px;height:42px}
}
@media(max-width:540px) and (orientation:portrait){
  #hud .vitals,body.touch #hud .vitals{width:calc(100vw - 180px);max-width:none;grid-template-columns:minmax(0,1fr)}
  #hud #hud-portrait,body.touch #hud #hud-portrait{display:none}
  #hud .vital-head,body.touch #hud .vital-head{grid-template-columns:minmax(0,1fr)}
  #hud .vital-head .tag,body.touch #hud .vital-head .tag{justify-self:start;line-height:12px}
  #hud .mission,body.touch #hud .mission{top:150px;left:50%;width:calc(100vw - 24px);padding:0}
  body.touch #hud #learn-button{top:auto;bottom:230px}
}
/* v0.12.58 · Mensajes con aire de caja de texto de Pokémon Rojo Fuego: blanca, doble borde, texto con sombra de GBA y la flechita roja */
body #hud-notices #toast{background:#fcfcfc;color:#404040;border:3px solid #4c5c6c;border-radius:10px;box-shadow:inset 0 0 0 2px #f8f8f8,inset 0 0 0 4px #a8c0d0,0 3px 0 rgba(16,26,36,.55);padding:10px 30px 10px 12px;animation:notice-pop .24s steps(4) both}
#hud-notices .notice-copy strong{color:#404040;text-shadow:1px 1px 0 #d0d0c8}
#hud-notices .notice-copy small{color:#58646c;text-shadow:1px 1px 0 #e8e8e0}
#hud-notices #toast::after{content:'';position:absolute;right:12px;bottom:10px;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid #e0402c;animation:notice-arrow .9s steps(2) infinite}
#hud-notices #toast[data-kind=event]{border-color:#9c6c24;background:#fffaf0;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px #e8c878,0 3px 0 rgba(60,40,10,.55)}
#hud-notices #toast[data-kind=warning]{border-color:#a8483c;background:#fff8f4;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 4px #e8a090,0 3px 0 rgba(60,20,10,.55)}
#hud-notices #toast[data-kind=level] .notice-icon{background:#f8d860;color:#8a5a10}
#hud-notices #toast[data-kind=region]::after{display:none}
#hud-notices.compact #toast{padding:6px 24px 6px 8px}
#hud-notices.compact #toast::after{right:8px;bottom:7px}
@keyframes notice-arrow{50%{transform:translateY(2px)}}
@keyframes notice-pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* Starting passive: same physical slot on desktop and touch, explicit on/off. */
#hud .quick-main{display:contents}
#hud .quickbar .quick-slots{order:2}
#hud .innate-slot,#hud #mobile-controls .innate-slot{position:relative;isolation:isolate;flex:none;width:56px;height:54px;min-width:44px;min-height:44px;padding:3px;border:2px solid #40856b;border-radius:7px;background:#f0f8df;color:#294b40;box-shadow:0 3px 0 #294b45,inset 0 0 0 2px #fff8;overflow:hidden;display:grid;place-items:center;touch-action:none;user-select:none;cursor:pointer;order:1}
#hud #mobile-controls .innate-slot{position:absolute;border-radius:13px;opacity:var(--control-opacity,.9)}
#hud .innate-slot .innate-icon{display:grid;place-items:center;transform:translateY(-2px);pointer-events:none}
#hud .innate-icon img{image-rendering:pixelated}
#hud .innate-slot .innate-power{position:absolute;left:auto;right:2px;top:2px;width:max-content;box-sizing:border-box;border:0;border-radius:3px;min-width:14px;max-width:calc(100% - 4px);height:12px;padding:0 3px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;background:#344e5d;color:#fff;font:700 9px/12px var(--sans,sans-serif);letter-spacing:0;text-transform:none;box-shadow:0 1px 0 #162c36;z-index:3;pointer-events:none}
#hud #mobile-controls .innate-slot .innate-power{padding:0 2px;font-size:7px}
#hud .innate-slot:is([data-state=off],[data-state=locked],[data-state=spent]) .innate-power{opacity:.65}
#hud .innate-slot .innate-state,#hud #mobile-controls .innate-slot .innate-state{position:absolute;left:1px;right:1px;bottom:5px;font:8px/10px Pixel,var(--mono);text-align:center;color:inherit;text-shadow:none;white-space:nowrap;pointer-events:none;z-index:3}
#hud .innate-slot .innate-cd{position:absolute;inset:auto;top:12px;left:0;right:0;text-align:center;color:#fff6ce;font:16px/20px Pixel,var(--mono);text-shadow:1px 1px 0 #172f3c,-1px -1px 0 #172f3c,1px -1px 0 #172f3c,-1px 1px 0 #172f3c;z-index:3;pointer-events:none}
#hud .innate-slot .innate-progress{position:absolute;bottom:0;left:0;width:var(--innate-progress,0%);height:3px;background:#c39829;pointer-events:none}
#hud .innate-slot:is([data-state=cooldown],[data-state=charging]){border-color:#b58b32;background:#f7eac5;color:#614820}
#hud .innate-slot:is([data-state=cooldown],[data-state=charging],[data-state=using]) .innate-icon{opacity:.35}
#hud .innate-slot[data-state=off]{border-color:#889498;background:#dce1df;color:#525e64;border-style:dashed;box-shadow:0 3px 0 #4e5d63,inset 0 0 0 2px #fff6}
#hud .innate-slot[data-state=off] .innate-icon{filter:grayscale(1);opacity:.45}
#hud .innate-slot[data-state=off] .innate-power{background:#5f6b72}
#hud .innate-slot:is([data-state=locked],[data-state=spent]){background:#e5e1d7;border-color:#8e877b;color:#625f59}
#hud .innate-slot:focus-visible{outline:3px solid #fff09d;outline-offset:3px}
#hud .innate-slot.pending .innate-power{background:#9b772b}
#hud .innate-slot[data-charge=true][data-state=ready]{border-color:#b78e21;background:#fff0ac;color:#59400d;box-shadow:0 3px 0 #72551a,inset 0 0 0 2px #fff7d8,0 0 10px #ffdc6260}
#hud .innate-slot[data-charge=true][data-state=ready] .innate-icon{opacity:.22}
#hud .innate-slot[data-charge=true][data-state=ready] .innate-cd{font-size:12px;color:#fff8cd}
#hud .innate-slot[data-charge=true] .innate-progress{height:4px;background:#c79627}
#hud .innate-slot[hidden]{display:none!important}
#hud .innate-tooltip,.hud-tooltip{position:fixed;z-index:90;box-sizing:border-box;max-height:calc(100vh - 16px);overflow:auto;padding:11px 13px;background:#fff9e9;color:#314748;border:2px solid #596e69;border-radius:9px;box-shadow:0 4px 0 #243e44,0 7px 20px #0005;font:13px/1.45 var(--sans,sans-serif);pointer-events:none;text-shadow:none}
#hud .innate-tooltip strong,.hud-tooltip strong{display:block;font:14px/1.4 Pixel,var(--mono);color:#2a5345}
#hud .innate-tooltip p,.hud-tooltip p{margin:7px 0}
#hud .innate-tooltip small,.hud-tooltip small{display:block;margin-top:8px;border-top:1px solid #d1d8c5;padding-top:7px;font:11px/1.4 var(--sans,sans-serif);color:#53675e}
#hud .innate-timer,.hud-tooltip .innate-timer{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:3px 0;font-size:12px}
#hud .innate-timer b,.hud-tooltip .innate-timer b{flex:none;color:#86651f;font-variant-numeric:tabular-nums}
#hud .innate-tooltip[hidden],.hud-tooltip[hidden]{display:none!important}
#hud [data-hud-tip]{pointer-events:auto}
.hud-tooltip .innate-timer{display:grid;grid-template-columns:minmax(0,1fr) auto}
.hud-tooltip .innate-timer b{text-align:right}

/* Learned passives sit just above the quick slots, without permanent text. */
#hud .learned-passives{display:flex;justify-content:center;gap:5px;max-width:100%;margin:0 0 6px;padding:4px 6px;border:1px solid #b9cbb857;border-radius:8px;background:#14252abf;pointer-events:auto}
#hud .learned-passives[hidden]{display:none!important}
#hud .learned-passive{position:relative;isolation:isolate;display:grid;place-items:center;flex:none;width:36px;height:36px;min-width:36px;min-height:36px;padding:3px;border:1px solid #91a9a0;border-radius:6px;background:#243a3bea;color:#fff8db;box-shadow:0 2px 0 #10252c;cursor:help;touch-action:manipulation;overflow:hidden;transform:none}
#hud .learned-passive:hover{background:#3a5353;border-color:#fff1b9;transform:none}
#hud .learned-passive:focus-visible{outline:3px solid #ffdf7b;outline-offset:2px}
#hud .learned-passive-icon{display:grid;place-items:center;pointer-events:none}
#hud .learned-passive-cd{position:absolute;inset:0;display:grid;place-items:center;color:#fff9d7;font:14px/1 Pixel,var(--mono);text-shadow:1px 1px 0 #11232d,-1px -1px 0 #11232d,1px -1px 0 #11232d,-1px 1px 0 #11232d;z-index:2;pointer-events:none}
#hud .learned-passive-progress{position:absolute;bottom:0;left:0;height:3px;width:var(--passive-progress,0%);background:#e9bd5e;pointer-events:none}
#hud .learned-passive[data-state=cooldown]{border-color:#d6af5b}
#hud .learned-passive[data-state=cooldown] .learned-passive-icon{opacity:.3}
#hud .learned-passive[data-state=using]{border-color:#9cdbb2;box-shadow:0 0 0 1px #9cdbb2,0 2px 0 #10252c}
#hud .learned-passive:is([data-state=locked],[data-state=spent],[data-state=off]) .learned-passive-icon{opacity:.4;filter:grayscale(1)}
body.touch #hud .learned-passives{position:fixed;left:50%;bottom:calc(8px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);max-width:calc(100vw - 24px);margin:0;padding:4px 6px;z-index:5;overflow-x:auto;overscroll-behavior:contain}
body.touch #hud .learned-passive{width:40px;height:40px;min-width:40px;min-height:40px}
body.touch #mobile-controls{padding-bottom:calc(env(safe-area-inset-bottom,0px) + var(--passive-hud-space,0px))}
/* v0.19.8 · Avisos durante la partida: una ficha pequeña bajo el reloj y la salida, del ancho del texto, sin tapar la vista. */
body #hud-notices[data-phase=run] #toast{align-self:center;width:auto!important;max-width:min(100%,380px);padding:3px 9px 3px 4px;gap:6px;border-radius:8px;background:rgba(251,248,233,.93);box-shadow:0 2px 0 #1a323d;font-size:12px}
#hud-notices[data-phase=run] #toast .notice-icon{width:20px;height:20px;border-radius:4px}
#hud-notices[data-phase=run] #toast .notice-icon svg{width:14px;height:14px}
body #hud-notices[data-phase=run] #toast .notice-copy strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;line-height:15px;white-space:normal}
#hud-notices[data-phase=run] #toast .notice-copy small{display:none}
#hud-notices[data-phase=run] #toast::after{display:none}
body.touch #hud-notices[data-phase=run] #toast{max-width:min(100%,280px)}
body.touch #hud-notices[data-phase=run] #toast .notice-copy strong{font-size:11px;line-height:14px}
body.touch #hud-notices.beside-panel[data-phase=run] #toast{align-self:flex-start}
