/* Project Legend V0.42.0 — authoritative application shell.
   The V0.42.0 shell owns the visible surface. Legacy UI generations are
   structurally suppressed (see the bottom of this file) rather than layered over. */

/* ---------------------------------------------------------------- root ---- */
#pl420Root{
  position:fixed; inset:0; z-index:60;
  display:flex; flex-direction:column;
  font-family:var(--pl42-font);
  color:var(--pl42-ink);
  background:
    radial-gradient(1200px 620px at 78% -10%,rgba(103,183,255,.06),transparent 62%),
    radial-gradient(900px 520px at 8% 110%,rgba(233,185,73,.05),transparent 60%),
    linear-gradient(180deg,var(--pl42-bg) 0%,var(--pl42-void) 100%);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  font-size:var(--pl42-body);
  line-height:1.45;
}
/* The shell root is a full-screen fixed layer at z-index 60. Without a career it
   holds no content, but it still painted its own background and, worse, still
   swallowed every click: the entry and setup screens sat intact underneath while
   the page looked like an unresponsive dark surface. Nothing hid it, because
   until the career reset actually worked this state was never reached. The root
   exists only while the shell is the active surface. */
body:not(.pl42-active) #pl420Root{display:none !important}
#pl420Root *{box-sizing:border-box}
/* Zero-specificity reset (`:where`) so component classes always win over it. */
:where(#pl420Root,#pl420NativeModal) button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:where(#pl420Root,#pl420NativeModal) button:disabled{cursor:not-allowed}
#pl420Root :focus-visible{outline:2px solid var(--pl42-gold);outline-offset:2px;border-radius:var(--pl42-r-xs)}
#pl420Root h1,#pl420Root h2,#pl420Root h3,#pl420Root h4,#pl420Root p{margin:0}
#pl420Root img{max-width:100%}
#pl420Root svg{display:block}
/* Never let a word break letter-by-letter. */
#pl420Root, #pl420Root *{overflow-wrap:break-word;word-break:normal;hyphens:none}

/* --------------------------------------------------------------- topbar --- */
.pl42-topbar{
  flex:0 0 auto; height:var(--pl42-topbar);
  display:flex; align-items:center; gap:var(--pl42-s4);
  padding:0 clamp(14px,1.5vw,28px);
  background:linear-gradient(180deg,rgba(9,14,24,.98),rgba(7,11,20,.92));
  border-bottom:1px solid var(--pl42-line);
  position:relative; z-index:5;
}
.pl42-brand{display:flex;align-items:center;gap:12px;min-width:0}
.pl42-brand .pl42-mark{width:38px;height:38px;flex:0 0 38px}
.pl42-brand h1{
  font-size:clamp(15px,1.25vw,21px); font-weight:800; letter-spacing:.14em;
  white-space:nowrap; color:var(--pl42-ink);
}
.pl42-brand .pl42-ver{font-size:var(--pl42-label);letter-spacing:.12em;color:var(--pl42-ink-4);white-space:nowrap}
.pl42-topbar-spacer{flex:1 1 auto}
.pl42-top-actions{display:flex;align-items:center;gap:8px}
.pl42-top-actions button{
  min-height:var(--pl42-touch); display:inline-flex; align-items:center; gap:8px;
  padding:0 14px; border-radius:var(--pl42-r-sm);
  border:1px solid var(--pl42-line-strong); background:rgba(255,255,255,.02);
  color:var(--pl42-ink-2); font-size:var(--pl42-small); font-weight:600;
  transition:border-color var(--pl42-mo-zustand) var(--pl42-ease),background var(--pl42-mo-zustand) var(--pl42-ease),color var(--pl42-mo-zustand) var(--pl42-ease);
}
.pl42-top-actions button:hover{border-color:var(--pl42-line-strong);background:rgba(255,255,255,.05);color:var(--pl42-ink)}
.pl42-top-actions button.pl42-primary{
  background:linear-gradient(180deg,var(--pl42-gold-bright),var(--pl42-gold));
  color:#231803; border-color:transparent; font-weight:800;
}
.pl42-top-actions button.pl42-primary:hover{filter:brightness(1.06)}
.pl42-badge-count{
  min-width:22px; height:22px; padding:0 6px; border-radius:var(--pl42-r-pill);
  display:inline-grid; place-items:center; font-size:11px; font-weight:800;
  background:var(--pl42-green); color:#04240f;
}
.pl42-badge-count[data-zero="1"]{background:rgba(255,255,255,.1);color:var(--pl42-ink-3)}
.pl42-burger{display:none !important}

/* ---------------------------------------------------------------- body ---- */
.pl42-body{flex:1 1 auto;display:flex;min-height:0;position:relative}

/* rail */
.pl42-rail{
  flex:0 0 var(--pl42-rail); width:var(--pl42-rail);
  display:flex; flex-direction:column; justify-content:space-between;
  border-right:1px solid var(--pl42-line);
  background:linear-gradient(180deg,rgba(10,16,28,.9),rgba(6,10,18,.9));
  padding:var(--pl42-s4) 0; overflow:hidden auto;
}
.pl42-rail nav{display:flex;flex-direction:column;gap:2px;padding:0 10px}
.pl42-rail nav button{
  display:flex; align-items:center; gap:14px;
  min-height:52px; padding:0 14px; border-radius:var(--pl42-r-sm);
  color:var(--pl42-ink-3); font-size:var(--pl42-small); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; text-align:left;
  border-left:3px solid transparent; position:relative;
  transition:background var(--pl42-mo-zustand) var(--pl42-ease),color var(--pl42-mo-zustand) var(--pl42-ease);
}
.pl42-rail nav button .pl42-ico{flex:0 0 22px}
.pl42-rail nav button:hover{background:rgba(255,255,255,.04);color:var(--pl42-ink-2)}
.pl42-rail nav button.is-active{
  background:linear-gradient(90deg,var(--pl42-gold-wash),transparent 92%);
  color:var(--pl42-gold-bright); border-left-color:var(--pl42-gold);
}
.pl42-rail-wordmark{
  padding:0 18px 6px; color:rgba(148,178,220,.14);
  font-weight:900; font-size:26px; line-height:.94; letter-spacing:.02em;
}
.pl42-rail-wordmark small{display:block;font-size:9px;letter-spacing:.3em;font-weight:700;margin-top:8px}

/* content */
.pl42-content{
  flex:1 1 auto; min-width:0; overflow:hidden auto;
  padding:clamp(14px,1.4vw,26px);
  scrollbar-gutter:stable;
}
.pl42-screen{
  max-width:var(--pl42-shell-max); margin:0 auto;
  display:flex; flex-direction:column; gap:clamp(12px,1.1vw,18px);
  animation:pl42In .22s var(--pl42-ease) both;
}
@keyframes pl42In{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pl42-screen{animation:none}}

/* -------------------------------------------------------------- footer ---- */
.pl42-footer{
  flex:0 0 auto; height:var(--pl42-footer);
  display:flex; align-items:center; gap:14px;
  padding:0 clamp(14px,1.5vw,28px);
  border-top:1px solid var(--pl42-line);
  background:rgba(5,8,14,.9);
  font-size:var(--pl42-label); letter-spacing:.12em; color:var(--pl42-ink-4);
}
.pl42-footer b{color:var(--pl42-gold);font-weight:800;letter-spacing:.18em}
.pl42-footer .pl42-spacer{flex:1}
.pl42-footer i{width:7px;height:7px;border-radius:50%;background:var(--pl42-green);display:inline-block}

/* --------------------------------------------------------- shared parts --- */
.pl42-panel{
  background:linear-gradient(180deg,var(--pl42-panel),var(--pl42-bg-2));
  border:1px solid var(--pl42-line);
  border-radius:var(--pl42-r-lg);
  box-shadow:var(--pl42-shadow-1);
  padding:clamp(14px,1.15vw,20px);
  min-width:0;
}
.pl42-panel.pl42-flush{padding:0;overflow:hidden}
.pl42-panel-head{
  display:flex;align-items:center;gap:12px;margin-bottom:var(--pl42-s4);min-height:26px;
}
.pl42-panel-head h3{
  font-size:var(--pl42-label); font-weight:800; letter-spacing:.19em;
  text-transform:uppercase; color:var(--pl42-gold);
}
.pl42-panel-head .pl42-spacer{flex:1}
.pl42-panel-head .pl42-link{
  display:inline-flex;align-items:center;gap:6px;
  min-height:var(--pl42-touch);min-width:var(--pl42-touch);justify-content:center;
  padding:0 12px;margin:-6px -6px -6px 0;
  border-radius:var(--pl42-r-sm);font-size:var(--pl42-label);font-weight:800;
  letter-spacing:.14em;color:var(--pl42-gold);border:1px solid transparent;
}
.pl42-panel-head .pl42-link:hover{background:var(--pl42-gold-wash);border-color:rgba(233,185,73,.3)}

.pl42-eyebrow{
  font-size:var(--pl42-label); font-weight:800; letter-spacing:.22em;
  text-transform:uppercase; color:var(--pl42-gold);
}
.pl42-kicker{
  font-size:var(--pl42-label); font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--pl42-ink-4);
}
.pl42-muted{color:var(--pl42-ink-3)}
.pl42-pos{color:var(--pl42-green)} .pl42-neg{color:var(--pl42-red)} .pl42-info{color:var(--pl42-cyan)}

