/* ════════════════════════════════════════════════════════════════════════
   FANTASY ROOM — the redesign (22.10.2026), from the Claude Design "Fantasy" file.
   Loaded after fantasy_league.css and written over it: the room stays dark (an arena at
   night, one amber accent) but takes the design system's shapes — square corners, the
   app's fonts and numerals, tabs as an underlined row, a head with the league and round,
   a big title, the Professor on the captain and the clock to the lock in four boxes, four
   tiles for what matters, bonuses as a 2x2 grid. The court, the jerseys and every game
   rule are untouched. Scoped to .fx-app.
   ════════════════════════════════════════════════════════════════════════ */

.fx-app {
  --fx-radius: 0;
  font-family: var(--ds-font);
}
.fx-app h1, .fx-app h2, .fx-app h3, .fx-app h4 { font-family: var(--ds-font); }

/* ── Top row ── */
.fx-back { border-radius: 0; background: transparent; border-color: rgba(255, 255, 255, .35); font-weight: 800; }
.fx-league { display: none; }                         /* the head says it now */

/* ── The head ── */
.fx-hero {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px 32px; align-items: end;
  min-block-size: 0; padding-block: clamp(28px, 6vw, 56px) clamp(22px, 4vw, 40px);
  border-radius: 0; border-block-end: 3px solid var(--fx-accent);
  background-image: linear-gradient(180deg, rgba(7, 11, 20, .55), rgba(7, 11, 20, .9)), var(--fx-hero-photo, none),
    linear-gradient(135deg, rgba(255, 159, 67, .16), rgba(255, 255, 255, .03) 55%);
}
@container fx (min-width: 860px) { .fx-hero { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); } }
.fx-hero-copy { grid-column: auto; grid-row: auto; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.fx-eyebrow { display: flex; align-items: center; gap: 10px; font: 800 var(--ds-fs-14) var(--ds-font); letter-spacing: .04em; text-transform: none; color: var(--fx-accent); }
.fx-sq { display: inline-block; flex: none; width: 12px; height: 12px; background: var(--fx-accent); }
.fx-title { margin: 0; font: 900 var(--ds-fd-64)/.95 var(--ds-font); letter-spacing: -.035em; text-wrap: balance; }
.fx-sub { max-inline-size: 560px; margin: 0; font: 500 var(--ds-fs-17)/1.5 var(--ds-font); color: #d6dceb; }
@container fx (max-width: 559px) { .fx-title { font-size: 44px; } .fx-sub { font-size: var(--ds-fs-15); } }

.fx-capcard { display: flex; align-items: center; gap: 14px; margin-block-start: 8px; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(7, 11, 20, .55); max-inline-size: 460px; }
.fx-capcard img { flex: none; inline-size: 44px; block-size: 44px; border-radius: 50%; object-fit: cover; }
.fx-capcard > div { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.fx-capk { font: 800 var(--ds-fs-12) var(--ds-font); color: var(--fx-accent); }
.fx-capcard strong { font: 900 var(--ds-fs-20) var(--ds-font); }
.fx-capcard span { font: 500 var(--ds-fs-13)/1.45 var(--ds-font); color: #d6dceb; }

.fx-lock { padding: 18px 20px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(7, 11, 20, .62); display: flex; flex-direction: column; gap: 14px; }
.fx-lock-h { display: flex; align-items: center; gap: 10px; margin: 0; font: 800 var(--ds-fs-14) var(--ds-font); }
.fx-dot { flex: none; inline-size: 12px; block-size: 12px; border-radius: 50%; background: var(--fx-good); box-shadow: 0 0 0 4px rgba(71, 215, 193, .22); }
.fx-dot.locked { background: var(--fx-accent); box-shadow: 0 0 0 4px rgba(255, 159, 67, .22); }
.fx-lock-t { display: flex; align-items: flex-start; justify-content: space-between; gap: 4px; }
.fx-lock-t span { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; }
.fx-lock-t b { font: 700 clamp(44px, 8vw, 68px)/1 var(--ds-font-num); font-variant-numeric: tabular-nums; }
.fx-lock-t small { font: 700 var(--ds-fs-12) var(--ds-font); color: #c3cbdc; }
.fx-lock-t i { font: 700 40px/1.2 var(--ds-font-num); font-style: normal; color: #8f9bb4; }
.fx-lock-n { margin: 0; font: 600 var(--ds-fs-13)/1.45 var(--ds-font); color: #c3cbdc; }

/* ── Tabs: an underlined row ── */
.fx-tabs { gap: 0; padding: 0; margin-block-end: 18px; border-block-end: 1px solid var(--fx-line); overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
.fx-tabs::-webkit-scrollbar { display: none; }
.fx-tab {
  flex: none; min-block-size: 52px; padding: 0 20px; border: 0; border-block-end: 3px solid transparent; border-radius: 0; background: transparent;
  margin-block-end: -1px; font: 600 var(--ds-fs-17) var(--ds-font); color: var(--fx-muted);
}
.fx-tab:hover { color: #fff; }
.fx-tab.on { background: transparent; color: #fff; font-weight: 800; border-block-end-color: var(--fx-accent); }
@container fx (max-width: 559px) { .fx-tab { padding: 0 14px; font-size: var(--ds-fs-15); min-block-size: 46px; } }

/* ── The four tiles ── */
.fx-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-block-end: 16px; }
@container fx (max-width: 719px) { .fx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fx-tile { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; background: #f4efe6; color: #0c1630; min-inline-size: 0; }
.fx-tile.dark { background: rgba(255, 255, 255, .06); color: #fff; border: 1px solid var(--fx-line); }
.fx-tile b { font: 800 clamp(26px, 4vw, 34px)/1.1 var(--ds-font-num); overflow-wrap: anywhere; }
.fx-tile span { font: 700 var(--ds-fs-13) var(--ds-font); opacity: .8; }

/* ── Square, everywhere ── */
.fx-bench, .fx-mini, .fx-chip-card, .fx-coach-btn, .fx-build, .fx-adv, .fx-swap, .fx-rule, .fx-league-row, .fx-game,
.fx-table-wrap, .fx-empty, .fx-vital, .fx-error, .fx-skel, .fx-row, .fx-input, .fx-field input, .fx-btn, .fx-pill, .fx-chip-ico,
.fx-val, .fx-val-lbl, .fx-card, .fx-plate, .fx-x { border-radius: 0; }
.fx-pill { border-radius: 0; }
.fx-bar { border-radius: 0; }
.fx-bar span { background: var(--fx-accent); }
.fx-court { border-radius: 0; }
.fx-sheet { border-radius: var(--ds-r-sheet) var(--ds-r-sheet) 0 0; }
@media (min-width: 700px) { .fx-sheet { border-radius: 0; } }
.fx-btn { font-family: var(--ds-font); }
.fx-btn.primary { background: var(--fx-accent); color: var(--fx-accent-ink); }
.fx-h { font: 900 var(--ds-fs-17) var(--ds-font); }

/* ── Bonuses: a 2x2 grid ── */
.fx-chip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fx-chip-card { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; min-block-size: 150px; }
.fx-chip-ico { inline-size: auto; block-size: auto; padding: 0; background: transparent; font: 800 34px/1 var(--ds-font-num); color: #fff; }
.fx-chip-card.on .fx-chip-ico { color: var(--fx-accent); }
.fx-chip-txt strong { font: 900 var(--ds-fs-15) var(--ds-font); }
.fx-chip-txt em { font: 800 var(--ds-fs-13) var(--ds-font); color: #fff; }
.fx-chip-card.spent em { color: var(--fx-muted); }

/* ── The coach and the bench ── */
.fx-coach-btn { padding: 14px 16px; }
.fx-bench { padding: 16px; }

/* ── Tables and rows keep their numerals ── */
.fx-table td, .fx-table th { font-family: var(--ds-font); }
.fx-table td { font-variant-numeric: tabular-nums; }

/* ── The flat court (Claude Design v3, 28.10) ── */
.fx-court.fx-court3 {
  position: relative; display: block; inline-size: 100%; min-block-size: 0; padding: 0; border: 0; border-radius: 0; overflow: hidden;
  aspect-ratio: 500 / 412.5;
  max-inline-size: none; margin-inline: 0; grid-template-rows: none;
  /* The earlier court rule fixed a dark background with !important; this one must beat it. */
  background-color: #C8925A !important;
  background-image: linear-gradient(rgba(0,0,0,.12), rgba(0,0,0,.12)),
    radial-gradient(ellipse 75% 55% at 50% 0%, rgba(255,238,205,.45), rgba(255,238,205,0) 70%),
    linear-gradient(180deg, rgba(60,30,8,0) 45%, rgba(60,30,8,.32)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 5px, rgba(255,255,255,0) 5px 11px, rgba(0,0,0,.05) 11px 14px, rgba(0,0,0,0) 14px 23px),
    repeating-linear-gradient(90deg, #D4A167 0 13px, rgba(120,70,30,.55) 13px 14px, #CB9559 14px 27px, rgba(120,70,30,.55) 27px 28px, #D9AA70 28px 41px, rgba(120,70,30,.55) 41px 42px) !important;
  box-shadow: inset 0 0 0 7px #6E3F18, inset 0 0 50px rgba(0,0,0,.35), 0 18px 40px rgba(0,0,0,.3);
}
.fx-court3 .fx-court-art { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; display: block; }
.fx-court3 .fx-court-art.m { display: none; }
.fx-court3 .fx-line {
  position: absolute; inset-inline: 0; z-index: 1; transform: translateY(-38%); display: flex; flex-wrap: nowrap; align-items: flex-start;
  padding: 0; gap: 0; min-block-size: 0;
}
.fx-court3 .fx-line-C { top: 29%; justify-content: space-evenly; padding-inline: 30%; }
.fx-court3 .fx-line-F { top: 41%; justify-content: space-between; padding-inline: 6%; }
.fx-court3 .fx-line-G { top: 75%; justify-content: space-evenly; padding-inline: 14%; }
@media (max-width: 560px) {
  .fx-court.fx-court3 { aspect-ratio: 500 / 540; }
  .fx-court3 .fx-court-art.d { display: none; }
  .fx-court3 .fx-court-art.m { display: block; }
  .fx-court3 .fx-line-C { top: 22%; }
  .fx-court3 .fx-line-F { top: 29%; padding-inline: 2%; }
  .fx-court3 .fx-line-G { top: 66%; padding-inline: 8%; }
}

/* Plate: name, position, price and average (Claude Design v3) */
.fx-ppos { display: block; padding: 0 6px; font: 700 12px/1.3 var(--ds-font); text-align: center; white-space: nowrap; color: #FFB27A; }
.fx-plate .fx-pmeta { color: #C9D2E6; font: 700 12px/1.3 var(--ds-font); }
.fx-card.bench .fx-plate { background: transparent; box-shadow: none; min-inline-size: 0; }
.fx-card.bench .fx-plate .fx-pname { color: var(--fx-text); }
.fx-card.bench .fx-plate .fx-pmeta { color: var(--fx-muted); font-weight: 600; }

/* The chosen player, as a panel at the top of the side column (Claude Design v3) */
.fx-selp { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--fx-card2, rgba(255,255,255,.09)); border: 1px solid var(--fx-line); }
.fx-sp-head { display: flex; align-items: center; gap: 12px; }
.fx-sp-id { flex: 1; min-width: 0; }
.fx-sp-id h3 { margin: 0; font: 900 20px/1.2 var(--ds-font); }
.fx-sp-id p { margin: 2px 0 0; font: 600 13px var(--ds-font); color: var(--fx-muted); }
.fx-sp-x { flex: none; inline-size: 40px; block-size: 40px; display: grid; place-items: center; border: 1.5px solid var(--fx-line); background: transparent; color: inherit; font-size: 22px; line-height: 1; cursor: pointer; }
.fx-sp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fx-sp-stat { padding: 10px 12px; background: rgba(0,0,0,.28); }
.fx-sp-stat b { display: block; font: 800 24px/1 var(--ds-font-num); }
.fx-sp-stat span { display: block; margin-top: 5px; font: 600 12px var(--ds-font); color: var(--fx-muted); }
.fx-sp-now { margin: 0; font: 600 13px/1.5 var(--ds-font); color: var(--fx-muted); }
.fx-sp-why { display: flex; gap: 10px; font: 500 14px/1.55 var(--ds-font); }
.fx-sp-why img { flex: none; inline-size: 28px; block-size: 28px; border-radius: 50%; }
.fx-sp-why div { display: flex; flex-direction: column; gap: 2px; }
.fx-selp .fx-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.fx-selp .fx-btn { min-block-size: 44px; }
/* Bench: three equal columns, names and numbers written out in full (Claude Design v3) */
.fx-bench-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; justify-content: stretch; }
.fx-card.bench { inline-size: auto; min-inline-size: 0; max-inline-size: none; }
.fx-card.bench .fx-pname, .fx-card.bench .fx-pmeta { white-space: normal; overflow: visible; text-overflow: clip; text-align: center; }

/* Rules: how points are earned (Claude Design v3) */
.fx-score { padding: 18px; margin-block-end: 14px; background: var(--fx-card); border: 1px solid var(--fx-line); }
.fx-score h3 { margin: 0 0 6px; font: 900 20px/1.25 var(--ds-font); }
.fx-score p { margin: 0 0 12px; font: 500 14px/1.6 var(--ds-font); color: var(--fx-muted); }
.fx-score-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-block-end: 12px; }
.fx-score-c { display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 16px; background: rgba(0,0,0,.28); }
.fx-score-c b { font: 800 32px/1 var(--ds-font-num); }
.fx-score-c span { font: 600 13px var(--ds-font); color: var(--fx-muted); }
.fx-score-ex { padding-top: 12px; border-top: 1px solid var(--fx-line); margin: 0 !important; }
@container fx (max-width: 639px) { .fx-score-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fx-score-c { flex-direction: row-reverse; align-items: center; justify-content: space-between; min-height: 48px; padding: 6px 16px; } }
@media (max-width: 639px) { .fx-score-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }