/* Shared raised buttons for every public page. */
.btn{
  --bg:var(--brand); --shade:var(--brand-deep);
  --sheen:rgba(255,255,255,.34); --dim:rgba(0,0,0,.16); --lip:.44em; --wobble:url(#btn-wobble);
  position:relative;isolation:isolate;
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:var(--display);font-weight:800;font-size:1.05rem;line-height:1.15;text-transform:uppercase;
  color:#fff;padding:.86em 1.9em;border:0;cursor:pointer;background:none;
  text-shadow:0 .09em 0 rgba(0,0,0,.18);
  transition:transform .12s ease;white-space:nowrap;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:999px;background:var(--bg);
  box-shadow:
    inset 0 .24em 0 var(--sheen),
    inset 0 calc(var(--lip) * -1) 0 var(--dim),
    0 .4em 0 var(--shade),
    0 .95em 1.5em -.6em rgba(22,23,43,.55);
  filter:var(--wobble);
  transform:translateZ(0);
  transition:box-shadow .12s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:hover::before{
  box-shadow:
    inset 0 .24em 0 var(--sheen),
    inset 0 calc(var(--lip) * -1) 0 var(--dim),
    0 .52em 0 var(--shade),
    0 1.2em 1.7em -.6em rgba(22,23,43,.55),
    inset 0 0 0 99em rgba(255,255,255,.09);
}
.btn:active{transform:translateY(.32em)}
.btn:active::before{
  box-shadow:
    inset 0 .24em 0 var(--sheen),
    inset 0 calc(var(--lip) * -1) 0 var(--dim),
    0 .08em 0 var(--shade),
    0 .3em .6em -.3em rgba(22,23,43,.55);
}
.btn-lg{font-size:1.34rem;padding:.9em 2.05em}
.btn-sm{font-size:.95rem;padding:.74em 1.5em;--lip:.36em;--wobble:url(#btn-wobble-sm)}
.btn-ico{width:1.15em;height:1.15em;flex:none}
.btn-ghost,.btn-white{
  --bg:#fff;--shade:#cce2ed;--sheen:rgba(255,255,255,.9);--dim:rgba(93,60,160,.1);
  color:var(--brand);text-shadow:none;
}

/* Official channels wear their own colours. These need .btn in the selector:
   this sheet loads after styles.css, so a plain .soc-discord loses to .btn's
   own --bg and every channel button turns brand blue. */
.btn.soc-discord{--bg:#5865f2;--shade:#3b45c4}
.btn.soc-x{--bg:#16181c;--shade:#000}
.btn.soc-roblox{--bg:#fff;--shade:#c3cedb;--sheen:rgba(255,255,255,.6);--dim:rgba(20,30,45,.08);--button-ink:var(--ink);text-shadow:none}
.btn.soc-roblox svg{color:var(--brand)}
.btn.soc-youtube{--bg:#ff0033;--shade:#c20026}

/* Links keep their button foreground even inside wiki article styles. */
.btn.btn{color:var(--button-ink,#fff);text-decoration:none;border-radius:999px}
.btn-ghost,.btn-white{--button-ink:var(--brand)}
.btn:focus-visible{outline:3px solid #76d3ff;outline-offset:8px}
@media(prefers-reduced-motion:reduce){.btn,.btn::before{transition:none}}

@media(max-width:680px){
  .btn.soc{min-width:0;max-width:100%;padding-inline:.7em;line-height:1.2;text-align:center;white-space:normal}
  .btn.soc>span{min-width:0;overflow-wrap:anywhere}
}
@media(max-width:680px){
  /* Two-up, "Roblox community" is wider than half a phone and the grid goes
     ragged. One even column instead, capped so it doesn't sprawl on tablets.
     Comes after the block above and in a later sheet than styles.css, so it
     wins on order alone. */
  .soc-row{grid-template-columns:1fr;gap:16px;width:min(100%,340px);margin-inline:auto}
  .soc-row li{display:flex}
  .btn.soc{width:100%;white-space:nowrap}
}