/* Artwork-first desktop layout: a light identity ribbon instead of a black slab. */
@media (min-width:761px) and (min-height:521px){
  .shell:not(.art-only) .character-hud{
    filter:drop-shadow(0 2px 5px #0006);
  }
  .shell:not(.art-only) .art-region{
    top:52px;
    right:-7%;
    bottom:20px;
    left:0;
    overflow:hidden;
    mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 98%,transparent 100%);
    clip-path:none;
  }
  .shell:not(.art-only) .art-image{
    object-fit:contain;
    filter:drop-shadow(0 14px 12px #0008) drop-shadow(0 0 22px rgba(var(--rgb),.24));
  }
  .shell:not(.art-only) .character-info{
    width:min(82%,470px);
    padding:5px 10px 7px 12px;
    border:0;
    border-left:2px solid var(--accent);
    border-bottom:1px solid rgba(var(--rgb),.52);
    background:linear-gradient(100deg,rgba(var(--rgb),.3) 0,rgba(var(--rgb),.12) 47%,rgba(var(--rgb),0) 100%);
    box-shadow:none;
    backdrop-filter:blur(2px);
    text-shadow:0 2px 4px #0009,0 0 8px #0006;
  }
  .shell:not(.art-only) .character-type{
    gap:8px;
    margin:0 0 4px;
    font-size:8px;
    line-height:1.2;
    letter-spacing:2px;
    color:var(--accent);
  }
  .shell:not(.art-only) .character-type>span:last-child{
    color:color-mix(in srgb,var(--accent) 72%,#fff 28%);
    font-size:8px;
    letter-spacing:1.4px;
  }
  .shell:not(.art-only) .type-line{width:30px;opacity:.82}
  .shell:not(.art-only) h1{
    flex-direction:row;
    align-items:baseline;
    gap:.17em;
    font-size:clamp(32px,3.05vw,52px);
    line-height:.92;
    letter-spacing:-.4px;
    filter:none;
  }
  .shell:not(.art-only) h1 .surname{
    margin:0;
    font-size:.31em;
    line-height:1;
    letter-spacing:.13em;
  }
  .shell:not(.art-only) .character-info .surname,
  .shell:not(.art-only) .character-info .given{
    color:var(--accent);
    background:linear-gradient(180deg,#f8fcff 0,color-mix(in srgb,var(--accent) 62%,#fff 38%) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    text-shadow:none;
    filter:drop-shadow(0 2px 2px #0009) drop-shadow(0 0 5px rgba(var(--rgb),.8));
  }
  .shell:not(.art-only) .character-info .given{line-height:.94}
  .shell:not(.art-only) .name-jp{
    gap:9px;
    margin:4px 0 0;
    line-height:1.2;
  }
  .shell:not(.art-only) .name-jp>span:first-child{
    font-size:17px;
    line-height:1.2;
    letter-spacing:1.5px;
    color:color-mix(in srgb,var(--accent) 44%,#fff 56%);
    text-shadow:0 1px 4px #000;
  }
  .shell:not(.art-only) .name-jp>span:last-child{
    font-size:9px;
    line-height:1.25;
    letter-spacing:.2px;
    color:#d7e4ef;
  }
  .shell:not(.art-only) .jp-divider{width:24px;opacity:.82}

  /* Desktop utilities live in the same bottom command rail as BACK and hints. */
  .shell:not(.art-only) .header-actions{
    position:fixed;
    right:2.5%;
    bottom:11px;
    z-index:41;
    gap:2px;
    min-height:36px;
    padding:2px 4px;
    border:1px solid rgba(var(--rgb),.32);
    background:linear-gradient(110deg,rgba(var(--rgb),.12),#07101ca8);
    box-shadow:0 5px 18px #0005;
    backdrop-filter:blur(8px);
  }
  .shell:not(.art-only) .gamepad-status{
    margin-right:198px;
  }
  .shell:not(.art-only) .header-actions #art-view-toggle{
    position:relative;
    inset:auto;
    z-index:auto;
    min-width:54px;
    min-height:30px;
    padding:4px 9px;
    border:0;
    border-right:1px solid #d8ebff2e;
    background:transparent;
    box-shadow:none;
    color:color-mix(in srgb,var(--accent) 62%,#fff 38%);
    font-size:9px;
    font-weight:700;
    letter-spacing:.12em;
  }
  .shell:not(.art-only) .header-actions #art-view-toggle:hover,
  .shell:not(.art-only) .header-actions #art-view-toggle:focus-visible{
    background:rgba(var(--rgb),.18);
    color:#fff;
  }
  .shell:not(.art-only) .header-actions .sound{min-height:30px;padding:4px 9px}
  .shell:not(.art-only) .header-actions .fullscreen{min-width:34px;min-height:30px;padding:2px 7px;border-left:1px solid #ffffff20}
}

@media (min-width:761px) and (min-height:521px) and (max-width:1100px){
  .shell:not(.art-only) .gamepad-status{display:none}
}

/* On phones the same command stays inside the existing top action group. */
@media (max-width:760px),(max-height:520px) and (pointer:coarse){
  .shell:not(.art-only) .header-actions #art-view-toggle{
    position:relative;
    inset:auto;
    z-index:auto;
    width:44px;
    min-width:44px;
    min-height:44px;
    padding:4px;
    border:1px solid #adcce738;
    background:#0713208f;
    box-shadow:none;
    font-size:8px;
  }

  /* Match the desktop identity colours while keeping more of the art exposed. */
  .shell:not(.art-only) .character-hud,
  .shell.confirmed:not(.art-only) .character-hud{
    inset:auto 4% 6px;
    gap:1px;
    padding:5px 8px 6px;
    background:linear-gradient(100deg,rgba(var(--rgb),.16),rgba(4,16,26,.58) 72%,rgba(4,16,26,.22));
    border-left:2px solid var(--accent);
    border-bottom:1px solid rgba(var(--rgb),.48);
    filter:drop-shadow(0 2px 5px #0005);
  }
  .shell:not(.art-only) .character-info{padding:0 44px 0 0}
  .shell:not(.art-only) h1,
  .shell:not(.art-only):is([data-character^="killmecrown-"],[data-character="seena-is-me-1"]) h1{
    font-size:clamp(19px,5.8vw,24px);
    line-height:1;
  }
  .shell:not(.art-only) .character-info .given{
    color:var(--accent);
    background:linear-gradient(180deg,#f8fcff 0,color-mix(in srgb,var(--accent) 62%,#fff 38%) 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    text-shadow:none;
    filter:drop-shadow(0 1px 2px #0009) drop-shadow(0 0 4px rgba(var(--rgb),.72));
  }
  .shell:not(.art-only) .name-jp{gap:5px;margin:1px 0 0;line-height:1.18}
  .shell:not(.art-only) .name-jp>span:first-child{
    font-size:10px;
    color:color-mix(in srgb,var(--accent) 44%,#fff 56%);
  }
  .shell:not(.art-only) .name-jp>span:last-child{font-size:8.5px;color:#d7e4ef}
  .shell:not(.art-only) .quote{
    font-size:clamp(11.5px,3.2vw,13px);
    line-height:1.35;
    color:#eef3ff;
    text-shadow:0 1px 4px #0009;
  }
  .shell:not(.art-only) .hud-details-toggle{
    top:2px;
    right:3px;
    min-width:40px;
    min-height:38px;
    padding:4px;
    font-size:8px;
  }
}
.shell.art-only .header-actions #art-view-toggle{display:none!important}

/* Keep names readable without laying a heavy black slab over the artwork. */
.vs-screen:not(.art-only) .vs-nameplate{
  background:linear-gradient(90deg,rgba(3,5,11,.58),rgba(3,5,11,.2) 68%,transparent);
  text-shadow:0 2px 8px rgba(1,3,11,.65);
}
.vs-screen:not(.art-only) .vs-fighter-right .vs-nameplate{
  background:linear-gradient(-90deg,rgba(3,5,11,.58),rgba(3,5,11,.2) 68%,transparent);
}

/* VS pick: fill the artwork frame and center the submitted cut-in focal point.
   JavaScript calculates the exact object-position while keeping the image edge-to-edge. */
.shell.versus-picking:not(.art-only) .art-image{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Values above 100 keep their submitted number and receive an over-cap glow. */
.stat-track.is-overcap .stat-fill{
  background:linear-gradient(90deg,var(--accent),#fff3bb 72%,#fff);
  box-shadow:0 0 5px #fff,0 0 13px var(--accent);
}
.stat-track.is-overcap::after{
  content:"MAX+";
  position:absolute;
  right:2px;
  top:50%;
  color:#fff;
  font:700 6px/1 system-ui,sans-serif;
  letter-spacing:.05em;
  text-shadow:0 1px 3px #000;
  transform:translateY(-50%);
}

/* Phone VS pick: move the tap guidance above the artwork and return the
   bottom dock to the roster, allowing a full 3 x 3 page. */
@media(max-width:760px),(max-height:520px) and (pointer:coarse){
  .shell.versus-picking:not(.confirmed):not(.art-only){
    padding-bottom:max(4px,env(safe-area-inset-bottom,0px));
  }
  .shell.versus-picking:not(.confirmed) .footer{
    top:calc(58px + env(safe-area-inset-top,0px));
    bottom:auto;
    height:38px;
    padding:3px 4%;
    display:flex;
    align-items:center;
    gap:8px;
    z-index:44;
    border-top:0;
    border-bottom:1px solid rgba(var(--rgb),.42);
    background:linear-gradient(90deg,#030914e8,#071322d8 70%,rgba(var(--rgb),.12));
    box-shadow:0 5px 16px #0005;
  }
  .shell.versus-picking:not(.confirmed) .footer .back{
    position:static;
    width:auto;
    min-width:82px;
    height:32px;
    min-height:32px;
    padding:4px 9px;
    flex-direction:row;
    gap:6px;
    font-size:9px;
  }
  .shell.versus-picking:not(.confirmed) .footer .back kbd{display:none}
  .shell.versus-picking:not(.confirmed) .mobile-help{
    position:static;
    flex:1;
    min-width:0;
    font-size:9px;
    line-height:1.25;
    letter-spacing:.15px;
    text-align:center;
  }
  .shell.versus-picking:not(.confirmed) .stage-top{top:39px}
  .shell.versus-picking:not(.confirmed) .roster{
    grid-template-rows:repeat(3,minmax(46px,1fr));
  }
  .shell.versus-picking:not(.confirmed) .roster-pager{
    grid-template-columns:44px minmax(0,1fr) 44px;
  }
  .shell.versus-picking:not(.confirmed) .roster-pager>span{
    min-width:0;
    flex-wrap:nowrap;
    gap:2px;
  }
  .shell.versus-picking:not(.confirmed) .roster-pager>span button{
    flex:1 1 0;
    width:auto;
    min-width:0;
    max-width:34px;
    padding-inline:2px;
  }
}

@media(max-width:760px) and (max-height:680px){
  .shell.versus-picking:not(.confirmed):not(.art-only){
    height:100dvh;
    min-height:0;
  }
  .shell.versus-picking:not(.confirmed) .main{
    grid-template-rows:minmax(270px,1fr) auto;
  }
}