/* Shared by the document and cinematic shadow roots. Reuse the approved raster;
   keep layout, hidden controls and illustrated cards independent. */
.btn,.language-options button{--button-accent:#f0c373;--button-wash:#b583303d}
.btn.ghost,.story-shell button,.shell #skip,#mapui .map-btns button{--button-accent:#a9c0cd;--button-wash:#809dad20}
.btn.go,.btn.retreat{--button-accent:#88efb5;--button-wash:#33965b55}
.panel.mainmenu .btn.go,.panel.mainmenu .btn[data-act="fresh"]:not(.ghost),#mapui #mapShop:not(.dim),.story-shell .primary{--button-accent:#ffda8a;--button-wash:#c78d345c}
.btn.mode-endless{--button-accent:#8be9ff;--button-wash:#1687a34d}
.btn.mode-daily{--button-accent:#e0b4ff;--button-wash:#8547b85c}
.btn.mode-plus,.btn.danger{--button-accent:#ffb2ac;--button-wash:#9f35354f}
/* The map shop's existing ID rules are deliberately included in this cascade. */
:is(.btn,#mapui .map-btns button,#mapui #mapShop,#mapui #mapShop:not(.dim),.language-options button,.story-shell button,.shell button){
  border:0;border-radius:2px;clip-path:none;
  border-image:url('../upgrade-cards-v1/armor-panel.webp') 80 / 5px / 0 stretch;
  background:
    linear-gradient(var(--button-accent,#f0c373),var(--button-accent,#f0c373)) 8px 50% / 3px 42% no-repeat,
    linear-gradient(100deg,var(--button-wash,#b583303d),#07101855 85%),
    url('../upgrade-cards-v1/armor-panel.webp') center / 100% 100% no-repeat #10202a;
  color:#f5efdf;text-shadow:0 1px 2px #000;
  box-shadow:inset 0 0 0 1px #64717b,0 2px 5px #0008;
  min-height:44px;min-width:44px;
  font-weight:700;letter-spacing:.015em;
  transition:filter .12s,box-shadow .12s;
}
.btn small{opacity:.9}
@media(hover:hover){
  :is(.btn,#mapui .map-btns button,#mapui #mapShop,#mapui #mapShop:not(.dim),.language-options button,.story-shell button,.shell button):hover:not(:disabled){
    filter:brightness(1.2);box-shadow:inset 0 0 0 1px var(--button-accent,#f0c373),0 3px 8px #0009;
  }
}
:is(.btn,#mapui .map-btns button,#mapui #mapShop,#mapui #mapShop:not(.dim),.language-options button,.story-shell button,.shell button):focus-visible{
  outline:3px solid #9ae7ff;outline-offset:2px;filter:brightness(1.15);
}
:is(.btn,#mapui .map-btns button,#mapui #mapShop,#mapui #mapShop:not(.dim),.language-options button,.story-shell button,.shell button):active:not(:disabled){
  filter:brightness(.9);box-shadow:inset 0 2px 5px #000c;
}
:is(.btn,#mapui .map-btns button,#mapui #mapShop,#mapui #mapShop:not(.dim),.language-options button,.story-shell button,.shell button):disabled{
  filter:grayscale(.8);opacity:.5;cursor:not-allowed;transform:none;
}
/* Long labels wrap without widening a phone's mission card. */
#mapui .mi-btn{justify-content:center;text-align:center;overflow-wrap:anywhere}
@media(max-width:620px),(max-height:500px){
  :is(#mapui .map-btns button,#mapui #mapShop,#mapui .mi-btn){
    background-position:4px 50%,0 0,center;background-size:2px 35%,auto,100% 100%;border-image-width:4px;
  }
}
@media(prefers-reduced-motion:reduce){
  :is(.btn,#mapui .map-btns button,#mapui #mapShop,#mapui #mapShop:not(.dim),.language-options button,.story-shell button,.shell button){transition:none}
}

/* Combat controls share the approved steel artwork. Only paint changes here:
   preserve the touch grid, safe-area placement, hit targets and input handlers.
   The square source keeps its proportions; nine-sliced edges keep rivets crisp. */
#touch button,#pauseBtn{--pad-accent:#f5cb7d;--pad-wash:#ba863329}
#touch #tPulse{--pad-accent:#83e9ff;--pad-wash:#198ab640}
#touch #tSkill{--pad-accent:#ffda8d;--pad-wash:#ad741c40}
#touch #tUlt{--pad-accent:#f6b0ff;--pad-wash:#923aae40}
:is(#touch button,#touch button#tPulse,#touch button#tSkill,#touch button#tUlt,#pauseBtn){
  box-sizing:border-box;flex-shrink:0;padding:0;border:0;border-radius:3px;
  border-image:url('../upgrade-cards-v1/armor-panel.webp') 80 / 6px / 0 stretch;
  background:linear-gradient(145deg,var(--pad-wash),#07101880 85%),
    url('../upgrade-cards-v1/armor-panel.webp') center / cover no-repeat #10202a;
  color:var(--pad-accent);text-shadow:0 1px 3px #000;
  box-shadow:0 2px 5px #0009,inset 0 0 0 1px #91a4ad80;
  cursor:pointer;transition:filter .1s,box-shadow .1s;
}
#touch button::after,#pauseBtn::after{
  content:'';position:absolute;pointer-events:none;bottom:9px;left:34%;right:34%;height:3px;
  border-radius:1px;background:var(--pad-accent);box-shadow:0 0 5px var(--pad-wash);
}
#touch button svg{filter:drop-shadow(0 1px 2px #000);width:48%;height:48%}
/* Full selection-card badge: allow for its frame so the inner symbol stays large. */
#touch button svg.iron-icon{width:76%;height:76%}
#touch button:has(svg.iron-icon)::after{display:none}
#pauseBtn::after{bottom:6px;height:2px}
#pauseBtn i{background:var(--pad-accent);box-shadow:0 1px 2px #000}
:is(#touch button,#touch button#tPulse,#touch button#tSkill,#touch button#tUlt,#pauseBtn):active{
  filter:brightness(1.3);box-shadow:inset 0 0 0 2px var(--pad-accent),0 1px 2px #0009;
}
:is(#touch button,#pauseBtn):focus-visible{outline:2px solid #b9f1ff;outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  :is(#touch button,#touch button#tPulse,#touch button#tSkill,#touch button#tUlt,#pauseBtn){transition:none}
}