/* F-Manager — sistema visual. */
/* Direção: retrô "estádio à noite". Neutros puxados para o verde do gramado, destaque no âmbar dos placares e
   refletores, tudo em fonte de pixel: Silkscreen nos títulos, botões e números, Tiny5 no texto corrido (as peças retrô ficam em retro.css). Tema escuro por padrão; o claro é um "dia de jogo".
   Layout: menu lateral fixo no desktop; no celular, barra inferior com os itens principais + "Mais". */
:root {
  --bg: #0d1512; --bg2: #111c18; --panel: #15211c; --panel2: #1b2a24; --panel3: #223a30;
  --line: #2b4137; --line2: #34503f; --edge: #3b5a4c; --shade: #060b09;
  --frame: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='14' shape-rendering='crispEdges'><rect x='2' y='2' width='8' height='8' fill='%2315211c'/><rect x='2' y='0' width='8' height='1' fill='%233b5a4c'/><rect x='1' y='1' width='10' height='1' fill='%233b5a4c'/><rect x='0' y='2' width='2' height='8' fill='%233b5a4c'/><rect x='10' y='2' width='2' height='8' fill='%233b5a4c'/><rect x='1' y='10' width='10' height='1' fill='%233b5a4c'/><rect x='2' y='11' width='8' height='1' fill='%233b5a4c'/><rect x='2' y='12' width='8' height='2' fill='%23060b09'/></svg>");
  --frame-accent: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='14' shape-rendering='crispEdges'><rect x='2' y='2' width='8' height='8' fill='%2315211c'/><rect x='2' y='0' width='8' height='1' fill='%23f2b134'/><rect x='1' y='1' width='10' height='1' fill='%23f2b134'/><rect x='0' y='2' width='2' height='8' fill='%23f2b134'/><rect x='10' y='2' width='2' height='8' fill='%23f2b134'/><rect x='1' y='10' width='10' height='1' fill='%23f2b134'/><rect x='2' y='11' width='8' height='1' fill='%23f2b134'/><rect x='2' y='12' width='8' height='2' fill='%23060b09'/></svg>");
  --text: #e8eee8; --muted: #9db0a5; --muted-strong: #c7d3cc; --faint: #6b8076;
  --accent: #f2b134; --accent-hover: #f7c255; --accent-ink: #231703;
  --accent2: #5ec2f2;
  --gold: #f2c94c; --silver: #c9d2cc; --bronze: #cd8a52;
  --good: #5fd38a; --danger: #ff6b57; --warn: #ffa94d; --warn-text: #f6c88a; --danger-text: #ffb3a6;
  --glow: color-mix(in srgb, var(--accent) 7%, transparent);
  --overlay: rgba(3, 8, 6, 0.72);
  --radius: 0; --radius-sm: 0;
  --shadow: 0 4px 0 var(--shade);
  --font: 'Tiny5', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  --font-pixel: 'Silkscreen', 'Courier New', monospace;
  --font-display: var(--font-pixel);
  --mono: 'Cascadia Mono', 'Consolas', ui-monospace, monospace;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #e6ede2; --bg2: #dde6d9; --panel: #fbf8ec; --panel2: #f1eddc; --panel3: #e6e0c9;
    --line: #c9d3c3; --line2: #aebda9; --edge: #1d2a22; --shade: #9fb09a;
    --frame: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='14' shape-rendering='crispEdges'><rect x='2' y='2' width='8' height='8' fill='%23fbf8ec'/><rect x='2' y='0' width='8' height='1' fill='%231d2a22'/><rect x='1' y='1' width='10' height='1' fill='%231d2a22'/><rect x='0' y='2' width='2' height='8' fill='%231d2a22'/><rect x='10' y='2' width='2' height='8' fill='%231d2a22'/><rect x='1' y='10' width='10' height='1' fill='%231d2a22'/><rect x='2' y='11' width='8' height='1' fill='%231d2a22'/><rect x='2' y='12' width='8' height='2' fill='%239fb09a'/></svg>"); --frame-accent: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='14' shape-rendering='crispEdges'><rect x='2' y='2' width='8' height='8' fill='%23fbf8ec'/><rect x='2' y='0' width='8' height='1' fill='%23e09b1a'/><rect x='1' y='1' width='10' height='1' fill='%23e09b1a'/><rect x='0' y='2' width='2' height='8' fill='%23e09b1a'/><rect x='10' y='2' width='2' height='8' fill='%23e09b1a'/><rect x='1' y='10' width='10' height='1' fill='%23e09b1a'/><rect x='2' y='11' width='8' height='1' fill='%23e09b1a'/><rect x='2' y='12' width='8' height='2' fill='%239fb09a'/></svg>");
    --text: #17231c; --muted: #4f6158; --muted-strong: #2f3f37; --faint: #6f7f73;
    --accent: #e09b1a; --accent-hover: #eba52b; --accent-ink: #1f1402;
    --accent2: #2b72ad;
    --gold: #a77a06; --silver: #7d8a83; --bronze: #a8642c;
    --good: #1f7a3a; --danger: #c4402b; --warn: #9a5408; --warn-text: #8a4c06; --danger-text: #9b2f1f;
    --glow: color-mix(in srgb, var(--accent) 12%, transparent);
    --overlay: rgba(14, 23, 20, 0.45);
    --shadow: 0 4px 0 var(--shade);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #e6ede2; --bg2: #dde6d9; --panel: #fbf8ec; --panel2: #f1eddc; --panel3: #e6e0c9;
  --line: #c9d3c3; --line2: #aebda9; --edge: #1d2a22; --shade: #9fb09a;
  --frame: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='14' shape-rendering='crispEdges'><rect x='2' y='2' width='8' height='8' fill='%23fbf8ec'/><rect x='2' y='0' width='8' height='1' fill='%231d2a22'/><rect x='1' y='1' width='10' height='1' fill='%231d2a22'/><rect x='0' y='2' width='2' height='8' fill='%231d2a22'/><rect x='10' y='2' width='2' height='8' fill='%231d2a22'/><rect x='1' y='10' width='10' height='1' fill='%231d2a22'/><rect x='2' y='11' width='8' height='1' fill='%231d2a22'/><rect x='2' y='12' width='8' height='2' fill='%239fb09a'/></svg>"); --frame-accent: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='14' shape-rendering='crispEdges'><rect x='2' y='2' width='8' height='8' fill='%23fbf8ec'/><rect x='2' y='0' width='8' height='1' fill='%23e09b1a'/><rect x='1' y='1' width='10' height='1' fill='%23e09b1a'/><rect x='0' y='2' width='2' height='8' fill='%23e09b1a'/><rect x='10' y='2' width='2' height='8' fill='%23e09b1a'/><rect x='1' y='10' width='10' height='1' fill='%23e09b1a'/><rect x='2' y='11' width='8' height='1' fill='%23e09b1a'/><rect x='2' y='12' width='8' height='2' fill='%239fb09a'/></svg>");
  --text: #17231c; --muted: #4f6158; --muted-strong: #2f3f37; --faint: #6f7f73;
  --accent: #e09b1a; --accent-hover: #eba52b; --accent-ink: #1f1402;
  --accent2: #2b72ad;
  --gold: #a77a06; --silver: #7d8a83; --bronze: #a8642c;
  --good: #1f7a3a; --danger: #c4402b; --warn: #9a5408; --warn-text: #8a4c06; --danger-text: #9b2f1f;
  --glow: color-mix(in srgb, var(--accent) 12%, transparent);
  --overlay: rgba(14, 23, 20, 0.45);
  --shadow: 0 4px 0 var(--shade);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(1100px 520px at 85% -12%, var(--glow), transparent 62%), var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent2); text-decoration: none; }
