/* Integer-only 3x pixel assembly.  Every source PNG is already at its
   display size (18px corners/rails), so the browser never rescales a frame
   piece.  The centre is the element's flat background. */
.pixel-skill-frame{
  --px-tl:url("skill-card-frame-base-corner-tl.png");
  --px-tr:url("skill-card-frame-base-corner-tr.png");
  --px-bl:url("skill-card-frame-base-corner-bl.png");
  --px-br:url("skill-card-frame-base-corner-br.png");
  --px-top:url("skill-card-frame-base-rail-top.png");
  --px-bottom:url("skill-card-frame-base-rail-bottom.png");
  --px-left:url("skill-card-frame-base-rail-left.png");
  --px-right:url("skill-card-frame-base-rail-right.png");
  border:0 !important;
  border-image:none !important;
  border-radius:0 !important;
  background-color:#14171A;
  background-image:var(--px-tl),var(--px-tr),var(--px-bl),var(--px-br),var(--px-top),var(--px-bottom),var(--px-left),var(--px-right);
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,repeat-x,repeat-x,repeat-y,repeat-y;
  background-position:left top,right top,left bottom,right bottom,18px top,18px bottom,left 18px,right 18px;
  background-origin:border-box;
  background-clip:border-box;
  image-rendering:pixelated;
}
.pixel-role-attack,#gameShell .skill-role-attack{
  --px-tl:url("skill-card-frame-attack-corner-tl.png");
  --px-tr:url("skill-card-frame-attack-corner-tr.png");
  --px-bl:url("skill-card-frame-attack-corner-bl.png");
  --px-br:url("skill-card-frame-attack-corner-br.png");
  --px-top:url("skill-card-frame-attack-rail-top.png");
  --px-bottom:url("skill-card-frame-attack-rail-bottom.png");
  --px-left:url("skill-card-frame-attack-rail-left.png");
  --px-right:url("skill-card-frame-attack-rail-right.png");
}
.pixel-role-utility,#gameShell .skill-role-utility{
  --px-tl:url("skill-card-frame-utility-corner-tl.png");
  --px-tr:url("skill-card-frame-utility-corner-tr.png");
  --px-bl:url("skill-card-frame-utility-corner-bl.png");
  --px-br:url("skill-card-frame-utility-corner-br.png");
  --px-top:url("skill-card-frame-utility-rail-top.png");
  --px-bottom:url("skill-card-frame-utility-rail-bottom.png");
  --px-left:url("skill-card-frame-utility-rail-left.png");
  --px-right:url("skill-card-frame-utility-rail-right.png");
}
.pixel-role-support,#gameShell .skill-role-support{
  /* The game data calls green utility skills "support".  Keep the
     presentation role mapped to the shared utility frame. */
  --px-tl:url("skill-card-frame-utility-corner-tl.png");
  --px-tr:url("skill-card-frame-utility-corner-tr.png");
  --px-bl:url("skill-card-frame-utility-corner-bl.png");
  --px-br:url("skill-card-frame-utility-corner-br.png");
  --px-top:url("skill-card-frame-utility-rail-top.png");
  --px-bottom:url("skill-card-frame-utility-rail-bottom.png");
  --px-left:url("skill-card-frame-utility-rail-left.png");
  --px-right:url("skill-card-frame-utility-rail-right.png");
}
.pixel-role-defense,#gameShell .skill-role-defense{
  --px-tl:url("skill-card-frame-defense-corner-tl.png");
  --px-tr:url("skill-card-frame-defense-corner-tr.png");
  --px-bl:url("skill-card-frame-defense-corner-bl.png");
  --px-br:url("skill-card-frame-defense-corner-br.png");
  --px-top:url("skill-card-frame-defense-rail-top.png");
  --px-bottom:url("skill-card-frame-defense-rail-bottom.png");
  --px-left:url("skill-card-frame-defense-rail-left.png");
  --px-right:url("skill-card-frame-defense-rail-right.png");
}

