/* Extensões competitivas. Usa os mesmos tokens da Arena. */
.af-page { padding-top: 34px; padding-bottom: 64px; }
.af-page [hidden], .arena-broadcast [hidden] { display: none !important; }
body.is-spectator #appMain { display: block !important; }
.af-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.af-header h1 { font-size: clamp(32px, 5vw, 54px); margin: 10px 0; }
.af-header p { color: var(--muted, #9AA0A6); max-width: 650px; }
.af-eyebrow { color: var(--blue, #FF7A00); font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; }
.af-section { margin-top: 30px; scroll-margin-top: 100px; }
.af-section-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
.af-section-head h2 { font-size: 25px; }
.af-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.af-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.af-main-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 22px; align-items: start; }
.af-panel { padding: 24px; border: 1px solid var(--line, #303641); border-radius: 12px; background: var(--panel, #1B1F26); min-width: 0; }
.af-panel h3 { font-size: 22px; margin-bottom: 10px; }
.af-panel p { color: var(--muted, #9AA0A6); }
.af-panel + .af-panel { margin-top: 14px; }
.af-grid > .af-panel { margin: 0; }
.af-stack > .af-panel { margin-top: 0; }
.af-crown { background: radial-gradient(ellipse at 90% 0, #FF7A0018, transparent 55%), var(--panel, #1B1F26); border-color: #FF7A0045; }
.af-crown-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.af-crown-mark { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 12px; color: var(--orange, #FF7A00); background: #FF7A0012; border: 1px solid #FF7A003b; }
.af-crown-mark svg { width: 29px; height: 29px; }
.af-holder { font-family: var(--display, sans-serif); font-size: clamp(30px, 5vw, 48px); color: var(--text, #F4F5F7); font-weight: 700; margin: 20px 0 6px; line-height: 1.1; overflow-wrap: anywhere; }
.af-stats { display: flex; gap: 24px; margin: 20px 0; flex-wrap: wrap; }
.af-stats strong { color: var(--text, #F4F5F7); display: block; font: 700 26px var(--display, sans-serif); }
.af-stats span { color: var(--muted, #9AA0A6); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.af-tag { display: inline-flex; align-items: center; gap: 6px; color: var(--blue, #FF7A00); background: #FF7A0014; border: 1px solid #FF7A0033; padding: 5px 9px; border-radius: 5px; font-size: 11px; font-weight: 700; letter-spacing: .03em; }
.af-tag-orange { color: #ffaf63; border-color: #FF7A0040; background: #FF7A0012; }
.af-tag-green { color: #34e09a; border-color: #34e09a35; background: #34e09a0d; }
.af-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-top: 16px; }
.af-actions a { text-decoration: none; }
.af-stack { display: grid; gap: 14px; }
.af-form { display: grid; gap: 14px; }
.af-form label { display: grid; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted, #9AA0A6); }
.af-form input, .af-form select, .af-form textarea, .af-filter {
  width: 100%; min-height: 43px; padding: 10px 12px; color: var(--text, #F4F5F7); font: 400 14px var(--font, sans-serif);
  background: #0B0D10; border: 1px solid var(--line-strong, #474E59); border-radius: 6px; outline: none;
}
.af-form input:focus, .af-form select:focus, .af-form textarea:focus, .af-filter:focus { border-color: var(--blue, #FF7A00); box-shadow: 0 0 0 2px #FF7A0020; }
.af-form textarea { resize: vertical; min-height: 88px; }
.af-form small, .af-note { color: var(--muted, #9AA0A6); font-size: 12px; line-height: 1.6; }
.af-form input[type=color] { padding: 4px; height: 43px; }
.af-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.af-roster { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 10px; }
.af-roster li { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line, #303641); padding-top: 10px; }
.af-person { display: flex; align-items: center; gap: 9px; min-width: 0; }
.af-person b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #303641; }
.af-avatar-placeholder { display: grid; place-items: center; font-weight: 700; color: #F4F5F7; flex: 0 0 auto; }
.af-empty { padding: 24px 16px; text-align: center; border: 1px dashed var(--line-strong, #474E59); border-radius: 8px; color: var(--muted, #9AA0A6); font-size: 13px; }
.af-error { padding: 12px 14px; border-radius: 6px; color: #ffb3bd; background: #ff546810; border: 1px solid #ff546833; font-size: 13px; }
.af-inline-meta { display: flex; gap: 8px 14px; flex-wrap: wrap; color: var(--muted, #9AA0A6); font-size: 12px; margin-top: 10px; }
.af-series-teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 14px; align-items: center; margin: 17px 0; }
.af-series-teams b { font: 700 22px var(--display, sans-serif); overflow-wrap: anywhere; }
.af-series-teams b:last-child { text-align: right; }
.af-series-score { color: var(--orange, #FF7A00); font: 700 29px var(--display, sans-serif); white-space: nowrap; }
.af-map-list { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.af-map { border: 1px solid var(--line-strong, #474E59); padding: 8px 12px; color: var(--text, #F4F5F7); background: #232830; border-radius: 5px; cursor: pointer; font: 600 12px var(--font, sans-serif); }
.af-map:hover { border-color: var(--orange, #FF7A00); }
.af-map:disabled { opacity: .4; cursor: default; }
.af-series-roster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 12px 0; color: var(--muted, #9AA0A6); font-size: 11px; }
.af-series-roster span:last-child { text-align: right; }
.af-table-wrap { overflow-x: auto; }
.af-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.af-table th { color: var(--muted, #9AA0A6); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; text-align: left; padding: 12px 10px; }
.af-table td { padding: 13px 10px; border-top: 1px solid var(--line, #303641); }
.af-table td:last-child, .af-table th:last-child { text-align: right; }
.af-table tr:first-child td:first-child { color: var(--orange, #FF7A00); font-weight: 700; }
.af-filter { max-width: 145px; min-height: 38px; }
.af-creator { border-top: 3px solid var(--creator-color, #FF7A00); }
.af-creator-link { color: var(--text, #F4F5F7); text-decoration: none; }
.af-creator-link:hover { color: var(--blue, #FF7A00); }
.af-creator-hero { border-left: 4px solid var(--creator-color, #FF7A00); margin-top: 22px; }
.af-creator-hero h2 { font-size: 35px; margin-bottom: 10px; }
.af-creator-hero .af-eyebrow { color: var(--creator-color, #FF7A00); margin-bottom: 10px; }
.af-event { border: 1px solid var(--line, #303641); border-radius: 9px; padding: 18px; }
.af-event h3 { margin: 12px 0; font-size: 22px; }
.af-ad-text { margin-top: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.af-code { font-family: var(--mono, monospace); font-size: 18px; color: var(--blue, #FF7A00); letter-spacing: .1em; }
.af-divider { height: 1px; background: var(--line, #303641); margin: 22px 0; }
.af-tabbar { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0 28px; }
.af-tabbar a { color: var(--muted, #9AA0A6); padding: 8px 13px; font-size: 12px; text-decoration: none; border: 1px solid var(--line, #303641); border-radius: 5px; }
.af-tabbar a:hover { color: var(--text, #F4F5F7); border-color: var(--blue, #FF7A00); }
.af-loading { padding: 44px 0; color: var(--muted, #9AA0A6); text-align: center; }
.af-loading::before { content: ''; display: inline-block; vertical-align: middle; width: 14px; height: 14px; margin-right: 10px; border: 2px solid #FF7A0030; border-top-color: #FF7A00; border-radius: 50%; animation: af-spin .8s linear infinite; }
@keyframes af-spin { to { transform: rotate(360deg); } }
/* Uma fonte de navegador OBS com fundo transparente. */
body.arena-broadcast { margin: 0; min-height: 0; background: transparent !important; color: #F4F5F7; font-family: 'Manrope', 'Segoe UI', sans-serif; }
.af-overlay { width: min(1100px, calc(100vw - 40px)); margin: 20px auto; background: #1B1F26f2; border: 1px solid #FF7A0045; border-radius: 12px; box-shadow: 0 12px 40px #0005; overflow: hidden; }
.af-overlay-brand { display: flex; align-items: center; gap: 9px; padding: 12px 20px; font-size: 11px; font-weight: 800; letter-spacing: .18em; border-bottom: 1px solid #FF7A0025; }
.af-overlay-brand span:last-child { margin-left: auto; color: #9AA0A6; }
.af-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #FF7A00; box-shadow: 0 0 12px #FF7A0090; }
.af-overlay-title { text-align: center; color: #9AA0A6; font-size: 11px; text-transform: uppercase; letter-spacing: .16em; margin: 14px 15px 0; }
.af-scoreboard { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); padding: 16px 24px; align-items: center; gap: 12px; }
.af-score-team { display: flex; gap: 18px; align-items: center; justify-content: space-between; min-width: 0; }
.af-score-team b { font-size: clamp(17px, 3vw, 28px); overflow-wrap: anywhere; }
.af-score-team strong { font-size: 42px; line-height: 1; color: #FF7A00; }
.af-score-b strong { color: #FF7A00; }
.af-score-b b { text-align: right; }
.af-score-vs { color: #9AA0A6; font-weight: 800; text-align: center; font-size: 12px; }
.af-overlay-status { margin: 0; padding: 10px 20px; text-align: center; color: #9AA0A6; font-size: 11px; border-top: 1px solid #FF7A0020; }
.af-offline .af-live-dot { background: #ffc24a; box-shadow: none; }
.af-broadcast-events { list-style: none; margin: 14px 20px; padding: 0; display: grid; gap: 8px; }
.af-broadcast-events li { display: flex; justify-content: space-between; gap: 20px; background: #232830; padding: 12px 14px; border-radius: 5px; font-size: 14px; }
.af-broadcast-events span { color: #9AA0A6; font-size: 12px; }
@media (max-width: 850px) { .af-main-grid, .af-grid-three { grid-template-columns: 1fr; } .af-header { align-items: flex-start; } }
@media (max-width: 580px) { .af-grid, .af-form-row { grid-template-columns: 1fr; } .af-header { display: grid; } .af-panel { padding: 19px; } .af-section-head { align-items: flex-start; } .af-scoreboard { padding: 16px 12px; gap: 6px; } .af-score-team { gap: 8px; } .af-score-team strong { font-size: 32px; } }
@media (prefers-reduced-motion: reduce) { .af-loading::before { animation: none; } }

/* Keep the expanded navigation within the existing header on desktop. */
body.is-member .topbar-inner { gap: 18px; }
body.is-member .nav { min-width: 0; flex: 1; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
body.is-member .nav a { padding-inline: 10px; }
body.is-member .topbar-right, body.is-member .brand { flex-shrink: 0; }
.af-toolbar { display: flex; gap: 10px; flex-wrap: wrap; padding: 18px 24px; }
@media (max-width: 850px) { body.is-member .nav { flex: 1 0 100%; } }