.pl42-stat{
  display:flex;flex-direction:column;gap:3px;min-width:0;
}
.pl42-stat small{font-size:var(--pl42-label);letter-spacing:.16em;text-transform:uppercase;color:var(--pl42-ink-4);font-weight:700}
.pl42-stat strong{font-size:clamp(17px,1.5vw,25px);font-weight:800;line-height:1.1}
.pl42-stat span{font-size:var(--pl42-small);color:var(--pl42-ink-3)}

/* Metric values are short tokens such as "4,48 Mio. EUR" or "180 EUR". They may
   wrap between tokens but never inside one, and the track never gets so narrow
   that a value has to stack. */
.pl42-metric-row{
  display:grid;gap:14px clamp(16px,1.6vw,30px);
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  padding-top:4px;
}
/* Four numbers pressed against each other read as one block. A visible column
   rule and real breathing room separate them without adding chrome. */
.pl42-metric-row>.pl42-stat{position:relative;padding-left:clamp(10px,.9vw,16px)}
.pl42-metric-row>.pl42-stat::before{
  content:'';position:absolute;left:0;top:2px;bottom:2px;width:1px;
  background:var(--pl42-line-soft);
}
.pl42-metric-row>.pl42-stat:first-child{padding-left:0}
.pl42-metric-row>.pl42-stat:first-child::before{display:none}
.pl42-metric-row .pl42-stat strong{overflow-wrap:normal;word-break:keep-all;hyphens:none}

