/* AfterSchool generated pixel HUD skin. Add after style.css and special-ui.css. */
:root{
  --ph-panel:url("assets/pixel-hud/panel-9s.png");
  --ph-card:url("assets/pixel-hud/status-card-9s.png");
  --ph-portrait:url("assets/pixel-hud/portrait-frame.png");
  --ph-meter:url("assets/pixel-hud/meter-frame.png");
  --ph-boss:url("assets/pixel-hud/boss-meter-frame.png");
  --ph-idle:url("assets/pixel-hud/button-idle.png");
  --ph-selected:url("assets/pixel-hud/button-selected.png");
  --ph-pressed:url("assets/pixel-hud/button-pressed.png");
  --ph-disabled:url("assets/pixel-hud/button-disabled.png");
  --ph-tool:url("assets/pixel-hud/tool-button.png");
  --ph-banner:url("assets/pixel-hud/banner-frame.png");
  --ph-combo:url("assets/pixel-hud/combo-frame.png");
  --ph-input:url("assets/pixel-hud/input-frame.png");
  --ph-menu:url("assets/pixel-hud/menu-card-9s.png");
}

/* Shared generated button surfaces; geometry, labels and semantics stay DOM-owned. */
button{
  min-height:44px;border:8px solid transparent;border-image:var(--ph-idle) 12 fill stretch;
  background:transparent;clip-path:none;box-shadow:none;image-rendering:pixelated;
}
button:hover{background:transparent;border-image-source:var(--ph-selected)}
button:active,button[data-force-pressed="true"],.touch-action:active,.ce-special:active{transform:translateY(2px);border-image-source:var(--ph-pressed)}
button[aria-pressed="true"],.character-choices button[aria-pressed="true"],.panel .primary{
  border-image-source:var(--ph-selected);background:transparent;color:#fff2cf;
}
button:disabled,button[aria-disabled="true"]{
  opacity:.72;border-image-source:var(--ph-disabled);background:transparent;
}
button:focus-visible,canvas:focus-visible,summary:focus-visible,input:focus-visible{
  outline:3px solid #ffd28f;outline-offset:3px;
}

/* Generated cards and scalable panel frames. */
.panel{
  border:10px solid transparent;border-image:var(--ph-panel) 14 fill stretch;
  background:transparent;clip-path:none;box-shadow:none;image-rendering:pixelated;
}
.lobby-panel{border-image-source:var(--ph-menu)}
#player-card,#ally-card{
  border:8px solid transparent;border-image:var(--ph-card) 12 fill stretch;
  background:transparent;clip-path:none;image-rendering:pixelated;
}
#player-card>img,#ally-card img,.character-choices img{
  border:7px solid transparent;border-image:var(--ph-portrait) 10 fill stretch;
  background:transparent;image-rendering:pixelated;
}
.character-choices button{border-image-source:var(--ph-idle)}

/* Generated meter rails and generated-atlas-derived fill textures. */
.meter,.loading-panel progress{
  appearance:none;border:4px solid transparent;border-image:var(--ph-meter) 8 fill stretch;
  background:transparent;padding:0;overflow:hidden;image-rendering:pixelated;
}
.meter{height:13px}.resource-row .meter{height:11px}#charge-track{height:10px}
.meter i{
  height:100%;background-color:#c95762;
  background-image:url("assets/pixel-hud/fill-crimson.png");background-repeat:repeat-x;
  background-size:auto 100%;image-rendering:pixelated;box-shadow:none;
}
.meter.guard i{background-color:#55bcb0;background-image:url("assets/pixel-hud/fill-turquoise.png")}
.meter.focus i,.meter.charge i{background-color:#e9ac62;background-image:url("assets/pixel-hud/fill-amber.png")}
#boss-hud{
  border:8px solid transparent;border-image:var(--ph-card) 12 fill stretch;
  background:transparent;image-rendering:pixelated;
}
#boss-hud .meter{border-image-source:var(--ph-boss)}
.meter.boss i{background-color:#9e455d;background-image:url("assets/pixel-hud/fill-boss.png")}
.loading-panel progress::-webkit-progress-bar{background:#080f1c}
.loading-panel progress::-webkit-progress-value{background:url("assets/pixel-hud/fill-amber.png") repeat-x;background-size:auto 100%}

/* Controls remain exactly three fixed actions plus the reserved conditional special slot. */
#game-tools button{border:7px solid transparent;border-image:var(--ph-tool) 10 fill stretch;background:transparent}
.touch-action,.ce-special,#context-action{
  border:8px solid transparent;border-image:var(--ph-idle) 12 fill stretch;background:transparent;
}
.touch-action.attack,.ce-special{border-image-source:var(--ph-selected);background:transparent}
.touch-action.defense,.touch-action.jump,#context-action{background:transparent}
#stick{
  border:0;background:transparent url("assets/pixel-hud/stick-base.png") center/100% 100% no-repeat;
  clip-path:none;image-rendering:pixelated;
}
#knob{
  border:0;background:transparent url("assets/pixel-hud/stick-knob.png") center/100% 100% no-repeat;
  clip-path:none;image-rendering:pixelated;
}
.stick-cross{opacity:.22}

/* Generated announcement, badge, input and invite chrome. */
#location-intro,#fight-banner{
  border:8px solid transparent;border-image:var(--ph-banner) 12 fill stretch;
  background:transparent;clip-path:none;text-shadow:none;image-rendering:pixelated;
}
#fight-banner{padding:9px 24px}
#combo{
  min-width:64px;min-height:48px;padding:13px 12px 8px;
  border:8px solid transparent;border-image:var(--ph-combo) 10 fill stretch;
  text-shadow:none;text-align:center;image-rendering:pixelated;
}
input{
  min-height:44px;border:8px solid transparent;border-image:var(--ph-input) 12 fill stretch;
  background:transparent;image-rendering:pixelated;
}
.panel-brand .seal{
  border:7px solid transparent;border-image:var(--ph-tool) 10 fill stretch;background:transparent;
}
.how-to{border-top:4px solid #324b63}
.how-to summary{display:flex;align-items:center;min-height:44px}

/* Veils and the touch fade intentionally remain translucent layout layers, not generic chrome. */
.veil{background:#07101be6}
#touch:not([hidden]){background:linear-gradient(180deg,#07101b00,#07101bcc 24%,#07101bf5)}

/* Resolve the baseline portrait HUD collisions without changing game-control geometry. */
#combo{left:320px;top:110px}
@media (max-width:760px) and (orientation:portrait){
  #boss-hud{top:170px}
  #location-intro{top:170px}
  #fight-banner{top:31%}
  #combo{left:8px;top:240px}
}
@media (pointer:coarse) and (orientation:landscape),(max-height:560px){
  #combo{left:245px;top:215px}
}
@media (max-width:380px){
  #boss-hud{top:164px}
  #location-intro{top:164px}
  #combo{left:8px;top:232px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}