/* Liga XXL website — "Pitch" theme: mowed grass, chalk lines, stadium scoreboard, referee cards.
   Scoped to [data-theme="pitch"]; tokens and pitch markings live in themes.css. */

[data-theme="pitch"] body.site { color: var(--text); }
[data-theme="pitch"] .site h1, [data-theme="pitch"] .site h2, [data-theme="pitch"] .site h3 { font-family: var(--kit); font-weight: 600; letter-spacing: .01em; line-height: .85; }
[data-theme="pitch"] .accent { color: var(--card-yellow); }

/* nav */
[data-theme="pitch"] .site-nav .brand { font-family: var(--kit); font-weight: 600; font-size: 26px; letter-spacing: .03em; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
[data-theme="pitch"] .site-nav.scrolled { background: rgba(14, 27, 44, .95); border-color: var(--chalk); }
[data-theme="pitch"] .site-nav.scrolled .brand, [data-theme="pitch"] .site-nav.scrolled nav a { color: var(--chalk); }
[data-theme="pitch"] .site-nav nav a { font-family: var(--kit); font-weight: 500; font-size: 22px; letter-spacing: .04em; text-transform: uppercase; border: 0; padding: 6px 12px 2px; }
[data-theme="pitch"] .site-nav nav a:hover, [data-theme="pitch"] .site-nav.scrolled nav a:hover { background: var(--card-yellow); color: var(--navy); border-radius: 3px; }
[data-theme="pitch"] .menu-btn { background: var(--card-yellow); border-color: var(--navy); box-shadow: none; }
@media (max-width: 860px) {
  [data-theme="pitch"] .site-nav nav { background: var(--navy); border-bottom: 4px solid var(--chalk); }
  [data-theme="pitch"] .site-nav nav a, [data-theme="pitch"] .site-nav.scrolled nav a { color: var(--chalk); font-size: 30px; }
  [data-theme="pitch"] .menu-open .site-nav .brand { color: var(--chalk); }
}

/* buttons: referee cards */
[data-theme="pitch"] .site .btn { border: 0; border-radius: 6px; box-shadow: 0 5px 0 rgba(0, 0, 0, .28); background: var(--chalk); color: var(--navy); font-family: var(--kit); font-weight: 600; font-size: 22px; letter-spacing: .04em; text-transform: uppercase; padding: 12px 22px 8px; transition: transform .15s; }
[data-theme="pitch"] .site .btn:hover { transform: rotate(-3deg) translateY(-2px); filter: none; }
[data-theme="pitch"] .site .btn:active { transform: translateY(4px); box-shadow: 0 1px 0 rgba(0, 0, 0, .28); }
[data-theme="pitch"] .site .btn.primary { background: var(--card-yellow); color: var(--navy); }
[data-theme="pitch"] .big-btn { font-size: 26px; padding: 16px 28px 11px; }
[data-theme="pitch"] .nav-login { font-size: 18px !important; padding: 8px 14px 5px !important; }

[data-theme="pitch"] .kicker-tag { background: var(--navy); color: var(--chalk); border: 2px solid var(--chalk); box-shadow: none; border-radius: 4px; font-family: var(--kit); font-weight: 500; font-size: 18px; letter-spacing: .08em; padding: 4px 12px 1px; }
[data-theme="pitch"] .kicker-tag.light { background: var(--card-yellow); color: var(--navy); border-color: var(--navy); }

/* hero: the pitch from above, logo on the centre spot */
[data-theme="pitch"] .s-hero { background: repeating-linear-gradient(90deg, var(--grass) 0 9vw, var(--grass-2) 9vw 18vw); border-bottom: 6px solid var(--chalk); }
[data-theme="pitch"] .s-hero::before { background: radial-gradient(80% 70% at 70% 45%, transparent 40%, rgba(0, 0, 0, .25)); }
[data-theme="pitch"] .s-hero .pitch-lines { --pc-x: 73%; --pc-y: 46%; --pc-r: min(19vw, 250px); }
[data-theme="pitch"] .hero-shapes { display: none; }
[data-theme="pitch"] .s-hero-copy h1 { font-size: clamp(64px, 10vw, 150px); text-shadow: 0 5px 0 rgba(0, 0, 0, .25); margin: 16px 0 14px; }
[data-theme="pitch"] .s-hero-copy h1 span { color: var(--card-yellow); }
[data-theme="pitch"] .s-hero-copy p { color: var(--chalk); text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
[data-theme="pitch"] .alogo-img { filter: drop-shadow(0 14px 0 rgba(0, 0, 0, .25)); }
[data-theme="pitch"] .alogo-ball { filter: drop-shadow(0 6px 4px rgba(0, 0, 0, .35)); }
[data-theme="pitch"] .alogo-burst { stroke: var(--chalk); }
@media (max-width: 860px) {
  [data-theme="pitch"] .s-hero .pitch-lines { --pc-x: 50%; --pc-y: 24%; --pc-r: min(36vw, 180px); }
  [data-theme="pitch"] .pl-box, [data-theme="pitch"] .pl-six, [data-theme="pitch"] .pl-arc { display: none; }
}

/* stadium scoreboard */
[data-theme="pitch"] .stat-strip { gap: 0; background: #0b0f0c; border: 6px solid #2a2f2b; border-radius: 10px; box-shadow: 0 10px 0 rgba(0, 0, 0, .25); padding: 6px; }
[data-theme="pitch"] .stat-strip div, [data-theme="pitch"] .stat-strip div:nth-child(n) { background: transparent; border: 0; border-left: 2px solid #232823; border-radius: 0; box-shadow: none; color: var(--chalk); text-align: center; padding: 10px 12px; }
[data-theme="pitch"] .stat-strip div:first-child { border-left: 0; }
[data-theme="pitch"] .stat-strip b { font-family: var(--score); font-weight: 600; color: var(--led); font-size: clamp(44px, 5vw, 66px); line-height: .9; text-shadow: 0 0 14px rgba(255, 179, 0, .55); }
[data-theme="pitch"] .stat-strip span { font-family: var(--kit); font-weight: 500; font-size: 18px; letter-spacing: .08em; opacity: .8; }
@media (max-width: 860px) { [data-theme="pitch"] .stat-strip div:nth-child(3) { border-left: 0; } [data-theme="pitch"] .stat-strip div:nth-child(n + 3) { border-top: 2px solid #232823; } }

/* LED advertising boards */
[data-theme="pitch"] .marquee { background: #070807; border-top: 4px solid #2a2f2b; border-bottom: 4px solid #2a2f2b; }
[data-theme="pitch"] .mq-item { font-family: var(--score); font-weight: 600; font-size: 30px; color: var(--led); text-shadow: 0 0 10px rgba(255, 179, 0, .6); letter-spacing: .06em; }
[data-theme="pitch"] .marquee::after { content: ""; position: absolute; }
[data-theme="pitch"] .marquee { position: relative; }
[data-theme="pitch"] .marquee::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, transparent 1px, rgba(0, 0, 0, .55) 1.6px); background-size: 4px 4px; pointer-events: none; z-index: 1; }

/* sections sit on grass */
[data-theme="pitch"] .s-head h2 { color: var(--chalk); font-size: clamp(56px, 8vw, 104px); text-shadow: 0 4px 0 rgba(0, 0, 0, .2); }
[data-theme="pitch"] .lead, [data-theme="pitch"] .s-head.left .lead { color: rgba(255, 255, 255, .88); }
[data-theme="pitch"] .s-split .ticks li { color: var(--chalk); }
[data-theme="pitch"] .ticks li { font-size: 17px; }
[data-theme="pitch"] .ticks li > span { background: var(--chalk); border: 0; border-radius: 6px; }
[data-theme="pitch"] .ticks li > span .ic { filter: none; }

/* steps: kit numbers */
[data-theme="pitch"] .step, [data-theme="pitch"] .step:nth-child(n) { background: var(--card); border: 0; border-radius: 10px; box-shadow: var(--pop-lg); padding-top: 34px; }
[data-theme="pitch"] .step-n { width: 52px; height: 58px; border-radius: 0; top: -22px; background: var(--navy); color: var(--chalk); font-family: var(--kit); font-weight: 600; font-size: 34px; padding-top: 8px; clip-path: polygon(22% 0, 78% 0, 100% 18%, 88% 32%, 88% 100%, 12% 100%, 12% 32%, 0 18%); }
[data-theme="pitch"] .step:nth-child(2) .step-n { background: var(--card-red); }
[data-theme="pitch"] .step:nth-child(3) .step-n { background: var(--grass); }
[data-theme="pitch"] .step:nth-child(4) .step-n { background: var(--card-yellow); color: var(--navy); }
[data-theme="pitch"] .step h3 { font-size: 40px; }
[data-theme="pitch"] .step-ic .ic { filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .2)); }

/* paper cards */
[data-theme="pitch"] .site .card, [data-theme="pitch"] .wall-badge, [data-theme="pitch"] .faq details { background: var(--card); border: 0; border-radius: 10px; box-shadow: var(--pop-lg); }
[data-theme="pitch"] .site .card h2 { font-size: 34px; }
[data-theme="pitch"] .fat-pos { border: 0; background: var(--navy); color: var(--chalk); border-radius: 4px; font-family: var(--kit); font-size: 18px; padding-top: 3px; }
[data-theme="pitch"] .fat-row:first-child .fat-pos { background: var(--card-yellow); color: var(--navy); }
[data-theme="pitch"] .fat-num b { font-family: var(--score); font-size: 28px; font-weight: 600; }
[data-theme="pitch"] .bar { border: 0; background: #e3e0d3; height: 10px; }
[data-theme="pitch"] .bar > i { background: repeating-linear-gradient(90deg, var(--grass) 0 14px, var(--grass-2) 14px 28px); }

/* teams: kit-stripe trading cards */
[data-theme="pitch"] .team-card { background: var(--card); border: 0; border-radius: 12px; box-shadow: var(--pop-lg); }
[data-theme="pitch"] .team-card::before { height: 120px; border: 0; background: repeating-linear-gradient(90deg, var(--team) 0 22px, color-mix(in srgb, var(--team) 78%, white) 22px 44px); }
[data-theme="pitch"] .team-card:hover, [data-theme="pitch"] .team-card.reveal.in:hover { transform: rotate(-1.5deg) translateY(-4px); box-shadow: 0 14px 0 rgba(0, 0, 0, .2); }
[data-theme="pitch"] .team-card h3 { font-size: 36px; }
[data-theme="pitch"] .team-meta span { border: 0; background: var(--navy); color: var(--chalk); border-radius: 4px; font-family: var(--kit); font-weight: 500; font-size: 17px; padding: 3px 10px 0; }
[data-theme="pitch"] .form-dots i { border: 0; border-radius: 3px; }
[data-theme="pitch"] .W { background: var(--grass-2); color: #fff !important; }
[data-theme="pitch"] .D { background: #b9b6a8; }
[data-theme="pitch"] .L { background: var(--card-red); color: #fff !important; }

/* table: matchday scoreboard */
[data-theme="pitch"] .site .tbl th { background: var(--navy); color: var(--chalk); border-bottom: 0; font-family: var(--kit); font-weight: 500; font-size: 17px; letter-spacing: .08em; }
[data-theme="pitch"] .site .tbl td { font-weight: 700; }
[data-theme="pitch"] .site .tbl tbody tr:nth-child(odd) td { background: #f3f1e8; }
[data-theme="pitch"] .site .tbl tbody tr:first-child td { background: #fff5c2; }
[data-theme="pitch"] .site .tbl .pts { font-family: var(--score); font-size: 26px; font-weight: 600; }
[data-theme="pitch"] .fx { border: 0; background: #f3f1e8; border-radius: 8px; }
[data-theme="pitch"] .fx-mid b { background: #0b0f0c; color: var(--led); border-radius: 4px; font-family: var(--score); font-weight: 600; font-size: 24px; padding: 4px 8px 0; text-shadow: 0 0 8px rgba(255, 179, 0, .6); }

[data-theme="pitch"] .wall-badge b { font-family: var(--kit); font-weight: 600; font-size: 22px; letter-spacing: .03em; text-transform: uppercase; }

/* join: navy + yellow card */
[data-theme="pitch"] .join-card { border: 0; border-radius: 14px; box-shadow: 0 14px 0 rgba(0, 0, 0, .25); }
[data-theme="pitch"] .join-left { background: var(--navy); }
[data-theme="pitch"] .join-left h2 { text-shadow: none; font-size: clamp(48px, 6vw, 76px); }
[data-theme="pitch"] .ticks.light li > span { background: var(--card-yellow); }
[data-theme="pitch"] .join-right { background: var(--card-yellow); border-left: 0; }
[data-theme="pitch"] .price-tag { font-family: var(--score); font-weight: 600; }
[data-theme="pitch"] .price-tag b { font-size: clamp(110px, 12vw, 170px); text-shadow: none; line-height: .8; }
[data-theme="pitch"] .join-right .btn.primary { background: var(--navy); color: var(--card-yellow); }

/* faq */
[data-theme="pitch"] .faq summary { font-family: var(--kit); font-weight: 500; font-size: 26px; letter-spacing: .02em; text-transform: uppercase; padding-bottom: 12px; }
[data-theme="pitch"] .faq details[open] { background: var(--card); box-shadow: inset 6px 0 0 var(--card-yellow), var(--pop-lg); }

[data-theme="pitch"] .site-foot { background: var(--navy); border-top: 6px solid var(--chalk); }
[data-theme="pitch"] .site-foot nav a { font-family: var(--kit); font-size: 20px; letter-spacing: .04em; text-transform: uppercase; }
[data-theme="pitch"] .empty { color: var(--muted); }

/* floating join: yellow card held up */
[data-theme="pitch"] .fab-join { background: var(--card-yellow); color: var(--navy); border: 0; border-radius: 8px; box-shadow: 0 8px 0 rgba(0, 0, 0, .3); font-family: var(--kit); font-weight: 600; font-size: 24px; letter-spacing: .04em; padding: 10px 24px 6px 12px; transform-origin: bottom center; }
[data-theme="pitch"] .fab-join:hover { transform: rotate(-6deg) translateY(-4px); box-shadow: 0 12px 0 rgba(0, 0, 0, .3); }
[data-theme="pitch"] .fab-ball { border-color: var(--navy); }

/* Pixel 5-a-side in the hero */
.pg-canvas, .pg-board { display: none; }
[data-theme="pitch"] .pg-canvas { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; image-rendering: pixelated; }
[data-theme="pitch"] .pg-board {
  display: flex; align-items: center; gap: 8px; position: absolute; z-index: 2; right: clamp(12px, 3vw, 40px); top: calc(78px + var(--safe-t));
  background: #0b0f0c; border: 4px solid #2a2f2b; border-radius: 8px; padding: 6px 12px 3px; box-shadow: 0 6px 0 rgba(0, 0, 0, .3);
  font-family: var(--score); font-weight: 600; color: var(--chalk); font-size: 22px; letter-spacing: .04em; pointer-events: none;
}
[data-theme="pitch"] .pg-board em { font-style: normal; color: var(--led); font-size: 28px; min-width: 14px; text-align: center; text-shadow: 0 0 8px rgba(255, 179, 0, .6); }
[data-theme="pitch"] .pg-board .pg-dash { color: var(--led); opacity: .7; }
[data-theme="pitch"] .pg-board .pg-kit { width: 10px; height: 14px; border-radius: 2px; border: 1px solid rgba(255, 255, 255, .5); }
[data-theme="pitch"] .pg-board .pg-min { color: var(--led); margin-left: 6px; min-width: 36px; font-size: 20px; }
[data-theme="pitch"] .pg-board .pg-live { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; color: var(--card-red); text-transform: uppercase; letter-spacing: .1em; margin-right: 4px; }
[data-theme="pitch"] .pg-board .pg-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--card-red); animation: blink 1.2s infinite; }
@media (max-width: 860px) { [data-theme="pitch"] .pg-board { top: calc(74px + var(--safe-t)); right: auto; left: 50%; translate: -50% 0; font-size: 18px; padding: 4px 10px 1px; white-space: nowrap; } [data-theme="pitch"] .pg-board em { font-size: 22px; } }
/* The game draws its own field markings, matched to its goals. */
[data-theme="pitch"] .s-hero.pg-on .pitch-lines { display: none; }
[data-theme="pitch"] .pg-board.pg-goal { border-color: var(--card-yellow); animation: pg-flash .5s steps(2) infinite; }
[data-theme="pitch"] .pg-board.pg-goal .pg-live { color: var(--card-yellow); font-size: 18px; }
@keyframes pg-flash { 50% { border-color: #2a2f2b; transform: scale(1.04); } }