/* Realces de :hover só onde existe ponteiro de verdade: no toque eles grudam no último item tocado e parecem seleção. */
@media (hover: hover) { a:hover { text-decoration: underline; } }
h1, h2, h3, h4 { margin: 0 0 8px; font-weight: 600; letter-spacing: 0.2px; text-wrap: balance; }
h1, h2 { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.4px; line-height: 1.1; }
h1 { font-size: 32px; text-transform: uppercase; }
h2 { font-size: 24px; }
h3 { font-size: 16px; font-weight: 700; }
h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
p { margin: 0 0 8px; }
small, .small { font-size: 12px; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.good { color: var(--good); }
.bad { color: var(--danger); }
.warn { color: var(--warn); }
.gold { color: var(--gold); }
.right { text-align: right; }
.center { text-align: center; }
.nowrap { white-space: nowrap; }
.mono { font-family: var(--mono); }
.hidden { display: none !important; }
.show-sm { display: none; }
hr { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }

/* ---------- layout ---------- */
.shell { display: grid; grid-template-columns: 228px 1fr; grid-template-rows: 64px 1fr; height: 100vh; }
.sidebar { grid-row: 1 / span 2; background: var(--bg2); border-right: 1px solid var(--line); display: flex; flex-direction: column; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 14px; font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.nav { display: flex; flex-direction: column; padding: 6px 10px; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; color: var(--muted); border-radius: var(--radius-sm); font-size: 15px; font-weight: 600; }
@media (hover: hover) { .nav a:hover { background: var(--panel); color: var(--text); text-decoration: none; } }
.nav a.active { background: var(--panel); color: var(--text); box-shadow: inset 3px 0 0 var(--accent); }
.nav a.active .ico { color: var(--accent); }
.nav .ico { width: 20px; height: 20px; display: inline-flex; flex-shrink: 0; }
.nav .ico svg { width: 100%; height: 100%; }
.nav-more, .nav-sheet { display: none; }
.nav .count { margin-left: auto; background: var(--accent); color: var(--accent-ink); border-radius: 10px; padding: 0 7px; font-size: 11px; font-weight: 700; }
.sidebar-foot { margin-top: auto; padding: 14px 18px; border-top: 1px solid var(--line); font-size: 12px; color: var(--faint); }
.topbar { display: flex; align-items: center; gap: 14px; padding: 0 18px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(6px); }
.main { overflow-y: auto; padding: 20px 24px 40px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.page-head .sub { color: var(--muted); }

.grid { display: grid; gap: 16px; align-items: start; }
.grid > *, .col > *, .row > * { min-width: 0; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-main { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.span2 { grid-column: span 2; }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.col { display: flex; flex-direction: column; gap: 8px; }
.spacer { flex: 1; }
@media (max-width: 1100px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-main { grid-template-columns: 1fr; } }

/* ---------- cartões ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; min-width: 0; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -2px 0 10px; }
.card-h h3 { margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }
.card.flat { box-shadow: none; }
.card.accent { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.kpi { background: var(--panel2); border-radius: var(--radius-sm); padding: 10px 12px; min-width: 0; }
.kpi .k { font-size: 11px; text-transform: uppercase; letter-spacing: 1.1px; color: var(--muted); font-weight: 600; }
.kpi .v { font-family: var(--font-display); font-size: 26px; font-weight: 700; line-height: 1.1; margin-top: 2px; font-variant-numeric: tabular-nums; }
.empty { padding: 26px; text-align: center; color: var(--muted); border: 1px dashed var(--line2); border-radius: var(--radius); }

/* ---------- botões e formulários ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line2); background: var(--panel); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; transition: background 0.12s, border-color 0.12s, transform 0.05s; white-space: nowrap; }
@media (hover: hover) { .btn:hover { background: var(--panel3); border-color: var(--faint); } }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
@media (hover: hover) { .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } }
.btn-danger { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, transparent); }
@media (hover: hover) { .btn-danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); } }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
@media (hover: hover) { .btn-ghost:hover { color: var(--text); background: var(--panel2); } }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-lg { padding: 12px 20px; font-size: 16px; }
.btn-block { width: 100%; }
.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; }
.btn-group .btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.btn-group .btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
label.field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.8px; }
input, select, textarea { font: inherit; color: var(--text); background: var(--bg2); border: 1px solid var(--line2); border-radius: var(--radius-sm); padding: 9px 11px; outline: none; text-transform: none; letter-spacing: 0; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
input[type='range'] { padding: 0; accent-color: var(--accent); }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.choice { border: 1px solid var(--line2); background: var(--panel2); border-radius: var(--radius); padding: 12px; cursor: pointer; text-align: left; color: var(--text); font: inherit; transition: border-color 0.12s, background 0.12s; }
@media (hover: hover) { .choice:hover { border-color: var(--faint); } }
.choice.selected { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); box-shadow: inset 0 0 0 1px var(--accent); }
.choice .t { font-weight: 700; }
.choice .d { color: var(--muted); font-size: 12px; margin-top: 3px; }

/* ---------- etiquetas, números ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 700; background: var(--panel3); color: var(--muted); border: 1px solid var(--line2); white-space: nowrap; }
.badge.green { background: color-mix(in srgb, var(--good) 12%, transparent); color: var(--good); border-color: color-mix(in srgb, var(--good) 35%, transparent); }
.badge.red { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.badge.yellow { background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.badge.blue { background: color-mix(in srgb, var(--accent2) 12%, transparent); color: var(--accent2); border-color: color-mix(in srgb, var(--accent2) 35%, transparent); }
.badge.gold { background: color-mix(in srgb, var(--gold) 12%, transparent); color: var(--gold); border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.pos { display: inline-block; min-width: 34px; text-align: center; padding: 2px 6px; border-radius: 4px; font-size: 11px; font-weight: 800; background: var(--panel3); color: var(--text); }
.pos.GK { background: #8a6d00; } .pos.DEF { background: #1d4f91; } .pos.MID { background: #1d7a4d; } .pos.ATT { background: #9a2a2a; }
.ovr { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 28px; padding: 0 6px; border-radius: 5px; font-family: var(--font-display); font-weight: 700; font-size: 18px; color: #0b130f; font-variant-numeric: tabular-nums; }
.ovr.lg { min-width: 64px; height: 58px; font-size: 38px; border-radius: 8px; }
.ovr-elite { background: linear-gradient(135deg, #f8d66b, #c99a1e); }
.ovr-great { background: linear-gradient(135deg, #5ff2a5, #18b66a); }
.ovr-good { background: linear-gradient(135deg, #a4e46a, #6aa83b); }
.ovr-ok { background: linear-gradient(135deg, #f2c35b, #c98d22); }
.ovr-low { background: linear-gradient(135deg, #f07a63, #b6402c); color: #fff; }
.rating { display: inline-block; min-width: 34px; text-align: center; padding: 1px 6px; border-radius: 4px; font-weight: 800; font-size: 12px; }
.rating.r-top { background: #1e88e5; color: #fff; } .rating.r-good { background: #2e9e5b; color: #fff; } .rating.r-avg { background: #b7952b; color: #111; } .rating.r-bad { background: #c0392b; color: #fff; }
.bar { position: relative; height: 6px; background: var(--panel3); border-radius: 6px; overflow: hidden; }
.bar > i { position: absolute; inset: 0 auto 0 0; background: var(--good); border-radius: 6px; }
.bar.warn > i { background: var(--warn); }
.bar.bad > i { background: var(--danger); }
.bar.blue > i { background: var(--accent2); }
.meter { display: grid; grid-template-columns: 110px 1fr 36px; gap: 8px; align-items: center; font-size: 13px; }
.meter .lbl { color: var(--muted); }
.result { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 4px; font-size: 11px; font-weight: 800; color: #fff; }
.result.V { background: #2e9e5b; } .result.E { background: #7a8794; } .result.D { background: #c0392b; }

/* ---------- escudos e bandeiras ---------- */
.crest { display: inline-block; vertical-align: middle; object-fit: contain; flex-shrink: 0; }
.crest-svg { display: inline-flex; vertical-align: middle; flex-shrink: 0; }
.flag-img { display: inline-block; vertical-align: middle; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14); flex-shrink: 0; }
.flag { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.team { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.team .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- tabelas ---------- */
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { text-align: left; font-weight: 600; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; padding: 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 7px 8px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); vertical-align: middle; }
@media (hover: hover) { .table tr:hover td { background: rgba(255, 255, 255, 0.02); } }
.table tr.me td { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.table tr.zone-ucl td:first-child { box-shadow: inset 3px 0 0 var(--accent2); }
.table tr.zone-up td:first-child { box-shadow: inset 3px 0 0 var(--good); }
.table tr.zone-down td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.card > .table, .card > .table-wrap { margin: 0 -4px; width: calc(100% + 8px); }

/* ---------- abas ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; overflow-x: auto; }
.tab { padding: 9px 14px; color: var(--muted); border: 0; background: none; font: inherit; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
@media (hover: hover) { .tab:hover { color: var(--text); } }
.tab.active { color: var(--text); border-bottom-color: var(--accent); }
.tab:focus-visible, .btn:focus-visible, .option:focus-visible, .choice:focus-visible, .nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- barra de tempo ---------- */
.timebar { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.timebar .date { font-weight: 700; font-size: 15px; white-space: nowrap; }
.timebar .date small { display: block; font-weight: 400; color: var(--muted); font-size: 11px; }
.timebar .club { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--muted); }
.timebar .controls { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- linhas de jogos ---------- */
.fx-row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.fx-row:last-child { border-bottom: 0; }
.fx-teams { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fx-teams .team { max-width: 100%; }
.db-info { flex: 1; min-width: 0; }
@media (max-width: 760px) {
  .hero.db-hero { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: 'shirt . ovr' 'info info info'; gap: 10px; }
  .db-shirt { grid-area: shirt; } .db-ovr { grid-area: ovr; } .db-info { grid-area: info; }
  .db-shirt svg { width: 72px; height: 72px; }
  .fx-row { grid-template-columns: 92px minmax(0, 1fr); }
}

/* ---------- notícias ---------- */
.news { display: flex; flex-direction: column; }
.news-item { padding: 10px 2px; border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
.news-item:last-child { border-bottom: 0; }
.news-item .t { font-weight: 600; display: flex; gap: 8px; align-items: center; }
.news-item .x { color: var(--muted); font-size: 13px; margin-top: 2px; }
.news-item .d { color: var(--faint); font-size: 11px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex-shrink: 0; }
.dot.good { background: var(--good); } .dot.bad { background: var(--danger); } .dot.offer { background: var(--gold); } .dot.event { background: var(--accent2); }

/* ---------- modal, toast, ocupado ---------- */
.modal-back { position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 50; animation: fade 0.15s ease-out; }
.modal { width: min(640px, 100%); max-height: 90vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--line2); border-radius: 12px; box-shadow: var(--shadow); padding: 24px; }
.modal.wide { width: min(900px, 100%); }
.modal .tag { font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--accent); font-weight: 700; }
.modal h2 { margin-top: 4px; }
.options { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.option { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--line2); background: var(--bg2); color: var(--text); font: inherit; cursor: pointer; transition: border-color 0.12s, background 0.12s; }
@media (hover: hover) { .option:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); } }
.option .l { font-weight: 700; }
.option .h { color: var(--muted); font-size: 12px; }
.skip-list { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.45; }
.toasts { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 60; }
.toast { background: var(--panel3); border: 1px solid var(--line2); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 10px 14px; box-shadow: var(--shadow); max-width: 360px; animation: slide 0.2s ease-out; cursor: pointer; transition: opacity 0.18s ease, transform 0.18s ease; }
.toast.out { opacity: 0; transform: translateY(8px); pointer-events: none; }
.toast.error { border-left-color: var(--danger); }
.busy[hidden] { display: none; }
.busy[hidden] { display: none; }
.busy { position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: center; justify-content: center; z-index: 70; }
.busy-box { display: flex; align-items: center; gap: 12px; background: var(--panel2); border: 1px solid var(--line2); padding: 14px 20px; border-radius: 12px; box-shadow: var(--shadow); font-weight: 600; }
.spinner { width: 20px; height: 20px; border: 3px solid var(--line2); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Animações discretas; desligadas para quem prefere menos movimento.
   Troca de tela: nada de o conteúdo sumir e subir de novo a cada aba. O app.js troca o conteúdo num quadro só e,
   numa tela nova, esmaece o antigo no novo em ~0,15 s (View Transitions, ver abaixo). As barras só crescem na
   primeira visita a cada tela (#main[data-enter="first"]); ao voltar ou redesenhar depois de uma ação, já estão lá. */
@media (prefers-reduced-motion: no-preference) {
  .modal { animation: pop 0.2s ease-out; }
  .bar > i { transform-origin: left center; animation: grow 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .main:not([data-enter="first"]) .bar > i { animation: none; }
  .card { transition: border-color 0.2s ease, box-shadow 0.2s ease; }
  .option, .choice { transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; }
  @media (hover: hover) {
    .card:hover { border-color: var(--line2); }
    .option:hover { transform: translateX(2px); }
    .choice:hover { transform: translateY(-1px); }
  }
  .nav a { transition: background 0.15s ease, color 0.15s ease; }
  .scoreboard .score { transition: color 0.3s ease; }
  ::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.15s; animation-timing-function: ease-out; }
}
/* A casca não entra no esmaecer da troca de tela: a barra de abas e o topo mudam na hora (a aba tocada acende e
   afunda já no toque), só o conteúdo esmaece. */
.nav { view-transition-name: nav; }
#topbar { view-transition-name: topbar; }
::view-transition-group(nav), ::view-transition-group(topbar), ::view-transition-new(nav), ::view-transition-new(topbar) { animation: none; }
::view-transition-old(nav), ::view-transition-old(topbar) { display: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- partida ---------- */
.scoreboard { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; padding: 18px; }
.scoreboard .side { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-weight: 700; font-size: 16px; }
.scoreboard .score { font-family: var(--font-display); font-size: 64px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: 2px; white-space: nowrap; }
.scoreboard .minute { text-align: center; color: var(--accent); font-family: var(--font-display); font-size: 20px; font-weight: 700; }
.timeline { display: flex; flex-direction: column; gap: 6px; }
.tl-item { display: grid; grid-template-columns: 42px 22px 1fr; gap: 8px; align-items: start; padding: 6px 8px; border-radius: 6px; background: var(--bg2); }
.tl-item .m { color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.tl-item.goal.us { box-shadow: inset 3px 0 0 var(--good); }
.tl-item.goal.them { box-shadow: inset 3px 0 0 var(--danger); }
.tl-item.mine { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.moment-card { border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line)); background: radial-gradient(500px 200px at 50% 0, var(--glow), transparent), var(--panel); border-radius: var(--radius); padding: 18px; }
.moment-card .situ { font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.chance { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; }
.chance.alta { color: var(--good); } .chance.média { color: var(--warn); } .chance.baixa { color: var(--danger); } .chance.certa { color: var(--accent2); }

/* ---------- atleta ---------- */
.hero { display: flex; gap: 18px; align-items: center; }
.hero .name { font-size: 24px; font-weight: 700; }
.attr { display: grid; grid-template-columns: 1fr 36px; gap: 8px; padding: 4px 0; border-bottom: 1px solid color-mix(in srgb, var(--line) 50%, transparent); font-size: 13px; }
.attr .v { text-align: right; font-weight: 800; }
.v-elite { color: var(--gold); } .v-great { color: var(--good); } .v-good { color: #a4e46a; } .v-ok { color: var(--warn); } .v-low { color: var(--danger); }
.shirt { display: inline-flex; }
.pitch { position: relative; background: linear-gradient(180deg, #145a32, #0f4626); border: 1px solid #1f7a45; border-radius: 10px; aspect-ratio: 3 / 4; overflow: hidden; }
.pitch::before { content: ''; position: absolute; inset: 8% 6%; border: 2px solid rgba(255, 255, 255, 0.25); border-radius: 4px; }
.pitch::after { content: ''; position: absolute; left: 6%; right: 6%; top: 50%; border-top: 2px solid rgba(255, 255, 255, 0.25); }

/* ---------- menu e criação ---------- */
.landing { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 30px; }
.landing-box { width: min(980px, 100%); }
.logo-big { font-family: var(--font-display); font-size: 64px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; }
.logo-big b { color: var(--accent); }
.steps { display: flex; gap: 8px; margin: 12px 0 18px; flex-wrap: wrap; }
.step { padding: 6px 12px; border-radius: 20px; background: var(--panel2); color: var(--muted); font-size: 12px; font-weight: 700; border: 1px solid var(--line); }
.step.active { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.step.done { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.scout-card { background: linear-gradient(135deg, color-mix(in srgb, var(--accent2) 12%, transparent), color-mix(in srgb, var(--accent) 8%, transparent)); border: 1px solid color-mix(in srgb, var(--accent2) 35%, transparent); border-radius: 14px; padding: 18px; }
.scout-range { font-family: var(--font-display); font-size: 40px; font-weight: 700; letter-spacing: 1px; font-variant-numeric: tabular-nums; }

/* ---------- celular (por último, para vencer as regras base) ---------- */
@media (max-width: 760px) {
  /* Celular: menu vira barra inferior fixa; conteúdo rola acima dela. */
  .shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: 100dvh; }
  .sidebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; flex-direction: row; overflow: hidden;
    border-right: 0; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg2) 96%, transparent); backdrop-filter: blur(8px);
    padding-bottom: env(safe-area-inset-bottom, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
  .nav { flex-direction: row; padding: 4px 4px; gap: 0; width: 100%; }
  .nav a, .nav-more { position: relative; flex: 1 1 0; min-width: 0; flex-direction: column; align-items: center; gap: 2px; padding: 7px 2px 6px; font-size: 11px;
    font-weight: 600; text-align: center; border-radius: 8px; color: var(--muted); }
  .nav a.extra { display: none; }
  .nav-more { display: flex; border: 0; background: none; font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; }
  .nav a.active, .nav-more.active { box-shadow: inset 0 -2px 0 var(--accent); background: none; color: var(--text); }
  .nav-more.active .ico { color: var(--accent); }
  .nav .ico { width: 22px; height: 22px; }
  .nav .lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav .count { position: absolute; top: 2px; left: calc(50% + 6px); margin: 0; font-size: 10px; padding: 0 5px; }
  .nav-sheet { display: block; position: fixed; left: 0; right: 0; bottom: calc(58px + env(safe-area-inset-bottom, 0px)); z-index: 39;
    background: var(--panel); border-top: 1px solid var(--line2); border-radius: 14px 14px 0 0; box-shadow: var(--shadow);
    padding: 14px max(14px, env(safe-area-inset-right, 0px)) 12px max(14px, env(safe-area-inset-left, 0px));
    transform: translateY(110%); visibility: hidden; transition: transform 0.2s ease, visibility 0.2s; }
  .more-open .nav-sheet { transform: none; visibility: visible; }
  .nav-sheet-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .nav-sheet-grid a { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 10px;
    color: var(--muted-strong); font-size: 12px; font-weight: 600; text-align: center; }
  .nav-sheet-grid a.active { background: var(--panel2); color: var(--text); }
  .nav-sheet-grid a.active .ico { color: var(--accent); }
  .nav-sheet-grid .ico { width: 24px; height: 24px; display: inline-flex; }
  .nav-sheet-grid .ico svg { width: 100%; height: 100%; }
  .nav-sheet-grid .count { position: absolute; top: 4px; right: 14px; background: var(--accent); color: var(--accent-ink); border-radius: 10px; padding: 0 5px; font-size: 10px; font-weight: 700; }
  .brand, .sidebar-foot { display: none; }
  .topbar { padding: calc(8px + env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 8px max(12px, env(safe-area-inset-left, 0px)); flex-wrap: wrap; }
  .timebar { flex-wrap: wrap; gap: 8px; }
  .timebar .club { display: none; }
  .timebar .controls { margin-left: 0; width: 100%; justify-content: stretch; }
  .timebar .controls .btn { flex: 1; padding: 9px 6px; }
  .timebar .controls .badge { display: none; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .tabs { max-width: calc(100vw - 28px); }
  .span2 { grid-column: auto; }
  .main { padding: 14px max(14px, env(safe-area-inset-right, 0px)) calc(84px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px)); }
  h1 { font-size: 26px; }
  .hide-sm { display: none !important; }
  .show-sm { display: inline !important; }
  .table { font-size: 12px; }
  .table th, .table td { padding: 6px 5px; }
  .modal-back { align-items: flex-end; padding: 0; }
  .modal { width: 100%; max-height: 88vh; border-radius: 16px 16px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
  .scoreboard { gap: 8px; padding: 12px 4px; }
  .scoreboard .score { font-size: 34px; }
  .scoreboard .side { font-size: 13px; }
  .scoreboard .side .crest, .scoreboard .side .crest-svg svg { width: 52px; height: 52px; }
  .hero { flex-wrap: wrap; }
  .btn { min-height: 40px; }
  .btn-sm { min-height: 34px; }
  .kpi .v { font-size: 18px; }
  .toasts { left: 12px; right: 12px; bottom: calc(80px + env(safe-area-inset-bottom)); }
  .toast { max-width: none; padding: 8px 12px; font-size: 13px; line-height: 1.35; }
}

/* Início: forma recente e metas fixadas */
.form-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; align-items: center; font-size: 13px; }
.form-row .lbl { color: var(--muted); }
.form-chips { grid-column: 1 / -1; grid-row: 2; display: flex; gap: 4px; flex-wrap: wrap; min-width: 0; }
.goal-pin { display: flex; gap: 10px; align-items: flex-start; }
.goal-pin > span { font-size: 20px; line-height: 1.2; width: 24px; text-align: center; }
.goal-pin.done b { color: var(--good); }
.form-chips .rating { min-width: 30px; padding: 1px 4px; font-size: 11.5px; }

/* ---- editor de aparência (criação e configurações) */
.lk { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.lk-pv { flex: none; width: 224px; height: 224px; border-radius: var(--radius); background: linear-gradient(#2c6b3e, #235a33); border: 1px solid var(--line2); display: grid; place-items: center; overflow: hidden; }
.lk-img { width: 224px; height: 224px; image-rendering: pixelated; }
.lk-ctl { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.lk-row { display: flex; flex-direction: column; gap: 6px; }
.lk-h { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.lk-sw, .lk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.lk-dot { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--line2); background: var(--c); cursor: pointer; padding: 0; }
.lk-dot.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.lk-chip { min-height: 32px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line2); background: var(--panel2); color: var(--muted-strong); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.lk-chip.on { border-color: var(--accent); background: var(--glow); color: var(--text); }
.lk-dot:focus-visible, .lk-chip:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }
.lk-rand { align-self: flex-start; }
/* Número da camisa: selo na prévia, − / campo / + e atalhos */
.lk-pv { position: relative; }
.lk-badge { position: absolute; right: 8px; bottom: 8px; min-width: 40px; padding: 4px 6px 2px; text-align: center; font-family: var(--font-pixel); font-size: 20px; line-height: 1;
  color: #fff; background: rgba(8, 12, 10, 0.75); border: 2px solid #0f1512; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
.lk-badge[hidden] { display: none; }
.lk-num { display: inline-flex; align-items: stretch; gap: 4px; }
.lk-step { width: 40px; min-height: 40px; border: 2px solid var(--edge); background: var(--panel2); color: var(--text); font: inherit; font-size: 20px; font-weight: 700; cursor: pointer; box-shadow: 0 2px 0 var(--shade); touch-action: manipulation; }
.lk-step:active { transform: translateY(2px); box-shadow: none; }
.lk-num-in { width: 64px; min-height: 40px; text-align: center; font-family: var(--font-pixel); font-size: 20px; padding: 4px 6px; }
.lk-nchip { min-width: 40px; }
.lk-step:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }
@media (max-width: 520px) {
  .lk-pv { width: 168px; height: 168px; margin: 0 auto; }
  .lk-img { width: 168px; height: 168px; }
  .lk-dot { width: 36px; height: 36px; }
  .lk-chip { min-height: 36px; }
}
.pxi { image-rendering: pixelated; vertical-align: -0.2em; }

/* ---------- toque: cara de jogo, não de site ----------
   Sem o realce azul do navegador no toque, sem contorno de foco ao tocar (o :focus-visible do teclado continua),
   sem seleção de texto nem menu de toque longo nos controles (o texto de leitura continua selecionável) e com o
   retorno do próprio jogo: o controle afunda e escurece enquanto o dedo está nele. */
html { -webkit-tap-highlight-color: transparent; }
:focus:not(:focus-visible) { outline: none; }
button, .btn, .tab, .option, .choice, [data-action], [role="tab"], .topbar, .sidebar, .nav-sheet, .fs-btn,
a.cl-comp-card, a.cl-champ-card, a.cl-list-row, a.cl-league-link, a.cl-kpi-link, a.cl-club-tile {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation;
}
.nav img, .nav-sheet img, .btn img, .tab img, .option img { -webkit-user-drag: none; -webkit-touch-callout: none; }
a[href]:active, [data-action]:active:not(:disabled), .btn:active:not(:disabled), .tab:active, .fs-btn:active { filter: brightness(0.86); }
.option:active:not(:disabled), .choice:active:not(:disabled), .mt-zone:active:not(:disabled) { transform: translateY(2px); }
.tab:active { background: var(--panel2); }
/* Barra de baixo e folha "Mais": o item tocado vira um bloco mais escuro e o ícone afunda 2 px (um pixel do ícone). */
.nav a:active .ico, .nav-more:active .ico, .nav-sheet-grid a:active .ico { transform: translateY(2px); }
.nav a:active, .nav-more:active, .nav-sheet-grid a:active { background: color-mix(in srgb, var(--shade) 55%, transparent); }

/* Aperto (components/press.js): .is-pressed entra no toque e fica pelo menos 150 ms, mesmo num toque rápido; bem
   visível, como botão de jogo: afunda (perde a sombra de bloco), escurece e, nas opções, acende a borda. */
.btn.is-pressed:not(:disabled), .fs-btn.is-pressed { transform: translateY(3px); box-shadow: none; filter: brightness(0.78); }
.btn-primary.is-pressed:not(:disabled) { filter: brightness(0.82) saturate(1.15); }
.btn-ghost.is-pressed:not(:disabled) { background: var(--panel2); color: var(--text); filter: none; }
.option.is-pressed:not(:disabled), .choice.is-pressed:not(:disabled), .mt-zone.is-pressed:not(:disabled) {
  transform: translateY(2px); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--bg2));
}
.tab.is-pressed { background: var(--panel2); color: var(--text); }
.nav a.is-pressed, .nav-more.is-pressed, .nav-sheet-grid a.is-pressed { background: color-mix(in srgb, var(--accent) 24%, var(--panel)); color: var(--text); box-shadow: inset 0 3px 0 color-mix(in srgb, var(--shade) 60%, transparent); }
.nav a.is-pressed .ico, .nav-more.is-pressed .ico, .nav-sheet-grid a.is-pressed .ico { transform: translateY(2px); }
a[href].is-pressed:not(.btn):not(.nav a):not(.nav-sheet-grid a), [data-action].is-pressed:not(.btn):not(.option):not(.tab):not(button) { filter: brightness(0.8); transform: translateY(1px); }

/* ---------- carregando (rede lenta): uma faixa de blocos correndo embaixo do topo; nada some da tela ---------- */
.topbar { position: relative; }
.is-loading .topbar::after, .is-loading body:not(:has(.shell))::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; z-index: 5; pointer-events: none;
  background: linear-gradient(90deg, transparent 0 40%, var(--accent) 40% 60%, transparent 60%) 0 0 / 250% 100%;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 8px); mask: repeating-linear-gradient(90deg, #000 0 6px, transparent 6px 8px);
  animation: loadbar 0.9s steps(12, end) infinite;
}
.is-loading body:not(:has(.shell))::after { position: fixed; top: env(safe-area-inset-top, 0px); bottom: auto; z-index: 75; }
@keyframes loadbar { from { background-position: 100% 0; } to { background-position: 0 0; } }

/* ---------- tela cheia: botão fixo no canto de cima à direita (components/immersive.js) ----------
   Fora de #app, então nunca é redesenhado. Fica no topo da carreira (que reserva o canto no computador; no celular
   ocupa a sobra à direita da data) e ao lado do "Sair" no menu. Área de toque de 48 px. */
.fs-btn {
  position: fixed; z-index: 45; top: calc(12px + env(safe-area-inset-top, 0px)); right: calc(14px + env(safe-area-inset-right, 0px));
  width: 40px; height: 40px; display: grid; place-items: center; padding: 0;
  border: 2px solid var(--edge); background: var(--panel); color: var(--text); box-shadow: 0 3px 0 var(--shade); cursor: pointer;
}
.fs-btn::before { content: ''; position: absolute; inset: -6px; }
.fs-btn svg { display: block; width: 24px; height: 24px; }
.fs-btn:active { transform: translateY(3px); box-shadow: none; }
.fs-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .fs-btn:hover { background: var(--panel3); color: var(--accent); } }
.is-fullscreen .fs-btn { color: var(--accent); }
body:not(:has(.shell)) .fs-btn { top: calc(16px + env(safe-area-inset-top, 0px)); right: calc(16px + env(safe-area-inset-right, 0px)); }
.has-fs .topbar { padding-right: 68px; }
/* Fora da carreira o conteúdo começa abaixo do recorte da tela (notch) no app instalado ou em tela cheia. */
#app:not(:has(> .shell)) { padding-top: env(safe-area-inset-top, 0px); }
@media (max-width: 760px) {
  .fs-btn { top: calc(7px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); }
  .has-fs .topbar { padding-right: max(12px, env(safe-area-inset-right, 0px)); }
  .has-fs .timebar .date { padding-right: 48px; }
}

/* Comemoração de título/prêmio (components/celebrate.js): troféu grande com brilho, nome e campanha. */
.cel { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 6px 4px 2px; overflow: hidden; }
.cel-rays { position: absolute; top: -40px; left: 50%; width: 320px; height: 320px; margin-left: -160px; pointer-events: none; opacity: .35;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--gold) 45%, transparent) 0 8deg, transparent 8deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 0 35%, transparent 70%); mask: radial-gradient(circle, #000 0 35%, transparent 70%); animation: cel-spin 18s linear infinite; }
.cel-trophy { position: relative; display: grid; place-items: center; width: 150px; height: 150px; margin-top: 6px; }
.cel-trophy .px-trophy { image-rendering: pixelated; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .35)) drop-shadow(0 0 18px color-mix(in srgb, var(--gold) 55%, transparent)); animation: cel-pop .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.cel-name { margin: 2px 0 0; font-family: var(--font-pixel); font-size: 20px; line-height: 1.3; color: var(--gold); }
.cel-season { color: var(--text); opacity: .8; }
.cel-text { margin: 0; max-width: 34ch; }
.cel-line { margin: 0; font-size: 13px; color: var(--muted); }
.cel-go { margin-top: 6px; min-width: 220px; }
.px-trophy { image-rendering: pixelated; vertical-align: middle; }
@keyframes cel-spin { to { transform: rotate(360deg); } }
@keyframes cel-pop { from { transform: scale(.4) translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cel-rays, .cel-trophy .px-trophy { animation: none; } }