/* A width-led 2D canvas balanced for whole-page captures.
   This sheet is intentionally not imported by the 3D page.
   The shared PUBG KV stays static; the canvas samples only the team emblem. */
@media(min-width:1101px){
  :root{
    --board-presentation-height:50vw;
    --board-height:clamp(800px,var(--board-presentation-height),1200px);
  }
}

/* 2D final: the rifle remains part of the action, but the whole object reads as one tactile trigger. */
.support-control{--trigger-gold:#dfc17e;--trigger-ink:#151816;--trigger-metal:#b9b6a2;width:min(330px,100%);max-width:330px}
#supportButton{display:grid;grid-template-columns:108px minmax(0,1fr) 67px;align-items:center;gap:10px;min-height:78px;padding:9px 13px 8px;border:1px solid var(--trigger-gold);border-radius:0;background:linear-gradient(180deg,#30322b,#171b18 65%);color:#f0dfb5;clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px);box-shadow:inset 0 2px #dfc17e,inset 0 -3px #70613d,0 6px 20px #0008;overflow:hidden;transition:transform .16s,filter .16s,box-shadow .16s}
#supportButton:before{content:'COVERING FIRE';left:132px;top:12px;color:#c0ae82;font:800 7px/1 Free,sans-serif;letter-spacing:.16em}
#supportButton:after{content:'';position:absolute;inset:5px;z-index:0;border:1px solid #bda36955;clip-path:polygon(7px 0,calc(100% - 7px) 0,100% 7px,100% calc(100% - 7px),calc(100% - 7px) 100%,7px 100%,0 calc(100% - 7px),0 7px);background:none;pointer-events:none;mask-image:none;opacity:1}
#supportButton:hover:not(:disabled){border-color:#f2d797;background:linear-gradient(180deg,#424337,#252a21 65%);transform:translateY(-2px);box-shadow:inset 0 2px #f1d596,inset 0 -3px #9b844e,0 5px 22px #d7b66924}
#supportButton:active:not(:disabled){transform:translateY(1px);filter:saturate(.92)}
#supportButton .weapon-visual{position:relative;z-index:1;display:block!important;grid-column:1;width:108px;margin:0;transition:transform .16s}
#supportButton .weapon-meta{display:none!important}
#supportButton .weapon-art{display:block;width:108px;height:auto;overflow:visible;fill:none;color:var(--trigger-metal)}
#supportButton .weapon-dark{fill:#141917}#supportButton .weapon-metal{fill:#737d70}#supportButton .weapon-light{fill:#c9c6ad}#supportButton .weapon-stock{fill:#666b5d}#supportButton .weapon-outline,#supportButton .weapon-detail{fill:none;stroke:#111613;stroke-width:2}#supportButton .weapon-accent,#supportButton .weapon-fastener{fill:#d4b36f}#supportButton .weapon-flash{fill:#fff5b5;opacity:0;transition:opacity .12s}
#supportButton .weapon-action{display:contents;width:auto;height:auto;margin:0;padding:0;border:0;color:#f0dfb5}
#supportButton .aim-mark{display:none}
#supportButton #actionLabel{position:relative;z-index:1;grid-column:2;align-self:center;margin-top:11px;font:900 22px/1 Free,sans-serif;letter-spacing:-.04em;white-space:nowrap}
#supportButton .rounds{position:relative;z-index:1;grid-column:3;display:flex;align-items:baseline;justify-content:flex-end;gap:2px;min-width:0;padding-left:9px;border-left:1px solid #c9ad6b55;color:#dfc17e}
#supportButton .rounds>b{font:900 23px/1 Free,sans-serif;letter-spacing:-.05em}#supportButton .rounds>small{font:900 9px/1 Free,sans-serif;color:inherit}
#supportButton:hover:not(:disabled) .weapon-visual{transform:translateX(3px)}#supportButton:hover:not(:disabled) .weapon-flash,#supportButton.is-firing .weapon-flash{opacity:1}
#supportButton:disabled{border-color:#65665f;background:linear-gradient(135deg,#282a27,#171917);color:#c9cbbf;box-shadow:none}
#supportButton:disabled:before{color:#a3a69a}#supportButton:disabled #actionLabel{font-size:17px}#supportButton:disabled .weapon-art{opacity:.48}#supportButton:disabled #actionLabel,#supportButton:disabled .rounds{color:#b6baaE}
#actionBenefit{margin-top:6px;color:#b1b3ab;font-size:8px;letter-spacing:.05em}
.preview-tools>span{color:#9a958b;font-size:9px;letter-spacing:.08em}

@media(max-width:1500px){
  .support-control{width:min(285px,100%)}
  #supportButton{grid-template-columns:88px minmax(0,1fr) 58px;gap:7px;min-height:72px;padding-inline:10px}
  #supportButton:before{left:108px;top:10px}
  #supportButton .weapon-visual,#supportButton .weapon-art{width:88px}
  #supportButton #actionLabel{font-size:20px}
  #supportButton .rounds>b{font-size:20px}
}

@media(max-width:720px){
  .support-control{width:min(310px,100%);max-width:310px}
  #supportButton{grid-template-columns:94px minmax(0,1fr) 61px;min-height:74px}
  #supportButton:before{left:115px}
  #supportButton .weapon-visual,#supportButton .weapon-art{width:94px}
}