/* Character select: transparent costume portraits, stage lighting, clear controls. */
.characters{--accent:#4d9fff;position:relative;overflow:hidden;background:radial-gradient(ellipse at 18% 24%,#102b51 0,transparent 48%),#070f1d;padding:100px 0 95px;border-top:1px solid #203956;border-bottom:1px solid #203956}.characters:before{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 42%,#2f78bb08 42%,#2f78bb08 58%,transparent 58%);pointer-events:none}.characters>.wrap{position:relative;z-index:1}.characters .character-heading{font-size:clamp(60px,10vw,148px);font-family:Oswald,sans-serif;letter-spacing:.025em;color:#ffffff04;right:-10px;top:0;white-space:nowrap}.characters .section-top{margin-bottom:30px}.characters .section-top h2{font-size:clamp(27px,3.1vw,43px)}.characters .eyebrow{color:#7bb1ee}.character-hint{font-size:14px;color:#b7c9e0;padding-bottom:6px}.characters .filters{border:0;display:inline-flex;gap:8px;margin:0 0 24px;background:#040a15;padding:6px;border-radius:5px;max-width:100%}.characters .filter{min-width:172px;padding:12px 23px;min-height:52px;font-size:16px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:17px;border:1px solid #26364b;color:#b9c9df;border-radius:3px;transition:background .2s}.characters .filter.active{background:#ffd331;border-color:#ffd331;color:#08152a;box-shadow:0 4px 23px #ffd33115}.filter-count{font-family:Oswald;font-size:16px;opacity:.7}.characters .filter:not(.active):hover{background:#1b2c43;color:white}.characters .character-stage{--character-color:#4d9fff;display:grid;grid-template-columns:1.05fr 1fr;gap:0;min-height:560px;background:radial-gradient(ellipse at 17% 50%,color-mix(in srgb,var(--character-color),transparent 89%),transparent 56%),linear-gradient(135deg,#14243c,#0a1424 55%);border:1px solid color-mix(in srgb,var(--character-color),#27374d 65%);border-radius:5px;position:relative;isolation:isolate;box-shadow:0 30px 60px #0004;transition:border-color .3s,background .3s}.characters .character-stage:before{content:'';position:absolute;left:-1px;top:-1px;width:100px;height:5px;background:var(--character-color);box-shadow:0 0 26px color-mix(in srgb,var(--character-color),transparent 50%)}.characters .character-stage:after{content:'';position:absolute;right:-1px;bottom:-1px;width:80px;height:4px;background:var(--character-color)}.characters .character-art{position:relative;isolation:isolate;align-self:stretch;min-height:560px;height:auto;display:flex;justify-content:center;align-items:center;overflow:hidden;clip-path:none;background:none;box-shadow:none}.characters .character-art:before{content:'';position:absolute;inset:9% 8%;z-index:-3;background:repeating-linear-gradient(0deg,transparent 0,transparent 35px,#aacdff06 36px),repeating-linear-gradient(90deg,transparent 0,transparent 35px,#aacdff06 36px);mask-image:radial-gradient(ellipse,black,transparent 70%)}.characters .character-art:after{content:'';position:absolute;bottom:22px;left:13%;right:13%;height:90px;background:radial-gradient(ellipse,color-mix(in srgb,var(--character-color),transparent 70%),transparent 66%);z-index:-1;transform:scaleY(.55)}.characters .portrait{height:520px;width:auto;aspect-ratio:var(--portrait-ratio,384 / 1024);background-image:var(--sheet);background-size:var(--sprite-size,376.645435%) 100%;background-position:var(--sprite-position,0%) 0;background-repeat:no-repeat;mix-blend-mode:normal;position:relative;z-index:2;filter:drop-shadow(0 18px 13px #0008) drop-shadow(0 0 16px color-mix(in srgb,var(--character-color),transparent 82%));margin-top:7px;animation:character-arrive .5s ease-out both}.stage-word{position:absolute;z-index:-2;font-family:Oswald;font-weight:700;top:42%;left:50%;transform:translate(-50%,-50%) rotate(-90deg);font-size:90px;letter-spacing:.035em;color:#bed6ff06;white-space:nowrap}.stage-category{position:absolute;top:25px;left:26px;font-size:12px;letter-spacing:.1em;color:#a5bada;z-index:3}.stage-bottom{position:absolute;bottom:23px;left:26px;font-family:Oswald;font-size:12px;color:#92acd0;letter-spacing:.2em}.stage-ring{position:absolute;width:360px;height:360px;border:1px solid color-mix(in srgb,var(--character-color),transparent 80%);border-radius:50%;z-index:-1;top:50%;left:50%;transform:translate(-50%,-50%)}.stage-ring:before{content:'';position:absolute;inset:20px;border:1px dashed color-mix(in srgb,var(--character-color),transparent 87%);border-radius:50%}.stage-ring:after{content:'';position:absolute;inset:-20px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--character-color),transparent 88%),transparent 68%)}.characters .character-no{color:color-mix(in srgb,var(--character-color),transparent 86%);font-size:130px;font-weight:600;bottom:12px;right:15px;line-height:1;z-index:-1}.characters .character-info{padding:48px 44px 35px 15px;align-self:center;min-width:0}.characters .character-info .eyebrow{color:var(--character-color);font-family:var(--font);font-weight:700;font-size:13px;margin-bottom:15px;letter-spacing:.07em}.characters .character-info h3{font-size:clamp(28px,2.8vw,40px);line-height:1.5;letter-spacing:.015em;font-weight:900;word-break:normal;overflow-wrap:anywhere}.characters .character-tagline{font-size:16px;line-height:1.8;margin:15px 0 18px;color:#e2ecfa;font-weight:700}.characters .character-desc{font-size:14px;color:#aebfd6;line-height:2.05;max-width:480px}.characters .stats{margin:26px 0 28px;gap:8px}.characters .stat{border:1px solid #94baff19;padding:13px 15px;background:#08102080;grid-template-columns:76px 1fr;gap:12px;align-items:start;font-size:14px}.characters .stat span{color:#a5b7d2;font-size:12px;padding-top:2px}.characters .stat strong{font-weight:700;color:#f1f6ff;line-height:1.85}.character-controls{display:flex;align-items:center;gap:17px;border-top:1px solid #a4c4ff20;padding-top:22px}.character-step{background:#172c47;border:1px solid #3f5676;color:#fff;display:flex;align-items:center;justify-content:center;gap:14px;min-height:48px;padding:10px 19px;font-size:14px;font-weight:700;border-radius:3px;transition:background .2s,transform .2s}.character-step:hover{background:#285287;transform:translateY(-2px)}.character-step span{font-size:21px;line-height:1}#selection-position{font-family:Oswald;font-size:16px;color:#a7bedb;min-width:45px;text-align:center;font-variant-numeric:tabular-nums}.roster-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:35px 0 16px}.roster-heading strong{font-size:16px;letter-spacing:.05em}.roster-heading span{font-size:13px;color:#9db4d3}.characters .character-strip{display:grid;grid-template-columns:repeat(var(--roster-cols,4),1fr);gap:15px;overflow:visible;margin:0;padding:8px 0;scroll-snap-type:none}.characters .character-card{--card-color:#4d9fff;position:relative;display:flex;flex-direction:column;isolation:isolate;min-width:0;border:1px solid #37506e;border-radius:4px;background:radial-gradient(ellipse at 50% 44%,color-mix(in srgb,var(--card-color),transparent 72%),transparent 73%),linear-gradient(145deg,#1a2b43,#0a1628);overflow:hidden;transition:transform .22s,border-color .22s,box-shadow .22s;padding:0;color:#fff;box-shadow:0 10px 25px #0002;text-align:left}.characters .character-card:before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(125deg,transparent 45%,#ffffff06 45%,#ffffff06 52%,transparent 52%)}.characters .character-card:after{content:'';position:absolute;height:3px;bottom:0;left:15px;right:15px;background:var(--card-color);opacity:.45}.characters .character-card:hover{transform:translateY(-7px);border-color:var(--card-color);box-shadow:0 10px 30px color-mix(in srgb,var(--card-color),transparent 83%)}.characters .character-card.active{border:1px solid #ffd331;box-shadow:0 0 0 2px #ffd33133,0 12px 32px #0005;transform:translateY(-4px)}.characters .character-card.active:after{background:var(--yellow);opacity:1}.card-topline{position:absolute;top:12px;left:13px;right:13px;display:flex;justify-content:space-between;align-items:center;gap:6px;z-index:2}.card-index{font-family:Oswald;font-size:13px;color:var(--card-color)}.card-kind{font-size:10px;color:#c8d8ed;letter-spacing:.03em}.characters .card-portrait{height:218px;width:auto;aspect-ratio:var(--portrait-ratio,384 / 1024);align-self:center;flex-shrink:0;margin:22px 0 -1px;background-image:var(--sheet);background-size:var(--sprite-size,376.645435%) 100%;background-position:var(--sprite-position,0%) 0;background-repeat:no-repeat;background-color:transparent;mix-blend-mode:normal;filter:drop-shadow(0 8px 7px #0008);transition:transform .3s;overflow:visible}.characters .character-card:hover .card-portrait{transform:scale(1.045)}.characters .card-label{display:block;text-align:center;font-size:14px;font-weight:800;line-height:1.7;padding:13px 8px 6px;margin:0;background:#071020bd;width:100%;flex:1;overflow-wrap:anywhere;min-height:43px}.card-state{display:block;font-size:12px;color:#93a9c7;text-align:center;padding:0 8px 15px;line-height:1.8;background:#071020bd}.active .card-state{color:var(--yellow);font-weight:700}.characters .character-strip[data-group="enemy"] .card-portrait{height:190px}.characters .character-strip[data-group="enemy"] .card-label{font-size:13px}.characters .character-strip[data-group="enemy"] .card-kind{font-size:10px}@keyframes character-arrive{from{opacity:0;transform:translateX(-16px) scale(.98)}to{opacity:1;transform:none}}@media(max-width:1050px){.characters .character-info{padding:35px 25px 30px 10px}.characters .character-stage{grid-template-columns:1fr 1.1fr;min-height:520px}.characters .character-art{min-height:520px}.characters .portrait{height:490px}.stage-ring{width:270px;height:270px}.characters .character-info h3{font-size:29px}.characters .character-strip{gap:11px}.characters .character-strip[data-group="enemy"]{grid-template-columns:repeat(3,1fr)}.characters .character-strip[data-group="enemy"] .card-portrait{height:220px}.characters .character-strip[data-group="enemy"] .card-label{font-size:14px}}@media(max-width:800px){.characters{padding:65px 0}.characters .section-top{gap:12px;margin-bottom:22px}.character-hint{font-size:13px}.characters .filters{width:100%;gap:6px;margin-bottom:18px}.characters .filter{flex:1;min-width:0;min-height:50px;padding:10px 15px;gap:15px;font-size:15px}.characters .character-stage{grid-template-columns:1fr;gap:0}.characters .character-art{min-height:410px;height:410px}.characters .portrait{height:392px}.stage-ring{height:275px;width:275px}.stage-category{left:18px;top:18px;font-size:11px}.stage-bottom{left:18px;bottom:15px;font-size:11px}.characters .character-no{font-size:106px;bottom:10px;right:16px}.stage-word{font-size:73px}.characters .character-info{padding:20px 24px 26px;border-top:1px solid #accaff18;background:linear-gradient(#07101b40,transparent)}.characters .character-info h3{font-size:29px}.characters .character-info .eyebrow{margin-bottom:10px;font-size:12px}.characters .character-tagline{font-size:15px;margin:12px 0 14px}.characters .character-desc{font-size:14px}.characters .stats{margin:20px 0}.characters .stat{grid-template-columns:70px 1fr;font-size:13px;padding:12px}.character-controls{justify-content:space-between;gap:10px;padding-top:18px}.character-step{flex:1;max-width:135px;min-height:48px;padding:10px 13px;font-size:14px}.roster-heading{margin:28px 0 14px;gap:10px}.roster-heading strong{font-size:14px}.roster-heading span{font-size:11px}.characters .character-strip,.characters .character-strip[data-group="enemy"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;overflow:visible}.characters .character-card{flex:none}.characters .card-portrait,.characters .character-strip[data-group="enemy"] .card-portrait{height:205px;margin-top:26px}.characters .card-label,.characters .character-strip[data-group="enemy"] .card-label{font-size:13px;padding:11px 5px 5px;min-height:40px}.card-topline{top:10px;left:10px;right:10px}.card-kind{font-size:10px}.card-state{font-size:11px;padding-bottom:12px}.characters .character-card:hover{transform:none}.characters .character-card.active{transform:translateY(-3px)}}@media(prefers-reduced-motion:reduce){.characters .portrait{animation:none}.characters *{transition:none!important}}

.characters .character-stage{scroll-margin-top:100px}

.characters .card-label,.characters .character-strip[data-group="enemy"] .card-label{font-size:14px}
/* Selection stays beside the portrait, above the long description. */
.mobile-character-picker{display:none}.characters .character-art{padding-bottom:76px}.characters .character-controls{position:absolute;bottom:20px;left:22px;right:22px;z-index:4;justify-content:center;border-top:0;padding-top:0}.characters .character-art .portrait{height:460px}.characters .stage-bottom{display:none}.characters .character-no{bottom:80px}.characters .character-step{background:#102846f5}.characters #selection-position{background:#081322b8;border-radius:3px;padding:5px 9px;min-width:62px}
@media(max-width:800px){.characters .section-top{margin-bottom:17px}.characters .filters{margin-bottom:12px}.mobile-character-picker{display:block;margin:0 0 16px}.mobile-character-picker label{display:block;font-size:13px;font-weight:700;color:#c2d5ef;margin-bottom:7px}.mobile-character-picker select{width:100%;min-height:48px;padding:10px 40px 10px 14px;font:700 16px var(--font);border:1px solid #4b6f9b;border-radius:4px;background:#132943;color:#fff;box-sizing:border-box}.characters .character-stage{min-height:0}.characters .character-art{height:330px;min-height:330px;padding-bottom:62px}.characters .character-art .portrait{height:260px;margin:0}.characters .stage-category{top:14px;left:14px;font-size:10px}.characters .stage-ring{width:220px;height:220px;top:43%}.characters .character-no{font-size:80px;bottom:70px;right:16px}.characters .character-controls{bottom:13px;left:14px;right:14px;gap:13px;justify-content:space-between}.characters .character-step{max-width:125px;min-height:48px}.characters .character-info{padding:20px}.characters .character-info h3{font-size:27px}.characters .roster-heading,.characters .character-strip{display:none}.characters .character-hint{font-size:0}.characters .character-hint:after{content:'名前をえらぶか、前へ・次へでチェンジ！';font-size:13px}}