/*
 * TrebleChasersODL
 * V1A.2 final player-experience consolidation.
 *
 * Presentation only.
 */

/* ======================================================================== */
/* SHARED                                                                  */
/* ======================================================================== */

:root {
  --tc-final-gold:
    #c7a136;

  --tc-final-gold-dark:
    #8e6d18;

  --tc-final-cyan:
    #199ead;

  --tc-final-ink:
    #1d2c33;

  --tc-final-muted:
    #66777e;

  --tc-final-line:
    rgba(31, 56, 65, .11);

  --tc-final-shadow:
    0 18px 46px rgba(24, 42, 48, .08);
}

.tc-final-kicker {
  display: inline-flex;
  align-items: center;
  gap: .35rem;

  margin-bottom: .5rem;

  color:
    var(--tc-final-gold-dark);

  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.tc-final-kicker::before {
  content: "";

  width: 22px;
  height: 2px;

  background:
    linear-gradient(
      90deg,
      var(--tc-final-gold),
      var(--tc-final-cyan)
    );
}

/* ======================================================================== */
/* HOME                                                                    */
/* ======================================================================== */

body.tc-final-home .section-head {
  margin-top: 30px;
}

body.tc-final-home .tc-competition-grid {
  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap: 18px;
}

body.tc-final-home
.tc-competition-grid
.route {
  min-height: 230px;

  display: flex;
  flex-direction: column;

  border-color:
    rgba(199, 161, 54, .18);

  background:
    linear-gradient(
      150deg,
      rgba(255,255,255,.99),
      rgba(247,252,253,.98)
    );

  box-shadow:
    var(--tc-final-shadow);
}

body.tc-final-home
.tc-competition-grid
.route-action {
  margin-top: auto;
}

.tc-home-secondary {
  margin-top: 22px;

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 12px;
}

.tc-home-secondary-link {
  min-height: 90px;

  display: flex;
  align-items: center;

  gap: 13px;

  padding: 17px 18px;

  border:
    1px solid var(--tc-final-line);

  border-radius: 17px;

  background:
    rgba(255,255,255,.96);

  color:
    var(--tc-final-ink);

  text-decoration: none;

  box-shadow:
    0 10px 28px rgba(20, 40, 48, .055);

  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
}

.tc-home-secondary-link:hover {
  transform:
    translateY(-2px);

  border-color:
    rgba(199,161,54,.42);

  box-shadow:
    0 15px 32px rgba(20,40,48,.08);
}

.tc-home-secondary-icon {
  flex:
    0 0 42px;

  width: 42px;
  height: 42px;

  display: grid;
  place-items: center;

  border-radius:
    13px;

  background:
    linear-gradient(
      145deg,
      rgba(199,161,54,.12),
      rgba(25,158,173,.10)
    );

  color:
    var(--tc-final-gold-dark);

  font-size:
    1.1rem;

  font-weight:
    900;
}

.tc-home-secondary-copy {
  display:
    grid;

  gap:
    3px;
}

.tc-home-secondary-copy strong {
  font-size:
    .92rem;
}

.tc-home-secondary-copy span {
  color:
    var(--tc-final-muted);

  font-size:
    .76rem;

  line-height:
    1.35;
}

.tc-partner-zone {
  margin-top:
    18px;

  padding:
    20px 22px;

  border:
    1px solid rgba(199,161,54,.22);

  border-radius:
    20px;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #fbfcf8 56%,
      #f5fbfc
    );

  box-shadow:
    var(--tc-final-shadow);
}

.tc-partner-zone-head {
  display:
    flex;

  align-items:
    end;

  justify-content:
    space-between;

  gap:
    20px;

  margin-bottom:
    12px;
}

.tc-partner-zone-head h2 {
  margin:
    0;

  color:
    var(--tc-final-ink);

  font-size:
    1.15rem;
}

.tc-partner-zone-head p {
  margin:
    3px 0 0;

  color:
    var(--tc-final-muted);

  font-size:
    .78rem;
}

