/* Printed comic page: warm stock, ink frames, flat spot colors. */
.screen-wrap.choosing::after{display:none!important}
#startScreen{background:#cbb183}
#startScreen::before{
  opacity:.28;
  filter:grayscale(1) contrast(1.7);
  background:
    url('assets/991f699c99aa230a6381.webp') left bottom/34% 100% no-repeat,
    url('assets/2444f41882f2ee79c317.webp') center bottom/34% 100% no-repeat,
    url('assets/2823ce195477e22c0e32.webp') right bottom/34% 100% no-repeat;
  mix-blend-mode:multiply;
}
#startScreen::after{
  opacity:.65;
  background:
    radial-gradient(ellipse at center,transparent 35%,#67482766),
    radial-gradient(circle,#38251b55 .7px,transparent 1px) 0 0/5px 5px,
    repeating-linear-gradient(3deg,transparent 0 8px,#fff3cf18 9px,transparent 10px 17px);
}
#startScreen .select-panel{
  width:calc(100% - 26px);height:calc(100% - 24px);
  padding-top:24px;padding-bottom:20px;
  border:4px solid #28221b;outline:2px solid #e9d6ad;
  clip-path:none;
  background:linear-gradient(175deg,#f5dfae66,#cc9f6555 52%,#67482b22);
  box-shadow:inset 0 0 0 5px #e7cca0,inset 0 0 0 7px #33271c,5px 6px 0 #30261c;
}
#startScreen .select-panel::before{
  inset:11px;border:1px solid #493721;clip-path:none;box-shadow:none;
}
#startScreen .select-panel::after{
  inset:18px;opacity:.1;
  background:repeating-conic-gradient(from 5deg at 50% 46%,#58341e 0 5deg,transparent 5deg 19deg);
}
#startScreen .select-panel h2{
  justify-self:center;padding:12px 30px 15px;
  color:#2c261f;background:#edd09a;
  border:3px solid #2c261f;
  font-family:Impact,'Arial Narrow',sans-serif!important;
  font-size:clamp(26px,3.2vw,43px)!important;
  line-height:1!important;letter-spacing:.035em;
  transform:rotate(-1deg);-webkit-text-stroke:0;
  text-shadow:1px 1px 0 #fff1ce;box-shadow:4px 4px 0 #33271c;
}
#startScreen .select-panel h2 span{color:#86402d;font:inherit!important}
#startScreen .fighter-card{
  --accent:#5aaf78;--accent-hot:#c1daa0;--deep:#285c48;
  border-color:#f3e1b9;outline-color:#25211c;
  background:
    radial-gradient(circle,#17251b66 .8px,transparent 1.2px) 0 0/5px 5px,
    linear-gradient(145deg,var(--accent-hot),var(--accent) 55%,var(--deep));
  box-shadow:inset 0 0 0 2px #2a291e,5px 6px 0 #28221c;
}
#startScreen .fighter-card[data-hero="rista"]{--accent:#5197b5;--accent-hot:#bfd8d5;--deep:#315775}
#startScreen .fighter-card[data-hero="heroine"]{--accent:#c26250;--accent-hot:#e5b48e;--deep:#733b36}
#startScreen .fighter-card::before{filter:none}
#startScreen .fighter-card.selected{
  filter:saturate(.95) brightness(1.04);border-color:#fff0c9;
  box-shadow:inset 0 0 0 2px #28221c,0 0 0 4px #27221b,8px 9px 0 #33271c;
}
#startScreen .fighter-art{filter:drop-shadow(4px 5px 0 #211b1c99)}
#startScreen .fighter-card strong,#startScreen .fighter-card[data-hero="heroine"] strong{
  text-shadow:3px 3px 0 var(--accent),5px 5px 0 #211c19;
}
#startScreen .fighter-stats{
  border-color:#dfc99e!important;outline-color:#28221c;clip-path:none;
  background:linear-gradient(105deg,#262923,color-mix(in srgb,var(--deep) 72%,#24231e));
  box-shadow:inset 0 0 0 2px #3d382b,5px 6px 0 #28221c;
}
#startScreen .fighter-stats::before,#startScreen .fighter-stats::after{display:none}
#startScreen .stars b{text-shadow:1px 1px 0 #7e320d}
#startScreen .fighter-bio{
  --bio-accent:#427d52;
  filter:grayscale(1) brightness(.9);transition:filter .14s ease;
  color:#30271d;border:3px solid #30271d;border-left:7px solid var(--bio-accent);
  background:#e9d6ac;clip-path:none;
  box-shadow:4px 4px 0 #33271c;
}
#startScreen .fighter-bio[data-bio="rista"]{--bio-accent:#356f88;border-color:#30271d;border-left-color:var(--bio-accent);background:#e9d6ac;box-shadow:4px 4px 0 #33271c}
#startScreen .fighter-bio[data-bio="heroine"]{--bio-accent:#a44733;border-color:#30271d;border-left-color:var(--bio-accent);background:#e9d6ac;box-shadow:4px 4px 0 #33271c}
#startScreen .fighter-bio strong,#startScreen .fighter-bio[data-bio] strong{color:var(--bio-accent);text-shadow:none}
#startScreen .fighter-bio p{text-shadow:none}
#startScreen .select-panel:has(.fighter-card[data-hero="boki"].selected) [data-bio="boki"],
#startScreen .select-panel:has(.fighter-card[data-hero="rista"].selected) [data-bio="rista"],
#startScreen .select-panel:has(.fighter-card[data-hero="heroine"].selected) [data-bio="heroine"]{filter:none;background:#f5e1ad}
@media(max-width:900px),(max-height:570px){
  #startScreen .select-panel{padding-top:12px;padding-bottom:12px}
  #startScreen .select-panel h2{font-size:clamp(21px,3vw,30px)!important;padding:6px 20px 8px;border-width:2px}
}
@media(max-width:720px),(max-height:430px){
  #startScreen .select-panel{width:calc(100% - 12px);height:calc(100% - 10px);padding:9px 11px;border-width:2px}
  #startScreen .select-panel::before{inset:5px}
  #startScreen .select-panel h2{font-size:clamp(17px,3vw,24px)!important;padding:4px 15px 5px;box-shadow:2px 2px 0 #33271c}
  #startScreen .fighter-bio{border-width:2px;border-left-width:4px}
}

