/* Character select: one screen, no page scroll. Flat comic-minimal style.
   Background motion follows the shown character, drawn as quiet line art over a tinted ground. */
.select-page{overflow:hidden;background:var(--bg-tint);transition:background .4s;--left-w:clamp(330px,28vw,450px);--pad:clamp(14px,1.8vw,30px)}

/* ---------- Background ---------- */
.sel-bg{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.bg-field{position:absolute;inset:0;background:var(--bg-tint);transition:background .4s}
.bg-dots{position:absolute;inset:0;color:rgba(236,235,230,.07);background:var(--dots) 0 0/16px 16px}
.bg-slab{position:absolute;inset:0 auto 0 0;width:calc(var(--left-w) + var(--pad)*1.6);background:rgba(12,12,14,.72);border-right:1px solid var(--line)}

.bg-marquee{position:absolute;left:0;right:0;bottom:6%;display:flex;white-space:nowrap;
  font:400 clamp(90px,14vw,210px)/1 var(--display);color:transparent;-webkit-text-stroke:1.5px rgba(236,235,230,.09)}
.bg-marquee span{padding-right:.3em;animation:marquee 40s linear infinite}
@keyframes marquee{to{transform:translateX(-100%)}}

.bg-fx{position:absolute;inset:0;opacity:0;transition:opacity .45s}
body[data-theme=hazel] .bg-hazel,body[data-theme=komichi] .bg-komichi,body[data-theme=hinome] .bg-hinome,body[data-theme=kanon] .bg-kanon,body[data-theme=nana7mi] .bg-nana7mi,body[data-theme=shiori] .bg-shiori{opacity:1}
body[data-theme=viridis] .bg-viridis{opacity:1}
.bg-viridis i{position:absolute;width:150px;height:60px;border:2px solid color-mix(in srgb,var(--c1) 32%,transparent);border-radius:90% 0 90% 0;transform:rotate(-25deg);right:12%;top:24%}
.bg-viridis i:nth-child(2){width:95px;height:38px;right:28%;top:62%;transform:rotate(25deg)}
.bg-viridis i:nth-child(3){width:64px;height:26px;right:4%;top:76%;transform:rotate(-65deg)}
.bg-viridis b{position:absolute;width:240px;height:240px;border:2px solid color-mix(in srgb,var(--c2) 18%,transparent);border-radius:50%;right:8%;top:46%}
.bg-viridis b:last-child{width:180px;height:180px;right:calc(8% + 30px);top:calc(46% + 30px);border-color:color-mix(in srgb,var(--c1) 22%,transparent)}
.roster-card.available[data-character=viridis]{--card-accent:#a7c77a}

/* Hazel · jelly: outlined blobs wobble upward; thin pop rings. */
.bg-hazel i{position:absolute;bottom:-160px;width:var(--s,120px);height:var(--s,120px);border:1.5px solid color-mix(in srgb,var(--c1) 55%,transparent);
  background:color-mix(in srgb,var(--c1) 7%,transparent);animation:jelly-rise var(--d,16s) linear infinite,jelly-wobble 2.6s ease-in-out infinite;animation-delay:var(--o,0s),0s}
.bg-hazel i::after{content:"";position:absolute;left:24%;top:20%;width:14%;height:14%;border-radius:50%;background:color-mix(in srgb,var(--c1) 60%,transparent)}
.bg-hazel i:nth-child(1){--s:150px;left:calc(var(--left-w) + 9%);--d:19s;--o:-3s}
.bg-hazel i:nth-child(2){--s:90px;left:calc(var(--left-w) + 34%);--d:15s;--o:-9s}
.bg-hazel i:nth-child(3){--s:200px;right:6%;--d:24s;--o:-14s}
.bg-hazel i:nth-child(4){--s:70px;right:24%;--d:13s;--o:-5s}
.bg-hazel i:nth-child(5){--s:110px;left:calc(var(--left-w) + 52%);--d:21s;--o:-1s}
.bg-hazel i:nth-child(6){--s:56px;right:4%;--d:11s;--o:-6s}
@keyframes jelly-rise{from{transform:translateY(0)}to{transform:translateY(calc(-100vh - 320px))}}
@keyframes jelly-wobble{0%,100%{border-radius:48% 52% 45% 55%/55% 45% 55% 45%}33%{border-radius:56% 44% 52% 48%/44% 58% 42% 56%}66%{border-radius:44% 56% 58% 42%/52% 46% 54% 48%}}
.bg-hazel .ripple{position:absolute;width:240px;height:240px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--c1) 60%,transparent);opacity:0;animation:pop 5.2s ease-out infinite}
.bg-hazel .ripple:nth-of-type(1){right:14%;top:14%}
.bg-hazel .ripple:nth-of-type(2){left:calc(var(--left-w) + 22%);top:46%;animation-delay:-2.6s}
@keyframes pop{0%{transform:scale(.2);opacity:0}8%{opacity:.9}45%{transform:scale(1);opacity:0}100%{opacity:0}}

/* Komichi · road signs: muted hazard tape, outlined signs, drifting chevrons. */
.bg-komichi .hazard{position:absolute;left:-20%;right:-20%;height:34px;opacity:.22;
  background:repeating-linear-gradient(45deg,var(--c2) 0 18px,transparent 18px 36px);background-size:50.9px 50.9px;animation:tape 2.4s linear infinite}
.hazard-a{top:15%;transform:rotate(-8deg)}
.hazard-b{bottom:30%;transform:rotate(5deg);animation-direction:reverse!important;opacity:.14!important}
@keyframes tape{to{background-position:50.9px 0}}
.bg-komichi .sign{position:absolute;display:grid;place-items:center;font:400 48px/1 var(--display);font-style:normal;color:rgba(236,235,230,.32);animation:sway 3.6s ease-in-out infinite;transform-origin:50% 120%}
.sign-limit{width:140px;height:140px;border-radius:50%;border:7px solid color-mix(in srgb,var(--c1) 55%,transparent);right:8%;top:22%}
.sign-warn{width:150px;height:130px;right:30%;top:52%;animation-delay:-1s!important;color:transparent}
.sign-warn::before{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--c2) 45%,transparent);clip-path:polygon(50% 0,100% 100%,0 100%,0 100%,7% 94%,93% 94%,50% 9%,7% 94%,0 100%)}
.sign-warn::after{content:"!";position:absolute;left:0;right:0;bottom:12%;text-align:center;font-size:56px;color:color-mix(in srgb,var(--c2) 55%,transparent)}
.sign-arrow{width:150px;height:70px;border:2px solid rgba(236,235,230,.3);left:calc(var(--left-w) + 8%);top:9%;font-size:38px;animation-delay:-2s!important}
.sign-stop{width:96px;height:96px;right:3%;top:56%;font-size:36px;color:color-mix(in srgb,var(--c1) 60%,transparent);animation-delay:-.6s!important}
.sign-stop::before{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--c1) 50%,transparent);clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%,0 30%,5% 32%,5% 68%,32% 95%,68% 95%,95% 68%,95% 32%,68% 5%,32% 5%,5% 32%,0 30%)}
@keyframes sway{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(3deg) translateY(-6px)}}
.chevrons{position:absolute;left:var(--left-w);right:0;bottom:12%;height:50px;color:rgba(236,235,230,.12);
  background:linear-gradient(135deg,transparent 0 40%,currentColor 40% 50%,transparent 50%) 0 0/46px 50px,linear-gradient(45deg,transparent 0 50%,currentColor 50% 60%,transparent 60%) 0 0/46px 50px;animation:chev 1.2s linear infinite}
@keyframes chev{to{background-position:46px 0,46px 0}}

/* Hinome · fire feather: outlined feathers drift up with embers; four promise diamonds fill and release. */
.bg-hinome .feather{position:absolute;bottom:-170px;width:38px;height:128px;border:1.5px solid color-mix(in srgb,var(--c1) 58%,transparent);
  border-radius:50% 50% 50% 50%/85% 85% 15% 15%;background:linear-gradient(90deg,transparent 48%,color-mix(in srgb,var(--c1) 45%,transparent) 48% 52%,transparent 52%),color-mix(in srgb,var(--c1) 6%,transparent);
  animation:feather-rise var(--d,18s) linear infinite;animation-delay:var(--o,0s)}
.bg-hinome .feather:nth-of-type(1){left:calc(var(--left-w) + 12%);--d:20s;--o:-4s}
.bg-hinome .feather:nth-of-type(2){left:calc(var(--left-w) + 40%);--d:16s;--o:-11s;transform:scale(.7)}
.bg-hinome .feather:nth-of-type(3){right:7%;--d:23s;--o:-2s}
.bg-hinome .feather:nth-of-type(4){right:27%;--d:14s;--o:-8s}
.bg-hinome .feather:nth-of-type(5){left:calc(var(--left-w) + 60%);--d:19s;--o:-15s}
@keyframes feather-rise{0%{transform:translate(0,0) rotate(-18deg)}25%{transform:translate(26px,-28vh) rotate(14deg)}50%{transform:translate(-18px,-56vh) rotate(-12deg)}75%{transform:translate(22px,-84vh) rotate(16deg)}100%{transform:translate(0,calc(-100vh - 340px)) rotate(-10deg)}}
.bg-hinome .ember{position:absolute;bottom:-20px;width:7px;height:7px;background:color-mix(in srgb,var(--c2) 70%,transparent);transform:rotate(45deg);animation:ember-rise var(--d,9s) linear infinite;animation-delay:var(--o,0s)}
.bg-hinome .ember:nth-of-type(1){left:calc(var(--left-w) + 20%);--d:8s;--o:-1s}
.bg-hinome .ember:nth-of-type(2){left:calc(var(--left-w) + 33%);--d:11s;--o:-6s}
.bg-hinome .ember:nth-of-type(3){right:18%;--d:9s;--o:-3s}
.bg-hinome .ember:nth-of-type(4){right:9%;--d:12s;--o:-9s}
.bg-hinome .ember:nth-of-type(5){left:calc(var(--left-w) + 50%);--d:10s;--o:-4s}
.bg-hinome .ember:nth-of-type(6){right:36%;--d:7s;--o:-2s}
@keyframes ember-rise{0%{transform:translateY(0) rotate(45deg);opacity:0}10%{opacity:.9}100%{transform:translateY(-92vh) rotate(405deg);opacity:0}}
.promise-row{position:absolute;left:calc(var(--left-w) + 6%);top:15%;display:flex;gap:22px}
.promise-row i{width:46px;height:46px;transform:rotate(45deg);border:2px solid color-mix(in srgb,var(--c1) 55%,transparent);animation:promise-fill 6s steps(1) infinite}
.promise-row i:nth-child(2){animation-name:promise-fill-2}.promise-row i:nth-child(3){animation-name:promise-fill-3}.promise-row i:nth-child(4){animation-name:promise-fill-4}
@keyframes promise-fill{0%,12%{background:transparent}12.01%,80%{background:color-mix(in srgb,var(--c1) 38%,transparent)}80.01%,100%{background:transparent}}
@keyframes promise-fill-2{0%,28%{background:transparent}28.01%,80%{background:color-mix(in srgb,var(--c1) 38%,transparent)}80.01%,100%{background:transparent}}
@keyframes promise-fill-3{0%,44%{background:transparent}44.01%,80%{background:color-mix(in srgb,var(--c1) 38%,transparent)}80.01%,100%{background:transparent}}
@keyframes promise-fill-4{0%,60%{background:transparent;box-shadow:none}60.01%,80%{background:color-mix(in srgb,var(--c2) 55%,transparent);box-shadow:0 0 0 7px color-mix(in srgb,var(--c2) 18%,transparent)}80.01%,100%{background:transparent;box-shadow:none}}

/* Kanon · stage: swaying spotlights, a stave whose notes scroll by, echo rings that linger. */
.bg-kanon .beam{position:absolute;top:-8%;width:300px;height:118%;transform-origin:50% 0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c3) 16%,transparent),transparent 82%);clip-path:polygon(44% 0,56% 0,100% 100%,0 100%);animation:beam-sway 7s ease-in-out infinite}
.beam-a{left:calc(var(--left-w) + 14%)}
.beam-b{right:8%;animation-delay:-3.5s!important;animation-direction:reverse!important}
@keyframes beam-sway{0%,100%{transform:rotate(-11deg)}50%{transform:rotate(11deg)}}
.bg-kanon .staff{position:absolute;left:var(--left-w);right:0;top:30%;height:74px;overflow:hidden;transform:rotate(-6deg);
  background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--c1) 30%,transparent) 0 1.5px,transparent 1.5px 18px)}
.bg-kanon .staff span{position:absolute;top:var(--y,14px);left:100%;font:400 44px/1 var(--display);color:color-mix(in srgb,var(--c1) 60%,transparent);animation:note-scroll 12s linear infinite;animation-delay:var(--o,0s)}
.bg-kanon .staff span:nth-child(1){--y:4px;--o:0s}.bg-kanon .staff span:nth-child(2){--y:22px;--o:-2s}.bg-kanon .staff span:nth-child(3){--y:12px;--o:-4s}
.bg-kanon .staff span:nth-child(4){--y:28px;--o:-6s}.bg-kanon .staff span:nth-child(5){--y:2px;--o:-8s}.bg-kanon .staff span:nth-child(6){--y:18px;--o:-10s}
@keyframes note-scroll{0%{transform:translate(0,0)}25%{transform:translate(-30vw,-8px)}50%{transform:translate(-60vw,0)}75%{transform:translate(-90vw,-8px)}100%{transform:translate(calc(-100vw - 60px),0)}}
.bg-kanon .echo{position:absolute;right:16%;bottom:16%;width:220px;height:110px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--c2) 70%,transparent);opacity:0;animation:echo 3.6s ease-out infinite}
.bg-kanon .echo:nth-of-type(2){animation-delay:-1.2s}.bg-kanon .echo:nth-of-type(3){animation-delay:-2.4s}
@keyframes echo{0%{transform:scale(.25);opacity:0}10%{opacity:.85}100%{transform:scale(1.6);opacity:0}}

/* Nana7mi · reef sea: layered wave lines, two shark fins cruising, rising bubbles. */
.bg-nana7mi .wave,.bg-shiori .wave{position:absolute;left:-10%;right:-10%;height:40px;opacity:.5;
  background:radial-gradient(circle at 50% 100%,transparent 18px,color-mix(in srgb,var(--c1) 55%,transparent) 18px 20px,transparent 20px) 0 0/48px 40px repeat-x;animation:wave-drift 6s linear infinite}
.wave-a{bottom:24%}
.wave-b{bottom:17%;opacity:.28!important;animation-duration:9s!important;animation-direction:reverse!important}
.wave-c{bottom:12%;opacity:.3!important;animation-duration:10s!important}
@keyframes wave-drift{to{background-position:48px 0}}
.bg-nana7mi .fin{position:absolute;bottom:calc(24% + 30px);left:var(--left-w);width:70px;height:62px;background:color-mix(in srgb,var(--c1) 34%,transparent);
  clip-path:polygon(0 100%,22% 66%,40% 34%,56% 10%,70% 0,66% 22%,68% 48%,78% 76%,100% 100%);animation:fin-cruise 14s linear infinite}
.fin-b{bottom:calc(17% + 30px)!important;transform:scale(.65);animation-duration:19s!important;animation-delay:-8s!important;animation-direction:reverse!important}
@keyframes fin-cruise{0%{translate:0 0}25%{translate:20vw -6px}50%{translate:40vw 0}75%{translate:60vw -6px}100%{translate:calc(100vw - var(--left-w)) 0}}
.bg-nana7mi .bubble{position:absolute;bottom:-30px;width:var(--s,18px);height:var(--s,18px);border-radius:50%;border:1.5px solid color-mix(in srgb,var(--c3) 45%,transparent);animation:bubble-rise var(--d,10s) ease-in infinite;animation-delay:var(--o,0s)}
.bg-nana7mi .bubble:nth-of-type(1){left:calc(var(--left-w) + 18%);--s:22px;--d:11s;--o:-2s}
.bg-nana7mi .bubble:nth-of-type(2){left:calc(var(--left-w) + 36%);--s:12px;--d:8s;--o:-5s}
.bg-nana7mi .bubble:nth-of-type(3){right:12%;--s:28px;--d:13s;--o:-7s}
.bg-nana7mi .bubble:nth-of-type(4){right:30%;--s:14px;--d:9s;--o:-1s}
.bg-nana7mi .bubble:nth-of-type(5){left:calc(var(--left-w) + 56%);--s:18px;--d:12s;--o:-9s}
.bg-nana7mi .bubble:nth-of-type(6){right:5%;--s:10px;--d:7s;--o:-3s}
@keyframes bubble-rise{0%{transform:translate(0,0);opacity:0}10%{opacity:1}50%{transform:translate(14px,-46vh)}100%{transform:translate(-8px,-96vh);opacity:0}}

/* Shiori · otter impact: shells tumble past, dash streaks sweep across, an impact burst pops. */
.bg-shiori .shell{position:absolute;width:76px;height:64px;border-radius:50% 50% 12% 12%/70% 70% 30% 30%;
  border:1.5px solid color-mix(in srgb,var(--c1) 60%,transparent);
  background:repeating-conic-gradient(from -64deg at 50% 100%,color-mix(in srgb,var(--c1) 30%,transparent) 0 2deg,transparent 2deg 16deg);
  animation:shell-tumble var(--d,16s) linear infinite;animation-delay:var(--o,0s)}
