/* Non-critical styles loaded after first paint.
   Critical CSS (layout, loading overlay, scrollbar, reduced-motion) stays inline. */

/* Toast + confetti */
.toast{
  position:fixed;top:calc(var(--site-nav-h) + env(safe-area-inset-top) + 12px);left:50%;transform:translate(-50%,-8px) scale(.96);
  background:var(--surface);border:1px solid var(--line-strong);
  border-radius:var(--radius-lg);padding:var(--space-2) var(--space-3);text-align:center;z-index:var(--z-toast);
  opacity:0;pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease);
  box-shadow:0 12px 32px rgba(0,34,68,.18);
  max-width:min(420px,calc(100vw - 32px));
}
.toast.on{opacity:1;transform:translate(-50%,0) scale(1)}
.share-sheet[hidden]{display:none!important}
.share-sheet{
  position:fixed;inset:0;z-index:var(--z-share);
  display:flex;align-items:center;justify-content:center;
  padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));
  box-sizing:border-box;
}
.share-sheet-backdrop{
  position:absolute;inset:0;background:rgba(0,18,40,.62);
}
.share-sheet-panel{
  position:relative;z-index:1;
  width:min(440px,100%);max-height:min(88dvh,720px);overflow:auto;
  background:rgba(8,24,44,.92);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.22);border-radius:22px;
  padding:22px 18px 18px;color:#fff;
  box-shadow:0 18px 48px rgba(0,0,0,.35);
}
.share-sheet-close{
  position:absolute;top:10px;right:10px;
  appearance:none;border:0;background:transparent;color:#E8EEF4;
  min-height:44px;min-width:44px;padding:8px;cursor:pointer;
  font-family:var(--font-body);font-size:13px;font-weight:600;
}
.share-sheet-kicker{
  margin:0 36px 0 0;text-align:center;color:#FB4F14;
  font-family:"Oswald",var(--font-display),sans-serif;
  font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
}
.share-sheet-panel h2{
  margin:8px 36px 0 0;text-align:center;
  font-family:"Oswald",var(--font-display),sans-serif;
  font-size:clamp(1.4rem,4vw,1.85rem);font-weight:700;color:#fff;
}
.share-sheet-sub{margin:8px 0 16px;text-align:center;color:#E8EEF4;font-size:14px;line-height:1.45}
.share-sheet-url{
  margin:0 0 16px;padding:12px 14px;text-align:center;
  border:1px solid rgba(255,255,255,.16);border-radius:12px;
  background:rgba(0,0,0,.22);color:#C5D4E0;
  font-size:13px;font-weight:600;line-height:1.45;word-break:break-all;user-select:all;
}
.share-native{
  width:100%;margin-bottom:12px;background:#d2410d;border-color:#d2410d;color:#fff;
}
.share-native:hover:not(:disabled){background:#FF6A33;border-color:#FF6A33;color:#fff}
.share-grid{
  display:grid;grid-template-columns:1fr;gap:8px;
}
.share-sheet-hint{margin:12px 0 0;text-align:center;color:#9FB0C0;font-size:12px;line-height:1.5}
.share-target{
  appearance:none;cursor:pointer;
  min-height:44px;padding:10px 12px;border-radius:12px;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);
  color:#fff;font-family:var(--font-body);font-size:13px;font-weight:600;
  text-align:center;line-height:1.25;
}
.share-target:hover{background:rgba(255,255,255,.14)}
.site-page-body{max-height:56vh;overflow-y:auto;margin-top:8px}
.site-page-body p{margin:0 0 12px;color:#E8EEF4;font-size:14px;line-height:1.6;text-align:left}
.share-sheet-status{
  min-height:1.35em;margin:12px 0 0;text-align:center;
  color:#FB4F14;font-size:13px;font-weight:600;line-height:1.4;
}
.tnl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:var(--space-1);font-weight:600}
.tnn{font-family:var(--font-display);font-size:1.35rem;font-weight:700}
@keyframes cfl{0%{transform:translateY(-20px) rotate(0);opacity:1}100%{transform:translateY(110vh) rotate(720deg);opacity:0}}

/* Tablet + narrow laptop */
@media(max-width:900px){
  .draft-body{max-width:100%;padding:var(--space-2)}
  #S1.picking .draft-stage{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  }
  .cards{grid-template-columns:repeat(2,minmax(0,1fr));max-width:100%;padding:0 var(--gap) var(--gap)}
  #Ssch.on{padding:var(--space-4) var(--space-2)}
  .sch-card{max-width:100%;flex:1 1 220px}
  .trat,.gw{max-width:100%;width:100%}
  .gw{padding:0 var(--space-2) var(--space-4);box-sizing:border-box}
}
@media(max-width:700px){
  #S1.picking .draft-stage{
    grid-template-columns:minmax(0,1fr);
    justify-items:stretch;
    gap:var(--space-2);
    min-height:0;
  }
  #S1.picking .pick-dock{width:100%;max-height:none;overflow:visible;z-index:3}
  .draft-board .browser-list,.browser-list{max-height:min(42vh,20rem)}
}

/* ~768px tablet refinements */
@media(max-width:768px){
  #S1 .dhdr{flex-wrap:wrap;gap:var(--gap);padding:var(--space-2)}
  #S1 .dpos{font-size:clamp(1.05rem,4vw,1.35rem);overflow-wrap:anywhere}
  .spin-panel{max-width:100%}
  .player-browser{border-radius:var(--radius)}
  .stat-rules{margin:var(--gap-lg);max-width:calc(100% - 24px)}
  .toast{padding:var(--space-2) var(--space-3)}
  .tnn{font-size:clamp(1.1rem,4vw,1.35rem);overflow-wrap:anywhere}
}

/* Phone (~375-640) */
@media(max-width:640px){
  :root{
    --space-5:36px;
    --space-6:48px;
    --gap:10px;
  }
  #S0 .cover-scene{padding:16px 12px 20px}
  #S0 .cover-pitch{font-size:14px}
  .draft-board{
    display:flex;flex-direction:column;
  }
  .draft-board .clipboard,.draft-board .player-browser{max-height:none;overflow:visible}
  .step-rail-inner{gap:2px;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;padding-bottom:2px}
  .step-rail span{flex:0 0 auto;padding:10px 12px;min-height:44px;display:inline-flex;align-items:center}
  #Ssch.on{padding:var(--space-3) 16px}
  .sch-hdr{padding:0 4px}
  .sch-card{flex:1 1 100%;max-width:100%;padding:var(--space-3)}
  .sch-btn-lbl{min-height:48px;width:100%;box-sizing:border-box}
  .clipboard-meta{gap:var(--gap);font-size:11px}
  .era-board-col{padding:16px 10px}
  .spin-card-val{font-size:clamp(1.05rem,4.6vw,1.45rem)}
  .spin-go{min-width:0;min-height:48px;padding:12px 20px;font-size:var(--text-sm)}
  .browser-toolbar-top{padding:12px 10px 8px;gap:8px}
  .browser-search-wrap{min-width:100%;flex:1 1 100%}
  .browser-sort{width:100%;max-width:100%}
  .browser-head,.browser-row{grid-template-columns:minmax(0,1fr);gap:8px;padding:12px 10px}
  .browser-head-stats,.browser-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
  .browser-head{font-size:9px;letter-spacing:.04em}
  .browser-stat-val{font-size:12px}
  .browser-id{font-size:13px}
  .browser-list{padding:10px;gap:10px;max-height:min(48vh,22rem)}
  .def-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards{grid-template-columns:minmax(0,1fr);gap:var(--gap);padding:0 var(--gap) var(--gap)}
  .cards-scroll{max-height:min(58vh,520px)}
  .egrd{grid-template-columns:1fr}
  .ei{min-width:0}
  .ein,.eit{overflow-wrap:anywhere}
  #S3 .end-actions{width:100%;flex-direction:column;align-items:stretch}
  #S3 .end-actions .btn{width:100%;min-height:48px}
  .sb-matchup{grid-template-columns:1fr}
  .sb-actions{flex-direction:column;align-items:stretch}
  .sb-actions .btn,.sb-actions .spin-go{width:100%;min-height:48px}
  .trv{font-size:clamp(32px,10vw,42px)}
  .shdr{padding:var(--space-2)}
  .sttl{overflow-wrap:anywhere}
}

/* Extra-narrow phones */
@media(max-width:400px){
  #S0 .cover-headline{font-size:1.7rem}
}
/* RESPONSIVE_PASS_v1 */