/* Aether Hatch UI skin: dark inspection plate, copper inlay, stepped 3px rim.
   This is a shared chrome pass; skill-ui-nine-slice.css owns the icon/timer. */
:root{
  --aether-edge:#4D5554;
  --aether-copper:#BA844E;
  --aether-copper-hi:#D8A568;
  --aether-plate:#111416;
  --aether-inner:#0A0D0E;
  --aether-notch:polygon(0 6px,6px 6px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 6px) calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 6px),0 calc(100% - 6px));
}

/* Major UI surfaces share the same metal chassis. The battlefield keeps its
   art and receives only the outer hatch edge. */
#gameShell .battlefield,
#gameShell .battle-hud,
#gameShell .party-status,
#gameShell .boss-bar,
#gameShell .skill-zone,
#gameShell .journey-card,
#gameShell .growth-section,
#gameShell .forge-section,
#gameShell .inventory-section,
#gameShell .tuning-section,
#gameShell .relic-section,
#gameShell .activity-feed,
#gameShell .modal,
#gameShell .selected-equipment-card,
#gameShell .growth-hero-card,
#gameShell .growth-advice{
  border:3px solid var(--aether-edge) !important;
  border-radius:0 !important;
  background-color:var(--aether-plate) !important;
  background-image:linear-gradient(180deg,rgba(255,255,255,.035),transparent 28%,rgba(0,0,0,.12)) !important;
  box-shadow:inset 0 0 0 1px var(--aether-copper),inset 0 0 0 4px var(--aether-inner),0 3px #050606 !important;
}
#gameShell .battlefield,
#gameShell .battle-hud,
#gameShell .party-status,
#gameShell .boss-bar,
#gameShell .skill-zone,
#gameShell .journey-card,
#gameShell .growth-section,
#gameShell .forge-section,
#gameShell .inventory-section,
#gameShell .tuning-section,
#gameShell .relic-section,
#gameShell .activity-feed,
#gameShell .modal{
  clip-path:var(--aether-notch);
}
#gameShell .mobile-nav{
  border:3px solid var(--aether-edge) !important;
  border-radius:0 !important;
  background:#0F1315 !important;
  box-shadow:inset 0 0 0 1px var(--aether-copper),inset 0 0 0 4px var(--aether-inner) !important;
  clip-path:var(--aether-notch);
}

/* The battle HUD is a transparent overlay in the base layout; the hatch skin
   supplies its plate without changing its absolute positioning. */
#gameShell .battle-hud{isolation:isolate}
#gameShell .battle-hud .resource-hud{
  border-color:rgba(186,132,78,.55) !important;
  border-radius:0 !important;
  background:transparent !important;
}

/* Combat overlays stay transparent: the scene, HP, and top battle readout
   are not part of the metal UI chrome. */
#gameShell .battle-hud,
#gameShell .party-status,
#gameShell .boss-bar{
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  clip-path:none !important;
  backdrop-filter:none !important;
}
#gameShell .party-status .party-health .bar{
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:4px !important;
  background:rgba(6,8,9,.58) !important;
}
#gameShell .boss-bar .bar{
  border:0 !important;
  border-radius:8px !important;
  background:rgba(255,255,255,.09) !important;
}
#gameShell .party-status .party-health .bar,
#gameShell .boss-bar .bar{
  box-shadow:none !important;
}

/* Skill zone and cards use the same hatch metal, while role colours remain
   on the icon/accent so attack, utility, and defense stay distinguishable. */
#gameShell .skill-zone{padding:6px !important}
#gameShell .skill-toolbar{border-bottom:1px solid rgba(186,132,78,.42) !important}
#gameShell .skill{
  border-color:color-mix(in srgb,var(--skill-accent,var(--aether-copper)) 36%,var(--aether-edge)) !important;
  background-color:#111416 !important;
  background-image:linear-gradient(180deg,rgba(255,255,255,.035),transparent 30%,rgba(0,0,0,.14)) !important;
  box-shadow:inset 0 0 0 1px var(--aether-copper),inset 0 0 0 4px var(--aether-inner),0 2px #050606 !important;
}
#gameShell .skill::before{
  border:1px dashed rgba(186,132,78,.58) !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* The subtle dashed inspection line is the Aether Hatch rivet cue. It sits
   inside panels, never across the transparent combat overlays above. */