.pl42-btn{
  min-height:var(--pl42-touch); display:inline-flex; align-items:center; justify-content:center;
  gap:10px; padding:0 18px; border-radius:var(--pl42-r-sm);
  border:1px solid var(--pl42-line-strong); background:rgba(255,255,255,.03);
  font-size:var(--pl42-small); font-weight:700; letter-spacing:.06em; color:var(--pl42-ink);
  transition:background var(--pl42-mo-zustand) var(--pl42-ease),border-color var(--pl42-mo-zustand) var(--pl42-ease),transform var(--pl42-mo-zustand) var(--pl42-ease);
}
.pl42-btn:hover{background:rgba(255,255,255,.07);border-color:var(--pl42-line-strong)}
.pl42-btn:active{transform:translateY(1px)}
.pl42-btn--primary{
  background:linear-gradient(180deg,var(--pl42-gold-bright),var(--pl42-gold));
  color:#231803;border-color:transparent;font-weight:800;letter-spacing:.08em;
}
.pl42-btn--primary:hover{filter:brightness(1.06);background:linear-gradient(180deg,var(--pl42-gold-bright),var(--pl42-gold))}
.pl42-btn--ghost{background:transparent}
.pl42-btn--danger{border-color:rgba(244,112,122,.4);color:var(--pl42-red)}
.pl42-btn[disabled],.pl42-btn[aria-disabled="true"]{opacity:.42;cursor:not-allowed}

.pl42-chip{
  display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;
  border-radius:var(--pl42-r-pill);font-size:var(--pl42-label);font-weight:800;letter-spacing:.1em;
  background:rgba(255,255,255,.05);color:var(--pl42-ink-2);border:1px solid var(--pl42-line);
}
.pl42-chip--gold{background:var(--pl42-gold-wash);color:var(--pl42-gold-bright);border-color:rgba(233,185,73,.32)}
.pl42-chip--cyan{background:var(--pl42-cyan-wash);color:var(--pl42-cyan);border-color:rgba(103,183,255,.3)}
.pl42-chip--green{background:var(--pl42-green-wash);color:var(--pl42-green);border-color:rgba(74,222,128,.3)}
.pl42-chip--red{background:var(--pl42-red-wash);color:var(--pl42-red);border-color:rgba(244,112,122,.3)}

/* segmented switcher (competition switch, tabs) */
.pl42-segment{
  display:flex;gap:4px;padding:4px;border-radius:var(--pl42-r-md);
  background:rgba(255,255,255,.03);border:1px solid var(--pl42-line-strong);
  overflow-x:auto;scrollbar-width:none;
}
.pl42-segment::-webkit-scrollbar{display:none}
.pl42-segment button{
  min-height:40px;padding:0 16px;border-radius:var(--pl42-r-sm);white-space:nowrap;
  font-size:var(--pl42-small);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--pl42-ink-3);display:inline-flex;align-items:center;gap:8px;
}
.pl42-segment button:hover{color:var(--pl42-ink-2);background:rgba(255,255,255,.04)}
.pl42-segment button.is-active{background:var(--pl42-gold-wash-2);color:var(--pl42-gold-bright)}
.pl42-segment button[disabled]{opacity:.38}

