/* Independent sample roster. Six entries per mobile page, twelve per desktop page. */
.shell .character-card[hidden],.shell .roster-pager[hidden]{display:none!important}
.shell .roster-pager{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:6px;margin:6px 5px 0}
.shell .roster-pager>button,.shell .roster-pager span button{min-width:44px;min-height:44px;border:1px solid #6685a54d;background:#07111a;color:#dcecff;font-size:18px;touch-action:manipulation}
.shell .roster-pager>button:disabled{opacity:.28}
.shell .roster-pager span{display:flex;justify-content:center;gap:2px;flex-wrap:wrap}
.shell .roster-pager span button{font-size:10px;letter-spacing:1px;color:#89a0bc}
.shell .roster-pager span button[aria-pressed=true]{border-color:var(--accent);color:#fff;background:rgba(var(--rgb),.16)}
.shell .character-card.variant .card-details strong{white-space:normal;overflow-wrap:anywhere;line-height:1.15}
.shell:is([data-character^="killmecrown-"],[data-character="seena-is-me-1"]) h1{font-size:clamp(24px,4vw,66px)}
.shell:is([data-character^="killmecrown-"],[data-character="seena-is-me-1"]) .name-jp{flex-wrap:wrap;letter-spacing:0}
.shell:is([data-character^="killmecrown-"],[data-character="seena-is-me-1"]) .readout-main{flex-wrap:wrap;gap:6px}
.vs-screen .vs-fighter:is([data-character^="killmecrown-"],[data-character="seena-is-me-1"]) .vs-given{font-size:clamp(24px,3.2vw,48px);letter-spacing:-.04em;overflow-wrap:anywhere}
.vs-cutin>strong{min-width:0;overflow-wrap:anywhere}
@media(min-width:761px) and (min-height:521px){
  .shell .roster{grid-template-rows:repeat(2,minmax(0,1fr))}
  .shell .selector{min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-bottom:14px}
  .shell .character-card{height:clamp(100px,18vh,190px);min-height:100px}
}
@media(max-width:760px),(max-height:520px) and (pointer:coarse){
  .shell:is([data-character^="killmecrown-"],[data-character="seena-is-me-1"]) h1{font-size:clamp(23px,7.2vw,34px)}
  .vs-screen .vs-fighter:is([data-character^="killmecrown-"],[data-character="seena-is-me-1"]) .vs-given{font-size:clamp(20px,5.8vw,28px)}
}

/* Three-line mobile identity; secondary information stays available on demand. */
.hud-details-toggle{display:none}
@media(max-width:760px),(max-height:520px) and (pointer:coarse){
  .shell .character-hud,.shell.confirmed .character-hud{inset:auto 4% 8px;display:flex;flex-direction:column;gap:2px;padding:7px 10px 8px;background:linear-gradient(100deg,#030a14cf,#051020a8 75%,#05102055);backdrop-filter:none;box-shadow:none;border-bottom:0;filter:none;pointer-events:auto}
  .shell .hud-details-toggle{display:block;position:absolute;top:4px;right:5px;min-width:50px;min-height:44px;padding:6px;font-size:10px;color:#dceaf6;background:#071320b8;border:1px solid #adcce74d;z-index:2;touch-action:manipulation}
  .shell .character-type,.shell .character-info .surname,.shell .jp-divider{display:none}
  .shell .character-info{padding:0 54px 0 0;background:none}
  .shell h1,.shell:is([data-character^="killmecrown-"],[data-character="seena-is-me-1"]) h1{font-size:clamp(22px,6.8vw,29px);line-height:1.08;letter-spacing:0;filter:none;margin:0}
  .shell .name-jp,.shell:is([data-character^="killmecrown-"],[data-character="seena-is-me-1"]) .name-jp{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 0;line-height:1.3;letter-spacing:0}
  .shell .name-jp>span:first-child{font-size:11px;letter-spacing:.2px}
  .shell .name-jp>span:last-child{font-size:10px;letter-spacing:0;color:#c3d3e1}
  .shell .attributes{gap:0;padding:0;border:0;background:none}
  .shell .quote-block{margin:0;padding:0;border:0}
  .shell .quote{font-size:clamp(13px,3.65vw,15px);line-height:1.45;letter-spacing:0;margin:0;white-space:normal;overflow-wrap:anywhere}
  .shell:not(.hud-expanded) .style-heading,.shell:not(.hud-expanded) .stats{display:none}
  .shell.hud-expanded .style-heading{display:block;order:1;margin-top:9px;padding-top:8px;border-top:1px solid #9db8d333}
  .shell.hud-expanded .profile{display:block;font-size:11px;line-height:1.5;margin:5px 0;padding:0;border:0}
  .shell.hud-expanded .stats{display:grid;margin-top:6px}
  .shell.hud-expanded #mobile-prev,.shell.hud-expanded #mobile-next{visibility:hidden}

  .vs-screen .vs-nameplate,.vs-screen.vs-settled .vs-nameplate{display:grid;grid-template-columns:29px minmax(0,1fr);gap:2px 4px;padding:7px 9px;background:linear-gradient(100deg,#030913cc,#03091377 78%,transparent);box-shadow:none}
  .vs-screen .vs-fighter-right .vs-nameplate{background:linear-gradient(-100deg,#030913cc,#03091377 78%,transparent)}
  .vs-screen .vs-nameplate .vs-player{grid-area:1/1;align-self:center;margin:0;font-size:7px;line-height:1.3;letter-spacing:0}
  .vs-screen .vs-nameplate .vs-given,.vs-screen .vs-fighter:is([data-character^="killmecrown-"],[data-character="seena-is-me-1"]) .vs-given{grid-area:1/2;font-size:clamp(21px,6.3vw,27px);line-height:1.08;filter:none;min-width:0;white-space:normal;overflow:visible;overflow-wrap:anywhere;letter-spacing:-.02em}
  .vs-screen .vs-nameplate .vs-japanese{grid-area:2/1/3/3;margin:0;font-size:11px;line-height:1.3;letter-spacing:.2px}
  .vs-screen .vs-nameplate .vs-quote{grid-area:3/1/4/3;margin:0;padding:0;border:0;font-size:clamp(13px,3.65vw,15px);line-height:1.45;letter-spacing:0;white-space:normal;overflow-wrap:anywhere}
  .vs-screen .vs-nameplate .vs-style,.vs-screen .vs-nameplate .vs-surname{display:none}
}

/* Rectangular top edges prevent 2P's original top row being removed by the diagonal. */
@media(max-width:760px) and (orientation:portrait){
  .vs-screen .vs-stage{inset:env(safe-area-inset-top,0px) 0 calc(var(--vs-dock,64px) + env(safe-area-inset-bottom,0px) + 16px);--impact-y:50%}
  .vs-screen .vs-fighter,.vs-screen.art-only .vs-fighter{left:0;right:0;width:100%;height:50%;clip-path:none;overflow:hidden;transform-origin:center top}
  .vs-screen .vs-fighter-left,.vs-screen.art-only .vs-fighter-left{top:0;bottom:auto}
  .vs-screen .vs-fighter-right,.vs-screen.art-only .vs-fighter-right{top:50%;bottom:auto}
  .vs-screen .vs-fighter .vs-fighter-art{inset:0;mask-image:none;transform-origin:center top}
  .vs-screen .vs-fighter-art img,.vs-screen.art-only .vs-fighter-art img{object-position:center top!important;transform-origin:center top}
  .vs-screen .vs-stage>.battle-scene{left:0;right:0;width:100%;height:50%;clip-path:none}
  .vs-screen .vs-stage>.vs-arena-left{top:0;bottom:auto}
  .vs-screen .vs-stage>.vs-arena-right{top:50%;bottom:auto}
  .vs-screen .vs-fighter-left .vs-nameplate,.vs-screen .vs-fighter-right .vs-nameplate,.vs-screen.vs-settled .vs-fighter-left .vs-nameplate,.vs-screen.vs-settled .vs-fighter-right .vs-nameplate{left:4%;right:4%;bottom:8px;max-width:none;margin:0}
  .vs-screen .vs-fighter-left .vs-nameplate .vs-given,.vs-screen .vs-fighter-left .vs-nameplate .vs-japanese{padding-right:50px}
  .vs-screen .vs-core{top:50%}
  .vs-screen.vs-settled .vs-core{left:calc(100% - 42px);right:auto;top:calc(50% - 62px);transform:translate(-50%,-50%)}
  .vs-screen.vs-settled #vs-emblem{font-size:46px}
  .vs-screen .vs-conduit{top:calc(50% - 8px);bottom:auto;height:16px}
  .vs-screen .vs-seam{top:50%;transform:rotate(0deg)}
  .vs-screen .vs-art-credit,.vs-screen .vs-fighter-right .vs-art-credit{top:8px;bottom:auto;left:8px;right:auto}
}

/* Random match: a short slot-machine cadence that resolves into the existing VS scene. */
.random-match{flex:0 0 auto;min-width:142px;min-height:46px;display:grid;grid-template-columns:22px minmax(0,1fr) 24px;align-items:center;gap:6px;padding:5px 8px;border:1px solid rgba(var(--rgb),.7);background:linear-gradient(120deg,rgba(var(--rgb),.22),#07101ee8 52%,#0d1727);color:#edf7ff;clip-path:polygon(7% 0,100% 0,93% 100%,0 100%);box-shadow:inset 0 0 18px rgba(var(--rgb),.12),0 0 14px rgba(var(--rgb),.14);text-align:left;touch-action:manipulation}
.random-match>span{font-size:19px;color:var(--accent);text-shadow:0 0 10px var(--accent)}
.random-match strong{font-family:Impact,"Arial Narrow",sans-serif;font-size:12px;font-style:italic;font-weight:400;letter-spacing:1px;white-space:nowrap}
.random-match kbd{min-width:22px;padding:4px 3px;border-color:rgba(var(--rgb),.48);font-size:8px}
.random-match:hover:not(:disabled),.random-match:focus-visible{border-color:#e9f8ff;box-shadow:inset 0 0 22px rgba(var(--rgb),.2),0 0 20px rgba(var(--rgb),.48)}
.random-match:disabled{opacity:.48}
.random-draw[hidden]{display:none!important}
.random-draw{position:fixed;inset:0;z-index:90;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;align-items:center;gap:16px;padding:max(26px,env(safe-area-inset-top)) max(22px,5vw) max(20px,env(safe-area-inset-bottom));overflow:hidden;background:radial-gradient(circle at 50% 46%,#183153 0,#07101ee8 26%,#02050bf7 70%);isolation:isolate}
.random-grid{position:absolute;inset:-20%;z-index:-2;opacity:.34;background:repeating-linear-gradient(90deg,transparent 0 53px,#8bc8ff18 54px),repeating-linear-gradient(0deg,transparent 0 53px,#8bc8ff18 54px);transform:perspective(600px) rotateX(64deg) translateY(23%);transform-origin:center bottom}
.random-draw:before,.random-draw:after{content:"";position:absolute;left:-15%;width:130%;height:2px;z-index:3;pointer-events:none;background:linear-gradient(90deg,transparent,var(--accent),#fff,var(--accent),transparent);box-shadow:0 0 10px #fff,0 0 28px var(--accent);opacity:.8;transform:rotate(-7deg)}
.random-draw:before{top:27%}.random-draw:after{bottom:24%;transform:rotate(6deg)}
.random-heading{align-self:start;justify-self:center;text-align:center;text-transform:uppercase}.random-heading span{display:block;font-size:10px;letter-spacing:5px;color:#9db7d4}.random-heading strong{display:block;margin-top:5px;font-family:Impact,"Arial Narrow",sans-serif;font-size:clamp(32px,6vw,78px);font-style:italic;font-weight:400;line-height:1;letter-spacing:2px;color:#fff;text-shadow:0 0 7px #fff,0 0 24px var(--accent)}
.random-slots{width:min(1120px,100%);height:min(60vh,640px);justify-self:center;display:grid;grid-template-columns:minmax(0,1fr) minmax(90px,12vw) minmax(0,1fr);align-items:stretch;gap:16px}
.random-slot{--slot-color:#66aaff;position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;min-width:0;padding:11px;border:1px solid color-mix(in srgb,var(--slot-color) 65%,#fff 35%);background:#050a13d9;box-shadow:inset 0 0 30px color-mix(in srgb,var(--slot-color) 13%,transparent),0 0 28px color-mix(in srgb,var(--slot-color) 25%,transparent);clip-path:polygon(5% 0,100% 0,95% 100%,0 100%);overflow:hidden}
.random-slot-right{clip-path:polygon(0 0,95% 0,100% 100%,5% 100%);text-align:right}
.random-slot>span{position:absolute;top:14px;left:16px;z-index:2;padding:4px 7px;background:#02060dcc;border-left:2px solid var(--slot-color);font-size:9px;letter-spacing:2px}.random-slot-right>span{left:auto;right:16px;border-left:0;border-right:2px solid var(--slot-color)}
.random-slot>div{grid-row:1/3;min-height:0;overflow:hidden;background:linear-gradient(140deg,color-mix(in srgb,var(--slot-color) 18%,#050913),#02050b)}
.random-slot img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;filter:saturate(.9) contrast(1.08);transform:scale(1.03)}
.random-slot>strong{position:relative;margin-top:-38px;padding:38px 8px 0;overflow-wrap:anywhere;font-family:Impact,"Arial Narrow",sans-serif;font-size:clamp(26px,4vw,60px);font-style:italic;font-weight:400;line-height:1;color:#fff;background:linear-gradient(0deg,#030711 40%,transparent);text-shadow:0 2px 9px #000,0 0 12px var(--slot-color)}
.random-slot>small{padding:6px 8px 2px;overflow-wrap:anywhere;font-size:12px;letter-spacing:1px;color:#d9e7f5}
.random-core{display:grid;place-content:center;gap:10px;z-index:4;text-align:center}.random-core strong{font-family:Impact,"Arial Narrow",sans-serif;font-size:clamp(62px,10vw,150px);font-style:italic;font-weight:400;line-height:.82;color:#fff4ca;text-shadow:0 4px 0 #17233a,0 0 12px #fff,0 0 35px var(--accent)}.random-core i{width:100%;height:2px;background:linear-gradient(90deg,transparent,#fff,transparent);box-shadow:0 0 12px var(--accent)}
.random-status{justify-self:center;min-width:min(560px,92vw);padding:7px 15px;border-top:1px solid #b8d9ff5c;border-bottom:1px solid #b8d9ff5c;text-align:center;font-size:10px;letter-spacing:4px;color:#dcecff;background:#06101db5}
.random-cancel{justify-self:center;min-width:132px;min-height:44px;padding:8px 14px;border:1px solid #90a8c050;background:#050b15cc;color:#b8c9da;font-size:10px;letter-spacing:2px}
.random-draw.is-ticking .random-slot{animation:random-tick .16s cubic-bezier(.16,1,.3,1)}
.random-draw.is-ticking .random-core{animation:random-core-pulse .16s ease-out}
.random-draw.is-locked .random-slot{border-width:2px;filter:brightness(1.2);animation:random-lock .42s cubic-bezier(.16,1,.3,1)}
.random-draw.is-locked .random-core strong{color:#fff;text-shadow:0 0 8px #fff,0 0 24px var(--accent),0 0 58px var(--accent)}
.random-draw.is-exiting{animation:random-exit .18s ease-in both}
@keyframes random-tick{0%{transform:translateY(10px) scale(.985);filter:blur(4px) brightness(1.5)}100%{transform:none;filter:none}}
@keyframes random-core-pulse{0%{transform:scale(.78);opacity:.35}100%{transform:none;opacity:1}}
@keyframes random-lock{0%{transform:scale(.97);filter:brightness(2)}55%{transform:scale(1.025);filter:brightness(1.5)}100%{transform:none;filter:brightness(1.2)}}
@keyframes random-exit{to{opacity:0;transform:scale(1.035);filter:blur(5px)}}

@media(max-width:760px),(max-height:520px) and (pointer:coarse){
  .random-match{min-width:132px;min-height:44px;grid-template-columns:18px minmax(0,1fr) 20px;gap:4px;padding:4px 7px}.random-match>span{font-size:16px}.random-match strong{font-size:10px;letter-spacing:.7px}.random-match kbd{font-size:7px;min-width:19px}
  .random-draw{gap:10px;padding:calc(14px + env(safe-area-inset-top)) 12px calc(10px + env(safe-area-inset-bottom))}.random-heading span{font-size:8px;letter-spacing:3px}.random-heading strong{font-size:clamp(29px,9vw,42px)}
  .random-slots{height:min(61vh,560px);grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr);gap:5px}.random-slot{padding:6px;clip-path:polygon(5% 0,100% 0,95% 100%,0 100%)}.random-slot-right{clip-path:polygon(0 0,95% 0,100% 100%,5% 100%)}
  .random-slot>span{top:9px;left:9px;padding:3px 5px;font-size:7px;letter-spacing:1px}.random-slot-right>span{left:auto;right:9px}.random-slot>strong{margin-top:-30px;padding:30px 4px 0;font-size:clamp(20px,6vw,29px)}.random-slot>small{padding:5px 4px 1px;font-size:9px;letter-spacing:0}.random-core strong{font-size:50px}.random-status{min-width:0;width:100%;padding:6px 8px;font-size:8px;letter-spacing:2px}.random-cancel{min-height:44px}
}
@media(max-width:760px) and (orientation:portrait){
  .shell:not(.art-only) .main{grid-template-rows:minmax(365px,1fr) auto}
  .shell .selector{padding-top:4px;padding-bottom:1px}
  .shell .selector-heading{margin-bottom:4px}
  .shell .roster{gap:5px 8px}
  .shell .character-card{height:clamp(48px,6.4dvh,58px);min-height:46px}
  .shell .roster-pager{margin-top:3px}
}
@media(max-width:360px){
  .shell .selector-heading{gap:8px}
  .shell .selector h2{font-size:15px;letter-spacing:1px}
  .random-match{min-width:110px;grid-template-columns:minmax(0,1fr);text-align:center}
  .random-match>span,.random-match kbd{display:none}
  .random-match strong{font-size:9.5px}
}
@media(max-height:520px){
  .random-draw{gap:8px;padding:10px 12px}
  .random-heading span{font-size:8px;letter-spacing:3px}
  .random-heading strong{font-size:32px}
  .random-slots{height:100%;min-height:0}
  .random-slot{min-height:0;padding:6px}
  .random-slot>strong{font-size:24px}
  .random-slot>small{padding-top:4px;font-size:9px}
  .random-status{font-size:8px;padding:6px 8px;letter-spacing:2px}
}
@media(prefers-reduced-motion:reduce){.random-draw *{animation:none!important}.random-draw.is-exiting{animation:none!important}}

/* On PC, anchor every character crop to the original image's top edge. */
@media(min-width:761px){
  .shell .art-image,
  .shell .character-card img,
  .vs-screen .vs-fighter-art img,
  .vs-screen .vs-cutin-image img{object-position:center top!important}
}