/* ============================================================
   BOLÃO COPA 2026 — Design System "Pôster Tropical / Carnaval"
   Decisão #12 (DECISIONS.md). Inspiração: pôsteres Copa 70,
   Panini, muralismo, neobrutalismo suavizado.
   ============================================================ */

:root {
  --paper:    #FBF3E4;
  --paper-2:  #F5E6C8;
  --terra:    #E5421B;
  --terra-2:  #C8351A;
  --cobalt:   #1B4F9A;
  --cobalt-2: #14397A;
  --mustard:  #F4B91A;
  --mustard-2:#E0A50A;
  --leaf:     #2A7D3D;
  --pink:     #F26D9C;
  --ink:      #1F1411;
  --ink-soft: #5B4737;
  --line:     #E5C896;

  --display:  'Alfa Slab One', 'Cooper Black', serif;
  --display-2:'Yeseva One', serif;
  --sans:     'Rubik', system-ui, sans-serif;
  --script:   'Caveat', cursive;
  --mono:     'Space Mono', monospace;
}

html, body { background: var(--paper); color: var(--ink); font-family: var(--sans); }

body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(229,66,27,0.07) 0, transparent 25%),
    radial-gradient(circle at 90% 80%, rgba(27,79,154,0.07) 0, transparent 30%),
    radial-gradient(circle at 50% 50%, rgba(244,185,26,0.05) 0, transparent 40%);
}
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background-image: radial-gradient(rgba(31,20,17,0.06) 1px, transparent 1px);
  background-size: 8px 8px; mix-blend-mode: multiply;
}
body > * { position: relative; z-index: 2; }

.display   { font-family: var(--display); letter-spacing: 0.005em; }
.display-2 { font-family: var(--display-2); }
.script    { font-family: var(--script); font-weight: 700; }
.mono      { font-family: var(--mono); }

.card {
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 4px;
  box-shadow: 6px 6px 0 var(--ink);
}
.card-soft   { background: #FFF8E8; border: 2px solid var(--ink); border-radius: 4px; box-shadow: 4px 4px 0 var(--ink); }
.card-terra  { background: var(--terra);   color: var(--paper); border: 2px solid var(--ink); border-radius: 4px; box-shadow: 6px 6px 0 var(--ink); }
.card-cobalt { background: var(--cobalt);  color: var(--paper); border: 2px solid var(--ink); border-radius: 4px; box-shadow: 6px 6px 0 var(--ink); }
.card-mustard{ background: var(--mustard); color: var(--ink);   border: 2px solid var(--ink); border-radius: 4px; box-shadow: 6px 6px 0 var(--ink); }

.card-hover { transition: all 0.18s ease; }
.card-hover:hover { transform: translate(-3px,-3px); box-shadow: 9px 9px 0 var(--ink); }

.btn-primary, .btn-cobalt {
  border: 2px solid var(--ink);
  padding: 0.85rem 1.5rem;
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 4px;
  box-shadow: 4px 4px 0 var(--ink);
  transition: all 0.15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  cursor: pointer;
}
.btn-primary { background: var(--terra); color: var(--paper); }
.btn-cobalt  { background: var(--cobalt); color: var(--paper); }
.btn-primary:hover, .btn-cobalt:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink); }
.btn-primary:active, .btn-cobalt:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--ink); }

.input {
  width: 100%;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 4px;
  padding: 0.75rem 1rem;
  font-family: var(--sans);
  font-size: 1rem;
  outline: none;
  transition: all 0.15s;
}
.input:focus { box-shadow: 4px 4px 0 var(--terra); transform: translate(-2px,-2px); }

.score-input {
  width: 4rem; height: 4rem;
  background: var(--mustard);
  border: 2px solid var(--ink);
  border-radius: 4px;
  text-align: center;
  font-family: var(--display);
  font-size: 2.25rem;
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  transition: all 0.15s;
  outline: none;
}
.score-input:focus { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink); }
.score-input.empty { background: var(--paper); border-style: dashed; color: var(--terra); }

.tab-pill {
  padding: 0.6rem 1.1rem;
  border: 2px solid var(--ink);
  border-radius: 100px;
  font-family: var(--display);
  font-size: 0.85rem;
  text-transform: uppercase;
  background: var(--paper);
  color: var(--ink);
  transition: all 0.15s;
  cursor: pointer;
  text-decoration: none;
}
.tab-pill:hover { background: var(--paper-2); }
.tab-pill.active { background: var(--ink); color: var(--paper); box-shadow: 3px 3px 0 var(--terra); }

.sticker {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  background: var(--mustard);
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-family: var(--display);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  transform: rotate(-3deg);
  box-shadow: 2px 2px 0 var(--ink);
}
.sticker-terra  { background: var(--terra);  color: var(--paper); transform: rotate(2deg); }
.sticker-cobalt { background: var(--cobalt); color: var(--paper); transform: rotate(-2deg); }
.sticker-leaf   { background: var(--leaf);   color: var(--paper); transform: rotate(3deg); }
.sticker-pink   { background: var(--pink);   color: var(--ink);   transform: rotate(-1deg); }

.pattern-stripe {
  height: 32px;
  background: repeating-linear-gradient(
    45deg,
    var(--terra) 0 16px,
    var(--mustard) 16px 32px,
    var(--cobalt) 32px 48px,
    var(--leaf) 48px 64px
  );
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--terra);
  font-weight: 700;
}

.num-mega { font-family: var(--display); font-size: clamp(5rem, 14vw, 11rem); line-height: 0.85; }
.num-big  { font-family: var(--display); font-size: clamp(2.5rem, 5vw, 4rem); line-height: 0.85; }

.dashed-rule { height: 4px; background: repeating-linear-gradient(90deg, var(--ink) 0 12px, transparent 12px 18px); }

.drawer { display: none; }
.drawer.open { display: block; }

.tabs-scroll { scrollbar-width: none; -ms-overflow-style: none; }
.tabs-scroll::-webkit-scrollbar { display: none; }