/* The game keeps the existing role classes generated by ui-combat.js. */
#gameShell .skill-zone,
#gameShell .skill{
  --px-tl:url("skill-card-frame-base-corner-tl.png");
  --px-tr:url("skill-card-frame-base-corner-tr.png");
  --px-bl:url("skill-card-frame-base-corner-bl.png");
  --px-br:url("skill-card-frame-base-corner-br.png");
  --px-top:url("skill-card-frame-base-rail-top.png");
  --px-bottom:url("skill-card-frame-base-rail-bottom.png");
  --px-left:url("skill-card-frame-base-rail-left.png");
  --px-right:url("skill-card-frame-base-rail-right.png");
  border:0 !important;
  border-image:none !important;
  border-radius:0 !important;
  background-color:#14171A;
  background-image:var(--px-tl),var(--px-tr),var(--px-bl),var(--px-br),var(--px-top),var(--px-bottom),var(--px-left),var(--px-right);
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,repeat-x,repeat-x,repeat-y,repeat-y;
  background-position:left top,right top,left bottom,right bottom,18px top,18px bottom,left 18px,right 18px;
  background-origin:border-box;
  background-clip:border-box;
  image-rendering:pixelated;
  box-shadow:none;
}
#gameShell .skill-role-attack,
#gameShell .skill-role-utility,
#gameShell .skill-role-support,
#gameShell .skill-role-defense{
  background-image:var(--px-tl),var(--px-tr),var(--px-bl),var(--px-br),var(--px-top),var(--px-bottom),var(--px-left),var(--px-right);
  background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,repeat-x,repeat-x,repeat-y,repeat-y;
  background-position:left top,right top,left bottom,right bottom,18px top,18px bottom,left 18px,right 18px;
}

/* Role variables come after the game default block so the generated skill
   classes cannot be overwritten by the base frame. */
#gameShell .skill-role-attack{
  --px-tl:url("skill-card-frame-attack-corner-tl.png");
  --px-tr:url("skill-card-frame-attack-corner-tr.png");
  --px-bl:url("skill-card-frame-attack-corner-bl.png");
  --px-br:url("skill-card-frame-attack-corner-br.png");
  --px-top:url("skill-card-frame-attack-rail-top.png");
  --px-bottom:url("skill-card-frame-attack-rail-bottom.png");
  --px-left:url("skill-card-frame-attack-rail-left.png");
  --px-right:url("skill-card-frame-attack-rail-right.png");
}
#gameShell .skill-role-utility{
  --px-tl:url("skill-card-frame-utility-corner-tl.png");
  --px-tr:url("skill-card-frame-utility-corner-tr.png");
  --px-bl:url("skill-card-frame-utility-corner-bl.png");
  --px-br:url("skill-card-frame-utility-corner-br.png");
  --px-top:url("skill-card-frame-utility-rail-top.png");
  --px-bottom:url("skill-card-frame-utility-rail-bottom.png");
  --px-left:url("skill-card-frame-utility-rail-left.png");
  --px-right:url("skill-card-frame-utility-rail-right.png");
}
#gameShell .skill-role-support{
  --px-tl:url("skill-card-frame-utility-corner-tl.png");
  --px-tr:url("skill-card-frame-utility-corner-tr.png");
  --px-bl:url("skill-card-frame-utility-corner-bl.png");
  --px-br:url("skill-card-frame-utility-corner-br.png");
  --px-top:url("skill-card-frame-utility-rail-top.png");
  --px-bottom:url("skill-card-frame-utility-rail-bottom.png");
  --px-left:url("skill-card-frame-utility-rail-left.png");
  --px-right:url("skill-card-frame-utility-rail-right.png");
}
#gameShell .skill-role-defense{
  --px-tl:url("skill-card-frame-defense-corner-tl.png");
  --px-tr:url("skill-card-frame-defense-corner-tr.png");
  --px-bl:url("skill-card-frame-defense-corner-bl.png");
  --px-br:url("skill-card-frame-defense-corner-br.png");
  --px-top:url("skill-card-frame-defense-rail-top.png");
  --px-bottom:url("skill-card-frame-defense-rail-bottom.png");
  --px-left:url("skill-card-frame-defense-rail-left.png");
  --px-right:url("skill-card-frame-defense-rail-right.png");
}