#gameShell .skill-zone,
#gameShell .journey-card,
#gameShell .growth-section,
#gameShell .forge-section,
#gameShell .inventory-section,
#gameShell .tuning-section,
#gameShell .relic-section,
#gameShell .activity-feed,
#gameShell .modal{
  position:relative;
  isolation:isolate;
}
#gameShell .skill-zone::before,
#gameShell .journey-card::before,
#gameShell .growth-section::before,
#gameShell .forge-section::before,
#gameShell .inventory-section::before,
#gameShell .tuning-section::before,
#gameShell .relic-section::before,
#gameShell .activity-feed::before,
#gameShell .modal::before{
  content:"";
  position:absolute;
  inset:9px;
  z-index:0;
  border:1px dashed rgba(186,132,78,.38);
  pointer-events:none;
}

/* Controls follow the same 3px inspection-plate edge. */
#gameShell .mobile-nav button,
#gameShell .skill-toolbar .auto-toggle,
#gameShell .primary-button,
#gameShell .draw-button,
#gameShell .equip-button,
#gameShell .forge-button,
#gameShell .special-select-button,
#gameShell .modal-close-button,
#gameShell .inventory-tabs button,
#gameShell .inventory-filter-tabs button,
#gameShell .rune-view-tabs button,
#gameShell .equipment-pagination button,
#gameShell .rate-details summary,
#gameShell .sort-equipment-button,
#gameShell .text-button,
#gameShell .reset-button{
  border:3px solid var(--aether-edge) !important;
  border-radius:0 !important;
  background:#151A1C !important;
  box-shadow:inset 0 0 0 1px var(--aether-copper),inset 0 0 0 4px var(--aether-inner) !important;
  clip-path:var(--aether-notch);
}
#gameShell .mobile-nav button.active,
#gameShell .inventory-tabs button.active,
#gameShell .inventory-filter-tabs button.active,
#gameShell .rune-view-tabs button.active{
  color:var(--ui-text) !important;
  background:#202627 !important;
  box-shadow:inset 0 -3px var(--menu-accent,var(--aether-copper)),inset 0 0 0 1px var(--aether-copper),inset 0 0 0 4px var(--aether-inner) !important;
}
#gameShell .auto-toggle.active{border-color:#6F9A79 !important}

/* Secondary tiles use a thinner inspection line so the screen remains quiet. */
#gameShell .relic-choice,
#gameShell .rune-inventory-item,
#gameShell .equipment-slot,
#gameShell .special-slot,
#gameShell .build-summary-item,
#gameShell .growth-stat-grid>div,
#gameShell .growth-shortcuts button,
#gameShell .material-panel-heading,
#gameShell .material-card,
#gameShell .equipment-space-heading{
  border:1px solid color-mix(in srgb,var(--aether-copper) 55%,var(--ui-line-soft)) !important;
  border-radius:0 !important;
  background:#151A1C !important;
  box-shadow:inset 0 0 0 1px rgba(10,13,14,.85) !important;
}

@media(max-width:649px) and (orientation:portrait){
  #gameShell .battlefield,
  #gameShell .battle-hud,
  #gameShell .party-status,
  #gameShell .boss-bar,
  #gameShell .skill-zone,
  #gameShell .journey-card,
  #gameShell .growth-section,
  #gameShell .forge-section,
  #gameShell .inventory-section,
  #gameShell .tuning-section,
  #gameShell .relic-section,
  #gameShell .activity-feed,
  #gameShell .modal{border-width:3px !important}
}