/* screen header used by every detail route */
.pl42-screen-head{display:flex;align-items:flex-start;gap:var(--pl42-s4);flex-wrap:wrap}
.pl42-screen-head .pl42-titles{min-width:0;flex:1 1 320px}
.pl42-screen-head h2{font-size:var(--pl42-h1);font-weight:800;letter-spacing:-.01em;line-height:1.1}
.pl42-screen-head p{color:var(--pl42-ink-3);font-size:var(--pl42-small);margin-top:4px}
.pl42-back{
  min-height:var(--pl42-touch);display:inline-flex;align-items:center;gap:8px;padding:0 14px;
  border-radius:var(--pl42-r-sm);border:1px solid var(--pl42-line-strong);color:var(--pl42-ink-2);
  font-size:var(--pl42-small);font-weight:700;
}
.pl42-back:hover{background:rgba(255,255,255,.05);border-color:var(--pl42-line-strong)}

/* empty state */
.pl42-empty{
  padding:26px;text-align:center;color:var(--pl42-ink-4);
  font-size:var(--pl42-small);letter-spacing:.12em;text-transform:uppercase;font-weight:700;
}

/* horizontal scroll container for wide content (tables, brackets, timelines) */
.pl42-hscroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
.pl42-hscroll::-webkit-scrollbar{height:8px}
.pl42-hscroll::-webkit-scrollbar-thumb{background:rgba(148,178,220,.22);border-radius:4px}
.pl42-hscroll::-webkit-scrollbar-track{background:transparent}

/* club badge sizing guard — logos must never be distorted */
#pl420Root .club-badge,#pl420Root .pl42-badge{
  display:inline-grid;place-items:center;flex:0 0 auto;aspect-ratio:1/1;overflow:hidden;border-radius:50%;
}
#pl420Root .club-badge svg,#pl420Root .pl42-badge svg,#pl420Root .club-badge img{width:100%;height:100%;object-fit:contain}
.pl42-badge-xs{width:20px;height:20px}
.pl42-badge-sm{width:28px;height:28px}
.pl42-badge-md{width:40px;height:40px}
.pl42-badge-lg{width:56px;height:56px}
.pl42-badge-xl{width:clamp(64px,5.6vw,104px);height:clamp(64px,5.6vw,104px)}

/* ------------------------------------------------- modal / overlay stack -- */
/* Exactly one modal stack exists in V0.42.0: #pl420Overlay.
   The legacy #modalRoot element is physically relocated inside it at boot, so
   legacy dialogs keep working through their own id while sharing one stacking
   context, one scrim and one visual language with native V0.42.0 dialogs. */
