/* WC26 theme variables */
:where(body.tk[data-tool="wc26"]){
  --wc26-accent-rgb: 46, 160, 67;      /* grass-ish green */
  --wc26-accent: rgb(var(--wc26-accent-rgb));
  --wc26-accent-soft: rgba(var(--wc26-accent-rgb), 0.10);
  --wc26-accent-border: rgba(var(--wc26-accent-rgb), 0.20);
}

/* =========================
   WC26 (scoped)
   ========================= */

:where(body.tk[data-tool="wc26"]) .wc26-controls{
  display: grid;
  grid-template-columns: 1.2fr 1.4fr 1fr 1fr auto;
  gap: 8px;
  align-items: stretch;
}


:where(body.tk[data-tool="wc26"]) .wc26-field select,
:where(body.tk[data-tool="wc26"]) .wc26-field input{
  width: 100%;
}

:where(body.tk[data-tool="wc26"]) .wc26-actions{
  display: grid;
  gap: 8px;
}

:where(body.tk[data-tool="wc26"]) .wc26-list{
  display: grid;
  gap: 8px;
}

:where(body.tk[data-tool="wc26"]) .wc26-item{
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background: rgba(255,255,255,0.65);
}

:where(body.tk[data-tool="wc26"]) .wc26-item .row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

:where(body.tk[data-tool="wc26"]) .wc26-item .meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

:where(body.tk[data-tool="wc26"]) .pill{
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.7);
  font-size: 12px;
}

@media (max-width: 820px){
  :where(body.tk[data-tool="wc26"]) .wc26-controls{
    grid-template-columns: 1fr;
  }
  :where(body.tk[data-tool="wc26"]) .wc26-item .row{
    grid-template-columns: 1fr;
  }
}

/* =========================
   WC26 controls: make it feel deliberate
   ========================= */
:where(body.tk[data-tool="wc26"]) .wc26-controls{
  background: var(--wc26-accent-soft);
  border: 1px solid var(--wc26-accent-border);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

:where(body.tk[data-tool="wc26"]) .wc26-field label{
  font-weight: 700;
}

:where(body.tk[data-tool="wc26"]) .wc26-field input,
:where(body.tk[data-tool="wc26"]) .wc26-field select{
  border: 1px solid rgba(0,0,0,0.14);
  border-radius: 12px;
  padding: 10px 12px;
}

:where(body.tk[data-tool="wc26"]) .wc26-field input:focus,
:where(body.tk[data-tool="wc26"]) .wc26-field select:focus{
  outline: none;
  border-color: rgba(var(--wc26-accent-rgb),0.55);
  box-shadow: 0 0 0 3px rgba(var(--wc26-accent-rgb),0.32);
}

/* Actions: feel like actions */
:where(body.tk[data-tool="wc26"]) .wc26-actions{
  display: flex;
  gap: 8px;
  align-items: flex-end;
  justify-content: flex-end;
}

:where(body.tk[data-tool="wc26"]) .wc26-actions button{
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 700;
}

/* Make Copy share link slightly more "primary" without fighting global styles */
:where(body.tk[data-tool="wc26"]) .wc26-actions button#copyLinkBtn{
  background: rgba(var(--wc26-accent-rgb),0.12);
  border-color: rgba(var(--wc26-accent-rgb),0.35);
}

/* Inline secondary control layout */
:where(body.tk[data-tool="wc26"]) .wc26-field-inline{
  grid-column: 1 / span 2; /* half-width (2 columns) */
}

:where(body.tk[data-tool="wc26"]) .wc26-field-inline > label{
  display: block;
  margin-bottom: 8px;
}

/* Radio chips */
:where(body.tk[data-tool="wc26"]) .wc26-radios{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 4px;
}

:where(body.tk[data-tool="wc26"]) .wc26-radio{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.65);
  cursor: pointer;
  user-select: none;
}

:where(body.tk[data-tool="wc26"]) .wc26-radio input[type="radio"]{
  margin: 0;
  accent-color: var(--wc26-accent);
}

:where(body.tk[data-tool="wc26"]) .wc26-radio span{
  white-space: nowrap;
  font-size: 0.95rem;
}

:where(body.tk[data-tool="wc26"]) .wc26-radio:has(input[type="radio"]:checked){
  border-color: rgba(var(--wc26-accent-rgb),0.55);
  background: rgba(var(--wc26-accent-rgb),0.18);
}

:where(body.tk[data-tool="wc26"]) .wc26-field-inline .hint{
  margin-top: 8px;
  font-size: 0.9rem;
  opacity: 0.75;
}

/* Controls: each field gets a subtle box so it doesn't look "dropped on the page" */
:where(body.tk[data-tool="wc26"]) .wc26-field{
  background: rgba(255,255,255,0.58);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  padding: 12px;
}

:where(body.tk[data-tool="wc26"]) .wc26-field label{
  display: block;
  margin-bottom: 8px;
  font-weight: 800;
  letter-spacing: 0.2px;
}

:where(body.tk[data-tool="wc26"]) .wc26-field .hint{
  margin-top: 6px !important;
  opacity: 0.75;
}

