/* Discreet illustrator signature shared by selection, VS and gallery views. */
.art-credit{
  top:clamp(62px,8vh,88px);right:4%;bottom:auto;left:auto;
  display:inline-flex;align-items:center;gap:7px;max-width:min(70%,260px);
  padding:5px 9px 5px 7px;border:1px solid rgba(var(--rgb),.46);border-left:2px solid var(--accent);
  color:#f5f8ff;background:linear-gradient(100deg,#030711d9,#08111db0 76%,#08111d70);
  box-shadow:0 0 18px rgba(var(--rgb),.16),inset 0 0 12px rgba(var(--rgb),.08);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;font-weight:800;
  letter-spacing:.12em;text-transform:none;text-shadow:0 1px 5px #000;white-space:nowrap;
  clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,0 100%);
}
.art-credit::before{content:"//";color:var(--accent);font-size:11px;letter-spacing:-.18em;text-shadow:0 0 9px var(--accent)}
.art-credit[hidden]{display:none!important}
.vs-screen .vs-art-credit{top:56px;right:auto;bottom:auto;left:18px;border-color:color-mix(in srgb,var(--fighter) 55%,#fff 12%);border-left-color:var(--fighter)}
.vs-screen .vs-fighter-right .vs-art-credit{right:18px;left:auto;border-right:2px solid var(--fighter);border-left:1px solid color-mix(in srgb,var(--fighter) 55%,#fff 12%);clip-path:polygon(8px 0,100% 0,100% 100%,0 100%)}

/* Full-art view: credit becomes a tiny edge watermark instead of a HUD panel. */
.shell.art-only .art-credit,
.vs-screen.art-only .vs-art-credit{
  top:calc(8px + env(safe-area-inset-top,0px));right:auto;bottom:auto;left:8px;
  gap:0;max-width:72%;padding:2px 5px;border:0;border-left:1px solid currentColor;
  color:#f4f7fbc7;background:#02050b70;box-shadow:none;
  font-size:6.5px;font-weight:700;line-height:1.2;letter-spacing:.05em;
  text-shadow:0 1px 3px #000;opacity:.62;clip-path:none;
}
.shell.art-only .art-credit::before,
.vs-screen.art-only .vs-art-credit::before{display:none}
.vs-screen.art-only .vs-fighter-right .vs-art-credit{
  top:8px;right:8px;bottom:auto;left:auto;padding:2px 5px;border:0;border-right:1px solid currentColor;clip-path:none;
}

/* PC sound control: bars carry the state; the label stays available to assistive tech. */
@media(min-width:761px){
  /* Keep the illustrator credit on its own row below the stage number. */
  .shell:not(.art-only)>.main .stage>.art-credit{
    top:92px;
    right:4%;
    max-width:min(70%,300px);
  }
  .vs-screen .vs-fighter-left .vs-art-credit{
    top:58px;
    left:22px;
    z-index:14;
    max-width:min(78%,340px);
    padding:7px 13px 7px 10px;
    border-color:color-mix(in srgb,var(--fighter) 72%,#fff 18%);
    border-left-width:3px;
    color:#fff;
    background:linear-gradient(100deg,#02050bf5 0,#06101eea 78%,#06101eb8 100%);
    box-shadow:0 0 0 1px #ffffff12,0 5px 18px #000b,0 0 16px rgba(var(--fighter-rgb),.24);
    font-size:11px;
    font-weight:900;
    line-height:1.25;
    letter-spacing:.1em;
    text-shadow:0 1px 3px #000,0 0 7px #000;
    backdrop-filter:blur(6px);
  }
  .vs-screen .vs-fighter-left .vs-art-credit::before{
    color:var(--fighter);
    text-shadow:0 0 10px var(--fighter);
  }
  .shell .sound{min-width:32px;min-height:30px;justify-content:center;gap:0;padding:4px 6px;opacity:.34;transition:opacity .15s,color .15s}
  .shell .sound:hover,.shell .sound:focus-visible,.shell .sound[aria-pressed=true]{opacity:.72}
  .shell #sound-text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  .vs-screen #vs-sound{min-width:30px;padding:4px 6px;border-color:#b7d8ff26;background:#07111b99;font-size:0;opacity:.34;transition:opacity .15s,color .15s}
  .vs-screen #vs-sound::after{content:"SE";font-size:8px;letter-spacing:.12em}
  .vs-screen #vs-sound:hover,.vs-screen #vs-sound:focus-visible,.vs-screen #vs-sound[aria-pressed=true]{opacity:.72}
}

@media(max-width:760px),(max-height:520px) and (pointer:coarse){
  .art-credit{top:54px;right:4%;max-width:72%;padding:4px 8px 4px 6px;font-size:7px;letter-spacing:.08em}
  .vs-screen .vs-art-credit,.vs-screen .vs-fighter-right .vs-art-credit{top:7px;right:auto;bottom:auto;left:8px;max-width:68%;border-right:1px solid rgba(255,255,255,.16);border-left:2px solid var(--fighter);clip-path:polygon(0 0,100% 0,calc(100% - 7px) 100%,0 100%)}
  .shell.art-only .art-credit,.vs-screen.art-only .vs-art-credit{top:calc(6px + env(safe-area-inset-top,0px));right:auto;bottom:auto;left:6px;max-width:76%;padding:1px 4px;border:0;border-left:1px solid currentColor;font-size:6px;letter-spacing:.03em;opacity:.56;clip-path:none}
  .vs-screen.art-only .vs-fighter-right .vs-art-credit{top:6px;right:6px;bottom:auto;left:auto;border:0;border-right:1px solid currentColor}
}

/* Portrait VS: reserve a clean gutter for the docked VS mark beside 1P's quote. */
@media(max-width:760px) and (orientation:portrait){
  .vs-screen.vs-settled .vs-core{left:calc(100% - 35px);top:50%;transform:translate(-50%,-50%)}
  .vs-screen.vs-settled #vs-emblem{font-size:40px}
  .vs-screen .vs-fighter-left .vs-nameplate,
  .vs-screen.vs-settled .vs-fighter-left .vs-nameplate{right:58px;max-width:calc(96% - 58px)}
  .vs-screen .vs-fighter-left .vs-nameplate .vs-given,
  .vs-screen .vs-fighter-left .vs-nameplate .vs-japanese,
  .vs-screen .vs-fighter-left .vs-nameplate .vs-quote{padding-right:0}
}