/* V2: whole-body portraits, expanded dossiers and the Braven street backdrop. */
#startScreen .select-panel #fighterDescription{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;margin:-1px!important;overflow:hidden;clip-path:inset(50%)}
body:has(.screen-wrap.choosing) .mobile-controls{display:none!important}
#startScreen{background:#1d1922}
#startScreen::before{
  opacity:.72;filter:saturate(.8) contrast(1.05) brightness(.7);
  background:url('assets/770ccde48ce1ff5f875e.webp') 35.5% center/auto 100% no-repeat;
  mix-blend-mode:normal;
}

/* A hovered, unselected card must keep the same resting size as keyboard/touch. */
#startScreen .fighter-card:not(.selected):hover{
  transform:scale(.975) rotate(0)!important;
}
#startScreen .fighter-card.selected,
#startScreen .fighter-card.selected:hover{
  transform:scale(1.025) translateY(-7px) rotate(0)!important;
  box-shadow:inset 0 0 0 2px #28221c,0 0 0 4px #27221b,9px 12px 0 #211b1c;
}
@media(max-width:760px),(max-height:570px){
  #startScreen .fighter-card.selected,
  #startScreen .fighter-card.selected:hover{
    transform:scale(1.01) translateY(-4px) rotate(0)!important;
    box-shadow:inset 0 0 0 2px #28221c,0 0 0 3px #27221b,5px 7px 0 #211b1c;
  }
}
#startScreen::after{
  opacity:.3;
  background:radial-gradient(circle,#201b2555 .65px,transparent 1px) 0 0/5px 5px,linear-gradient(180deg,#12101b33,transparent 45%,#12101b66);
}
#startScreen .select-panel{
  grid-template-rows:minmax(100px,18%) minmax(0,1fr) auto;
  gap:14px;padding:20px 24px 26px;
  background:transparent;
}
#startScreen .select-panel::after{display:none}
#startScreen .select-panel h2{
  align-self:center;margin-top:18px;
  font-size:clamp(35px,4vw,62px)!important;
  padding:10px 30px 12px;
}
#startScreen .fighter-grid{
  height:100%;max-height:590px;min-height:0;
  padding:6px 0 14px;
}
#startScreen .fighter-art,
#startScreen .fighter-card[data-hero="rista"] .fighter-art,
#startScreen .fighter-card[data-hero="heroine"] .fighter-art{
  inset:52px 5px 131px!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{
  width:100%;height:100%;object-fit:contain;object-position:center bottom;
  transform:none!important;
}
#startScreen .fighter-card strong,
#startScreen .fighter-card[data-hero="heroine"] strong{
  top:12px!important;left:0!important;right:0!important;
  font-size:clamp(32px,3.2vw,48px)!important;
  line-height:1!important;-webkit-text-stroke-width:2px;
}
#startScreen .fighter-bios{margin:0 auto;align-self:end}
#startScreen .fighter-bio,
#startScreen .fighter-bio[data-bio]{
  min-height:162px;padding:16px 18px;
  --bio-accent:#5aaf78;--bio-paper:#b9d5aa;
  border:3px solid #30271d;border-left:8px solid var(--bio-accent);
  background:var(--bio-paper);color:#1d251e;
  display:flex;flex-direction:column;justify-content:center;
}
#startScreen .fighter-bio[data-bio="rista"]{--bio-accent:#5197b5;--bio-paper:#b1cfda}
#startScreen .fighter-bio[data-bio="heroine"]{--bio-accent:#c26250;--bio-paper:#e0b29f}
#startScreen .select-panel:has(.fighter-card[data-hero="boki"].selected) [data-bio="boki"],
#startScreen .select-panel:has(.fighter-card[data-hero="rista"].selected) [data-bio="rista"],
#startScreen .select-panel:has(.fighter-card[data-hero="heroine"].selected) [data-bio="heroine"]{
  background:var(--bio-paper);border-color:var(--bio-accent);
}
#startScreen .fighter-bio strong,#startScreen .fighter-bio[data-bio] strong{
  font-family:Impact,'Arial Narrow',sans-serif;font-size:22px;letter-spacing:.05em;
  color:#26392c;border-bottom:2px solid var(--bio-accent);padding-bottom:8px;
}
#startScreen .fighter-bio p{
  font-family:Arial,sans-serif!important;font-size:17px;line-height:1.3;
  margin-top:10px;letter-spacing:0;font-weight:700;
}
#startScreen .fighter-stats{height:118px;min-height:0;padding:9px 12px!important;border-width:4px!important;gap:2px;bottom:-6px!important}
#startScreen .fighter-card .fighter-stats .stat-row{min-height:15px;font-size:15px!important}
@media(max-height:800px){
  #startScreen .select-panel{grid-template-rows:minmax(70px,17%) minmax(0,1fr) auto;gap:10px;padding:12px 20px 18px}
  #startScreen .select-panel h2{margin-top:10px;font-size:clamp(29px,3.7vw,48px)!important;padding:7px 24px 9px}
  #startScreen .fighter-bio,#startScreen .fighter-bio[data-bio]{min-height:135px;padding:12px}
  #startScreen .fighter-bio strong,#startScreen .fighter-bio[data-bio] strong{font-size:18px;padding-bottom:6px}
  #startScreen .fighter-bio p{font-size:14px;line-height:1.25;margin-top:7px}
  #startScreen .fighter-art,#startScreen .fighter-card[data-hero="rista"] .fighter-art,#startScreen .fighter-card[data-hero="heroine"] .fighter-art{inset:39px 3px 105px!important}
  #startScreen .fighter-stats{height:102px;padding:7px 10px!important}
  #startScreen .fighter-card .fighter-stats .stat-row{min-height:13px;font-size:13px!important}
  #startScreen .fighter-card strong,#startScreen .fighter-card[data-hero="heroine"] strong{font-size:32px!important;top:5px!important}
}
@media(max-height:570px){
  #startScreen .select-panel{grid-template-rows:52px minmax(0,1fr) auto;gap:6px;padding:8px 13px 11px}
  #startScreen .select-panel h2{margin-top:7px;font-size:clamp(24px,4.8vh,32px)!important;padding:4px 20px 6px}
  #startScreen .fighter-grid{width:calc(100% - 16px);gap:10px;padding:3px 0 7px}
  #startScreen .fighter-bios{width:calc(100% - 16px);gap:10px}
  #startScreen .fighter-bio,#startScreen .fighter-bio[data-bio]{min-height:88px;padding:6px 8px;border-width:2px;border-left-width:5px}
  #startScreen .fighter-bio strong,#startScreen .fighter-bio[data-bio] strong{font-size:13px;padding-bottom:4px}
  #startScreen .fighter-bio p{font-size:10px;line-height:1.2;margin-top:4px}
  #startScreen .fighter-card strong,#startScreen .fighter-card[data-hero="heroine"] strong{font-size:23px!important;top:3px!important;-webkit-text-stroke-width:1px}
  #startScreen .fighter-art,#startScreen .fighter-card[data-hero="rista"] .fighter-art,#startScreen .fighter-card[data-hero="heroine"] .fighter-art{inset:27px 2px 65px!important}
  #startScreen .fighter-stats{height:62px;min-height:0;padding:5px 7px!important;border-width:3px!important}
  #startScreen .fighter-card .fighter-stats .stat-row{font-size:8px!important;min-height:8px}
}
@media(max-width:760px) and (orientation:portrait){
  body:has(.screen-wrap.choosing) .game-header,body:has(.screen-wrap.choosing) footer{display:none!important}
  body:has(.screen-wrap.choosing) .game-shell{position:fixed;inset:0;margin:0;padding:0;width:100%;height:100dvh;visibility:visible;pointer-events:auto}
  body:has(.screen-wrap.choosing) .rotate-device{display:none!important}
  body:has(.screen-wrap.choosing) .game-frame{padding:0;border:0;height:100dvh}
  .screen-wrap.choosing{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;min-height:0!important;aspect-ratio:auto!important;transform:none!important;border:0!important}
  #startScreen .select-panel{grid-template-rows:90px minmax(230px,1fr) auto;padding:12px;gap:12px}
  #startScreen .select-panel h2{font-size:26px!important;padding:8px 12px;margin-top:12px}
  #startScreen .fighter-grid{gap:7px;width:calc(100% - 8px);padding:3px 0 8px;height:min(100%,280px)}
  #startScreen .fighter-card{border-width:3px;outline-width:2px}
  #startScreen .fighter-card strong,#startScreen .fighter-card[data-hero="heroine"] strong{font-size:21px!important;top:6px!important;-webkit-text-stroke-width:1px}
  #startScreen .fighter-art,#startScreen .fighter-card[data-hero="rista"] .fighter-art,#startScreen .fighter-card[data-hero="heroine"] .fighter-art{inset:35px 0 77px!important}
  #startScreen .fighter-stats{height:72px;min-height:0;padding:6px 4px!important;border-width:3px!important;left:-4px!important;right:-4px!important}
  #startScreen .fighter-card .fighter-stats .stat-row{font-size:6px!important;gap:1px;min-height:9px}
  #startScreen .fighter-bios{grid-template-columns:1fr;gap:6px;width:calc(100% - 8px)}
  #startScreen .fighter-bio,#startScreen .fighter-bio[data-bio]{min-height:77px;padding:7px 10px}
  #startScreen .fighter-bio strong,#startScreen .fighter-bio[data-bio] strong{font-size:15px;padding-bottom:3px}
  #startScreen .fighter-bio p{font-size:11px;line-height:1.2;margin-top:4px}
}