.tc-partner-zone
#stackedBarrelsCard {
  min-height:
    130px;

  border:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;
}

.tc-partner-zone
#stackedBarrelsCard
img[src*="stackedbarrels"] {
  max-width:
    min(100%, 285px);

  max-height:
    96px;

  object-fit:
    contain;

  background:
    #fff;

  border-radius:
    10px;

  /*
   * Current production source is JPEG.
   * White partner panel removes the intrusive
   * rectangular contrast until a genuine
   * transparent source asset is supplied.
   */
  mix-blend-mode:
    multiply;
}

/* ======================================================================== */
/* PLAYER HUB                                                              */
/* ======================================================================== */

.tc-player-hub-body {
  margin:
    0;

  min-height:
    100vh;

  color:
    var(--tc-final-ink);

  background:
    radial-gradient(
      circle at top right,
      rgba(25,158,173,.08),
      transparent 30%
    ),
    radial-gradient(
      circle at top left,
      rgba(199,161,54,.09),
      transparent 31%
    ),
    #f8fafb;

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.tc-player-hub-shell {
  width:
    min(1180px, calc(100% - 32px));

  margin:
    0 auto;

  padding:
    28px 0 54px;
}

.tc-player-hub-hero {
  position:
    relative;

  overflow:
    hidden;

  padding:
    clamp(28px, 5vw, 52px);

  border:
    1px solid rgba(199,161,54,.25);

  border-radius:
    26px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.99),
      rgba(247,252,253,.99)
    );

  box-shadow:
    var(--tc-final-shadow);
}

.tc-player-hub-hero::after {
  content: "";

  position:
    absolute;

  width:
    260px;

  height:
    260px;

  right:
    -90px;

  top:
    -100px;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(199,161,54,.17),
      rgba(25,158,173,.06) 48%,
      transparent 70%
    );
}

.tc-player-hub-hero h1 {
  position:
    relative;

  z-index:
    1;

  margin:
    0;

  font-size:
    clamp(2rem, 5vw, 4.1rem);

  line-height:
    .98;

  letter-spacing:
    -.045em;
}

.tc-player-hub-hero p {
  position:
    relative;

  z-index:
    1;

  max-width:
    700px;

  margin:
    16px 0 0;

  color:
    var(--tc-final-muted);

  line-height:
    1.65;
}

.tc-player-hub-grid {
  display:
    grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap:
    16px;

  margin-top:
    22px;
}

.tc-player-hub-card {
  position:
    relative;

  min-height:
    205px;

  display:
    flex;

  flex-direction:
    column;

  padding:
    23px;

  border:
    1px solid var(--tc-final-line);

  border-radius:
    20px;

  background:
    #fff;

  color:
    var(--tc-final-ink);

  text-decoration:
    none;

  box-shadow:
    0 12px 34px rgba(21,40,48,.06);

  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease;
}

.tc-player-hub-card:hover {
  transform:
    translateY(-3px);

  border-color:
    rgba(199,161,54,.48);

  box-shadow:
    0 19px 42px rgba(21,40,48,.09);
}

.tc-player-hub-card h2 {
  margin:
    9px 0 7px;

  font-size:
    1.25rem;
}

.tc-player-hub-card p {
  margin:
    0;

  color:
    var(--tc-final-muted);

  line-height:
    1.5;
}

.tc-player-hub-action {
  margin-top:
    auto;

  padding-top:
    18px;

  color:
    var(--tc-final-cyan);

  font-weight:
    850;

  font-size:
    .8rem;

  letter-spacing:
    .02em;
}

.tc-player-hub-tools {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    9px;

  margin-top:
    16px;
}

.tc-player-hub-tools a {
  padding:
    10px 13px;

  border:
    1px solid var(--tc-final-line);

  border-radius:
    999px;

  background:
    #fff;

  color:
    var(--tc-final-ink);

  text-decoration:
    none;

  font-size:
    .78rem;

  font-weight:
    750;
}

/* ======================================================================== */
/* MEMBERSHIP                                                              */
/* ======================================================================== */

