/* Project Legend V0.42.0 — responsive behaviour.
   Content is reordered and re-composed, never merely shrunk. Only deliberately
   wide surfaces (tables, brackets, timelines, option rails) scroll internally;
   the page itself never scrolls horizontally. */

#pl420Root,.pl42-body,.pl42-content{max-width:100vw}
.pl42-content{overflow-x:hidden}

/* Mobile bottom navigation exists at every size but only paints on small screens. */
.pl42-bottomnav{display:none}

/* ============================================================ ULTRAWIDE === */
/* The reference build produced vast empty bands above 2200px. The shell keeps a
   readable measure and raises density instead of stretching. */
@media (min-width:2200px){
  :root{
    --pl42-shell-max:2040px;--pl42-rail:262px;
    /* Type scales with the canvas instead of leaving a sparse, tiny interface. */
    --pl42-display:54px;--pl42-h1:38px;--pl42-h2:26px;--pl42-h3:19px;
    --pl42-body:16px;--pl42-small:14px;--pl42-label:12px;
    --pl42-touch:46px;
  }
  .pl42-content{padding:clamp(20px,1.2vw,34px) clamp(24px,2vw,56px)}
  .pl42-overview-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pl42-overview-bottom{grid-template-columns:repeat(auto-fit,minmax(min(520px,100%),1fr))}
  .pl42-comp-body{grid-template-columns:minmax(0,1fr) minmax(0,420px)}
  .pl42-cal-body{grid-template-columns:minmax(0,1fr) minmax(0,400px)}
  .pl42-hub-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pl42-report-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pl42-calgrid{grid-template-columns:repeat(7,minmax(160px,1fr))}
  .pl42-calgrid-cell{min-height:110px}
  .pl42-keyart{width:clamp(240px,14vw,320px)}
  .pl42-nextmatch{min-height:340px}
  .pl42-phase-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pl42-spark{height:220px}
}
@media (min-width:3000px){
  :root{
    --pl42-shell-max:2360px;
    --pl42-display:60px;--pl42-h1:42px;--pl42-h2:28px;--pl42-h3:21px;
    --pl42-body:17px;--pl42-small:15px;--pl42-label:12.5px;
  }
  .pl42-timeline{min-width:1560px}
  .pl42-calgrid{grid-template-columns:repeat(7,minmax(180px,1fr))}
}

/* ================================================== LARGE DESKTOP 1600+ === */
@media (max-width:1700px){
  /* Below the single-row width the five attribute panels split 3 + 2. */
  .pl42-attr-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pl42-player-top{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-auto-rows:auto}
  .pl42-player-top>.pl42-contractcard{grid-column:1/-1}
}

/* ==================================================== DESKTOP <= 1440px === */
@media (max-width:1440px){
  :root{--pl42-rail:212px}
  .pl42-decision{grid-template-columns:minmax(0,280px) minmax(0,1fr)}
  .pl42-comp-body{grid-template-columns:minmax(0,1fr) minmax(0,310px)}
  .pl42-cal-body{grid-template-columns:minmax(0,1fr) minmax(0,300px)}
}

/* ===================================================== LAPTOP <= 1280px === */
@media (max-width:1280px){
  /* Two columns; a trailing panel that would sit alone takes the full width
     instead of leaving half a row empty. */
  .pl42-attr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pl42-attr-grid>:last-child:nth-child(odd){grid-column:1/-1}
  :root{--pl42-rail:var(--pl42-rail-slim)}
  .pl42-rail nav button span{display:none}
  .pl42-rail nav button{justify-content:center;padding:0;gap:0}
  .pl42-rail-wordmark{display:none}
  .pl42-overview-top{grid-template-columns:minmax(0,1fr);}
  .pl42-nextmatch{min-height:230px}
  .pl42-hide-md{display:none !important}
  .pl42-three{grid-template-columns:minmax(0,1fr)}
  .pl42-three>section:first-child{grid-row:auto}
}

