/* Fighter select: a quiet chip under the play button opens a picker of every playable character. */
.character-chip{display:flex;align-items:center;gap:13px;min-width:310px;margin-top:16px;padding:8px 18px 8px 8px;background:#0c292cb3;backdrop-filter:blur(10px);border:1px solid #ffffff2b;border-radius:4px;color:var(--cream);text-align:left;transition:background .18s,border-color .18s,transform .18s}
.character-chip:hover{background:#123b38d9;border-color:#ffeb8f80;transform:translateY(-2px)}
.character-chip:active{transform:translateY(1px)}
.character-chip-art{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:50%;overflow:hidden;border:1px solid #ffffff2e;background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--coat,#3c3c42) 55%,#ffffff40),transparent 78%),#1d4b43}
.character-chip-art .portrait{width:38px;height:38px}
.character-chip-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.character-chip-text small{font-size:var(--fs-label);font-weight:800;letter-spacing:1.2px;color:var(--yellow-light);white-space:nowrap}
.character-chip-text strong{font-size:var(--fs-name);font-weight:900;letter-spacing:.6px;white-space:nowrap}
.character-chip-cta{display:inline-flex;align-items:center;gap:6px;margin-left:auto;padding-left:10px;font-size:var(--fs-label);font-weight:900;letter-spacing:1.2px;color:var(--yellow-light);white-space:nowrap}
.character-chip-cta .icon{width:16px;height:16px;transition:transform .18s}
.character-chip:hover .character-chip-cta .icon{transform:translateX(3px)}

/* The panel, its header and its footer come from styles.css (flex column, only .panel-scroll moves). The groups are a size container, so the
   card grid answers to the width of the panel, not of the window, and never strands a single card on a row of its own:
   one row per group while all nine cards fit (four cats over five frogs, each row flush with both panel edges, --count comes from the
   markup), otherwise two across with the odd frog given a full-width row. */
.character-panel{width:min(960px,100%)}
.character-groups{container-type:inline-size;display:flex;flex-direction:column;gap:var(--sp-5);padding:var(--sp-5) var(--gutter) var(--sp-4)}
.character-group>h3{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:var(--sp-3);row-gap:2px;margin:0 0 var(--sp-3);font-size:var(--fs-label);font-weight:800;letter-spacing:1.5px}
.character-group>h3 strong{font-size:var(--fs-name);font-weight:900;letter-spacing:1.6px;color:var(--yellow-light)}
.character-group>h3 span{color:#b4c9b0}
.character-group>h3 em{margin-left:auto;font-style:normal;color:#a8bfa8}
.character-grid{--cols:var(--count,5);--gap:var(--sp-3);--art:clamp(64px,9cqw,92px);--blurb-lines:2;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap)}
.character-card{flex:0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);padding:var(--sp-4) var(--sp-3) 15px;text-align:center;cursor:pointer;background:#10352c;border:1px solid #d6e7bf1f;border-radius:6px;transition:transform .18s,background .18s,border-color .18s,box-shadow .18s}
.character-card:hover{transform:translateY(-3px);background:#164038;border-color:#ffeb8f66}
.character-card>input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.character-card>input:focus-visible{outline:0}
.character-art{display:grid;place-items:center;flex:none;width:var(--art);height:var(--art);border-radius:50%;border:2px solid #ffffff1f;background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--coat) 50%,#ffffff40),transparent 76%),#1a4a41;transition:border-color .18s,box-shadow .18s,transform .18s}
.character-art .portrait{width:calc(var(--art) * .81);height:calc(var(--art) * .81);transition:transform .25s}
.character-card:hover .portrait{transform:scale(1.07) rotate(-2deg)}
.character-name{font-size:var(--fs-name);font-weight:900;letter-spacing:.6px;line-height:1.15;text-transform:uppercase;text-wrap:balance}
.character-blurb{min-height:calc(1.45em * var(--blurb-lines));font-size:var(--fs-text);line-height:1.45;color:#b4c9b0;text-wrap:balance}
.character-check{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--yellow);color:#16352d;opacity:0;transform:scale(.6);transition:opacity .15s,transform .18s}
.character-check .icon{width:12px;height:12px}
.character-card:has(input:checked){background:#1b4a40;border-color:var(--yellow);box-shadow:0 0 0 1px var(--yellow),0 10px 24px #00190e55}
.character-card:has(input:checked) .character-art{border-color:var(--yellow);box-shadow:0 0 0 5px #ffda5929}
.character-card:has(input:checked) .character-check{opacity:1;transform:scale(1)}
.character-card:has(input:focus-visible){outline:3px solid var(--yellow-light);outline-offset:3px}
.hint-coarse{display:none}
@media(pointer:coarse){.hint-fine{display:none}.hint-coarse{display:inline}}

.result-links{display:flex;justify-content:center;gap:26px;margin-top:23px}
.result-links .result-settings{margin-top:0}

@media(max-width:1100px){.character-chip{min-width:275px}.character-panel{width:min(860px,100%)}}
/* Short windows (1280x720 and below): a tighter vertical rhythm so all nine cards and the primary button fit without scrolling. */
@media(max-height:760px){.character-chip{min-width:280px;margin-top:12px}.character-groups{gap:var(--sp-4);padding-block:var(--sp-4) var(--sp-3)}.character-group>h3{margin-bottom:var(--sp-2)}.character-card{padding:var(--sp-3) var(--sp-2)}.character-grid{--art:clamp(56px,7.5cqw,72px)}.result-links{margin-top:15px}}
@media(max-width:700px){
 .character-chip{width:min(100%,310px);min-width:0}
 .character-group>h3 span{display:none}
 .result-links{gap:18px}
}
/* One row per group, squeezed: the blurb may take a third line. */
@container(max-width:759px){.character-grid{--blurb-lines:3}.character-card{padding-inline:var(--sp-2)}}
/* Two across. The fifth frog would sit alone, so it takes the whole row and lies down: portrait left, name and blurb right. */
@container(max-width:579px){
 .character-grid{--cols:2;--art:clamp(64px,22cqw,84px);--blurb-lines:2}
 .character-card:last-child:nth-child(odd){flex:0 0 100%;display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr auto auto 1fr;column-gap:var(--sp-4);row-gap:2px;align-items:center;justify-items:start;padding:var(--sp-3) var(--sp-4);text-align:left}
 .character-card:last-child:nth-child(odd) .character-art{grid-row:1/-1}
 .character-card:last-child:nth-child(odd) .character-name{grid-column:2;grid-row:2}
 .character-card:last-child:nth-child(odd) .character-blurb{grid-column:2;grid-row:3;min-height:0}
}
@media(orientation:landscape) and (max-height:600px){
 .menu-content .character-chip{width:min(270px,100%);min-width:0;margin-top:10px;padding:5px 14px 5px 5px;gap:10px}
 .character-chip-art{width:36px;height:36px}.character-chip-art .portrait{width:31px;height:31px}
 .character-chip-text strong{font-size:12px}
 .character-blurb{display:none}.character-card{padding:var(--sp-2);gap:5px}.character-grid{--art:clamp(48px,6cqw,60px)}
 .character-card:last-child:nth-child(odd) .character-blurb{display:none}
}
@media(max-height:500px){.character-groups{gap:var(--sp-3);padding-block:var(--sp-3) var(--sp-2)}.character-group>h3{margin-bottom:6px}.character-grid{--art:clamp(40px,14vh,56px);--gap:var(--sp-2)}.character-card{padding:var(--sp-2);gap:4px}}
@media(prefers-reduced-motion:reduce){.character-card:hover,.character-card:hover .portrait,.character-chip:hover{transform:none}}