:root{
  --pitch-dark:#0d2818;
  --pitch:#163d26;
  --pitch-line:#2d6a4f;
  --chalk:#f4f1e8;
  --chalk-dim:#b9c4bb;
  --gold:#f2a900;
  --card:#122e1e;
  --card-2:#0f2a1c;
  --card-line:rgba(244,241,232,0.12);
  --red-card:#c1440e;
  --cone-orange:#e8590c;
  --cone-blue:#1c7ed6;
  --cone-yellow:#f2c200;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--pitch-dark);
  color:var(--chalk);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

.pitch-texture{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 119px, rgba(244,241,232,0.035) 120px),
    repeating-linear-gradient(90deg, transparent, transparent 119px, rgba(244,241,232,0.02) 120px);
}

header.matchhead{
  position:relative; z-index:2;
  padding:24px 20px 14px;
  border-bottom:3px solid var(--gold);
  background:linear-gradient(180deg, var(--pitch) 0%, var(--pitch-dark) 100%);
}
.head-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; }
.eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); margin:0 0 6px;
}
h1.title{
  font-family:'Anton',sans-serif;
  font-size:clamp(26px,6vw,46px);
  letter-spacing:.01em; margin:0 0 4px; line-height:0.95; text-transform:uppercase;
}
.subtitle{ font-family:'Barlow Condensed',sans-serif; font-size:16px; color:var(--chalk-dim); font-weight:500; max-width:600px; }
.reset-btn{
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.05em;
  background:transparent; border:1px solid var(--card-line); color:var(--chalk-dim);
  padding:8px 12px; border-radius:4px; cursor:pointer; white-space:nowrap;
}
.reset-btn:hover{ border-color:var(--gold); color:var(--gold); }

.week-progress{ display:flex; gap:6px; margin-top:14px; }
.week-progress .dot{
  flex:1; height:5px; border-radius:3px; background:rgba(244,241,232,0.1);
}
.week-progress .dot.done{ background:var(--gold); }

nav.fixtures{
  position:sticky; top:0; z-index:5;
  display:flex; overflow-x:auto;
  background:var(--pitch-dark);
  border-bottom:1px solid var(--card-line);
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
nav.fixtures::-webkit-scrollbar{display:none;}
.fx-tab{
  flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:12px 16px 10px; cursor:pointer; border:none; background:none;
  border-bottom:3px solid transparent;
  font-family:'Barlow Condensed',sans-serif; color:var(--chalk-dim);
  -webkit-tap-highlight-color:transparent;
}
.fx-tab .num{ font-family:'JetBrains Mono',monospace; font-size:11px; opacity:.65; }
.fx-tab .day{ font-size:18px; font-weight:600; text-transform:uppercase; letter-spacing:.02em; }
.fx-tab.active{ color:var(--chalk); border-bottom-color:var(--gold); }
.fx-tab.active .num{ color:var(--gold); opacity:1; }
.fx-tab.complete .day::after{ content:" ✓"; color:var(--gold); font-size:13px; }

main{ position:relative; z-index:2; max-width:820px; margin:0 auto; padding:26px 20px 80px; }

.day-panel{ display:none; animation:fadein .25s ease; }
.day-panel.active{ display:block; }
@keyframes fadein{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} }

.day-banner{ display:flex; align-items:baseline; gap:14px; margin-bottom:6px; }
.day-banner .bignum{
  font-family:'Anton',sans-serif; font-size:44px; color:var(--pitch-line);
  -webkit-text-stroke: 1.5px var(--gold); line-height:1;
}
.day-banner h2{ font-family:'Anton',sans-serif; font-size:clamp(22px,5vw,32px); text-transform:uppercase; margin:0; letter-spacing:.01em; }

.focus-tags{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 8px; }
.tag{
  font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.03em;
  padding:4px 9px; border:1px solid var(--pitch-line); border-radius:2px; color:var(--chalk-dim);
  cursor:pointer; background:none;
}
.tag:hover, .tag.active{ border-color:var(--gold); color:var(--gold); }

.note-box{
  background:rgba(242,169,0,0.08); border-left:3px solid var(--gold); padding:12px 14px;
  font-size:14.5px; line-height:1.5; color:var(--chalk); margin:14px 0 22px; border-radius:0 4px 4px 0;
}
.note-box.safety{ background:rgba(193,68,14,0.1); border-left-color:var(--red-card); }
.note-box strong{ color:var(--gold); }
.note-box.safety strong{ color:#ff8a5c; }

.block{
  background:var(--card); border:1px solid var(--card-line); border-radius:6px;
  padding:18px 18px 8px; margin-bottom:16px;
}
.block h3{
  font-family:'Barlow Condensed',sans-serif; font-size:14px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold); font-weight:700; margin:0 0 12px; display:flex; align-items:center; gap:8px;
}
.block h3 .mins{ font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--chalk-dim); letter-spacing:0; text-transform:none; font-weight:500; }

