/* V48 — character select rebuilt against the supplied comic layout reference. */
body:has(.screen-wrap.choosing) .game-frame .hud{display:none!important}

#startScreen{
  padding:0;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(8,7,13,.16),rgba(8,7,13,.02) 50%,rgba(8,7,13,.16)),
    #0b0810;
}

#startScreen::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.5;
  filter:saturate(.58) contrast(1.12) brightness(.7);
  background:
    linear-gradient(90deg,transparent 31%,#09070d 31.4% 32.1%,transparent 32.5% 66.5%,#09070d 66.9% 67.6%,transparent 68%),
    url('../assets/991f699c99aa230a6381.webp') left center/38% 100% no-repeat,
    url('../assets/2444f41882f2ee79c317.webp') center/38% 100% no-repeat,
    url('../assets/2823ce195477e22c0e32.webp') right center/38% 100% no-repeat;
}

#startScreen::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.42;
  background:
    radial-gradient(circle,rgba(255,241,196,.17) 0 1px,transparent 1.5px) 0 0/6px 6px,
    linear-gradient(180deg,#09070d3a,#09070d00 35%,#09070d65);
}

#startScreen .select-panel{
  position:relative;
  box-sizing:border-box;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto auto;
  gap:4px;
  width:calc(100% - 14px);
  height:calc(100% - 12px);
  max-width:none;
  padding:10px 24px 7px;
  overflow:hidden;
  color:#fff1c5;
  border:7px solid #a8b4b6;
  outline:4px solid #111018;
  background:linear-gradient(180deg,rgba(25,17,31,.68),rgba(8,7,12,.3) 22%,rgba(11,8,15,.82));
  clip-path:polygon(28px 0,calc(100% - 28px) 0,100% 28px,100% calc(100% - 28px),calc(100% - 28px) 100%,28px 100%,0 calc(100% - 28px),0 28px);
  box-shadow:
    inset 0 0 0 3px #39454b,
    inset 0 0 0 7px #08080c,
    inset 0 0 0 9px #d2bb7a,
    inset 0 0 55px #000,
    0 0 28px #000;
}

#startScreen .select-panel::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:10px;
  pointer-events:none;
  border:2px solid #e8cc84;
  clip-path:polygon(18px 0,calc(100% - 18px) 0,100% 18px,100% calc(100% - 18px),calc(100% - 18px) 100%,18px 100%,0 calc(100% - 18px),0 18px);
  box-shadow:inset 0 0 0 2px #15111a;
}

#startScreen .select-panel::after{
  content:"";
  position:absolute;
  z-index:0;
  left:11px;
  right:11px;
  top:64px;
  bottom:45px;
  pointer-events:none;
  opacity:.3;
  background:
    linear-gradient(112deg,transparent 0 8%,#d6b96d33 8.3% 8.7%,transparent 9% 91%,#d6b96d33 91.3% 91.7%,transparent 92%),
    repeating-linear-gradient(19deg,transparent 0 28px,#fff1cf12 29px 31px,transparent 32px 58px);
}

#startScreen .select-panel>*{position:relative;z-index:2}

#startScreen .select-panel h2{
  align-self:center;
  margin:0;
  padding:2px 0 1px;
  color:#ffc83e;
  font-family:'Barlow Condensed',sans-serif!important;
  font-size:clamp(38px,5vw,62px)!important;
  font-style:italic!important;
  font-weight:900!important;
  line-height:.82!important;
  letter-spacing:.025em;
  text-align:center;
  text-transform:uppercase;
  transform:skew(-4deg);
  -webkit-text-stroke:1px #21100d;
  text-shadow:2px 2px 0 #fff0a7,5px 5px 0 #6b2c18,8px 8px 0 #050308;
}

#startScreen .select-panel h2 span{color:#fff0b5}

#startScreen .fighter-grid{
  align-self:center;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  width:calc(100% - 46px);
  height:min(100%,580px);
  min-height:300px;
  margin:0 auto;
  padding:9px 0 15px;
}