/* Short viewports (1280x720, 1366x768) — reduce vertical furniture. */
@media (max-height:800px) and (min-width:981px){
  :root{--pl42-topbar:58px;--pl42-footer:32px}
  .pl42-hero{gap:16px}
  .pl42-keyart{width:clamp(150px,13vw,210px)}
  .pl42-nextmatch{min-height:200px}
  .pl42-spark{height:150px}
}

/* ===================================================== TABLET <= 1024px === */
@media (max-width:1024px){
  .pl42-comp-body,.pl42-cal-body{grid-template-columns:minmax(0,1fr)}
  .pl42-comp-side,.pl42-cal-side{flex-direction:row;flex-wrap:wrap}
  /* V0.52.3: sobald der Kalenderkoerper auf EINE Spalte klappt, faellt die
     Aktionsspalte unter das Raster - gemessen 1024x700: alle vier
     Spielaktionen wieder unter der Falz, R1=4. Im zweispaltigen Fall darf
     kein order stehen (es wuerde die Spalten tauschen), hier muss es. */
  .pl42-cal-body>.pl42-cal-side{order:-1}
  .pl42-comp-side>*,.pl42-cal-side>*{flex:1 1 300px}
  .pl42-lw-top,.pl42-contract-top{grid-template-columns:minmax(0,1fr)}
  .pl42-player-top{grid-template-columns:minmax(0,1fr)}
  /* V0.52.3: gestapelt lag die Vertragskarte genau auf der Falz - gemessen
     1024x700: Held 225, Entwicklung 362, Vertrag ab 611 bei 610 sichtbar.
     Der Vertragsknopf ist eine Primaeraktion und war damit nicht ohne
     Scrollen erreichbar. Held - Vertrag - Entwicklung ist auch inhaltlich
     die bessere Folge: wer man ist, woran man steht, wohin man waechst. */
  .pl42-player-top>.pl42-hero{order:1}
  .pl42-player-top>.pl42-contractcard{order:2}
  .pl42-player-top>.pl42-development{order:3}
  .pl42-decision{grid-template-columns:minmax(0,1fr)}
  .pl42-decision-side{flex-direction:row;flex-wrap:wrap}
  .pl42-decision-side>*{flex:1 1 280px}
  .pl42-epaper-columns{column-count:2}
  .pl42-development-grid{grid-template-columns:auto 1fr;row-gap:16px}
  .pl42-position-map{grid-column:1/-1;flex-direction:row;align-items:center;gap:14px}
}

