/* ============================================================
   Chute Quente — visual system v2 "Placar"
   Layout concept: a floodlit pitch at night. The scoreboard is the one
   bold element (Anton numerals in glowing cells); everything around it
   is quiet chalk lines on dark grass. Green = action and score only;
   amber = money only.
   ============================================================ */

/* Design tokens live in tokens.css — generated from design/tokens.json by
   tools/gen-tokens.py. Never hardcode a color or font here: when the new
   Figma design lands, swapping tokens restyles everything below. */

/* ---------- base ---------- */

body {
  background:
    radial-gradient(1100px 480px at 50% -140px, rgba(0, 229, 123, 0.07), transparent 65%),
    var(--gramado);
  color: var(--giz);
  font-family: var(--f-ui);
  font-size: 0.975rem;
  line-height: 1.55;
}

a { color: var(--sinal); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--sinal);
  outline-offset: 2px;
  border-radius: 2px;
}

.cq-display {
  font-family: var(--f-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 0.94;
  text-transform: uppercase;
  text-wrap: balance;
}

.cq-skew { transform: skewX(-4deg); display: inline-block; }

.cq-num { font-variant-numeric: tabular-nums; }

.text-secondary { color: var(--giz-dim) !important; }

/* ---------- nav ---------- */

.cq-navbar {
  background: color-mix(in srgb, var(--gramado) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linha) !important;
}
.cq-navbar .navbar-brand {
  font-family: var(--f-display);
  font-size: 1.45rem;
  letter-spacing: 0.02em;
  color: var(--giz);
  transform: skewX(-4deg);
}
.cq-navbar .nav-link { color: var(--giz-dim); font-weight: 500; }
.cq-navbar .nav-link:hover { color: var(--giz); }

.cq-lang { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; }
.cq-lang a { color: var(--giz-dim); }
.cq-lang a:hover { color: var(--giz); text-decoration: none; }
.cq-lang a.on { color: var(--sinal); }
.cq-lang .sep { color: var(--linha-forte); margin-inline: 0.15rem; }

.cq-green { color: var(--sinal); }
.cq-cyan { color: var(--giz); }          /* legacy class — folded into chalk */
.cq-amber { color: var(--trofeu); }
.cq-pink { color: var(--perigo); }       /* legacy class — errors only */

/* ---------- buttons: skewed jersey plates ---------- */

.cq-btn-primary {
  display: inline-block;
  background: var(--sinal);
  color: var(--tinta);
  font-weight: 800;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius-s);
  padding: 0.8rem 1.6rem;
  transform: skewX(-8deg);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.cq-btn-primary > span, .cq-btn-primary > * { display: inline-block; transform: skewX(8deg); }
.cq-btn-primary:hover {
  color: var(--tinta);
  transform: skewX(-8deg) translateY(-2px);
  box-shadow: var(--glow-action);
  text-decoration: none;
}
.cq-btn-primary:disabled { opacity: 0.55; }

.btn-outline-secondary {
  --bs-btn-color: var(--giz-dim);
  --bs-btn-border-color: var(--linha-forte);
  --bs-btn-hover-bg: var(--cabine);
  --bs-btn-hover-border-color: var(--linha-forte);
  --bs-btn-hover-color: var(--giz);
}

/* ---------- cards & chips ---------- */

.cq-card {
  background: var(--vestiario);
  border: 1px solid var(--linha);
  border-radius: var(--radius-m);
}

.cq-badge-green, .cq-badge-amber, .cq-badge-pink {
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--radius-s);
}
.cq-badge-green { background: rgba(0, 229, 123, 0.10); color: var(--sinal); border: 1px solid rgba(0, 229, 123, 0.35); }
.cq-badge-amber { background: rgba(242, 182, 60, 0.10); color: var(--trofeu); border: 1px solid rgba(242, 182, 60, 0.35); }
.cq-badge-pink  { background: rgba(255, 107, 107, 0.10); color: var(--perigo); border: 1px solid rgba(255, 107, 107, 0.35); }