#startScreen .fighter-card{
  --accent:#28f0ae;
  --accent-hot:#9dffcf;
  --deep:#004f45;
  position:relative;
  box-sizing:border-box;
  height:auto!important;
  min-height:0;
  overflow:visible;
  cursor:pointer;
  color:#fff;
  border:7px solid #f1ddaa;
  outline:4px solid #130f17;
  background:
    radial-gradient(circle,rgba(255,255,255,.22) 0 1px,transparent 1.6px) 0 0/7px 7px,
    repeating-conic-gradient(from 2deg at 50% 42%,rgba(255,255,255,.13) 0 4deg,transparent 4deg 13deg),
    radial-gradient(circle at 50% 42%,var(--accent) 0,var(--deep) 58%,#071013 100%);
  clip-path:none;
  box-shadow:inset 0 0 38px #000a,6px 7px 0 #06050a;
  filter:grayscale(1) brightness(.93);
  transform:scale(.975) rotate(0)!important;
  transition:filter .14s ease,transform .14s ease,box-shadow .14s ease;
}

#startScreen .fighter-card[data-hero="rista"]{--accent:#21cfff;--accent-hot:#a6efff;--deep:#07396e}
#startScreen .fighter-card[data-hero="heroine"]{--accent:#ff4a36;--accent-hot:#ffb04b;--deep:#791522}

#startScreen .fighter-card::before{
  content:"";
  position:absolute;
  z-index:1;
  left:7%;
  right:7%;
  top:3%;
  bottom:22%;
  pointer-events:none;
  opacity:1;
  background:radial-gradient(circle at 50% 47%,var(--accent-hot) 0 18%,var(--accent) 43%,transparent 69%);
  clip-path:polygon(49% 0,58% 25%,72% 7%,70% 31%,96% 19%,77% 42%,100% 50%,76% 57%,94% 82%,69% 68%,71% 100%,56% 76%,47% 99%,41% 73%,19% 91%,29% 64%,1% 72%,23% 52%,0 39%,28% 39%,13% 12%,39% 29%);
  filter:drop-shadow(0 0 13px var(--accent));
}

#startScreen .fighter-card::after{
  content:"";
  position:absolute;
  z-index:3;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 20%,transparent 0 36%,rgba(0,0,0,.13) 68%,rgba(0,0,0,.52) 100%),
    linear-gradient(180deg,transparent 51%,rgba(0,0,0,.18) 69%,rgba(0,0,0,.72) 88%);
}

#startScreen .fighter-card.selected{
  z-index:2;
  filter:saturate(1.16) brightness(1.08);
  transform:scale(1) translateY(-2px) rotate(0)!important;
  border-color:#fff3c1;
  box-shadow:
    inset 0 0 34px #0008,
    0 0 0 4px var(--accent),
    0 0 24px var(--accent),
    7px 8px 0 #050408;
}

#startScreen .fighter-card:hover{transform:scale(.995) translateY(-3px) rotate(0)!important}
#startScreen .fighter-card.selected:hover{transform:scale(1) translateY(-3px) rotate(0)!important}

#startScreen .fighter-card.confirm-flash{
  animation:character-confirm-v56 2s ease-in-out both;
}

