/* Edge chart room — big-type 350 economy map. Uses the site shell tokens so
   light and dark stay consistent; team colors arrive through --ec-team. */

#edge.view { max-width: var(--pd-content-max, 1280px); margin: 0 auto; padding: 0 18px 72px; }

.ec-shell { display: grid; gap: 26px; --ec-team: #d7b256; --ec-team-2: #b98a2f; }

.ec-loading, .ec-error { display: grid; justify-items: center; gap: 12px; padding: 90px 20px; text-align: center; }
.ec-loading p { margin: 0; color: var(--pd-text-secondary); font-size: 13px; font-weight: 700; }
.ec-error strong { color: var(--pd-error-text, #8b1821); font-size: 19px; font-weight: 900; }
.ec-error p { margin: 0; max-width: 46ch; color: var(--pd-text-secondary); font-size: 13px; line-height: 1.55; }

.ec-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 20px;
  border: 1px solid var(--pd-border-strong); border-radius: 12px; background: var(--pd-surface-elevated);
  color: var(--pd-text-primary); font-size: 13px; font-weight: 900; letter-spacing: .02em; text-decoration: none; cursor: pointer;
}
.ec-btn-primary { border-color: transparent; background: linear-gradient(135deg, #e6c76e, #b98a2f); color: #1a1405; }
.ec-btn:hover { transform: translateY(-1px); }

/* Hero ------------------------------------------------------------------ */

.ec-hero {
  position: relative; overflow: hidden; margin-top: 18px; padding: clamp(24px, 4vw, 44px);
  border-radius: 26px; border: 1px solid #2c2c31; background:
    radial-gradient(120% 150% at 12% 0%, rgba(215, 178, 86, .28), transparent 54%),
    radial-gradient(90% 120% at 100% 100%, rgba(79, 141, 247, .18), transparent 60%),
    linear-gradient(160deg, #1c1c21, #0b0b0e);
  color: #f7f4ea; box-shadow: 0 24px 60px rgba(9, 9, 12, .35);
}
.ec-hero-copy { position: relative; z-index: 1; }
.ec-eyebrow { margin: 0; color: #d7b256; font-size: 11px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; }
.ec-title { margin: 8px 0 10px; font: 950 clamp(34px, 5vw, 62px)/1 var(--pd-font-display, sans-serif); letter-spacing: -.03em; }
.ec-total { display: inline-block; color: #f2d27c; font: inherit; font-size: clamp(64px, 15vw, 190px); line-height: .82; letter-spacing: -.05em; vertical-align: -0.06em; }
.ec-hero-sub { margin: 0; max-width: 64ch; color: rgba(247, 244, 234, .72); font-size: 14px; font-weight: 600; line-height: 1.6; }

.ec-stack { display: flex; gap: 3px; margin-top: 22px; height: 22px; border-radius: 999px; overflow: hidden; }
.ec-seg { width: var(--ec-w, 0%); min-width: 5px; background: var(--ec-seg, #8b8b93); opacity: .92; }
.ec-seg[data-lane="clips"] { --ec-seg: #d7b256; }
.ec-seg[data-lane="minigram"] { --ec-seg: #4f8df7; }
.ec-seg[data-lane="tonight"] { --ec-seg: #7f6bf0; }
.ec-seg[data-lane="press_release"] { --ec-seg: #a15bd8; }
.ec-seg[data-lane="dynasty_pickem"] { --ec-seg: #e06cae; }
.ec-seg[data-lane="in_game"] { --ec-seg: #e05252; }
.ec-seg[data-lane="voice"] { --ec-seg: #2fb59b; }
.ec-seg[data-lane="played_games"] { --ec-seg: #58b06a; }
.ec-seg[data-lane="season_setup"] { --ec-seg: #d9a24a; }
.ec-seg[data-lane="user_vs_user"] { --ec-seg: #59c3d6; }

.ec-legend {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 7px 14px;
  margin: 16px 0 0; padding: 0; list-style: none;
}
.ec-legend li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; }
.ec-legend span { color: rgba(247, 244, 234, .78); font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.ec-legend strong { color: #fff; font: 900 14px/1 var(--pd-font-mono, monospace); }
.ec-dot { width: 10px; height: 10px; border-radius: 3px; background: #8b8b93; }
.ec-legend [data-lane="clips"] .ec-dot { background: #d7b256; }
.ec-legend [data-lane="minigram"] .ec-dot { background: #4f8df7; }
.ec-legend [data-lane="tonight"] .ec-dot { background: #7f6bf0; }
.ec-legend [data-lane="press_release"] .ec-dot { background: #a15bd8; }
.ec-legend [data-lane="dynasty_pickem"] .ec-dot { background: #e06cae; }
.ec-legend [data-lane="in_game"] .ec-dot { background: #e05252; }
.ec-legend [data-lane="voice"] .ec-dot { background: #2fb59b; }
.ec-legend [data-lane="played_games"] .ec-dot { background: #58b06a; }
.ec-legend [data-lane="season_setup"] .ec-dot { background: #d9a24a; }
.ec-legend [data-lane="user_vs_user"] .ec-dot { background: #59c3d6; }

.ec-viewer {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  margin-top: 20px; padding: 14px 16px; border: 1px solid rgba(247, 244, 234, .18); border-radius: 16px;
  background: rgba(255, 255, 255, .05);
}
.ec-viewer-signedout { grid-template-columns: minmax(0, 1fr) auto; }
.ec-viewer small { display: block; color: rgba(247, 244, 234, .6); font-size: 10px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.ec-viewer strong { display: block; margin-top: 3px; color: #fff; font-size: 15px; font-weight: 900; }
.ec-viewer em { color: rgba(247, 244, 234, .72); font-size: 11px; font-style: normal; font-weight: 800; }
.ec-team-badge {
  display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 13px;
  background: linear-gradient(135deg, var(--ec-team), var(--ec-team-2)); color: #fff; font: 950 15px/1 var(--pd-font-display, sans-serif);
}
.ec-viewer-main { min-width: 0; }
.ec-viewer-side { text-align: right; }

/* Shared bars ------------------------------------------------------------ */

.ec-bar-wrap { display: grid; gap: 5px; min-width: 0; }
.ec-bar { position: relative; display: block; overflow: hidden; height: 12px; border-radius: 999px; background: var(--pd-surface-interactive); }
.ec-bar i { display: block; width: var(--ec-fill, 0%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ec-team), var(--ec-team-2)); transition: width .5s ease; }
.ec-bar-label { color: var(--pd-text-secondary); font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.ec-bar-cap { padding: 1px 6px; border-radius: 999px; background: var(--pd-status-final-bg); color: var(--pd-status-final-text); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; }
.ec-bar-bucket { height: 15px; }
.ec-bar-wallet { margin-top: 7px; background: rgba(255, 255, 255, .14); }
.ec-bar-wallet i { background: linear-gradient(90deg, #f2d27c, #d7b256); }

/* Sections --------------------------------------------------------------- */

.ec-section { display: grid; gap: 16px; }
.ec-section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; padding-top: 8px; border-top: 1px solid var(--pd-border); }
.ec-section-head small { display: block; color: var(--pd-text-secondary); font-size: 10.5px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.ec-section-head h2 { margin: 4px 0 0; color: var(--pd-text-primary); font: 950 clamp(26px, 3.6vw, 44px)/1 var(--pd-font-display, sans-serif); letter-spacing: -.02em; }
.ec-section-head p { margin: 6px 0 0; max-width: 62ch; color: var(--pd-text-secondary); font-size: 13px; line-height: 1.55; }
.ec-recon, .ec-recon-math { color: var(--pd-text-secondary); font: 800 12px/1.5 var(--pd-font-mono, monospace); }
.ec-recon { padding: 7px 12px; border: 1px solid var(--pd-border); border-radius: 999px; background: var(--pd-surface-elevated); }
.ec-recon.is-exact { border-color: transparent; background: var(--pd-status-selected-bg); color: var(--pd-status-selected-text); }

.ec-buckets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ec-bucket { display: grid; gap: 10px; padding: 18px; border: 1px solid var(--pd-border); border-radius: 20px; background: var(--pd-surface-base); box-shadow: var(--pd-shadow-sm); }
.ec-bucket-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.ec-bucket-key small { color: var(--pd-text-secondary); font-size: 9.5px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.ec-bucket-key h2 { margin: 3px 0 0; color: var(--pd-text-primary); font: 950 clamp(20px, 2vw, 27px)/1.05 var(--pd-font-display, sans-serif); letter-spacing: -.02em; }
.ec-bucket-cap { text-align: right; }
.ec-bucket-cap strong { display: block; color: var(--pd-text-primary); font: 950 clamp(30px, 3vw, 44px)/.9 var(--pd-font-display, sans-serif); letter-spacing: -.03em; }
.ec-bucket-cap small { color: var(--pd-text-secondary); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }

.ec-lanes { display: grid; gap: 10px; }

.ec-lane { display: grid; gap: 7px; padding: 13px 14px; border: 1px solid var(--pd-border); border-radius: 15px; background: var(--pd-surface-elevated); }
.ec-lane-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; }
.ec-mono {
  display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 7px; border-radius: 11px;
  background: var(--pd-surface-premium); color: #f2d27c; font: 950 12px/1 var(--pd-font-mono, monospace); letter-spacing: .04em;
}
.ec-lane-title { min-width: 0; }
.ec-lane-title h3 { margin: 0 0 5px; color: var(--pd-text-primary); font-size: 13px; font-weight: 900; letter-spacing: .02em; }
.ec-lane-num { color: var(--pd-text-primary); font: 950 clamp(28px, 3.2vw, 46px)/.9 var(--pd-font-display, sans-serif); letter-spacing: -.04em; text-align: right; }
.ec-math {
  padding: 7px 9px; border-radius: 9px; background: var(--pd-surface-interactive); color: var(--pd-text-primary);
  font: 800 11.5px/1.4 var(--pd-font-mono, monospace); word-break: break-word;
}
.ec-trim { margin: 0; color: var(--pd-text-secondary); font-size: 11.5px; font-weight: 700; }
.ec-trim b { color: var(--pd-text-primary); }
.ec-lane-detail { margin: 0; color: var(--pd-text-secondary); font-size: 11.5px; line-height: 1.5; }
.ec-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ec-chip { padding: 4px 9px; border: 1px solid var(--pd-border); border-radius: 999px; background: var(--pd-surface-base); color: var(--pd-text-secondary); font-size: 10px; font-weight: 900; letter-spacing: .04em; }

.ec-sublanes { display: grid; gap: 5px; padding: 9px 10px; border: 1px dashed var(--pd-border-strong); border-radius: 11px; }
.ec-sublane { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ec-sublane-label { color: var(--pd-text-primary); font-size: 11.5px; font-weight: 800; }
.ec-sublane-math { color: var(--pd-text-secondary); font: 700 11px/1.3 var(--pd-font-mono, monospace); text-align: right; }

.ec-straight-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ec-straight-grid .ec-lane { padding: 17px; border-radius: 18px; background: var(--pd-surface-base); box-shadow: var(--pd-shadow-sm); }

/* Championships ---------------------------------------------------------- */

.ec-champs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ec-champ {
  position: relative; display: grid; gap: 8px; padding: 20px; border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(215, 178, 86, .45); background:
    radial-gradient(120% 130% at 10% 0%, rgba(215, 178, 86, .16), transparent 58%),
    var(--pd-surface-base);
  box-shadow: var(--pd-shadow-sm);
}
.ec-champ h3 { margin: 2px 0 0; color: var(--pd-text-primary); font-size: 14px; font-weight: 900; }
.ec-champ-num { color: #b98a2f; font: 950 clamp(52px, 6vw, 92px)/.85 var(--pd-font-display, sans-serif); letter-spacing: -.05em; }
:root[data-theme="dark"] .ec-champ-num { color: #f2d27c; }

/* Store ------------------------------------------------------------------ */

.ec-store-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ec-store-item { display: grid; gap: 5px; padding: 15px 16px; border: 1px solid var(--pd-border); border-radius: 16px; background: var(--pd-surface-base); box-shadow: var(--pd-shadow-sm); }
.ec-store-name { color: var(--pd-text-primary); font-size: 13px; font-weight: 900; }
.ec-cost { color: var(--pd-text-primary); font: 950 34px/.9 var(--pd-font-display, sans-serif); letter-spacing: -.04em; }
.ec-cost em { margin-left: 5px; color: var(--pd-text-secondary); font: 800 10.5px/1 var(--pd-font-mono, monospace); font-style: normal; letter-spacing: .1em; text-transform: uppercase; }
.ec-store-limit { color: var(--pd-text-secondary); font-size: 11px; font-weight: 800; line-height: 1.45; }
.ec-store-detail { color: var(--pd-text-secondary); font-size: 10.5px; line-height: 1.45; opacity: .85; }

.ec-age { display: grid; gap: 14px; padding: 20px; border: 1px solid var(--pd-border); border-radius: 20px; background: var(--pd-surface-elevated); }
.ec-age header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; }
.ec-age small { color: var(--pd-text-secondary); font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.ec-age h3 { margin: 4px 0 0; color: var(--pd-text-primary); font: 950 clamp(22px, 2.4vw, 32px)/1 var(--pd-font-display, sans-serif); letter-spacing: -.02em; }
.ec-age-note { margin: 0; max-width: 54ch; color: var(--pd-text-secondary); font-size: 12px; line-height: 1.5; }
.ec-tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ec-tier { display: grid; gap: 4px; padding: 14px; border: 1px solid var(--pd-border); border-radius: 15px; background: var(--pd-surface-base); }
.ec-tier-cost { color: var(--pd-text-primary); font: 950 clamp(32px, 3.4vw, 48px)/.9 var(--pd-font-display, sans-serif); letter-spacing: -.04em; }
.ec-tier-band { color: var(--pd-text-secondary); font-size: 11.5px; font-weight: 800; }
.ec-age-window { margin: 0; color: var(--pd-text-secondary); font-size: 11.5px; line-height: 1.5; }

.ec-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 14px 2px 0; border-top: 1px solid var(--pd-border); color: var(--pd-text-secondary); font-size: 11px; font-weight: 700; letter-spacing: .03em; }

/* Dark theme ------------------------------------------------------------- */

:root[data-theme="dark"] .ec-bucket,
:root[data-theme="dark"] .ec-champ,
:root[data-theme="dark"] .ec-store-item,
:root[data-theme="dark"] .ec-age,
:root[data-theme="dark"] .ec-straight-grid .ec-lane { box-shadow: none; }
:root[data-theme="dark"] .ec-mono { background: #f2d27c; color: #1a1405; }

/* Responsive ------------------------------------------------------------- */

@media (max-width: 1080px) {
  .ec-buckets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ec-bucket:last-child { grid-column: 1 / -1; }
  .ec-champs { grid-template-columns: 1fr; }
  .ec-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  #edge.view { padding: 0 12px 56px; }
  .ec-hero { border-radius: 20px; padding: 22px 18px; }
  .ec-title { font-size: 30px; }
  .ec-total { font-size: clamp(72px, 26vw, 120px); display: block; margin: 6px 0 2px; }
  .ec-hero-sub { font-size: 13px; }
  .ec-stack { height: 18px; }
  .ec-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ec-viewer { grid-template-columns: minmax(0, 1fr); }
  .ec-viewer-side { text-align: left; }
  .ec-team-badge { width: 40px; height: 40px; }
  .ec-buckets { grid-template-columns: 1fr; }
  .ec-straight-grid { grid-template-columns: 1fr; }
  .ec-store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ec-age header { display: grid; }
  .ec-lane-num { font-size: 34px; }
  .ec-section-head h2 { font-size: 27px; }
}

@media (max-width: 420px) {
  .ec-store-grid { grid-template-columns: 1fr; }
  .ec-legend { grid-template-columns: 1fr; }
  .ec-tiers { grid-template-columns: 1fr; }
  .ec-sublane { display: grid; gap: 2px; }
  .ec-sublane-math { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .ec-bar i { transition: none; }
  .ec-btn:hover { transform: none; }
}