#gameInfo{width:920px}
.character-example{margin:24px 0;padding:20px;border:1px solid #405473;border-radius:16px;background:#101b2d}
.character-example h3{font-size:20px;margin:0 0 14px;color:#edf2fc}
.character-example .character-tabs{display:flex;gap:8px;margin-bottom:16px}
.character-tabs button,.character-scroll button{font:inherit;border:1px solid #4b6287;border-radius:10px;background:#1c2c46;color:#c9d9f4;padding:9px 14px;cursor:pointer}
.character-tabs button[aria-pressed=true]{background:#b4cbff;color:#0c1b34;border-color:#b4cbff}
.character-example button:focus-visible,.character-path:focus-visible{outline:2px solid #b4cbff;outline-offset:3px}
.character-path{display:flex;gap:28px;list-style:none;padding:4px 4px 14px;margin:0;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-color:#6381b1 #15233a;scrollbar-width:thin}
.character-stage{flex:0 0 156px;text-align:center;position:relative;scroll-snap-align:start}
.character-stage:not(:last-child)::after{content:'→';position:absolute;right:-25px;top:83px;font-size:24px;color:#92b7f3}
.character-stage .skin-frame{height:178px;display:flex;justify-content:center;align-items:center}
.character-stage .character-skin{display:block;width:166px;aspect-ratio:1;background-image:url('/character-male.png');background-size:500% 200%;background-repeat:no-repeat;flex-shrink:0}
.character-path[data-variant=female] .character-skin{width:134px;aspect-ratio:0.8;background-image:url('/character-female.png')}
.character-stage[data-column="0"] .character-skin{background-position-x:0%}.character-stage[data-column="1"] .character-skin{background-position-x:25%}.character-stage[data-column="2"] .character-skin{background-position-x:50%}.character-stage[data-column="3"] .character-skin{background-position-x:75%}.character-stage[data-column="4"] .character-skin{background-position-x:100%}
.character-stage[data-row="0"] .character-skin{background-position-y:0%}.character-stage[data-row="1"] .character-skin{background-position-y:100%}
.character-stage small{display:block;color:#8ca7cf;font-size:11px;margin:7px 0}
.character-stage strong{display:block;color:#edf2fc;font-size:14px;line-height:1.5;min-height:42px}
.character-example .character-scroll{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0}
.character-scroll span{font-size:13px;color:#b5c7e2}.character-scroll button:disabled{opacity:.35;cursor:default}
#gameInfo .character-note{font-size:14px;line-height:1.6;color:#a7bddc;margin-top:12px}
@media(max-width:850px){.character-example{padding:14px}.character-stage{flex-basis:146px}}

.character-stage[data-row="1"] .character-skin{clip-path:inset(4px 0 0)}