/* WM 2026 Fantasy Manager — scoped styles. Sharp corners, data-dense. */
.lwf {
  --f-tinte: #2B1B3D;
  --f-signal: #16C5D9;
  --f-signal-dunkel: #0E96A6;
  --f-papier: #FDFDFD;
  --f-blass: #F7F5FA;
  --f-linie: #E2DFE8;
  --f-grau: #6E6580;
  --f-gruen: #1A8A4A;
  --f-rot: #C0392B;
  --f-pitch: #1E7A44;
  --f-pitch-2: #176236;

  font-family: inherit;
  color: var(--f-tinte);
  background: var(--f-papier);
  border: 1px solid var(--f-linie);
  max-width: 1000px;
  margin: 0 auto;
  box-sizing: border-box;
}
.lwf *,
.lwf *::before,
.lwf *::after { box-sizing: border-box; }

.lwf button { font-family: inherit; cursor: pointer; }

/* ---- States ---- */
.lwf-loading,
.lwf-error {
  padding: 2rem 1.25rem;
  font-family: inherit;
}
.lwf-loading { color: var(--f-grau); }
.lwf-error {
  background: #FBECEA;
  border-left: 4px solid var(--f-rot);
  color: var(--f-tinte);
}
.lwf-error strong { display: block; margin-bottom: .35rem; font-size: 1.05rem; }
.lwf-error p { margin: 0; color: var(--f-grau); }

/* ---- Toolbar ---- */
.lwf-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
  padding: 1rem 1.25rem;
  background: var(--f-blass);
  border-bottom: 1px solid var(--f-linie);
}
.lwf-fld { display: flex; flex-direction: column; gap: .3rem; }
.lwf-fld-lbl,
.lwf-datalbl {
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--f-grau);
  font-weight: 600;
}
.lwf-select,
.lwf-sort {
  appearance: none;
  -webkit-appearance: none;
  background: var(--f-papier);
  color: var(--f-tinte);
  border: 1px solid var(--f-linie);
  padding: .5rem 1.8rem .5rem .65rem;
  font-size: .95rem;
  font-weight: 600;
  border-radius: 0;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--f-grau) 50%),
    linear-gradient(135deg, var(--f-grau) 50%, transparent 50%);
  background-position: calc(100% - 14px) 55%, calc(100% - 9px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.lwf-select:focus,
.lwf-sort:focus,
.lwf-search:focus { outline: 2px solid var(--f-signal); outline-offset: 1px; }

/* ---- Budget ---- */
.lwf-budget { flex: 1 1 280px; min-width: 220px; }
.lwf-budget-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  font-size: .92rem;
  margin-bottom: .4rem;
}
.lwf-budget-top strong { font-weight: 700; }
.lwf-bar {
  height: 12px;
  background: var(--f-linie);
  border: 1px solid var(--f-linie);
  overflow: hidden;
}
.lwf-bar-fill {
  height: 100%;
  width: 0;
  background: var(--f-signal);
  transition: width .2s ease;
}
.lwf-bar--over .lwf-bar-fill { background: var(--f-rot); }
.lwf-over { color: var(--f-rot); }

/* ---- Note ---- */
.lwf-note {
  margin: 0;
  padding: .6rem 1.25rem;
  background: #FFF6E3;
  border-bottom: 1px solid var(--f-linie);
  color: #7A5800;
  font-size: .85rem;
}

/* ---- Capture / header ---- */
.lwf-capture { background: var(--f-papier); }
.lwf-cap-head {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  justify-content: space-between;
  align-items: center;
  padding: .9rem 1.25rem;
  background: var(--f-tinte);
  color: #fff;
  border-bottom: 3px solid var(--f-signal);
}
.lwf-cap-title {
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -.01em;
}
.lwf-cap-meta { display: flex; gap: .5rem; flex-wrap: wrap; }
.lwf-cap-pill {
  font-size: .8rem;
  padding: .25rem .55rem;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  white-space: nowrap;
}
.lwf-cap-pill strong { color: var(--f-signal); }

/* ---- Pitch ---- */
.lwf-pitch {
  background:
    repeating-linear-gradient(
      to bottom,
      var(--f-pitch) 0,
      var(--f-pitch) 56px,
      var(--f-pitch-2) 56px,
      var(--f-pitch-2) 112px);
  padding: 1.25rem .75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-height: 360px;
}
.lwf-row {
  display: flex;
  justify-content: center;
  gap: .5rem;
  flex-wrap: wrap;
}