.bg-shiori .shell:nth-of-type(1){top:16%;--d:18s;--o:-3s}
.bg-shiori .shell:nth-of-type(2){top:46%;--d:14s;--o:-9s;scale:.7}
.bg-shiori .shell:nth-of-type(3){top:64%;--d:21s;--o:-14s}
.bg-shiori .shell:nth-of-type(4){top:30%;--d:16s;--o:-6s;scale:.55}
@keyframes shell-tumble{0%{left:105%;transform:rotate(0)}100%{left:calc(var(--left-w) - 120px);transform:rotate(-540deg)}}
.dash-lines{position:absolute;left:var(--left-w);right:0;top:36%;height:200px}
.dash-lines i{position:absolute;left:0;height:3px;width:24vw;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--c2) 60%,transparent));animation:dash-sweep 2.4s cubic-bezier(.6,0,.2,1) infinite;opacity:0}
.dash-lines i:nth-child(1){top:0;animation-delay:0s}.dash-lines i:nth-child(2){top:40px;width:34vw;animation-delay:.08s}.dash-lines i:nth-child(3){top:84px;width:28vw;animation-delay:.04s}
.dash-lines i:nth-child(4){top:126px;width:18vw;animation-delay:.12s}.dash-lines i:nth-child(5){top:170px;width:30vw;animation-delay:.02s}
@keyframes dash-sweep{0%{transform:translateX(-30vw);opacity:0}8%{opacity:1}40%{transform:translateX(70vw);opacity:0}100%{transform:translateX(70vw);opacity:0}}
.bg-shiori .burst{position:absolute;right:9%;top:42%;width:170px;height:170px;display:grid;place-items:center;font:400 54px/1 var(--display);font-style:normal;color:color-mix(in srgb,var(--ink) 70%,transparent);
  background:color-mix(in srgb,var(--c3) 50%,transparent);clip-path:polygon(50% 0,61% 30%,95% 18%,72% 46%,100% 62%,66% 66%,72% 100%,50% 76%,26% 100%,32% 66%,0 62%,28% 46%,6% 18%,40% 30%);
  opacity:0;animation:burst 2.4s cubic-bezier(.2,1.6,.4,1) infinite .6s}
@keyframes burst{0%{transform:scale(.2) rotate(-12deg);opacity:0}6%{opacity:.9}22%{transform:scale(1) rotate(0)}40%,100%{transform:scale(1.05);opacity:0}}
@media (prefers-reduced-motion:reduce){.bg-fx *,.bg-marquee span{animation:none!important}}

/* Character swap: a flat panel wipes across, the name slides in. */
.bg-wipe{position:absolute;inset:0 -20%;background:var(--c1);opacity:.9;transform:translateX(-120%) skewX(-12deg)}
.swap .bg-wipe{animation:wipe .5s cubic-bezier(.7,0,.3,1)}
@keyframes wipe{0%{transform:translateX(-120%) skewX(-12deg)}50%{transform:translateX(0) skewX(-12deg)}100%{transform:translateX(120%) skewX(-12deg)}}

/* ---------- Layout ---------- */
.selection-main{position:relative;z-index:1;height:100vh;height:100dvh;display:grid;
  grid-template-columns:var(--left-w) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;
  column-gap:clamp(40px,5vw,90px);row-gap:14px;padding:var(--pad);padding-left:max(var(--pad),env(safe-area-inset-left));padding-right:max(var(--pad),env(safe-area-inset-right));color:var(--paper)}

