/* Character controls: compact at rest, descriptive on hover/focus. */
.character-back{grid-column:1/-1;display:inline-flex;align-items:center;justify-self:start;gap:0;width:50px;height:50px;margin:0 0 30px;padding:13px;border:1px solid #cdb28288;border-radius:25px;background:#101217;color:var(--gold);overflow:hidden;white-space:nowrap;transition:width .3s ease,background .2s,border-color .2s}
.character-back svg{width:22px;height:22px;flex:0 0 22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.character-back span{margin-left:0;opacity:0;font:12px Arial,sans-serif;transition:opacity .2s,margin-left .3s}
.character-back:hover,.character-back:focus-visible{width:164px;background:#262219;border-color:var(--gold)}
.character-back:hover span,.character-back:focus-visible span{margin-left:12px;opacity:1}
.character-back:focus-visible{outline:2px solid var(--gold);outline-offset:5px}

/* Slightly larger coverflow while keeping adjacent cards visible. */
.character-carousel{height:610px}
.character-option{width:290px;margin-left:-145px;transform:translateX(calc(var(--offset)*205px + var(--drag,0px))) translateZ(calc(var(--distance)*-150px)) rotateY(calc(var(--offset)*-22deg)) scale(calc(1 - var(--distance)*.065))}
.character-carousel .option-caption{margin-top:38px}

.card-controls{display:none}
.card-controls>span{display:none}
.card-controls button{min-height:38px;padding:8px 16px;border:1px solid #cdb28270;border-radius:19px;background:#17191e;color:var(--gold);font-size:10px;transition:background .2s,border-color .2s,color .2s}
.card-controls button:hover,.card-controls button:focus-visible{background:var(--gold);border-color:var(--gold);color:#171714}
.card-controls label{display:flex;align-items:center;gap:14px;text-transform:uppercase;cursor:pointer}
.card-controls input{position:relative;z-index:21;width:150px;height:24px;margin:0;accent-color:var(--gold);cursor:pointer;touch-action:pan-x;pointer-events:auto}
.character-pagination{grid-column:1/-1;position:relative;z-index:10;display:flex;align-items:center;justify-content:center;gap:11px;margin-top:28px;padding:18px 0 0;border-top:1px solid #34322e}
.character-dot{position:relative;width:12px;height:12px;padding:0;border:1px solid #9c8b6c;border-radius:50%;background:transparent;transition:transform .2s,background .2s,border-color .2s}
.character-dot::after{content:attr(aria-label);position:absolute;left:50%;bottom:calc(100% + 10px);transform:translate(-50%,5px);padding:5px 8px;background:#17191e;border:1px solid #5c503e;color:var(--paper);font:10px Arial,sans-serif;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,transform .2s}
.character-dot:hover::after,.character-dot:focus-visible::after{opacity:1;visibility:visible;transform:translate(-50%,0)}
.character-dot[aria-current=true]{background:var(--gold);border-color:var(--gold);transform:scale(1.32);box-shadow:0 0 0 4px #cdb28218}
.character-dot:focus-visible{outline:2px solid var(--gold);outline-offset:5px}

@media(max-width:700px){.character-carousel{height:490px}.character-option{width:225px;margin-left:-112.5px;transform:translateX(calc(var(--offset)*142px + var(--drag,0px))) translateZ(calc(var(--distance)*-115px)) rotateY(calc(var(--offset)*-27deg)) scale(calc(1 - var(--distance)*.06))}.character-carousel .option-caption{margin-top:32px}.character-back{margin-bottom:22px}.character-pagination{gap:13px;margin-top:18px;padding-top:16px}.character-dot{width:14px;height:14px}}
@media(max-width:420px){.card-controls{justify-content:space-between;gap:10px}.card-controls button{padding-inline:12px}.card-controls input{width:105px}}
@media(prefers-reduced-motion:reduce){.character-back,.character-back span,.character-dot,.character-dot::after{transition:none}}