/* ---- Slots ---- */
.lwf-slot { width: 92px; max-width: 22vw; }
.lwf-slot-empty {
  width: 100%;
  min-height: 86px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  background: rgba(255,255,255,.12);
  border: 1px dashed rgba(255,255,255,.6);
  color: #fff;
  padding: .4rem;
}
.lwf-slot-empty:hover { background: rgba(255,255,255,.22); }
.lwf-plus { font-size: 1.4rem; line-height: 1; font-weight: 700; }
.lwf-empty-pos { font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; opacity: .85; }
.lwf-empty-add { font-size: .72rem; font-weight: 600; }

/* Filled card */
.lwf-card {
  position: relative;
  background: var(--f-papier);
  border: 1px solid var(--f-linie);
  border-top: 3px solid var(--f-signal);
  padding: .45rem .35rem .4rem;
  text-align: center;
  min-height: 86px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
}
.lwf-card--cap { border-top-color: #E2A100; box-shadow: 0 0 0 1px #E2A100; }
.lwf-shirt {
  position: relative;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: var(--f-tinte);
  color: #fff;
}
.lwf-num { font-size: .85rem; font-weight: 800; }
.lwf-cap-badge {
  position: absolute;
  top: -8px; right: -8px;
  color: #E2A100;
  font-size: .9rem;
  text-shadow: 0 0 2px #fff;
}
.lwf-name {
  font-weight: 700;
  font-size: .82rem;
  line-height: 1.05;
  word-break: break-word;
}
.lwf-meta {
  display: flex;
  gap: .3rem;
  align-items: center;
  font-size: .68rem;
}
.lwf-code {
  letter-spacing: .04em;
  font-weight: 700;
  color: var(--f-grau);
}
.lwf-price {
  color: var(--f-signal-dunkel);
  font-weight: 700;
}
.lwf-card-ctrls {
  display: flex;
  gap: .25rem;
  margin-top: .15rem;
}
.lwf-mini {
  border: 1px solid var(--f-linie);
  background: var(--f-blass);
  color: var(--f-grau);
  font-size: .62rem;
  line-height: 1;
  padding: .2rem .3rem;
  font-weight: 700;
}
.lwf-mini:hover { background: #fff; color: var(--f-tinte); }
.lwf-mini--on { background: #E2A100; border-color: #E2A100; color: #fff; }
.lwf-mini--rm:hover { background: var(--f-rot); border-color: var(--f-rot); color: #fff; }

/* While capturing, hide the per-card controls so the image is clean */
.lwf-capturing .lwf-card-ctrls { visibility: hidden; }

/* ---- Status ---- */
.lwf-status {
  padding: .75rem 1.25rem;
  font-weight: 700;
  font-size: .95rem;
  color: var(--f-grau);
  border-bottom: 1px solid var(--f-linie);
  background: var(--f-blass);
}
.lwf-status--ok { color: var(--f-gruen); }

/* ---- Actions ---- */
.lwf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  padding: 1rem 1.25rem .5rem;
}
.lwf-btn {
  border: 1px solid var(--f-tinte);
  background: var(--f-papier);
  color: var(--f-tinte);
  padding: .65rem 1rem;
  font-weight: 700;
  font-size: .9rem;
}
.lwf-btn:hover { background: var(--f-blass); }
.lwf-btn--primary {
  background: var(--f-tinte);
  color: #fff;
  border-color: var(--f-tinte);
}
.lwf-btn--primary:hover { background: #3a2552; }

/* ---- Share ---- */
.lwf-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  padding: .25rem 1.25rem 1rem;
}
.lwf-share-lbl {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--f-grau);
  font-weight: 600;
}
.lwf-share-btn {
  border: 1px solid var(--f-linie);
  background: var(--f-papier);
  color: var(--f-tinte);
  padding: .45rem .75rem;
  font-size: .82rem;
  font-weight: 600;
}
.lwf-share-btn:hover { border-color: var(--f-signal); color: var(--f-signal-dunkel); }
.lwf-share-btn--x:hover { border-color: #000; color: #000; }
.lwf-share-btn--facebook:hover { border-color: #1877F2; color: #1877F2; }
.lwf-share-btn--whatsapp:hover { border-color: #25D366; color: #128C44; }
.lwf-share-btn--telegram:hover { border-color: #229ED9; color: #229ED9; }
.lwf-share-btn--reddit:hover { border-color: #FF4500; color: #FF4500; }

/* ---- Responsible gambling ---- */
.lwf-rg {
  padding: .85rem 1.25rem;
  background: var(--f-tinte);
  color: rgba(255,255,255,.78);
  font-size: .76rem;
  line-height: 1.45;
}

/* ---- Toast ---- */
.lwf-toast {
  position: fixed;
  left: 50%;
  bottom: 1.25rem;
  transform: translate(-50%, 200%);
  background: var(--f-tinte);
  color: #fff;
  padding: .6rem 1rem;
  font-size: .85rem;
  font-weight: 600;
  border-left: 3px solid var(--f-signal);
  z-index: 10000;
  max-width: 90vw;
  transition: transform .25s ease;
}
.lwf-toast--on { transform: translate(-50%, 0); }

/* ---- Picker overlay / sheet ---- */
.lwf-overlay {
  position: fixed;
  inset: 0;
  background: rgba(43,27,61,.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 9999;
}
.lwf-overlay--open { display: flex; }
body.lwf-noscroll { overflow: hidden; }

.lwf-sheet {
  background: var(--f-papier);
  border: 1px solid var(--f-linie);
  border-top: 4px solid var(--f-signal);
  width: 100%;
  max-width: 520px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
.lwf-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .85rem 1rem;
  background: var(--f-tinte);
  color: #fff;
}
.lwf-sheet-title { font-weight: 800; font-size: 1rem; }
.lwf-sheet-close {
  background: transparent;
  border: 1px solid rgba(255,255,255,.4);
  color: #fff;
  font-size: .9rem;
  line-height: 1;
  padding: .35rem .55rem;
  font-weight: 700;
}
.lwf-sheet-close:hover { background: rgba(255,255,255,.15); }
.lwf-sheet-tools {
  display: flex;
  gap: .5rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--f-linie);
  background: var(--f-blass);
}
.lwf-search {
  flex: 1;
  border: 1px solid var(--f-linie);
  background: var(--f-papier);
  padding: .5rem .65rem;
  font-size: .9rem;
  border-radius: 0;
}
.lwf-picker-list {
  overflow-y: auto;
  padding: .25rem 0;
}
.lwf-picker-empty { padding: 1.25rem 1rem; color: var(--f-grau); }

.lwf-pp {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  text-align: left;
  background: var(--f-papier);
  border: 0;
  border-bottom: 1px solid var(--f-linie);
  padding: .6rem 1rem;
}
.lwf-pp:hover { background: var(--f-blass); }
.lwf-pp--off { opacity: .45; cursor: not-allowed; }
.lwf-pp--off:hover { background: var(--f-papier); }
.lwf-pp-main { min-width: 0; }
.lwf-pp-name { font-weight: 700; font-size: .92rem; }
.lwf-pp-sub {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem .55rem;
  font-size: .74rem;
  color: var(--f-grau);
  margin-top: .1rem;
}
.lwf-pp-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .15rem;
  white-space: nowrap;
}
.lwf-pp-price { font-weight: 800; color: var(--f-signal-dunkel); font-size: .9rem; }
.lwf-pp-reason {
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--f-rot);
  font-weight: 700;
}

/* ---- Responsive ---- */
@media (max-width: 560px) {
  .lwf-toolbar { flex-direction: column; align-items: stretch; }
  .lwf-fld { width: 100%; }
  .lwf-select { width: 100%; }
  .lwf-cap-head { flex-direction: column; align-items: flex-start; }
  .lwf-pitch { padding: 1rem .4rem 1.25rem; gap: .85rem; }
  .lwf-row { gap: .35rem; }
  .lwf-slot { width: 78px; max-width: 28vw; }
  .lwf-name { font-size: .76rem; }
  .lwf-actions .lwf-btn { flex: 1; text-align: center; }

  /* Picker becomes a full-screen sheet */
  .lwf-overlay { padding: 0; align-items: stretch; }
  .lwf-sheet {
    max-width: none;
    max-height: none;
    height: 100%;
    border: 0;
    border-top: 4px solid var(--f-signal);
  }
}