.sel-top{grid-column:1/-1;display:flex;align-items:center;gap:18px;min-width:0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-mark{font-size:26px;line-height:1;color:var(--paper);text-shadow:2px 2px 0 var(--ink)}
.brand-sub{font:700 11px/1.1 var(--body);letter-spacing:.22em;padding-left:12px;border-left:1px solid var(--line)}
.brand-sub small{display:block;font-size:9px;letter-spacing:.24em;color:var(--muted);margin-top:3px}
.selection-status{margin-left:auto;font:var(--label);letter-spacing:.14em;color:var(--muted)}
.lab-link{font:var(--label);letter-spacing:.14em;color:var(--paper);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
.lab-link:hover{border-color:var(--paper)}
.quality-setting{display:flex;flex-direction:column;gap:3px;min-width:0}
.quality-setting label{display:flex;align-items:center;gap:8px;font:var(--label);color:var(--muted);white-space:nowrap}
.quality-setting .pop-select{min-height:28px;min-width:86px;padding-top:2px;padding-bottom:2px;font-size:12px;color:var(--paper)}
.quality-setting small{font-size:10px;line-height:1.3;color:var(--muted)}
/* Low quality keeps the menu's decorative background still as well. */
body[data-quality=low] .bg-fx *,body[data-quality=low] .bg-marquee span{animation:none!important}

/* Left column: seats + roster */
.sel-left{grid-column:1;grid-row:2/4;display:flex;flex-direction:column;min-height:0;gap:14px}
.player-slots{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.player-slot{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"tag role" "name name" "hint hint";align-items:center;gap:2px 8px;text-align:left;
  border:1.5px solid var(--line);padding:10px 12px;background:transparent;color:var(--paper);transition:border-color .2s,background .2s}
.player-slot:hover{border-color:rgba(236,235,230,.5)}
.player-slot .slot-tag{grid-area:tag;font:700 10px/1 var(--body);letter-spacing:.08em;color:var(--ink);background:var(--paper);padding:3px 5px}
.player-slot .slot-role{grid-area:role;font:var(--label);letter-spacing:.16em;color:var(--muted)}
.player-slot strong{grid-area:name;font:400 22px/1.15 var(--display);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-slot small{grid-area:hint;font-size:11px;color:var(--muted)}
.player-slot.active{border-color:var(--paper);background:rgba(236,235,230,.06);box-shadow:inset 3px 0 0 var(--c1)}

.roster-caption{display:flex;align-items:center;gap:10px}
.roster-caption strong{display:flex;align-items:center;gap:10px;flex:1;font:700 11px/1 var(--body);letter-spacing:.2em}
.roster-caption strong::after{content:"";flex:1;height:1px;background:var(--line)}
.roster-search-label{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}
.roster-search-label input{width:110px;min-height:28px;border:1.5px solid var(--line);background:transparent;padding:0 9px;font-size:12px}
.roster-search-label input:focus{border-color:var(--paper);outline:none}
.roster-grid{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:min-content;gap:6px;padding:2px;align-content:start;
  scrollbar-width:thin;scrollbar-color:var(--ink-3) transparent}
.roster-card{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);padding:0;background:transparent;color:var(--paper);overflow:hidden;text-align:left}
.roster-card .roster-image{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--ink-2)}
.roster-card .roster-portrait{position:relative;z-index:2;display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .25s;filter:drop-shadow(1px 0 0 #fff7ec) drop-shadow(-1px 0 0 #fff7ec) drop-shadow(0 -1px 0 #fff7ec) drop-shadow(3px 3px 0 var(--card-secondary))}
.roster-card strong{font-size:10.5px;font-weight:600;padding:3px 5px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.roster-card.locked{opacity:.62}
.roster-card.locked .roster-portrait{opacity:.82}
.roster-card .lock-label{position:absolute;right:3px;bottom:3px;font:var(--label);font-size:8.5px;background:var(--ink);color:var(--muted);padding:1px 4px}
.portrait-placeholder{display:grid;place-items:center;height:100%;font:400 22px var(--display);color:#3a3b42}
.roster-card.available{grid-column:span 2;border-color:rgba(236,235,230,.4)}
.roster-card.available .roster-image{aspect-ratio:1/.92}
.roster-card.available strong{font:400 18px/1.2 var(--display);padding:6px 10px 6px}
.roster-card.available:hover .roster-portrait{transform:scale(1.04)}
.roster-card.available[data-character=hazel]{--card-accent:#86d3b8}
.roster-card.available[data-character=komichi]{--card-accent:#e06a5c}
.roster-card.available strong{box-shadow:inset 3px 0 0 var(--card-accent)}
.roster-card[aria-pressed=true]{border:2px solid var(--paper)}
.roster-card[aria-pressed=true] strong{background:var(--paper);color:var(--ink)}
.roster-tags{position:absolute;left:5px;top:5px;display:flex;gap:4px}
.roster-tags i{font:700 10px/1 var(--body);font-style:normal;padding:3px 5px;color:var(--paper);background:var(--ink)}
.roster-empty{margin:0;color:var(--muted);font-size:12px}

/* Stage */
.sel-stage{grid-column:2;grid-row:2;position:relative;min-height:0}
.preview-stage{position:absolute;inset:0}
.stage-floor{position:absolute;left:var(--model-x,60%);bottom:7%;width:min(44vh,400px);aspect-ratio:3/1;transform:translateX(-50%);border-radius:50%;border:1.5px solid rgba(236,235,230,.45);background:rgba(10,10,12,.35)}
.stage-floor::before{content:"";position:absolute;inset:16% 18%;border-radius:50%;border:1px solid color-mix(in srgb,var(--c1) 70%,transparent)}
:is(#preview-canvas,[data-preview="canvas"]){position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:none}
:is(#preview-canvas,[data-preview="canvas"]):active{cursor:grabbing}
:is(#preview-portrait,[data-preview="portrait"]){position:absolute;left:var(--model-x,60%);top:46px;bottom:4%;max-width:56%;transform:translateX(-50%);object-fit:contain;background:#e9e7e1;border:2px solid var(--paper);box-shadow:6px 6px 0 var(--ink)}
.portrait-view .stage-floor{display:none}
.preview-loading{position:absolute;left:var(--model-x,60%);top:50%;transform:translate(-50%,-50%);font:var(--label);letter-spacing:.14em;color:var(--muted)}

.name-plate{position:absolute;left:0;bottom:2%;max-width:min(560px,52%);pointer-events:none}
.name-kicker{display:flex;align-items:center;gap:12px;margin:0 0 10px;font:var(--label);letter-spacing:.24em;color:var(--muted)}
.name-kicker span+span{color:var(--paper);padding-left:12px;border-left:1px solid var(--line)}
:is(#preview-name,[data-preview="name"]){margin:0;font-size:clamp(56px,7vw,116px);line-height:.95;color:var(--paper);text-shadow:4px 4px 0 var(--ink)}
.swap :is(#preview-name,[data-preview="name"]){animation:slide-in .45s cubic-bezier(.2,1,.3,1) .12s both}
@keyframes slide-in{0%{transform:translateX(-40px);opacity:0}100%{transform:none;opacity:1}}
.preview-description{margin:14px 0 0;font-size:13px;font-weight:600;color:var(--paper);padding-left:12px;border-left:2px solid var(--c1)}
.preview-traits{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:12px 0 0;padding:0}
.preview-traits li{font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--paper);border:1px solid var(--line);padding:3px 9px;background:rgba(12,12,14,.4)}
.swap .preview-traits li{animation:slide-in .35s cubic-bezier(.2,1,.3,1) both .2s}
.preview-showcase{margin:10px 0 0;font-size:11px;letter-spacing:.08em;color:var(--muted)}
.preview-showcase:not(:empty)::before{content:"选中演示 · ";color:var(--c1)}

.preview-controls{position:absolute;right:0;top:0;display:flex;align-items:center;gap:6px}
.preview-tabs{display:flex}
.preview-tabs .btn+.btn{border-left:0}
.preview-tabs .btn,:is(#preview-reset,[data-preview="reset"]){min-height:30px;padding:0 12px;font-size:12px}
.preview-instruction{order:-1;font:var(--label);letter-spacing:.12em;color:var(--muted);margin-right:6px}

/* Actions */
.sel-actions{grid-column:2;grid-row:3;display:flex;align-items:flex-end;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.mode-pick{display:flex;flex-direction:column;gap:5px;font:var(--label);letter-spacing:.16em;color:var(--muted)}
.mode-pick .pop-select{min-height:46px;color:var(--paper);font-size:13px;letter-spacing:0}
.stage-pick{display:flex;align-items:flex-end;gap:8px}
.stage-thumb{display:block;width:112px;height:63px;object-fit:cover;border:1.5px solid var(--line);background:rgba(12,12,14,.5)}
.stage-home-tag{font-style:normal;color:var(--ink);background:var(--paper);padding:1px 5px;margin-left:4px;letter-spacing:.08em}
#lobby-stage{max-width:210px}
.action-row{display:flex;gap:8px}
.action-row .btn{min-height:46px;background:rgba(12,12,14,.5)}
.cta{position:relative;display:flex;align-items:center;justify-content:space-between;gap:28px;min-width:clamp(220px,19vw,290px);height:clamp(56px,7vh,68px);padding:0 24px;border:0;
  background:var(--paper);color:var(--ink);box-shadow:5px 5px 0 var(--c1);transition:transform .1s,box-shadow .1s}
.cta-label{font-size:clamp(24px,2.3vw,32px);line-height:1}
.cta-sub{font:700 11px/1 var(--body);letter-spacing:.24em}
.cta-sub::after{content:" →";font-size:16px}
.cta:hover:not(:disabled){transform:translate(-1px,-1px);box-shadow:6px 6px 0 var(--c1)}
.cta:active:not(:disabled){transform:translate(3px,3px);box-shadow:2px 2px 0 var(--c1)}
.cta:disabled{opacity:.5}

/* Gamepad hint */
.pad-hint{position:fixed;left:var(--pad);bottom:var(--pad);z-index:5;display:none;flex-direction:column;gap:2px;max-width:calc(var(--left-w) - 10px);padding:8px 12px;font-size:11px;background:var(--ink);border:1px solid var(--line)}
.gamepad-status{font-weight:700}
body.gamepad-navigation .pad-hint,.has-gamepad .pad-hint{display:flex}

/* Move list drawer */
.moves-drawer{position:fixed;z-index:20;top:0;right:0;bottom:0;width:min(460px,94vw);display:flex;flex-direction:column;background:var(--ink);border-left:1.5px solid var(--line);
  animation:drawer-in .26s cubic-bezier(.2,.9,.3,1)}
@keyframes drawer-in{from{transform:translateX(100%)}}
.drawer-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:20px 18px 12px;border-bottom:1px solid var(--line)}
.drawer-head h2{margin:0;font-size:24px;line-height:1.1}
.drawer-head .name-kicker{margin-bottom:8px}
.drawer-body{flex:1;overflow:auto;padding:4px 18px 24px;scrollbar-width:thin;scrollbar-color:var(--ink-3) transparent}

/* ---------- Phones in landscape / short windows ---------- */
@media (max-height:560px),(max-width:900px){
  .select-page{--left-w:clamp(250px,33vw,320px);--pad:10px}
  .selection-main{row-gap:7px;column-gap:28px;padding-top:max(8px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom))}
  .brand-mark{font-size:18px}
  .brand-sub{display:none}
  .sel-top{gap:12px}
  .quality-setting{max-width:180px}
  .quality-setting small{font-size:9px}
  .sel-left{gap:7px}
  .player-slots{gap:6px}
  .player-slot{padding:5px 8px;grid-template-areas:"tag name" "tag hint";gap:0 7px}
  .player-slot .slot-role{display:none}
  .player-slot strong{font-size:15px;margin:0}
  .player-slot small{font-size:9.5px}
  .roster-search-label span{display:none}
  .roster-search-label input{width:84px;min-height:24px;font-size:11px}
  .roster-grid{gap:5px}
  .roster-card.available strong{font-size:14px;padding:3px 7px}
  .roster-card.available .roster-image{aspect-ratio:1/.8}
  .roster-card strong{font-size:9px}
  :is(#preview-name,[data-preview="name"]){font-size:clamp(36px,6.2vw,56px);text-shadow:3px 3px 0 var(--ink)}
  .name-plate{bottom:0;max-width:56%}
  .name-kicker{font-size:8.5px;margin-bottom:5px}
  .preview-description{margin-top:7px;font-size:11px}
  .preview-traits,.preview-showcase{display:none}
  .preview-controls{gap:4px}
  .preview-tabs .btn,:is(#preview-reset,[data-preview="reset"]){min-height:26px;padding:0 9px;font-size:11px}
  .preview-instruction{display:none}
  .stage-floor{bottom:4%;width:min(42vh,260px,80%)}
  .sel-actions{gap:6px;flex-wrap:wrap}
  .mode-pick span{display:none}
  .stage-thumb{width:68px;height:38px}
  #lobby-stage{max-width:150px}
  .mode-pick .pop-select{min-height:38px;font-size:12px;padding-left:10px}
  .action-row .btn{min-height:38px;padding:0 12px;font-size:12px}
  .cta{min-width:150px;height:42px;padding:0 16px;gap:14px;box-shadow:4px 4px 0 var(--c1)}
  .cta-label{font-size:20px}.cta-sub{font-size:8px}
  .bg-marquee{font-size:100px;bottom:4%}
  .bg-hazel i:nth-child(3){--s:120px}.bg-hazel i:nth-child(1){--s:96px}
  .bg-hazel .ripple{width:150px;height:150px}
  .bg-komichi .hazard{height:24px}
  .sign-limit{width:90px;height:90px;border-width:5px;font-size:32px}
  .sign-warn{width:96px;height:84px}.sign-warn::after{font-size:36px}
  .sign-arrow{width:100px;height:48px;font-size:26px}
  .sign-stop{width:64px;height:64px;font-size:24px}
  .drawer-head{padding:12px 14px 8px}.drawer-head h2{font-size:20px}
  .drawer-body{padding:0 14px 16px}
}
@media (max-width:680px){
  .sel-top{gap:8px}
  .selection-status{display:none}
  .quality-setting{margin-left:auto;max-width:170px}
  .lab-link{font-size:10px;letter-spacing:0;white-space:nowrap}
}

/* Portrait cards: each keeps its own palette while the large preview changes theme. */
.roster-card{--card-accent:#8fb9d4;--card-secondary:#d98aa8}
.roster-card .roster-image{isolation:isolate;background:linear-gradient(145deg,color-mix(in srgb,var(--card-accent) 76%,#fff6df),color-mix(in srgb,var(--card-accent) 50%,#fff6df))}
.roster-image::before{content:"";position:absolute;z-index:0;inset:0;background:radial-gradient(circle,color-mix(in srgb,var(--card-secondary) 45%,transparent) 1.1px,transparent 1.4px) 0 0/7px 7px;mask-image:linear-gradient(135deg,#000,transparent 70%)}
.roster-image::after{content:"";position:absolute;z-index:1;width:90%;aspect-ratio:1;left:25%;top:30%;border:10px solid color-mix(in srgb,#fff 45%,transparent);border-radius:50%;box-shadow:0 0 0 1px color-mix(in srgb,var(--card-secondary) 50%,transparent)}
.roster-card[data-motif=hazard] .roster-image::after{width:160%;height:22%;aspect-ratio:auto;left:-30%;top:59%;border:0;border-radius:0;transform:rotate(-18deg);background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--card-secondary) 70%,transparent) 0 9px,transparent 9px 18px);box-shadow:none}
.roster-card[data-motif=spark] .roster-image::after{width:72%;left:45%;top:42%;border:0;border-radius:0;background:color-mix(in srgb,#fff 48%,transparent);clip-path:polygon(50% 0,61% 35%,95% 22%,75% 52%,100% 75%,65% 71%,54% 100%,43% 73%,10% 86%,26% 56%,0 35%,36% 38%);box-shadow:none}
.roster-tags,.roster-card .lock-label{z-index:3}
.roster-card.available:hover .roster-portrait{transform:translateY(-2px) scale(1.015)}
@media(prefers-reduced-motion:reduce){.roster-card .roster-portrait{transition:none}}

body[data-theme=michiya] .bg-michiya{opacity:1}
.bg-michiya .crown{position:absolute;right:10%;top:18%;width:180px;height:90px;background:color-mix(in srgb,var(--c2) 25%,transparent);clip-path:polygon(0 15%,25% 50%,50% 0,75% 50%,100% 15%,86% 100%,14% 100%);transform:rotate(-9deg)}
.bg-michiya .ember{position:absolute;width:24px;height:48px;left:calc(var(--left-w) + 15%);top:30%;background:color-mix(in srgb,var(--c1) 30%,transparent);border-radius:70% 20% 65% 35%;transform:rotate(20deg);animation:michiya-ember 5s ease-in-out infinite alternate}
.bg-michiya .ember:nth-child(2){left:75%;top:55%;animation-delay:-2s}.bg-michiya .ember:nth-child(3){left:85%;top:74%;animation-delay:-4s}.bg-michiya .ember:nth-child(4){left:63%;top:17%;width:13px;height:26px}.bg-michiya .ember:nth-child(5){left:48%;top:78%;width:16px;height:32px}
@keyframes michiya-ember{to{transform:translateY(-18px) rotate(-12deg);opacity:.45}}
.roster-card[data-motif=crown] .roster-image::after{left:40%;top:38%;right:auto;width:66%;height:42%;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;background:color-mix(in srgb,var(--card-secondary) 44%,transparent);clip-path:polygon(0 0,25% 40%,50% 0,75% 40%,100% 0,90% 100%,10% 100%);transform:rotate(-12deg);z-index:1}
@media(prefers-reduced-motion:reduce){.bg-michiya .ember{animation:none}}

/* Seat identity is distinct from the character palette and stays legible on both layouts. */
.brand-mark{white-space:nowrap;flex-shrink:0}
.player-slot .slot-tag{font-size:16px;font-weight:900;line-height:1.1;letter-spacing:.04em;padding:5px 7px;min-width:34px;text-align:center}
#slot-0 .slot-tag{background:var(--mint);color:var(--ink)}
#slot-1 .slot-tag{background:var(--red);color:var(--ink)}
:is(#preview-slot,[data-preview="slot"]){font-size:0;letter-spacing:0;flex-shrink:0}
:is(#preview-slot,[data-preview="slot"])::before{display:inline-block;font:900 18px/1 var(--body);letter-spacing:.05em;padding:5px 8px;min-width:43px;text-align:center;border:1px solid currentColor;background:var(--ink)}
[data-preview-seat="0"] :is(#preview-slot,[data-preview="slot"])::before{content:"1P";color:var(--mint)}
[data-preview-seat="1"] :is(#preview-slot,[data-preview="slot"])::before{content:"2P";color:var(--red)}
.roster-tags .tag-p0{color:var(--mint);font-weight:900}.roster-tags .tag-p1{color:var(--red);font-weight:900}
@media(max-height:600px),(max-width:680px){.player-slot .slot-tag{font-size:14px;padding:4px 6px;min-width:30px}:is(#preview-slot,[data-preview="slot"])::before{font-size:16px;padding:4px 6px;min-width:37px}}

/* A visible parent-menu action precedes the game brand on both selection pages. */
.selection-back{flex:none;min-width:72px;padding:0 12px;gap:5px;font-weight:700;white-space:nowrap}
.sel-top :is(.selection-back,.online-back){--bg:var(--paper);--fg:var(--ink);border:1.5px solid var(--paper);border-radius:0;box-shadow:4px 4px 0 var(--red);margin-right:4px;text-decoration:none;transition:transform .1s,box-shadow .1s}
.sel-top :is(.selection-back,.online-back):hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--red)}
.sel-top :is(.selection-back,.online-back):active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--red)}
.sel-top :is(.selection-back,.online-back):focus-visible{outline:2px solid var(--red);outline-offset:5px}
.sel-top .selection-back+.brand{margin-left:2px}
@media(max-height:600px),(max-width:680px){.selection-back{min-width:58px;min-height:32px;padding:0 9px;font-size:11px}}

/* Azuma identity is scoped to the selected panel, including dual previews. */
.roster-card[data-character=azuma] .roster-image{background:linear-gradient(145deg,#615886,#302b48)}
.roster-card[data-character=azuma] .roster-image::before{background:repeating-linear-gradient(125deg,transparent 0 13px,#c5bee51a 13px 15px);mask-image:none}
.roster-card[data-character=azuma] .roster-image::after{width:78%;left:30%;top:33%;border:2px solid #d9d0ef70;border-radius:12%;transform:rotate(45deg);background:#b9b1df15;box-shadow:0 0 0 7px #b9b1df15}
.azuma-portrait-cutout{filter:drop-shadow(7px 0 0 #eeeaf7) drop-shadow(-7px 0 0 #eeeaf7) drop-shadow(0 7px 0 #eeeaf7) drop-shadow(0 -7px 0 #eeeaf7) drop-shadow(18px 20px 0 #191526aa)}
.preview-panel[data-theme=azuma] .preview-stage{isolation:isolate;background:radial-gradient(ellipse at 65% 45%,#aaa0d21f,transparent 64%)}
.preview-panel[data-theme=azuma] .preview-stage::before{content:"";position:absolute;pointer-events:none;left:var(--model-x,60%);top:47%;width:min(49vh,440px);aspect-ratio:1;background:url('assets/portraits/azuma-crest.svg') center/contain no-repeat;opacity:.38;transform:translate(-50%,-50%);animation:azuma-crest-turn 80s linear infinite;z-index:-1}
.preview-panel[data-theme=azuma] .stage-floor{border-color:#b9b1df80;background:#211b344d;box-shadow:0 12px 28px #13101f50}
.preview-panel[data-theme=azuma] .preview-traits li{border-color:#b9b1df55;background:#272238b3}
@keyframes azuma-crest-turn{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.preview-panel[data-theme=azuma] .preview-stage::before{animation:none}}
.preview-panel[data-theme=azuma][data-preview-active=false] .preview-stage::before{animation-play-state:paused}

/* R19: white/pearl identity with small green accents; charcoal text surfaces. */
:is(body,.preview-panel)[data-theme=chu2u]{--c1:#e4e9e5;--c2:#a9cd69;--c3:#bcc5bf;--c1-deep:#65756b;--c1-ink:#202923;--bg-tint:#202326;--on-c1:#202923}
body[data-theme=chu2u] .bg-chu2u{opacity:1}
.bg-chu2u .orbit{position:absolute;right:4%;top:22%;width:46vw;height:23vw;border:2px solid #dce4df66;border-radius:50%;transform:rotate(-24deg)}
.bg-chu2u .orbit-small{right:14%;top:39%;width:28vw;height:12vw;border-color:#b9de6955;transform:rotate(20deg)}
.bg-chu2u .planet{position:absolute;right:10%;top:20%;width:82px;height:82px;border:2px solid #e4e9e5aa;border-radius:50%;background:#e4e9e518;box-shadow:inset -16px -8px 0 #a9cd6922}
.bg-chu2u .ufo{position:absolute;right:36%;top:24%;width:92px;height:27px;border:2px solid #dce4df99;border-radius:50%;transform:rotate(-15deg);background:#a9cd6928;animation:chu2u-ufo 6s ease-in-out infinite}
.bg-chu2u .ufo::before{content:"";position:absolute;left:25%;bottom:50%;width:50%;height:30px;border:2px solid #dce4df88;border-radius:50% 50% 0 0;background:#75837b}
.bg-chu2u .debris{position:absolute;right:8%;top:58%;font:40px monospace;letter-spacing:18px;color:#b9de6977;transform:rotate(-18deg)}
@keyframes chu2u-ufo{50%{transform:translateY(-14px) rotate(-9deg)}}
.roster-card[data-character=chu2u] .roster-image{background:linear-gradient(145deg,#a6b5ab,#dce2dd)}
.roster-card[data-character=chu2u] .roster-portrait{filter:drop-shadow(1px 1px 0 #45564c) drop-shadow(3px 4px 0 #61756c88)}
.roster-card[data-character=chu2u] .roster-image::after{border-color:#b9de6966;transform:rotate(-22deg) scaleY(.45)}
.bg-hazel .jelly-stamp{position:absolute;right:8%;top:30%;width:140px;height:108px;border:2px solid #86d3b866;border-radius:50% 50% 28% 28%;background:#86d3b812;transform:rotate(12deg)}
.bg-hazel .jelly-stamp::before{content:"";position:absolute;left:32%;top:50%;width:7px;height:10px;border-radius:50%;background:#86d3b899;box-shadow:38px 0 #86d3b899}
.bg-hazel .jelly-stamp::after{content:"";position:absolute;right:-24px;top:-40px;width:28px;height:28px;border:2px solid #86d3b866;border-radius:50%}
@media(max-width:700px){.bg-chu2u .orbit{width:80vw;height:38vw;right:-20%;top:26%}.bg-chu2u .ufo{right:44%;top:20%;scale:.7}.bg-chu2u .planet{right:5%;scale:.7}.bg-hazel .jelly-stamp{width:90px;height:74px;right:4%}}
@media(prefers-reduced-motion:reduce){.bg-chu2u .ufo{animation:none}}

/* R19 review 3: dark canvas; grey-white dots and local pearl/green accents. */
body[data-theme=chu2u] .bg-dots{color:rgba(225,228,230,.10)}
body[data-theme=chu2u] .cta{box-shadow:4px 4px 0 #8fa77b}