/* ===== TOKENS COMPARTILHADOS — Bolão 2026 ===== */
:root{
  --cream:#f2f2f2;
  --paper:#f7f8fa;
  --paper-2:#fcfcfd;
  --ink:#101820;
  --ink-2:#1f2733;
  --muted:#53565a;
  --soft:rgba(16,24,32,.12);
  --line:#1a2230;
  --red:#151f6d;
  --green:#1a6b3f;
  --gold:#fbe122;
  --blue:#006298;
  --good:#1a6b3f;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--cream);color:var(--ink);font-family:'Manrope',sans-serif;-webkit-font-smoothing:antialiased;line-height:1.45}
.display{font-family:'Anton',sans-serif;font-weight:400;letter-spacing:.005em;line-height:.88;text-transform:uppercase}
.mono{font-family:'IBM Plex Mono',monospace;font-weight:500}
.label{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input{font-family:inherit}

/* ===== BANDEIRAS / ESCUDOS ===== */
.flag-badge{display:inline-block;vertical-align:middle;border-radius:50%;border:1px solid var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.flag-badge.placeholder{background:#d8d4ca;color:var(--muted);text-align:center;font-family:'IBM Plex Mono',monospace;font-weight:600}
.flag-sq{display:inline-block;vertical-align:middle;border:1px solid var(--ink);border-radius:3px}
.flag-sq.placeholder{background:repeating-linear-gradient(45deg,#d8d4ca 0 6px,#cdc8bd 6px 12px);color:var(--ink);text-align:center;font-family:'IBM Plex Mono',monospace;font-weight:700;letter-spacing:.04em;text-transform:uppercase}

/* ===== INPUT DE PLACAR ===== */
.score-input{
  width:48px;height:48px;
  border:1.5px solid var(--ink);background:var(--paper);
  text-align:center;font-family:'Anton',sans-serif;font-size:28px;
  color:var(--ink);
  transition:background .15s, border-color .15s, transform .15s;
  outline:none;
}
.score-input:focus{background:var(--gold);border-color:var(--red);transform:scale(1.05);box-shadow:0 4px 0 var(--ink)}
.score-input.filled{background:var(--ink);color:var(--cream)}
.score-input.filled:focus{background:var(--red);color:#fff}
.score-input::-webkit-inner-spin-button,.score-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.score-input{-moz-appearance:textfield}
.score-input.sm{width:38px;height:38px;font-size:22px}

/* x entre inputs */
.score-x{font-family:'Anton',sans-serif;font-size:18px;color:var(--muted);padding:0 6px}

/* ===== PILL / TAG ===== */
.pill{border:1.2px solid var(--ink);padding:5px 11px;border-radius:99px;font-size:10px;font-family:'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;display:inline-flex;align-items:center;gap:6px}
.pill.dark{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.pill.red{background:var(--red);color:#fff;border-color:var(--red)}
.pill.gold{background:var(--gold);color:var(--ink);border-color:var(--gold)}

/* ===== CREST ===== */
.crest{width:36px;height:36px;border-radius:50%;background:var(--ink);color:var(--cream);font-family:'Anton',sans-serif;font-size:17px;display:inline-flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}
.crest::after{content:"";position:absolute;inset:3px;border:1.2px solid var(--cream);border-radius:50%}
.crest span{position:relative;z-index:1;line-height:1;margin-top:2px}

/* ===== BOTÕES ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;font-family:'Anton',sans-serif;font-size:16px;letter-spacing:.04em;text-transform:uppercase;border:1.5px solid var(--ink);background:transparent;color:var(--ink);transition:all .15s;cursor:pointer}
.btn:hover{background:var(--ink);color:var(--cream)}
.btn.primary{background:var(--red);color:#fff;border-color:var(--red)}
.btn.primary:hover{background:var(--ink);border-color:var(--ink)}
.btn.dark{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn.dark:hover{background:var(--red);border-color:var(--red)}
.btn.lg{padding:16px 28px;font-size:20px}
.btn.sm{padding:7px 12px;font-size:12px}

/* ===== STRIPE LATERAL DECORATIVA ===== */
.stripe-side{position:fixed;left:0;top:0;bottom:0;width:8px;z-index:5;background:repeating-linear-gradient(180deg,var(--red) 0 24px,var(--cream) 24px 48px,var(--blue) 48px 72px,var(--cream) 72px 96px);pointer-events:none}

/* ===== SAVE INDICATOR ===== */
.save-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:99px;background:rgba(26,107,63,.12);color:var(--green);font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;border:1px solid rgba(26,107,63,.3)}
.save-pill::before{content:"●";font-size:8px;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}

/* ===== PROGRESS BAR ===== */
.progress-bar{width:100%;height:6px;background:rgba(10,10,15,.12);border-radius:0;overflow:hidden}
.progress-bar .fill{height:100%;background:linear-gradient(90deg,var(--green),var(--gold),var(--red));transition:width .3s}