/* ======================================== MOBILE + SMALL TABLET <= 980px == */
@media (max-width:980px){
  :root{--pl42-topbar:58px;--pl42-footer:0px}
  .pl42-burger{display:inline-flex !important;align-items:center;justify-content:center;min-height:var(--pl42-touch);min-width:var(--pl42-touch);padding:0}
  .pl42-topbar{gap:8px;padding:0 10px}
  .pl42-brand{gap:8px}
  .pl42-brand h1{font-size:14px;letter-spacing:.08em}
  .pl42-brand .pl42-ver{display:none}
  .pl42-brand .pl42-mark{width:28px;height:28px;flex-basis:28px}
  .pl42-top-actions{gap:6px}
  .pl42-top-actions button.pl42-primary{white-space:nowrap;font-size:11px;letter-spacing:.02em;padding:0 10px}
  .pl42-hide-sm{display:none !important}
  .pl42-footer{display:none}

  /* Rail becomes an off-canvas drawer. */
  .pl42-rail{
    position:fixed;top:var(--pl42-topbar);bottom:0;left:0;z-index:40;
    width:min(280px,82vw);flex-basis:auto;
    transform:translateX(-102%);transition:transform var(--pl42-mo-flaeche) var(--pl42-ease);
    box-shadow:0 0 0 100vmax rgba(3,5,10,0);
  }
  .pl42-rail[data-open="1"]{transform:none;box-shadow:0 0 0 100vmax rgba(3,5,10,.6)}
  .pl42-rail nav button span{display:inline}
  .pl42-rail nav button{justify-content:flex-start;padding:0 14px;gap:14px}
  .pl42-rail-wordmark{display:block}

  .pl42-content{padding:12px 12px calc(78px + env(safe-area-inset-bottom,0px));}
  .pl42-bottomnav{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:45;
    background:rgba(6,10,18,.97);border-top:1px solid var(--pl42-line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));
    backdrop-filter:blur(10px);
  }
  .pl42-bottomnav button{
    flex:1;min-height:var(--pl42-touch);display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:3px;border-radius:var(--pl42-r-sm);color:var(--pl42-ink-4);
  }
  .pl42-bottomnav button span{font-size:9.5px;letter-spacing:.04em;font-weight:700;text-align:center;line-height:1.15}
  .pl42-bottomnav button.is-active{color:var(--pl42-gold-bright);background:var(--pl42-gold-wash)}

  /* Composition */
  .pl42-hero{flex-direction:column;align-items:stretch}
  .pl42-keyart{width:100%;max-width:320px;margin:0 auto;aspect-ratio:100/108}
  .pl42-keyart img{object-position:50% 4%}
  .pl42-hero-copy{text-align:left}
  .pl42-hero-name{font-size:clamp(26px,7vw,38px)}
  .pl42-overview-bottom,.pl42-attr-grid,.pl42-player-bottom,.pl42-report-grid,
  .pl42-fin-grid,.pl42-contract-grid,.pl42-lw-grid,.pl42-hub-grid{grid-template-columns:minmax(0,1fr)}
  .pl42-comp-side>*,.pl42-cal-side>*,.pl42-decision-side>*{flex:1 1 100%}
  .pl42-compare{grid-template-columns:minmax(0,1fr)}
  .pl42-sim-grid{grid-template-columns:1fr 1fr}
  .pl42-three-perfgrid,.pl42-three-impact{grid-template-columns:1fr 1fr}
  .pl42-epaper-columns{column-count:1}
  .pl42-cal-hero-next{border-left:0;border-top:1px solid var(--pl42-line);padding-left:0;padding-top:14px;flex-basis:100%}
  .pl42-career-hero-inner{flex-direction:column;align-items:flex-start}
  .pl42-career-hero-stats{gap:16px}
  .pl42-comp-hero-icon{display:none}
  .pl42-comp-hero-inner{flex-wrap:wrap}
  .pl42-timeline{min-width:1180px}
  .pl42-calgrid{grid-template-columns:repeat(7,minmax(96px,1fr))}

  /* Dialogs are full-height sheets with a reachable action bar. */
  .pl42-modal{padding:0}
  .pl42-modal>.pl42-modal-card,.pl42-modal.pl42-modal--wide>.pl42-modal-card{
    width:100%;height:100%;max-height:100%;border-radius:0;border:0;
  }
  .pl42-modal-body{padding:14px 14px calc(14px + env(safe-area-inset-bottom,0px))}
  .pl42-modal-foot{padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px))}
  .pl42-modal-foot .pl42-btn{flex:1 1 160px}
  #pl420Overlay #modalRoot .modal,#pl420Overlay #modalRoot .modal.card{
    /* C247: dvh statt vh - auf dem Telefon springt vh mit der Adresszeile,
       und der Dialog wird dabei hoeher als das Bild. Alle Nachbarregeln im
       Baum benutzen bereits dvh. */
    width:100%;max-height:100dvh;min-height:100dvh;border-radius:0;border:0;
  }
  .pl42-actionbar{position:sticky;bottom:calc(74px + env(safe-area-inset-bottom,0px));border-radius:var(--pl42-r-md)}
  .pl42-actionbar .pl42-btn{flex:1 1 150px}
}

