.recruit-ball{image-rendering:pixelated;object-fit:contain;filter:drop-shadow(0 0 5px #ffad38)}
.route-node .recruit-ball{width:22px;height:22px;flex-shrink:0}
.rare-ball{filter:drop-shadow(0 0 8px #ffd36b);animation:rare-glow 2s ease-in-out infinite alternate}
@keyframes rare-glow{to{filter:drop-shadow(0 0 11px #fff1b1)}}
.xp-line{display:flex;align-items:center;gap:7px;font-size:9px;color:#b7baca;margin-top:3px}
.xp-line .bar{flex:1;height:3px;margin:0}.bar.xp span{background:#bc9be8}
.order-controls{flex-wrap:wrap}.drag-handle,[data-drag-grip]{touch-action:none;cursor:grab}.drag-handle{font-size:10px!important}
.drag-source{opacity:.35}.drop-target,.keyboard-grabbed{outline:2px solid #ffc568;outline-offset:-2px;background:#423729!important}
.team-drag-ghost{position:fixed;z-index:10000;pointer-events:none;display:flex;padding:9px;border:2px solid #ffc568;border-radius:12px;background:#172530;box-shadow:0 12px 35px #0009;opacity:.9}
.team-drag-ghost .avatar{flex:none;width:60px}.team-drag-ghost .unit-info{flex:1;min-width:0}.team-drag-ghost canvas{width:60px;height:70px}.team-drag-ghost button{display:none}
.dragging-team{user-select:none}.training-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.training-grid button{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px}.training-grid small{font-size:12px;line-height:1.4}
.collection-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.collection-card{border:1px solid #405365;border-radius:12px;padding:12px;text-align:center;background:#172530}
.collection-card .avatar{margin:auto;width:86px;height:100px}.collection-card h3{margin:8px 0}.collection-card p{font-size:12px;line-height:1.5}.collection-card strong{font-size:12px;color:#ffc568}.collection-card small{font-size:10px;color:#b7bdc8}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#info-dialog.costume-gallery{width:min(1050px,calc(100% - 24px));max-width:1050px;max-height:92dvh;padding:20px;overflow:auto}
.costume-gallery .dialog-top{position:sticky;top:0;z-index:2;background:#1c2a37;border-bottom:1px solid #405365;padding-bottom:8px}
.costume-gallery>.dialog-content>p{font-size:12px;line-height:1.6}
.costume-gallery .collection-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.costume-gallery .collection-card{padding:12px 8px;display:flex;flex-direction:column;align-items:center;gap:5px}
.costume-gallery .collection-card h3{font-size:23px;margin:0}
.costume-gallery .collection-card p{font-size:10px;margin:2px 0;line-height:1.4;min-height:47px}
.costume-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;align-items:end;width:100%}
.costume-comparison>div{min-width:0}.costume-comparison .avatar{width:78px;height:90px;margin:auto}.costume-comparison canvas{width:78px;height:90px}
.costume-comparison small{font-size:8px;color:#a8b6bf}.costume-comparison>div:last-child small{color:#ffcf79}
.costume-poses{display:flex;justify-content:center;gap:5px;margin-top:auto}
.costume-gallery .collection-card button{padding:5px 8px;font-size:10px;min-height:30px}.costume-lock{margin-top:4px}
@media(max-width:1000px){.costume-gallery .collection-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){#info-dialog.costume-gallery{width:calc(100% - 16px);padding:12px}.costume-gallery .collection-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.costume-comparison{gap:2px}.costume-comparison .avatar,.costume-comparison canvas{width:62px;height:73px}.costume-gallery .collection-card h3{font-size:21px}.costume-gallery .collection-card strong{font-size:10px}.costume-gallery .collection-card p{min-height:65px}}
@media(max-width:600px){.training-grid{gap:5px}.training-grid button{padding:9px 4px;font-size:12px}.training-grid small{font-size:10px}.collection-grid{grid-template-columns:repeat(2,1fr)}}
@media(prefers-reduced-motion:reduce){html:not([data-reduce-motion=false]) .rare-ball{animation:none}}

/* Five-member roster trial */
.roster-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:10px;overflow:visible}.legacy-team{max-width:1000px;margin:24px auto}.legacy-team .offer-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.legacy-team .offer-card{min-height:210px}.legacy-team .avatar{margin:auto}@media(max-width:600px){.legacy-team .offer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.roster-strip{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Transformation videos keep the existing dialog and explicit Continue action. */
#evolution{max-height:calc(100dvh - 24px);overflow:auto}
#evolution-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;z-index:5}
#evolution-video[hidden]{display:none}
#battle-effects{position:absolute;inset:0;z-index:4;pointer-events:none;width:100%;height:100%;image-rendering:auto}
.character-portrait{display:block;object-fit:contain;image-rendering:auto;max-width:100%}
.portrait-avatar{width:86px;height:100px;margin:auto;filter:drop-shadow(0 3px 5px #0005)}
.portrait-node{width:40px;height:40px;border-radius:50%}
.portrait-ko{filter:grayscale(.8);opacity:.45}
.unit .avatar .character-portrait{width:51px;height:64px}
.roster-character .character-portrait{width:86px;height:100px}
.bench-unit .avatar .character-portrait{width:35px;height:41px}
.bag-targets .character-portrait{width:50px;height:65px}
.offer-card .avatar,.starter .avatar{width:100%;height:170px;background:radial-gradient(ellipse at 50% 80%,#e4b34c20,transparent 68%);overflow:hidden;margin-bottom:10px}
.offer-card .portrait-card,.starter .portrait-card{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 8px #0006)}
.offer-card{min-height:300px;border-radius:8px;border:1px solid #4b6171}
.offer-card:hover{border-color:#ecc16e;background:#2c4050}
.starter{min-height:330px}
.hero-detail-head .portrait-card{width:140px;height:160px;flex-shrink:0}
.story-speaker .portrait-story{width:125px;height:150px;flex-shrink:0}
.end-unit .character-portrait{width:86px;height:100px}
.form-button{display:block;width:100%;font-size:10px;margin-top:7px;padding:7px 6px;color:#ffdda0;background:#463720;border:1px solid #9c783e;border-radius:4px}
.form-button:disabled{opacity:.4;cursor:not-allowed}
#form-dialog{max-height:calc(100dvh - 30px);overflow:auto}
.form-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}
.form-choice{padding:20px 15px;text-align:left;display:flex;flex-direction:column;gap:12px;line-height:1.6;background:#243746;border:1px solid #526b7b;border-radius:7px}
.form-choice strong{font-size:21px;color:#ffe0a0}
.form-choice span{font-size:12px;color:#d6e0e5}
.form-choice small{font-size:10px;color:#e3bb73;margin-top:auto}
.form-choice.selected{opacity:1;border-color:#d7ad69;background:#403a2a}
.form-future{font-size:11px;color:#a9b8c6}
@media(max-width:500px){.offer-grid{gap:7px}.offer-card{padding:12px 7px;min-height:260px}.offer-card .avatar{height:125px}.offer-card h3{font-size:21px}.offer-card p{font-size:10px}.hero-detail-head .portrait-card{width:110px;height:140px}.form-choices{grid-template-columns:1fr}.form-choice{padding:13px 15px}}
@media(max-width:400px){.starter{min-height:155px}.starter .avatar{width:80px;height:130px}}
.evolution-scene[data-media=playing]{background:#000!important;height:min(50dvh,420px)}
.evolution-scene[data-media=playing]>:not(video){visibility:hidden;animation:none!important}
@media(max-height:650px){#evolution{padding:12px 20px}#evolution-title{font-size:26px;margin:8px 0}.evolution-scene,.evolution-scene[data-media=playing]{height:min(42dvh,290px)}.evolution-scene canvas{height:100%;width:auto}#evolution-caption{margin:6px 0;min-height:20px}.evolution-bottom{padding-top:8px;min-height:44px}}