/* live dot */
.cq-live {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--sinal); font-weight: 600; font-size: 0.8rem;
}
.cq-live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--sinal-brilho);
  box-shadow: 0 0 8px var(--sinal-brilho);
  animation: cq-pulse 1.6s ease-in-out infinite;
}
@keyframes cq-pulse { 50% { opacity: 0.35; } }

/* ---------- hero ---------- */

.cq-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--linha);
}
/* center circle — the one piece of pitch geometry */
.cq-hero::before {
  content: "";
  position: absolute;
  left: 50%; top: -620px;
  width: 980px; height: 980px;
  transform: translateX(-50%);
  border: 1.5px solid var(--linha);
  border-radius: 50%;
  pointer-events: none;
}
.cq-hero-inner { position: relative; }

.cq-hero h1 {
  font-size: clamp(3rem, 9vw, 6.4rem);
  margin: 0 0 1.1rem;
}

.cq-hero .cq-sub {
  max-width: 34rem;
  color: var(--giz-dim);
  font-size: 1.08rem;
}

/* fixture ticker */
.cq-ticker {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--linha);
  font-size: 0.82rem; font-weight: 600;
  color: var(--giz-dim);
}
.cq-ticker .fim { color: var(--giz-dim); font-weight: 500; font-size: 0.72rem; margin-left: 0.35rem; }
.cq-ticker strong { color: var(--giz); font-variant-numeric: tabular-nums; }

/* ---------- scoreboard ---------- */

.cq-board {
  background: var(--vestiario);
  border: 1px solid var(--linha-forte);
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-board);
}
.cq-board-head {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 0.8rem 1.2rem;
  border-bottom: 1px solid var(--linha);
  font-size: 0.82rem; color: var(--giz-dim); font-weight: 600;
}

.cq-team {
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 3.2vw, 2rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1;
}

.cq-cell {
  width: 76px; height: 76px;
  background: var(--cabine);
  border: 1px solid var(--linha-forte);
  border-radius: var(--radius-m);
  color: var(--giz);
  font-family: var(--f-display);
  font-size: 2.4rem;
  text-align: center;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  -moz-appearance: textfield;
}
.cq-cell::-webkit-outer-spin-button, .cq-cell::-webkit-inner-spin-button { -webkit-appearance: none; }
.cq-cell::placeholder { color: var(--linha-forte); }
.cq-cell:focus {
  outline: none;
  border-color: var(--sinal);
  box-shadow: 0 0 0 3px rgba(0, 229, 123, 0.18);
}
.cq-cell:not(:placeholder-shown) {
  border-color: var(--sinal);
  color: var(--sinal-brilho);
  text-shadow: 0 0 18px rgba(0, 255, 135, 0.45);
}

.cq-vs {
  font-family: var(--f-display);
  color: var(--giz-dim);
  font-size: 1.3rem;
}

/* potential tile */
.cq-potential {
  background: var(--vestiario);
  border: 1px solid var(--linha);
  border-radius: var(--radius-m);
  padding: 0.9rem 1.2rem;
  text-align: right;
}
.cq-potential .v {
  font-family: var(--f-display);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--sinal-brilho);
}
.cq-potential .k { font-size: 0.75rem; color: var(--giz-dim); font-weight: 600; }

/* ---------- match rows (predict page) ---------- */

.cq-match { padding: 1.25rem 1.25rem 1rem; }
.cq-match + .cq-match { border-top: 1px dashed var(--linha-forte); }
.cq-match-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.8rem; color: var(--giz-dim); font-weight: 600;
  margin-bottom: 0.9rem;
}
.cq-match details { margin-top: 0.9rem; }
.cq-match summary {
  cursor: pointer; color: var(--giz-dim); font-size: 0.85rem;
  list-style-position: inside;
}
.cq-match summary:hover { color: var(--giz); }
.cq-match .form-label { font-size: 0.75rem; color: var(--giz-dim); font-weight: 600; margin-bottom: 0.25rem; }

/* ---------- steps (como funciona — a real sequence) ---------- */

.cq-step { display: flex; gap: 1.1rem; align-items: flex-start; }
.cq-step .n {
  font-family: var(--f-display);
  font-size: 2.6rem; line-height: 1;
  color: var(--linha-forte);
  min-width: 2.2rem;
}
.cq-step h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.3rem; }
.cq-step p { color: var(--giz-dim); font-size: 0.92rem; margin: 0; }

