/* 2D Fandom Board: perspective belongs to the shell, not the readable action. */
:root{--control-height:224px}
.command-line{grid-template-columns:minmax(0,1fr) minmax(300px,380px) minmax(0,1fr)}
.support-control{
  --trigger-pose:none;--trigger-width:380px;--trigger-height:142px;
  --trigger-edge:#ffc25b;--trigger-face:#161b1b;
  width:var(--trigger-width);max-width:100%;
}
.support-control[data-trigger-design="perspective"]{--trigger-pose:perspective(640px) rotateX(24deg)}
.support-control[data-trigger-design="low-angle"]{--trigger-pose:perspective(580px) rotateX(36deg)}
.support-control #supportButton{
  position:relative;isolation:isolate;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;
  width:100%;height:var(--trigger-height);min-height:var(--trigger-height);
  padding:18px 24px 22px;border:0;border-radius:90px;clip-path:none;
  background:none;box-shadow:none;transform:none;overflow:visible;
  color:#fff0ce;transition:transform .16s ease-out;
}
/* The illuminated rim and lower edge provide depth without skewing type. */
.support-control #supportButton::before,.support-control #supportButton::after{
  content:'';display:block;position:absolute;pointer-events:none;
  border-radius:inherit;transform:var(--trigger-pose);transform-origin:50% 55%;
  clip-path:none;mask-image:none;opacity:1;
  transition:filter .16s ease-out,transform .18s ease-out;
}
.support-control #supportButton::before{
  z-index:-2;inset:0;border:2px solid var(--trigger-edge);
  background:linear-gradient(180deg,#fff1b9 0%,#f2aa3f 15%,#98601f 55%,#f9b344 100%);
  box-shadow:inset 0 1px 1px #fff8de,0 3px 0 #b7792e,0 7px 0 #654021,
    0 10px 0 #242019,0 16px 24px #0009,0 0 22px #f59a0036;
}
.support-control #supportButton::after{
  z-index:-1;inset:7px;border:1px solid #ffda8e8c;
  background:radial-gradient(ellipse at 50% 0%,#77613b44,transparent 64%),
    linear-gradient(180deg,#31352e,var(--trigger-face) 60%,#111616);
  box-shadow:inset 0 2px 5px #ffdf9450,inset 0 -3px 6px #000b,0 0 0 1px #573916;
}
.support-control[data-trigger-design="low-angle"] #supportButton::before{
  box-shadow:inset 0 1px 1px #fff8de,0 4px 0 #b7792e,0 9px 0 #654021,
    0 13px 0 #242019,0 19px 25px #0009,0 0 24px #f59a003b;
}
/* Additional colour studies share the original hit area and upright lettering. */
.support-control:is([data-trigger-design="amber-glow"],[data-trigger-design="pubg-orange"],[data-trigger-design="full-gold"]){
  --trigger-pose:perspective(640px) rotateX(24deg);
}
.support-control[data-trigger-design="amber-glow"]{--trigger-edge:#ffe7a6}
.support-control[data-trigger-design="amber-glow"] #supportButton::before{
  background:linear-gradient(180deg,#fff9d6,#ffc348 18%,#b56a09 52%,#ffd568 86%,#fff1b7);
  box-shadow:inset 0 1px 2px #fff,0 3px 0 #df8f16,0 7px 0 #794412,
    0 11px 0 #2f2114,0 0 14px #ffb600a3,0 0 38px #f5820055,0 17px 25px #000b;
}
.support-control[data-trigger-design="amber-glow"] #supportButton::after{
  inset:8px;border-color:#ffe5a8;
  background:radial-gradient(ellipse at 50% 110%,#fa9a0070,transparent 58%),
    radial-gradient(ellipse at 50% -25%,#ffdf7999,transparent 69%),
    linear-gradient(180deg,#824c13,#482502 54%,#291706);
  box-shadow:inset 0 2px 6px #fff0ae80,inset 0 0 22px #e48a003b,
    inset 0 -3px 5px #1d0d09,0 0 0 2px #a75e16;
}
.support-control[data-trigger-design="amber-glow"] #supportButton:not(:disabled) #actionLabel{
  color:#fff3d0;text-shadow:0 2px 2px #3f220a,0 0 10px #ffa72666;
}
.support-control[data-trigger-design="pubg-orange"]{--trigger-edge:#ffcb77}
.support-control[data-trigger-design="pubg-orange"] #supportButton::before{
  background:linear-gradient(180deg,#ffe2a1,#ff9f24 28%,#9b4308 68%,#f58200);
  box-shadow:inset 0 1px 1px #fff7d6,0 3px 0 #e08115,0 8px 0 #5e3014,
    0 11px 0 #241a12,0 0 25px #f5820066,0 18px 24px #000a;
}
.support-control[data-trigger-design="pubg-orange"] #supportButton::after{
  border-color:#ffcd70;
  background:radial-gradient(ellipse at 50% -30%,#ffdb87,transparent 70%),
    linear-gradient(180deg,#ffa629,#f58200 70%,#df7008);
  box-shadow:inset 0 2px 3px #ffefb6b3,inset 0 -3px 5px #a84c17,0 0 0 1px #8d4714;
}
.support-control[data-trigger-design="full-gold"]{--trigger-edge:#fff2c1}
.support-control[data-trigger-design="full-gold"] #supportButton::before{
  background:linear-gradient(180deg,#fffde3,#ffe491 16%,#e3a536 52%,#ffdb7b 88%,#fff2b6);
  box-shadow:inset 0 1px 2px #fff,0 3px 0 #dba237,0 8px 0 #79511c,
    0 11px 0 #302416,0 0 17px #ffc33699,0 0 36px #e99b0055,0 18px 25px #000b;
}
.support-control[data-trigger-design="full-gold"] #supportButton::after{
  inset:8px;border-color:#fff0b8;
  background:radial-gradient(ellipse at 50% -30%,#fff8cc,transparent 75%),
    linear-gradient(180deg,#ffe29a 0%,#ecc46b 43%,#dda641 66%,#ffd781 100%);
  box-shadow:inset 0 2px 4px #fff9dcbf,inset 0 -3px 5px #a16a1f,0 0 0 1px #a57223;
}
.support-control #supportButton .weapon-visual,.support-control #supportButton:hover .weapon-visual{
  position:relative;z-index:1;width:200px!important;height:46px;
  display:block!important;flex-shrink:0;transform:none;transition:none;
}
.support-control #supportButton .weapon-art{width:200px!important;height:46px;filter:drop-shadow(0 3px 2px #000b)}
.support-control #supportButton .weapon-action{
  position:relative;z-index:1;display:flex;justify-content:center;align-items:center;
  gap:12px;width:100%;height:auto;padding:0;margin:0;transform:none;
}
.support-control #supportButton #actionLabel{
  margin:0;font:900 36px/1.1 Free,sans-serif;letter-spacing:-.035em;
  color:#fff0ce;text-shadow:0 2px 2px #000a;
}
.support-control #supportButton .rounds{color:#ffc15e;border-left-color:#c6974b70;padding-left:12px}
.support-control #supportButton .rounds>b{font:700 25px/1 Free,sans-serif}
.support-control #supportButton .rounds>small{font-size:11px}
.support-control #supportButton .aim-mark{width:15px;height:15px;color:#ffb640}
/* Bright faces use dark ink, not low-contrast white or foreshortened text. */
.support-control:is([data-trigger-design="pubg-orange"],[data-trigger-design="full-gold"]) #supportButton:not(:disabled) #actionLabel{
  color:#231a0e;text-shadow:0 1px 0 #ffe7b070;
}
.support-control:is([data-trigger-design="pubg-orange"],[data-trigger-design="full-gold"]) #supportButton:not(:disabled) .rounds{
  color:#302213;border-left-color:#71431766;
}
.support-control:is([data-trigger-design="pubg-orange"],[data-trigger-design="full-gold"]) #supportButton .aim-mark{color:#503415}
.support-control:is([data-trigger-design="pubg-orange"],[data-trigger-design="full-gold"]) #supportButton .aim-mark::after{background:#e8a03f}
.support-control:is([data-trigger-design="pubg-orange"],[data-trigger-design="full-gold"]) #supportButton .weapon-art{filter:drop-shadow(0 2px 1px #63380d73)}
.support-control:is([data-trigger-design="pubg-orange"],[data-trigger-design="full-gold"]) #supportButton .weapon-stock{fill:#413e32}
.support-control:is([data-trigger-design="pubg-orange"],[data-trigger-design="full-gold"]) #supportButton .weapon-metal{fill:#686a59}
.support-control:is([data-trigger-design="pubg-orange"],[data-trigger-design="full-gold"]) #supportButton .weapon-light{fill:#f8edc7}
.support-control #supportButton:hover:not(:disabled){background:none;box-shadow:none;transform:translateY(-2px)}
.support-control #supportButton:hover:not(:disabled)::before{filter:brightness(1.17)}
.support-control #supportButton:active:not(:disabled){transform:translateY(3px)}
.support-control #supportButton.is-firing{animation:trigger-depth-recoil .18s ease-out}
.support-control #supportButton:disabled{background:none;box-shadow:none;transform:none}
.support-control #supportButton:disabled::before,.support-control #supportButton:disabled::after{filter:grayscale(.7);opacity:.55}
.support-control #supportButton:disabled #actionLabel{font-size:28px;color:#d9d8cc}
.support-control #supportButton:disabled .rounds{color:#b7b6a9}
.support-control #actionBenefit{margin-top:12px;font-size:10px}
.trigger-design-switch{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:5px;height:26px;color:#b6b8b1}
.trigger-design-switch button{display:grid;place-items:center;width:28px;height:26px;padding:0;border:0;background:none;color:#d7d4c9;font:400 16px/1 Free,sans-serif;cursor:pointer}
.trigger-design-switch button:hover{color:#ffad51}
.trigger-design-switch button:focus-visible{outline:1px solid #f58200;outline-offset:1px}
.trigger-design-switch output{min-width:130px;text-align:center;font:400 10px/1.2 Free,sans-serif;letter-spacing:.04em}
@keyframes trigger-depth-recoil{0%,100%{transform:translateY(0)}45%{transform:translateY(3px)}}
@media(max-width:1100px) and (min-width:721px){
  .command-line{grid-template-columns:minmax(0,1fr) minmax(290px,340px) minmax(0,1fr);gap:12px;padding-inline:2%}
  .support-control{--trigger-width:340px}
  .support-control #supportButton #actionLabel{font-size:33px}
}
@media(max-width:720px){
  :root,.hub-embedded{--control-height:304px}
  .command-line{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;padding:14px 10px 10px}
  .support-control{--trigger-width:340px;--trigger-height:134px}
  .support-control #supportButton{padding-inline:15px}
  .support-control #supportButton #actionLabel{font-size:30px}
  .support-control #supportButton .rounds>b{font-size:22px}
  .support-control #supportButton .weapon-visual,.support-control #supportButton .weapon-art{width:180px!important;height:42px}
  .support-control #supportButton .weapon-action{gap:9px}
  .support-control #supportButton:disabled #actionLabel{font-size:24px}
  .trigger-design-switch{gap:6px}
  .trigger-design-switch output{font-size:9px;min-width:119px}
}
@media(prefers-reduced-motion:reduce){
  .support-control #supportButton,.support-control #supportButton::before,.support-control #supportButton::after{transition:none!important;animation:none!important}
}