/* ==========================================================================
   TRANSFERMARKT – Status, Suche, Filter, Spielerliste, Karten, Detail, Chart
   ========================================================================== */

/* ---------------------------------------------------------------- Status */
.market-status {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-top: .4rem;
  padding: .75rem 1rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
}
.market-status .ms-label { font-weight: 700; letter-spacing: .04em; }
.market-status .ms-time { color: var(--muted); font-size: .88rem; font-variant-numeric: tabular-nums; }
.market-status .ms-actions { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; }
@media (prefers-reduced-motion: no-preference) { .badge-live .live-dot { animation: pulse 1.6s infinite; } }

/* ---------------------------------------------------------------- Toolbar */
.market { padding: 1.5rem 0 3rem; }
.market-toolbar { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }
.search { position: relative; flex: 1 1 320px; display: block; }
.search svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search input { padding-left: 2.6rem; height: 50px; border-radius: 14px; background: var(--surface); font-size: 1rem; }
.market-toolbar > select { width: auto; min-width: 200px; height: 50px; border-radius: 14px; background: var(--surface); }
.filter-toggle { display: none; height: 50px; }
.chips { display: flex; gap: .45rem; overflow-x: auto; padding: .9rem 0 .2rem; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; padding: .45rem .9rem; border-radius: 999px; border: 1px solid var(--line-2); background: var(--surface); font-size: .78rem; font-weight: 700; letter-spacing: .06em; min-height: 36px; }
.chip:hover { border-color: var(--accent); }
.chip[aria-pressed="true"] { background: var(--accent); color: #031008; border-color: var(--accent); }

/* ---------------------------------------------------------------- Layout */
.market-layout { display: grid; grid-template-columns: 270px 1fr; gap: 1.4rem; margin-top: 1rem; align-items: start; }
.filters { position: sticky; top: calc(var(--nav-h) + 12px); max-height: calc(100svh - var(--nav-h) - 24px); overflow-y: auto; padding: 1.1rem; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); scrollbar-width: thin; }
.filters h3 { font-size: 1.25rem; margin-bottom: .8rem; display: flex; justify-content: space-between; align-items: center; }
.filters h3 button { font-family: var(--font); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); background: none; border: 0; font-weight: 700; }
.fgroup { padding: .8rem 0; border-top: 1px solid var(--line); display: grid; gap: .5rem; }
.fgroup > span { font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.fgroup select, .fgroup input { min-height: 40px; padding: .5rem .7rem; font-size: .9rem; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.range { display: grid; grid-template-columns: 38px 1fr 30px; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 700; }
.range input { padding: 0; min-height: 22px; border: 0; background: transparent; accent-color: var(--accent); }
.range output { color: var(--accent); text-align: right; font-variant-numeric: tabular-nums; }
.fnote { font-size: .76rem; color: var(--muted); }
.fcheck { display: flex; align-items: center; gap: .5rem; font-size: .9rem; cursor: pointer; }
.fcheck input { width: 18px; height: 18px; min-height: 0; accent-color: var(--accent); }

.market-meta { display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--muted); font-size: .88rem; margin-bottom: .7rem; flex-wrap: wrap; }

/* ---------------------------------------------------------------- Liste */
.player-list { display: grid; gap: .55rem; }
.prow {
  display: grid; grid-template-columns: 64px minmax(160px, 1.4fr) repeat(6, 44px) minmax(150px, 1fr); align-items: center; gap: .9rem;
  padding: .6rem .9rem .6rem .6rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
  text-align: left; width: 100%; transition: border-color .2s, transform .15s, background .2s; content-visibility: auto; contain-intrinsic-size: 0 84px;
}
.prow:hover { border-color: rgba(57, 255, 143, .45); background: var(--surface-2); transform: translateX(3px); }
.prow-name strong { display: block; font-size: 1rem; }
.prow-name span { display: block; color: var(--muted); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow-name .tags { display: flex; gap: .3rem; margin-top: .25rem; flex-wrap: wrap; }
.tag { font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: .1rem .4rem; border-radius: 6px; background: var(--surface-3); color: var(--muted); }
.tag-meta { background: var(--accent-dim); color: var(--accent); }
.st { text-align: center; }
.st b { display: block; font-size: 1rem; font-variant-numeric: tabular-nums; }
.st small { font-size: .62rem; color: var(--muted); font-weight: 700; letter-spacing: .08em; }
.hi { color: var(--accent); }
.mid { color: #d8f36a; }
.lo { color: var(--muted); }
.prow-price { text-align: right; }
.price-val { font-family: var(--font-head); font-size: 1.4rem; font-weight: 800; display: inline-flex; align-items: center; gap: .3rem; font-variant-numeric: tabular-nums; }
.price-val .coin { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe28a, #c9971d); box-shadow: inset 0 0 0 2px #a8790f; flex: none; }
.price-chg { font-size: .8rem; font-weight: 700; display: block; }
.up { color: var(--accent); }
.down { color: var(--danger); }
.price-na { color: var(--muted); font-size: .8rem; }
.price-flash-up { animation: flashUp 1.2s ease; }
.price-flash-down { animation: flashDown 1.2s ease; }
@keyframes flashUp { 0% { background: rgba(57, 255, 143, .25); } 100% { background: transparent; } }
@keyframes flashDown { 0% { background: rgba(255, 90, 95, .25); } 100% { background: transparent; } }
.empty { padding: 3rem 1rem; text-align: center; color: var(--muted); border: 1px dashed var(--line-2); border-radius: 16px; }

.pager { display: flex; justify-content: center; align-items: center; gap: .4rem; margin-top: 1.4rem; flex-wrap: wrap; }
.pager button { min-width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); font-weight: 700; }
.pager button[aria-current="page"] { background: var(--accent); color: #031008; border-color: var(--accent); }
.pager button:disabled { opacity: .35; cursor: default; }

/* ---------------------------------------------------------------- Spielerkarte (geteilt mit Squad Builder) */
.pcard {
  --c1: #d9b45b; --c2: #6d5320; --ink: #1b1306;
  position: relative; width: 64px; aspect-ratio: 3 / 4; border-radius: 10px 10px 18px 18px;
  background: linear-gradient(160deg, var(--c1), var(--c2)); color: var(--ink); overflow: hidden;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35), 0 6px 16px -6px rgba(0, 0, 0, .6);
  font-family: var(--font-head); flex: none;
}
.pcard::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .28) 45%, transparent 55%); opacity: .7; }
.pcard .pc-r { position: absolute; left: 7%; top: 5%; font-size: 1.15em; font-weight: 800; line-height: 1; }
.pcard .pc-p { position: absolute; left: 7%; top: 27%; font-size: .55em; font-weight: 800; letter-spacing: .05em; }
.pcard .pc-a { position: absolute; right: 6%; top: 8%; width: 58%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .95em; background: rgba(0, 0, 0, .15); color: rgba(0, 0, 0, .55); }
.pcard .pc-n { position: absolute; left: 4%; right: 4%; bottom: 10%; text-align: center; font-weight: 800; font-size: .58em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard.t-totw { --c1: #2b2b2b; --c2: #050505; --ink: #f6d26b; box-shadow: inset 0 0 0 1.5px #f6d26b, 0 6px 16px -6px rgba(0, 0, 0, .6); }
.pcard.t-totw .pc-a { color: rgba(246, 210, 107, .7); background: rgba(246, 210, 107, .08); }
.pcard.t-icon { --c1: #f7f1dc; --c2: #b9a774; --ink: #3a2f12; }
.pcard.t-hero { --c1: #6c3cff; --c2: #2a1366; --ink: #fff; }
.pcard.t-hero .pc-a { color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .1); }
.pcard.t-gold-rare { --c1: #f1cf6b; --c2: #8a6418; }
.pcard.big { width: 230px; font-size: 32px; border-radius: 22px 22px 46px 46px; }

/* ---------------------------------------------------------------- Detail */
.pd { display: grid; grid-template-columns: 260px 1fr; gap: 1.8rem; }
.pd-left { display: grid; justify-items: center; gap: 1rem; align-content: start; }
.pd-head { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.pd-head h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); font-style: italic; }
.pd-sub { color: var(--muted); margin-top: .3rem; }
.pd-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .6rem; margin: 1.2rem 0; }
.pd-facts div { padding: .7rem .8rem; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.pd-facts span { display: block; font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.pd-facts strong { font-size: .98rem; }
.pd-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.pd-stat { padding: .6rem .7rem; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.pd-stat div { display: flex; justify-content: space-between; font-weight: 700; font-size: .85rem; }
.bar { height: 6px; border-radius: 6px; background: var(--surface-3); margin-top: .45rem; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); }
.pd-market { margin-top: 1.3rem; padding: 1.2rem; border-radius: 16px; background: linear-gradient(140deg, rgba(57, 255, 143, .08), transparent 60%), var(--surface); border: 1px solid var(--line-2); }
.pd-market .pm-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.pd-market .pm-price { font-family: var(--font-head); font-size: 2.8rem; font-weight: 800; line-height: 1; display: flex; align-items: center; gap: .5rem; }
.pd-market .pm-price .coin { width: 26px; height: 26px; }
.pd-market h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.chart { margin-top: 1rem; position: relative; }
.chart svg { width: 100%; height: 220px; overflow: visible; }
.chart .grid line { stroke: var(--line); }
.chart .axis text { fill: var(--muted); font-size: 11px; font-family: var(--font); }
.chart .tip { position: absolute; pointer-events: none; padding: .35rem .55rem; border-radius: 8px; background: var(--surface-3); border: 1px solid var(--line-2); font-size: .78rem; white-space: nowrap; transform: translate(-50%, -120%); opacity: 0; transition: opacity .15s; }
.chart-empty { height: 220px; display: grid; place-items: center; text-align: center; color: var(--muted); border: 1px dashed var(--line-2); border-radius: 14px; margin-top: 1rem; padding: 1rem; }
.pd-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.2rem; }
.pd-playstyles { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: center; }
.pd-playstyles .tag { font-size: .66rem; }
.tag-plus { background: rgba(246, 210, 107, .14); color: var(--gold); }

/* ---------------------------------------------------------------- Responsive */
@media (max-width: 1100px) {
  .prow { grid-template-columns: 64px minmax(150px, 1.4fr) repeat(3, 44px) minmax(130px, 1fr); }
  .prow .st-extra { display: none; }
}
@media (max-width: 900px) {
  .market-layout { grid-template-columns: 1fr; }
  .filter-toggle { display: inline-flex; }
  .filters { position: fixed; inset: auto 0 0 0; top: auto; z-index: 120; max-height: 78svh; border-radius: 22px 22px 0 0; transform: translateY(105%); transition: transform .3s ease; box-shadow: 0 -20px 50px rgba(0, 0, 0, .6); }
  .filters.open { transform: none; }
  .pd { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .prow { grid-template-columns: 56px 1fr auto; gap: .7rem; }
  .prow .st { display: none; }
  .pcard { width: 56px; }
  .price-val { font-size: 1.15rem; }
  .market-toolbar > select { flex: 1 1 140px; min-width: 0; }
  .pd-stats { grid-template-columns: repeat(2, 1fr); }
  .pcard.big { width: 180px; font-size: 25px; }
}

/* Echte EA-Kartenbilder */
.pcard.pcard-real { background: none; border: 0; box-shadow: none; padding: 0; aspect-ratio: 680 / 895; display: grid; place-items: center; overflow: visible; }
.pcard.pcard-real img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .45)); }
.pcard.pcard-real .pc-fallback { display: none; }
.pcard.pcard-real.pcard-broken { background: var(--surface-3); border-radius: 10px; }
.pcard.pcard-real.pcard-broken .pc-fallback { display: block; font-weight: 800; font-size: .8em; text-align: center; }

/* FC-27-Karten aus echten EA-Daten (Größe skaliert über Container-Einheiten mit der Kartenbreite) */
.pcard.pcard-ea { background: none; box-shadow: none; overflow: visible; aspect-ratio: 680 / 895; border-radius: 0; container-type: inline-size; color: var(--ink); filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .45)); }
.pcard.pcard-ea::after { display: none; }
.pcard-ea .pe {
  position: absolute; inset: 0; overflow: hidden;
  clip-path: polygon(50% 0, 62% 4%, 86% 4%, 100% 10%, 100% 84%, 50% 100%, 0 84%, 0 10%, 14% 4%, 38% 4%);
  background:
    linear-gradient(115deg, transparent 28%, rgba(255, 255, 255, .35) 42%, transparent 54%),
    radial-gradient(circle at 70% 25%, rgba(255, 255, 255, .45), transparent 45%),
    linear-gradient(165deg, var(--c1), var(--c2));
}
.pcard-ea.tier-gold { --c1: #f6dd8c; --c2: #b98a2a; --ink: #3a2a08; }
.pcard-ea.tier-silver { --c1: #eef1f4; --c2: #8f9aa6; --ink: #1f2933; }
.pcard-ea.tier-bronze { --c1: #e8b07a; --c2: #8a5427; --ink: #2e1708; }
.pcard-ea .pe-r { position: absolute; left: 11cqw; top: 9cqw; font-size: 21cqw; font-weight: 800; line-height: .9; }
.pcard-ea .pe-p { position: absolute; left: 12cqw; top: 31cqw; font-size: 10cqw; font-weight: 800; }
.pcard-ea .pe-face { position: absolute; right: 4cqw; top: 9cqw; width: 66cqw; height: 66cqw; object-fit: contain; object-position: bottom; }
.pcard-ea .pe-n { position: absolute; left: 4cqw; right: 4cqw; top: 76cqw; text-align: center; font-size: 13cqw; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-top: .6cqw solid rgba(0, 0, 0, .15); padding-top: 1cqw; }
.pcard-ea .pe-s { position: absolute; left: 7cqw; right: 7cqw; top: 93cqw; display: grid; grid-template-columns: repeat(6, 1fr); text-align: center; }
.pcard-ea .pe-s span { display: grid; line-height: 1; }
.pcard-ea .pe-s small { order: -1; font-size: 5.6cqw; font-weight: 700; opacity: .8; font-family: var(--font); }
.pcard-ea .pe-s b { font-size: 10cqw; font-weight: 800; }
.pcard-ea .pe-i { position: absolute; left: 0; right: 0; top: 112cqw; display: flex; justify-content: center; gap: 4cqw; }
.pcard-ea .pe-i img { height: 9cqw; width: auto; }