:where(body.tk[data-tool="wc26"]) .wc26-crosslink{
  margin: 32px 0;
  border-radius: 18px;
  border: 1px solid var(--wc26-accent-border);
  background:
    linear-gradient(135deg, rgba(var(--wc26-accent-rgb),0.1), rgba(255,255,255,0.9));
  padding: 20px 24px;
  box-shadow: 0 16px 40px rgba(15,23,42,0.08);
}

:where(body.tk[data-tool="wc26"]) .wc26-crosslink h3{
  margin: 4px 0 10px;
  font-size: 1.3rem;
}

:where(body.tk[data-tool="wc26"]) .wc26-crosslink p{
  margin: 0 0 8px;
  font-weight: 500;
  color: rgba(15,23,42,0.82);
}

:where(body.tk[data-tool="wc26"]) .wc26-crosslink__eyebrow{
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: rgba(15,23,42,0.6);
  font-weight: 800;
  margin-bottom: 6px;
}

:where(body.tk[data-tool="wc26"]) .wc26-crosslink__link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 10px 16px;
  background: rgba(var(--wc26-accent-rgb),0.14);
  border: 1px solid rgba(var(--wc26-accent-rgb),0.4);
  font-weight: 700;
  color: inherit;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.15s ease;
}

:where(body.tk[data-tool="wc26"]) .wc26-crosslink__link:hover{
  transform: translateY(-1px);
  background: rgba(var(--wc26-accent-rgb),0.2);
}

/* Pitch vibe behind the control panel (no images, just CSS) */
:where(body.tk[data-tool="wc26"]) .wc26-controls{
  background:
    /* trophy watermark */
    linear-gradient(rgba(255,255,255,0.50), rgba(255,255,255,0.50)),
    /* pitch stripes */
    repeating-linear-gradient(90deg,
      rgba(var(--wc26-accent-rgb),0.32) 0px,
      rgba(var(--wc26-accent-rgb),0.32) 36px,
      rgba(var(--wc26-accent-rgb),0.18) 36px,
      rgba(var(--wc26-accent-rgb),0.18) 72px
    );
  border: 1px solid var(--wc26-accent-border);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Centre circle + halfway line hint */
:where(body.tk[data-tool="wc26"]) .wc26-controls::before{
  z-index: 0;
  content:"";
  position:absolute;
  inset: 10px 14px;
  pointer-events:none;
  opacity: 0.95;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20240%20320%22%3E%0A%20%20%3Cpath%20fill=%22none%22%20stroke=%22#6b7785%22%20stroke-opacity=%220.9%22%20stroke-width=%226%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%0A%20%20%20%20d=%22M120%2018c-24%2018-34%2042-34%2072%200%2034%2012%2058%2034%2072%2022-14%2034-38%2034-72%200-30-10-54-34-72z%0A%20%20%20%20%20%20%20M74%2078H40c2%2044%2024%2070%2056%2078%0A%20%20%20%20%20%20%20M166%2078h34c-2%2044-24%2070-56%2078%0A%20%20%20%20%20%20%20M92%20170c-8%2020-18%2034-30%2046%2018%2010%2034%2018%2058%2022v26H80v22h80v-22h-40v-26c24-4%2040-12%2058-22-12-12-22-26-30-46%0A%20%20%20%20%20%20%20M88%20304h64%22/%3E%0A%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

@media (max-width: 920px){
  :where(body.tk[data-tool="wc26"]) .wc26-controls{
    grid-template-columns: 1fr 1fr;
  }
  :where(body.tk[data-tool="wc26"]) .wc26-actions{
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-start;
  }
}
@media (max-width: 520px){
  :where(body.tk[data-tool="wc26"]) .wc26-controls{
    grid-template-columns: 1fr;
  }
}

/* World Cup trophy watermark (inline SVG, tiny) */


/* Tighten the finish radio field so it doesn't look like a big empty tile */
:where(body.tk[data-tool="wc26"]) .wc26-field-inline:has(#finish-group){
  padding: 10px 12px;
}
:where(body.tk[data-tool="wc26"]) .wc26-field-inline:has(#finish-group) > label{
  margin-bottom: 6px;
}
:where(body.tk[data-tool="wc26"]) #finish-group{
  margin-top: 2px;
}
:where(body.tk[data-tool="wc26"]) .wc26-field-inline:has(#finish-group) .hint{
  margin-top: 6px !important;
}

/* Keep actual controls above the decorative layers */
:where(body.tk[data-tool="wc26"]) .wc26-controls > *{
  position: relative;
  z-index: 1;
}

@media (max-width: 920px){
  :where(body.tk[data-tool="wc26"]) .wc26-field-inline{
    grid-column: 1 / -1;
  }
}

/* World Cup trophy watermark */

/* World Cup trophy watermark (inline SVG, no external assets).
   Sits in the "spare" right-hand area of the controls panel. */
:where(body.tk[data-tool="wc26"]) .wc26-controls::after{
  content:"";
  position:absolute;
  top: 14px;
  right: 14px;
  bottom: 14px;
  width: 280px;             /* visually occupies the right side */
  max-width: 34%;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20240%20320%22%3E%0A%20%20%3Cpath%20fill=%22none%22%20stroke=%22#6b7785%22%20stroke-opacity=%220.9%22%20stroke-width=%226%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%0A%20%20%20%20d=%22M120%2018c-24%2018-34%2042-34%2072%200%2034%2012%2058%2034%2072%2022-14%2034-38%2034-72%200-30-10-54-34-72z%0A%20%20%20%20%20%20%20M74%2078H40c2%2044%2024%2070%2056%2078%0A%20%20%20%20%20%20%20M166%2078h34c-2%2044-24%2070-56%2078%0A%20%20%20%20%20%20%20M92%20170c-8%2020-18%2034-30%2046%2018%2010%2034%2018%2058%2022v26H80v22h80v-22h-40v-26c24-4%2040-12%2058-22-12-12-22-26-30-46%0A%20%20%20%20%20%20%20M88%20304h64%22/%3E%0A%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center right;
  background-size: contain;
  opacity: 0.52;
  filter: saturate(0.85);
  pointer-events:none;
  z-index: 0;
}

/* Keep the right-most actions column tidy */
:where(body.tk[data-tool="wc26"]) .wc26-actions{
  align-self: end;
}

/* Stage pill: make it stand out and sit above the matchup line */
:where(body.tk[data-tool="wc26"]) .pill.pill-stage{
  border-color: rgba(var(--wc26-accent-rgb),0.45);
  background: rgba(var(--wc26-accent-rgb),0.16);
  font-weight: 800;
}
:where(body.tk[data-tool="wc26"]) .wc26-meta-top{
  margin-bottom: 8px;
}

/* KO block coloring: 1st / 2nd / common */
:where(body.tk[data-tool="wc26"]) .wc26-ko-block{
  position: relative;
  border-left-width: 6px;
}
:where(body.tk[data-tool="wc26"]) .wc26-ko-first{
  border-left-color: rgba(var(--wc26-accent-rgb),0.75);
  background: rgba(var(--wc26-accent-rgb),0.10);
}
:where(body.tk[data-tool="wc26"]) .wc26-ko-second{
  border-left-color: rgba(59, 130, 246, 0.70);
  background: rgba(59, 130, 246, 0.08);
}
:where(body.tk[data-tool="wc26"]) .wc26-ko-common{
  border-left-color: rgba(245, 158, 11, 0.70);
  background: rgba(245, 158, 11, 0.08);
}

/* Group stage tile colouring to match KO visual grouping */
:where(body.tk[data-tool="wc26"]) #groupList .wc26-item{
  border-left-width: 6px;
  border-left-color: rgba(147, 51, 234, 0.65); /* soft purple accent */
  background: rgba(147, 51, 234, 0.06);
}