@keyframes character-confirm-v56{
  0%{filter:saturate(1.16) brightness(1.08);box-shadow:inset 0 0 34px #0008,0 0 0 4px var(--accent),0 0 24px var(--accent),7px 8px 0 #050408}
  17%,50%,83%{filter:saturate(1.4) brightness(1.42);box-shadow:inset 0 0 18px #fff5,0 0 0 7px #fff6cf,0 0 46px var(--accent),7px 8px 0 #050408;transform:scale(1.018) translateY(-4px)!important}
  33%,66%{filter:saturate(1.08) brightness(.96);box-shadow:inset 0 0 38px #0009,0 0 0 4px var(--accent),0 0 18px var(--accent),7px 8px 0 #050408;transform:scale(.996) translateY(-2px)!important}
  100%{filter:saturate(1.16) brightness(1.08);box-shadow:inset 0 0 34px #0008,0 0 0 4px var(--accent),0 0 24px var(--accent),7px 8px 0 #050408}
}

@media(prefers-reduced-motion:reduce){
  #startScreen .fighter-card.confirm-flash{animation:none;filter:saturate(1.35) brightness(1.24)}
}

#startScreen .primary-button[hidden],
#startScreen .controls-copy[hidden]{display:none!important}

#startScreen .fighter-bios{
  align-self:end;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  width:calc(100% - 46px);
  margin:-2px auto 1px;
}

#startScreen .fighter-bio{
  box-sizing:border-box;
  width:100%;
  min-height:54px;
  margin:0;
  padding:7px 11px 7px 14px;
  color:#eafff5;
  border:3px solid #79efc5;
  border-left-width:7px;
  background:linear-gradient(105deg,#10231fe8,#09201de8 66%,#07100fe8);
  box-shadow:inset 0 0 0 2px #172f2b,4px 4px 0 #050408,0 0 16px #28f0ae45;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  font-family:'Barlow Condensed',sans-serif;
  text-align:left;
}

#startScreen .fighter-bio[data-bio="rista"]{border-color:#59ddff;background:linear-gradient(105deg,#0c2331e8,#081a2be8 66%,#070e16e8);box-shadow:inset 0 0 0 2px #15324a,4px 4px 0 #050408,0 0 16px #21cfff45}
#startScreen .fighter-bio[data-bio="rista"] strong{color:#59ddff}
#startScreen .fighter-bio[data-bio="heroine"]{border-color:#ff694b;background:linear-gradient(105deg,#321414e8,#2b1017e8 66%,#16090be8);box-shadow:inset 0 0 0 2px #4a2020,4px 4px 0 #050408,0 0 16px #ff4a3645}
#startScreen .fighter-bio[data-bio="heroine"] strong{color:#ff8a5e}
#startScreen .fighter-bio strong{display:block;color:#67ffc6;font-size:14px;line-height:1;letter-spacing:.08em;text-shadow:1px 1px 0 #000}
#startScreen .fighter-bio p{margin:4px 0 0;font-size:13px;font-weight:700;line-height:1.08;letter-spacing:.01em;text-shadow:1px 1px 0 #000}

#startScreen .fighter-art{
  position:absolute;
  z-index:2;
  inset:-9px -5px 88px!important;
  width:auto!important;
  height:auto!important;
  display:block;
  overflow:hidden;
  pointer-events:none;
  filter:drop-shadow(7px 9px 2px rgba(0,0,0,.88));
}

#startScreen .fighter-art img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center top;
  transform:scale(1.28);
  transform-origin:50% 12%;
  user-select:none;
}

#startScreen .fighter-card[data-hero="boki"] .fighter-art img{transform:scale(.92) translateY(1%)}
#startScreen .fighter-card[data-hero="rista"] .fighter-art{inset:-7px -2px 88px!important}
#startScreen .fighter-card[data-hero="rista"] .fighter-art img{transform:scale(1.34) translateY(1%)}
#startScreen .fighter-card[data-hero="heroine"] .fighter-art{inset:-9px 0 88px!important}
#startScreen .fighter-card[data-hero="heroine"] .fighter-art img{transform:scale(1.31) translateY(1%)}

#startScreen .fighter-card strong,
#startScreen .fighter-card[data-hero="heroine"] strong{
  position:absolute;
  z-index:5;
  left:-7%!important;
  right:-7%!important;
  top:52%!important;
  bottom:auto!important;
  padding:0!important;
  color:#fff1bd!important;
  background:transparent!important;
  border:0!important;
  font-family:'Barlow Condensed',sans-serif!important;
  font-size:clamp(58px,7vw,88px)!important;
  font-style:italic!important;
  font-weight:900!important;
  line-height:.78!important;
  letter-spacing:-.025em!important;
  text-align:center;
  transform:skew(-9deg) rotate(-2deg);
  -webkit-text-stroke:3px #0a080d;
  text-shadow:3px 3px 0 var(--accent),7px 7px 0 #08050b,0 0 11px var(--accent);
}

#startScreen .fighter-card[data-hero="rista"] strong{color:#59ddff!important}
#startScreen .fighter-card[data-hero="heroine"] strong{color:#ff694b!important}