#pl420Overlay{position:fixed;inset:0;z-index:120;display:none}
#pl420Overlay[data-open="1"]{display:block}
.pl42-scrim{
  position:absolute;inset:0;background:rgba(3,5,10,.78);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.pl42-modal{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:clamp(10px,2vw,34px);pointer-events:none;
}
.pl42-modal>.pl42-modal-card{
  pointer-events:auto;
  width:min(1180px,100%); max-height:100%;
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--pl42-panel-2),var(--pl42-bg));
  border:1px solid var(--pl42-line-strong); border-radius:var(--pl42-r-xl);
  box-shadow:var(--pl42-shadow-2); overflow:hidden;
  font-family:var(--pl42-font);color:var(--pl42-ink);
  animation:pl42Pop var(--pl42-mo-flaeche) var(--pl42-ease) both;
}
.pl42-modal.pl42-modal--wide>.pl42-modal-card{width:min(1560px,100%)}
@keyframes pl42Pop{from{opacity:0;transform:scale(.985) translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pl42-modal>.pl42-modal-card{animation:none}}
.pl42-modal-head{
  flex:0 0 auto;display:flex;align-items:flex-start;gap:16px;
  padding:clamp(14px,1.3vw,22px) clamp(16px,1.5vw,26px);
  border-bottom:1px solid var(--pl42-line);
  background:rgba(255,255,255,.02);
}
.pl42-modal-head .pl42-titles{flex:1;min-width:0}
.pl42-modal-head h2{font-size:var(--pl42-h2);font-weight:800;line-height:1.15}
.pl42-modal-head p{font-size:var(--pl42-small);color:var(--pl42-ink-3);margin-top:3px}
.pl42-modal-close{
  width:var(--pl42-touch);height:var(--pl42-touch);flex:0 0 var(--pl42-touch);
  border-radius:50%;border:1px solid var(--pl42-line-strong);display:grid;place-items:center;color:var(--pl42-ink-2);
}
.pl42-modal-close:hover{background:rgba(255,255,255,.07);color:var(--pl42-ink)}
.pl42-modal-body{flex:1 1 auto;overflow:auto;padding:clamp(14px,1.3vw,24px);min-height:0}
.pl42-modal-foot{
  flex:0 0 auto;display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;
  padding:clamp(12px,1.1vw,18px) clamp(16px,1.5vw,26px);
  border-top:1px solid var(--pl42-line); background:rgba(4,7,12,.65);
  position:sticky;bottom:0;
}

/* toasts */
#pl420Toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.pl42-toast{
  pointer-events:auto;padding:12px 18px;border-radius:var(--pl42-r-sm);
  background:rgba(13,21,36,.97);border:1px solid var(--pl42-line-strong);
  color:var(--pl42-ink);font-size:var(--pl42-small);font-weight:600;
  box-shadow:var(--pl42-shadow-2);animation:pl42Toast var(--pl42-mo-flaeche) var(--pl42-ease) both;
  max-width:min(560px,92vw);
}
@keyframes pl42Toast{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* --------------------------------------------------- legacy suppression --- */
/* When the V0.42.0 shell is mounted the legacy career surface must not paint.
   It stays in the DOM because the domain model renders through it, but it is
   removed from the visual and accessibility tree entirely. */
body.pl42-active #careerScreen,
body.pl42-active #clubThemeLeft,
body.pl42-active #clubThemeRight,
body.pl42-active .topbar,
body.pl42-active #pl410Root,
body.pl42-active #pushRoot,
body.pl42-active #toastRoot{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
body.pl42-active{overflow:hidden;background:var(--pl42-void)}

/* The live match hides the shell only while the shell itself confirms that the
   overlay is really on screen. `pl391-live-open` is written by the match layer
   and is only removed on its own close path, so keying visibility off it left a
   completely black page whenever the match was left any other way. */
body.pl42-live-open #pl420Root{visibility:hidden}

/* ------------------------------------------- legacy dialogs, re-skinned --- */
/* Dialogs that still come from the simulation core are rendered inside the one
   V0.42.0 overlay and given the product's typography, spacing and controls.
   The markup is untouched so their behaviour is unchanged. */
/* Both stacks live inside #pl420Overlay and #modalRoot is appended last, so a
   legacy award card used to paint over a V0.42.0 dialog — the run summary ended
   up behind the milestone card that the same run produced. The legacy backdrop
   carries z-index 100, so the native dialog is ordered explicitly above it.
   The ordering is applied to .pl42-modal, which is already positioned: making
   the host positioned instead would take .pl42-modal's inset:0 reference away
   from the full-viewport overlay and collapse the card to a few pixels. */
#pl420Overlay .pl42-modal{z-index:140}
#pl420Overlay #modalRoot{position:static;width:auto;height:auto;font-family:var(--pl42-font)}
#pl420Overlay #modalRoot:empty{display:none}
#pl420Overlay #modalRoot .modal-backdrop{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:clamp(10px,2vw,34px);background:rgba(3,5,10,.78);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);overflow:auto;
}
#pl420Overlay #modalRoot .modal,
#pl420Overlay #modalRoot .modal.card{
  width:min(1120px,100%);max-height:calc(100vh - 40px);
  margin:auto;display:flex;flex-direction:column;overflow:auto;
  background:linear-gradient(180deg,var(--pl42-panel-2),var(--pl42-bg));
  border:1px solid var(--pl42-line-strong);border-radius:var(--pl42-r-xl);
  box-shadow:var(--pl42-shadow-2);color:var(--pl42-ink);
  padding:clamp(16px,1.5vw,26px);gap:14px;font-size:var(--pl42-body);
}
#pl420Overlay #modalRoot .modal-head{
  display:flex;align-items:flex-start;gap:16px;
  padding-bottom:14px;border-bottom:1px solid var(--pl42-line);margin-bottom:2px;
}
#pl420Overlay #modalRoot .modal-head h3{font-size:var(--pl42-h2);font-weight:800;line-height:1.15;margin:0}
#pl420Overlay #modalRoot .modal-head p{font-size:var(--pl42-small);color:var(--pl42-ink-3);margin:4px 0 0}
#pl420Overlay #modalRoot .modal-head>div:first-child{flex:1;min-width:0}
/* C224/15 (16.09.2026): doppeltes Schliessen-Kreuz. phase2-premium.css zeichnet auf
   .close-btn ein Kreuz ueber ::after und blendet den Knopftext mit font-size:0 aus. Ein
   SVG-Symbol wird davon nicht ausgeblendet, also standen beide da - im Bild des
   Auftraggebers zwei Kreuze uebereinander im Dialog "Trainingsuebungen". Wer ein Symbol
   traegt, bekommt kein Pseudokreuz. Zwei Wege, damit auch ein Knopf erfasst wird, dessen
   Symbol von woanders kommt. */