/* =========================
   WC26 Mobile UX (pub friendly)
   ========================= */
@media (max-width: 640px){
  :where(body.tk[data-tool="wc26"]) .wc26-controls{
    gap: 10px;
    padding: 14px;
  }

  :where(body.tk[data-tool="wc26"]) .wc26-field{
    padding: 12px;
  }

  /* Bigger tap targets + prevent iOS zoom */
  :where(body.tk[data-tool="wc26"]) .wc26-field input,
  :where(body.tk[data-tool="wc26"]) .wc26-field select{
    padding: 12px 12px;
    font-size: 16px;
  }

  :where(body.tk[data-tool="wc26"]) .wc26-actions{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    justify-content: stretch;
    align-items: stretch;
  }

  :where(body.tk[data-tool="wc26"]) .wc26-actions button{
    width: 100%;
    padding: 12px 12px;
  }

  :where(body.tk[data-tool="wc26"]) .wc26-radios{
    gap: 10px;
  }

  :where(body.tk[data-tool="wc26"]) .wc26-radio{
    padding: 10px 12px;
  }
}

@media (max-width: 520px){
  :where(body.tk[data-tool="wc26"]) .wc26-item{
    padding: 12px;
  }
  :where(body.tk[data-tool="wc26"]) .wc26-item .row{
    gap: 10px;
  }
  :where(body.tk[data-tool="wc26"]) .wc26-item strong{
    display: inline-block;
    line-height: 1.25;
  }
}

/* Mobile: soften decorative layers so controls stay readable */
@media (max-width: 640px){
  :where(body.tk[data-tool="wc26"]) .wc26-controls::before{ opacity: 0.55; }
  :where(body.tk[data-tool="wc26"]) .wc26-controls::after{ opacity: 0.35; }
}

/* =========================
   Sticky mobile actions bar
   ========================= */
@media (max-width: 640px){
  :where(body.tk[data-tool="wc26"]) .wc26-actions{
    position: sticky;
    bottom: 10px;
    z-index: 20;
    padding: 10px;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.10);
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.12);
  }

  /* Make the primary action feel like the one you should tap in a pub */
  :where(body.tk[data-tool="wc26"]) .wc26-actions #copyLinkBtn{
    font-weight: 800;
  }

  /* Ensure the controls panel leaves room so the sticky bar doesn't overlap content */
  :where(body.tk[data-tool="wc26"]) .wc26-controls{
    padding-bottom: 18px;
  }
}