body:has([data-membership-guarded]) {
  background:
    radial-gradient(
      circle at top right,
      rgba(25,158,173,.07),
      transparent 30%
    ),
    #f8fafb;
}

body:has([data-membership-guarded])
.portal-main {
  width:
    min(1180px, calc(100% - 32px));

  margin:
    0 auto;

  padding-bottom:
    52px;
}

body:has([data-membership-guarded])
.portal-shell {
  display:
    grid;

  gap:
    17px;
}

body:has([data-membership-guarded])
.portal-hero {
  padding:
    clamp(24px, 4vw, 42px);

  border:
    1px solid rgba(199,161,54,.25);

  border-radius:
    24px;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f6fbfc
    ) !important;

  color:
    var(--tc-final-ink) !important;

  box-shadow:
    var(--tc-final-shadow);
}

body:has([data-membership-guarded])
.portal-hero h1 {
  color:
    var(--tc-final-ink) !important;

  margin-bottom:
    8px;
}

body:has([data-membership-guarded])
.portal-hero p {
  color:
    var(--tc-final-muted) !important;

  max-width:
    720px;

  line-height:
    1.55;
}

body:has([data-membership-guarded])
.portal-status {
  background:
    rgba(25,158,173,.08) !important;

  border:
    1px solid rgba(25,158,173,.17) !important;

  color:
    #2c5960 !important;

  border-radius:
    999px;
}

body:has([data-membership-guarded])
.member-intro {
  padding:
    0 !important;

  background:
    transparent !important;

  border:
    0 !important;

  box-shadow:
    none !important;
}

body:has([data-membership-guarded])
.package-grid {
  gap:
    13px;
}

body:has([data-membership-guarded])
.package-card {
  min-height:
    150px;

  padding:
    19px !important;

  border:
    1px solid rgba(199,161,54,.20) !important;

  border-radius:
    18px !important;

  background:
    #fff !important;

  color:
    var(--tc-final-ink) !important;

  box-shadow:
    0 10px 28px rgba(20,39,47,.055);
}

body:has([data-membership-guarded])
.package-card span {
  color:
    var(--tc-final-gold-dark) !important;

  font-weight:
    850;
}

body:has([data-membership-guarded])
.package-card strong {
  display:
    block;

  margin:
    7px 0;

  color:
    var(--tc-final-ink) !important;

  font-size:
    clamp(1.8rem, 4vw, 2.5rem);
}

body:has([data-membership-guarded])
.package-card small {
  color:
    var(--tc-final-muted) !important;
}

body:has([data-membership-guarded])
.membership-payment-actions {
  gap:
    9px;

  margin-top:
    13px;
}

body:has([data-membership-guarded])
.portal-action {
  border-radius:
    12px !important;
}

body:has([data-membership-guarded])
.portal-action-primary {
  border:
    1px solid rgba(199,161,54,.35) !important;

  background:
    linear-gradient(
      135deg,
      #f5ead0,
      #e7f6f7
    ) !important;

  color:
    #26383e !important;

  box-shadow:
    none !important;
}

body:has([data-membership-guarded])
.portal-action-primary:not(:disabled):hover {
  border-color:
    rgba(199,161,54,.65) !important;
}

body:has([data-membership-guarded])
.membership-payment-status {
  margin:
    12px 0 0;

  color:
    var(--tc-final-muted);
}

body:has([data-membership-guarded])
.perk-grid {
  grid-template-columns:
    repeat(4, minmax(0, 1fr));

  gap:
    11px;

  margin-top:
    18px;
}

body:has([data-membership-guarded])
.perk-card {
  min-height:
    150px;

  padding:
    16px !important;

  border:
    1px solid var(--tc-final-line) !important;

  border-radius:
    16px !important;

  background:
    #fff !important;

  color:
    var(--tc-final-ink) !important;

  box-shadow:
    none !important;
}

body:has([data-membership-guarded])
.perk-card span {
  color:
    var(--tc-final-gold-dark) !important;

  font-size:
    .7rem;

  font-weight:
    850;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;
}