#gameShell .skill{
  --skill-accent:#D8B15A;
  --skill-accent-soft:#F1EEE4;
  color:var(--ui-text);
  box-shadow:none;
}
#gameShell .skill-role-attack{--skill-accent:#D85F58;--skill-accent-soft:#F09B76}
#gameShell .skill-role-utility{--skill-accent:#67B77E;--skill-accent-soft:#A4D6AE}
#gameShell .skill-role-support{--skill-accent:#67B77E;--skill-accent-soft:#A4D6AE}
#gameShell .skill-role-defense{--skill-accent:#67A8CF;--skill-accent-soft:#A9D9F0}
#gameShell .skill .skill-glyph{color:var(--skill-accent);text-shadow:none;filter:none}
#gameShell .skill strong{color:var(--ui-text)}
#gameShell .skill small{color:var(--ui-muted)}
#gameShell .skill::after{color:var(--skill-accent);border-top-color:var(--skill-accent);text-shadow:none}
#gameShell .skill .cooldown{z-index:4;background:rgba(5,7,9,.54)}
#gameShell .skill:disabled{filter:brightness(.70) saturate(.78)}
#gameShell .skill:disabled .cooldown{background:rgba(3,5,7,.66)}

/* Readability pass: the pixel frame is chrome, not the content surface.
   The source tiles remain 18px for clean integer assembly, but the visible
   chrome is trimmed to a 9px (3 logical-pixel) band by the inset plate.
   Cooldown dimming stays behind the content so the state remains legible. */
.pixel-skill-frame,
#gameShell .skill{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background-color:#111417;
}
.pixel-skill-frame::before,
#gameShell .skill::before{
  content:"";
  position:absolute;
  inset:9px;
  z-index:0;
  border:1px solid rgba(255,255,255,.055);
  background:rgba(20,23,26,.92);
  box-shadow:inset 0 1px rgba(255,255,255,.045);
  pointer-events:none;
}
.pixel-skill-frame > :not(.cooldown),
#gameShell .skill > :not(.cooldown){
  position:relative;
  z-index:2;
}
.pixel-skill-frame .cooldown,
#gameShell .skill .cooldown{
  z-index:1;
  background:rgba(4,6,8,.56);
  transition:height .12s steps(2,end);
}
.pixel-skill-frame .state{
  right:13px;
  bottom:13px;
  left:13px;
  padding:3px 5px 2px;
  border:1px solid color-mix(in srgb,var(--accent) 52%,#3a4045);
  background:rgba(8,10,12,.86);
  color:var(--soft);
  line-height:1;
}
.pixel-skill-frame.is-cooldown{filter:none;opacity:.88}
#gameShell .skill::after{
  right:13px;
  bottom:13px;
  left:13px;
  margin:0;
  padding:3px 5px 2px;
  border:1px solid color-mix(in srgb,var(--skill-accent) 52%,#3a4045);
  border-radius:2px;
  background:rgba(8,10,12,.86);
  color:var(--skill-accent-soft);
  font-size:10px;
  line-height:1;
  letter-spacing:.02em;
  text-align:center;
}
#gameShell .skill:disabled{filter:none;opacity:.88}
#gameShell .skill:disabled::after{
  border-color:rgba(255,255,255,.14);
  background:rgba(3,5,7,.80);
  color:var(--ui-muted);
}
#gameShell .skill:focus-visible{
  outline:1px solid var(--skill-accent);
  outline-offset:1px;
}
@media (max-width:359px){
  .pixel-skill-frame::before,
  #gameShell .skill::before{inset:9px}
  #gameShell .skill::after{right:12px;bottom:12px;left:12px;font-size:9px}
}

