/* ── Reset & Base ── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --green:   #2d6a4f;
      --green-light: #52b788;
      --green-pale:  #d8f3dc;
      --gold:    #f4a261;
      --gold-dark:   #e76f51;
      --white:   #ffffff;
      --off-white: #f8f9fa;
      --text:    #1b1b1b;
      --text-muted: #555;
      --radius:  14px;
      --shadow:  0 4px 18px rgba(0,0,0,.12);
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: var(--off-white);
      color: var(--text);
      min-height: 100dvh;
      overflow-x: hidden;
    }

    /* ── Hero / Header ── */
    .hero {
      background: url('images/Banner.png') center center / cover no-repeat;
      color: var(--white);
      text-align: center;
      padding: 40px 20px;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .hero-emoji { display: block; margin-bottom: 12px; position: relative; z-index: 1; margin-inline: auto; }
    .hero-emoji img { width: clamp(240px, 60vw, 540px); height: auto; display: block; margin-inline: auto; }
    .field-img { width: 100%; height: auto; display: block; border-radius: 8px; margin-top: 12px; }
    .hero h1   { font-size: clamp(1.6rem, 5vw, 2.4rem); font-weight: 800; letter-spacing: -.5px; }
    .hero p    { font-size: 1rem; opacity: .85; margin-top: 8px; max-width: 360px; margin-inline: auto; }

    /* ── Nav Wrapper ── */
    /* ── Fixed top bar ── */
    .nav-topbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 200;
      background: #f6e8f1;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 8px 16px;
      min-height: 60px;
      box-shadow: 0 2px 8px rgba(0,0,0,.1);
    }

    body { padding-top: 60px; }

    .nav-wrap {
      position: sticky;
      top: 60px;
      z-index: 100;
      box-shadow: 0 2px 8px rgba(0,0,0,.1);
    }
    .nav-logo {
      height: 44px;
      width: auto;
      flex-shrink: 0;
      display: block;
    }
    .nav-search-wrap {
      display: flex;
      align-items: center;
      gap: 6px;
      flex: 1;
      background: var(--white);
      border-radius: 20px;
      padding: 7px 14px;
      border: 2px solid #d054bf;
      transition: box-shadow .2s, border-color .2s;
    }
    .nav-search-wrap:focus-within { box-shadow: 0 0 0 3px rgba(244,53,201,.25); border-color: #f435c9; }
    .nav-search-icon { font-size: .85rem; line-height: 1; color: #999; }
    .nav-search-input {
      border: none;
      background: transparent;
      outline: none;
      font-size: .9rem;
      flex: 1;
      color: var(--text);
      min-width: 0;
    }
    .nav-search-input::placeholder { color: #bbb; }
    .nav-search-clear {
      display: none;
      border: none;
      background: transparent;
      cursor: pointer;
      color: #999;
      font-size: .85rem;
      padding: 0;
      line-height: 1;
    }
    .nav-search-clear.visible { display: block; }

    /* ── Bottom bar: nav pills ── */
    .nav-pillbar {
      background: #FFFFFF;
      color: #d054bf;
      min-height: 60px;
      display: flex;
      align-items: stretch;
      justify-content: center;
    }
    .section-subnav {
      background: #f8f9fa;
      border-top: 1px solid #e8e8e8;
      display: flex;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
      padding: 6px 16px;
    }
    .section-subnav .nav-pill { color: #a966b2; font-size: .80rem; border-top: none; }
    .section-subnav .nav-pill.active { background: transparent; color: #a966b2; font-weight: 800; border-top: none; border-bottom: 3px solid #a966b2; }
    .section-subnav .nav-pill:hover { background: transparent; color: #ac90a9; border-top: none; }
    .team-subnav .nav-pill, .strategy-subnav .nav-pill { color: #a966b2; }
    .team-subnav .nav-pill.active, .strategy-subnav .nav-pill.active { color: #a966b2; border-bottom-color: #a966b2; }
    .nav-scroll {
      display: flex;
      justify-content: center;
      gap: 0;
      padding: 0 8px;
      overflow-x: auto;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    .nav-scroll::-webkit-scrollbar { display: none; }
    .nav-pill {
      flex-shrink: 0;
      background: transparent;
      color: #b13da4;
      border: none;
      border-radius: 0;
      border-top: 3px solid transparent;
      border-bottom: none;
      padding: 14px 10px 11px;
      font-size: .9rem;
      font-weight: 700;
      cursor: pointer;
      transition: color .2s, background .2s;
      white-space: nowrap;
      display: flex;
      align-items: center;
    }
    .nav-pillbar .nav-pill { padding-left: 15px; padding-right: 15px; }
    .nav-pill:hover  { color: #ef98e9; background: transparent; border-top: 3px solid #ef98e9; border-bottom: none; }
    .nav-pill.active { background: #f8f9fa; color: #d054bf; font-weight: 800; border-top: 3px solid #d054bf; border-bottom: none; }
    .nav-pill:active { opacity: .8; }

    /* ── Search Results ── */
    .search-results-header {
      font-size: .95rem;
      color: var(--text-muted);
      margin-bottom: 16px;
      font-weight: 500;
    }
    .search-group-label {
      font-size: .75rem;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: .08em;
      color: #f435c9;
      margin: 20px 0 10px;
    }
    .search-group-label:first-child { margin-top: 0; }
    .search-empty {
      text-align: center;
      color: var(--text-muted);
      padding: 48px 20px;
      font-size: 1rem;
    }
    .search-pos-card {
      background: var(--white);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 16px 20px;
      display: flex;
      align-items: center;
      gap: 16px;
      margin-bottom: 10px;
    }
    .search-pos-card img { width: 60px; height: 60px; object-fit: contain; flex-shrink: 0; }
    .search-pos-card-body { flex: 1; min-width: 0; }
    .search-pos-card-name { font-weight: 700; font-size: 1rem; margin-bottom: 2px; }
    .search-pos-card-sub  { font-size: .78rem; color: var(--text-muted); margin-bottom: 6px; }
    .search-pos-card-desc { font-size: .85rem; color: var(--text); line-height: 1.5; }
    .search-penalty-card {
      background: var(--white);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 14px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 10px;
    }
    .search-penalty-card-info strong { font-size: .95rem; }
    .search-penalty-card-info p { font-size: .85rem; color: var(--text-muted); margin-top: 4px; line-height: 1.5; }
    .search-penalty-yds { font-weight: 800; font-size: .95rem; color: var(--gold-dark); flex-shrink: 0; white-space: nowrap; }

    /* ── Main Content ── */
    main { padding: 24px 16px 80px; max-width: 1080px; margin-inline: auto; }

    /* ── Section Panels ── */
    .section {
      display: none;
      animation: fadeSlide .35s ease;
    }
    .section.active { display: block; }
    .section h1 { text-align: right; font-size: 1.5rem; font-weight: 700;}


    /* ── Intro Section ── */
    @keyframes fadeSlide {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ── Cards ── */
    .card {
      background: var(--white);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 20px;
      margin-bottom: 16px;
    }
    .card h3 { color: #658975; margin-bottom: 14px; margin-top: 14px; }
    .section-h3-divider { border: none; border-top: 1px solid rgba(201,162,39,0.22); margin: 16px 0 0; }
    .card-pageTitle {
      background: #d054bf;
      color: #FFFFFF;
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 20px;
      margin-bottom: 16px;
    }
    .card-header {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
    }
    .card-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: var(--green-pale);
      display: grid;
      place-items: center;
      font-size: 22px;
      flex-shrink: 0;
    }
    .card h2 { font-size: 1.05rem; font-weight: 700; color: #52b788; padding-bottom: 10px; border-bottom: 1px solid #e4ede6; width: 100%; }
    .card p  { font-size: .93rem; line-height: 1.65; color: var(--text-muted); }
    .card p + p { margin-top: 10px; }
    .card ul { margin: 10px 0 10px 1.25rem; padding: 0; list-style: disc; }
    .card li { font-size: .93rem; line-height: 1.65; color: var(--text-muted); margin-bottom: 6px; }

    /* ── Field Diagram ── */
    .field-wrap { margin: 16px 0; }
    .field {
      background: #3a7d44;
      border: 3px solid var(--white);
      border-radius: 10px;
      padding: 10px 6px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      position: relative;
      overflow: hidden;
    }
    .field-yard-lines {
      display: flex;
      justify-content: space-between;
      padding: 0 4px;
    }
    .yard-label { color: rgba(255,255,255,.7); font-size: .65rem; font-weight: 700; }
    .field-stripe {
      height: 2px;
      background: repeating-linear-gradient(90deg, rgba(255,255,255,.4) 0 6px, transparent 6px 20px);
      border-radius: 2px;
    }
    .field-center {
      text-align: center;
      color: var(--white);
      font-weight: 800;
      font-size: .75rem;
      padding: 6px 0;
      letter-spacing: 2px;
    }
    .end-zone {
      background: rgba(255,255,255,.15);
      border-radius: 6px;
      text-align: center;
      padding: 8px 4px;
      color: var(--white);
      font-weight: 800;
      font-size: .75rem;
      letter-spacing: 1px;
    }

    /* ── Score Cards ── */
    .score-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 6px;
    }
    .score-item {
      background: #3e6951;
      border-radius: 10px;
      padding: 14px 12px;
      text-align: center;
    }
    .score-pts {
      font-size: 1.8rem;
      font-weight: 900;
      color: #ffffff;
      line-height: 1;
    }
    .score-pts.gold { color: var(--gold-dark); }
    .score-name { font-size: .75rem; font-weight: 700; color: #ffffff; margin-top: 4px; }
    .score-desc { font-size: .7rem; color: #ddf2de; margin-top: 3px; line-height: 1.4; }

    /* ── Positions ── */
    .team-label {
      background: var(--green);
      color: var(--white);
      border-radius: 8px;
      padding: 6px 14px;
      font-size: .8rem;
      font-weight: 700;
      display: inline-block;
      margin-bottom: 12px;
      letter-spacing: .5px;
    }
    .team-label.defense { background: var(--gold-dark); }
    .position-list { display: flex; flex-direction: column; gap: 10px; }
    .pos-item {
      display: flex;
      gap: 12px;
      align-items: flex-start;
    }
    .pos-badge {
      background: var(--green-pale);
      color: var(--green);
      border-radius: 8px;
      padding: 4px 9px;
      font-size: .75rem;
      font-weight: 800;
      flex-shrink: 0;
      min-width: 44px;
      text-align: center;
      margin-top: 1px;
    }
    .pos-badge.def { background: #fde8e4; color: var(--gold-dark); }
    .pos-text strong { font-size: .88rem; color: var(--text); }
    .pos-text span   { font-size: .8rem; color: var(--text-muted); display: block; margin-top: 2px; line-height: 1.4; }

    /* ── Rules ── */
    .rule-item {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      padding: 12px 0;
      border-bottom: 1px solid var(--green-pale);
    }
    .rule-item:last-child { border-bottom: none; }
    .rule-num {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--green);
      color: var(--white);
      font-size: .75rem;
      font-weight: 800;
      display: grid;
      place-items: center;
      flex-shrink: 0;
      margin-top: 1px;
    }
    .rule-text strong { font-size: .9rem; }
    .rule-text p { font-size: .82rem; color: var(--text-muted); margin-top: 3px; line-height: 1.5; }

    /* ── Penalties ── */
    .penalty-item {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 10px;
      padding: 12px 0;
      border-bottom: 1px solid var(--green-pale);
    }
    .penalty-item:last-child { border-bottom: none; }
    .penalty-info strong { font-size: .88rem; }
    .penalty-info p { font-size: .8rem; color: var(--text-muted); margin-top: 3px; line-height: 1.4; }
    .penalty-yds {
      background: #fde8e4;
      color: var(--gold-dark);
      border-radius: 8px;
      padding: 5px 10px;
      font-size: .75rem;
      font-weight: 800;
      white-space: nowrap;
      flex-shrink: 0;
    }
    /* Field parts tag — green variant of penalty-yds badge */
    .field-part-tag { background: var(--green-pale); color: var(--green); }
    .penalty-flag {
      font-size: 1.1rem;
      margin-right: 4px;
    }

    /* ── Tip Boxes ── */
    .tip {
      background: #f3deee;
      border-left: 4px solid #d054b5;
      border-radius: 0 10px 10px 0;
      padding: 12px 14px;
      margin-top: 12px;
      font-size: .84rem;
      color: #b80992;
      font-weight: 500;
      line-height: 1.5;
    }
    .tip::before { content: '💡 '; }

    /* ── Down Tracker ── */
    .down-tracker {
      background: linear-gradient(135deg, var(--green), #40916c);
      border-radius: var(--radius);
      padding: 20px;
      color: var(--white);
      text-align: center;
      margin-bottom: 16px;
    }
    .down-tracker h3 { font-size: .85rem; opacity: .8; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 16px; }
    .downs-row {
      display: flex;
      justify-content: center;
      gap: 8px;
    }
    .down-circle {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,.4);
      display: grid;
      place-items: center;
      font-size: .75rem;
      font-weight: 700;
      color: rgba(255,255,255,.6);
      cursor: pointer;
      transition: all .2s;
      flex-shrink: 0;
    }
    .down-circle.lit {
      background: var(--gold);
      border-color: var(--gold);
      color: var(--text);
      transform: scale(1.08);
    }
    .down-tracker p { margin-top: 14px; font-size: .83rem; opacity: .85; min-height: 40px; }
    #down-desc { color: var(--white); opacity: 1; }

    /* ── Quiz ── */
    .quiz-card {
      background: var(--off-white);
      border-radius: 10px;
      border: 1px solid var(--green-pale);
      padding: 18px;
      margin-top: 20px;
    }
    .quiz-card-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 2px solid var(--green-pale);
    }
    .quiz-card-icon {
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: var(--green);
      color: var(--white);
      display: grid;
      place-items: center;
      font-size: 18px;
      flex-shrink: 0;
    }
    .quiz-card-title {
      font-size: .95rem;
      font-weight: 800;
      color: var(--green);
    }
    .quiz-q { font-size: .92rem; font-weight: 700; margin-bottom: 12px; color: var(--text); }
    .quiz-counter { font-size: .75rem; color: var(--text-muted); font-weight: 600; margin-bottom: 8px; }
    .quiz-options { display: flex; flex-direction: column; gap: 8px; }
    .quiz-btn {
      background: var(--white);
      color: var(--text);
      border: 2px solid var(--green-pale);
      border-radius: 10px;
      padding: 10px 14px;
      font-size: .86rem;
      text-align: left;
      cursor: pointer;
      transition: all .2s;
    }
    .quiz-btn:hover   { border-color: #e148c4; }
    .quiz-btn.correct { background: #d8f3dc; border-color: var(--green); color: var(--green); font-weight: 700; }
    .quiz-btn.wrong   { background: #fde8e4; border-color: var(--gold-dark); color: var(--gold-dark); }
    .quiz-feedback { margin-top: 10px; font-size: .82rem; font-weight: 600; min-height: 18px; }
    .quiz-feedback.correct { color: var(--green); }
    .quiz-feedback.wrong   { color: var(--gold-dark); }
    .quiz-next {
      margin-top: 12px;
      background: var(--green);
      color: var(--white);
      border: none;
      border-radius: 10px;
      padding: 10px 20px;
      font-size: .88rem;
      font-weight: 700;
      cursor: pointer;
      display: none;
      width: 100%;
      transition: background .2s;
    }
    .quiz-next:hover { background: #c030a8; }
    .quiz-score-msg { text-align: center; font-size: 1rem; font-weight: 700; color: var(--green); padding: 10px; }
    .quiz-score-sub { text-align: center; color: var(--text-muted); font-size: .86rem; margin: 6px 0 16px; }

    /* ── Position Carousel ── */
    .pos-group-card {
      margin-bottom: 20px;
    }
    .pos-group-heading {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
      padding-bottom: 12px;
      border-bottom: 2px solid var(--green-pale);
    }
    .pos-group-heading h3 {
      font-size: 1rem;
      font-weight: 800;
      margin: 0;
      color: var(--text);
    }
    .pos-group-pill {
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: .8px;
      text-transform: uppercase;
      padding: 3px 10px;
      border-radius: 50px;
    }
    .pos-group-pill.off { background: #64a4ef; color: #fff; }
    .pos-group-pill.def { background: #e76f51; color: #fff; }
    .pos-group-pill.spc { background: #775fa3; color: #fff; }
    .pos-group-pill.cch { background: #b5651d; color: #fff; }

    /* ── Level Pills ── */
    .level-pill {
      font-size: .65rem;
      font-weight: 700;
      letter-spacing: .7px;
      text-transform: uppercase;
      padding: 2px 8px;
      border-radius: 50px;
      flex-shrink: 0;
      white-space: nowrap;
    }
    .level-pill.beginner     { background: #b5651d; color: #fff; }
    .level-pill.intermediate { background: #e76f51; color: #fff; }
    .level-pill.advanced     { background: #64a4ef; color: #fff; }

    .pos-carousel-wrap {
      position: relative;
      margin-bottom: 16px;
    }

    .pos-viewport {
      overflow: hidden;
      border-radius: var(--radius);
      cursor: grab;
      user-select: none;
    }
    .pos-viewport:active { cursor: grabbing; }

    .pos-track {
      display: flex;
      transition: transform .35s cubic-bezier(.4,0,.2,1);
      will-change: transform;
    }

    /* Each carousel card fills the viewport */
    .pos-slide {
      flex: 0 0 100%;
      background: var(--white);
      border-radius: var(--radius);
      box-shadow: none;
      padding: 24px 20px 20px;
      box-sizing: border-box;
    }

    /* Mobile: stack image above text, center-align header/subgroup/image */
    @media (max-width: 599px) {
      .pos-slide-inner {
        flex-direction: column;
        align-items: center;
      }
      .pos-slide-header { text-align: center; }
      .pos-slide-header h3 {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
      }
      .pos-slide-subgroup { text-align: center; }
      .pos-slide-img-col {
        flex: 0 0 auto;
        width: 160px;
        margin-inline: auto;
        align-self: center;
      }
      .pos-slide-img-wrap {
        justify-content: center;
        align-items: center;
      }
      .pos-slide-text-col {
        flex: 0 0 auto;
        width: 100%;
        padding-right: 0;
      }
    }

    /* Two-column layout: image left, content right */
    .pos-slide-inner {
      display: flex;
      gap: 20px;
      align-items: flex-start;
    }

    /* Header row — group pill + name + badge, spans full width above both columns */
    .pos-slide-header {
      margin-bottom: 6px;
    }

    .pos-slide-subgroup {
      font-size: .8rem;
      font-weight: 700;
      color: var(--text-muted);
      letter-spacing: .4px;
      text-transform: uppercase;
      margin-bottom: 14px;
    }

    /* Left column — image: 30% of the card */
    .pos-slide-img-col {
      flex: 0 0 30%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    /* Right column — text: remaining 70% */
    .pos-slide-text-col {
      flex: 0 0 calc(70% - 20px);
      min-width: 0;
      padding-right: 20px;
    }

    .pos-slide-badge {
      display: inline-block;
      font-size: .72rem;
      font-weight: 800;
      letter-spacing: .5px;
      padding: 3px 9px;
      border-radius: 6px;
      margin-left: 8px;
      vertical-align: middle;
      position: relative;
      top: -1px;
      background: #e0f1df;
      color: #52b788;
    }

    .pos-slide-group {
      display: inline-block;
      font-size: .72rem;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      padding: 3px 10px;
      border-radius: 50px;
      margin-bottom: 14px;
    }
    .pos-slide-group.off { background: #64a4ef; color: #FFFFFF; }
    .pos-slide-group.def { background: #e76f51; color: #FFFFFF; }
    .pos-slide-group.spc { background: #775fa3; color: #FFFFFF; }

    .pos-slide h3 { font-size: 1.15rem; font-weight: 800; margin-bottom: 10px; color: var(--text); }
    .pos-slide p  { font-size: .9rem; color: var(--text-muted); line-height: 1.65; }

    /* Position image */
    .pos-slide-img-wrap {
      width: 100%;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      overflow: hidden;
    }
    .pos-slide-img-wrap img {
      width: 100%;
      height: auto;
      object-fit: contain;
      object-position: top center;
      display: block;
      filter: drop-shadow(0 4px 10px rgba(0,0,0,.15));
      transition: transform .3s ease;
    }
    .pos-viewport:hover .pos-slide-img-wrap img { transform: scale(1.03); }

    .pos-slide-tip {
      margin-top: 16px;
      background: #e0f1df;
      border-left: 4px solid #52b788;
      border-radius: 0 10px 10px 0;
      padding: 10px 14px;
      font-size: .8rem;
      color: #2d6a4f;
      font-weight: 500;
      line-height: 1.5;
    }
    .pos-slide-tip::before { content: '⭐ '; }

    /* Arrow buttons */
    .pos-arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 10;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: none;
      background: #2d6a4f;
      color: #ffffff;
      font-size: 1.1rem;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0,0,0,.2);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .2s, transform .15s, opacity .2s;
      opacity: 0.9;
    }
    .pos-arrow:hover  { background: #5e7a68; color: #ddf2de; opacity: 1; }
    .pos-arrow:active { transform: translateY(-50%) scale(.92); }
    .pos-arrow:disabled { opacity: .3; cursor: default; }
    .pos-arrow-left  { left: -18px; }
    .pos-arrow-right { right: -18px; }

    /* Hide arrows on very small screens — swipe handles it */
    @media (max-width: 360px) {
      .pos-arrow { display: none; }
    }

    /* Dot indicators */
    .pos-dots {
      display: flex;
      justify-content: center;
      gap: 6px;
      margin-top: 14px;
      flex-wrap: wrap;
    }
    .pos-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--green-pale);
      border: 1.5px solid var(--green-light);
      cursor: pointer;
      transition: background .2s, transform .15s;
      flex-shrink: 0;
    }
    .pos-dot.active {
      background: #e148c4;
      border-color: #e148c4;
      transform: scale(1.25);
    }

    /* Counter */
    .pos-counter {
      text-align: center;
      margin-top: 8px;
      font-size: .75rem;
      color: var(--text-muted);
      font-weight: 600;
    }

    /* ── Score Item — clickable ── */
    .score-item {
      cursor: pointer;
      transition: transform .15s, box-shadow .15s;
      position: relative;
    }
    .score-item:hover  { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,.13); }
    .score-item:active { transform: scale(.97); }
    .score-item-hint {
      font-size: .62rem;
      color: var(--green);
      font-weight: 700;
      letter-spacing: .4px;
      margin-top: 5px;
      opacity: .7;
    }
    .score-item:hover .score-item-hint { opacity: 1; }

    /* ── Football Actions ── */
    .action-tag {
      font-size: .65rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .06em;
      padding: 2px 7px;
      border-radius: 20px;
      flex-shrink: 0;
    }
    .action-tag.offense  { background: #dfe5ef; color: #2e64c9; }
    .action-tag.defense  { background: #fae9e5; color: #aa5d0b; }
    .action-tag.special  { background: #ece7f5; color: #7b5ea7; }
    .action-tag.both     { background: var(--green-pale); color: var(--green); }

    /* ── Football Actions Grid ── */
    .action-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 6px;
    }
    .action-item {
      background: #3e6951;
      border-radius: 12px;
      padding: 13px 16px;
      text-align: center;
      cursor: pointer;
      transition: opacity .15s, transform .1s;
      letter-spacing: .3px;
    }
    .action-item:hover  { opacity: .88; }
    .action-item:active { transform: scale(.98); }
    .action-item-name   { font-size: .9rem; font-weight: 700; color: #ffffff; margin-bottom: 5px; }
    .action-item-desc   { font-size: .72rem; color: #ddf2de; line-height: 1.35; margin-top: 6px; }
    .action-item-hint   { font-size: .65rem; color: #ddf2de; opacity: 0; transition: opacity .2s; margin-top: 6px; font-weight: 600; }
    .action-item:hover .action-item-hint { opacity: 1; }

    /* ── Score Detail Overlay ── */
    /* The overlay is positioned inside the scoring card (position:relative),
       so it only covers that card and nothing else on screen. */
    .score-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 500;
      overflow: hidden;
    }
    .score-overlay.open { display: block; }

    .score-overlay-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,.45);
      animation: backdropIn .25s ease;
    }
    @keyframes backdropIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

    /* Sheet fills the entire card */
    .score-overlay-sheet {
      position: absolute;
      inset: 0;
      z-index: 1;
      background: var(--white);
      border-radius: var(--radius);
      padding: 28px 24px 24px;
      overflow-y: auto;
      animation: sheetIn .3s cubic-bezier(.4,0,.2,1);
    }
    @keyframes sheetIn {
      from { opacity: 0; transform: scale(.97); }
      to   { opacity: 1; transform: scale(1); }
    }

    .score-overlay-close {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: none;
      background: var(--green-pale);
      color: var(--green);
      font-size: 1rem;
      cursor: pointer;
      display: grid;
      place-items: center;
      transition: background .15s;
    }
    .score-overlay-close:hover { background: #e148c4; color: var(--white); }

    /* Pull indicator */
    .score-overlay-pill {
      width: 40px;
      height: 4px;
      background: #ddd;
      border-radius: 2px;
      margin: 0 auto 20px;
    }

    .score-overlay-header {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
      margin-bottom: 18px;
    }
    .score-overlay-pts {
      font-size: 2.6rem;
      font-weight: 900;
      line-height: 1;
      color: var(--green);
      flex-shrink: 0;
    }
    .score-overlay-pts.gold { color: var(--gold-dark); }
    .score-overlay-title {
      font-size: 1.2rem;
      font-weight: 800;
      color: var(--text);
      line-height: 1.2;
    }
    .score-overlay-subtitle {
      font-size: .8rem;
      color: #d054b5;
      margin-top: 3px;
    }

    .score-overlay-body p {
      font-size: .93rem;
      color: var(--text-muted);
      line-height: 1.7;
      margin-bottom: 12px;
    }
    .score-overlay-body p:last-child { margin-bottom: 0; }

    .score-overlay-tip {
      background: #f3deee;
      border-left: 4px solid #d054b5;
      border-radius: 0 10px 10px 0;
      padding: 12px 14px;
      margin-top: 16px;
      font-size: .85rem;
      color: #b80992;
      font-weight: 500;
      line-height: 1.55;
    }
    .score-overlay-tip::before { content: '💡 '; }

    .score-overlay-steps {
      margin-top: 14px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .score-overlay-step {
      display: flex;
      gap: 12px;
      align-items: flex-start;
    }
    .score-overlay-step-num {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: var(--green);
      color: var(--white);
      font-size: .72rem;
      font-weight: 800;
      display: grid;
      place-items: center;
      flex-shrink: 0;
      margin-top: 1px;
    }
    .score-overlay-step-num.gold { background: var(--gold-dark); }
    .score-overlay-step p {
      font-size: .88rem;
      color: var(--text-muted);
      line-height: 1.55;
      margin: 0;
    }
    .score-overlay-step strong { color: var(--text); }

    /* ── Field Learn More Button ── */
    .field-learn-more-btn {
      display: block;
      width: 100%;
      padding: 13px 24px;
      background: #3e6951;
      color: var(--white);
      border: none;
      border-radius: 12px;
      font-size: .95rem;
      font-weight: 700;
      cursor: pointer;
      text-align: center;
      transition: opacity .15s, transform .1s;
      margin-top: 16px;
      font-family: inherit;
      letter-spacing: .3px;
    }
    .field-learn-more-btn:hover  { opacity: .88; }
    .field-learn-more-btn:active { transform: scale(.98); }

    /* ── Field Focus Overlay ── */
    .field-focus-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 600;
      background: var(--off-white);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      animation: fadeSlide .3s ease;
    }
    .field-focus-overlay.open { display: block; }

    .field-focus-inner {
      padding: 0 16px 60px;
      max-width: 700px;
      margin: 0 auto;
    }

    .field-focus-bar {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px 0 12px;
      position: sticky;
      top: 0;
      background: var(--off-white);
      z-index: 10;
      border-bottom: 1px solid #e0e0e0;
      margin-bottom: 16px;
    }

    .overlay-back {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: none;
      background: #2d6a4f;
      color: #ffffff;
      font-size: 1.1rem;
      cursor: pointer;
      display: grid;
      place-items: center;
      transition: background .15s, color .15s;
      flex-shrink: 0;
    }
    .overlay-back:hover { background: #5e7a68; color: #ddf2de; }

    .field-focus-nav {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1;
      min-width: 0;
    }

    .field-focus-title {
      font-size: 1.1rem;
      font-weight: 800;
      color: var(--text);
      white-space: nowrap;
    }

    .field-focus-topic {
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--green);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .field-focus-topic:not(:empty)::before { content: ' '; }

    /* Detail panel between image and buttons */
    .field-focus-detail {
      min-height: 240px;
      background: var(--white);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 20px;
      margin: 16px 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }

    .field-focus-hint {
      font-size: .93rem;
      color: var(--green);
      font-weight: 600;
      line-height: 1.5;
      margin: 0;
    }
    .field-action-item { padding: 9px 12px; }

    .field-focus-detail-title {
      font-size: 1.15rem;
      font-weight: 800;
      color: var(--green);
      margin-bottom: 4px;
    }

    .field-focus-detail-subtitle {
      font-size: .82rem;
      color: #d054b5;
      font-weight: 600;
      margin-bottom: 14px;
    }

    .field-focus-detail-body p {
      font-size: .93rem;
      color: var(--text-muted);
      line-height: 1.7;
      margin-bottom: 12px;
    }
    .field-focus-detail-body p:last-child { margin-bottom: 0; }
    .field-focus-detail-body ul {
      margin: 0 0 12px 1.2em;
      padding: 0;
      color: var(--text-muted);
    }
    .field-focus-detail-body ul li {
      font-size: .93rem;
      color: var(--text-muted);
      line-height: 1.7;
      margin-bottom: 4px;
      list-style: disc;
    }
    .field-focus-detail-body ul li strong { color: var(--text-muted); }

    /* These overlays must sit above the focus overlays (z-index 600) */
    #field-overlay    { z-index: 700; }
    #score-overlay    { z-index: 700; }
    #action-overlay   { z-index: 700; }
    #rules-overlay    { z-index: 700; }
    #penalty-overlay  { z-index: 700; }
    #runplay-overlay  { z-index: 700; }
    #passcon-overlay  { z-index: 700; }
    #route-overlay    { z-index: 700; }
    #coverage-overlay { z-index: 700; }

    /* Downs overlay: always stack header above circles regardless of screen width */
    #downs-focus-overlay .down-tracker { display: block; text-align: center; }
    #downs-focus-overlay .down-tracker h3 { margin-bottom: 16px; white-space: normal; }
    #downs-focus-overlay .down-tracker p { margin-top: 14px; }

    /* ── Welcome Overlay ── */
    .welcome-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 1000;
      overflow-y: auto;
    }
    .welcome-overlay.open { display: block; }

    .welcome-overlay-sheet {
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
      background: linear-gradient(135deg, #1b4332 0%, #2d6a4f 60%, #40916c 100%);
      animation: sheetIn .35s cubic-bezier(.4,0,.2,1);
      position: relative;
    }

    .welcome-overlay-header {
      padding: clamp(40px, 8vw, 64px) clamp(20px, 6vw, 60px) clamp(40px, 8vw, 64px);
      text-align: center;
      position: relative;
    }
    .welcome-overlay-header img {
      width: clamp(40px, 45vw, 300px);
      height: auto;
      display: block;
      margin: 0 auto 20px;
    }
    .welcome-overlay-header h2 {
      font-size: clamp(1.4rem, 4vw, 2rem);
      font-weight: 800;
      color: var(--white);
      margin: 0;
      letter-spacing: -.3px;
    }
    .welcome-overlay-header p {
      font-size: clamp(.9rem, 2vw, 1rem);
      color: rgba(255,255,255,.85);
      margin-top: 10px;
      line-height: 1.6;
      max-width: 500px;
      margin-inline: auto;
    }

    .welcome-overlay-body {
      flex: 1;
      padding: 0 clamp(20px, 6vw, 60px) clamp(32px, 6vw, 56px);
      margin-top: -20px;
      display: flex;
      flex-direction: column;
      gap: 20px;
      max-width: 800px;
      width: 100%;
      margin-inline: auto;
    }

    .welcome-overlay-video {
      width: 100%;
      border-radius: 16px;
      overflow: hidden;
      background: #000;
      box-shadow: 0 12px 40px rgba(0,0,0,.4);
    }
    .welcome-overlay-video video {
      width: 100%;
      display: block;
    }

    .welcome-overlay-close {
      position: fixed;
      top: 16px;
      right: 16px;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: none;
      background: rgba(255,255,255,.2);
      color: var(--white);
      font-size: 1.1rem;
      cursor: pointer;
      display: grid;
      place-items: center;
      transition: background .15s;
      z-index: 1001;
    }
    .welcome-overlay-close:hover { background: rgba(255,255,255,.35); }

    .welcome-overlay-cta {
      background: var(--white);
      color: #d217a2;
      border: none;
      border-radius: 50px;
      padding: clamp(12px, 3vw, 16px) clamp(24px, 5vw, 40px);
      font-size: clamp(.95rem, 2.5vw, 1.1rem);
      font-weight: 800;
      cursor: pointer;
      width: 100%;
      max-width: 400px;
      align-self: center;
      transition: background .2s, transform .1s, color .2s;
      letter-spacing: .3px;
      box-shadow: 0 4px 20px rgba(0,0,0,.2);
    }
    .welcome-overlay-cta:hover  { background: var(--green-pale); }
    .welcome-overlay-cta:active { transform: scale(.98); }

    /* ── Footer ── */
    footer {
      text-align: center;
      padding: 0px 14px;
      font-size: .75rem;
      color: #ffffff;
      background: #b13da4;
      border-radius: 0;
    }

    /* ════════════════════════════════════════
       DESKTOP RESPONSIVE  ≥ 768px
    ════════════════════════════════════════ */
    @media (min-width: 768px) {

      /* Hero scales up */
      .hero { padding: 40px; }
      .hero p { font-size: 1.1rem; max-width: 500px; }

      /* Nav topbar wider padding */
      .nav-topbar { padding: 10px 40px; min-height: 68px; }
      body { padding-top: 68px; }
      .nav-wrap { top: 68px; }
      .nav-logo { height: 52px; }

      /* Nav: center pills, stop them from scrolling */
      .nav-scroll {
        justify-content: center;
        flex-wrap: wrap;
        overflow-x: visible;
        padding: 0 40px;
        max-width: 1080px;
        margin-inline: auto;
      }
      .nav-pill { font-size: .92rem; padding: 9px 22px; }

      /* Main padding */
      main { padding: 36px 40px 100px; }

      /* ── 2-column card grid for all content sections ── */
      .card-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        align-items: start;
      }

      /* ── Game & Rules sections: single centered column ── */
      #concept .card-grid,
      #rules .card-grid {
        grid-template-columns: 1fr;
      }

      /* Cards get slightly more breathing room */
      .card { padding: 26px 24px; }
      .card h2 { font-size: 1.12rem; }
      .card p  { font-size: .96rem; }

      /* Score grid goes 3-column on desktop */
      .score-grid { grid-template-columns: repeat(3, 1fr); }
      .score-grid .score-item:last-child { grid-column: auto; }

      /* Action grid goes 4-column on desktop */
      .action-grid { grid-template-columns: repeat(4, 1fr); }

      /* Rules & penalties get a 2-col list layout */
      .rules-list-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 32px;
      }
      .rules-list-grid .rule-item { border-bottom: 1px solid var(--green-pale); }
      .rules-list-grid .rule-item:last-child,
      .rules-list-grid .rule-item:nth-last-child(2):nth-child(odd) { border-bottom: none; }

      /* Actions list — same 2-col layout as rules */
      .actions-list-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 32px;
      }
      .actions-list-grid .rule-item { border-bottom: 1px solid var(--green-pale); }
      .actions-list-grid .rule-item:last-child,
      .actions-list-grid .rule-item:nth-last-child(2):nth-child(odd) { border-bottom: none; }

      .penalties-list-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 32px;
      }
      .penalties-list-grid .penalty-item { border-bottom: 1px solid var(--green-pale); }
      .penalties-list-grid .penalty-item:last-child,
      .penalties-list-grid .penalty-item:nth-last-child(2):nth-child(odd) { border-bottom: none; }

      /* Position carousel: 960px wide, centered */
      .pos-carousel-wrap { max-width: 960px; margin-inline: auto; }
      .pos-arrow-left  { left: -24px; }
      .pos-arrow-right { right: -24px; }
      .pos-slide-inner { gap: 32px; }

      /* Down tracker: row layout */
      .down-tracker { display: flex; align-items: center; gap: 32px; text-align: left; }
      .down-tracker h3 { margin-bottom: 0; white-space: nowrap; flex-shrink: 0; }
      .downs-row { flex-shrink: 0; }
      .down-tracker p { margin-top: 0; flex: 1; }

      /* Quiz: 960px wide, centered */
      #quiz { max-width: 960px; margin-inline: auto; }
      .quiz-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

      /* Footer */
      footer { font-size: .82rem; padding: 32px; }
    }

    /* ── Extra wide: 3-col score grid already set, just a touch more padding ── */
    @media (min-width: 1024px) {
      main { padding: 40px 60px 100px; }
      .card { padding: 30px 28px; }
    }

    /* ── Auth Modal ── */
    .auth-modal {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 1100;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .auth-modal.open { display: flex; }
    .auth-modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,.55);
    }
    .auth-modal-card {
      position: relative;
      z-index: 1;
      background: var(--white);
      border-radius: var(--radius);
      box-shadow: 0 8px 40px rgba(0,0,0,.22);
      padding: 32px 28px 24px;
      width: 100%;
      max-width: 400px;
      max-height: 90dvh;
      overflow-y: auto;
      animation: fadeSlide .3s ease;
    }
    .auth-modal-logo {
      display: block;
      width: 72px;
      height: auto;
      margin: 0 auto 12px;
    }
    .auth-modal-title {
      text-align: center;
      font-size: 1.25rem;
      font-weight: 800;
      color: var(--green);
      margin-bottom: 4px;
    }
    .auth-modal-sub {
      text-align: center;
      font-size: .87rem;
      color: var(--text-muted);
      margin-bottom: 22px;
      line-height: 1.5;
    }
    .auth-btn-google {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      padding: 11px 16px;
      border: 1.5px solid #dadce0;
      border-radius: 8px;
      background: #fff;
      color: #3c4043;
      font-size: .93rem;
      font-weight: 600;
      cursor: pointer;
      transition: background .15s, box-shadow .15s;
      margin-bottom: 16px;
      font-family: inherit;
    }
    .auth-btn-google:hover { background: #f8f9fa; box-shadow: 0 1px 6px rgba(0,0,0,.12); }
    .auth-divider {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
      color: #bbb;
      font-size: .8rem;
    }
    .auth-divider::before,
    .auth-divider::after { content: ''; flex: 1; height: 1px; background: #e5e5e5; }
    .pf-label {
      display: block;
      font-size: .78rem;
      font-weight: 700;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: .04em;
      margin: 12px 0 4px;
    }
    .auth-input {
      display: block;
      width: 100%;
      padding: 11px 14px;
      border: 1.5px solid #ddd;
      border-radius: 8px;
      font-size: .92rem;
      color: var(--text);
      background: var(--white);
      outline: none;
      transition: border-color .2s;
      margin-bottom: 10px;
      font-family: inherit;
    }
    .auth-input::placeholder { color: #757575; }
    .auth-input:focus { border-color: #e148c4; }
    .auth-btn-primary {
      display: block;
      width: 100%;
      padding: 12px;
      background: #b13da4;
      color: var(--white);
      border: none;
      border-radius: 8px;
      font-size: .93rem;
      font-weight: 700;
      cursor: pointer;
      transition: background .15s, transform .1s;
      margin-bottom: 12px;
      font-family: inherit;
    }
    .auth-btn-primary:hover { background: #c15cb1; }
    .auth-btn-primary:active { transform: scale(.98); }
    .auth-mode-toggle {
      text-align: center;
      font-size: .84rem;
      color: var(--text-muted);
      margin-bottom: 14px;
    }
    .auth-mode-toggle a {
      color: #d217a2;
      cursor: pointer;
      font-weight: 600;
      text-decoration: none;
    }
    .auth-mode-toggle a:hover { text-decoration: underline; }
    .auth-skip {
      display: block;
      width: 100%;
      padding: 8px;
      background: transparent;
      border: none;
      color: #aaa;
      font-size: .82rem;
      cursor: pointer;
      text-align: center;
      font-family: inherit;
    }
    .auth-skip:hover { color: var(--text-muted); text-decoration: underline; }
    .auth-error {
      background: #fff0f5;
      color: #b0003a;
      border: 1px solid #f9cdd8;
      border-radius: 6px;
      padding: 9px 13px;
      font-size: .82rem;
      margin-bottom: 10px;
      display: none;
      line-height: 1.4;
    }
    .auth-error.visible { display: block; }

    .auth-success {
      background: #f0fff6;
      color: #1a6b3a;
      border: 1px solid #b2dfcc;
      border-radius: 6px;
      padding: 9px 13px;
      font-size: .82rem;
      margin-bottom: 10px;
      display: none;
      line-height: 1.4;
    }
    .auth-success.visible { display: block; }

    .auth-forgot-wrap {
      text-align: right;
      margin-top: -4px;
      margin-bottom: 10px;
    }
    .auth-forgot-link {
      font-size: .8rem;
      color: var(--green);
      cursor: pointer;
      text-decoration: none;
    }
    .auth-forgot-link:hover { text-decoration: underline; }

    /* ── Profile form selects ── */
    .auth-select {
      appearance: none;
      -webkit-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23555' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
      padding-right: 36px;
      cursor: pointer;
      color: #757575;
    }
    .auth-select.selected { color: var(--text); }
    .auth-select option:not([disabled]) { color: var(--text); }

    /* ── Sign-In button in Nav (shown when logged out) ── */
    .nav-signin-btn {
      display: flex;
      align-items: center;
      padding: 7px 16px;
      border-radius: 20px;
      background: #b13da4;
      color: var(--white);
      font-size: .82rem;
      font-weight: 700;
      border: none;
      cursor: pointer;
      font-family: inherit;
      transition: background .15s, box-shadow .15s;
      white-space: nowrap;
      flex-shrink: 0;
    }
    .nav-signin-btn:hover { background: #c15cb1; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
    .nav-signin-btn.hidden { display: none; }

    /* ── User Avatar in Nav ── */
    .nav-user-btn {
      display: none;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: var(--green);
      color: var(--white);
      font-weight: 800;
      font-size: .83rem;
      border: 2px solid rgba(255,255,255,.7);
      cursor: pointer;
      flex-shrink: 0;
      overflow: hidden;
      position: relative;
      transition: box-shadow .15s;
      padding: 0;
    }
    .nav-user-btn.visible { display: flex; }
    .nav-user-btn:hover { box-shadow: 0 0 0 3px rgba(255,255,255,.5); }
    .nav-user-initials { position: relative; z-index: 1; pointer-events: none; }
    .nav-user-photo {
      display: none;
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
    }

    /* ── User Dropdown ── */
    #nav-user-area { position: relative; }
    .nav-user-dropdown {
      display: none;
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      background: var(--white);
      border-radius: var(--radius);
      box-shadow: 0 6px 24px rgba(0,0,0,.16);
      min-width: 220px;
      z-index: 200;
      overflow: hidden;
      animation: fadeSlide .2s ease;
    }
    .nav-user-dropdown.open { display: block; }
    .nav-user-dropdown-info {
      padding: 14px 16px;
      border-bottom: 1px solid #f0f0f0;
    }
    .nav-user-dropdown-name {
      font-weight: 700;
      font-size: .93rem;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .nav-user-dropdown-email {
      font-size: .77rem;
      color: var(--text-muted);
      margin-top: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .nav-football-level-wrap {
      padding: 10px 16px;
      border-bottom: 1px solid #f0f0f0;
    }
    .nav-football-level-label {
      font-size: .72rem;
      font-weight: 700;
      color: var(--text-muted);
      text-transform: uppercase;
      letter-spacing: .04em;
      margin-bottom: 6px;
    }
    .nav-football-level-select {
      width: 100%;
      padding: 7px 10px;
      border: 1px solid #ddd;
      border-radius: 8px;
      font-size: .85rem;
      font-family: inherit;
      color: var(--text);
      background: #f8f8f8;
      cursor: pointer;
      appearance: auto;
    }
    .nav-football-level-select:focus { outline: 2px solid #e148c4; border-color: transparent; }
    .nav-user-edit-profile {
      display: block;
      width: 100%;
      padding: 11px 16px;
      background: transparent;
      border: none;
      text-align: left;
      font-size: .88rem;
      color: var(--green);
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      border-bottom: 1px solid #f0f0f0;
    }
    .nav-user-edit-profile:hover { background: #f0faf4; }
    .nav-user-signout {
      display: block;
      width: 100%;
      padding: 13px 16px;
      background: transparent;
      border: none;
      text-align: left;
      font-size: .88rem;
      color: #b0003a;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
    }
    .nav-user-signout:hover { background: #fff5f7; }

    /* ── Expandable Cards ── */
    .expand-list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      align-items: start;
    }
    @media (max-width: 600px) {
      .expand-list { grid-template-columns: 1fr; }
    }
    .expand-card {
      background: #3e6951;
      border-radius: 12px;
      border: 2px solid transparent;
      cursor: pointer;
      overflow: hidden;
      transition: box-shadow .15s, border-color .2s, opacity .15s;
    }
    .expand-card:hover  { box-shadow: 0 4px 14px rgba(0,0,0,.15); opacity: .92; border-color: #ddf2de; }
    .expand-card:hover .expand-card-header,
    .expand-card.expanded .expand-card-header { color: #ddf2de; }
    .expand-card:active { transform: scale(.99); }
    .expand-card.expanded            { border-color: transparent; }
    .expand-card--special.expanded   { border-color: transparent; }
    .expand-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 13px 16px;
      color: var(--white);
      font-weight: 700;
      font-size: .95rem;
      letter-spacing: .3px;
    }
    .expand-icon {
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--white);
      flex-shrink: 0;
      margin-left: 8px;
      line-height: 1;
      user-select: none;
      transition: transform .25s;
    }
    .expand-card-body {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows .3s ease;
      background: #eef8ee;
      border-radius: 0 0 10px 10px;
    }
    .expand-card-body > * { overflow: hidden; }
    .expand-card-body-inner {
      padding: 0 14px;
      font-size: .88rem;
      line-height: 1.6;
      overflow: hidden;
      transition: padding .3s ease;
      background: #eef8ee;
    }
    .expand-card.expanded .expand-card-body {
      grid-template-rows: 1fr;
    }
    .expand-card.expanded .expand-card-body-inner {
      padding: 14px;
    }

    /* ── Play Set Up Grid ── */
    .play-setup-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-top: 4px;
    }
    @media (max-width: 600px) {
      .play-setup-grid { grid-template-columns: 1fr; }
    }
    .play-setup-cell {
      background: var(--off-white);
      border: 1px solid #e4ede6;
      border-radius: 12px;
      padding: 16px 16px 56px;
      position: relative;
      display: flex;
      flex-direction: column;
    }
    .play-setup-title {
      font-size: 1rem;
      font-weight: 700;
      color: var(--green);
      margin: 0 0 10px;
    }
    .play-setup-desc {
      font-size: .88rem;
      color: var(--text-muted);
      line-height: 1.55;
      margin: 0;
      flex: 1;
    }
    .play-setup-btn {
      position: absolute;
      bottom: 12px;
      left: 12px;
      right: 12px;
      background: var(--green);
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 12px 16px;
      font-size: .88rem;
      font-weight: 700;
      cursor: pointer;
      text-align: center;
      transition: opacity .15s;
    }
    .play-setup-btn:hover  { opacity: .88; }
    .play-setup-btn:active { transform: scale(.98); }

    /* ── Tips FAB ── */
    #tips-fab {
      position: fixed;
      bottom: 10px;
      right: 16px;
      z-index: 700;
      background: #d054bf;
      color: #fff;
      border: none;
      border-radius: 50%;
      width: 58px;
      height: 58px;
      font-size: 1.6rem;
      cursor: pointer;
      box-shadow: 0 4px 16px rgba(208,84,191,.5);
      display: none;
      align-items: center;
      justify-content: center;
      transition: transform .15s, opacity .15s;
    }
    #tips-fab.visible       { display: flex; }
    #tips-fab.no-tip        { opacity: .4; cursor: default; pointer-events: none; }
    #tips-fab:hover         { transform: scale(1.06); }
    #tips-fab:active        { transform: scale(.95); }

    /* ── Tips Dialog ── */
    #tips-dialog-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.45);
      z-index: 800;
    }
    #tips-dialog-backdrop.open { display: block; }
    #tips-dialog {
      position: fixed;
      top: 24px;
      right: 0;
      bottom: 100px;
      width: min(340px, 80vw);
      background: #fff;
      border-radius: 16px 0 0 16px;
      overflow-y: auto;
      padding: 0 0 24px;
      box-shadow: -4px 0 28px rgba(0,0,0,.2);
      animation: slideInRight .25s ease;
      z-index: 801;
    }
    .tips-dialog-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 20px 16px;
    }
    .tips-dialog-title {
      font-weight: 800;
      font-size: 1.25rem;
      color: #d054bf;
      line-height: 1.2;
      flex: 1;
      padding-right: 8px;
    }
    .tips-dialog-close {
      width: 40px;
      height: 40px;
      flex-shrink: 0;
      border: none;
      border-radius: 50%;
      background: #f6e8f1;
      color: #d054bf;
      font-size: 1.1rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .tips-dialog-close:hover { background: #d054bf; color: #fff; }
    .tips-list {
      padding: 0 16px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .tips-list-item {
      background: #f8edf6;
      border-left: 4px solid #c15cba;
      border-radius: 0 8px 8px 0;
      padding: 12px 14px;
      font-size: .9rem;
      line-height: 1.6;
      color: #2d2d2d;
    }
    .tips-plain {
      font-size: .9rem;
      line-height: 1.6;
      color: #2d2d2d;
      padding: 0 2px;
    }
    .tips-list-label {
      font-weight: 700;
      color: #d054bf;
      font-size: .75rem;
      text-transform: uppercase;
      letter-spacing: .04em;
      margin-bottom: 5px;
    }
    .tips-none {
      color: #999;
      font-size: .9rem;
      padding: 16px 0;
      text-align: center;
    }