body:has([data-membership-guarded])
.perk-card strong {
  display:
    block;

  margin:
    7px 0;

  color:
    var(--tc-final-ink) !important;
}

body:has([data-membership-guarded])
.perk-card p {
  color:
    var(--tc-final-muted) !important;
}

body:has([data-membership-guarded])
.membership-live-panel,
body:has([data-membership-guarded])
.member-gate,
body:has([data-membership-guarded])
.portal-panel {
  border:
    1px solid rgba(31,56,65,.11) !important;

  border-radius:
    18px !important;

  background:
    #fff !important;

  color:
    var(--tc-final-ink) !important;

  box-shadow:
    0 10px 28px rgba(20,39,47,.05) !important;
}

body:has([data-membership-guarded])
.member-summary article {
  border:
    1px solid var(--tc-final-line) !important;

  background:
    #f8fbfb !important;

  color:
    var(--tc-final-ink) !important;

  border-radius:
    12px !important;
}

/* ======================================================================== */
/* MATCH SUBMIT                                                            */
/* ======================================================================== */

/*
 * Player-facing match submission no longer exposes
 * generic plumbing fields.
 */

body:has(#matchSubmissionForm)
label:has(#matchMode),

body:has(#matchSubmissionForm)
label:has(#matchCompetitionType),

body:has(#matchSubmissionForm)
label:has(#matchCompetitionId),

body:has(#matchSubmissionForm)
label:has(#matchSeasonId),

body:has(#matchSubmissionForm)
label:has(#matchDivisionId),

body:has(#matchSubmissionForm)
label:has(#matchTournamentMatchId),

body:has(#matchSubmissionForm)
label:has(#matchResultType),

body:has(#matchSubmissionForm)
label:has(#submitterLegsLost),

body:has(#matchSubmissionForm)
label:has(#opponentLegsLost) {
  display:
    none !important;
}

body:has(#matchSubmissionForm)
section:has(#matchMode)
> header {
  display:
    none !important;
}

body:has(#matchSubmissionForm)
section:has(#matchMode) {
  padding:
    0 !important;

  border:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;
}

body:has(#matchSubmissionForm)
.match-preview-badge {
  display:
    none !important;
}

body:has(#matchSubmissionForm)
.match-form-grid {
  gap:
    12px;
}

body:has(#matchSubmissionForm)
section:has(#matchOpponentId) {
  border-color:
    rgba(199,161,54,.20);
}

body:has(#matchSubmissionForm)
label:has(#matchOpponentId) {
  grid-column:
    1 / -1;
}

body:has(#matchSubmissionForm)
#matchOpponentId {
  min-height:
    52px;

  font-size:
    .95rem;
}

body:has(#matchSubmissionForm)
section:has(#matchStructure) {
  border:
    1px solid rgba(199,161,54,.21) !important;

  background:
    linear-gradient(
      145deg,
      #fff,
      #f7fbfc
    ) !important;

  box-shadow:
    0 10px 28px rgba(20,39,47,.05) !important;
}

body:has(#matchSubmissionForm)
.tc-v1a2-set-panel {
  border-color:
    rgba(199,161,54,.27) !important;
}

/* ======================================================================== */
/* RESPONSIVE                                                              */
/* ======================================================================== */

@media (max-width: 980px) {
  body.tc-final-home
  .tc-competition-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  body:has([data-membership-guarded])
  .perk-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  body.tc-final-home
  .tc-competition-grid,

  .tc-home-secondary,

  .tc-player-hub-grid,

  body:has([data-membership-guarded])
  .perk-grid {
    grid-template-columns:
      1fr;
  }

  body.tc-final-home
  .tc-competition-grid
  .route {
    min-height:
      175px;
  }

  .tc-player-hub-shell,
  body:has([data-membership-guarded])
  .portal-main {
    width:
      min(100% - 20px, 1180px);
  }

  .tc-partner-zone-head {
    display:
      block;
  }
}