.drill{ display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-top:1px solid var(--card-line); }
.block .drill:first-of-type{ border-top:none; }
.check{
  flex:0 0 22px; width:22px; height:22px; margin-top:1px; border:2px solid var(--pitch-line);
  border-radius:4px; cursor:pointer; position:relative; transition:background .12s ease, border-color .12s ease;
}
.check.done{ background:var(--gold); border-color:var(--gold); }
.check.done::after{ content:"✓"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:var(--pitch-dark); }
.drill-text{ font-size:15px; line-height:1.5; }
.drill-text b{ color:var(--chalk); }
.drill-text.done-text{ text-decoration:line-through; opacity:.5; }
.drill-text .skillref{
  display:inline-block; margin-left:6px; font-family:'JetBrains Mono',monospace; font-size:10.5px;
  color:var(--gold); border:1px solid var(--pitch-line); border-radius:3px; padding:1px 6px; cursor:pointer;
}
.drill-text .skillref:hover{ border-color:var(--gold); }

/* Video cards */
.video-grid{ display:grid; gap:14px; margin-top:4px; }
.video-card{ scroll-margin-top:70px; }
.video-card.highlight .video-frame{ box-shadow:0 0 0 3px var(--gold); }
.video-card-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:8px; }
.video-card-head h4{ font-family:'Barlow Condensed',sans-serif; font-size:17px; margin:0; text-transform:uppercase; letter-spacing:.02em; color:var(--chalk); }
.video-card-head .src{ font-family:'JetBrains Mono',monospace; font-size:10.5px; color:var(--chalk-dim); white-space:nowrap; }
.video-frame{ position:relative; width:100%; padding-top:56.25%; background:#000; border-radius:6px; overflow:hidden; }
.video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-title{ font-size:13px; color:var(--chalk-dim); margin:8px 2px 0; }

.linkout{ display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--card-line); text-decoration:none; color:var(--chalk); font-size:14px; }
.linkout:first-child{ border-top:none; }
.linkout .play-badge{ flex:0 0 auto; width:24px; height:24px; border-radius:50%; background:var(--red-card); display:flex; align-items:center; justify-content:center; font-size:9px; color:var(--chalk); }
.linkout .arrow{ opacity:.4; font-size:13px; margin-left:auto; }

/* Cone diagrams */
.diagram-card{ margin-top:4px; }
.diagram-frame{ background:#0a2015; border:1px solid var(--card-line); border-radius:6px; padding:10px; }
.diagram-frame svg{ width:100%; height:auto; display:block; }
.diagram-caption{ font-size:13px; color:var(--chalk-dim); margin-top:8px; line-height:1.5; }
.cone-legend{ display:flex; flex-wrap:wrap; gap:12px; margin-top:10px; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--chalk-dim); }
.cone-legend span{ display:flex; align-items:center; gap:5px; }
.cone-legend .swatch{ width:10px; height:10px; border-radius:2px; display:inline-block; }
.swatch-orange{ background:var(--cone-orange); }
.swatch-blue{ background:var(--cone-blue); }
.swatch-yellow{ background:var(--cone-yellow); }
.swatch-red{ background:var(--red-card); }
.swatch-white{ background:var(--chalk); }

.progress-table{ width:100%; border-collapse:collapse; font-size:14px; margin-bottom:20px; }
.progress-table th, .progress-table td{ text-align:left; padding:10px 8px; border-bottom:1px solid var(--card-line); }
.progress-table th{ font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:.06em; font-size:12.5px; color:var(--gold); }

.weekly-tracker{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin:18px 0 6px; }
.wk-cell{
  text-align:center; padding:10px 4px; background:var(--card); border:1px solid var(--card-line);
  border-radius:6px; font-family:'Barlow Condensed',sans-serif; font-size:13px; text-transform:uppercase;
  letter-spacing:.03em; cursor:pointer; color:var(--chalk-dim);
}
.wk-cell.done{ background:var(--pitch-line); color:var(--chalk); border-color:var(--gold); }
.wk-cell .mark{ display:block; font-size:16px; margin-top:4px; }

footer{
  position:relative; z-index:2; text-align:center; padding:26px 20px 40px;
  font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--chalk-dim); opacity:.7;
  border-top:1px solid var(--card-line);
}

h3.section-h{ font-family:'Anton',sans-serif; font-size:20px; text-transform:uppercase; margin:34px 0 12px; letter-spacing:.01em; }
h3.section-h:first-child{ margin-top:0; }

ul.plain{ padding-left:18px; margin:0; }
ul.plain li{ margin-bottom:8px; font-size:14.5px; line-height:1.5; color:var(--chalk); }
.hl{ color:var(--gold); }
.muted-note{ font-size:12.5px; color:var(--chalk-dim); margin:0 0 20px; }
.rest-note{ font-size:15px; line-height:1.6; margin:0; }

@media (min-width:640px){
  .day-banner .bignum{ font-size:56px; }
  .video-grid.two-col{ grid-template-columns:1fr 1fr; }
}