#startScreen .fighter-stats{
  position:absolute;
  z-index:6;
  left:-12px!important;
  right:-12px!important;
  top:auto!important;
  bottom:-10px!important;
  box-sizing:border-box;
  display:grid;
  gap:3px;
  min-height:118px;
  padding:12px 15px 10px 17px!important;
  color:#fff4ce;
  border:7px solid #aeb9bc!important;
  outline:4px solid #100d13;
  background:
    radial-gradient(circle at 50% 52%,color-mix(in srgb,var(--accent) 28%,transparent) 0 8%,transparent 32%),
    linear-gradient(105deg,#15131adf,color-mix(in srgb,var(--deep) 72%,#15131a) 58%,#15131af4);
  box-shadow:
    inset 0 0 0 3px #263238,
    inset 7px 0 0 var(--accent),
    6px 7px 0 #050408;
  clip-path:polygon(13px 0,calc(100% - 13px) 0,100% 13px,100% calc(100% - 13px),calc(100% - 13px) 100%,13px 100%,0 calc(100% - 13px),0 13px);
}

#startScreen .fighter-stats::before,
#startScreen .fighter-stats::after{
  content:"★";
  position:absolute;
  top:50%;
  color:var(--accent);
  font:900 25px/1 sans-serif;
  transform:translateY(-50%);
  -webkit-text-stroke:2px #0b090d;
  text-shadow:0 0 9px var(--accent);
}

#startScreen .fighter-stats::before{left:-22px}
#startScreen .fighter-stats::after{right:-22px}

#startScreen .fighter-card .fighter-stats .stat-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:9px;
  min-height:17px;
  color:#fff1c7;
  font-family:'Barlow Condensed',sans-serif!important;
  font-size:clamp(14px,1.5vw,20px)!important;
  font-style:normal!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:.02em!important;
  text-shadow:2px 2px 0 #08060b;
  white-space:nowrap;
}

#startScreen .stars{
  display:flex;
  flex:none;
  align-items:center;
  font-size:1.45em!important;
  line-height:.7;
  letter-spacing:-.055em!important;
}

#startScreen .stars b{color:#ffd33f;text-shadow:1px 1px 0 #7e320d,0 0 5px #ffad27}
#startScreen .stars i{color:#27232b;font-style:normal;text-shadow:1px 1px 0 #09070b}

#startScreen .primary-button{
  justify-self:center;
  min-width:220px;
  margin:0;
  padding:6px 25px;
  color:#160d13;
  border:3px solid #fff0b0;
  background:linear-gradient(#ffd555,#f19a2c);
  font:900 12px RumaPixel,sans-serif;
  letter-spacing:.04em;
  box-shadow:4px 4px 0 #7f231c,0 0 13px #ffba34aa;
}

#startScreen .controls-copy{
  margin:0;
  color:#d1c3ca;
  font:700 7px RumaPixel,sans-serif;
  letter-spacing:.055em;
  text-align:center;
  text-shadow:1px 1px 0 #000;
}

@media(max-width:900px),(max-height:570px){
  #startScreen .select-panel{padding:7px 18px 5px;border-width:5px}
  #startScreen .select-panel h2{font-size:clamp(25px,5vw,40px)!important}
  #startScreen .fighter-grid{gap:12px;width:calc(100% - 34px);height:min(100%,360px);min-height:245px;padding:5px 0 11px}
  #startScreen .fighter-card{border-width:4px;outline-width:3px}
  #startScreen .fighter-art{inset:-6px -4px 70px!important}
  #startScreen .fighter-card[data-hero="rista"] .fighter-art,
  #startScreen .fighter-card[data-hero="heroine"] .fighter-art{inset:-5px -1px 70px!important}
  #startScreen .fighter-card strong,
  #startScreen .fighter-card[data-hero="heroine"] strong{top:51%!important;font-size:clamp(35px,6.8vw,58px)!important;-webkit-text-stroke-width:2px}
  #startScreen .fighter-stats{left:-7px!important;right:-7px!important;bottom:-7px!important;min-height:91px;padding:8px 10px 7px 12px!important;border-width:5px!important;gap:2px}
  #startScreen .fighter-stats::before,#startScreen .fighter-stats::after{display:none}
  #startScreen .fighter-card .fighter-stats .stat-row{min-height:12px;font-size:clamp(8px,1.3vw,12px)!important}
  #startScreen .stars{font-size:1.25em!important}
  #startScreen .primary-button{min-width:175px;padding:4px 16px;font-size:9px}
  #startScreen .controls-copy{font-size:5px}
  #startScreen .fighter-bios{gap:12px;width:calc(100% - 34px)}
  #startScreen .fighter-bio{min-height:42px;padding:5px 7px 5px 9px;border-width:2px;border-left-width:5px}
  #startScreen .fighter-bio strong{font-size:10px}
  #startScreen .fighter-bio p{margin-top:2px;font-size:9px;line-height:1.04}
}