/* Soft palette pass: keep the Aether Hatch iron chassis, but let each panel
   carry a restrained trace colour instead of repeating one hard copper. */
:root{
  --aether-brass-soft:#D2B078;
  --aether-steel-soft:#849BA3;
  --aether-teal-soft:#78A59F;
  --aether-rose-soft:#C9827D;
  --aether-sage-soft:#8EAD8F;
  --aether-violet-soft:#A493B0;
}
#gameShell .skill-zone{--aether-trace:var(--aether-steel-soft)}
#gameShell .journey-card{--aether-trace:var(--aether-brass-soft)}
#gameShell .growth-section{--aether-trace:var(--aether-sage-soft)}
#gameShell .forge-section{--aether-trace:var(--aether-rose-soft)}
#gameShell .inventory-section{--aether-trace:#91A2B0}
#gameShell .tuning-section{--aether-trace:var(--aether-violet-soft)}
#gameShell .relic-section{--aether-trace:#B39A88}
#gameShell .activity-feed{--aether-trace:var(--aether-teal-soft)}
#gameShell .modal{--aether-trace:var(--aether-brass-soft)}

#gameShell .skill-zone,
#gameShell .journey-card,
#gameShell .growth-section,
#gameShell .forge-section,
#gameShell .inventory-section,
#gameShell .tuning-section,
#gameShell .relic-section,
#gameShell .activity-feed,
#gameShell .modal{
  border-color:color-mix(in srgb,var(--aether-trace,var(--aether-copper)) 46%,var(--aether-edge)) !important;
  background-image:linear-gradient(180deg,color-mix(in srgb,var(--aether-trace,var(--aether-copper)) 7%,transparent),transparent 30%,rgba(0,0,0,.12)) !important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--aether-trace,var(--aether-copper)) 74%,var(--aether-inner)),inset 0 0 0 4px var(--aether-inner),0 3px #050606 !important;
}
#gameShell .skill-zone::before,
#gameShell .journey-card::before,
#gameShell .growth-section::before,
#gameShell .forge-section::before,
#gameShell .inventory-section::before,
#gameShell .tuning-section::before,
#gameShell .relic-section::before,
#gameShell .activity-feed::before,
#gameShell .modal::before{
  border-color:color-mix(in srgb,var(--aether-trace,var(--aether-copper)) 54%,transparent) !important;
}

#gameShell .skill-role-attack{--aether-trace:var(--aether-rose-soft)}
#gameShell .skill-role-utility,
#gameShell .skill-role-support{--aether-trace:var(--aether-sage-soft)}
#gameShell .skill-role-defense{--aether-trace:#89A9BE}
#gameShell .skill{
  border-color:color-mix(in srgb,var(--aether-trace,var(--aether-copper)) 64%,var(--aether-edge)) !important;
  background-image:linear-gradient(180deg,color-mix(in srgb,var(--aether-trace,var(--aether-copper)) 8%,transparent),transparent 32%,rgba(0,0,0,.14)) !important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--aether-trace,var(--aether-copper)) 82%,var(--aether-inner)),inset 0 0 0 4px var(--aether-inner),0 2px #050606 !important;
}
#gameShell .skill::before{border-color:color-mix(in srgb,var(--aether-trace,var(--aether-copper)) 70%,transparent) !important}