/* prize strip */
.cq-prize {
  border-block: 1px solid var(--linha);
  background: linear-gradient(90deg, rgba(242, 182, 60, 0.05), transparent 55%);
}
.cq-prize .v {
  font-family: var(--f-display);
  font-size: clamp(2rem, 5vw, 3.2rem);
  color: var(--trofeu);
  line-height: 1;
}
.cq-prize .k { color: var(--giz-dim); font-size: 0.85rem; font-weight: 600; }

/* ---------- leaderboard ---------- */

.cq-rank {
  font-family: var(--f-display);
  font-size: 1.25rem;
  color: var(--giz-dim);
}
.rank-1 .cq-rank { color: var(--trofeu); font-size: 1.6rem; }
.rank-2 .cq-rank { color: var(--prata); font-size: 1.45rem; }
.rank-3 .cq-rank { color: var(--bronze); font-size: 1.35rem; }

.cq-table { width: 100%; border-collapse: collapse; }
.cq-table th {
  text-align: left; font-size: 0.72rem; font-weight: 600;
  color: var(--giz-dim); letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.7rem 1rem; border-bottom: 1px solid var(--linha-forte);
}
.cq-table td { padding: 0.8rem 1rem; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.cq-table tr:last-child td { border-bottom: none; }
.cq-table-row-me { background: rgba(0, 229, 123, 0.06); box-shadow: inset 3px 0 0 var(--sinal); }
.cq-points { color: var(--sinal-brilho); font-weight: 700; font-variant-numeric: tabular-nums; }

/* filter pills */
.cq-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cq-pill {
  display: inline-block;
  padding: 0.38rem 0.9rem;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  color: var(--giz-dim);
  font-size: 0.82rem; font-weight: 600;
}
.cq-pill:hover { color: var(--giz); text-decoration: none; border-color: var(--giz-dim); }
.cq-pill.on { color: var(--tinta); background: var(--sinal); border-color: var(--sinal); }
.cq-pill.on:hover { color: var(--tinta); }

/* ---------- forms ---------- */

.form-control, .form-select {
  background-color: var(--cabine);
  border-color: var(--linha-forte);
  color: var(--giz);
}
.form-control:focus, .form-select:focus {
  background-color: var(--cabine);
  color: var(--giz);
  border-color: var(--sinal);
  box-shadow: 0 0 0 3px rgba(0, 229, 123, 0.15);
}
.form-control::placeholder { color: var(--giz-dim); opacity: 0.6; }
.form-text { color: var(--giz-dim); }

.cq-invite-token {
  background: var(--cabine);
  border: 1px dashed var(--linha-forte);
  border-radius: 6px;
  font-family: var(--f-display);
  font-size: 1.05rem;
  letter-spacing: 0.3em;
  color: var(--giz);
}

/* legacy helpers kept for other pages */
.cq-mono { font-family: var(--f-ui); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.cq-hero-title { font-family: var(--f-display); }

footer { border-top: 1px solid var(--linha); }

/* ---------- motion discipline ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- small screens ---------- */

@media (max-width: 576px) {
  .cq-cell { width: 60px; height: 60px; font-size: 1.9rem; }
  .cq-hero h1 { line-height: 0.98; }
}

/* ---------- team shirts (predict page) ---------- */

.cq-shirt {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.45));
}

/* ---------- CMS page prose (/p/{slug}) ---------- */

.cq-prose { color: var(--giz); line-height: 1.7; }
.cq-prose h1, .cq-prose h2, .cq-prose h3 {
  font-family: var(--f-display);
  letter-spacing: 0.01em;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}
.cq-prose a { color: var(--sinal); }
.cq-prose blockquote {
  border-left: 3px solid var(--sinal);
  padding-left: 1rem;
  color: var(--giz-dim);
}
.cq-prose table { width: 100%; margin: 1rem 0; border-collapse: collapse; }
.cq-prose th, .cq-prose td { border: 1px solid var(--linha); padding: 0.5rem 0.75rem; }
.cq-prose img { max-width: 100%; height: auto; }