.close-btn.pl522-symbol::after{content:none!important}
.close-btn:has(svg)::after{content:none!important}
#pl420Overlay #modalRoot .close-btn{
  width:var(--pl42-touch);height:var(--pl42-touch);flex:0 0 var(--pl42-touch);
  border-radius:50%;border:1px solid var(--pl42-line-strong);background:transparent;
  color:var(--pl42-ink-2);font-size:16px;line-height:1;cursor:pointer;
}
#pl420Overlay #modalRoot .close-btn:hover{background:rgba(255,255,255,.07);color:var(--pl42-ink)}
#pl420Overlay #modalRoot .btn{
  min-height:var(--pl42-touch);display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:0 18px;border-radius:var(--pl42-r-sm);border:1px solid var(--pl42-line-strong);
  background:rgba(255,255,255,.03);color:var(--pl42-ink);
  font-size:var(--pl42-small);font-weight:700;cursor:pointer;
}
#pl420Overlay #modalRoot .btn:hover{background:rgba(255,255,255,.07);border-color:var(--pl42-line-strong)}
#pl420Overlay #modalRoot .btn-primary{
  background:linear-gradient(180deg,var(--pl42-gold-bright),var(--pl42-gold));
  color:#231803;border-color:transparent;font-weight:800;
}
#pl420Overlay #modalRoot .btn-ghost{background:transparent}
/* Grids must never squeeze a column so narrow that words break per letter. */
#pl420Overlay #modalRoot .choice-grid,
#pl420Overlay #modalRoot .result-stats,
#pl420Overlay #modalRoot .modal-grid{
  display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
}
#pl420Overlay #modalRoot .choice-card{
  background:linear-gradient(180deg,var(--pl42-panel),var(--pl42-bg-2));
  border:1px solid var(--pl42-line-strong);border-radius:var(--pl42-r-md);padding:16px;
  min-width:0;
}
#pl420Overlay #modalRoot table{width:100%;border-collapse:collapse;font-size:var(--pl42-small)}
#pl420Overlay #modalRoot th,#pl420Overlay #modalRoot td{padding:8px 10px;text-align:left;white-space:nowrap}
#pl420Overlay #modalRoot .result-note{
  background:var(--pl42-cyan-wash);border:1px solid rgba(103,183,255,.24);
  border-radius:var(--pl42-r-sm);padding:12px 14px;color:var(--pl42-ink-2);font-size:var(--pl42-small);
}
#pl420Overlay #modalRoot input,#pl420Overlay #modalRoot select,#pl420Overlay #modalRoot textarea{
  min-height:var(--pl42-touch);width:100%;padding:0 12px;border-radius:var(--pl42-r-sm);
  border:1px solid var(--pl42-line-strong);background:rgba(255,255,255,.03);color:var(--pl42-ink);font:inherit;
}
#pl420Overlay #modalRoot .modal-actions,#pl420Overlay #modalRoot .actions{
  display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;
  padding-top:14px;border-top:1px solid var(--pl42-line);
}
/* Legacy dialogs were authored against a fixed-height card. Inside the V0.42.0
   overlay the card itself scrolls, so inherited clipping is released and every
   grid keeps a readable minimum column width. */
