/* Keep the cost next to the title and the hand directly beneath it. */
#deck[data-workshop="deck"] .shead{display:flex;align-items:center;justify-content:flex-start;gap:24px;flex-wrap:wrap;text-align:left}
#deck .shead h1{margin:0;flex:none}
#deck .shead .manabar{width:clamp(280px,32vw,440px);max-width:100%;height:42px;margin:0;box-sizing:border-box}
#deck .shead .manabar .mtrack{min-width:48px}
/* Every workshop occupies the same four rows. Only the lower tray scrolls. */
body.pc #deck[data-workshop] .dscroll{--hand-gap:clamp(14px,1.55vw,28px);container-type:size;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:42px var(--hand-height,224px) 48px minmax(0,1fr);gap:var(--shell-gap);align-content:start;overflow:hidden}
body.pc #deck .dscroll>:is(.shead,.topzone,.modes,.work),body.pc #deck #deckrow{grid-column:1;min-width:0;min-height:0}
body.pc #deck[data-workshop="deck"] .shead{grid-row:1;min-height:42px}
body.pc #deck[data-workshop="deck"] #deckrow{grid-row:2;height:100%;align-items:flex-start;flex:none}
body.pc #deck[data-workshop] .modes{grid-column:1;grid-row:3;width:100%;max-width:none;margin:0;gap:var(--shell-gap)}
body.pc #deck .mode{gap:5px}
body.pc #deck .mode .mimg{width:30px;height:30px}
body.pc #deck .mode::after{font-size:15px}
body.pc #deck .work{grid-row:4;align-self:stretch;overflow:hidden;min-height:0;display:flex!important;flex-direction:column;padding:12px}
body.pc #deck[data-workshop="deck"] .work:not(#work-deck),body.pc #deck[data-workshop="burn"] .work:not(#work-burn),body.pc #deck[data-workshop="fuse"] .work:not(#work-fuse),body.pc #deck[data-workshop="shards"] .work:not(#work-shards){display:none!important}
body.pc #deck .work>.shell-reserve{flex:none}
body.pc #deck .work>.strip,body.pc #deck #shardrows{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#626f87 #141c2b;overscroll-behavior:contain;touch-action:pan-y;padding:12px 10px 8px}
body.pc #deck .work>.strip::-webkit-scrollbar{display:block;width:8px}
body.pc #deck .work>.strip::-webkit-scrollbar-thumb{background:#626f87;border-radius:8px}
body.pc #deck .striptrack,body.pc #strip .striptrack{flex-wrap:wrap;align-content:flex-start;transform:none!important;will-change:auto;gap:13px;row-gap:16px}
body.pc #deck .shell-strip-nav{display:none}
body.pc #deck :is(#top-burn,#top-fuse,#top-shards),body.pc #deck #top-burn:has(.shell-frame),body.pc #deck #top-fuse:has(.shell-frame){grid-row:1/3;height:100%!important;min-height:0;padding:0;box-sizing:border-box;overflow:hidden;container-type:size}
body.pc #deck[data-workshop="burn"] #top-burn,body.pc #deck[data-workshop="fuse"] #top-fuse .fusecol{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,300px);gap:24px;align-items:center;justify-items:center}
body.pc #deck #top-fuse .fusecol{height:100%;min-height:0}
body.pc #deck :is(.burnwrap,.fuserow){height:100%;min-height:0;align-items:center}
body.pc #deck #top-burn .burnwrap{width:min(720px,100%);padding:0;gap:20px;grid-template-columns:minmax(0,1fr) 60px minmax(0,1fr)}
body.pc #deck #top-fuse .fuserow{width:min(980px,100%);padding:0;gap:15px}
body.pc #deck :is(#top-burn,#top-fuse) .bslot{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;container-type:size;min-height:0}
body.pc #deck :is(#top-burn,#top-fuse) .ritual-shell{width:min(100%,calc(max(70px,100cqh - 88px)*5/7));padding:0;background:none}
body.pc #deck :is(#top-burn,#top-fuse) .ucard{width:100%;aspect-ratio:5/7;display:flex;flex-direction:column;min-height:0}
body.pc #deck :is(#top-burn,#top-fuse) .ucard .art{flex:1;height:auto!important;min-height:0}
body.pc #deck :is(#top-burn,#top-fuse) .ucard.bempty .lvbar{display:none}
body.pc #deck :is(#top-burn,#top-fuse) .ritual-shell:has(.bempty)::after{border-width:12px}
body.pc #deck .wk-summary{width:100%;max-height:100%;overflow-y:auto;flex-direction:column;align-items:stretch;gap:12px;padding:16px}
body.pc #deck .wk-summary .workshop-cost{width:100%;flex:none;min-height:44px}
body.pc #deck .wk-summary-copy p{margin:6px 0 0}
body.pc #deck #top-shards{justify-content:center;gap:30px}
body.pc #deck #top-shards .wk-shards{max-height:100%;overflow-y:auto}
body.pc #deck .shead .manabar{height:42px;gap:12px;padding:6px 12px}
body.pc #deck .shead .manabar .ml{font-size:15px}
body.pc #deck .shead .manabar .mv{font-size:17px}
@media(min-width:1000px) and (max-height:800px){
 body.pc #deck[data-workshop] .dscroll{gap:12px;padding:12px}
 body.pc #deck .work{padding:6px 12px}
 body.pc #deck .work>.strip{padding-top:8px}
}
@media(max-width:999px){
 #deck .shead{gap:10px;padding:12px!important}
 #deck .shead h1{font-size:23px}
 #deck .shead .manabar{width:auto;flex:1;min-width:125px;padding:5px 8px;gap:8px;height:36px}
 #deck .shead .manabar .mtrack{display:none}
 #deck .shead .manabar .ml{font-size:0;gap:0}
 #deck .shead .manabar .cdot{display:none}
 #deck .shead .manabar .ml::before{content:'';display:block;width:23px;height:26px;background:url('illustrated/mana-drop.webp') center/contain no-repeat}
 #deck .shead .manabar .mv{margin-left:auto;font-size:15px}
}
@media(max-width:999px) and (max-height:560px) and (min-width:600px){
 #deck[data-workshop="deck"] .dscroll{grid-template-rows:40px minmax(0,1fr) 48px;gap:8px 16px}
 #deck[data-workshop="deck"] .shead{display:flex!important;grid-column:1;grid-row:1;padding:0!important;gap:8px}
 #deck[data-workshop="deck"] .shead h1{font-size:18px}
 #deck[data-workshop="deck"] #top-deck{grid-row:2/4}
 #deck[data-workshop="deck"] #work-deck{grid-row:1/3}
 #deck[data-workshop="deck"] .modes{grid-row:3}
}