/* A gallery spread: use the screen's width to keep art and details readable. */
.detail-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}
.detail-toolbar .screen-heading{margin:0}.detail-toolbar .screen-subtitle{display:none}
.detail-toolbar .card-pager{margin:0}.detail-toolbar>.game-button{font-size:16px;min-height:48px;padding:8px 18px}
.detail-screen>.button-row{margin:18px 0 0;display:flex;justify-content:center;gap:18px}
.detail-screen>.button-row .game-button{min-height:54px;min-width:210px;font-size:20px;padding:9px 22px}
@media screen and (min-width:900px){
 body:is([data-screen="card"],[data-screen="technique"]){padding:0}
 body:is([data-screen="card"],[data-screen="technique"]) .game-shell{max-width:1440px;border-width:0 2px;border-radius:0}
 body:is([data-screen="card"],[data-screen="technique"]) .topbar{height:46px;min-height:46px;padding:5px 18px}
 body:is([data-screen="card"],[data-screen="technique"]) .brand{font-size:25px;letter-spacing:-1px}
 body:is([data-screen="card"],[data-screen="technique"]) .brand small,body:is([data-screen="card"],[data-screen="technique"]) .save-status{display:none}
 body:is([data-screen="card"],[data-screen="technique"]) .sound-toggle{font-size:12px;min-height:32px;padding:4px 12px}
 body:is([data-screen="card"],[data-screen="technique"]) .main-nav{height:43px;padding:4px 12px 0;gap:8px}
 body:is([data-screen="card"],[data-screen="technique"]) .main-nav a{min-height:36px;padding:4px 12px;font-size:13px;border-width:2px;gap:8px}
 body:is([data-screen="card"],[data-screen="technique"]) .main-nav a span{font-size:18px;line-height:1}
 body:is([data-screen="card"],[data-screen="technique"]) main{padding:12px 24px 16px;min-height:0}
 body:is([data-screen="card"],[data-screen="technique"]) footer{display:none}
 .detail-screen{height:calc(100dvh - 117px);min-height:463px;display:grid;grid-template-rows:68px minmax(0,1fr) 54px;gap:12px}
 .detail-toolbar{margin:0;min-width:0}.detail-toolbar .screen-title{font-size:29px;-webkit-text-stroke-width:4px}
 .detail-toolbar .card-pager{gap:18px;grid-template-columns:80px auto 80px}
 .detail-toolbar .card-pager-step{width:80px;height:58px;border-radius:17px}.detail-toolbar .pager-arrow{width:38px;height:38px}
 .detail-toolbar .card-pager-position{font-size:17px;min-width:62px}.detail-toolbar .card-pager-position b{font-size:29px}
 .detail-screen>.button-row{margin:0;align-items:stretch}
 .detail-layout{min-height:0;grid-template-rows:minmax(0,1fr);gap:22px;grid-template-columns:minmax(230px,1fr) minmax(0,1.05fr) minmax(280px,1.05fr)}
 .detail-card{height:100%;min-height:0;display:flex;align-items:center;justify-content:center;max-width:none}
 .detail-card .gakumon-card{height:100%;max-height:510px;max-width:100%;width:auto;aspect-ratio:.68;flex:none}
 .detail-card .card-name{font-size:21px}.detail-card .card-id{font-size:20px}
 .detail-stats{padding:19px}.detail-stats>.panel-title{font-size:23px}.ability-meter-label{font-size:18px}
 .detail-info{min-width:0}.detail-info .clan-banner{font-size:22px;margin-bottom:8px;padding:8px}
 .detail-info .rank-badge{font-size:14px;margin-bottom:8px;padding:5px}
 .detail-info .cream-panel{padding:16px}.detail-info h3{font-size:18px;margin-bottom:7px}
 .detail-info .cream-panel>p{font-size:16px;line-height:1.65}.detail-info .skill-box{font-size:14px;line-height:1.65;margin-top:10px;padding:10px}
 .detail-info .skill-box small{font-size:13px}.detail-info .hand-icon{width:29px;height:29px;vertical-align:middle}
 .technique-screen .technique-detail{width:100%;max-width:1100px;height:100%;min-height:0;margin:0 auto}
 .technique-detail .tech-card{height:100%;max-width:none;width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);grid-template-rows:64px 25px minmax(50px,1fr) auto 93px 28px;column-gap:26px;padding:16px 22px;transform:none;box-shadow:0 5px #566768,0 9px 17px #1a393526}
 .technique-detail .tech-card header{grid-column:1/-1;grid-row:1;min-height:0;padding:9px 115px 9px 70px}
 .technique-detail .tech-card h3{font-size:28px;line-height:1.25}.technique-detail .tech-category{font-size:12px;margin-bottom:3px}
 .technique-detail .tech-number{font-size:11px;top:10px;right:0}.technique-detail .tech-hand{width:55px;height:55px;top:0;left:0}.technique-detail .tech-hand .hand-icon{width:49px;height:49px}
 .technique-detail .tech-art{grid-column:1;grid-row:2/7;height:auto;min-height:0;margin:7px 0 4px;border:2px solid #d9bd6b;border-radius:10px;background:#183139}
 .technique-detail .tech-illustration{object-fit:contain}
 .technique-detail .tech-rarity{grid-column:2;grid-row:2;font-size:13px;padding:6px 0 0}.technique-detail .tech-rarity span:last-child{font-size:10px}
 .technique-detail .tech-description{grid-column:2;grid-row:3;min-height:0;padding:9px 0;font-size:clamp(24px,2.3vw,29px);font-weight:700;line-height:1.65;align-self:center}
 .technique-detail .tech-trigger{grid-column:2;grid-row:4;font-size:18px;line-height:1.5;padding:12px 10px;border-radius:9px;border:1px solid #ddc89166}
 .technique-detail .tech-bottom{grid-column:2;grid-row:5;gap:18px;padding:12px 0 4px}
 .technique-detail .tech-compatibility>small{font-size:13px}.technique-detail .tech-compatibility>div{gap:4px;margin-top:6px}.technique-detail .tech-compatibility span small{font-size:13px;line-height:1.6}.technique-detail .tech-compatibility span b{font-size:24px;line-height:1.4}
 .technique-detail .tech-value{width:86px;height:86px}.technique-detail .tech-value small{font-size:10px}.technique-detail .tech-value b{font-size:37px}
 .technique-detail .tech-owned{grid-column:2;grid-row:6;margin:0;padding:8px 0 0;font-size:14px;border:0;text-align:right}
}
@media screen and (min-width:900px) and (max-height:690px){
 .detail-screen{grid-template-rows:58px minmax(0,1fr) 50px;gap:10px}
 .detail-toolbar .screen-title{font-size:26px}.detail-toolbar .card-pager-step{height:50px}
 .detail-screen>.button-row .game-button{min-height:50px;font-size:18px}
 .detail-stats{padding:15px}.detail-stats>.panel-title{font-size:21px;margin-bottom:14px}.ability-meter+.ability-meter{margin-top:14px}
 .detail-info .cream-panel{padding:11px}.detail-info .cream-panel>p{font-size:14px;line-height:1.5}.detail-info .skill-box{font-size:13px;line-height:1.6;margin-top:8px;padding:8px}
 .detail-info .clan-banner{font-size:19px;padding:5px}.detail-info h3{font-size:16px;margin-bottom:4px}
 .technique-detail .tech-card{grid-template-rows:55px 22px minmax(44px,1fr) auto 82px 22px;padding:12px 18px;column-gap:22px}
 .technique-detail .tech-card header{padding-top:4px}.technique-detail .tech-card h3{font-size:25px}.technique-detail .tech-hand{width:48px;height:48px}.technique-detail .tech-hand .hand-icon{width:43px;height:43px}
 .technique-detail .tech-description{font-size:22px;line-height:1.6;padding:6px 0}.technique-detail .tech-trigger{font-size:16px;padding:8px}
 .technique-detail .tech-bottom{padding:6px 0 0;gap:12px}.technique-detail .tech-value{width:73px;height:73px}.technique-detail .tech-value b{font-size:32px}.technique-detail .tech-owned{font-size:13px;padding-top:3px}
}
@media screen and (max-width:899px){
 .detail-toolbar{flex-wrap:wrap;justify-content:center;gap:14px}.detail-toolbar .screen-heading{width:100%}.detail-toolbar>.game-button{min-width:100px}
 .detail-screen>.button-row{flex-wrap:wrap;gap:12px}.detail-screen>.button-row .game-button{flex:1;min-width:160px;font-size:18px}
}
.technique-detail .tech-description{color:#fff8e1}
@media screen and (max-width:899px){.technique-detail .tech-description{font-size:20px;line-height:1.7;font-weight:700;padding:18px}}
@media print{.detail-toolbar{display:none!important}}
.detail-info .character-story,.technique-detail .tech-description{font-family:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN",Meiryo,sans-serif;font-weight:700}
.tech-value small{display:block;white-space:nowrap;word-break:keep-all;overflow-wrap:normal;letter-spacing:0;text-align:center;line-height:1.15}
.tech-value small span{display:block}
.technique-detail .tech-value{flex-shrink:0;padding:5px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.technique-detail .tech-value small{font-size:11px;line-height:1.1}
.technique-detail .tech-value b{line-height:1;font-size:34px}
@media(min-width:900px) and (max-height:690px){.technique-detail .tech-value small{font-size:10px;line-height:1.1}.technique-detail .tech-value b{font-size:30px}}
.detail-info .character-story{background:#fffce8;border:2px solid #e1c16d;border-radius:20px;padding:20px 22px;color:#294e4b}
.detail-info .character-story h3{font-size:20px;line-height:1.5;color:#816031;margin:0 0 12px}
.detail-info .character-story .character-description{font-size:22px;line-height:1.8;letter-spacing:.025em;margin:0}
.character-description>span{display:block;margin-bottom:8px}.character-description>span:last-child{margin:0}
.character-facts{margin-top:16px;border-top:2px dashed #d4c18d;padding-top:10px}.character-facts>summary{cursor:pointer;min-height:44px;display:list-item;align-content:center;font-size:18px;color:#286457}.character-facts .skill-box{font-size:16px;line-height:1.7}
@media(min-width:900px){.companion-screen .detail-layout{grid-template-columns:minmax(215px,.83fr) minmax(0,.98fr) minmax(350px,1.26fr)}.detail-info .character-story{padding:16px 20px}.detail-info .character-story .character-description{font-size:clamp(19px,1.75vw,23px);line-height:1.75}.detail-info .character-story h3{font-size:20px;margin-bottom:9px}.character-description>span{margin-bottom:6px}.character-facts{margin-top:10px;padding-top:6px}.companion-screen:has(.character-facts[open]){height:auto;min-height:calc(100dvh - 117px)}.companion-screen:has(.character-facts[open]) .detail-layout{min-height:420px}}
@media(min-width:900px) and (max-height:690px){.detail-info .character-story{padding:10px 14px}.detail-info .character-story h3{font-size:18px;margin-bottom:6px}.detail-info .character-story .character-description{font-size:19px;line-height:1.6}.character-description>span{margin-bottom:4px}.character-facts>summary{font-size:17px;min-height:40px}.character-facts{margin-top:7px;padding-top:4px}}