/* Electric encounter: a luminous VS mark and a fine current along the artwork seam. */
.vs-screen #vs-emblem{background-image:linear-gradient(155deg,#fff 12%,#ddf5ff 39%,var(--left-color) 48%,#fff 51%,#eefaff 66%,var(--right-color) 91%);-webkit-text-stroke-color:#e4f9ff;filter:drop-shadow(3px 5px 0 #07182c) drop-shadow(-3px 0 12px var(--left-color)) drop-shadow(3px 0 12px var(--right-color))}
.vs-screen.vs-settled #vs-emblem{filter:drop-shadow(2px 3px 0 #06101d) drop-shadow(-2px 0 5px var(--left-color)) drop-shadow(2px 0 5px var(--right-color))}
.vs-electric{position:absolute;left:50%;top:50%;width:168%;height:180%;transform:translate(-50%,-50%);overflow:visible;pointer-events:none;z-index:1}
.vs-electric path{fill:none;stroke-linejoin:miter;stroke-linecap:square;stroke-width:1.4;vector-effect:non-scaling-stroke}
.electric-left{stroke:#dff7ff;filter:drop-shadow(0 0 3px var(--left-color)) drop-shadow(0 0 5px var(--left-color))}
.electric-right{stroke:#f1f8ff;filter:drop-shadow(0 0 3px var(--right-color)) drop-shadow(0 0 5px var(--right-color))}
.electric-split{stroke:#effaff;stroke-width:2!important;filter:drop-shadow(0 0 5px var(--left-color));opacity:.78}
.vs-screen[open] .electric-left{animation:electric-breathe 3.8s ease-in-out infinite}
.vs-screen[open] .electric-right{animation:electric-breathe 4.6s .7s ease-in-out infinite}
.vs-settled .vs-electric{width:155%;height:160%}
.vs-settled .vs-electric path{stroke-width:1}
.vs-conduit{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;opacity:0;transition:opacity .6s;filter:drop-shadow(0 0 3px var(--left-color))}
.vs-conduit path{fill:none;stroke:url(#conduit-colors);stroke-width:1.4;vector-effect:non-scaling-stroke;stroke-linejoin:bevel}
.conduit-portrait,.conduit-landscape{display:none}
.vs-screen.vs-settled:not(.art-only) .vs-conduit{opacity:.65}
.vs-screen.vs-settled:not(.art-only) .vs-conduit path{animation:electric-breathe 5.2s .5s ease-in-out infinite}
.vs-screen:not([open]) .vs-electric *,.vs-screen:not([open]) .vs-conduit *{animation:none}
.vs-screen.art-only .vs-conduit{display:none}
.vs-screen.art-only .vs-electric *{animation:none}
.vs-screen .vs-quote{display:block;font-size:clamp(14px,1.35vw,20px);font-weight:600;line-height:1.65;color:#fff;letter-spacing:.035em;margin-top:10px;padding-top:9px;border-top:1px solid rgba(var(--fighter-rgb),.5);text-shadow:0 2px 5px #000}
.vs-screen .vs-style{display:block;color:#d8e5f1;font-size:9px;letter-spacing:1.5px;margin-top:6px}
.vs-screen.vs-settled .vs-nameplate{max-width:360px}
@keyframes electric-breathe{0%,52%,100%{opacity:.4}70%{opacity:1}85%{opacity:.6}}

/* Phone pick screen: artwork first, a legible line, then a compact four-stat readout. */
@media(max-width:760px),(max-height:520px) and (pointer:coarse){
  .shell{height:100dvh;min-height:750px;padding-top:calc(64px + env(safe-area-inset-top,0px));padding-bottom:calc(66px + env(safe-area-inset-bottom,0px))}
  .shell:not(.art-only) .main{grid-template-rows:minmax(335px,1fr) auto;min-height:0}
  .shell .topbar{top:calc(7px + env(safe-area-inset-top,0px));left:4%;right:4%;grid-template-rows:48px;grid-template-columns:24px minmax(0,1fr) auto;gap:8px}
  .shell .brand{grid-column:1;grid-row:1;font-size:9px;letter-spacing:1.8px}.shell .brand-mark{font-size:25px}.shell .brand>span:not(.brand-mark){display:none}
  .shell .header-actions{grid-column:3;grid-row:1;gap:3px}.shell .sound{position:relative;min-width:44px;min-height:44px;justify-content:center;font-size:9px;letter-spacing:1px}.shell #sound-text{display:none}.shell .sound:after{content:"SE";position:absolute;bottom:3px;font-size:7px;letter-spacing:1px}.shell .sound-bars{transform:translateY(-4px)}.shell .fullscreen{width:44px;min-height:44px;padding:0;font-size:23px}
  .shell .mode-switch{grid-column:2;grid-row:1;border-color:#a8c9f036;padding:1px;clip-path:polygon(2% 0,100% 0,98% 100%,0 100%)}
  .shell .mode-switch button{min-height:44px;min-width:0;padding:7px 5px;font-size:10px;letter-spacing:1px}
  .shell .mode-switch button[aria-pressed=true]{background:linear-gradient(110deg,rgba(var(--rgb),.24),rgba(var(--rgb),.05));box-shadow:inset 0 -2px var(--accent)}
  .shell .stage{min-height:0;overflow:hidden}
  .shell:not(.art-only) .art-region{inset:0 -2% 0 0;mask-image:none;clip-path:polygon(3% 0,100% 0,100% 100%,0 100%,0 9%)}
  .shell .art-region:before{background:linear-gradient(0deg,#03081180,transparent 25%)}
  .shell .stage-top{top:10px;right:5%}.shell .stage-top>span:last-child{padding:4px 7px;color:#deedff;background:#06101eb8;border-right:2px solid var(--accent);font-size:8px}
  .shell .character-hud{inset:auto 4% 10px;padding:10px 12px 11px;gap:5px;border-left:2px solid var(--accent);border-bottom:1px solid rgba(var(--rgb),.6);background:linear-gradient(110deg,#030a14e8,#051020d9 70%,#051020bd);box-shadow:0 6px 24px #0003;backdrop-filter:blur(5px);filter:none}
  .shell .character-info{padding:0;background:none}
  .shell .character-type{display:flex;margin:0 0 3px;gap:8px;letter-spacing:1.7px;font-size:8px;line-height:1.1}.shell .character-type>span:last-child{font-size:7px}
  .shell .type-line{width:24px}
  .shell h1{font-size:clamp(32px,9.5vw,45px);line-height:1.05;letter-spacing:0;filter:drop-shadow(0 1px 1px #000) drop-shadow(0 0 6px rgba(var(--rgb),.3));gap:.18em}
  .shell .name-jp{margin:4px 0 0;gap:9px;flex-wrap:wrap;line-height:1.3}
  .shell .name-jp>span:first-child{font-size:17px;letter-spacing:2px}.shell .name-jp>span:last-child{font-size:10px;letter-spacing:.2px}.shell .jp-divider{width:16px}
  .shell .attributes{display:flex;flex-direction:column;gap:7px;padding:0;margin:0;border:0;border-radius:0;background:none;box-shadow:none;backdrop-filter:none;clip-path:none}
  .shell .attributes-body{display:contents}
  .shell .quote-block{display:block;order:0;border:0;padding:0;margin:0;min-height:0}
  .shell .quote{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:clamp(15px,4.25vw,18px);font-weight:600;font-style:normal;line-height:1.5;letter-spacing:.035em;color:#f5f9ff;text-shadow:0 1px 7px #000;overflow-wrap:anywhere}
  .shell .quote-mark,.shell .quote-caption{display:none}
  .shell .style-heading,.shell.confirmed .style-heading{display:block;order:1;margin:0;padding:0;border:0}
  .shell .style-label{display:flex;align-items:baseline;gap:7px;line-height:1.2}.shell .style-label>span{font-size:7px;letter-spacing:1.5px;color:var(--accent)}
  .shell .style-label strong,.shell.confirmed .style-label strong{font-size:11px;letter-spacing:1.4px;color:#cbddeb}
  .shell .profile{display:none}.shell.confirmed .profile{display:block;font-size:11px;line-height:1.65;margin:6px 0 2px;color:#bfcede;padding:0;border:0}
  .shell .stats{display:grid;order:2;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;padding-top:6px;border-top:1px solid #9db8d323}
  .shell .stat{grid-template-columns:minmax(0,1fr) 17px;grid-template-rows:auto 4px;gap:4px 2px}
  .shell .stat-label{font-size:8px;letter-spacing:.1px;color:#a6bdce}.shell .stat-value{font-size:10px;color:#e8f6ff}
  .shell .stat-track{height:4px;background:#52718a45}.shell .stat-fill{box-shadow:0 0 6px rgba(var(--rgb),.4)}
  .shell .selector{padding:8px 4% 2px;background:linear-gradient(180deg,#03081399,#030813)}
  .shell .selector-heading{margin:0 5px 8px;display:flex}.shell .selector h2{font-size:16px;letter-spacing:2.5px;line-height:1.2}
  .shell .roster{gap:7px 9px;padding:0 5px;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
  .shell .character-card{height:clamp(54px,7.4dvh,68px);min-height:50px;border-color:#a6c4e25c;transform:skewX(-4deg)}
  .shell .character-card.active{transform:skewX(-4deg) scale(1.025);border-color:#d7f3ff;box-shadow:0 0 0 1px var(--accent),0 0 15px rgba(var(--rgb),.6)}
  .shell .card-details{left:7px;bottom:6px}.shell .card-details strong{font-size:12px;letter-spacing:.4px}.shell .card-marker{font-size:12px;top:3px;left:4px}
  .shell .roster-pager{margin:6px 5px 0;grid-template-columns:44px 1fr 44px;gap:6px}
  .shell .roster-pager>button,.shell .roster-pager span button{min-height:44px;background:#07111a;border-color:#6685a54d}.shell .roster-pager span button[aria-pressed=true]{background:rgba(var(--rgb),.16);border-color:var(--accent)}
  .shell .roster-caption{display:none}
  .shell .versus-picks{margin:0 5px 8px}.shell .player-slot{padding:5px 8px;border-color:#6e8aa74f;min-height:44px;background:#06111dd9}.shell .player-slot.is-active{border-color:var(--accent)}
  .shell .footer{height:calc(60px + env(safe-area-inset-bottom,0px));padding:7px 4% calc(7px + env(safe-area-inset-bottom,0px));background:#030912ed;border-top-color:#819fbd40;box-shadow:0 -5px 22px #0004}
  .shell .footer .back{min-width:108px;padding:7px 10px;height:44px}.shell .mobile-help{font-size:10px;color:#b5cada}
  .shell.confirmed .mobile-help{display:none}.shell.confirmed .selected-seal{display:none}
  .shell.confirmed:not(.art-only){min-height:100dvh}.shell.confirmed .character-hud{bottom:18px}.shell.confirmed:not(.art-only) .main{grid-template-rows:minmax(0,1fr)}
  .shell #mobile-prev,.shell #mobile-next{top:25%;width:44px;height:44px;border-color:#b0d1ed40;background:#05101aa8;font-size:27px}
  .shell #mobile-prev{left:8px}.shell #mobile-next{right:8px}
  .shell.art-only .stage-top{visibility:hidden}

  /* Keep both lines readable in the confrontation, including after the logo docks. */
  .vs-screen .vs-nameplate,.vs-screen.vs-settled .vs-nameplate{padding:8px 11px;max-width:none;border-width:1px;background:linear-gradient(100deg,#030913eb,#030913b8 82%,#03091333);box-shadow:0 5px 20px #0002}
  .vs-screen .vs-fighter-right .vs-nameplate{background:linear-gradient(-100deg,#030913eb,#030913b8 82%,#03091333)}
  .vs-screen .vs-player{margin:0 0 5px;padding:0;font-size:7px;letter-spacing:1.7px;line-height:1.2;background:none;border:0;box-shadow:none}
  .vs-screen .vs-given,.vs-screen.vs-settled .vs-given{font-size:clamp(27px,7.7vw,38px);line-height:1.02;filter:drop-shadow(0 0 6px rgba(var(--fighter-rgb),.25))}
  .vs-screen .vs-japanese,.vs-screen.vs-settled .vs-japanese{font-size:11px;line-height:1.4;letter-spacing:1px;margin-top:3px}
  .vs-screen .vs-style,.vs-screen.vs-settled .vs-style{display:block;font-size:8px;line-height:1.4;letter-spacing:1px;color:#c3dbea;margin-top:4px}
  .vs-screen .vs-quote,.vs-screen.vs-settled .vs-quote{display:block;font-size:clamp(13px,3.7vw,16px);font-weight:600;line-height:1.6;letter-spacing:.02em;margin-top:6px;padding-top:6px;overflow-wrap:anywhere}
  .vs-screen .vs-controls{padding:6px;border-color:#839cb557;background:#040b15df;box-shadow:0 4px 25px #0006;gap:4px;grid-template-columns:1fr 1fr 1fr 70px}
  .vs-screen .vs-controls button{font-size:11px;min-height:48px;background:#081320}.vs-screen .vs-controls #vs-replay{background:linear-gradient(115deg,#173b57,#0d2135);border-color:#8cd5ff75}
  .vs-screen .vs-controls .gallery-toggle{font-size:10px}
  .conduit-desktop{display:none}.conduit-landscape{display:block}
}
@media(max-width:760px) and (orientation:portrait){
  .conduit-landscape{display:none}.conduit-portrait{display:block}
  .vs-screen .vs-fighter-left .vs-nameplate,.vs-screen.vs-settled .vs-fighter-left .vs-nameplate{left:max(94px,calc(env(safe-area-inset-left,0px) + 94px));right:4%;bottom:20%;max-width:calc(100% - 110px)}
  .vs-screen .vs-fighter-right .vs-nameplate,.vs-screen.vs-settled .vs-fighter-right .vs-nameplate{left:10%;right:4%;bottom:calc(var(--vs-dock) + env(safe-area-inset-bottom,0px) + 12px);max-width:none}
}
@media(max-width:760px) and (max-height:680px) and (orientation:portrait){
  .shell{min-height:690px;padding-top:calc(64px + env(safe-area-inset-top,0px))}
  .shell:not(.art-only) .main{grid-template-rows:minmax(310px,1fr) auto}
  .shell .character-hud{padding:8px 10px;gap:4px;bottom:8px}.shell h1{font-size:30px}.shell .name-jp>span:first-child{font-size:15px}
  .shell .attributes{gap:5px}.shell .quote{font-size:15px}.shell .character-card{height:50px;min-height:48px}.shell .selector-heading{margin-bottom:6px}
  .vs-screen .vs-nameplate,.vs-screen.vs-settled .vs-nameplate{padding:6px 8px}.vs-screen .vs-given,.vs-screen.vs-settled .vs-given{font-size:25px}
  .vs-screen .vs-quote,.vs-screen.vs-settled .vs-quote{font-size:13px;line-height:1.5}
}
@media(orientation:landscape) and (max-height:520px) and (pointer:coarse){
  .shell{min-height:410px;height:100dvh;padding-top:calc(58px + env(safe-area-inset-top,0px));padding-bottom:calc(58px + env(safe-area-inset-bottom,0px))}
  .shell .topbar{grid-template-rows:40px;grid-template-columns:1fr 1.3fr 1fr;height:40px;gap:7px;top:8px}.shell .mode-switch button{font-size:9px;letter-spacing:1px}
  .shell:not(.art-only) .main{grid-template-columns:50% 50%;grid-template-rows:minmax(290px,1fr)}
  .shell .character-hud{padding:8px 10px;gap:4px;bottom:8px}.shell h1{font-size:29px}.shell .name-jp>span:first-child{font-size:15px}.shell .quote{font-size:15px}.shell .attributes{gap:5px}
  .shell .selector{padding:4px 5% 0}.shell .character-card{height:50px;min-height:48px}
  .shell.confirmed:not(.art-only) .main{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr)}
  .shell.confirmed .character-hud{left:49%;right:4%;bottom:10px}.shell.confirmed:not(.art-only) .art-region{inset:0 46% 0 0}
  .vs-screen .vs-nameplate{bottom:calc(var(--vs-dock) + 12px);left:5%;right:38%}.vs-screen .vs-fighter-right .vs-nameplate{left:38%;right:5%}
  .vs-screen .vs-given,.vs-screen.vs-settled .vs-given{font-size:28px}.vs-screen .vs-quote,.vs-screen.vs-settled .vs-quote{font-size:13px;line-height:1.5}
  .vs-screen .vs-style,.vs-screen.vs-settled .vs-style{font-size:8px}
}
@media(prefers-reduced-motion:reduce){.vs-electric *,.vs-conduit *{animation:none!important}.vs-conduit{transition:none}.electric-left,.electric-right{opacity:.7}}