@media(max-width:720px),(max-height:430px){
  #startScreen .select-panel{width:calc(100% - 8px);height:calc(100% - 6px);padding:4px 11px 3px;gap:2px;border-width:3px}
  #startScreen .select-panel h2{font-size:clamp(20px,4.8vw,29px)!important}
  #startScreen .fighter-grid{gap:8px;width:calc(100% - 20px);height:min(100%,275px);min-height:190px;padding:3px 0 8px}
  #startScreen .fighter-card{border-width:3px;outline-width:2px}
  #startScreen .fighter-art{inset:-4px -3px 54px!important}
  #startScreen .fighter-card[data-hero="rista"] .fighter-art,
  #startScreen .fighter-card[data-hero="heroine"] .fighter-art{inset:-3px 0 54px!important}
  #startScreen .fighter-card strong,
  #startScreen .fighter-card[data-hero="heroine"] strong{top:50%!important;font-size:clamp(27px,6.2vw,41px)!important}
  #startScreen .fighter-stats{left:-5px!important;right:-5px!important;bottom:-5px!important;min-height:69px;padding:6px 7px 5px 9px!important;border-width:3px!important;outline-width:2px;gap:1px}
  #startScreen .fighter-card .fighter-stats .stat-row{min-height:8px;font-size:clamp(6px,1.1vw,8px)!important}
  #startScreen .stars{font-size:1.12em!important}
  #startScreen .primary-button{min-width:145px;padding:3px 12px;font-size:8px}
  #startScreen .controls-copy{display:none}
  #startScreen .fighter-bios{gap:8px;width:calc(100% - 20px)}
  #startScreen .fighter-bio{min-height:32px;padding:3px 5px 3px 7px}
  #startScreen .fighter-bio strong{font-size:8px}
  #startScreen .fighter-bio p{font-size:7px;line-height:1}
}

/* Mobile landscape: keep all three primary cards visible and let the artwork read first. */
@media (pointer:coarse) and (orientation:landscape){
  #startScreen .select-panel{width:calc(100% - 10px);height:calc(100% - 8px);padding:5px 10px 4px;gap:3px}
  #startScreen .select-panel h2{font-size:clamp(22px,5.2dvh,32px)!important}
  #startScreen .fighter-grid{gap:9px;width:calc(100% - 8px);height:min(100%,calc(100dvh - 104px));min-height:0;padding:3px 0 7px}
  #startScreen .fighter-card{border-width:3px;outline-width:2px}
  #startScreen .fighter-art,
  #startScreen .fighter-card[data-hero="rista"] .fighter-art,
  #startScreen .fighter-card[data-hero="heroine"] .fighter-art{inset:-3px -2px 48px!important}
  #startScreen .fighter-art img,
  #startScreen .fighter-card[data-hero="boki"] .fighter-art img,
  #startScreen .fighter-card[data-hero="rista"] .fighter-art img,
  #startScreen .fighter-card[data-hero="heroine"] .fighter-art img{transform:scale(1.1) translateY(1%)!important}
  #startScreen .fighter-card strong,
  #startScreen .fighter-card[data-hero="heroine"] strong{top:50%!important;font-size:clamp(30px,6.2dvh,46px)!important;-webkit-text-stroke:2px #0a080d}
  #startScreen .fighter-stats{left:-5px!important;right:-5px!important;bottom:-5px!important;min-height:56px;padding:5px 7px 4px 8px!important;border-width:3px!important;outline-width:2px;gap:1px}
  #startScreen .fighter-card .fighter-stats .stat-row{min-height:7px;font-size:clamp(6px,1.55dvh,9px)!important}
  #startScreen .stars{font-size:1.05em!important}
  #startScreen .fighter-bios{gap:9px;width:calc(100% - 8px);margin:0 auto}
  #startScreen .fighter-bio{min-height:31px;padding:3px 5px 3px 7px;border-width:2px;border-left-width:4px}
  #startScreen .fighter-bio strong{font-size:clamp(7px,1.7dvh,10px)}
  #startScreen .fighter-bio p{margin-top:2px;font-size:clamp(6px,1.5dvh,8px);line-height:1}
}