/* Comic selection. Geography and responsive labels share one projected map plane. */
.screen[data-screen="select"] {
  --p1:#ff4aab; --p2:#b267ff; --select-paper:#fff1d8; --select-ink:#09080e;
  padding:0; isolation:isolate; overflow:hidden; background:#1b1829;
  background-image:linear-gradient(110deg,#15172be8,#291631df),url(../assets/ui/posterwall.webp); background-size:cover;
}
.screen[data-screen="select"]::before { inset:12px; background:transparent; border:5px solid var(--select-ink); pointer-events:none; z-index:6; }
.screen[data-screen="select"] > .select-map { position:absolute; inset:5% 21% 0; background:linear-gradient(#30303ddb,#252333d9); clip-path:polygon(15% 0,85% 0,100% 100%,0 100%); z-index:0; }
.screen[data-screen="select"] > .map-viewport { position:absolute; top:13%; bottom:36%; left:23%; width:54%; container-type:size; z-index:2; pointer-events:none; }
.map-sheet { position:absolute; left:50%; top:50%; width:min(100cqw,147.929cqh); aspect-ratio:1000 / 676; transform:translate(-50%,-50%); }
.map-sheet > img { width:100%; height:100%; opacity:.85; mask-image:linear-gradient(transparent,#000 8% 88%,transparent); }
.map-marker { position:absolute; width:0; height:0; z-index:2; color:#17121b; }
.map-marker i { position:absolute; width:24px; height:30px; bottom:0; left:0; background:#cbb9ad; border:3px solid #09080e; border-radius:60% 60% 60% 0; transform:rotate(-45deg); transform-origin:0 100%; }
.map-marker i::after { content:''; position:absolute; width:10px; height:10px; background:#fff4e5; border:2px solid #09080e; border-radius:50%; top:4px; left:4px; }
.map-marker b { position:absolute; top:12px; left:0; transform:translateX(-50%) rotate(-1deg); background:#dac8b9; border:3px solid #09080e; box-shadow:3px 4px #09080e; padding:2px 10px 0; font:700 italic clamp(15px,1.65vw,29px)/1.25 'Kalam',cursive; white-space:nowrap; }
.map-marker.cocody b { left:14px; transform:rotate(-1deg); }
.map-marker.plateau b { left:-10px; transform:translateX(-100%) rotate(-1deg); }
.map-marker.treichville b { left:10px; transform:rotate(-1deg); }
.map-north { position:absolute; top:5%; right:13%; color:#cbbbd2; font:700 13px var(--f-text); }
.map-water { position:absolute; left:12%; top:81%; color:#a4c4cd; font:italic clamp(10px,.9vw,16px) var(--f-text); transform:rotate(-12deg); }
.screen[data-screen="select"] > .select-gutters { position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(104deg,transparent 28.2%,#09080e 28.3% 28.7%,transparent 28.8%),linear-gradient(76deg,transparent 70.6%,#09080e 70.7% 71.1%,transparent 71.2%); }
.select-gutters::before,.select-gutters::after { content:''; position:absolute; top:13%; width:34%; height:5px; background:#09080e; transform:rotate(15deg); }
.select-gutters::before { left:-2%; }.select-gutters::after { right:-2%; transform:rotate(-15deg); }
.screen[data-screen="select"] > .fighter-display { --facing:1; position:absolute; top:5%; bottom:9%; width:34%; z-index:2; pointer-events:none; }
.fighter-left { left:-1.5%; }.fighter-right { right:-1.5%; }
.screen[data-screen="select"] > .fighter-right { --facing:-1; }
.screen[data-screen="select"] > .fighter-left[data-id="yoro"] { --facing:-1; }.screen[data-screen="select"] > .fighter-right[data-id="yoro"] { --facing:1; }
.fighter-art { position:absolute; inset:0; transform-origin:50% 75%; }
.fighter-art > img { position:absolute; width:118%; max-width:none; height:118%; top:0; left:-9%; object-fit:contain; object-position:center top; filter:drop-shadow(0 5px 2px #09080e); transform:scaleX(var(--facing)); transform-origin:50% 75%; }
.fighter-display[data-id="chette"] .fighter-art > img,.fighter-display[data-id="tchezare"] .fighter-art > img { width:160%; height:180%; left:-30%; }
.screen.active .fighter-art > img { animation:fighter-breathe 4.4s ease-in-out infinite; }
.fighter-right .fighter-art > img { animation-delay:-1.8s; }
@keyframes fighter-breathe { 0%,100% { transform:scaleX(var(--facing)) translateY(0) scale(1); } 50% { transform:scaleX(var(--facing)) translateY(-3px) scale(1.008); } }
#game[data-select-motion="off"] .fighter-art > img { animation:none; }
.fighter-caption { position:absolute; bottom:0; left:9%; width:82%; background:#fffaf1; color:#100d18; border:4px solid #09080e; box-shadow:-5px 6px 0 #09080e; padding:.4em .3em .3em; text-align:center; }
.fighter-caption strong { display:block; font:700 italic clamp(21px,3vw,55px)/1.12 'Kalam',cursive; white-space:nowrap; }
.fighter-player { position:absolute; top:-1.6em; left:0; background:var(--p1); border:3px solid #09080e; padding:.1em .5em; font:700 italic clamp(13px,1.3vw,22px)/1.2 'Kalam',cursive; }
.fighter-right .fighter-player { left:auto; right:0; background:var(--p2); }
.fighter-state { display:block; font:700 clamp(9px,.75vw,13px)/1.5 var(--f-text); }
.fighter-display.is-locked .fighter-caption { border-color:var(--p1); }.fighter-right.is-locked .fighter-caption { border-color:var(--p2); }
.screen[data-screen="select"] > .select-title { position:absolute; z-index:5; top:1.5%; margin:0; width:auto; max-width:74%; color:#09080e; background:var(--select-paper); border:4px solid #09080e; box-shadow:4px 5px #09080e; padding:.14em .55em .07em; font:700 italic clamp(21px,3.3vw,61px)/1.25 'Kalam',cursive; transform:skewX(-9deg) rotate(-.5deg); filter:none; text-align:center; }
.screen[data-screen="select"] > .select-title-sub { position:absolute; z-index:4; top:12%; margin:0; padding:.25em .7em; background:#15101ee8; color:#f3decc; font:700 clamp(11px,.9vw,15px)/1.3 var(--f-text); }
.screen[data-screen="select"] > .select-roster { position:absolute; z-index:4; bottom:11%; width:35%; max-width:760px; }
.select-roster .pick-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.select-roster .pick-card { width:100%; height:clamp(98px,16vh,200px); border:3px solid #09080e; box-shadow:3px 4px #09080e; transform:none; overflow:visible; background-color:#b16ee0; }
.select-roster .pick-card.orange { background-color:#e29937; }.select-roster .pick-card.green { background-color:#398756; }.select-roster .pick-card.pink { background-color:#e36ba0; }
.pick-portrait { position:absolute; inset:0; overflow:hidden; }
.pick-portrait > img { position:absolute; width:135%; max-width:none; height:auto; top:-6%; left:-17.5%; filter:saturate(.7); transition:filter .18s,translate .18s; }
.pick-card[data-id="eudoxie"] .pick-portrait > img { top:-12%; width:150%; left:-25%; }
.pick-card[data-id="chette"] .pick-portrait > img { width:200%; left:-50%; top:-10%; }
.pick-card[data-id="tchezare"] .pick-portrait > img { width:200%; left:-50%; top:-8%; }
.select-roster .pick-card.p1 { outline:3px solid var(--p1); outline-offset:1px; }
.select-roster .pick-card.p2 { outline:3px solid var(--p2); outline-offset:1px; }
.select-roster .pick-card.p1.p2 { outline-color:var(--p1); box-shadow:6px 6px var(--p2); }
.pick-card.p1 .pick-portrait > img,.pick-card.p2 .pick-portrait > img,.pick-card:hover .pick-portrait > img { filter:none; translate:0 -2px; }
.select-roster .pick-name { z-index:1; width:100%; padding:.22em .06em .12em; font:700 italic clamp(11px,1.25vw,22px)/1.15 'Kalam',cursive; white-space:nowrap; background:#fffaf1; border-top:3px solid #09080e; }
.select-roster .pick-q { display:none; }
.select-roster .pick-card .cursor { z-index:2; top:-13px; width:auto; min-width:29px; padding:.06em .16em; border:2px solid #09080e; background:var(--p1); color:#09080e; font:700 italic clamp(13px,1.5vw,27px)/1.15 'Kalam',cursive; animation:none; }
.select-roster .pick-card .c1 { left:-5px; right:auto; }.select-roster .pick-card .c2 { right:-5px; left:auto; background:var(--p2); }
.select-roster .pick-card.locked1 .c1::after,.select-roster .pick-card.locked2 .c2::after { content:' ✓'; }
.locked-roster { display:flex; justify-content:center; gap:8px; margin-top:10px; }
.locked-fighter { position:relative; width:calc((100% - 24px)/4); height:clamp(56px,10vh,115px); border:3px solid #09080e; background:radial-gradient(#302936 1px,transparent 1.7px) 0 0/5px 5px,#6b626d; color:#17121b; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.locked-fighter::before { content:'?'; position:absolute; font:900 clamp(36px,8vh,90px)/1 var(--f-text); opacity:.6; transform:rotate(-12deg); }
.locked-fighter svg { position:relative; width:33%; height:55%; fill:#8e7e91; filter:drop-shadow(0 0 3px #c6b4ca); }
.locked-fighter b { position:relative; color:#f0e5f2; font:700 clamp(7px,.6vw,10px)/1.3 var(--f-text); }
.select-status { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.screen[data-screen="select"] > .select-footer { position:absolute; bottom:3.2%; left:25%; right:25%; z-index:5; display:flex; flex-direction:column; align-items:center; gap:5px; }
.select-footer .difficulty { margin:0; gap:5px; font-size:11px; }.select-footer .difficulty button { min-height:32px; font-size:11px; padding:.2em .5em; }
.select-footer .select-hint { margin:0; font:600 clamp(11px,.8vw,14px)/1.35 var(--f-text); text-shadow:1px 1px #09080e; max-width:80ch; }
.screen[data-screen="select"] > .back { z-index:7; top:auto; bottom:18px; left:24px; min-height:44px; font-size:14px; }
.screen[data-screen="select"] > .map-credit { position:absolute; right:22px; bottom:18px; z-index:7; color:#d8cbdc; background:#191421e8; padding:3px 5px; font:10px var(--f-text); }
.screen[data-screen="select"] button:focus-visible,.map-credit:focus-visible { outline:3px dashed #fff; outline-offset:5px; }
@media (max-width:1100px) and (orientation:portrait) {
  .screen[data-screen="select"]::before { inset:7px; border-width:3px; }
  .screen[data-screen="select"] > .select-title { top:2.5%; max-width:94%; padding:.25em; font-size:clamp(19px,5.8vw,42px); }
  .screen[data-screen="select"] > .select-title-sub { top:10%; font-size:10px; }
  .screen[data-screen="select"] > .select-map { inset:12% 4% 0; }
  .screen[data-screen="select"] > .map-viewport { top:14%; bottom:67%; left:4%; width:92%; }
  .map-marker b { font-size:12px; padding:2px 5px 0; border-width:2px; top:7px; }
  .map-marker i { width:13px; height:17px; border-width:2px; }.map-marker i::after { width:5px; height:5px; top:2px; left:2px; border-width:1px; }
  .map-marker.cocody b,.map-marker.treichville b { left:6px; }.map-marker.plateau b { left:-6px; }
  .map-north { font-size:10px; right:8%; }.map-water { font-size:9px; left:5%; }
  .screen[data-screen="select"] > .fighter-display { top:34%; bottom:37%; width:50%; }
  .fighter-left { left:0; }.fighter-right { right:0; }
  .fighter-art > img { width:108%; height:132%; left:-4%; }
  .fighter-caption { left:7%; width:86%; padding:.35em .1em; border-width:3px; }.fighter-caption strong { font-size:clamp(15px,4.5vw,23px); }.fighter-state { font-size:8px; }
  .screen[data-screen="select"] > .select-roster { width:88%; bottom:15.5%; }
  .select-roster .pick-card { height:clamp(84px,12.4vh,115px); }.select-roster .pick-name { font-size:clamp(10px,3vw,14px); }.select-roster .pick-card .cursor { font-size:17px; }
  .locked-fighter { height:44px; }.locked-fighter::before { font-size:40px; }.locked-fighter b { font-size:7px; }
  .screen[data-screen="select"] > .select-footer { bottom:7%; left:8%; right:8%; }.select-footer .difficulty button { min-height:44px; }
  .select-footer .select-hint { font-size:11px; }
  .screen[data-screen="select"] > .back { left:15px; bottom:10px; font-size:12px; }
  .screen[data-screen="select"] > .map-credit { bottom:23px; right:14px; font-size:8px; }
}
@media (max-height:500px) and (orientation:landscape) {
  .screen[data-screen="select"] > .select-title { top:2%; font-size:23px; }
  .screen[data-screen="select"] > .select-title-sub { top:14%; font-size:9px; }
  .screen[data-screen="select"] > .map-viewport { top:20%; bottom:50%; left:25%; width:50%; }
  .map-marker b { font-size:11px; padding:1px 4px 0; top:4px; border-width:2px; }
  .map-marker i { width:10px; height:13px; border-width:2px; }.map-marker i::after { width:4px; height:4px; border-width:1px; top:1px; left:1px; }
  .map-marker.cocody b,.map-marker.treichville b { left:6px; }.map-marker.plateau b { left:-6px; }
  .map-water { font-size:8px; left:-15%; }.map-north { font-size:9px; }
  .screen[data-screen="select"] > .select-roster { bottom:22%; width:40%; }
  .select-roster .pick-card { height:66px; }.select-roster .pick-name { font-size:10px; }.select-roster .pick-card .cursor { font-size:14px; }
  .locked-roster { margin-top:6px; }.locked-fighter { height:28px; }.locked-fighter::before { font-size:29px; }.locked-fighter b { font-size:6px; }
  .fighter-caption strong { font-size:24px; }.fighter-state { font-size:8px; }
  .screen[data-screen="select"] > .fighter-display { bottom:18%; top:7%; }
  .screen[data-screen="select"] > .select-footer { bottom:5.5%; left:23%; right:23%; }.select-footer .difficulty button { min-height:30px; }.select-footer .select-hint { font-size:10px; }
  .screen[data-screen="select"] > .back { bottom:14px; min-height:44px; }.screen[data-screen="select"] > .map-credit { font-size:8px; bottom:14px; }
}
@media (pointer:coarse) { .select-footer .difficulty button { min-height:44px; } }
@media (prefers-reduced-motion:reduce) { .select-roster *,.fighter-display * { animation:none !important; transition:none !important; } }

@media (min-width:701px) and (max-width:1100px) and (orientation:portrait) {
  .screen[data-screen="select"] > .select-title-sub { top:12%; }
  .screen[data-screen="select"] > .map-viewport { bottom:64%; }
  .screen[data-screen="select"] > .fighter-display { top:36%; }
  .map-marker b { font-size:18px; }
  .fighter-caption strong { font-size:32px; }
  .fighter-state { font-size:11px; }
  .select-roster .pick-card { height:145px; }
  .select-roster .pick-name { font-size:19px; }
  .locked-fighter { height:62px; }
}
@media (max-height:700px) and (orientation:portrait) {
  .screen[data-screen="select"] > .map-viewport { bottom:70%; }
  .screen[data-screen="select"] > .fighter-display { top:32%; bottom:47%; }
  .screen[data-screen="select"] > .select-roster { bottom:25%; }
  .select-roster .pick-card { height:84px; }
  .locked-roster { margin-top:6px; }
  .locked-fighter { height:28px; }
  .locked-fighter::before { font-size:28px; }
  .locked-fighter b { display:none; }
  .screen[data-screen="select"] > .select-footer { bottom:10%; left:6%; right:6%; }
  .select-footer .select-hint { font-size:10px; line-height:1.2; }
}