/* ==========================================================================
   BOLAUM DO GALVAUM — Estilo 90s GeoCities Brasileiro
   ========================================================================== */

/* ---------- Reset/base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; vertical-align: middle; }

:root {
    --br-yellow: #fcd116;
    --br-green:  #009c3b;
    --br-green-dark: #006d2a;
    --br-blue:   #002776;
    --br-blue-light: #1a3fa0;
    --hot-pink:  #ff00bf;
    --cyan:      #00e5ff;
    --cream:     #fffbe6;
    --ink:       #1a1a1a;
    --muted:     #666;
    --line:      #d4c460;
    --hit:       #2ec03e;
    --miss:      #c0392b;
}

body {
    font-family: "Segoe UI", "Trebuchet MS", "Helvetica Neue", Arial, sans-serif;
    background: var(--br-yellow);
    background-image:
        repeating-linear-gradient(45deg, rgba(0,39,118,.05) 0 2px, transparent 2px 24px),
        radial-gradient(circle at 10% 0%, rgba(255,255,255,.4), transparent 40%),
        radial-gradient(circle at 90% 100%, rgba(0,156,59,.2), transparent 40%);
    color: var(--ink);
    min-height: 100vh;
    line-height: 1.45;
}

a { color: var(--br-blue); text-decoration: underline; }
a:hover { color: var(--hot-pink); }

/* ---------- Faixa "under construction" ---------- */
.clock-bar {
    background: #0a0a0a;
    border-bottom: 2px solid #ffcc00;
    color: #00ff66;
    font-family: 'Courier New', monospace;
    text-align: center;
    padding: 5px 8px;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.clock-bar-label {
    color: #ffcc00;
    font-size: 0.7rem;
    font-weight: bold;
    letter-spacing: 1px;
}
.clock-bar-time {
    color: #00ff66;
    font-size: 1.15rem;
    font-weight: bold;
    text-shadow: 0 0 8px #00ff66; /* glow estilo LCD */
}

/* ---------- Header ---------- */
.site-header {
    background: linear-gradient(180deg, var(--br-green) 0%, var(--br-green-dark) 100%);
    color: #fff;
    padding: 28px 12px 8px; /* relógio agora está na barra de cima, fora do header */
    text-align: center;
    border-bottom: 6px solid var(--br-blue);
    box-shadow: 0 4px 0 var(--br-yellow), 0 8px 0 var(--br-blue);
    position: relative;
}

.header-stars {
    color: var(--br-yellow);
    font-size: 1.1rem;
    letter-spacing: 8px;
    text-shadow: 1px 1px 0 #000;
    animation: blink-soft 1.4s infinite;
}

@keyframes blink-soft {
    0%, 60%, 100% { opacity: 1; }
    70%, 90%      { opacity: .5; }
}

.site-title {
    margin: 4px 0;
    font-family: Impact, "Arial Black", sans-serif;
    line-height: 1.05;
}

.title-line1 {
    display: block;
    font-size: clamp(1.8rem, 6vw, 3.2rem);
    color: var(--br-yellow);
    text-shadow:
        3px 3px 0 var(--br-blue),
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000;
    letter-spacing: 2px;
}

.title-line2 {
    display: block;
    font-size: clamp(0.95rem, 3.2vw, 1.6rem);
    color: #fff;
    text-shadow: 2px 2px 0 var(--br-blue);
    letter-spacing: 2px;
    margin-top: 4px;
    animation: rainbow-text 6s linear infinite;
}

@keyframes rainbow-text {
    0%   { color: #fff; }
    20%  { color: var(--cyan); }
    40%  { color: #fff; }
    60%  { color: var(--hot-pink); }
    80%  { color: #fff; }
    100% { color: #fff; }
}

.page-subtitle {
    margin: 10px 0 0;
    font-family: Impact, "Arial Black", sans-serif;
    font-size: clamp(1rem, 3vw, 1.5rem);
    color: var(--br-yellow);
    text-shadow: 2px 2px 0 #000;
    letter-spacing: 1px;
}

/* ---------- Marquee ---------- */
.marquee-container {
    background: #000;
    color: var(--cyan);
    border-top: 2px solid var(--br-yellow);
    border-bottom: 2px solid var(--br-yellow);
    overflow: hidden;
    margin: 8px -12px 0;
    font-family: "Lucida Console", "Courier New", monospace;
    font-size: 0.92rem;
}
.marquee {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%;
    animation: marquee-scroll 22s linear infinite;
}
@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}

/* ---------- Nav ---------- */
.site-nav {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.site-nav a {
    background: var(--br-blue);
    color: #fff;
    padding: 6px 12px;
    border: 2px solid var(--br-yellow);
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.95rem;
    text-decoration: none;
    box-shadow: 2px 2px 0 #000;
    transition: transform .08s ease;
}
.site-nav a:hover {
    background: var(--hot-pink);
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 #000;
}
.site-nav a.active {
    background: var(--br-yellow);
    color: var(--br-blue);
}

.admin-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    background: #000;
    padding: 8px;
    margin: 16px 0;
    border: 3px ridge var(--br-yellow);
}
.admin-nav a {
    flex: 1 1 auto;
    background: var(--br-blue);
    color: #fff;
    padding: 8px 10px;
    text-align: center;
    text-decoration: none;
    border: 2px outset var(--br-blue-light);
    font-weight: bold;
    font-size: 0.9rem;
    min-width: 80px;
}
.admin-nav a:hover { background: var(--hot-pink); }
.admin-nav a.active { background: var(--br-yellow); color: var(--br-blue); border-style: inset; }
.admin-nav a.logout { background: #c0392b; }

/* ---------- Container & cards ---------- */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 16px 12px;
}

.card {
    background: var(--cream);
    border: 3px ridge var(--br-yellow);
    border-radius: 8px;
    padding: 14px 14px;
    margin: 14px 0;
    box-shadow: 4px 4px 0 var(--br-blue);
}

.card-title {
    margin: 0 0 12px;
    font-family: Impact, "Arial Black", sans-serif;
    font-size: clamp(1.15rem, 3.5vw, 1.5rem);
    letter-spacing: 1px;
    color: var(--br-blue);
    border-bottom: 2px dashed var(--br-green);
    padding-bottom: 6px;
}

.group-header {
    font-family: Impact, "Arial Black", sans-serif;
    margin: 16px 0 6px;
    color: var(--br-green-dark);
    background: var(--br-yellow);
    padding: 4px 10px;
    display: inline-block;
    border: 2px solid var(--br-blue);
    border-radius: 4px;
}

.empty-state {
    text-align: center;
    padding: 24px;
    color: var(--muted);
}

/* ---------- Stats grid ---------- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin: 12px 0;
}
.stat-box {
    background: linear-gradient(180deg, #fff 0%, var(--cream) 100%);
    border: 2px solid var(--br-blue);
    border-radius: 6px;
    padding: 10px;
    text-align: center;
    box-shadow: 2px 2px 0 var(--br-green);
}
.stat-label {
    font-size: 0.7rem;
    font-weight: bold;
    letter-spacing: 1px;
    color: var(--muted);
    text-transform: uppercase;
}
.stat-value {
    font-family: Impact, sans-serif;
    font-size: clamp(1.4rem, 4vw, 2rem);
    color: var(--br-blue);
    line-height: 1;
    margin: 4px 0;
}
.stat-bar {
    background: #eee;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid #999;
    margin-top: 4px;
}
.stat-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--br-green), var(--br-yellow));
    transition: width .4s ease;
}

/* ---------- Podium ---------- */
.ranking-podium {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin: 16px 0;
    align-items: end;
}
.podium-card {
    border: 3px ridge var(--br-yellow);
    background: #fff;
    text-align: center;
    padding: 8px;
    border-radius: 6px;
    box-shadow: 3px 3px 0 var(--br-blue);
}
.podium-1 { background: linear-gradient(180deg, #fff8c5, #fcd116); padding-top: 20px; transform: translateY(-6px); }
.podium-2 { background: linear-gradient(180deg, #f3f3f3, #c8c8c8); }
.podium-3 { background: linear-gradient(180deg, #ffe4c4, #d4a36b); }
.podium-medal { font-size: clamp(1.8rem, 6vw, 3rem); }
.podium-name {
    font-weight: bold;
    font-size: clamp(0.85rem, 2.5vw, 1.1rem);
    margin: 4px 0;
    word-break: break-word;
}
.podium-points {
    font-family: Impact, sans-serif;
    font-size: clamp(1.2rem, 4vw, 1.8rem);
    color: var(--br-blue);
}
.podium-points small { font-size: 0.6em; color: var(--muted); }

/* ---------- Tabela de ranking ---------- */
.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 8px -4px;
}
table {
    border-collapse: collapse;
    width: 100%;
    background: #fff;
    font-size: 0.95rem;
}
.ranking-table th, .ranking-table td,
.admin-table th, .admin-table td,
.rules-table td {
    padding: 8px 10px;
    border: 1px solid var(--line);
    text-align: left;
}
.ranking-table th, .admin-table th {
    background: var(--br-blue);
    color: var(--br-yellow);
    font-family: Impact, sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.85rem;
}
.ranking-table tr:nth-child(even) td,
.admin-table tr:nth-child(even) td { background: #fffced; }
.rank-row.rank-top td { background: linear-gradient(90deg, rgba(252,209,22,.3), transparent); font-weight: bold; }
.rank-row.rank-max td { background: #f1eed8; font-style: italic; color: var(--muted); }
.rank-pos { font-family: Impact, sans-serif; font-size: 1.1rem; color: var(--br-blue); text-align: center; }
.rank-total { font-family: Impact, sans-serif; font-size: 1.2rem; color: var(--br-green-dark); text-align: center; }

.table-note { font-size: 0.85rem; color: var(--muted); margin-top: 6px; }

.rules-table { width: 100%; }
.rules-table td:last-child { text-align: right; font-weight: bold; }
.rules-list { padding-left: 20px; }
.rules-list li { margin: 6px 0; }

/* ---------- Match list ---------- */
.match-list { display: flex; flex-direction: column; gap: 8px; }
.match-row {
    background: #fff;
    border: 2px solid var(--line);
    border-radius: 6px;
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}
.match-done   { border-color: var(--hit); background: #f0fff2; }
.match-live   { border-color: var(--hot-pink); background: #fff0fb; animation: pulse 1.6s ease-in-out infinite; }
.match-upcoming { border-color: var(--line); }
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,0,191,.5); }
    50%      { box-shadow: 0 0 0 6px rgba(255,0,191,0); }
}
.match-when {
    font-size: 0.85rem;
    color: var(--muted);
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.match-venue { font-style: italic; }
.match-teams {
    display: grid;
    /* coluna central de largura FIXA, laterais simétricas → alinhamento entre linhas */
    grid-template-columns: 1fr 90px 1fr;
    align-items: center;
    gap: 0;
}
.team {
    display: grid;
    grid-template-columns: 1fr auto; /* nome flex, bandeira fixa */
    align-items: center;
    gap: 8px;
    font-weight: 600;
    min-width: 0; /* deixa o nome quebrar/truncar */
}
/* Casa: nome à esquerda, bandeira encostada no centro */
.team-home { text-align: right; }
.team-home .team-name { justify-self: end; }
.team-home .flag { justify-self: end; }
/* Fora: bandeira encostada no centro, nome à direita */
.team-away { grid-template-columns: auto 1fr; text-align: left; }
.team-away .flag { justify-self: start; }
.team-away .team-name { justify-self: start; }

.team-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    min-width: 0;
}
.flag {
    box-shadow: 0 0 0 1px rgba(0,0,0,.3);
    border-radius: 2px;
    display: inline-block;
    flex-shrink: 0;
}
.flag-unknown { font-size: 1.1em; }
.match-score {
    font-family: Impact, sans-serif;
    font-size: 1.4rem;
    color: var(--br-blue);
    text-align: center;
    padding: 0 4px;
    line-height: 1;
}
.match-score small { font-size: 0.6em; color: var(--muted); display: block; }
.vs { color: var(--muted); font-weight: normal; font-size: 1.6rem; }

/* ---------- Palpites do jogador ---------- */
.player-card { background: linear-gradient(135deg, var(--br-yellow) 0%, #fff8c5 100%); }
.player-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 6px;
    margin: 10px 0;
}
.pstat {
    background: #fff;
    border: 2px solid var(--br-blue);
    border-radius: 4px;
    padding: 6px;
    text-align: center;
}
.pstat-label { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; }
.pstat-value { font-family: Impact, sans-serif; font-size: 1.4rem; color: var(--br-blue); }

.link-warning {
    background: #fff3cd;
    border: 2px dashed #c0392b;
    color: #803010;
    padding: 8px 10px;
    border-radius: 4px;
    margin-top: 10px;
    font-size: 0.9rem;
}

.mp-row {
    background: #fff;
    border: 2px solid var(--line);
    border-radius: 6px;
    padding: 10px;
    margin: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mp-row.mp-hit  { border-color: var(--hit); background: #eaffea; }
.mp-row.mp-miss { border-color: var(--miss); background: #ffeaea; }
.mp-row.mp-skipped { border-color: #aaa; background: #f5f5f5; opacity: .7; }

.mp-when {
    font-size: 0.85rem;
    color: var(--muted);
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.mp-matchup {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 6px;
    align-items: center;
}
.mp-score {
    font-family: Impact, sans-serif;
    font-size: 1.3rem;
    text-align: center;
    color: var(--br-blue);
}
.mp-picks {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}
.pick-opt {
    flex: 1 1 0;
    min-width: 0;
    background: #f5f5f5;
    border: 2px solid var(--line);
    border-radius: 4px;
    padding: 6px 8px;
    cursor: pointer;
    text-align: center;
    transition: all .12s ease;
    display: block;
}
.pick-opt:has(input:checked) {
    background: var(--br-blue);
    color: #fff;
    border-color: var(--br-yellow);
    font-weight: bold;
    box-shadow: 0 0 0 2px var(--br-yellow);
}
.pick-opt.opt-correct {
    border-style: dashed;
    border-color: var(--hit);
}
.pick-opt:has(input:checked).opt-correct {
    background: var(--hit);
}
.pick-opt:has(input:disabled) { opacity: .8; cursor: not-allowed; }
.pick-opt input { display: none; }
.pick-label {
    font-size: 0.9rem;
    word-break: break-word;
}
.btn-clear {
    background: transparent;
    border: 1px solid var(--muted);
    color: var(--muted);
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 0.9rem;
}
.btn-clear:hover { background: var(--miss); color: #fff; }

.mp-result-line {
    font-size: 0.9rem;
    padding-top: 4px;
    border-top: 1px dashed var(--line);
}

/* ---------- Badges ---------- */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.badge-ok    { background: var(--hit); color: #fff; }
.badge-erro  { background: var(--miss); color: #fff; }
.badge-warn  { background: #ff9800; color: #fff; }
.badge-lock  { background: #555; color: #fff; }
.badge-done  { background: var(--br-blue); color: #fff; }

/* ---------- Bônus ---------- */
.bonus-grid { display: grid; gap: 8px; }
.bonus-row {
    background: #fff;
    border: 2px solid var(--line);
    border-radius: 6px;
    padding: 10px;
}
.bonus-row.bonus-hit  { border-color: var(--hit); background: #eaffea; }
.bonus-row.bonus-miss { border-color: var(--miss); background: #ffeaea; }
.bonus-row label { display: flex; flex-direction: column; gap: 4px; }
.bonus-label { font-weight: bold; }
.bonus-pts { color: var(--br-blue); font-size: 0.85rem; font-weight: normal; }
.bonus-input {
    border: 2px solid var(--br-blue);
    border-radius: 4px;
    padding: 8px;
    font-size: 1rem;
}
.bonus-result { margin-top: 6px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bonus-admin-row { display: flex; gap: 8px; align-items: flex-end; margin: 8px 0; padding: 8px; background: #fff; border: 2px solid var(--line); border-radius: 6px; }
.bonus-result-form { flex: 1; }
.bonus-result-form label { display: flex; flex-direction: column; gap: 4px; }
.bonus-result-form input[type="text"] { padding: 6px; border: 2px solid var(--br-blue); border-radius: 4px; }

/* ---------- Forms ---------- */
.form { display: flex; flex-direction: column; gap: 12px; }
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    align-items: end;
}
.form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.95rem; font-weight: 600; }
.form label small { font-weight: normal; color: var(--muted); }
.form input[type="text"],
.form input[type="number"],
.form input[type="password"],
.form input[type="date"],
.form input[type="time"],
.form input[type="datetime-local"],
.form select {
    padding: 8px 10px;
    border: 2px solid var(--br-blue);
    border-radius: 4px;
    background: #fff;
    font-size: 1rem;
    font-family: inherit;
}
.form input:focus, .form select:focus {
    outline: none;
    border-color: var(--hot-pink);
    box-shadow: 0 0 0 2px rgba(255,0,191,.25);
}
.checkbox-label {
    flex-direction: row !important;
    align-items: center;
    gap: 8px;
}
fieldset {
    border: 2px ridge var(--br-yellow);
    border-radius: 6px;
    padding: 10px;
    margin: 10px 0;
}
legend {
    font-family: Impact, sans-serif;
    color: var(--br-blue);
    padding: 0 6px;
    background: var(--cream);
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    background: var(--br-blue);
    color: #fff;
    padding: 8px 16px;
    border: 2px solid var(--br-yellow);
    border-radius: 4px;
    font-family: Impact, "Arial Black", sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    font-size: 0.95rem;
    box-shadow: 3px 3px 0 #000;
    transition: transform .08s ease, box-shadow .08s ease;
}
.btn:hover { background: var(--hot-pink); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #000; }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }
.btn-primary { background: var(--br-green); }
.btn-warn    { background: #ff9800; }
.btn-danger  { background: var(--miss); }
.btn-ok      { background: var(--hit); }
.btn-tiny    { padding: 4px 8px; font-size: 0.78rem; box-shadow: 2px 2px 0 #000; }
.btn-block   { width: 100%; }

/* ---------- Save status (palpites) ---------- */
.save-status {
    position: sticky;
    top: 8px;
    z-index: 10;
    background: var(--hit);
    color: #fff;
    border-radius: 999px;
    padding: 6px 14px;
    font-weight: bold;
    text-align: center;
    opacity: 0;
    transform: translateY(-10px);
    transition: all .25s ease;
    pointer-events: none;
    max-width: 180px;
    margin: 0 auto 8px;
}
.save-status.visible { opacity: 1; transform: translateY(0); }
.save-status.erro { background: var(--miss); }

/* ---------- Flash messages ---------- */
.flash {
    padding: 10px 14px;
    margin: 10px 0;
    border: 2px solid;
    border-radius: 6px;
    font-weight: 600;
}
.flash-ok   { background: #d4edda; border-color: var(--hit); color: #155724; }
.flash-erro { background: #f8d7da; border-color: var(--miss); color: #721c24; }

/* ---------- Login ---------- */
.login-card { max-width: 380px; margin: 32px auto; }

/* ---------- Phase pills ---------- */
.phase-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: bold;
    border: 1px solid;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.phase-grupos   { background: #e3f2fd; border-color: #1976d2; color: #0d47a1; }
.phase-32avos   { background: #fff3e0; border-color: #e65100; color: #bf360c; }
.phase-oitavas  { background: #fce4ec; border-color: #c2185b; color: #880e4f; }
.phase-quartas  { background: #f3e5f5; border-color: #7b1fa2; color: #4a148c; }
.phase-semis    { background: #fff8e1; border-color: #ffa000; color: #ff6f00; }
.phase-terceiro { background: #efebe9; border-color: #5d4037; color: #3e2723; }
.phase-final    { background: #fffde7; border-color: #f57f17; color: #e65100; font-weight: bolder; }

/* ---------- Result form (admin) ---------- */
.results-list { display: flex; flex-direction: column; gap: 8px; }
.result-form {
    background: #fff;
    border: 2px solid var(--line);
    border-radius: 6px;
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    align-items: center;
}
.rf-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 0.85rem; }
.rf-when { color: var(--muted); }
.rf-matchup {
    display: grid;
    grid-template-columns: 1fr auto auto auto 1fr;
    align-items: center;
    gap: 6px;
}
.score-input {
    width: 56px;
    text-align: center;
    font-family: Impact, sans-serif;
    font-size: 1.2rem;
    padding: 4px;
}
.rf-pen { display: flex; align-items: center; gap: 4px; font-size: 0.9rem; }
.rf-pen .score-input { width: 44px; font-size: 1rem; }

/* ---------- Token cell ---------- */
.token-cell { display: flex; gap: 4px; align-items: center; }
.token-link {
    font-family: "Courier New", monospace;
    font-size: 0.78rem;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: #fffced;
    flex: 1;
    min-width: 0;
}

/* ---------- Palpites matrix ---------- */
.palpites-matrix { font-size: 0.78rem; }
.palpites-matrix .game-cell { white-space: nowrap; }
.palpite-cell { text-align: center; font-weight: 600; }
.palpite-cell.cell-hit  { background: #d4edda !important; color: #155724; }
.palpite-cell.cell-miss { background: #f8d7da !important; color: #721c24; }

/* ---------- HAAJA CARD ---------- */
.haaja-card { text-align: center; background: linear-gradient(45deg, var(--br-yellow), var(--hot-pink), var(--br-yellow)); border: 4px ridge var(--br-blue); }
.haaja-text {
    font-family: Impact, "Arial Black", sans-serif;
    font-size: clamp(1.4rem, 5vw, 2.4rem);
    color: #fff;
    text-shadow: 3px 3px 0 var(--br-blue), 5px 5px 0 #000;
    letter-spacing: 3px;
    animation: shake 0.6s ease-in-out infinite;
    padding: 14px;
}
@keyframes shake {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    25%      { transform: translate(-2px, 1px) rotate(-1deg); }
    50%      { transform: translate(2px, -1px) rotate(1deg); }
    75%      { transform: translate(-1px, -2px) rotate(-0.5deg); }
}

.hint { font-size: 0.9rem; color: var(--muted); font-style: italic; }
.muted { color: var(--muted); }

/* ---------- Footer ---------- */
.site-footer {
    background: var(--br-blue);
    color: var(--br-yellow);
    text-align: center;
    padding: 16px 12px;
    margin-top: 24px;
    border-top: 6px solid var(--br-yellow);
}
.footer-flag {
    font-family: Impact, sans-serif;
    font-size: 1.2rem;
    letter-spacing: 2px;
    margin-bottom: 8px;
}
.bandeira-br { font-size: 1.4rem; }
.hit-counter {
    display: inline-block;
    margin: 8px 0;
    background: #000;
    padding: 4px 8px;
    border: 2px outset #888;
    color: var(--cyan);
    font-family: "Courier New", monospace;
    font-size: 0.9rem;
}
.counter-digit {
    display: inline-block;
    background: #111;
    padding: 2px 4px;
    margin: 0 1px;
    border-radius: 2px;
    font-weight: bold;
}
.footer-links {
    font-size: 0.85rem;
    margin: 8px 0;
    color: #fff;
}
.footer-links span { margin: 0 4px; }
.footer-spin {
    font-size: 1.2rem;
    letter-spacing: 4px;
    margin-top: 8px;
    animation: spin-emojis 8s linear infinite;
}
@keyframes spin-emojis {
    from { opacity: .6; }
    50%  { opacity: 1; }
    to   { opacity: .6; }
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
    .container { padding: 12px 8px; }
    .hide-mobile { display: none !important; }
    .ranking-podium { grid-template-columns: 1fr; }
    .podium-1 { transform: none; order: -1; }
    .marquee-container { font-size: 0.8rem; }
    .match-when { font-size: 0.78rem; }
    .match-teams { font-size: 0.92rem; }
    .team-name { max-width: 110px; }
    .mp-matchup { font-size: 0.92rem; }
    .pick-label { font-size: 0.85rem; }
    .form-grid { grid-template-columns: 1fr; }
    .admin-nav a { font-size: 0.82rem; padding: 6px 8px; min-width: 70px; }
    .clock-bar { font-size: 0.85rem; padding: 4px; }
    .rf-matchup { grid-template-columns: 1fr auto 1fr; }
    .rf-matchup .team { font-size: 0.9rem; }
    .rf-matchup .vs { display: none; }
    .palpites-matrix { font-size: 0.65rem; }
    .palpites-matrix th, .palpites-matrix td { padding: 4px; }
    .bonus-admin-row { flex-direction: column; align-items: stretch; }
}

@media (max-width: 420px) {
    .hide-mobile-narrow { display: none !important; }
    .header-stars { letter-spacing: 4px; font-size: 0.9rem; }
    .stat-value { font-size: 1.3rem; }
}

/* ---------- Print ---------- */
@media print {
    .marquee-container, .site-nav, .admin-nav, .footer-spin { display: none; }
    body { background: #fff; }
    .card { box-shadow: none; border: 1px solid #ccc; }
}

/* ---------- Perfil do jogador ---------- */
.profile-link, .profile-link strong { color: var(--br-blue); text-decoration: none; border-bottom: 1px dotted var(--br-blue); }
.profile-link:hover { color: var(--hot-pink); border-bottom-color: var(--hot-pink); }
.podium-name a { color: inherit; text-decoration: none; }
.podium-name a:hover { text-decoration: underline; }

.profile-card { background: linear-gradient(135deg, #fff9c4 0%, #fff 100%); border: 3px solid var(--br-yellow); }
.profile-head {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    align-items: center;
    margin-bottom: 12px;
}
.profile-rank {
    font-size: 1.4rem;
    text-align: center;
    background: #fff;
    border: 2px solid var(--br-green);
    border-radius: 8px;
    padding: 6px 12px;
    min-width: 70px;
}
.profile-pos { display: block; font-family: Impact, sans-serif; font-size: 1.6rem; color: var(--br-blue); }
.profile-name h2 { margin: 0 0 4px; color: var(--br-blue); }
.profile-nick { color: var(--muted); font-style: italic; }
.profile-score { text-align: center; }
.big-points {
    font-family: Impact, sans-serif;
    font-size: 3rem;
    color: var(--br-green);
    line-height: 1;
}
.big-points-label { font-size: 0.85rem; color: var(--muted); text-transform: uppercase; }

.profile-breakdown {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 2px dashed var(--line);
}
.pb-item { text-align: center; background: #fff; border-radius: 6px; padding: 8px; border: 1px solid var(--line); }
.pb-label { display: block; font-size: 0.8rem; color: var(--muted); text-transform: uppercase; }
.pb-val { display: block; font-family: Impact, sans-serif; font-size: 1.6rem; color: var(--br-blue); }

.profile-table { width: 100%; border-collapse: collapse; }
.profile-table th, .profile-table td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.profile-table th { background: #f5f5f5; font-size: 0.85rem; }
.profile-table .hit-row { background: #f0fff0; }
.profile-table .miss-row { background: #fff5f5; }
.profile-table .confronto-cell { white-space: nowrap; font-size: 0.92rem; }
.muted-x { color: var(--muted); margin: 0 4px; }
.muted { color: var(--muted); font-style: italic; }

@media (max-width: 540px) {
    .profile-head { grid-template-columns: 1fr; text-align: center; }
    .profile-table th:nth-child(1), .profile-table td:nth-child(1) { display: none; } /* esconde fase */
    .profile-table { font-size: 0.88rem; }
}

/* ---------- Input de placar (mata-mata) ---------- */
.mp-score-input {
    margin-top: 8px;
    padding: 10px;
    background: #fff8dc;
    border: 2px dashed var(--br-yellow);
    border-radius: 6px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}
.mp-score-label { font-weight: 700; color: var(--br-blue); }
.mp-score-fields { display: inline-flex; align-items: center; gap: 8px; }
.score-input {
    width: 56px;
    font-size: 1.4rem;
    font-family: Impact, sans-serif;
    text-align: center;
    padding: 4px 6px;
    border: 2px solid var(--br-blue);
    border-radius: 4px;
    background: #fff;
}
.score-input:disabled { background: #eee; color: #888; }
.score-x { font-family: Impact, sans-serif; font-size: 1.4rem; color: var(--muted); }
.mp-score-input .hint { flex-basis: 100%; margin: 0; font-size: 0.8rem; }

@media (max-width: 540px) {
    .mp-score-input { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ---------- Tabela da Copa: grupos e standings ---------- */
.groups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}
.group-card { padding: 12px; }
.standings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}
.standings-table th, .standings-table td {
    padding: 5px 6px;
    border-bottom: 1px solid var(--line);
    text-align: center;
}
.standings-table th { background: #eef; font-weight: 700; color: var(--br-blue); }
.standings-table .st-team { text-align: left; white-space: nowrap; }
.standings-table tr.classified-direct { background: #d6ffd6; }
.standings-table tr.classified-third { background: #fff8c5; }
.standings-table tr.eliminated { color: #888; }
.standings-table tr.classified-direct:hover { background: #b8f5b8; }
@media (max-width: 540px) {
    .standings-table { font-size: 0.85rem; }
    .standings-table .hide-narrow { display: none; }
}

/* ---------- Bonus select ---------- */
.bonus-select {
    width: 100%;
    padding: 8px 10px;
    border: 2px solid var(--br-blue);
    border-radius: 4px;
    background: #fff;
    font-size: 1rem;
    font-family: inherit;
}
.bonus-select:disabled { background: #eee; color: #888; }

/* ---------- Carrossel de imagens icônicas no header (efeito película de cinema) ---------- */
.site-header { position: relative; overflow: hidden; }

/* Camada do carrossel — fica atrás de todo o conteúdo do header */
.film-reel {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    /* Bordas pretas com perfurações brancas (efeito película de 35mm) */
    border-top: 18px solid #0a0a0a;
    border-bottom: 18px solid #0a0a0a;
    background:
        /* Perfurações da película (topo e base) */
        repeating-linear-gradient(to right, transparent 0 14px, #fff 14px 24px, transparent 24px 38px) top / 100% 8px no-repeat,
        repeating-linear-gradient(to right, transparent 0 14px, #fff 14px 24px, transparent 24px 38px) bottom / 100% 8px no-repeat,
        #0a0a0a;
    background-clip: border-box;
    box-shadow: inset 0 18px 0 #0a0a0a, inset 0 -18px 0 #0a0a0a;
}

/* Faixa que se move (contém todas as imagens enfileiradas) */
.film-reel-track {
    display: flex;
    height: 100%;
    align-items: stretch;
    /* width: auto porque flexbox calcula sozinho com base nas crianças */
    animation: film-scroll 80s linear infinite;
    will-change: transform;
}

.film-frame {
    flex: 0 0 auto;
    height: 100%;
    padding: 18px 0; /* deixa espaço pras perfurações ficarem visíveis acima/abaixo */
    border-right: 4px solid #0a0a0a; /* "frame" da película entre uma imagem e outra */
    box-sizing: border-box;
}
.film-frame img {
    height: 100%;
    width: auto;
    display: block;
    /* Tratamento retrô: dessaturado, granulado, leve sépia */
    filter: sepia(0.35) contrast(1.05) brightness(0.92) saturate(0.85);
}

/* Animação: empurra a faixa pra esquerda. Como as imagens estão DUPLICADAS,
   percorrer 50% da largura total garante loop sem costura. */
@keyframes film-scroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* Overlay escuro semi-transparente por cima do carrossel, pra garantir leitura do texto */
.film-overlay {
    position: absolute;
    inset: 18px 0; /* respeita as bordas pretas da película */
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at center, rgba(0,30,80,.55) 0%, rgba(0,0,0,.78) 100%),
        repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px); /* scanlines bem sutis */
}

/* Texto do header fica acima do carrossel */
.site-header > *:not(.film-reel):not(.film-overlay) {
    position: relative;
    z-index: 2;
}

/* Textos do header agora têm contraste maior contra as imagens */
.site-header .site-title,
.site-header .header-stars,
.site-header .page-subtitle {
    text-shadow:
        0 0 8px rgba(0,0,0,.9),
        0 2px 4px rgba(0,0,0,.8),
        2px 2px 0 #000;
}

/* Marquee e nav também ganham fundo semitransparente pra destacar */
.site-header .marquee-container {
    background: rgba(0, 0, 0, .55);
    border-radius: 4px;
    backdrop-filter: blur(2px);
}
.site-header .site-nav {
    background: rgba(0, 0, 0, .55);
    border-radius: 4px;
    padding: 6px;
    backdrop-filter: blur(2px);
}

/* Pausa a animação se o usuário preferir movimento reduzido (acessibilidade) */
@media (prefers-reduced-motion: reduce) {
    .film-reel-track { animation: none; }
}

/* Mobile: borda menor, animação mais rápida pra compensar viewport menor */
@media (max-width: 540px) {
    .film-reel { border-top-width: 12px; border-bottom-width: 12px; }
    .film-frame { padding: 12px 0; }
    .film-reel-track { animation-duration: 60s; }
    .film-overlay { inset: 12px 0; }
}

/* ---------- Jogos de Hoje no bilhete de palpites ---------- */
.today-games-card {
    border: 3px solid var(--br-green);
    background: linear-gradient(135deg, #f0fff4 0%, #fff 100%);
}
.today-game {
    border: 1px solid var(--line);
    border-radius: 6px;
    margin-bottom: 8px;
    background: #fff;
}
.today-game[open] { border-color: var(--br-blue); box-shadow: 0 0 0 2px rgba(0, 51, 153, .12); }
.today-game summary {
    list-style: none;
    cursor: pointer;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    transition: background .15s;
}
.today-game summary:hover { background: #fffbe6; }
.today-game[open] summary { background: #fffbe6; border-bottom: 1px dashed var(--br-yellow); }
.today-game summary::-webkit-details-marker { display: none; }
.tg-time {
    font-family: 'Courier New', monospace;
    font-weight: bold;
    color: var(--br-blue);
    font-size: 0.95rem;
}
.tg-teams { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tg-vs { color: var(--muted); padding: 0 4px; min-width: 40px; text-align: center; }
.tg-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tg-toggle {
    font-size: 0.85rem;
    background: var(--br-blue);
    color: #fff;
    padding: 4px 10px;
    border-radius: 14px;
    transition: transform .2s, background .2s;
    white-space: nowrap;
    font-weight: bold;
}
.tg-toggle::before { content: '📊 '; }
.tg-toggle::after { content: ' ▼'; font-size: 0.7em; }
.today-game[open] .tg-toggle { background: var(--hot-pink); }
.today-game[open] .tg-toggle::after { content: ' ▲'; }
.today-game:not([open]) summary:hover .tg-toggle { background: var(--hot-pink); transform: scale(1.05); }
.tg-body { padding: 12px; border-top: 1px dashed var(--line); background: #fafafa; }

.tg-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.tg-team-stats { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 10px; }
.tg-team-head { font-size: 1rem; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.tg-stat-table { width: 100%; font-size: 0.88rem; }
.tg-stat-table td { padding: 3px 4px; border-bottom: 1px dotted #eee; }
.tg-stat-table td:last-child { text-align: right; }

.form-pill {
    display: inline-block;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    font-weight: bold;
    font-size: 0.72rem;
    color: #fff;
    border-radius: 50%;
    margin-right: 2px;
}
.form-V { background: #3a7; }
.form-E { background: #aaa; }
.form-D { background: #c33; }

.sofascore-link {
    background: #ff6900 !important; /* laranja SofaScore */
    color: #fff !important;
    margin-top: 8px;
    display: inline-block;
    text-decoration: none;
}
.sofascore-link:hover { background: #d95400 !important; }
.tg-disclaimer { margin-top: 10px; color: var(--muted); }

@media (max-width: 600px) {
    .today-game summary { grid-template-columns: 1fr; gap: 4px; }
    .tg-stats-grid { grid-template-columns: 1fr; }
}

/* ---------- Placar Diário ---------- */
.daily-nav { background: #fff8dc; border: 2px solid var(--br-yellow); }
.dn-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dn-current { flex: 1; text-align: center; min-width: 250px; }
.dn-label { display: block; font-size: 0.75rem; color: var(--muted); text-transform: uppercase; }
.dn-current strong { display: block; font-size: 1.2rem; color: var(--br-blue); }
.dn-jump { margin-left: 8px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 4px; font-family: inherit; }
.btn-disabled { opacity: .3; pointer-events: none; }

.daily-scoreboard { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.daily-scoreboard th, .daily-scoreboard td {
    padding: 6px 6px;
    border: 1px solid var(--line);
    text-align: center;
    vertical-align: middle;
}
.daily-scoreboard th { background: #eef; color: var(--br-blue); font-weight: 700; }
.daily-scoreboard th small { display: block; color: var(--muted); font-weight: normal; font-size: 0.8em; }
.daily-scoreboard .dsb-rank { width: 36px; font-size: 1.1rem; }
.daily-scoreboard .dsb-name { text-align: left; min-width: 110px; }
.daily-scoreboard .dsb-game { min-width: 90px; }
.daily-scoreboard .dsb-total { background: #fffbe6; min-width: 60px; font-size: 1.05rem; }

.daily-scoreboard .dsb-cell { font-size: 0.85rem; line-height: 1.2; }
.daily-scoreboard .dsb-cell.dsb-hit { background: #d6ffd6; }
.daily-scoreboard .dsb-cell.dsb-exact { background: #fff3a0; border: 2px solid #ffcc00; }
.daily-scoreboard .dsb-cell.dsb-miss { background: #ffd6d6; }
.daily-scoreboard .dsb-cell.dsb-empty { background: #f5f5f5; color: var(--muted); }
.daily-scoreboard .dsb-pts { font-family: Impact, sans-serif; font-size: 1.05rem; color: var(--br-blue); }
.daily-scoreboard .dsb-cell.dsb-miss .dsb-pts { color: #900; }

.daily-scoreboard tr.dsb-top { background: linear-gradient(to right, #fff8c5, #fff); }
.daily-scoreboard .dsb-total-top { background: #ffe066; color: #000; }

@media (max-width: 700px) {
    .daily-scoreboard { font-size: 0.78rem; }
    .daily-scoreboard th, .daily-scoreboard td { padding: 4px 3px; }
    .daily-scoreboard .dsb-game { min-width: 70px; }
    .daily-scoreboard .dsb-name { min-width: 80px; }
}

/* ---------- Cards SofaScore destacados (helper de jogos) ---------- */
.tg-intro {
    background: #fff8dc;
    border: 1px dashed var(--br-yellow);
    border-radius: 6px;
    padding: 10px;
    margin: 0 0 12px;
    font-size: 0.92rem;
}
.tg-sofa-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    margin-bottom: 14px;
}
.tg-sofa-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #ff6900 0%, #ff8533 100%);
    color: #fff;
    text-decoration: none;
    padding: 10px 12px;
    border-radius: 8px;
    border: 2px solid #d95400;
    transition: transform .15s, box-shadow .15s;
    min-height: 64px;
}
.tg-sofa-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 0 #d95400;
}
.tg-sofa-flag {
    font-size: 1.8rem;
    line-height: 1;
    flex-shrink: 0;
}
.tg-sofa-flag .flag { border-radius: 3px; }
.tg-sofa-body { line-height: 1.2; flex: 1; min-width: 0; }
.tg-sofa-team {
    font-weight: 700;
    font-size: 0.95rem;
    text-shadow: 1px 1px 0 rgba(0,0,0,.3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tg-sofa-cta { font-size: 0.78rem; opacity: .95; }
.tg-sofa-h2h {
    background: linear-gradient(135deg, #4a148c 0%, #7b1fa2 100%);
    border-color: #311b92;
    text-align: center;
}
.tg-sofa-h2h:hover { box-shadow: 0 4px 0 #311b92; }
.tg-sofa-h2h .tg-sofa-flag { font-size: 1.4rem; }
.tg-sofa-h2h .tg-sofa-team { font-size: 0.82rem; }

.tg-cup-stats {
    border-top: 1px dashed var(--line);
    padding-top: 12px;
    margin-top: 12px;
}
.tg-cup-stats h4 { margin: 0 0 8px; font-size: 0.95rem; color: var(--br-blue); }

@media (max-width: 600px) {
    .tg-sofa-grid { grid-template-columns: 1fr; }
    .tg-sofa-card { min-height: auto; }
}

/* Header sem linha de estrelas superior: ajuste de padding em mobile */
@media (max-width: 540px) {
    .site-header { padding-top: 70px; }
}

/* ---------- Lista de últimos resultados SofaScore ---------- */
.tg-recent { margin-top: 10px; }
.tg-recent strong { font-size: 0.85rem; color: var(--br-blue); }
.tg-recent-list {
    list-style: none;
    padding: 0;
    margin: 6px 0 0;
    font-size: 0.82rem;
}
.tg-recent-list li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 6px;
    padding: 3px 4px;
    border-bottom: 1px dotted #eee;
    align-items: center;
}
.tg-r-date { color: var(--muted); font-size: 0.8em; min-width: 60px; }
.tg-r-vs { color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-r-score {
    font-weight: bold;
    padding: 1px 6px;
    border-radius: 3px;
    color: #fff;
    min-width: 36px;
    text-align: center;
}
.tg-r-score.form-V { background: #3a7; }
.tg-r-score.form-E { background: #999; }
.tg-r-score.form-D { background: #c33; }

.tg-fallback {
    text-align: center;
    background: #fff8e1;
    border: 1px dashed #fc0;
    border-radius: 6px;
    padding: 12px;
}

/* ---------- Palpitômetro ---------- */
.phase-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.phase-tab {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: #eef;
    border: 2px solid var(--line);
    border-radius: 18px;
    text-decoration: none;
    color: var(--br-blue);
    font-weight: 600;
    font-size: 0.88rem;
    transition: all .15s;
}
.phase-tab:hover { background: #dde; }
.phase-tab.active { background: var(--br-blue); color: #fff; border-color: var(--br-blue); }
.phase-tab-count {
    background: rgba(0,0,0,.15);
    border-radius: 10px;
    padding: 0 6px;
    font-size: 0.78rem;
}
.phase-tab.active .phase-tab-count { background: rgba(255,255,255,.25); }

.palpitometro-table .pm-game { text-align: left; min-width: 150px; }
.palpitometro-table .pm-matchup { display: flex; align-items: center; gap: 4px; white-space: nowrap; font-size: 0.9rem; }
.palpitometro-table .pm-result { min-width: 56px; font-family: Impact, sans-serif; }
.palpitometro-table th, .palpitometro-table td {
    border: 1px solid var(--line);
    padding: 6px;
    text-align: center;
    vertical-align: middle;
}
/* Cabeçalho mantém o fundo AZUL padrão da .admin-table. Só ajustamos a cor dos
   links de jogador pra AMARELO (igual o texto do header), que antes ficavam azuis
   e sumiam no fundo azul. NÃO mexer no background. */
.palpitometro-table thead th .profile-link,
.palpitometro-table thead th .profile-link strong {
    color: var(--br-yellow) !important;
    border-bottom: 1px dotted var(--br-yellow);
    font-weight: 700;
}
.palpitometro-table thead th .profile-link:hover,
.palpitometro-table thead th .profile-link:hover strong {
    color: #fff !important;
    border-bottom-color: #fff;
}

/* ---------- Link curto personalizado (slug) ---------- */
.myslug-box {
    margin-top: 12px;
    padding: 12px;
    background: #f0f8ff;
    border: 2px dashed var(--br-blue);
    border-radius: 8px;
}
.myslug-box h3 { margin: 0 0 4px; font-size: 1rem; color: var(--br-blue); }
.myslug-row {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 8px;
}
.myslug-prefix {
    font-family: 'Courier New', monospace;
    font-size: 0.82rem;
    color: var(--muted);
    white-space: nowrap;
}
#slug-input {
    flex: 1;
    min-width: 120px;
    padding: 6px 8px;
    border: 2px solid var(--br-blue);
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.95rem;
}
.myslug-feedback { margin-top: 6px; font-size: 0.88rem; min-height: 1.2em; }
.myslug-feedback.ok { color: #060; font-weight: bold; }
.myslug-feedback.erro { color: #c00; font-weight: bold; }
.myslug-current {
    margin-top: 8px;
    padding: 8px;
    background: #e6ffe6;
    border-radius: 4px;
    font-size: 0.9rem;
    word-break: break-all;
}
.myslug-current a { color: var(--br-blue); }

/* ---------- Slug no admin ---------- */
.slug-cell { min-width: 160px; }
.slug-input-row { display: flex; gap: 2px; }
.slug-admin-input {
    width: 100px;
    padding: 3px 5px;
    border: 1px solid var(--line);
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 0.82rem;
}
.slug-preview {
    margin-top: 4px;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 4px;
    word-break: break-all;
}
.slug-preview a { color: var(--br-blue); }

/* ---------- Meus Palpites (entrada por alias) ---------- */
.meus-palpites-card { max-width: 520px; margin: 0 auto; }
.mp-form { margin: 14px 0; }
.mp-input-row { display: flex; gap: 6px; }
.mp-input-row input {
    flex: 1;
    padding: 10px 12px;
    border: 2px solid var(--br-blue);
    border-radius: 6px;
    font-size: 1.05rem;
    font-family: 'Courier New', monospace;
}
.mp-err {
    background: #ffe6e6;
    border: 1px solid #c00;
    color: #900;
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 10px;
    font-size: 0.9rem;
}
@media (max-width: 480px) {
    .mp-input-row { flex-direction: column; }
}

/* Alerta de segurança no editor de slug */
.myslug-alert {
    background: #fff3cd;
    border: 2px solid #e0a800;
    border-radius: 6px;
    padding: 8px 10px;
    margin: 8px 0;
    font-size: 0.86rem;
    color: #664d03;
    line-height: 1.35;
}