/* ===================================================== PHONE <= 640px ===== */
@media (max-width:640px){
  :root{--pl42-display:clamp(26px,8vw,34px);--pl42-h1:clamp(20px,6vw,26px)}
  .pl42-content{padding:10px 10px calc(78px + env(safe-area-inset-bottom,0px))}
  .pl42-panel{padding:13px;border-radius:var(--pl42-r-md)}
  .pl42-screen-head{gap:10px}
  .pl42-screen-head .pl42-titles{flex-basis:100%;order:2}
  .pl42-back{order:1}
  .pl42-head-actions{order:3;flex-basis:100%}
  .pl42-head-actions .pl42-btn{flex:1 1 140px}
  .pl42-top-actions button:not(.pl42-primary){padding:0 10px}
  .pl42-top-actions button.pl42-primary{padding:0 12px;font-size:var(--pl42-label)}

  .pl42-hero-facts{gap:14px}
  .pl42-hero-divider{min-height:36px}
  .pl42-matchup{gap:8px}
  .pl42-matchup-team b{font-size:10.5px}
  .pl42-nextmatch{min-height:0}
  .pl42-nextmatch-inner{padding:14px 12px;gap:12px}
  .pl42-nextmatch-actions .pl42-btn{flex:1 1 100%}

  .pl42-phase-grid{grid-template-columns:1fr 1fr}
  .pl42-phase-track{grid-column:1/-1}
  .pl42-metric-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pl42-development-grid{grid-template-columns:1fr;justify-items:start}
  .pl42-position-map{flex-direction:column;align-items:flex-start}
  .pl42-record-grid,.pl42-relation-grid,.pl42-fin-top,.pl42-report-summary-grid,
  .pl42-memory-grid,.pl42-impact-grid,.pl42-gauge-grid{grid-template-columns:1fr}
  .pl42-change-grid{grid-template-columns:1fr}
  .pl42-sim-grid{grid-template-columns:1fr}
  .pl42-three-perfgrid,.pl42-three-impact{grid-template-columns:1fr}
  .pl42-three-row{grid-template-columns:auto 1fr;row-gap:8px}
  .pl42-three-row time{grid-row:span 2}
  .pl42-three-teams{flex-wrap:wrap}
  .pl42-upcoming{grid-template-columns:1fr}
  .pl42-demand-grid{grid-template-columns:1fr}
  .pl42-contract-role{gap:14px}

  /* Offer cards stack on the narrowest screens instead of being squeezed. */
  .pl42-option-grid{flex-direction:column;min-width:0;width:100%}
  .pl42-option{flex:1 1 auto;width:100%}
  .pl42-decision-hero .pl42-keyart{width:96px}
  .pl42-decision-title{font-size:22px}

  .pl42-timeline{min-width:1040px;padding:30px 12px 70px}
  .pl42-timeline-mark{width:98px}
  .pl42-calgrid{grid-template-columns:repeat(7,minmax(78px,1fr));padding:10px 12px 14px}
  .pl42-calgrid-cell{min-height:66px}
  .pl42-calgrid-event em{display:none}
  .pl42-table{min-width:560px}
  .pl42-epaper{padding:16px}
  .pl42-tablet-frame{padding:8px;border-radius:14px}
  .pl42-bracket-round{flex-basis:180px;width:180px}
}

/* ================================================= VERY NARROW <= 380px === */
@media (max-width:460px){
  .pl42-brand h1{display:none}
}
@media (max-width:380px){
  .pl42-hero-facts{flex-wrap:wrap}
  .pl42-phase-grid{grid-template-columns:1fr}
  .pl42-bottomnav button span{font-size:8.5px}
  .pl42-calgrid{grid-template-columns:repeat(7,minmax(64px,1fr))}
}

/* ================================================== INPUT & MOTION ======== */
@media (hover:none){
  /* No hover-only affordances: every interactive surface keeps a visible state. */
  .pl42-hub-card,.pl42-option,.pl42-sim-tile,.pl42-atmos,.pl42-offer-row{border-color:var(--pl42-line-strong)}
}
@media (prefers-reduced-motion:reduce){
  #pl420Root *,#pl420Overlay *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}
@media print{
  #pl420Root{position:static;height:auto}
  .pl42-rail,.pl42-bottomnav,.pl42-topbar,.pl42-footer{display:none !important}
}