/* CHAR-UI-MAGE-02: scoped type, framing and layout; existing paper materials retained. */
.responsive-art{display:contents}
.responsive-art>source{display:none}
.recruit-view .product-art .product-portrait{grid-column:1;grid-row:1}
.recruit-view .product-art .product-stats{grid-column:2;grid-row:1}
.is-playfield{--read-font:system-ui,"Microsoft YaHei","PingFang SC",sans-serif}
.shop-skill-preview,.actor-skill,.specialty-summary,.specialty-details,.actor-actions,.placement-help,.skill-preview,.opponent-preview{font-family:var(--read-font,system-ui,sans-serif)}
.is-playfield .recruit-view .product-title h2{font-size:22px;line-height:1.35}
.is-playfield .recruit-view .product-skill{font-size:15px;line-height:1.5}
.is-playfield .recruit-view .core-skill{font-size:14px;line-height:1.5;margin:0 0 7px;color:#352f27}
.shop-skill-preview{margin:4px 0 8px;text-align:left;min-width:0}
.route-preview{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px}
.route-label{grid-column:1/-1;font-size:12px;font-weight:600;color:#6c553d}
.route-teaser{display:flex;align-items:flex-start;gap:4px;min-width:0;border-left:2px solid #99a58d;padding-left:5px}
.route-teaser>.paper-icon{width:30px;height:30px;flex:none;margin:0}
.route-teaser>span{min-width:0}.route-teaser b{display:block;font-size:15px;line-height:1.45;color:#345258}
.route-teaser>span>span{display:block;font-size:14px;line-height:1.5;color:#40372d}
.is-playfield .product-actions button,.is-playfield .recruit-tools>button,.is-playfield .recruit-tools .shop-next,.is-playfield .prep-tabs button{font-size:15px;min-height:44px}
.is-playfield .product-switch button{font-size:14px;white-space:normal;line-height:1.45;min-height:44px}
.is-playfield .product-switch button[aria-pressed=true]{border-width:2px;border-bottom-width:4px}
.is-playfield .product-stats .paper-stat-number{font-size:26px}
.is-playfield .placement-help,.is-playfield .skill-preview,.is-playfield .opponent-preview,.is-playfield .budget-note,.is-playfield .zero-warning{font-size:14px;line-height:1.5}
.is-playfield .opponent-preview small{font-size:13px;line-height:1.5}
.is-playfield .actor-card .actor-skill,.is-playfield .specialty-options .specialty-summary{font-size:14px;line-height:1.5}
.is-playfield .actor-card .specialty-heading b{font-size:16px}
.is-playfield .actor-card .actor-heading h3{font-size:20px}
.is-playfield .actor-heading span,.is-playfield .actor-actions button{font-size:14px;line-height:1.5}
.is-playfield .specialty-options .specialty-confirm{font-size:15px}
.is-playfield .specialty-status{font-size:13px;line-height:1.5}
.is-playfield .slot>span{font-size:15px}.is-playfield .slot small{font-size:12px;line-height:1.5}
#detail-body .detail-specialties p b,#detail-body .detail-specialties p span{font-size:15px;line-height:1.55}
#detail-body .skill-sections dd{font-size:15px;line-height:1.55}
.character-frame{display:inline-block;position:relative;overflow:hidden;background:#eaddc1;border-radius:4px;isolation:isolate;pointer-events:none;flex:none}
.character-avatar{width:64px;height:64px}.character-bust{width:96px;height:96px}
.character-frame img,.bench .character-frame img{position:absolute;left:50%;top:50%;width:calc(100% * var(--crop-zoom));height:auto;max-width:none;max-height:none;transform:translate(calc(-1 * var(--crop-x)),calc(-1 * var(--crop-y)));object-fit:contain;filter:none;pointer-events:none}
.character-bust[data-framing=mentor] img.existing-avatar{object-fit:contain!important}
.character-frame img.existing-avatar,.bench .character-frame img.existing-avatar{inset:0;width:100%;height:100%;object-fit:cover;transform:none}
.is-playfield .bench{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.is-playfield .bench button{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;max-width:none;width:100%;font-size:13px;line-height:1.5;padding:5px 2px}
.is-playfield .bench button.selected{outline:2px solid #87502e;outline-offset:1px}
.is-playfield .bench button span:not(.character-frame){white-space:normal}
.actor-heading>.character-frame{margin-right:6px}.actor-heading>div{flex:1;min-width:0;align-items:start;flex-direction:column}
.actor-heading>button{align-self:flex-start;flex:none}
.paper-event img[src$="mage-charm.svg"]{animation:charm-unfold .65s ease-out}
.fx-charm{animation:charm-paper .65s ease-out}
@keyframes charm-unfold{from{transform:scale(.35) rotate(-15deg);opacity:.4}to{transform:scale(1) rotate(0);opacity:1}}
@keyframes charm-paper{35%{filter:drop-shadow(0 0 9px #e2b877)}to{filter:none}}
@media(max-width:350px){
 .route-preview{grid-template-columns:minmax(0,1fr)}
 .route-teaser>span{display:block}.route-teaser b{font-size:15px}
 .character-avatar{width:56px;height:56px}
 .is-playfield .recruit-tools{grid-template-columns:auto minmax(0,1fr)}
 .is-playfield .recruit-tools .shop-next{grid-column:1/-1}
 .is-playfield .actor-card .specialty-options{grid-template-columns:minmax(0,1fr)}
 .is-playfield .product-actions{flex-wrap:wrap}.is-playfield .product-actions button{flex:1 1 auto}
 .is-playfield .prep-tabs{gap:3px}.is-playfield .prep-tabs button{padding-inline:3px}
}
@media(min-width:900px){
 .is-playfield .shell:has(.formation-view,.recruit-view){max-width:1480px;width:calc(100% - 32px)}
 .is-playfield .formation-view,.is-playfield .recruit-view{max-width:none}
 .is-playfield .formation-view{grid-template-columns:minmax(0,1.35fr) minmax(360px,1fr);gap:10px 24px}
 .is-playfield .formation-view>.formation{align-self:stretch;grid-template-rows:repeat(2,minmax(240px,1fr))}
 .is-playfield .bench{grid-template-columns:repeat(5,minmax(0,1fr))}
 .is-playfield .bench .character-avatar{width:48px;height:48px}
 .is-playfield .actor-heading .character-bust{width:64px;height:64px}
 .is-playfield .actor-card .specialty-options .paper-specialty{padding:8px;gap:4px}
 .is-playfield .formation-view .slot img{height:clamp(190px,27svh,300px);width:clamp(135px,19svh,210px)}
 .is-playfield .formation-view .slot{min-height:clamp(220px,30svh,330px)}
 .is-playfield .formation-view .slot img{height:clamp(170px,24svh,270px);width:clamp(120px,17svh,190px)}
 .is-playfield .formation-view .actor-card{position:relative;inset:auto;transform:none;width:100%;max-height:none;margin:0;padding:12px;box-shadow:1px 2px 0 #ab8d5e66;animation:none}
 .is-playfield .actor-card .actor-heading{position:static;margin:0 0 8px;padding:0 0 8px}
 .is-playfield .actor-actions{position:static;margin:10px 0 0;padding:8px 0 0}
 .is-playfield.actor-open{padding-bottom:0}
 .is-playfield .formation-view .prep-context{gap:10px}
 .is-playfield .prep-context .skill-preview{display:none}
 .is-playfield .recruit-view .product-card{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:12px 24px;align-items:center;padding:16px}
 .is-playfield .recruit-view .product-title{grid-column:1/-1;margin:0}
 .is-playfield .recruit-view .product-art{grid-column:1;grid-row:2/5;height:clamp(410px,calc(100svh - 240px),760px);margin:0}
 .is-playfield .recruit-view .shop-skill-preview{grid-column:2;grid-row:2;align-self:end;margin:0}
 .is-playfield .recruit-view .route-preview{grid-template-columns:minmax(0,1fr);gap:12px}
 .is-playfield .recruit-view .core-skill{font-size:16px;line-height:1.55;margin-bottom:16px}
 .is-playfield .recruit-view .route-teaser b{font-size:17px}.is-playfield .recruit-view .route-teaser>span>span{font-size:16px;line-height:1.55}
 .is-playfield .recruit-view .product-actions{grid-column:2;grid-row:3;align-self:start;flex-direction:column;align-items:stretch;margin:0}
 .is-playfield .product-actions .paper-ticket{min-width:0;width:100%}.is-playfield .recruit-view .duplicate-hint{grid-column:2;grid-row:4}
}
@media(min-width:700px){
 .is-playfield .product-art{background-image:linear-gradient(90deg,#f6ead330,#f6ead310 50%,#f6ead330),url('assets/hd/shop.webp')}
 .is-playfield .arena{background-image:linear-gradient(#dfd5bdc7,#dfd5bdc7),url('assets/hd/arena.webp')}
}
@media(prefers-reduced-motion:reduce){.paper-event img[src$="mage-charm.svg"],.fx-charm{animation:none}}

/* User steering: all shop route names and effects return to the second level. */
@media(min-width:900px){
 .is-playfield .recruit-view .product-card{display:block}
 .is-playfield .recruit-view .product-art{height:clamp(410px,calc(100svh - 320px),760px);margin:8px 0}
 .is-playfield .recruit-view .product-actions{display:flex;flex-direction:row;justify-content:center;gap:12px;margin:8px 0 0}
 .is-playfield .product-actions .paper-ticket{width:auto;min-width:280px}
 .is-playfield .recruit-view .product-actions .paper-secondary{min-width:150px}
}