#pl420Overlay #modalRoot *{min-width:0}
#pl420Overlay #modalRoot .choice-card,
#pl420Overlay #modalRoot .pl-decision-context,
#pl420Overlay #modalRoot [class*="offer-card"],
#pl420Overlay #modalRoot [class*="offer-detail"],
#pl420Overlay #modalRoot [class*="offer-sections"]{
  overflow:visible;max-height:none;height:auto;
}
#pl420Overlay #modalRoot [class*="offer-grid"],
#pl420Overlay #modalRoot .pl-decision-context,
#pl420Overlay #modalRoot [class*="package-grid"],
#pl420Overlay #modalRoot [class*="negotiation-history"]{
  display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  max-height:none;
}
#pl420Overlay #modalRoot .modal-head{position:static;background:transparent}
#pl420Overlay #modalRoot [class*="offer-actions"]{
  position:static;display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;
  padding-top:14px;margin-top:12px;border-top:1px solid var(--pl42-line);background:transparent;
}
#pl420Overlay #modalRoot [class*="pause-context"]{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:var(--pl42-label);letter-spacing:.14em;text-transform:uppercase;color:var(--pl42-gold);font-weight:800;
}
#pl420Overlay #modalRoot .pl42-legacy-actionbar{
  position:sticky;bottom:calc(-1 * clamp(16px,1.5vw,26px));z-index:3;
  margin:16px calc(-1 * clamp(16px,1.5vw,26px)) calc(-1 * clamp(16px,1.5vw,26px));
  padding:14px clamp(16px,1.5vw,26px);
  display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;
  border-top:1px solid var(--pl42-line);
  background:linear-gradient(180deg,rgba(9,15,26,.92),rgba(5,8,14,.99));
  backdrop-filter:blur(8px);
}
#pl420Overlay #modalRoot .pl42-legacy-actionbar .btn-primary,
#pl420Overlay #modalRoot .pl42-legacy-actionbar .btn:last-child{order:2}
#pl420Overlay #modalRoot h3,#pl420Overlay #modalRoot h4{line-height:1.2}
#pl420Overlay #modalRoot small,#pl420Overlay #modalRoot .muted-cell{color:var(--pl42-ink-3)}
/* The V0.40.0 live match overlay is a first-class surface: it stays on top. */
#pl391Live{z-index:140}

/* ---------------------------------------------- live match icon language --- */
/* The V0.40.0 match layer draws its chrome with single glyphs; V0.42.0 replaces
   them with the product's own icons so one icon language runs through the game. */
.pl42-live-ico{display:inline-flex;align-items:center;justify-content:center;vertical-align:-2px}
#pl391Live .pl42-live-ico svg{display:block}

/* ------------------------------------------------ career live: one screen -- */
/* The core's career-live surface was authored taller than the viewport. Inside
   the V0.42.0 overlay it becomes a fixed-height layout whose long lists scroll
   inside themselves, so the run controls are always reachable without scrolling
   the page. */
#plV0387CareerLive{
  position:fixed;inset:0;z-index:130;
  display:flex;flex-direction:column;
  max-height:100vh;overflow:hidden;
  background:linear-gradient(180deg,var(--pl42-bg),var(--pl42-void));
  font-family:var(--pl42-font);color:var(--pl42-ink);
}
#plV0387CareerLive *{min-width:0}
/* The core's own class names are `pl387-*`. An earlier attempt here matched
   `[class*="live-body"]` and similar, which exist nowhere in that markup, so
   none of it ever applied and the surface kept overflowing by a few pixels -
   enough to make the statistics shift and demand scrolling.
   `.pl387-shell` asks for `min-height:calc(100vh - 56px)` and then grows past
   it, so the height is capped here and the rows that can grow scroll instead. */
#plV0387CareerLive .pl387-backdrop{
  overflow:hidden;padding:clamp(8px,1vw,18px);
  display:flex;align-items:stretch;
}
#plV0387CareerLive .pl387-shell{
  min-height:0;height:100%;max-height:100%;overflow:hidden;
  /* header · progress · main · summary · calendar · feed · footer */
  grid-template-rows:auto auto minmax(0,1.5fr) auto auto minmax(0,1fr) auto;
}
#plV0387CareerLive .pl387-shell>header,
#plV0387CareerLive .pl387-summary,
#plV0387CareerLive .pl387-calendar,
#plV0387CareerLive .pl387-shell>footer{flex:0 0 auto;min-height:0}
#plV0387CareerLive .pl387-shell main{min-height:0;overflow:hidden}
#plV0387CareerLive .pl387-match{overflow:auto;min-height:0}
#plV0387CareerLive .pl387-shell aside{overflow:auto;min-height:0}
#plV0387CareerLive .pl387-feed{overflow:auto;min-height:0}
#plV0387CareerLive .pl387-calendar>div{overflow-x:auto}
/* On short viewports the two least critical rows collapse to their scrollers so
   the score and the controls always stay visible. */
@media (max-height:820px){
  #plV0387CareerLive .pl387-shell{grid-template-rows:auto auto minmax(0,1.7fr) auto auto minmax(0,.8fr) auto}
  #plV0387CareerLive .pl387-summary{padding:10px 24px}
  #plV0387CareerLive .pl387-calendar{padding:10px 24px}
}
body.pl42-careerlive-open #pl420Root{visibility:hidden}

