:root{--page-title-display:none;}/* Start custom CSS for text-editor, class: .elementor-element-0d72023 *//* =========================================================================
   HT/FT DOUBLE ARCHIVE — stylesheet
   Design language: digital scoreboard + betting-slip ticket stub.
   Token system lives at the top — change these to re-theme everything.
   ========================================================================= */

:root {
  /* ---- surfaces ---- */
  --bg: #0a0d14;
  --bg-glow-1: #10182a;
  --bg-glow-2: #140f1e;
  --card: #121826;
  --card-edge: #1c2436;
  --card-border: #232c40;
  --seam: #1a2233;

  /* ---- accents (kept close to the site's existing palette) ---- */
  --orange: #ff9d1c;      /* team names / matchup */
  --orange-dim: #a6631a;
  --blue: #5b86ff;        /* odds */
  --blue-dim: #2c3f7a;
  --green: #22e08a;       /* won */
  --green-dim: #0f4d38;
  --amber: #e0b422;       /* pending */
  --amber-dim: #4d3f10;
  --red: #ff5c72;         /* lost (optional, for manual entries) */
  --red-dim: #4d1622;
  --gray: #8b93a3;        /* dates / meta */
  --gray-dim: #545c6c;
  --paper: #eef1f7;

  /* ---- type ---- */
  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  --radius: 14px;
}

* { box-sizing: border-box; }

body.htft-page {
  margin: 0;
  background:
    radial-gradient(circle at 12% 8%, var(--bg-glow-1), transparent 45%),
    radial-gradient(circle at 88% 92%, var(--bg-glow-2), transparent 45%),
    var(--bg);
  color: var(--paper);
  font-family: var(--font-body);
  min-height: 100vh;
  padding: 56px 20px 90px;
}

/* =========================================================================
   HEADER
   ========================================================================= */

.htft-wrap {
  max-width: 880px;
  margin: 0 auto;
}

.htft-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 44px;
}

.htft-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 14px;
}

.htft-title {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(30px, 5vw, 46px);
  margin: 0 0 10px;
  color: var(--paper);
}

.htft-title span { color: var(--orange); }

.htft-sub {
  color: var(--gray);
  font-size: 14.5px;
  max-width: 460px;
  line-height: 1.55;
}

/* running record strip */
.htft-stats {
  display: flex;
  gap: 10px;
  margin-top: 26px;
  flex-wrap: wrap;
  justify-content: center;
}

.htft-stat {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 10px 18px;
  text-align: center;
  min-width: 92px;
}

.htft-stat b {
  display: block;
  font-family: var(--font-mono);
  font-size: 19px;
  color: var(--green);
}

.htft-stat span {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gray-dim);
  margin-top: 2px;
}

/* =========================================================================
   TICKET LIST
   ========================================================================= */

.htft-list {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

/* one betting slip / ticket */
.htft-ticket {
  position: relative;
  background: linear-gradient(180deg, var(--card-edge), var(--card));
  border: 1px solid var(--card-border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.7);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.htft-ticket:hover {
  transform: translateY(-3px);
  border-color: var(--card-edge);
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, 0.85);
}

/* ticket notches — punched circles on the left/right edge, mid-height */
.htft-ticket::before,
.htft-ticket::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  background: var(--bg);
  border-radius: 50%;
  transform: translateY(-50%);
  z-index: 3;
}
.htft-ticket::before { left: -11px; }
.htft-ticket::after { right: -11px; }

.htft-ticket-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px;
  border-bottom: 1px dashed var(--seam);
}

.htft-date {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: var(--gray);
}

/* status stamp */
.htft-stamp {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 5px;
  transform: rotate(-4deg);
  border: 1.5px solid currentColor;
}

.htft-stamp--won { color: var(--green); background: var(--green-dim); }
.htft-stamp--pending { color: var(--amber); background: var(--amber-dim); }
.htft-stamp--lost { color: var(--red); background: var(--red-dim); }

/* two legs of the double, split by a perforated seam */
.htft-legs {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 620px) {
  .htft-legs { grid-template-columns: 1fr; }
  .htft-leg + .htft-leg { border-top: 1px dashed var(--seam); }
}

.htft-leg {
  padding: 20px 22px;
  position: relative;
}

.htft-leg + .htft-leg {
  border-left: 1px dashed var(--seam);
}

.htft-match {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.01em;
  color: var(--orange);
  line-height: 1.3;
  margin: 0 0 10px;
}

.htft-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.htft-market {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--gray);
  background: rgba(139, 147, 163, 0.08);
  border: 1px solid var(--card-border);
  padding: 3px 8px;
  border-radius: 5px;
  white-space: nowrap;
}

.htft-odds {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--blue);
}

.htft-score {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--gray-dim);
  margin-top: 8px;
}

.htft-score b { color: var(--gray); font-weight: 500; }

/* footer: combined odds, scoreboard-flip styling */
.htft-ticket-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  background: rgba(91, 134, 255, 0.05);
  border-top: 1px dashed var(--seam);
}

.htft-total-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gray-dim);
}

.htft-total-odds {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 24px;
  color: var(--blue);
  letter-spacing: 0.01em;
}

.htft-total-odds small {
  font-size: 12px;
  color: var(--gray-dim);
  font-weight: 400;
  margin-right: 4px;
}

/* =========================================================================
   PENDING / manual-entry look — same shape, muted odds until settled
   ========================================================================= */

.htft-ticket--pending .htft-total-odds { color: var(--amber); }
.htft-ticket--pending .htft-score { font-style: italic; }

/* =========================================================================
   ACCESSIBILITY / MOTION
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .htft-ticket { transition: none; }
  .htft-ticket:hover { transform: none; }
}

.htft-ticket:focus-within {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}/* End custom CSS */