/* Desktop keeps the existing expanded layout. Mobile uses native disclosures. */
.mobile-fold{min-width:0;border:0;padding:0;margin:0}
.mobile-fold>summary{display:none}
.mobile-fold-content{display:contents}
@media(max-width:850px){.draft-layout>[data-mobile-fold="build"]{order:2}}

@media(max-width:760px){
  .draft-layout>[data-mobile-fold="build"]{order:2}
  body{padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))}
  body .shell{padding-top:8px;padding-bottom:0;width:calc(100% - 20px)}
  body .topbar{display:flex;flex-wrap:nowrap;gap:8px;padding:10px;margin-bottom:8px}
  body .topbar .brand{min-width:0;gap:8px;flex:1}
  body .topbar .brand>div,body .topbar .brand>span{min-width:0}
  body .topbar .brand-logo{width:36px;height:36px;flex-shrink:0}
  body .topbar .brand-name,body .topbar .brand b{font-size:1.125rem;line-height:1.15;overflow-wrap:anywhere}
  body .topbar .brand-sub,body .topbar .brand small{font-size:.75rem;line-height:1.25}
  body .topbar .account-button{max-width:116px;min-height:44px;margin-left:0;padding:6px 8px;flex-shrink:0;overflow-wrap:anywhere}
  body .mobile-primary-nav{padding:5px;gap:2px;border-radius:16px}
  body .mobile-primary-nav a{min-height:48px;padding:3px 2px;font-size:.875rem;gap:0}
  body .play-context{flex-direction:row;align-items:center;gap:8px;margin:8px 0;padding:6px 10px}
  body .play-context .mode{margin-left:auto;text-align:right;font-size:.875rem}
  body .mode-switch button{min-height:44px;min-width:72px;padding:7px 12px}
  body .game-guide{margin:8px 0;padding:0 10px}
  body .game-guide summary{padding:8px 0;min-height:44px;box-sizing:border-box}
  body .status-row{gap:10px;align-items:center;padding:12px;margin:10px 0}
  body .status-row h1{font-size:clamp(1.375rem,5.5vw,1.75rem);line-height:1.15;margin:5px 0}
  body .status-row .lead{font-size:1rem;line-height:1.4;margin:6px 0 0}
  body .status-row .round-number{font-size:1.4rem;flex-shrink:0}
  body .round-number small{font-size:.75rem}
  body .progress{margin:8px 0 12px}
  body .draft-layout{gap:10px;align-items:start}
  body .pack-stage{min-height:0;padding:10px 4px}
  body .pack-wrap{padding:10px 0}
  body .pack{width:min(220px,66vw);height:290px}
  body .pack-logo{width:90px;height:90px}
  body .pack strong{font-size:2rem}
  body .pack-wrap>p{font-size:.875rem;margin:10px 0 0;line-height:1.4}
  body .rip-button{margin-top:12px;min-height:44px}
  body .reveal-wrap{padding:4px;max-width:100%;box-sizing:border-box}
  body .card{padding:12px;min-width:0;max-width:100%;box-sizing:border-box}
  body .card-head{gap:6px;flex-wrap:wrap}
  body .player{margin:10px 0}
  body .player h2{font-size:1.5rem;line-height:1.15;overflow-wrap:anywhere}
  body .card-body{grid-template-columns:minmax(0,1fr);gap:12px}
  body .card-visualizer{position:static;width:160px;max-width:100%;margin:0 auto 6px}
  /* A grid's implicit auto column can outgrow the compact frame and clip its art. */
  body .card-visualizer .fighter-card,body .card-visualizer .custom-art{grid-template-columns:minmax(0,1fr);min-width:0;max-width:100%;box-sizing:border-box}
  body .card-visualizer .fighter-card>*,body .card-visualizer .custom-art>*{min-width:0;max-width:100%;overflow-wrap:normal;word-break:normal;hyphens:none}
  body .card-visualizer .card-scan{aspect-ratio:5/7}
  body .card-visualizer .custom-art.has-action-photo{grid-template-rows:minmax(32px,auto) minmax(0,1fr) auto!important}
  body .card-visualizer .custom-art-top{gap:4px}
  body .card-visualizer .custom-art .custom-art-top span{min-width:0;max-width:none;flex:1;font-size:clamp(.5rem,5.4cqw,.875rem);letter-spacing:.025em;overflow-wrap:normal;word-break:normal}
  body .card-visualizer .custom-art-top b{flex:none;font-size:clamp(.625rem,6.8cqw,1rem)}
  body .card-visualizer .custom-art-top b small{font-size:clamp(.375rem,3.8cqw,.5rem);letter-spacing:.04em}
  body .card-visualizer .custom-art-name{padding:5px 3px!important}
  body .card-visualizer .custom-art-name small,body .card-visualizer .custom-art-name>span{font-size:.75rem;letter-spacing:0;line-height:1.2}
  body .fighter-card{aspect-ratio:auto;container-type:inline-size}
  body .fighter-card .fighter-portrait{min-height:0;height:auto;aspect-ratio:1}
  body .fighter-card .card-nameplate strong{font-size:clamp(.6875rem,9.2cqw,1rem);line-height:1.2;overflow-wrap:normal;word-break:normal;hyphens:none}
  body .card-visualizer .custom-art .custom-art-name strong{font-size:clamp(.75rem,8.2cqw,1rem)!important;max-width:100%;line-height:1.2;overflow-wrap:normal;word-break:normal;hyphens:none}
  body .fighter-card .card-nameplate{margin:8px 0 0;padding:10px 8px 8px}
  body .fighter-card .card-nameplate span{font-size:clamp(.5rem,6cqw,.65rem);letter-spacing:.04em;line-height:1.2}
  body .card-visualizer .fighter-card .event-edition-badge{margin:6px 0 0;flex-wrap:wrap}
  body .card-visualizer .fighter-card .event-edition-badge>*{min-width:0;max-width:100%;white-space:normal;overflow-wrap:normal;word-break:normal;hyphens:none}
  body .card-visualizer .daily-boost-stamp{max-width:90%;grid-template-columns:minmax(0,1fr);overflow-wrap:normal;word-break:normal;hyphens:none}
  body .card-brand-strip{grid-template-columns:22px minmax(0,1fr);padding:5px;gap:4px;font-size:.75rem}
  body .card-brand-strip>span,body .card-brand-strip>b{min-width:0;overflow-wrap:normal;word-break:normal;white-space:nowrap}
  body .card-brand-strip>span{font-size:clamp(.5rem,6.5cqw,.6875rem);letter-spacing:.02em}
  body .card-brand-strip>b{grid-column:1/-1;text-align:center}
  body .card-brand-strip img{width:22px;height:22px}
  body .fighter-card .card-footer{padding:6px;font-size:.75rem;letter-spacing:0;flex-wrap:wrap}
  body .card-visualizer .card-caption{margin:6px 0 0;font-size:.875rem;line-height:1.4}
  body .card-visualizer .scan-button{min-height:44px;margin:4px 0 0;width:100%}
  body .choice-prompt{margin-bottom:10px}
  body .choice-prompt strong{font-size:1rem}
  body .choice-prompt>span{font-size:.875rem;line-height:1.4}
  body .skill-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  body .skill-list .option-divider{grid-column:1/-1;margin:5px 0}
  body .skill-pick{container-type:inline-size;grid-template-columns:minmax(0,1fr) max-content;gap:5px 5px;min-height:64px;padding:8px;align-items:center}
  body .skill-pick .skill-name{grid-column:1;grid-row:1;min-width:0;font-size:clamp(.6875rem,8cqw,.75rem);letter-spacing:0;line-height:1.2;overflow-wrap:normal;word-break:normal;hyphens:none}
  body .skill-pick .skill-name small{font-size:.75rem;line-height:1.3;margin-top:3px}
  body .skill-pick>b{grid-column:2;grid-row:1;text-align:right;font-size:1rem}
  body .skill-pick .rating-track{grid-column:1;grid-row:2;height:4px;width:100%;min-width:0}
  body .skill-pick .claim-label{grid-column:2;grid-row:2;font-size:.625rem;line-height:1.2;text-align:right;white-space:normal;letter-spacing:0}
  /* Mobile card + stat flow: beside the artwork first, full width below it. */
  body .card-body.mobile-card-flow{display:block}
  body .mobile-card-flow .card-decision{width:auto;min-width:0}
  body .mobile-card-flow .skill-list{display:flow-root}
  body .mobile-card-flow .card-visualizer{float:left;width:min(48%,180px);max-width:180px;margin:4px 12px 12px 4px}
  body .mobile-card-flow .mobile-choice-row{display:flow-root;margin:0 0 8px;min-width:0}
  body .mobile-card-flow .mobile-choice-row>.skill-pick{width:100%;min-width:0;min-height:56px;margin:0}
  body .mobile-card-flow .mobile-choice-row>.option-divider{margin:4px 0;gap:4px;flex-wrap:wrap;overflow-wrap:anywhere}
  body .estimate-note{font-size:.875rem;line-height:1.4;margin:10px 0 0}
  body .slot-reminder,body .division-preview{margin:10px 0;padding:10px 12px;gap:10px}
  body .division-preview p{margin:5px 0;line-height:1.4}
  body .division-preview-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  body .division-preview-list span{padding:8px 6px;font-size:.875rem;min-width:0}
  body .pick-feedback{margin:8px 0;padding:9px 12px;gap:3px}

  body .mobile-fold{margin:8px 0;border:1px solid #42617a;border-radius:10px;background:#101d2c;color:#edf5ff;overflow:hidden}
  body .mobile-fold>summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center;min-height:48px;padding:9px 12px;cursor:pointer;list-style:none;box-sizing:border-box}
  body .mobile-fold>summary::-webkit-details-marker{display:none}
  body .mobile-fold>summary::after{content:'+';grid-column:2;grid-row:1/3;font-size:1.25rem;line-height:1}
  body .mobile-fold[open]>summary::after{content:'−'}
  body .mobile-fold>summary:focus-visible{outline:3px solid #f5d15d;outline-offset:-3px}
  .mobile-fold-label{font-size:.875rem;font-weight:750;line-height:1.3}
  .mobile-fold-context{grid-column:1;font-size:.8125rem;color:#b9cfe0;line-height:1.3}
  .mobile-fold-context:empty{display:none}
  body .mobile-fold>.strategy-panel,body .mobile-fold>.build-board,body .mobile-fold>.cartoon-gallery,body .mobile-fold>.personal-records,body .mobile-fold>.profile-section{margin:0;border:0;border-radius:0;padding:12px;box-shadow:none}
  body .mobile-fold>.profile-section{background:#101d2c}
  body .mobile-fold .build-slot{min-height:48px;padding:7px 0;grid-template-columns:90px minmax(0,1fr) auto}
  body .mobile-fold .board-head{padding-bottom:10px}
  body .mobile-fold .board-note{margin-bottom:0}
  body .card-visualizer .mobile-fold{margin:6px 0;background:transparent;border-color:#71869a;color:#14334c}
  body .card-visualizer .mobile-fold>summary{padding:8px;min-height:44px;grid-template-columns:minmax(0,1fr) auto}
  body .card-visualizer .mobile-fold>p,body .card-visualizer .mobile-fold-content{display:block;padding:8px;margin:0}
  body .home-hero{margin:12px 0;padding:20px 16px}
  body .home-hero h1{font-size:clamp(2rem,9vw,2.8rem);line-height:1}
  body .home-hero .lead{font-size:1rem;line-height:1.45;margin:12px 0}
  body .home-hero-actions{margin-top:16px;gap:8px}
  body .home-hero-actions .action{min-height:46px}
  body .home-hero .saved-run{margin-top:12px;min-height:44px}
  body .destination-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  body .destination-grid article{padding:14px 12px;display:flex;flex-direction:column;align-items:start}
  body .destination-grid h2{font-size:1.125rem;line-height:1.2}
  body .destination-grid p{font-size:.875rem;line-height:1.4}
  body .destination-grid .action{margin-top:auto;width:100%;padding:9px 6px;font-size:.875rem}
  body .profile-links{display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 0}
  body .profile-links a{min-height:44px;font-size:.875rem;padding:4px 0}
  body .profile-overview{gap:8px;margin:12px 0}
  body .profile-overview>div{padding:12px}
  body .result-hero{padding:20px 14px;margin-bottom:12px}
  body .hero-war,body .hero-score{font-size:4.5rem;margin:12px 0}
  body .hero-war span,body .hero-score span{font-size:.875rem;margin-top:8px}
  body .career-record{font-size:1.75rem}
  body .career-strip{gap:8px;padding:10px 0;margin:12px 0}
  body .result-hero .actions,body .result-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:14px}
  body .result-hero .actions>.action,body .result-actions>.action{min-width:0;width:100%;padding:10px 8px;min-height:46px;font-size:.875rem}
  body .result-tabs{margin:10px 0;padding:4px;gap:4px;overflow-x:auto;flex-wrap:nowrap;border-radius:12px}
  body .result-tabs button{padding:9px 10px;font-size:.875rem;min-height:44px}
  body .depth-report{padding:14px;margin:10px 0}
  body .depth-metrics{margin:12px 0}
  body .depth-metrics>div{padding:10px}
  body .ltd-collection-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  body .ltd-collection-series{margin:16px 0 20px}
  body .ltd-collection-series>header{margin-bottom:12px;padding-bottom:8px}
  body .collection-card-meta{padding:10px;gap:6px;flex-wrap:wrap}
  body .collection-card-meta h2,body .collection-card-meta h3{font-size:1.0625rem;line-height:1.2;overflow-wrap:anywhere}
  body .collection-card-meta>div>small,body .collection-card>p{font-size:.875rem}
  body .collection-card-meta>b{font-size:1.125rem}
  body .collection-card>p{padding:0 10px 12px;min-height:0}
  body .collection-card-art>span{top:8px;right:8px;padding:5px;font-size:.75rem}
  body .ranked{padding:12px 10px}
  body .h2h-topbar{margin-bottom:12px;padding-bottom:10px}
  body .h2h-brand img{width:40px;height:40px}
  body .ranked>h1{font-size:1.75rem;margin:6px 0}
  body .ranked>.lead{font-size:1rem;line-height:1.4;margin:8px 0}
  body .ranked .competitive-identity{grid-template-columns:1fr;gap:10px;padding:14px;margin:12px 0}
  body .ranked .competitive-identity:not(.profile-focus)>div:first-child{display:none}
  body .competitive-identity h2{font-size:1.2rem}
  body .competitive-identity p{margin:6px 0;font-size:.875rem;line-height:1.4}
  body .competitive-identity .competitive-account{min-height:0;padding:10px}
  body .competitive-identity .stat-grid{margin:0;padding:10px;gap:8px}
  body .h2h-tabs,body .ranking-types{margin:10px 0;padding:4px;gap:4px}
  body .ranked .ranked-card{padding:14px}
  body .ranked-card h2{font-size:1.25rem;margin:0 0 10px}
  body .ranked-grid{gap:10px}
  body .site-footer{margin-top:18px;padding:12px 0}
  body .site-footer nav{gap:4px 12px}
}
/* Narrow phones give the card its own row so no label has to split. */
@media(max-width:389px){
  body .mobile-card-flow .card-visualizer{float:none;width:min(200px,100%);max-width:200px;margin:4px auto 12px}
}
@media(max-width:359px){
  body .topbar .brand-logo{width:30px;height:30px}
  body .topbar .brand-name,body .topbar .brand b{font-size:1rem}
  body .topbar .account-button{max-width:104px}
  body .skill-list,body .destination-grid,body .ltd-collection-grid{grid-template-columns:1fr}
  body .skill-pick{min-height:48px}
  body .play-context{flex-wrap:wrap}
}