/* Raster icon pass: compact icons are 12 logical pixels baked to 36px and displayed
   as images.  The explicit box and overflow rules keep old responsive text
   layouts from pushing an icon or label outside the card. */
#gameShell .skill,
#gameShell .skill-loadout-slot,
#gameShell .skill-catalog-card{min-width:0;overflow:hidden}
#gameShell .skill-glyph{
  display:grid;
  width:36px;
  height:36px;
  flex:0 0 36px;
  min-width:0;
  min-height:0;
  margin:0 auto 2px;
  place-items:center;
  overflow:hidden;
  font-size:0;
  line-height:0;
}
#gameShell .skill-glyph .pixel-asset-icon{
  display:block;
  width:36px;
  height:36px;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  image-rendering:pixelated;
  filter:none;
}
#gameShell .star-skill .skill-glyph,
#gameShell .barrier-skill .skill-glyph,
#gameShell .heal-skill .skill-glyph{
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  clip-path:none;
}
#gameShell .heal-skill .skill-glyph::before,
#gameShell .heal-skill .skill-glyph::after{content:none!important;display:none!important}
#gameShell .skill strong,
#gameShell .skill small,
#gameShell .skill::after{
  min-width:0;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#gameShell .skill strong{font-size:9px;line-height:1.1}
#gameShell .skill small{font-size:7px;line-height:1.1}
#gameShell .skill::after{font-size:8px}
#gameShell .skill-loadout-slot>span{
  display:grid;
  width:36px;
  height:36px;
  flex:0 0 36px;
  min-width:0;
  min-height:0;
  margin:0 auto 2px;
  place-items:center;
  overflow:hidden;
  font-size:0;
  line-height:0;
}
#gameShell .skill-loadout-slot>span .pixel-asset-icon,
#gameShell .skill-catalog-icon .pixel-asset-icon{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  image-rendering:pixelated;
  filter:none;
}
#gameShell .skill-loadout-slot>strong,
#gameShell .skill-catalog-copy,
#gameShell .skill-catalog-copy>div,
#gameShell .skill-catalog-copy strong,
#gameShell .skill-catalog-copy p{
  min-width:0;
  max-width:100%;
  overflow:hidden;
}
#gameShell .skill-loadout-slot>strong,
#gameShell .skill-catalog-copy strong{
  text-overflow:ellipsis;
  white-space:nowrap;
}
#gameShell .skill-catalog-icon{
  display:grid;
  width:36px;
  height:36px;
  flex:0 0 36px;
  min-width:0;
  min-height:0;
  overflow:hidden;
  place-items:center;
}
#gameShell .skill-catalog-copy p{
  overflow:hidden;
  text-overflow:ellipsis;
}
#gameShell .skill-loadout-slot>strong{font-size:9px;line-height:1.1}
#gameShell .skill-catalog-card{grid-template-columns:36px minmax(0,1fr) 52px;gap:6px;padding:7px}
#gameShell .skill-catalog-copy strong{font-size:10px}
#gameShell .skill-catalog-copy em,
#gameShell .skill-catalog-copy small{font-size:8px}
#gameShell .skill-catalog-copy p{font-size:8px;line-height:11px}
@media (max-width:359px){
  #gameShell .skill-glyph,
  #gameShell .skill-glyph .pixel-asset-icon,
  #gameShell .skill-loadout-slot>span,
  #gameShell .skill-loadout-slot>span .pixel-asset-icon{width:32px;height:32px;flex-basis:32px}
  #gameShell .skill-catalog-icon{width:32px;height:32px;flex-basis:32px}
  #gameShell .skill-catalog-card{grid-template-columns:32px minmax(0,1fr) 48px;gap:5px;padding:6px}
}

/* Compact mechanical card pass: keep a readable pixel chassis without the
   oversized illustrated frame. The icon and timer share one exact center. */