#gameShell .mobile-nav{--aether-trace:var(--aether-steel-soft);border-color:color-mix(in srgb,var(--aether-trace) 58%,var(--aether-edge)) !important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--aether-trace) 74%,var(--aether-inner)),inset 0 0 0 4px var(--aether-inner) !important}
#gameShell .mobile-nav button,
#gameShell .skill-toolbar .auto-toggle,
#gameShell .primary-button,
#gameShell .draw-button,
#gameShell .equip-button,
#gameShell .forge-button,
#gameShell .special-select-button,
#gameShell .modal-close-button,
#gameShell .inventory-tabs button,
#gameShell .inventory-filter-tabs button,
#gameShell .rune-view-tabs button,
#gameShell .equipment-pagination button,
#gameShell .rate-details summary,
#gameShell .sort-equipment-button,
#gameShell .text-button,
#gameShell .reset-button{
  --aether-trace:var(--aether-brass-soft);
  border-color:color-mix(in srgb,var(--aether-trace) 60%,var(--aether-edge)) !important;
  background-image:linear-gradient(180deg,color-mix(in srgb,var(--aether-trace) 9%,transparent),transparent 42%,rgba(0,0,0,.12)) !important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--aether-trace) 70%,var(--aether-inner)),inset 0 0 0 4px var(--aether-inner) !important;
}
#gameShell #tabCombat{--aether-trace:var(--aether-rose-soft)}
#gameShell #tabBuild{--aether-trace:var(--aether-brass-soft)}
#gameShell #tabInventory{--aether-trace:#91A2B0}
#gameShell #tabForge{--aether-trace:#C69A78}
#gameShell .mobile-nav button.active{border-color:color-mix(in srgb,var(--aether-trace) 74%,var(--aether-edge)) !important}

/* Hybrid softness pass: pixel art remains nearest/quantized, but the chrome
   is allowed a small radius and a 2px line so the whole screen does not read
   like a row of hard 32px tiles. */
:root{
  --aether-soft-edge:#566064;
  --aether-soft-radius:6px;
  --aether-soft-border:2px;
}
#gameShell .battlefield,
#gameShell .skill-zone,
#gameShell .journey-card,
#gameShell .growth-section,
#gameShell .forge-section,
#gameShell .inventory-section,
#gameShell .tuning-section,
#gameShell .relic-section,
#gameShell .activity-feed,
#gameShell .modal{
  border-width:var(--aether-soft-border) !important;
  border-color:color-mix(in srgb,var(--aether-trace,var(--aether-copper)) 38%,var(--aether-soft-edge)) !important;
  border-radius:var(--aether-soft-radius) !important;
  clip-path:none !important;
}
#gameShell .skill-zone::before,
#gameShell .journey-card::before,
#gameShell .growth-section::before,
#gameShell .forge-section::before,
#gameShell .inventory-section::before,
#gameShell .tuning-section::before,
#gameShell .relic-section::before,
#gameShell .activity-feed::before,
#gameShell .modal::before{
  inset:6px !important;
  border-color:color-mix(in srgb,var(--aether-trace,var(--aether-copper)) 46%,transparent) !important;
}
#gameShell .skill{
  border-width:var(--aether-soft-border) !important;
  border-radius:5px !important;
  clip-path:none !important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--aether-trace,var(--aether-copper)) 72%,var(--aether-inner)),inset 0 0 0 2px var(--aether-inner),0 2px #050606 !important;
}
#gameShell .skill::before{inset:6px !important}
#gameShell .mobile-nav{
  border-width:var(--aether-soft-border) !important;
  border-radius:var(--aether-soft-radius) !important;
  clip-path:none !important;
}
#gameShell .mobile-nav button,
#gameShell .skill-toolbar .auto-toggle,
#gameShell .primary-button,
#gameShell .draw-button,
#gameShell .equip-button,
#gameShell .forge-button,
#gameShell .special-select-button,
#gameShell .modal-close-button,
#gameShell .inventory-tabs button,
#gameShell .inventory-filter-tabs button,
#gameShell .rune-view-tabs button,
#gameShell .equipment-pagination button,
#gameShell .rate-details summary,
#gameShell .sort-equipment-button,
#gameShell .text-button,
#gameShell .reset-button{
  border-width:var(--aether-soft-border) !important;
  border-radius:5px !important;
  clip-path:none !important;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--aether-trace,var(--aether-copper)) 64%,var(--aether-inner)),inset 0 0 0 2px var(--aether-inner) !important;
}

/* The five-tab rail is only a transparent layout row. Keep the individual
   tab buttons styled, but never draw one large chassis behind the whole row. */