/* ------------------------------------ legacy transfer offer cards ---------- */
/* Inside the single overlay these cards were squeezed until every value broke
   one character per line - "German Premier Division" ran vertically. Two causes:
   the value column collapsed to a few pixels, and the original sheet sets
   overflow-wrap:anywhere on it, which permits breaks inside a word.
   The label now sits above its value so the value gets the full column width,
   and words are never broken apart. */
#pl420Overlay #modalRoot .pl3812-live-offer-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));
  overflow-x:auto;
}
#pl420Overlay #modalRoot .pl3812-offer-sections{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
}
#pl420Overlay #modalRoot .pl3812-offer-sections dl{gap:10px}
#pl420Overlay #modalRoot .pl3812-offer-sections dl>div{
  display:flex;flex-direction:column;gap:2px;min-width:0;
}
#pl420Overlay #modalRoot .pl3812-offer-sections dt{
  font-size:var(--pl42-label);letter-spacing:.1em;text-transform:uppercase;
  color:var(--pl42-ink-4);font-weight:700;
}
#pl420Overlay #modalRoot .pl3812-offer-sections dd{
  text-align:left;font-size:var(--pl42-small);font-weight:700;
  color:var(--pl42-ink);min-width:0;
  overflow-wrap:break-word;word-break:normal;hyphens:none;
}
/* The club header of an offer keeps its badge and name on one line. */
#pl420Overlay #modalRoot .pl3812-offer-club{align-items:center;gap:12px}
#pl420Overlay #modalRoot .pl3812-offer-club h4{font-size:var(--pl42-h3);line-height:1.2}
#pl420Overlay #modalRoot .pl3812-competition-list>div{
  display:flex;justify-content:space-between;gap:10px;min-width:0;
}
/* ------------------------------------------- live match instruction ring --- */
/* The instruction glyph holder carries its own 3px gold circle from the V0.39.1
   sheet. The V0.42.0 icon system then places an SVG inside it, and that icon
   draws a ring too - so an empty instruction showed two concentric gold circles.
   Where an icon is present the holder drops its own ring and just frames it. */
#pl391Live .pl391-empty-instruction i:has(svg),
#pl391Live .pl391-instruction-body i:has(svg){
  border:1px solid rgba(233,185,73,.28);
  box-shadow:none;
  background:var(--pl42-gold-wash,rgba(233,185,73,.08));
}
#pl391Live .pl391-empty-instruction i:has(svg) svg,
#pl391Live .pl391-instruction-body i:has(svg) svg{width:56%;height:56%}
/* Fallback for engines without :has() - the holder never needs a heavy ring. */
#pl391Live .pl391-empty-instruction i{border-width:1px;box-shadow:none}
/* V0.49.1 - MINDESTBREITE FUER ALTRASTER IN ALTDIALOGEN.

   normalizeLegacyDialog() hat diese Regel bisher als Inline-Stil mit
   `!important` gesetzt. Ein Inline-Stil schlaegt jede Stylesheet-Regel - auch
   die, mit der V0.47.1 den kanonischen Angebotskarten ihre eigene
   Mindestbreite von 470 px gibt. Im Leihmarkt kam damit genau der Fehler
   zurueck, den beide Regeln verhindern sollen: drei Spalten zu 342 px, ein
   Namensfeld von 73 px, Vereinsnamen Buchstabe fuer Buchstabe untereinander.

   Als Klasse steht die Regel wieder in der Kaskade. Sie gilt weiterhin fuer
   jedes Altraster - aber ein Raster, das kanonische Angebotskarten enthaelt,
   wird von der hoeher spezifizierten Regel in v03812-responsive.css
   ueberstimmt. Beide Absichten bleiben erhalten, ohne einander zu schlagen. */
#pl420Overlay #modalRoot .pl42-legacy-grid,
.pl42-legacy-grid{
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))!important;
}
/* Die kanonische Angebotskarte bringt ihre Mindestbreite selbst mit. Diese
   Regel steht hier nur, damit sie auch dann gilt, wenn das Altraster die
   Klasse oben traegt - Spezifitaet schlaegt Reihenfolge. */
#pl420Overlay #modalRoot .pl42-legacy-grid:has(.pl3812-canonical-offer-card),
.pl42-legacy-grid:has(.pl3812-canonical-offer-card){
  grid-template-columns:repeat(auto-fit,minmax(min(100%,470px),1fr))!important;
}