.pixel-skill-frame,
#gameShell .skill{
  border:3px solid color-mix(in srgb,var(--skill-accent,var(--accent,#D8B15A)) 68%,#5B4A2A) !important;
  border-image:none !important;
  border-radius:0 !important;
  background-color:#0F1215 !important;
  background-image:linear-gradient(180deg,rgba(255,255,255,.055),transparent 34%,rgba(0,0,0,.16)) !important;
  box-shadow:inset 0 0 0 1px #080A0C,inset 0 0 0 2px rgba(255,255,255,.075),0 2px 0 #080A0C !important;
  clip-path:polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px));
}
.pixel-skill-frame::before,
#gameShell .skill::before{
  inset:5px;
  border:1px solid color-mix(in srgb,var(--skill-accent,var(--accent,#D8B15A)) 54%,#6A5734);
  border-radius:0;
  background:linear-gradient(180deg,#1A1D1F,#111417 78%);
  box-shadow:inset 0 1px rgba(255,255,255,.10),inset 0 -1px rgba(0,0,0,.48);
  clip-path:polygon(0 3px,3px 3px,3px 0,calc(100% - 3px) 0,calc(100% - 3px) 3px,100% 3px,100% calc(100% - 3px),calc(100% - 3px) calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,3px calc(100% - 3px),0 calc(100% - 3px));
}
#gameShell .combat-lower-body .skill{
  display:grid;
  place-items:center;
  align-content:center;
  padding:0;
}
#gameShell .skill > .skill-glyph,
.pixel-skill-frame > .glyph{
  position:absolute !important;
  top:50%;
  right:auto;
  bottom:auto;
  left:50%;
  z-index:3;
  margin:0 !important;
  transform:translate(-50%,-50%) !important;
}
#gameShell .skill strong,
#gameShell .skill small{display:none}
#gameShell .skill .cooldown{display:none !important}
#gameShell .skill::after{
  content:attr(data-cooldown-label);
  top:50%;
  right:auto;
  bottom:auto;
  left:50%;
  z-index:5;
  display:none;
  width:32px;
  min-width:32px;
  height:20px;
  min-height:20px;
  margin:0;
  padding:0 3px;
  transform:translate(-50%,-50%);
  border:0;
  border-radius:0;
  color:#FFFFFF;
  background:transparent;
  font-family:var(--ui-font-pixel,monospace);
  font-size:10px;
  font-weight:950;
  font-variant-numeric:tabular-nums;
  line-height:16px;
  letter-spacing:-.04em;
  text-align:center;
  text-shadow:1px 0 0 rgba(0,0,0,.95),0 1px 0 rgba(0,0,0,.95),0 0 3px rgba(255,255,255,.24);
  pointer-events:none;
}
#gameShell .skill[data-cooldown-label]::after{display:block}
#gameShell .skill.is-cooldown .skill-glyph .pixel-asset-icon{
  filter:brightness(var(--cooldown-brightness,.30)) saturate(var(--cooldown-saturation,.55));
  opacity:.92;
}
#gameShell .skill-glyph::after,
.pixel-skill-frame .glyph::after{
  content:"" !important;
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  z-index:4;
  display:none;
  height:var(--cooldown-progress,0%);
  border-top:0;
  background:conic-gradient(from -90deg,rgba(255,255,255,.76) 0 var(--cooldown-progress,0%),transparent var(--cooldown-progress,0%) 100%);
  opacity:.22;
  mix-blend-mode:screen;
  pointer-events:none;
}
#gameShell .skill.is-cooldown .skill-glyph::after,
.pixel-skill-frame.is-cooldown .glyph::after{display:block !important}
#gameShell .skill-glyph::before,
.pixel-skill-frame .glyph::before{
  content:"" !important;
  position:absolute;
  top:50%;
  left:50%;
  z-index:4;
  display:none;
  width:2px;
  height:15px;
  transform:translate(-50%,-100%) rotate(var(--cooldown-angle,0deg));
  transform-origin:50% 100%;
  background:#FFFFFF;
  box-shadow:1px 0 rgba(0,0,0,.78);
  opacity:.82;
  pointer-events:none;
}
#gameShell .skill.is-cooldown .skill-glyph::before,
.pixel-skill-frame.is-cooldown .glyph::before{display:block !important}
#gameShell .skill:disabled:not(.is-cooldown):not(.is-action-locked) .skill-glyph .pixel-asset-icon{
  filter:brightness(.52) saturate(.65);
  opacity:.72;
}
#gameShell .skill:disabled{filter:none !important;opacity:1}
#gameShell .skill:disabled:not(.is-cooldown) .skill-glyph .pixel-asset-icon{
  filter:none !important;
  opacity:1;
}