#gameShell .mobile-nav{
  border:0 !important;
  border-top:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  clip-path:none !important;
}

/* Image-backed skill chrome: fixed pixel PNG corners and rails, expanding only
   through the center plate.  This replaces the CSS-only rim while preserving
   the existing centered icon, numeric cooldown, and transparent tab rail. */
#gameShell .skill{
  border:0 !important;
  border-radius:0 !important;
  clip-path:none !important;
  background-color:#111416 !important;
  background-image:url("hatch-latch-9slice-v4/base/corner-tl.png"),url("hatch-latch-9slice-v4/base/corner-tr.png"),url("hatch-latch-9slice-v4/base/corner-bl.png"),url("hatch-latch-9slice-v4/base/corner-br.png"),url("hatch-latch-9slice-v4/base/rail-top.png"),url("hatch-latch-9slice-v4/base/rail-bottom.png"),url("hatch-latch-9slice-v4/base/rail-left.png"),url("hatch-latch-9slice-v4/base/rail-right.png") !important;
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,repeat-x,repeat-x,repeat-y,repeat-y !important;
  background-position:left top,right top,left bottom,right bottom,15px top,15px bottom,left 15px,right 15px !important;
  background-size:15px 15px,15px 15px,15px 15px,15px 15px,calc(100% - 30px) 15px,calc(100% - 30px) 15px,15px calc(100% - 30px),15px calc(100% - 30px) !important;
  box-shadow:none !important;
}
#gameShell .skill-role-attack{
  background-image:url("hatch-latch-9slice-v4/attack/corner-tl.png"),url("hatch-latch-9slice-v4/attack/corner-tr.png"),url("hatch-latch-9slice-v4/attack/corner-bl.png"),url("hatch-latch-9slice-v4/attack/corner-br.png"),url("hatch-latch-9slice-v4/attack/rail-top.png"),url("hatch-latch-9slice-v4/attack/rail-bottom.png"),url("hatch-latch-9slice-v4/attack/rail-left.png"),url("hatch-latch-9slice-v4/attack/rail-right.png") !important;
  --skill-neon:#ff5c5c;
}
#gameShell .skill-role-utility,
#gameShell .skill-role-support{
  background-image:url("hatch-latch-9slice-v4/utility/corner-tl.png"),url("hatch-latch-9slice-v4/utility/corner-tr.png"),url("hatch-latch-9slice-v4/utility/corner-bl.png"),url("hatch-latch-9slice-v4/utility/corner-br.png"),url("hatch-latch-9slice-v4/utility/rail-top.png"),url("hatch-latch-9slice-v4/utility/rail-bottom.png"),url("hatch-latch-9slice-v4/utility/rail-left.png"),url("hatch-latch-9slice-v4/utility/rail-right.png") !important;
  --skill-neon:#65e58a;
}
#gameShell .skill-role-defense{
  background-image:url("hatch-latch-9slice-v4/defense/corner-tl.png"),url("hatch-latch-9slice-v4/defense/corner-tr.png"),url("hatch-latch-9slice-v4/defense/corner-bl.png"),url("hatch-latch-9slice-v4/defense/corner-br.png"),url("hatch-latch-9slice-v4/defense/rail-top.png"),url("hatch-latch-9slice-v4/defense/rail-bottom.png"),url("hatch-latch-9slice-v4/defense/rail-left.png"),url("hatch-latch-9slice-v4/defense/rail-right.png") !important;
  --skill-neon:#68cfff;
}
#gameShell .skill::before{
  display:none !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* Neon belongs to the frame line, never to the icon artwork itself. */
#gameShell .skill .skill-glyph,
#gameShell .skill .skill-glyph .pixel-asset-icon{
  text-shadow:none !important;
  filter:none !important;
}
#gameShell .skill.is-cooldown .skill-glyph .pixel-asset-icon{
  filter:brightness(var(--cooldown-brightness,.30)) saturate(var(--cooldown-saturation,.55)) !important;
}