/* Aether Hatch runtime correction: ui-system.css has a more-specific legacy
   rule that turns the cooldown label into a static bottom chip. The numeric
   timer is an overlay, so force its containing geometry here. The old white
   hand is intentionally disabled; the ring below is the only time gauge. */
#gameShell .combat-lower-body .skill::after{
  position:absolute !important;
  top:50% !important;
  right:auto !important;
  bottom:auto !important;
  left:50% !important;
  margin:0 !important;
  padding:0 3px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#FFFFFF !important;
}
#gameShell .combat-lower-body .skill:disabled::after{
  border:0 !important;
  background:transparent !important;
  color:#FFFFFF !important;
}
#gameShell .combat-lower-body .skill-glyph::before,
#gameShell .skill-glyph::before,
.pixel-skill-frame .glyph::before{
  display:none !important;
}
#gameShell .skill.is-cooldown .skill-glyph::before,
.pixel-skill-frame.is-cooldown .glyph::before{
  display:none !important;
}
#gameShell .skill-glyph::after,
.pixel-skill-frame .glyph::after{
  top:-4px;
  right:-4px;
  bottom:-4px;
  left:-4px;
  width:auto;
  height:auto;
  border:0;
  border-radius:50%;
  background:conic-gradient(from -90deg,#FFFFFF 0 var(--cooldown-progress,0%),transparent var(--cooldown-progress,0%) 100%);
  -webkit-mask:radial-gradient(circle,transparent calc(100% - 3px),#000 calc(100% - 2px));
  mask:radial-gradient(circle,transparent calc(100% - 3px),#000 calc(100% - 2px));
  opacity:.9;
  mix-blend-mode:screen;
}

/* Showcase follows the same icon-only combat treatment. */
.pixel-skill-frame .glyph{width:36px;height:36px}
.pixel-skill-frame strong,
.pixel-skill-frame small{display:none}
.pixel-skill-frame .cooldown{display:none}
.pixel-skill-frame .state{
  top:50%;
  right:auto;
  bottom:auto;
  left:50%;
  display:none;
  z-index:5;
  width:32px;
  min-width:32px;
  height:20px;
  min-height:20px;
  margin:0;
  padding:0 3px;
  transform:translate(-50%,-50%);
  border:0;
  border-radius:0;
  color:#FFFFFF;
  background:transparent;
  font-family:var(--ui-font-pixel,monospace);
  font-size:10px;
  font-weight:950;
  line-height:16px;
  letter-spacing:-.04em;
  text-shadow:1px 0 0 rgba(0,0,0,.95),0 1px 0 rgba(0,0,0,.95),0 0 3px rgba(255,255,255,.24);
}
.pixel-skill-frame.is-cooldown .state{display:block}
.pixel-skill-frame.is-cooldown .glyph img{filter:brightness(var(--cooldown-brightness,.48)) saturate(var(--cooldown-saturation,.70))}
.pixel-skill-frame:nth-of-type(4){--cooldown-brightness:.56;--cooldown-saturation:.74;--cooldown-progress:44%;--cooldown-angle:158deg}
.pixel-skill-frame:nth-of-type(5){--cooldown-brightness:.34;--cooldown-saturation:.58;--cooldown-progress:8%;--cooldown-angle:29deg}
.pixel-skill-frame:nth-of-type(6){--cooldown-brightness:.48;--cooldown-saturation:.70;--cooldown-progress:24%;--cooldown-angle:86deg}